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, Download, View} 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',
      },
      render: (scope) => {
        const codes = scope.row.otherName;
        return codes || '/';
      }
    },
    {
      prop: 'showName',
      label: '显示名称',
      width: 180,
      search: {
        el: 'input',
      },
      render: (scope) => {
        const codes = scope.row.showName;
        return codes || '/';
      }
    },
    {
      prop: 'phase',
      label: '相别',
      width: 180,
      enum: dictStore.getDictData('phase'),
      fieldNames: { label: 'name', value: 'code' },
    },
    {
      prop: 'unit',
      label: '单位',
      width: 180,
      render: (scope) => {
        const codes = scope.row.unit;
        return codes || '/';
      }
    },
    {
      prop: 'type',
      label: '指标数据类型',
      width: 180,
      render: (scope) => {
        const codes = scope.row.type;
        return codes || '/';
      }
    },
    {
      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 字段
        //console.log('codes',codes)
        if (!codes) {
          return '/'; // 如果 statMethod 为 undefined 或 null，返回 '/'
        }
         // 确保 codes 是一个字符串
        const codeString = Array.isArray(codes) ? codes.join(',') : codes;
        const codeArray = codeString.split(',');
        if (codeArray.length > 1) {
          // 查找与每个 code 值匹配的 name，然后拼接成逗号分割的字符串
          //console.log('codeArray',codeArray)
          const names = codeArray.map(code => {
            const dictItem = dictStore.getDictData('Stat_Method').find(item => item.code === code);
            return dictItem ? dictItem.name : ''; // 如果找到匹配的项，返回对应的 name
          });
          //console.log('names',names)
          return names.join(', '); // 用逗号连接所有的 name
        }
          // 查找单个 code 对应的 name
        const dictItem = dictStore.getDictData('Stat_Method').find(item => item.code === codeArray[0]);
        return dictItem ? dictItem.name : ''; // 如果找到匹配的项，返回对应的 name
  },
    },    
    {
      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' },
      render: (scope) => {
        const codes = scope.row.resourcesId;
        return codes || '/';
      }
    },
    {
      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>