pqs-9100_client/frontend/src/views/system/dict/index.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="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="View" @click="toDictData(scope.row)">查看</el-button>
        <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 v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
        </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-number v-model="dialogForm.sort" />
        </el-form-item>
        <el-form-item label="备注" :label-width="100">
          <el-input v-model="dialogForm.remark" placeholder="请输入备注" autocomplete="off" :rows="2" type="textarea" />
        </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="dict">
import { CirclePlus, Delete, EditPen, Download, View } 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 { useAuthButtons } from '@/hooks/useAuthButtons'
import { useDownload } from '@/hooks/useDownload'
import { useRouter } from 'vue-router'
import { dictTypeList } from '@/api/system/dict/dictExample'
import {
  getDictTypeList,
  addDictType,
  updateDictType,
  exportDictType,
  deleteDictType
} from '@/api/system/dict'


const dictStore = useDictStore()
// const BUTTONS = useAuthButtons()
const router = useRouter()
const data = dictTypeList

const proTable = ref<ProTableInstance>()

const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '类型名称',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'code',
    label: '类型编码',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'remark',
    label: '描述',
    width: 340,
  },
  {
    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: "",
    sort:100,
    remark: ""
  })

  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; sort: number; state: number; remark: string; });
  }
}

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

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

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

//查看字典类型包含的字典数据
const toDictData = (row: Dict.ResDictType) => {
  router.push({ name: 'dictData', params: { id: row.id, code: row.code } })
}

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

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

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