Vue3 重构：Review 字典数据界面

40bd2c57 · YunaiV · 2b52683e · 40bd2c57 · 40bd2c57 · 2b52683e
Commit 40bd2c57 authored Mar 19, 2023 by YunaiV
9 changed files
--- a/src/api/system/dict/dict.data.ts
+++ b/src/api/system/dict/dict.data.ts
 import request from '@/config/axios'
-import type { DictDataVO, DictDataPageReqVO, DictDataExportReqVO } from './types'
+export type DictDataVO = {
+  id: number | undefined
+  sort: number | undefined
+  label: string
+  value: string
+  dictType: string
+  status: number
+  colorType: string
+  cssClass: string
+  remark: string
+  createTime: Date
+}
 // 查询字典数据（精简)列表
-export const listSimpleDictDataApi = () => {
+export const listSimpleDictData = () => {
  return request.get({ url: '/system/dict-data/list-all-simple' })
 }
 // 查询字典数据列表
-export const getDictDataPageApi = (params: DictDataPageReqVO) => {
+export const getDictDataPage = (params: PageParam) => {
  return request.get({ url: '/system/dict-data/page', params })
 }
 // 查询字典数据详情
-export const getDictDataApi = (id: number) => {
+export const getDictData = (id: number) => {
  return request.get({ url: '/system/dict-data/get?id=' + id })
 }
 // 新增字典数据
-export const createDictDataApi = (data: DictDataVO) => {
+export const createDictData = (data: DictDataVO) => {
  return request.post({ url: '/system/dict-data/create', data })
 }
 // 修改字典数据
-export const updateDictDataApi = (data: DictDataVO) => {
+export const updateDictData = (data: DictDataVO) => {
  return request.put({ url: '/system/dict-data/update', data })
 }
 // 删除字典数据
-export const deleteDictDataApi = (id: number) => {
+export const deleteDictData = (id: number) => {
  return request.delete({ url: '/system/dict-data/delete?id=' + id })
 }
 // 导出字典类型数据
-export const exportDictDataApi = (params: DictDataExportReqVO) => {
+export const exportDictDataApi = (params) => {
  return request.get({ url: '/system/dict-data/export', params })
 }
--- a/src/api/system/dict/dict.type.ts
+++ b/src/api/system/dict/dict.type.ts
 import request from '@/config/axios'
-import type { DictTypeVO, DictTypePageReqVO, DictTypeExportReqVO } from './types'
+export type DictTypeVO = {
+  id: number | undefined
+  name: string
+  type: string
+  status: number
+  remark: string
+  createTime: Date
+}
 // 查询字典（精简)列表
-export const listSimpleDictTypeApi = () => {
+export const listSimpleDictType = () => {
  return request.get({ url: '/system/dict-type/list-all-simple' })
 }
 // 查询字典列表
-export const getDictTypePageApi = (params: DictTypePageReqVO) => {
+export const getDictTypePage = (params: PageParam) => {
  return request.get({ url: '/system/dict-type/page', params })
 }
 // 查询字典详情
-export const getDictTypeApi = (id: number) => {
+export const getDictType = (id: number) => {
  return request.get({ url: '/system/dict-type/get?id=' + id })
 }
 // 新增字典
-export const createDictTypeApi = (data: DictTypeVO) => {
+export const createDictType = (data: DictTypeVO) => {
  return request.post({ url: '/system/dict-type/create', data })
 }
 // 修改字典
-export const updateDictTypeApi = (data: DictTypeVO) => {
+export const updateDictType = (data: DictTypeVO) => {
  return request.put({ url: '/system/dict-type/update', data })
 }
 // 删除字典
-export const deleteDictTypeApi = (id: number) => {
+export const deleteDictType = (id: number) => {
  return request.delete({ url: '/system/dict-type/delete?id=' + id })
 }
 // 导出字典类型
-export const exportDictTypeApi = (params: DictTypeExportReqVO) => {
+export const exportDictType = (params) => {
  return request.get({ url: '/system/dict-type/export', params })
 }
--- a/src/api/system/dict/types.ts
+++ b/src/api/system/dict/types.ts
-export type DictTypeVO = {
-  id: number | undefined
-  name: string
-  type: string
-  status: number | undefined
-  remark: string
-  createTime: Date
-}
-export type DictTypePageReqVO = {
-  pageNo: number
-  pageSize: number
-  name: string
-  type: string
-  status: number | undefined
-  createTime: Date[]
-}
-export type DictTypeExportReqVO = {
-  name: string
-  type: string
-  status: number
-  createTime: Date[]
-}
-export type DictDataVO = {
-  id: number | undefined
-  sort: number | undefined
-  label: string
-  value: string
-  dictType: string
-  status: number
-  colorType: string
-  cssClass: string
-  remark: string
-  createTime: Date | undefined
-}
-export type DictDataPageReqVO = {
-  pageNo: number
-  pageSize: number
-  label: string
-  dictType: string
-  status: number | undefined
-}
-export type DictDataExportReqVO = {
-  label: string
-  dictType: string
-  status: number
-}
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -3,7 +3,7 @@ import { store } from '../index'
 import { DictDataVO } from '@/api/system/dict/types'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 const { wsCache } = useCache('sessionStorage')
-import { listSimpleDictDataApi } from '@/api/system/dict/dict.data'
+import { listSimpleDictData } from '@/api/system/dict/dict.data'
 export interface DictValueType {
  value: any
@@ -44,7 +44,7 @@ export const useDictStore = defineStore('dict', {
        this.dictMap = dictMap
        this.isSetDict = true
      } else {
-        const res = await listSimpleDictDataApi()
+        const res = await listSimpleDictData()
        // 设置数据
        const dictDataMap = new Map<string, any>()
        res.forEach((dictData: DictDataVO) => {
@@ -74,7 +74,7 @@ export const useDictStore = defineStore('dict', {
    },
    async resetDict() {
      wsCache.delete(CACHE_KEY.DICT_CACHE)
-      const res = await listSimpleDictDataApi()
+      const res = await listSimpleDictData()
      // 设置数据
      const dictDataMap = new Map<string, any>()
      res.forEach((dictData: DictDataVO) => {

--- a/src/views/infra/codegen/components/CloumInfoForm.vue
+++ b/src/views/infra/codegen/components/CloumInfoForm.vue
@@ -114,7 +114,7 @@
 import { PropType } from 'vue'
 import { DictTypeVO } from '@/api/system/dict/types'
 import { CodegenColumnVO } from '@/api/infra/codegen/types'
-import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
+import { listSimpleDictType } from '@/api/system/dict/dict.type'
 const props = defineProps({
  info: {
@@ -125,7 +125,7 @@ const props = defineProps({
 /** 查询字典下拉列表 */
 const dictOptions = ref<DictTypeVO[]>()
 const getDictOptions = async () => {
-  const res = await listSimpleDictTypeApi()
+  const res = await listSimpleDictType()
  dictOptions.value = res
 }
 onMounted(async () => {

--- a/src/views/system/dict/data.form.vue
+++ b/src/views/system/dict/data.form.vue
@@ -17,7 +17,6 @@
      <el-form-item label="数据标签" prop="label">
        <el-input v-model="formData.label" placeholder="请输入数据标签" />
      </el-form-item>
      <el-form-item label="数据键值" prop="value">
        <el-input v-model="formData.value" placeholder="请输入数据键值" />
      </el-form-item>
@@ -61,9 +60,8 @@
 </template>
 <script setup lang="ts">
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import * as DictDataApi from '@/api/system/dict/dict.data'
-import { DictDataVO } from '@/api/system/dict/types'
+import { CommonStatusEnum } from '@/utils/constants'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -73,15 +71,14 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
  id: undefined,
-  sort: 0,
+  sort: undefined,
  label: '',
  value: '',
  dictType: '',
-  status: 0,
+  status: CommonStatusEnum.ENABLE,
  colorType: '',
  cssClass: '',
-  remark: '',
+  remark: ''
-  createTime: undefined
 })
 const formRules = reactive({
  label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
@@ -91,7 +88,6 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 // 数据标签回显样式
 const colorTypeOptions = readonly([
  {
    value: 'default',
@@ -129,7 +125,7 @@ const openModal = async (type: string, id?: number) => {
  if (id) {
    formLoading.value = true
    try {
-      formData.value = await DictDataApi.getDictDataApi(id)
+      formData.value = await DictDataApi.getDictData(id)
    } finally {
      formLoading.value = false
    }
@@ -147,12 +143,12 @@ const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  try {
-    const data = formData.value as DictDataVO
+    const data = formData.value as DictDataApi.DictDataVO
    if (formType.value === 'create') {
-      await DictDataApi.createDictDataApi(data)
+      await DictDataApi.createDictData(data)
      message.success(t('common.createSuccess'))
    } else {
-      await DictDataApi.updateDictDataApi(data)
+      await DictDataApi.updateDictData(data)
      message.success(t('common.updateSuccess'))
    }
    modelVisible.value = false
@@ -171,11 +167,10 @@ const resetForm = () => {
    label: '',
    value: '',
    dictType: '',
-    status: 0,
+    status: CommonStatusEnum.ENABLE,
    colorType: '',
    cssClass: '',
-    remark: '',
+    remark: ''
-    createTime: undefined
  }
  formRef.value?.resetFields()
 }

--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
 <template>
  <content-wrap>
-    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
      <el-form-item label="字典名称" prop="dictType">
        <el-select v-model="queryParams.dictType">
          <el-option
@@ -46,7 +52,10 @@
        </el-button>
      </el-form-item>
    </el-form>
-    <!-- 列表 -->
+  </content-wrap>
+  <!-- 列表 -->
+  <content-wrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="字典编码" align="center" prop="id" />
      <el-table-column label="字典标签" align="center" prop="label" />
@@ -59,12 +68,7 @@
      </el-table-column>
      <el-table-column label="颜色类型" align="center" prop="colorType" />
      <el-table-column label="CSS Class" align="center" prop="cssClass" />
-      <el-table-column
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
-        label="备注"
-        align="center"
-        prop="remark"
-        :show-overflow-tooltip="tableTooltipConfig"
-      />
      <el-table-column
        label="创建时间"
        align="center"
@@ -72,21 +76,28 @@
        width="180"
        :formatter="dateFormatter"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
+            type="primary"
            @click="openModal('update', scope.row.id)"
            v-hasPermi="['system:dict:update']"
-            ><Icon icon="ic:outline-mode" class="mr-5px" />修改</el-button
          >
-          <el-button link @click="handleDelete(scope.row.id)" v-hasPermi="['system:dict:delete']"
+            修改
-            ><Icon icon="material-symbols:delete-forever-sharp" class="mr-5px" />删除</el-button
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:dict:delete']"
          >
+            删除
+          </el-button>
        </template>
      </el-table-column>
    </el-table>
+    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
@@ -94,30 +105,24 @@
      @pagination="getList"
    />
  </content-wrap>
  <!-- 表单弹窗：添加/修改 -->
  <data-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="Data">
 import * as DictDataApi from '@/api/system/dict/dict.data'
-import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
+import * as DictTypeApi from '@/api/system/dict/dict.data'
 import { getDictOptions, DICT_TYPE } from '@/utils/dict'
 import download from '@/utils/download'
 import { dateFormatter } from '@/utils/formatTime'
 import DataForm from './data.form.vue'
-import { DictTypeVO } from '@/api/system/dict/types'
+import type { DictTypeVO } from '@/api/system/dict/dict.type'
-import { useRoute } from 'vue-router'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
+const route = useRoute() // 路由
-const route = useRoute()
 const simpleDictList = ref<DictTypeVO[]>()
-const tableTooltipConfig = readonly({
-  appendTo: 'body'
-})
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -135,18 +140,13 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
  loading.value = true
  try {
-    const data = await DictDataApi.getDictDataPageApi(queryParams)
+    const data = await DictDataApi.getDictDataPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
 }
-// 查询字典（精简)列表
-const getSimpleDictList = async () => {
-  const data = await listSimpleDictTypeApi()
-  simpleDictList.value = data
-}
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -172,7 +172,7 @@ const handleDelete = async (id: number) => {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
-    await DictDataApi.deleteDictDataApi(id)
+    await DictDataApi.deleteDictData(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
@@ -194,10 +194,15 @@ const handleExport = async () => {
  }
 }
+/** 查询字典（精简)列表 */
+const getSimpleDictList = async () => {
+  simpleDictList.value = await DictTypeApi.listSimpleDictData()
+}
 /** 初始化 **/
 onMounted(() => {
  getList()
+  // 查询字典（精简)列表
+  getSimpleDictList()
 })
-// 查询字典（精简)列表
-getSimpleDictList()
 </script>
--- a/src/views/system/dict/form.vue
+++ b/src/views/system/dict/form.vue
@@ -43,7 +43,8 @@
 <script setup lang="ts">
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import * as DictTypeApi from '@/api/system/dict/dict.type'
-import { DictTypeVO } from '@/api/system/dict/types'
+import { CommonStatusEnum } from '@/utils/constants'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -55,7 +56,7 @@ const formData = ref({
  id: undefined,
  name: '',
  type: '',
-  status: 0,
+  status: CommonStatusEnum.ENABLE,
  remark: ''
 })
 const formRules = reactive({
@@ -74,7 +75,7 @@ const openModal = async (type: string, id?: number) => {
  if (id) {
    formLoading.value = true
    try {
-      formData.value = await DictTypeApi.getDictTypeApi(id)
+      formData.value = await DictTypeApi.getDictType(id)
    } finally {
      formLoading.value = false
    }
@@ -92,12 +93,12 @@ const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  try {
-    const data = formData.value as DictTypeVO
+    const data = formData.value as DictTypeApi.DictTypeVO
    if (formType.value === 'create') {
-      await DictTypeApi.createDictTypeApi(data)
+      await DictTypeApi.createDictType(data)
      message.success(t('common.createSuccess'))
    } else {
-      await DictTypeApi.updateDictTypeApi(data)
+      await DictTypeApi.updateDictType(data)
      message.success(t('common.updateSuccess'))
    }
    modelVisible.value = false
@@ -114,7 +115,7 @@ const resetForm = () => {
    id: undefined,
    type: '',
    name: '',
-    status: undefined,
+    status: CommonStatusEnum.ENABLE,
    remark: ''
  }
  formRef.value?.resetFields()

--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
 <template>
+  <!-- 搜索工作栏 -->
  <content-wrap>
-    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
      <el-form-item label="字典名称" prop="name">
        <el-input
          v-model="queryParams.name"
@@ -63,20 +70,14 @@
        </el-button>
      </el-form-item>
    </el-form>
+  </content-wrap>
-    <!-- 列表 -->
+  <!-- 列表 -->
+  <content-wrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="字典编号" align="center" prop="id" />
      <el-table-column label="字典名称" align="center" prop="name" show-overflow-tooltip />
-      <el-table-column label="字典类型" align="center" show-overflow-tooltip>
+      <el-table-column label="字典类型" align="center" prop="type" width="300" />
-        <template #default="scope">
-          <div>
-            <router-link :to="'/dict/type/data/' + scope.row.type">
-              <span>{{ scope.row.type }}</span>
-            </router-link>
-          </div>
-        </template>
-      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
@@ -90,22 +91,31 @@
        prop="createTime"
        width="180"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
+            type="primary"
            @click="openModal('update', scope.row.id)"
            v-hasPermi="['system:dict:update']"
-            ><Icon icon="ic:outline-mode" class="mr-5px" />修改</el-button
          >
-          <el-button link @click="handleDelete(scope.row.id)" v-hasPermi="['system:dict:delete']"
+            修改
-            ><Icon icon="material-symbols:delete-forever-sharp" class="mr-5px" />删除</el-button
+          </el-button>
+          <router-link :to="'/dict/type/data/' + scope.row.type">
+            <el-button link type="primary">数据</el-button>
+          </router-link>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:dict:delete']"
          >
+            删除
+          </el-button>
        </template>
      </el-table-column>
    </el-table>
+    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
@@ -113,25 +123,24 @@
      @pagination="getList"
    />
  </content-wrap>
  <!-- 表单弹窗：添加/修改 -->
  <dict-type-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="Dict">
-import * as DictTypeApi from '@/api/system/dict/dict.type'
 import { getDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
 import DictTypeForm from './form.vue'
-import { DictTypePageReqVO } from '@/api/system/dict/types'
 import download from '@/utils/download'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 字典表格数据
-const queryParams = reactive<DictTypePageReqVO>({
+const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
@@ -146,7 +155,7 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
  loading.value = true
  try {
-    const data = await DictTypeApi.getDictTypePageApi(queryParams)
+    const data = await DictTypeApi.getDictTypePage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
@@ -178,7 +187,7 @@ const handleDelete = async (id: number) => {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
-    await DictTypeApi.deleteDictTypeApi(id)
+    await DictTypeApi.deleteDictType(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
@@ -192,7 +201,7 @@ const handleExport = async () => {
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
-    const data = await DictTypeApi.exportDictTypeApi(queryParams)
+    const data = await DictTypeApi.exportDictType(queryParams)
    download.excel(data, '字典类型.xls')
  } catch {
  } finally {