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

<!--
 * @description: 出罪指标
 * @fileName: InnocentIndex
 * @author: 17076
 * @date: 2024/6/26-下午3:15
 * @version: V1.0.0
-->

<template>
  <div class="innocent-content">
    <el-input v-model="indexName" placeholder="指标名称" clearable style="width: 200px" />
    <el-select v-model="indexResult" style="margin-left: 16px;" clearable placeholder="请选择指标结果">
      <el-option v-for="item in indexResultOptions" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <el-select v-model="indexHasRecord" style="margin-left: 16px;" clearable placeholder="请选择笔录结果">
      <el-option label="有笔录" :value="true" />
      <el-option label="无笔录" :value="false" />
    </el-select>
    <el-select v-model="indexSource" style="margin-left: 16px;" clearable placeholder="请选择数据来源">
      <el-option v-for="item in indexSourceList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-input v-model="atomicName" placeholder="原子指标名称" clearable style="width: 200px;margin-left: 16px;" />
    <vxe-grid :row-config="{isHover: true}" v-if="gridOptions.data.length > 0" v-bind="gridOptions" style="margin-top: 10px">
      <template #operate="{row}">
        <div class="btn-item">
          <span>{{ row.record }}</span>
          <span v-if="row.recordSegmentationList && row.recordSegmentationList.length > 0">【<el-button type="text" @click="handleDetails(row)">详情</el-button>】</span>
        </div>
      </template>
      <template #detail="{row}">
        <span v-if="row.parentIndexName"><a v-if="!row.isRead" style="text-decoration: underline;" @click="handleDetails(row)">{{ row.indexName }}</a><span v-else style="text-decoration: underline;cursor: pointer;" @click="handleDetails(row)">{{ row.indexName }}</span></span>
        <span v-else>{{ row.indexName }}</span>
      </template>
      <template #result="{row}">
        <div v-if="row.newFlag" style="padding: 10px 0;">
          <el-badge value="new" class="item">
            <el-tag :type="row.indexResult === 'true' ? 'success' : 'error'">{{ row.indexResult?row.indexResult=== 'true' ? row.parentIndexName?'存在':'符合' : row.parentIndexName?'不存在':'不符合': '未评估' }}</el-tag>
          </el-badge>
        </div>
        <el-tag v-else :type="row.indexResult === 'true' ? 'success' : 'error'">{{ row.indexResult?row.indexResult=== 'true' ? row.parentIndexName?'存在':'符合' : row.parentIndexName?'不存在':'不符合': '未评估' }}</el-tag>
      </template>
    </vxe-grid>
    <!-- <div style="text-align: center">
      <cs-page
        :page.sync="queryForm.page"
        :limit.sync="queryForm.size"
        :total="queryForm.total"
        @pagination="fetchData"
      />
    </div> -->
    <record-details ref="details" />
  </div>
</template>

<script>
import mixin from '@/views/mixin'
import { queryIndexDetail } from '@/api/caseDetails'
import { debounce } from '@/utils'
import RecordDetails from './RecordDetails.vue'
export default {
  name: 'InnocentIndex',
  components: {
    RecordDetails
  },
  mixins: [mixin],
  props: {
    // 是否编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 是否展开
    isExpand: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      indexResultOptions: [{
        name: '未评估',
        id: '0'
      }, {
        name: '符合',
        id: '1'
      }, {
        name: '不符合',
        id: '2'
      }],
      gridOptions: {
        ...mixin.data().gridOptions,
        treeConfig: {},
        columns: [
          { title: '', width: '50px', treeNode: true },
          { title: '序号', type: 'seq', width: '80px' },
          { title: '分析结果', width: '200px', field: 'indexResult', slots: { default: 'result' }},
          // { title: '笔录结果', width: '200px', slots: { default: 'operate' }, align: 'center' },
          { title: '指标名称', field: 'indexName', slots: { default: 'detail' }, align: 'left' },
          { title: '分值', width: '200px', field: 'score' }
          // { title: '数据来源', width: '200px', field: 'indexSource', formatter: ({ cellValue }) => {
          //   return cellValue ? this.indexSourceList.find(item => item.value === cellValue).label : ''
          // } }
          // { title: '原子指标', field: 'atomicIndex' }
          // { title: '必要证据', field: 'questioner' },
          // { title: '评估结果', field: 'startTime' },
          // { title: '评估操作', slots: { default: 'opera' }, fixed: 'right', width: '100px' },
        ],
        data: []

      },
      indexName: '',
      indexResult: '',
      indexHasRecord: undefined,
      atomicName: '',
      indexSource: '',
      indexSourceList: JSON.parse(sessionStorage.getItem('index_source'))
    }
  },
  watch: {
    isExpand: {
      handler: function(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.tableHeight(this.isExpand ? 540 : 330)
        }
      },
      immediate: true
    },
    indexName: function() {
      this.debounceSearch(this)
    },
    indexResult: function() {
      this.debounceSearch(this)
    },
    indexHasRecord: function() {
      this.debounceSearch(this)
    },
    atomicName: function() {
      this.debounceSearch(this)
    },
    indexSource: function() {
      this.debounceSearch(this)
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 防抖查询数据
    debounceSearch: debounce((_this) => {
      _this.fetchData()
    }),
    // 获取数据
    fetchData() {
      const params = { caseId: this.$route.params['id'],
        indexType: '3',
        indexName: this.indexName,
        indexResult: this.indexResult,
        indexHasRecord: this.indexHasRecord,
        atomicName: this.atomicName,
        indexSource: this.indexSource
      }
      queryIndexDetail(params, this.queryForm.page, 999999).then(res => {
        this.gridOptions.data = res.data.records
        this.queryForm.total = res.data.total
      })
    },
    handleDetails(row) {
      this.$set(row, 'isRead', true)
      this.$refs.details.show(row)
    },
    // 开始分析
    handelStart(row) {

    },
    // 删除
    handleDel(row) {
      this.$baseConfirm('你确定要删除当前项吗', null, async() => {

      })
    }
  }
}
</script>

<style scoped lang="scss">
.innocent-content {
  .btn-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>