fu-hsi-web/src/views/caseDetails/components/CaseEvidence.vue

<!--
 * @description: 案件证据
 * @fileName: CaseEvidence
 * @author: 17076
 * @date: 2024/6/26-下午3:09
 * @version: V1.0.0
-->

<template>
  <div class="evidence-content">
    <div v-if="isEdit" class="flex-row" style="align-items: center; justify-content: space-between">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">添加证据</el-button>
      <el-input v-model="searchName" placeholder="搜索名称" style="width: 300px" />
    </div>
    <vxe-grid v-bind="gridOptions" style="margin-top: 10px">
      <template #opera="{row}">
        <el-button type="text" @click="handelEdit(row)">编辑</el-button>
        <el-button type="text" style="color: red" @click="handleDel(row)">删除</el-button>
      </template>
    </vxe-grid>
    <div style="text-align: center">
      <cs-page
        :page.sync="queryForm.page"
        :limit.sync="queryForm.size"
        :total="queryForm.total"
        @pagination="fetchData"
      />
    </div>
    <!--编辑/新增证据-->
    <edit-evidence ref="edit" @onClose="fetchData" />
  </div>
</template>

<script>

import mixin from '@/views/mixin'
import EditEvidence from '@/views/caseDetails/components/edit/EditEvidence.vue'
import { queryEvidenceList, deleteEvidence } from '@/api/caseDetails'
import { debounce } from '@/utils'
export default {
  name: 'CaseEvidence',
  components: { EditEvidence },
  mixins: [mixin],
  props: {
    // 是否编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 是否展开
    isExpand: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      searchName: '',
      gridOptions: {
        ...mixin.data().gridOptions,
        columns: [
          { title: '序号', type: 'seq', width: 80 },
          { title: '证据名称', field: 'evidenceName' },
          { title: '证据类型', field: 'evidenceTypeDesc' },
          // { title: '证件文件', field: 'confessionMaterial' },
          { title: '最新时间', field: 'createTime' },
          { title: '操作', slots: { default: 'opera' }, fixed: 'right', width: '100px' }
        ],
        data: [{}]
      }
    }
  },
  watch: {
    isExpand: {
      handler: function(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.tableHeight(this.isExpand ? this.isEdit ? 580 : 530 : this.isEdit ? 400 : 350)
        }
      },
      immediate: true
    },
    searchName: function() {
      this.debounceSearch(this)
    }
  },
  mounted() {
    this.caseId = this.$route.params.id
    this.$nextTick(() => {
      this.tableHeight(this.isExpand ? (this.isEdit ? 580 : 530) : (this.isEdit ? 400 : 350))
    })
    this.fetchData()
  },
  methods: {
    // 防抖查询数据
    debounceSearch: debounce((_this) => {
      _this.fetchData()
    }),
    // 获取数据
    fetchData() {
      const params = {
        caseId: this.caseId,
        evidenceName: this.searchName,
        page: this.queryForm.page,
        size: this.queryForm.size
      }
      queryEvidenceList(params).then(res => {
        this.gridOptions.data = res.data.records
        this.queryForm.total = res.data.total
      })
    },
    // 添加笔录
    handleAdd() {
      this.$refs.edit.show()
    },
    // 编辑
    handelEdit(row) {
      this.$refs.edit.show(row, true)
    },
    // 删除
    handleDel(row) {
      this.$baseConfirm('你确定要删除当前项吗', null, async() => {
        const { code, msg } = await deleteEvidence({
          evidenceId: row.id
        })
        code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除成功!')
        this.fetchData()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.evidence-content {

}
</style>