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>
    <pq-popup :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 {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,
      search: {
        el: 'select',
      },
    },
    {
      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,
    },
    {
      prop: 'phase',
      label: '单位',
      width: 180,
    },
    {
      prop: 'type',
      label: '指标数据类型',
      width: 180,
    },
    {
      prop: 'harmStart',
      label: '数据谐波次数',
      width: 180,
      render: (scope) => {
        return scope.row.harmStart 
        ? `${scope.row.harmStart}-${scope.row.harmEnd}` 
        : '/'; // 如果 harmStart 为空，返回 \
    },
    },
    {
      prop: 'statMethod',
      label: '数据统计类型',
      width: 180,
      render: (row) => {
        const methods = row.statMethod || []; // 确保statMethod存在
        if (methods.length === 0) {
          return '/'; // 空值时显示/
        } else if (methods.length > 2) {
          return methods.join(', '); // 超过两个用逗号分隔
        } else {
          return methods.join(' '); // 少于等于两个时用空格分隔
        }
      },
    },    
    {
      prop: 'classId',
      label: '数据表表名',
      width: 180,
    },
    {
      prop: 'resourcesId',
      label: '报表数据来源',
      width: 180,
    },
    {
      prop: 'operation',
      label: '操作',
      fixed: 'right',
      width: 330,
    },
  ])
  
  
  // 打开 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>