pqs-9100_client/frontend/src/views/system/dict/data.vue

<template>
  <div class="table-box">
    <ProTable :columns="columns" :data="data">
      <template #tableHeader="scope">
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
        <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加</el-button>
        <el-button type="primary" :icon="Download" plain @click="downloadFile">导出</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="openDrawer('编辑', scope.row)">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </ProTable>
  </div>

  <el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
    <div>
      <el-form :model="dialogForm">
        <el-form-item label="字典类型编码" :label-width="100">
          <el-input :value="route.params.code" disabled />
        </el-form-item>
        <el-form-item label="编码" :label-width="100">
          <el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="名称" :label-width="100">
          <el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="值" :label-width="100">
          <el-input v-model="dialogForm.value" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="显示排序" :label-width="100">
          <el-input-number v-model="dialogForm.sort" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="状态" :label-width="100">
          <el-radio-group v-model.number="dialogForm.state">
            <el-radio v-for="item in dictStore.getDictData('status')" :key="item.id" :value="item.code">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="save()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="dictData">
import { useRoute } from 'vue-router'
import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
import { Dict } from '@/api/system/dict/interface'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { dialogSmall } from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { dictDataList } from '@/api/system/dict/dictExample'
import {
  updateDictData,
  addDictData,
  batchAddDictData,
  exportDictData,
  deleteDictData
} from '@/api/system/dict'

const route = useRoute()

const dictStore = useDictStore()
const data = dictDataList

const proTable = ref<ProTableInstance>()

const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '名称',
    width: 160,
    search: {
      el: 'input',
      props: {
        placeholder: '请输入名称'
      }
    }
  },
  {
    prop: 'code',
    label: '编码',
    width: 160,
    search: {
      el: 'input',
      props: {
        placeholder: '请输入编码'
      }
    }
  },
  {
    prop: 'value',
    label: '值',
    width: 160
  },
  {
    prop: 'level',
    label: '事件等级',
    width: 100,
    render: scope => {
      return (
        <>
          {scope.row.level === 0 || scope.row.level === null || scope.row.level === undefined ?
            (<span>—</span>) :
            (<el-tag type={scope.row.level === 1 ? 'info' : scope.row.level === 2 ? 'warning' : 'danger'}>
              {scope.row.level === 1 ? '普通' : scope.row.level === 2 ? '警告' : '危险'}
            </el-tag>)
          }
        </>
      )
    }
  },
  {
    prop: 'state',
    label: '状态',
    enum: dictStore.getDictData('status'),
    search: {
      el: 'tree-select',
      props: { filterable: true }
    },
    fieldNames: { label: 'label', value: 'code' },
    render: scope => {
      return (
        <>
          {
            <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
          }
        </>
      )
    },
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 180,
    search: {
      el: 'date-picker',
      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' }
    }
  },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    width: 330
  },
])

const { dialogVisible, dialogType, dialogForm } = useCount();
function useCount() {
  const dialogVisible = ref(false)
  const dialogType = ref('新增')

  const dialogForm = ref({
    id: "",
    name: "",
    code: "",
    value: "",
    sort: 1,
    state: 1, // 状态：0-删除 1-正常
  })

  return { dialogVisible, dialogType, dialogForm };
}

// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
  dialogVisible.value = true
  dialogType.value = title
  if (title === '编辑') {
    row && (dialogForm.value = row as { id: string; name: string; code: string; value: string; sort: number; state: number; });
  }
}

// 批量添加字典数据
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '字典数据',
    tempApi: exportDictData,
    importApi: batchAddDictData,
    getTableList: proTable.value?.getTableList,
  }
  dialogRef.value?.acceptParams(params)
}

// 导出字典数据
const downloadFile = async () => {
  ElMessageBox.confirm('确认导出字典数据?', '温馨提示', { type: 'warning' }).then(() =>
    useDownload(exportDictData, '字典数据列表', proTable.value?.searchParam),
  )
}

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

// 删除字典数据
const handleDelete = async (params: Dict.ResDictType) => {
  await useHandleData(deleteDictData, { id: [params.id] }, `删除【${params.name}】字典数据`)
  proTable.value?.getTableList()
}

const close = () => {
  dialogVisible.value = false
  //清空dialogForm中的值
  dialogForm.value = {
    id: "",
    name: "",
    code: "",
    value: "",
    sort: 1,
    state: 1,
  }
}

const save = async () => {
  if (dialogType.value === '新增') {
    await useHandleData(addDictData, dialogForm.value, '新增字典数据')
  } else {
    await useHandleData(updateDictData, dialogForm.value, '编辑字典数据')
  }
  close()
  proTable.value?.getTableList()
}
</script>

<style lang="scss" scoped></style>