pqs-9100_client/frontend/src/views/system/dictionary/dictPq/index.vue

<template>
  <div class='table-box' ref='popupBaseView'>
    <ProTable
        ref='proTable'
        :columns='columns'
        :request-api='getDictPqList'
    >
      <template #tableHeader='scope'>
        <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
        <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                   @click='batchDelete(scope.selectedListIds)'>
          批量删除
        </el-button>
      </template>

      <template #operation='scope'>
        <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
        <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
      </template>
    </ProTable>
  </div>
  <PqPopup :refresh-table='proTable?.getTableList' ref='pqPopup' />
</template>

<script setup lang='tsx' name='dict'>
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { type Dict } from '@/api/system/dictionary/interface'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import PqPopup from '@/views/system/dictionary/dictPq/components/pqPopup.vue'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import {
  getDictPqList,
  deleteDictPq,
} from '@/api/system/dictionary/dictPq'
import { reactive, ref } from 'vue'

const dictStore = useDictStore()
const proTable = ref<ProTableInstance>()
const pqPopup = ref()

const columns = reactive<ColumnProps<Dict.ResDictPq>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'dataType',
    label: '数据模型',
    width: 180,
    enum: dictStore.getDictData('Cs_Data_Type'),
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'name', value: 'code' },
  },
  {
    prop: 'name',
    label: '指标名称',
    width: 180,
    search: {
      el: 'input',
    },
  },
  {
    prop: 'otherName',
    label: '别名',
    minWidth: 300,
    search: {
      el: 'input',
    }
  },
  {
    prop: 'showName',
    label: '显示名称',
    width: 180,
    search: {
      el: 'input',
    }
  },
  {
    prop: 'phase',
    label: '相别',
    width: 180,
    enum: dictStore.getDictData('phase'),
    fieldNames: { label: 'name', value: 'code' },
  },
  {
    prop: 'unit',
    label: '单位',
    width: 180
  },
  {
    prop: 'type',
    label: '指标数据类型',
    width: 180
  },
  {
    prop: 'harmStart',
    label: '数据谐波次数',
    width: 180,
    render: (scope) => {
      return (scope.row.harmStart && scope.row.harmEnd)
          ? `${scope.row.harmStart}-${scope.row.harmEnd}`
          : '/' // 如果 harmStart 或 harmEnd 为空，返回 '/'
    },
  },
  {
    prop: 'statMethod',
    label: '数据统计类型',
    width: 250,
    enum: dictStore.getDictData('Stat_Method'),
    fieldNames: { label: 'name', value: 'code' },
    render: (scope) => {
      // 假设 statMethod 是一个数组，包含多个 'code' 值
      const codes = scope.row.statMethod // 获取当前行的 statMethod 字段
      if (!codes) {
        return '/'
      }
      // 确保 codes 是一个字符串
      const codeString = Array.isArray(codes) ? codes.join(',') : codes
      const codeArray = codeString.split(',')
      if (codeArray.length > 1) {
        // 查找与每个 code 值匹配的 name，然后拼接成逗号分割的字符串
        const names = codeArray.map(code => {
          const dictItem = dictStore.getDictData('Stat_Method').find(item => item.code === code)
          return dictItem ? dictItem.code : '/' // 如果找到匹配的项，返回对应的 code
        })
        return names.join(', ') // 用逗号连接所有的 name
      }
      // 查找单个 code 对应的 name
      const dictItem = dictStore.getDictData('Stat_Method').find(item => item.code === codeArray[0])
      return dictItem ? dictItem.code : '/' // 如果找到匹配的项，返回对应的 code
    },
  },
  {
    prop: 'classId',
    label: '数据表表名',
    width: 180,
    enum: dictStore.getDictData('Data'),
    fieldNames: { label: 'name', value: 'code' },

  },
  {
    prop: 'resourcesId',
    label: '报表数据来源',
    width: 180,
    enum: dictStore.getDictData('Data_Day'),
    fieldNames: { label: 'name', value: 'code' }
  },
  {
      prop: 'sort',
      label: '排序',
      width:70,
      render: scope => {
       return String(scope.row.sort) // 将数字转换为字符串
      },
    },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    minWidth: 200,
  },
])


// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictPq> = {}) => {
  pqPopup.value?.open(titleType, row)

}

// 批量删除字典类型
const batchDelete = async (id: string[]) => {
  await useHandleData(deleteDictPq, id, '删除所选字典类型')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 删除字典类型
const handleDelete = async (params: Dict.ResDictPq) => {
  await useHandleData(deleteDictPq, [params.id], `删除【${params.name}】指标字典类型`)
  proTable.value?.getTableList()
}


</script>