fu-hsi-web/src/views/ruleEngine/atomicIndex/index.vue

<!--
 * @description: 原子指标
 * @fileName: index
 * @author: 17076
 * @date: 2024/6/28-上午10:03
 * @version: V1.0.0
-->

<template>
  <div class="content">
    <cs-search title="原子指标" :data="searchData" :span="8" @onSearch="onSearch" @getData="onSearch" />
    <div class="index-content">
      <div class="header">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button>
      </div>
      <vxe-grid v-bind="gridOptions" style="margin-top: 20px">
        <template #operate="{row}">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleView(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>
    </div>
    <!--编辑弹窗-->
    <edit-atomic ref="edit" @reloadData="fetchData" />
  </div>
</template>

<script>
import ChangeRules from '@/views/ruleEngine/indexRule/components/ChangeRules.vue'
import IndexAtlas from '@/views/ruleEngine/indexRule/components/IndexAtlas.vue'
import mixin from '@/views/mixin'
import EditAtomic from '@/views/ruleEngine/atomicIndex/components/EditAtomic.vue'
import { queryAtomicIndex, delAtomicIndex } from '@/api/atomicIndex'

export default {
  name: 'Index',
  components: { EditAtomic, IndexAtlas, ChangeRules },
  mixins: [mixin],
  data() {
    return {
      // 筛选数据
      searchData: [
        { label: '原子指标', model: 'name', type: 'input' },
        { label: '指标分类', model: 'indexType', type: 'select', option: JSON.parse(sessionStorage.getItem('index_type')) },
        { label: '指标来源', model: 'indexSource', type: 'select', option: JSON.parse(sessionStorage.getItem('index_source')) },
        { label: '最新时间', model: 'updateTime', type: 'daterange' }
      ],
      // 表格配置
      gridOptions: {
        ...mixin.data().gridOptions,
        // 指标名称单元格添加样式
        cellClassName: ({ column }) => {
          if (column.field === 'indexName') {
            return 'text-blue'
          }
          return null
        },
        columns: [
        { title: '序号', type: 'seq', width: '50px' },
          { title: '原子指标', field: 'name' },
          { title: '案件类型', field: 'caseTypeName', sortable: true },
          { title: '指标来源', field: 'indexSourceName', sortable: true },
          // { title: '状态', field: 'connectStatus' },
          { title: '最新时间', field: 'updateTime', sortable: true },
          { title: '操作', slots: { default: 'operate' }, fixed: 'right', width: '150px' }
        ],
        data: []
      }
    }
  },
  mounted() {
    this.tableHeight(460)
  },
  methods: {
    // 原子指标查询
    fetchData() {
      const params = JSON.parse(JSON.stringify(this.searchFormData))
      if (this.searchFormData.updateTime) {
        this.$set(params, 'updateStartTime', this.searchFormData.updateTime[0])
        this.$set(params, 'updateEndTime', this.searchFormData.updateTime[1])
        delete params['updateTime']
      }
      queryAtomicIndex(params, this.queryForm.page, this.queryForm.size).then(res => {
        this.gridOptions.data = res.data.result
        this.queryForm.total = res.data.total
      })
    },
    // 新增
    handleAdd() {
      this.$refs.edit.show()
    },
    // 变更
    handleChange() {
      this.$refs.change.show()
    },
    // 编辑
    handleEdit(row) {
      this.$refs.edit.show(row, true)
    },
    // 查看明细
    handleView(row) {
      this.$refs.edit.show(row, false)
    },
    // 删除
    handleDel(row) {
      this.$baseConfirm('确定要删除吗?', null, async() => {
        const { code, msg } = await delAtomicIndex(row.id)
        code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
        this.fetchData()
      })
    },
    // 筛选
    onSearch(data, callback) {
      this.searchFormData = Object.assign({}, data)
      this.queryForm.page = 1
      this.fetchData()
      if (callback) callback(true)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: 100%;
  .index-content {
    border-radius: 8px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 10px;
    height: calc(100% - 170px);
  }
  .expand-details {
    background: #F6F6F6;
    padding: 20px;
    box-sizing: border-box;
  }
}
::v-deep {
  .text-blue {
    color: #005AA8;
  }
  .header-blue {
    background: #F2F6FA;
  }
}
</style>