From 26a11d77aaec3321cde6a23beb06bc56936e5cba Mon Sep 17 00:00:00 2001
From: syd <syidong@aliyun.com>
Date: Sun, 19 Mar 2023 14:40:31 +0800
Subject: [PATCH 01/12] =?UTF-8?q?vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E6=95=8F=E6=84=9F=E8=AF=8D=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/sensitiveWord/form.vue       | 129 +++++++
 src/views/system/sensitiveWord/index.vue      | 360 ++++++++++--------
 .../sensitiveWord/sensitiveWord.data.ts       |  74 ----
 3 files changed, 325 insertions(+), 238 deletions(-)
 create mode 100644 src/views/system/sensitiveWord/form.vue
 delete mode 100644 src/views/system/sensitiveWord/sensitiveWord.data.ts

diff --git a/src/views/system/sensitiveWord/form.vue b/src/views/system/sensitiveWord/form.vue
new file mode 100644
index 00000000..a0ed7a21
--- /dev/null
+++ b/src/views/system/sensitiveWord/form.vue
@@ -0,0 +1,129 @@
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="敏感词" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入敏感词" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="description">
+        <el-input v-model="formData.description" placeholder="请输入内容" />
+      </el-form-item>
+      <el-form-item label="标签" prop="tags">
+        <el-select
+          v-model="formData.tags"
+          multiple
+          filterable
+          allow-create
+          placeholder="请选择文章标签"
+          style="width: 380px"
+        >
+          <el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as SensitiveWordApi from '@/api/system/sensitiveWord'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const tags = ref([])
+const formData = ref({
+  id: undefined,
+  name: '',
+  status: true,
+  description: '',
+  tags: []
+})
+const formRules = reactive({
+  name: [{ required: true, message: '敏感词不能为空', trigger: 'blur' }],
+  tags: [{ required: true, message: '标签不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await SensitiveWordApi.getSensitiveWordApi(id)
+      console.log(formData.value)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as SensitiveWordApi.SensitiveWordVO
+    if (formType.value === 'create') {
+      await SensitiveWordApi.createSensitiveWordApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await SensitiveWordApi.updateSensitiveWordApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    status: true,
+    description: '',
+    tags: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/sensitiveWord/index.vue b/src/views/system/sensitiveWord/index.vue
index c3de895d..0eb8287d 100644
--- a/src/views/system/sensitiveWord/index.vue
+++ b/src/views/system/sensitiveWord/index.vue
@@ -1,191 +1,223 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
-          type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:sensitive-word:create']"
-          @click="handleCreate()"
+  <!-- 搜索 -->
+  <content-wrap>
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+      <el-form-item label="敏感词" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入敏感词"
+          clearable
+          @keyup.enter="handleQuery"
         />
-        <!-- 操作：导出 -->
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
-          v-hasPermi="['system:sensitive-word:export']"
-          @click="exportList('敏感词数据.xls')"
-        />
-      </template>
-      <template #tags_default="{ row }">
-        <el-tag
-          :disable-transitions="true"
-          :key="index"
-          v-for="(tag, index) in row.tags"
-          :index="index"
+      </el-form-item>
+      <el-form-item label="标签" prop="tag">
+        <el-select
+          v-model="queryParams.tag"
+          placeholder="请选择标签"
+          clearable
+          @keyup.enter="handleQuery"
         >
-          {{ tag }}
-        </el-tag>
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['system:sensitive-word:update']"
-          @click="handleUpdate(row.id)"
-        />
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['system:sensitive-word:update']"
-          @click="handleDetail(row.id)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['system:sensitive-word:delete']"
-          @click="deleteData(row.id)"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-      ref="formRef"
-    >
-      <template #tags="form">
-        <el-select v-model="form['tags']" multiple placeholder="请选择">
-          <el-option v-for="item in tagsOptions" :key="item" :label="item" :value="item" />
+          <el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag" />
         </el-select>
-      </template>
-    </Form>
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
-      <template #tags="{ row }">
-        <el-tag
-          :disable-transitions="true"
-          :key="index"
-          v-for="(tag, index) in row.tags"
-          :index="index"
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          @click="openModal('create')"
+          v-hasPermi="['system:sensitive-word:create']"
         >
-          {{ tag }}
-        </el-tag>
-      </template>
-    </Descriptions>
-    <!-- 操作按钮 -->
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:sensitive-word:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </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" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="描述" align="center" prop="description" />
+      <el-table-column label="标签" align="center" prop="tags">
+        <template #default="scope">
+          <el-tag
+            :disable-transitions="true"
+            :key="index"
+            v-for="(tag, index) in scope.row.tags"
+            :index="index"
+          >
+            {{ tag }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
       />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openModal('update', scope.row.id)"
+            v-hasPermi="['infra:config:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:config:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </content-wrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <config-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="SensitiveWord">
-import type { FormExpose } from '@/components/Form'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
 import * as SensitiveWordApi from '@/api/system/sensitiveWord'
-import { rules, allSchemas } from './sensitiveWord.data'
-
-const { t } = useI18n() // 国际化
+import ConfigForm from './form.vue'
 const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: SensitiveWordApi.getSensitiveWordPageApi,
-  deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
-  exportListApi: SensitiveWordApi.exportSensitiveWordApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const tags = ref([])
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  tag: undefined,
+  status: undefined,
+  createTime: []
 })
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
 
-// 获取标签
-const tagsOptions = ref()
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SensitiveWordApi.getSensitiveWordPageApi(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化标签select*/
 const getTags = async () => {
-  const res = await SensitiveWordApi.getSensitiveWordTagsApi()
-  tagsOptions.value = res
+  const data = await SensitiveWordApi.getSensitiveWordTagsApi()
+  tags.value = data
 }
 
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
 }
 
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await SensitiveWordApi.getSensitiveWordApi(rowId)
-  unref(formRef)?.setValues(res)
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+  modalRef.value.openModal(type, id)
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  const res = await SensitiveWordApi.getSensitiveWordApi(rowId)
-  detailData.value = res
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await SensitiveWordApi.deleteSensitiveWordApi(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
 }
 
-// 提交按钮
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as SensitiveWordApi.SensitiveWordVO
-        if (actionType.value === 'create') {
-          await SensitiveWordApi.createSensitiveWordApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await SensitiveWordApi.updateSensitiveWordApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        // 刷新列表
-        await reload()
-      }
-    }
-  })
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await SensitiveWordApi.exportSensitiveWordApi(queryParams)
+    download.excel(data, '敏感词.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
 }
 
-// ========== 初始化 ==========
-onMounted(async () => {
-  await getTags()
+/** 初始化 **/
+onMounted(() => {
+  getTags()
+  getList()
 })
 </script>
diff --git a/src/views/system/sensitiveWord/sensitiveWord.data.ts b/src/views/system/sensitiveWord/sensitiveWord.data.ts
deleted file mode 100644
index d21bb94c..00000000
--- a/src/views/system/sensitiveWord/sensitiveWord.data.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  name: [required],
-  tags: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '敏感词编号',
-  action: true,
-  columns: [
-    {
-      title: '敏感词',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: '标签',
-      field: 'tag',
-      isTable: false,
-      isForm: false,
-      isDetail: false,
-      isSearch: true
-    },
-    {
-      title: '标签',
-      field: 'tags',
-      table: {
-        slots: {
-          default: 'tags_default'
-        }
-      }
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '描述',
-      field: 'description',
-      form: {
-        component: 'Input',
-        componentProps: {
-          type: 'textarea',
-          rows: 4
-        },
-        colProps: {
-          span: 24
-        }
-      }
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From 5d062d5877ec0fffd525ab2360870706a9330072 Mon Sep 17 00:00:00 2001
From: Theo <koutianyu@163.com>
Date: Sun, 19 Mar 2023 16:48:27 +0800
Subject: [PATCH 02/12] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=AD=97=E5=85=B8?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/dict/types.ts        |  18 +-
 src/router/modules/remaining.ts     |  25 ++
 src/views/system/dict/data.form.vue | 182 ++++++++++++
 src/views/system/dict/data.vue      | 203 +++++++++++++
 src/views/system/dict/dict.data.ts  | 104 -------
 src/views/system/dict/dict.type.ts  |  65 -----
 src/views/system/dict/form.vue      | 122 ++++++++
 src/views/system/dict/index.vue     | 436 ++++++++++++----------------
 8 files changed, 736 insertions(+), 419 deletions(-)
 create mode 100644 src/views/system/dict/data.form.vue
 create mode 100644 src/views/system/dict/data.vue
 delete mode 100644 src/views/system/dict/dict.data.ts
 delete mode 100644 src/views/system/dict/dict.type.ts
 create mode 100644 src/views/system/dict/form.vue

diff --git a/src/api/system/dict/types.ts b/src/api/system/dict/types.ts
index b630dccb..3421cd23 100644
--- a/src/api/system/dict/types.ts
+++ b/src/api/system/dict/types.ts
@@ -1,16 +1,18 @@
 export type DictTypeVO = {
-  id: number
+  id: number | undefined
   name: string
   type: string
-  status: number
+  status: number | undefined
   remark: string
   createTime: Date
 }
 
 export type DictTypePageReqVO = {
+  pageNo: number
+  pageSize: number
   name: string
   type: string
-  status: number
+  status: number | undefined
   createTime: Date[]
 }
 
@@ -22,8 +24,8 @@ export type DictTypeExportReqVO = {
 }
 
 export type DictDataVO = {
-  id: number
-  sort: number
+  id: number | undefined
+  sort: number | undefined
   label: string
   value: string
   dictType: string
@@ -31,12 +33,14 @@ export type DictDataVO = {
   colorType: string
   cssClass: string
   remark: string
-  createTime: Date
+  createTime: Date | undefined
 }
 export type DictDataPageReqVO = {
+  pageNo: number
+  pageSize: number
   label: string
   dictType: string
-  status: number
+  status: number | undefined
 }
 
 export type DictDataExportReqVO = {
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 43375961..d5970267 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -104,6 +104,31 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
+
+  {
+    path: '/dict',
+    component: Layout,
+    name: 'dict',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'type/data/:dictType',
+        component: () => import('@/views/system/dict/data.vue'),
+        name: 'data',
+        meta: {
+          title: '字典数据',
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: '',
+          activeMenu: 'system/dict/data'
+        }
+      }
+    ]
+  },
+
   {
     path: '/codegen',
     component: Layout,
diff --git a/src/views/system/dict/data.form.vue b/src/views/system/dict/data.form.vue
new file mode 100644
index 00000000..5c85b946
--- /dev/null
+++ b/src/views/system/dict/data.form.vue
@@ -0,0 +1,182 @@
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="字典类型" prop="type">
+        <el-input
+          :disabled="typeof formData.id !== 'undefined'"
+          v-model="formData.dictType"
+          placeholder="请输入参数名称"
+        />
+      </el-form-item>
+      <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>
+      <el-form-item label="显示排序" prop="sort">
+        <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="parseInt(dict.value)"
+            >{{ dict.label }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="颜色类型" prop="colorType">
+        <el-select v-model="formData.colorType">
+          <el-option
+            v-for="item in colorTypeOptions"
+            :key="item.value"
+            :label="item.label + '(' + item.value + ')'"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="CSS Class" prop="cssClass">
+        <el-input v-model="formData.cssClass" placeholder="请输入 CSS Class" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</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'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  sort: 0,
+  label: '',
+  value: '',
+  dictType: '',
+  status: 0,
+  colorType: '',
+  cssClass: '',
+  remark: '',
+  createTime: undefined
+})
+const formRules = reactive({
+  label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+  value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+// 数据标签回显样式
+
+const colorTypeOptions = readonly([
+  {
+    value: 'default',
+    label: '默认'
+  },
+  {
+    value: 'primary',
+    label: '主要'
+  },
+  {
+    value: 'success',
+    label: '成功'
+  },
+  {
+    value: 'info',
+    label: '信息'
+  },
+  {
+    value: 'warning',
+    label: '警告'
+  },
+  {
+    value: 'danger',
+    label: '危险'
+  }
+])
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await DictDataApi.getDictDataApi(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as DictDataVO
+    if (formType.value === 'create') {
+      await DictDataApi.createDictDataApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DictDataApi.updateDictDataApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    sort: undefined,
+    label: '',
+    value: '',
+    dictType: '',
+    status: 0,
+    colorType: '',
+    cssClass: '',
+    remark: '',
+    createTime: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
new file mode 100644
index 00000000..2c1b373a
--- /dev/null
+++ b/src/views/system/dict/data.vue
@@ -0,0 +1,203 @@
+<template>
+  <content-wrap>
+    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+      <el-form-item label="字典名称" prop="dictType">
+        <el-select v-model="queryParams.dictType">
+          <el-option
+            v-for="item in simpleDictList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.type"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字典标签" prop="label">
+        <el-input
+          v-model="queryParams.label"
+          placeholder="请输入字典标签"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" @click="openModal('create')" v-hasPermi="['system:dict:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:dict:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="字典编码" align="center" prop="id" />
+      <el-table-column label="字典标签" align="center" prop="label" />
+      <el-table-column label="字典键值" align="center" prop="value" />
+      <el-table-column label="字典排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="颜色类型" align="center" prop="colorType" />
+      <el-table-column label="CSS Class" align="center" prop="cssClass" />
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="tableTooltipConfig"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            @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
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @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 { 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 { useRoute } from 'vue-router'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const route = useRoute()
+
+const simpleDictList = ref<DictTypeVO[]>()
+
+const tableTooltipConfig = readonly({
+  appendTo: 'body'
+})
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  label: '',
+  status: undefined,
+  dictType: route.params.dictType
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DictDataApi.getDictDataPageApi(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 = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+  modalRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DictDataApi.deleteDictDataApi(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DictDataApi.exportDictDataApi(queryParams)
+    download.excel(data, '字典数据.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+// 查询字典（精简)列表
+getSimpleDictList()
+</script>
diff --git a/src/views/system/dict/dict.data.ts b/src/views/system/dict/dict.data.ts
deleted file mode 100644
index cdfe4538..00000000
--- a/src/views/system/dict/dict.data.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
-// 表单校验
-export const dictDataRules = reactive({
-  label: [required],
-  value: [required],
-  sort: [required]
-})
-// crudSchemas
-export const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: null,
-  action: true,
-  actionWidth: '140px',
-  searchSpan: 12,
-  columns: [
-    {
-      title: '字典类型',
-      field: 'dictType',
-      isTable: false,
-      isForm: false
-    },
-    {
-      title: '数据标签',
-      field: 'label',
-      isSearch: true
-    },
-    {
-      title: '数据键值',
-      field: 'value'
-    },
-    // {
-    //   title: '标签类型',
-    //   field: 'colorType',
-    //   form: {
-    //     component: 'Select',
-    //     componentProps: {
-    //       options: [
-    //         {
-    //           label: 'default',
-    //           value: ''
-    //         },
-    //         {
-    //           label: 'success',
-    //           value: 'success'
-    //         },
-    //         {
-    //           label: 'info',
-    //           value: 'info'
-    //         },
-    //         {
-    //           label: 'warning',
-    //           value: 'warning'
-    //         },
-    //         {
-    //           label: 'danger',
-    //           value: 'danger'
-    //         }
-    //       ]
-    //     }
-    //   },
-    //   isTable: false
-    // },
-    {
-      title: '颜色',
-      field: 'cssClass',
-      isTable: false,
-      form: {
-        component: 'ColorPicker',
-        componentProps: {
-          predefine: ['#ffffff', '#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#c71585']
-        }
-      }
-    },
-    {
-      title: '显示排序',
-      field: 'sort',
-      isTable: false
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number'
-    },
-    {
-      title: t('form.remark'),
-      field: 'remark',
-      form: {
-        component: 'Input',
-        componentProps: {
-          type: 'textarea',
-          rows: 4
-        },
-        colProps: {
-          span: 24
-        }
-      },
-      isTable: false
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/dict/dict.type.ts b/src/views/system/dict/dict.type.ts
deleted file mode 100644
index 73b5a021..00000000
--- a/src/views/system/dict/dict.type.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const dictTypeRules = reactive({
-  name: [required],
-  type: [required]
-})
-// 新增 + 修改
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: null,
-  action: true,
-  actionWidth: '140px',
-  searchSpan: 12,
-  columns: [
-    {
-      title: '字典名称',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: '字典类型',
-      field: 'type',
-      isSearch: true
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number',
-      table: {
-        width: 70
-      }
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false,
-      isTable: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    },
-    {
-      title: t('form.remark'),
-      field: 'remark',
-      isTable: false,
-      form: {
-        componentProps: {
-          type: 'textarea',
-          rows: 4
-        },
-        colProps: {
-          span: 24
-        }
-      }
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/dict/form.vue b/src/views/system/dict/form.vue
new file mode 100644
index 00000000..28b42c9d
--- /dev/null
+++ b/src/views/system/dict/form.vue
@@ -0,0 +1,122 @@
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="字典名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入字典名称" />
+      </el-form-item>
+      <el-form-item label="字典类型" prop="type">
+        <el-input
+          :disabled="typeof formData.id !== 'undefined'"
+          v-model="formData.type"
+          placeholder="请输入参数名称"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="parseInt(dict.value)"
+            >{{ dict.label }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<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'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: '',
+  type: '',
+  status: 0,
+  remark: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await DictTypeApi.getDictTypeApi(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as DictTypeVO
+    if (formType.value === 'create') {
+      await DictTypeApi.createDictTypeApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DictTypeApi.updateDictTypeApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    type: '',
+    name: '',
+    status: undefined,
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 713fde97..367cc9d4 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,257 +1,207 @@
 <template>
-  <div class="flex">
-    <!-- ====== 字典分类 ====== -->
-    <el-card class="w-1/2 dict" :gutter="12" shadow="always">
-      <template #header>
-        <div class="card-header">
-          <span>字典分类</span>
-        </div>
-      </template>
-      <XTable @register="registerType" @cell-click="cellClickEvent">
-        <!-- 操作：新增类型 -->
-        <template #toolbar_buttons>
-          <XButton
-            type="primary"
-            preIcon="ep:zoom-in"
-            :title="t('action.add')"
-            v-hasPermi="['system:dict:create']"
-            @click="handleTypeCreate()"
+  <content-wrap>
+    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+      <el-form-item label="字典名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入字典名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="字典类型" prop="type">
+        <el-input
+          v-model="queryParams.type"
+          placeholder="请输入字典类型"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="字典状态"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="dict.value"
           />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" @click="openModal('create')" v-hasPermi="['system:dict:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:dict:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 列表 -->
+    <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>
+        <template #default="scope">
+          <div>
+            <router-link :to="'/dict/type/data/' + scope.row.type">
+              <span>{{ scope.row.type }}</span>
+            </router-link>
+          </div>
         </template>
-        <template #actionbtns_default="{ row }">
-          <!-- 操作：编辑类型 -->
-          <XTextButton
-            preIcon="ep:edit"
-            :title="t('action.edit')"
-            v-hasPermi="['system:dict:update']"
-            @click="handleTypeUpdate(row.id)"
-          />
-          <!-- 操作：删除类型 -->
-          <XTextButton
-            preIcon="ep:delete"
-            :title="t('action.del')"
-            v-hasPermi="['system:dict:delete']"
-            @click="typeDeleteData(row.id)"
-          />
+      </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" />
         </template>
-      </XTable>
-      <!-- @星语：分页和列表重叠在一起了 -->
-    </el-card>
-    <!-- ====== 字典数据 ====== -->
-    <el-card class="w-1/2 dict ml-3" :gutter="12" shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <span>字典数据</span>
-        </div>
-      </template>
-      <!-- 列表 -->
-      <div v-if="!tableTypeSelect">
-        <span>请从左侧选择</span>
-      </div>
-      <div v-if="tableTypeSelect">
-        <!-- 列表 -->
-        <XTable @register="registerData">
-          <!-- 操作：新增数据 -->
-          <template #toolbar_buttons>
-            <XButton
-              type="primary"
-              preIcon="ep:zoom-in"
-              :title="t('action.add')"
-              v-hasPermi="['system:dict:create']"
-              @click="handleDataCreate()"
-            />
-          </template>
-          <template #actionbtns_default="{ row }">
-            <!-- 操作：修改数据 -->
-            <XTextButton
-              v-hasPermi="['system:dict:update']"
-              preIcon="ep:edit"
-              :title="t('action.edit')"
-              @click="handleDataUpdate(row.id)"
-            />
-            <!-- 操作：删除数据 -->
-            <XTextButton
-              v-hasPermi="['system:dict:delete']"
-              preIcon="ep:delete"
-              :title="t('action.del')"
-              @click="dataDeleteData(row.id)"
-            />
-          </template>
-        </XTable>
-      </div>
-    </el-card>
-    <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
-      <Form
-        v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
-        :schema="DictTypeSchemas.allSchemas.formSchema"
-        :rules="DictTypeSchemas.dictTypeRules"
-        ref="typeFormRef"
-      >
-        <template #type>
-          <template v-if="actionType == 'typeUpdate'">
-            <el-tag>{{ dictTypeValue }}</el-tag>
-          </template>
-          <template v-else><el-input v-model="dictTypeValue" /> </template>
-        </template>
-      </Form>
-      <Form
-        v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
-        :schema="DictDataSchemas.allSchemas.formSchema"
-        :rules="DictDataSchemas.dictDataRules"
-        ref="dataFormRef"
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="创建时间"
+        :formatter="dateFormatter"
+        align="center"
+        prop="createTime"
+        width="180"
       />
-      <!-- 操作按钮 -->
-      <template #footer>
-        <XButton
-          v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
-          type="primary"
-          :title="t('action.save')"
-          :loading="actionLoading"
-          @click="submitTypeForm"
-        />
-        <XButton
-          v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
-          type="primary"
-          :title="t('action.save')"
-          :loading="actionLoading"
-          @click="submitDataForm"
-        />
-        <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
-      </template>
-    </XModal>
-  </div>
+
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            @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
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </content-wrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <dict-type-form ref="modalRef" @success="getList" />
 </template>
+
 <script setup lang="ts" name="Dict">
-import { VxeTableEvents } from 'vxe-table'
-import type { FormExpose } from '@/components/Form'
-import * as DictTypeSchemas from './dict.type'
-import * as DictDataSchemas from './dict.data'
 import * as DictTypeApi from '@/api/system/dict/dict.type'
-import * as DictDataApi from '@/api/system/dict/dict.data'
-import { DictDataVO, DictTypeVO } from '@/api/system/dict/types'
-
-const { t } = useI18n() // 国际化
+import { getDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import DictTypeForm from './form.vue'
+import { DictTypePageReqVO } from '@/api/system/dict/types'
+import download from '@/utils/download'
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
-const [registerType, { reload: typeGetList, deleteData: typeDeleteData }] = useXTable({
-  allSchemas: DictTypeSchemas.allSchemas,
-  getListApi: DictTypeApi.getDictTypePageApi,
-  deleteApi: DictTypeApi.deleteDictTypeApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+
+const list = ref([]) // 字典表格数据
+const queryParams = reactive<DictTypePageReqVO>({
+  pageNo: 1,
+  pageSize: 10,
+  name: '',
+  type: '',
+  status: undefined,
+  createTime: []
 })
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
 
-const queryParams = reactive({
-  dictType: null
+/** 查询字典类型列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DictTypeApi.getDictTypePageApi(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+  modalRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DictTypeApi.deleteDictTypeApi(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DictTypeApi.exportDictTypeApi(queryParams)
+    download.excel(data, '字典类型.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
 })
-const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
-  allSchemas: DictDataSchemas.allSchemas,
-  params: queryParams,
-  getListApi: DictDataApi.getDictDataPageApi,
-  deleteApi: DictDataApi.deleteDictDataApi
-})
-// ========== 字典分类列表相关 ==========
-const dictTypeValue = ref('')
-// 字典分类修改操作
-const handleTypeCreate = () => {
-  dictTypeValue.value = ''
-  setDialogTile('typeCreate')
-}
-const handleTypeUpdate = async (rowId: number) => {
-  setDialogTile('typeUpdate')
-  // 设置数据
-  const res = await DictTypeApi.getDictTypeApi(rowId)
-  dictTypeValue.value = res.type
-  unref(typeFormRef)?.setValues(res)
-}
-
-// 字典数据修改操作
-const handleDataCreate = () => {
-  setDialogTile('dataCreate')
-}
-const handleDataUpdate = async (rowId: number) => {
-  setDialogTile('dataUpdate')
-  // 设置数据
-  const res = await DictDataApi.getDictDataApi(rowId)
-  unref(dataFormRef)?.setValues(res)
-}
-// 字典分类点击行事件
-const parentType = ref('')
-const tableTypeSelect = ref(false)
-const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
-  tableTypeSelect.value = true
-  queryParams.dictType = row['type']
-  await nextTick()
-  await dataGetList()
-  parentType.value = row['type']
-}
-// 弹出框
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionLoading = ref(false) // 遮罩层
-const typeFormRef = ref<FormExpose>() // 分类表单 Ref
-const dataFormRef = ref<FormExpose>() // 数据表单 Ref
-const actionType = ref('') // 操作按钮的类型
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
-}
-
-// 同步dictTypeValue到form 否则导致表单验证不通过
-watch(dictTypeValue, (val) => {
-  unref(typeFormRef)?.setValues({ type: val })
-})
-
-// 提交按钮
-const submitTypeForm = async () => {
-  const elForm = unref(typeFormRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid && dictTypeValue.value != '') {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(typeFormRef)?.formModel as DictTypeVO
-        if (actionType.value === 'typeCreate') {
-          data.type = dictTypeValue.value
-          await DictTypeApi.createDictTypeApi(data)
-          message.success(t('common.createSuccess'))
-        } else if (actionType.value === 'typeUpdate') {
-          await DictTypeApi.updateDictTypeApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        typeGetList()
-      }
-    }
-  })
-}
-const submitDataForm = async () => {
-  const elForm = unref(dataFormRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(dataFormRef)?.formModel as DictDataVO
-        if (actionType.value === 'dataCreate') {
-          data.dictType = parentType.value
-          await DictDataApi.createDictDataApi(data)
-          message.success(t('common.createSuccess'))
-        } else if (actionType.value === 'dataUpdate') {
-          await DictDataApi.updateDictDataApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        dataGetList()
-      }
-    }
-  })
-}
 </script>

From 188329355353db8a3925089cc8a385eb4f67e812 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 19 Mar 2023 20:56:11 +0800
Subject: [PATCH 03/12] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E4=BB=A4=E7=89=8C=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/oauth2/token.ts              |  10 +-
 src/views/system/oauth2/token/index.vue     | 188 ++++++++++++++------
 src/views/system/oauth2/token/token.data.ts |  48 -----
 3 files changed, 137 insertions(+), 109 deletions(-)
 delete mode 100644 src/views/system/oauth2/token/token.data.ts

diff --git a/src/api/system/oauth2/token.ts b/src/api/system/oauth2/token.ts
index dc7c44f5..8e9dca1e 100644
--- a/src/api/system/oauth2/token.ts
+++ b/src/api/system/oauth2/token.ts
@@ -11,18 +11,12 @@ export interface OAuth2TokenVO {
   expiresTime: Date
 }
 
-export interface OAuth2TokenPageReqVO extends PageParam {
-  userId?: number
-  userType?: number
-  clientId?: string
-}
-
 // 查询 token列表
-export const getAccessTokenPageApi = (params: OAuth2TokenPageReqVO) => {
+export const getAccessTokenPage = (params: PageParam) => {
   return request.get({ url: '/system/oauth2-token/page', params })
 }
 
 // 删除 token
-export const deleteAccessTokenApi = (accessToken: number) => {
+export const deleteAccessToken = (accessToken: number) => {
   return request.delete({ url: '/system/oauth2-token/delete?accessToken=' + accessToken })
 }
diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue
index f0dfbd9c..e8c730e0 100644
--- a/src/views/system/oauth2/token/index.vue
+++ b/src/views/system/oauth2/token/index.vue
@@ -1,64 +1,146 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：详情 -->
-        <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
-        <!-- 操作：登出 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.logout')"
-          v-hasPermi="['system:oauth2-token:delete']"
-          @click="handleForceLogout(row.id)"
+  <content-wrap>
+    <!-- 搜索工作栏 -->
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+      <el-form-item label="用户编号" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户编号"
+          clearable
+          @keyup.enter="handleQuery"
         />
-      </template>
-    </XTable>
-  </ContentWrap>
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户端编号" prop="clientId">
+        <el-input
+          v-model="queryParams.clientId"
+          placeholder="请输入客户端编号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</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="accessToken" width="300" />
+      <el-table-column label="刷新令牌" align="center" prop="refreshToken" width="300" />
+      <el-table-column label="用户编号" align="center" prop="userId" />
+      <el-table-column label="用户类型" align="center" prop="userType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="过期时间"
+        align="center"
+        prop="expiresTime"
+        :formatter="dateFormatter"
+        width="180"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="danger"
+            @click="handleForceLogout(scope.row.id)"
+            v-hasPermi="['system:oauth2-token:delete']"
+          >
+            强退
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </content-wrap>
 </template>
-<script setup lang="ts" name="Token">
-import { allSchemas } from './token.data'
-import * as TokenApi from '@/api/system/oauth2/token'
 
-const { t } = useI18n() // 国际化
+<script setup lang="ts" name="Oauth2AccessToken">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as OAuth2AccessTokenApi from '@/api/system/oauth2/token'
 const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload }] = useXTable({
-  allSchemas: allSchemas,
-  topActionSlots: false,
-  getListApi: TokenApi.getAccessTokenPageApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: null,
+  userType: null,
+  clientId: null
 })
+const queryFormRef = ref() // 搜索的表单
 
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref(t('action.detail')) // 弹出层标题
-// 详情
-const handleDetail = async (row: TokenApi.OAuth2TokenVO) => {
-  // 设置数据
-  detailData.value = row
-  dialogVisible.value = true
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await OAuth2AccessTokenApi.getAccessTokenPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
-// 强退操作
-const handleForceLogout = (rowId: number) => {
-  message
-    .confirm('是否要强制退出用户')
-    .then(async () => {
-      await TokenApi.deleteAccessTokenApi(rowId)
-      message.success(t('common.success'))
-    })
-    .finally(async () => {
-      // 刷新列表
-      await reload()
-    })
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 强制退出操作 */
+const handleForceLogout = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否要强制退出用户')
+    // 发起删除
+    await OAuth2AccessTokenApi.deleteAccessToken(id)
+    message.success(t('common.success'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>
diff --git a/src/views/system/oauth2/token/token.data.ts b/src/views/system/oauth2/token/token.data.ts
deleted file mode 100644
index 8a0e8486..00000000
--- a/src/views/system/oauth2/token/token.data.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: null,
-  action: true,
-  columns: [
-    {
-      title: '用户编号',
-      field: 'userId',
-      isSearch: true
-    },
-    {
-      title: '访问令牌',
-      field: 'accessToken'
-    },
-    {
-      title: '刷新令牌',
-      field: 'refreshToken'
-    },
-    {
-      title: '客户端编号',
-      field: 'clientId',
-      isSearch: true
-    },
-    {
-      title: '用户类型',
-      field: 'userType',
-      dictType: DICT_TYPE.USER_TYPE,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false
-    },
-    {
-      title: '过期时间',
-      field: 'expiresTime',
-      formatter: 'formatDate',
-      isForm: false
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From cf959599c6425b4f821394cbe3d16b4abb4ae59d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 19 Mar 2023 21:30:53 +0800
Subject: [PATCH 04/12] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AReview?=
 =?UTF-8?q?=20=E6=95=8F=E6=84=9F=E8=AF=8D=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/sensitiveWord/form.vue  | 11 ++++++-----
 src/views/system/sensitiveWord/index.vue | 24 +++++++++++++-----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/views/system/sensitiveWord/form.vue b/src/views/system/sensitiveWord/form.vue
index a0ed7a21..1dccd656 100644
--- a/src/views/system/sensitiveWord/form.vue
+++ b/src/views/system/sensitiveWord/form.vue
@@ -48,6 +48,7 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as SensitiveWordApi from '@/api/system/sensitiveWord'
+import { CommonStatusEnum } from '@/utils/constants'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -56,11 +57,10 @@ const modelVisible = ref(false) // 弹窗的是否展示
 const modelTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const tags = ref([])
 const formData = ref({
   id: undefined,
   name: '',
-  status: true,
+  status: CommonStatusEnum.ENABLE,
   description: '',
   tags: []
 })
@@ -69,6 +69,7 @@ const formRules = reactive({
   tags: [{ required: true, message: '标签不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const tags = ref([]) // todo @blue-syd：在 openModal 里加载下
 
 /** 打开弹窗 */
 const openModal = async (type: string, id?: number) => {
@@ -101,10 +102,10 @@ const submitForm = async () => {
   try {
     const data = formData.value as unknown as SensitiveWordApi.SensitiveWordVO
     if (formType.value === 'create') {
-      await SensitiveWordApi.createSensitiveWordApi(data)
+      await SensitiveWordApi.createSensitiveWordApi(data) // TODO @blue-syd：去掉 API 后缀
       message.success(t('common.createSuccess'))
     } else {
-      await SensitiveWordApi.updateSensitiveWordApi(data)
+      await SensitiveWordApi.updateSensitiveWordApi(data) // TODO @blue-syd：去掉 API 后缀
       message.success(t('common.updateSuccess'))
     }
     modelVisible.value = false
@@ -120,7 +121,7 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     name: '',
-    status: true,
+    status: CommonStatusEnum.ENABLE,
     description: '',
     tags: []
   }
diff --git a/src/views/system/sensitiveWord/index.vue b/src/views/system/sensitiveWord/index.vue
index 0eb8287d..93ea29f1 100644
--- a/src/views/system/sensitiveWord/index.vue
+++ b/src/views/system/sensitiveWord/index.vue
@@ -40,7 +40,6 @@
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
         />
       </el-form-item>
-
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -82,9 +81,11 @@
             :key="index"
             v-for="(tag, index) in scope.row.tags"
             :index="index"
+            class="mr-5px"
           >
             {{ tag }}
           </el-tag>
+          &nbsp; &nbsp;
         </template>
       </el-table-column>
       <el-table-column
@@ -132,14 +133,13 @@ import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as SensitiveWordApi from '@/api/system/sensitiveWord'
-import ConfigForm from './form.vue'
+import ConfigForm from './form.vue' // TODO @blue-syd：组件名不对
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
-const tags = ref([])
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -150,12 +150,13 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const tags = ref([])
 
 /** 查询参数列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await SensitiveWordApi.getSensitiveWordPageApi(queryParams)
+    const data = await SensitiveWordApi.getSensitiveWordPageApi(queryParams) // TODO @blue-syd：去掉 API 后缀哈
     list.value = data.list
     total.value = data.total
   } finally {
@@ -163,12 +164,6 @@ const getList = async () => {
   }
 }
 
-/** 初始化标签select*/
-const getTags = async () => {
-  const data = await SensitiveWordApi.getSensitiveWordTagsApi()
-  tags.value = data
-}
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -187,6 +182,8 @@ const openModal = (type: string, id?: number) => {
   modalRef.value.openModal(type, id)
 }
 
+// TODO @blue-syd：还少一个【测试】按钮的功能，参见 http://dashboard.yudao.iocoder.cn/system/sensitive-word
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
@@ -207,7 +204,7 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await SensitiveWordApi.exportSensitiveWordApi(queryParams)
+    const data = await SensitiveWordApi.exportSensitiveWordApi(queryParams) // TODO @blue-syd：去掉 API 后缀哈
     download.excel(data, '敏感词.xls')
   } catch {
   } finally {
@@ -215,6 +212,11 @@ const handleExport = async () => {
   }
 }
 
+/** 获得 Tag 标签列表 */
+const getTags = async () => {
+  tags.value = await SensitiveWordApi.getSensitiveWordTagsApi() // TODO @blue-syd：去掉 API 后缀哈
+}
+
 /** 初始化 **/
 onMounted(() => {
   getTags()

From 40bd2c57f8088962a968a13c891e7e5ea5b87632 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 19 Mar 2023 22:14:55 +0800
Subject: [PATCH 05/12] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AReview?=
 =?UTF-8?q?=20=E5=AD=97=E5=85=B8=E6=95=B0=E6=8D=AE=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/dict/dict.data.ts              | 29 +++++---
 src/api/system/dict/dict.type.ts              | 24 ++++---
 src/api/system/dict/types.ts                  | 50 --------------
 src/store/modules/dict.ts                     |  6 +-
 .../codegen/components/CloumInfoForm.vue      |  4 +-
 src/views/system/dict/data.form.vue           | 25 +++----
 src/views/system/dict/data.vue                | 67 ++++++++++---------
 src/views/system/dict/form.vue                | 15 +++--
 src/views/system/dict/index.vue               | 55 ++++++++-------
 9 files changed, 128 insertions(+), 147 deletions(-)
 delete mode 100644 src/api/system/dict/types.ts

diff --git a/src/api/system/dict/dict.data.ts b/src/api/system/dict/dict.data.ts
index fd97a2dc..6d981326 100644
--- a/src/api/system/dict/dict.data.ts
+++ b/src/api/system/dict/dict.data.ts
@@ -1,36 +1,49 @@
 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 })
 }
diff --git a/src/api/system/dict/dict.type.ts b/src/api/system/dict/dict.type.ts
index 22e6411e..0d9faeb2 100644
--- a/src/api/system/dict/dict.type.ts
+++ b/src/api/system/dict/dict.type.ts
@@ -1,36 +1,44 @@
 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 })
 }
diff --git a/src/api/system/dict/types.ts b/src/api/system/dict/types.ts
deleted file mode 100644
index 3421cd23..00000000
--- a/src/api/system/dict/types.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-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
-}
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index 4e9ab39c..2d393e43 100644
--- 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) => {
diff --git a/src/views/infra/codegen/components/CloumInfoForm.vue b/src/views/infra/codegen/components/CloumInfoForm.vue
index 0b6ea697..5a60c546 100644
--- 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 () => {
diff --git a/src/views/system/dict/data.form.vue b/src/views/system/dict/data.form.vue
index 5c85b946..c0b70b8e 100644
--- 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: '',
-  createTime: undefined
+  remark: ''
 })
 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: '',
-    createTime: undefined
+    remark: ''
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 2c1b373a..e45dcfec 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -1,6 +1,12 @@
 <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
-        label="备注"
-        align="center"
-        prop="remark"
-        :show-overflow-tooltip="tableTooltipConfig"
-      />
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
       <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 { useRoute } from 'vue-router'
+import type { DictTypeVO } from '@/api/system/dict/dict.type'
 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>
diff --git a/src/views/system/dict/form.vue b/src/views/system/dict/form.vue
index 28b42c9d..af02c597 100644
--- 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()
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 367cc9d4..a029d2ee 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,6 +1,13 @@
 <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>
-        <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="type" width="300" />
       <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 {

From 030ecd3137f626854e3c4c4fc713e297ccbd5f41 Mon Sep 17 00:00:00 2001
From: zhangjl <zhangjinlong1211@126.com>
Date: Sun, 19 Mar 2023 23:20:49 +0800
Subject: [PATCH 06/12] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E7=A0=81=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/errorCode/index.ts            |   4 +-
 src/views/system/errorCode/errorCode.data.ts |  54 ----
 src/views/system/errorCode/form.vue          | 114 +++++++
 src/views/system/errorCode/index.vue         | 321 +++++++++++--------
 4 files changed, 312 insertions(+), 181 deletions(-)
 delete mode 100644 src/views/system/errorCode/errorCode.data.ts
 create mode 100644 src/views/system/errorCode/form.vue

diff --git a/src/api/system/errorCode/index.ts b/src/api/system/errorCode/index.ts
index 0e000794..65eabd3a 100644
--- a/src/api/system/errorCode/index.ts
+++ b/src/api/system/errorCode/index.ts
@@ -1,10 +1,10 @@
 import request from '@/config/axios'
 
 export interface ErrorCodeVO {
-  id: number
+  id: number | undefined
   type: number
   applicationName: string
-  code: number
+  code: number | undefined
   message: string
   memo: string
   createTime: Date
diff --git a/src/views/system/errorCode/errorCode.data.ts b/src/views/system/errorCode/errorCode.data.ts
deleted file mode 100644
index 4736068b..00000000
--- a/src/views/system/errorCode/errorCode.data.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  applicationName: [required],
-  code: [required],
-  message: [required]
-})
-
-// 新增 + 修改
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '编号',
-  action: true,
-  columns: [
-    {
-      title: '错误码类型',
-      field: 'type',
-      dictType: DICT_TYPE.SYSTEM_ERROR_CODE_TYPE,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '应用名',
-      field: 'applicationName',
-      isSearch: true
-    },
-    {
-      title: '错误码编码',
-      field: 'code',
-      isSearch: true
-    },
-    {
-      title: '错误码错误提示',
-      field: 'message',
-      isSearch: true
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/errorCode/form.vue b/src/views/system/errorCode/form.vue
new file mode 100644
index 00000000..5e6a0bc8
--- /dev/null
+++ b/src/views/system/errorCode/form.vue
@@ -0,0 +1,114 @@
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="应用名" prop="applicationName">
+        <el-input v-model="formData.applicationName" placeholder="请输入应用名" clearable />
+      </el-form-item>
+      <el-form-item label="错误码编码" prop="code">
+        <el-input v-model="formData.code" placeholder="请输入错误码编码" clearable />
+      </el-form-item>
+      <el-form-item label="错误码提示" prop="message">
+        <el-input v-model="formData.message" placeholder="请输入错误码提示" clearable />
+      </el-form-item>
+      <el-form-item label="备注" prop="memo">
+        <el-input v-model="formData.memo" placeholder="请输入备注" clearable />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as ErrorCodeApi from '@/api/system/errorCode'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+// 表单参数
+const formData = ref({
+  id: undefined,
+  code: undefined,
+  applicationName: '',
+  message: '',
+  memo: ''
+})
+// 表单校验
+const formRules = reactive({
+  applicationName: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
+  code: [{ required: true, message: '错误码编码不能为空', trigger: 'blur' }],
+  message: [{ required: true, message: '错误码提示不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ErrorCodeApi.getErrorCodeApi(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+/** 提交按钮 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as ErrorCodeApi.ErrorCodeVO
+    if (formType.value === 'create') {
+      await ErrorCodeApi.createErrorCodeApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ErrorCodeApi.updateErrorCodeApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 表单重置 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    applicationName: '',
+    code: undefined,
+    message: '',
+    memo: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/errorCode/index.vue b/src/views/system/errorCode/index.vue
index 1ff3d103..8f7dac33 100644
--- a/src/views/system/errorCode/index.vue
+++ b/src/views/system/errorCode/index.vue
@@ -1,145 +1,216 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <!-- 操作：新增 -->
-      <template #toolbar_buttons>
-        <XButton
+  <!-- 搜索工作栏 -->
+  <content-wrap>
+    <el-form :model="queryParams" ref="queryFormRef" class="-mb-15px" :inline="true">
+      <el-form-item label="错误码类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择错误码类型" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_ERROR_CODE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用名" prop="applicationName">
+        <el-input
+          v-model="queryParams.applicationName"
+          placeholder="请输入应用名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="错误码编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入错误码编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="错误码提示" prop="message">
+        <el-input
+          v-model="queryParams.message"
+          placeholder="请输入错误码提示"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
           type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
+          @click="openModal('create')"
           v-hasPermi="['system:error-code:create']"
-          @click="handleCreate()"
-        />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['system:error-code:update']"
-          @click="handleUpdate(row.id)"
-        />
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['system:error-code:query']"
-          @click="handleDetail(row.id)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['system:error-code:delete']"
-          @click="deleteData(row.id)"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
-  <!-- 弹窗 -->
-  <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-      ref="formRef"
-    />
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:error-code:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </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="type" width="80">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_ERROR_CODE_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="应用名" align="center" prop="applicationName" width="200" />
+      <el-table-column label="错误码编码" align="center" prop="code" width="120" />
+      <el-table-column label="错误码提示" align="center" prop="message" width="300" />
+      <el-table-column label="备注" align="center" prop="memo" width="200" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
       />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openModal('update', scope.row.id)"
+            v-hasPermi="['system:error-code:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:error-code:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </content-wrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <error-code-form ref="modalRef" @success="getList" />
 </template>
+
 <script setup lang="ts" name="ErrorCode">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import { rules, allSchemas } from './errorCode.data'
 import * as ErrorCodeApi from '@/api/system/errorCode'
-
-const { t } = useI18n() // 国际化
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import ErrorCodeForm from './form.vue'
+import download from '@/utils/download'
 const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: ErrorCodeApi.getErrorCodePageApi,
-  deleteApi: ErrorCodeApi.deleteErrorCodeApi
+const { t } = useI18n() // 国际化
+
+// 遮罩层
+const loading = ref(true)
+// 导出遮罩层
+const exportLoading = ref(false)
+// 总条数
+const total = ref(0)
+// 错误码列表
+const list = ref([])
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: undefined,
+  applicationName: undefined,
+  code: undefined,
+  message: undefined,
+  createTime: []
 })
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
+// 搜索的表单
+const queryFormRef = ref()
 
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  // 执行查询
+  try {
+    const data = await ErrorCodeApi.getErrorCodePageApi(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await ErrorCodeApi.getErrorCodeApi(rowId)
-  unref(formRef)?.setValues(res)
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  // 设置数据
-  const res = await ErrorCodeApi.getErrorCodeApi(rowId)
-  detailData.value = res
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+  modalRef.value.openModal(type, id)
 }
 
-// 提交新增/修改的表单
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as ErrorCodeApi.ErrorCodeVO
-        if (actionType.value === 'create') {
-          await ErrorCodeApi.createErrorCodeApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await ErrorCodeApi.updateErrorCodeApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        // 刷新列表
-        await reload()
-      }
-    }
-  })
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ErrorCodeApi.deleteErrorCodeApi(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
 }
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ErrorCodeApi.excelErrorCodeApi(queryParams)
+    download.excel(data, '参数配置.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>

From c40de0330225e1ef81c6c9644c57499773258eda Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 20 Mar 2023 00:20:24 +0800
Subject: [PATCH 07/12] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=20form=20=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/infra/config/index.vue        | 18 +++++++++++++--
 src/views/system/dict/data.vue          | 24 ++++++++------------
 src/views/system/dict/index.vue         | 13 ++++-------
 src/views/system/notice/index.vue       | 16 ++++++++++++--
 src/views/system/oauth2/token/index.vue | 17 +++++++++++++--
 src/views/system/operatelog/index.vue   | 29 ++++++++++++++++++++-----
 6 files changed, 82 insertions(+), 35 deletions(-)

diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index 11fc8fe0..fcc3c12c 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -1,13 +1,20 @@
 <template>
   <!-- 搜索 -->
   <content-wrap>
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+    <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"
           placeholder="请输入参数名称"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="参数键名" prop="key">
@@ -16,10 +23,16 @@
           placeholder="请输入参数键名"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="系统内置" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择系统内置" clearable>
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择系统内置"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
             :key="parseInt(dict.value)"
@@ -36,6 +49,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index e45dcfec..7b159481 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -8,13 +8,8 @@
       label-width="68px"
     >
       <el-form-item label="字典名称" prop="dictType">
-        <el-select v-model="queryParams.dictType">
-          <el-option
-            v-for="item in simpleDictList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.type"
-          />
+        <el-select v-model="queryParams.dictType" class="!w-240px">
+          <el-option v-for="item in dicts" :key="item.type" :label="item.name" :value="item.type" />
         </el-select>
       </el-form-item>
       <el-form-item label="字典标签" prop="label">
@@ -23,10 +18,11 @@
           placeholder="请输入字典标签"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
+        <el-select v-model="queryParams.status" placeholder="数据状态" clearable class="!w-240px">
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
@@ -111,18 +107,15 @@
 </template>
 <script setup lang="ts" name="Data">
 import * as DictDataApi from '@/api/system/dict/dict.data'
-import * as DictTypeApi from '@/api/system/dict/dict.data'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
 import { getDictOptions, DICT_TYPE } from '@/utils/dict'
 import download from '@/utils/download'
 import { dateFormatter } from '@/utils/formatTime'
 import DataForm from './data.form.vue'
-import type { DictTypeVO } from '@/api/system/dict/dict.type'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const route = useRoute() // 路由
 
-const simpleDictList = ref<DictTypeVO[]>()
-
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -135,6 +128,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const dicts = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
 
 /** 查询参数列表 */
 const getList = async () => {
@@ -195,14 +189,14 @@ const handleExport = async () => {
 }
 
 /** 查询字典（精简)列表 */
-const getSimpleDictList = async () => {
-  simpleDictList.value = await DictTypeApi.listSimpleDictData()
+const getDictList = async () => {
+  dicts.value = await DictTypeApi.listSimpleDictType()
 }
 
 /** 初始化 **/
 onMounted(() => {
   getList()
   // 查询字典（精简)列表
-  getSimpleDictList()
+  getDictList()
 })
 </script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index a029d2ee..4e304bf5 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -13,8 +13,8 @@
           v-model="queryParams.name"
           placeholder="请输入字典名称"
           clearable
-          style="width: 240px"
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="字典类型" prop="type">
@@ -22,17 +22,12 @@
           v-model="queryParams.type"
           placeholder="请输入字典类型"
           clearable
-          style="width: 240px"
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="字典状态"
-          clearable
-          style="width: 240px"
-        >
+        <el-select v-model="queryParams.status" placeholder="字典状态" clearable class="!w-240px">
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="parseInt(dict.value)"
@@ -44,13 +39,13 @@
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
-          style="width: 240px"
           value-format="yyyy-MM-dd HH:mm:ss"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index e36f3aac..65076f9f 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,17 +1,29 @@
 <template>
   <content-wrap>
     <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="公告标题" prop="title">
         <el-input
           v-model="queryParams.title"
           placeholder="请输入公告标题"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="公告状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择公告状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择公告状态"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="parseInt(dict.value)"
diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue
index e8c730e0..7e8aca22 100644
--- a/src/views/system/oauth2/token/index.vue
+++ b/src/views/system/oauth2/token/index.vue
@@ -1,17 +1,29 @@
 <template>
   <content-wrap>
     <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="90px"
+    >
       <el-form-item label="用户编号" prop="userId">
         <el-input
           v-model="queryParams.userId"
           placeholder="请输入用户编号"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="用户类型" prop="userType">
-        <el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
+        <el-select
+          v-model="queryParams.userType"
+          placeholder="请选择用户类型"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
             :key="dict.value"
@@ -26,6 +38,7 @@
           placeholder="请输入客户端编号"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
diff --git a/src/views/system/operatelog/index.vue b/src/views/system/operatelog/index.vue
index f9667912..d7490ba8 100644
--- a/src/views/system/operatelog/index.vue
+++ b/src/views/system/operatelog/index.vue
@@ -1,13 +1,20 @@
 <template>
   <content-wrap>
     <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="系统模块" prop="module">
         <el-input
           v-model="queryParams.module"
           placeholder="请输入系统模块"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="操作人员" prop="userNickname">
@@ -16,10 +23,16 @@
           placeholder="请输入操作人员"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="操作类型" clearable>
+      <el-form-item label="操作类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择操作类型"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
             :key="parseInt(dict.value)"
@@ -28,8 +41,13 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="状态" prop="success">
-        <el-select v-model="queryParams.success" placeholder="操作状态" clearable>
+      <el-form-item label="操作状态" prop="success">
+        <el-select
+          v-model="queryParams.success"
+          placeholder="请选择操作状态"
+          clearable
+          class="!w-240px"
+        >
           <el-option :key="true" label="成功" :value="true" />
           <el-option :key="false" label="失败" :value="false" />
         </el-select>
@@ -42,6 +60,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>

From 812300cc04050ee0357a0ceea11ec7d5e377909f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 20 Mar 2023 08:53:28 +0800
Subject: [PATCH 08/12] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AREVIEW?=
 =?UTF-8?q?=20=E9=94=99=E8=AF=AF=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/errorCode/form.vue  |  2 --
 src/views/system/errorCode/index.vue | 17 +++++++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/views/system/errorCode/form.vue b/src/views/system/errorCode/form.vue
index 5e6a0bc8..9544c6ab 100644
--- a/src/views/system/errorCode/form.vue
+++ b/src/views/system/errorCode/form.vue
@@ -74,8 +74,6 @@ defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
 
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-
-/** 提交按钮 */
 const submitForm = async () => {
   // 校验表单
   if (!formRef) return
diff --git a/src/views/system/errorCode/index.vue b/src/views/system/errorCode/index.vue
index 8f7dac33..fc152903 100644
--- a/src/views/system/errorCode/index.vue
+++ b/src/views/system/errorCode/index.vue
@@ -1,7 +1,13 @@
 <template>
   <!-- 搜索工作栏 -->
   <content-wrap>
-    <el-form :model="queryParams" ref="queryFormRef" class="-mb-15px" :inline="true">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="90px"
+    >
       <el-form-item label="错误码类型" prop="type">
         <el-select v-model="queryParams.type" placeholder="请选择错误码类型" clearable>
           <el-option
@@ -9,6 +15,7 @@
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
+            class="!w-240px"
           />
         </el-select>
       </el-form-item>
@@ -18,6 +25,7 @@
           placeholder="请输入应用名"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="错误码编码" prop="code">
@@ -34,6 +42,7 @@
           placeholder="请输入错误码提示"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
@@ -44,6 +53,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
@@ -68,6 +78,7 @@
       </el-form-item>
     </el-form>
   </content-wrap>
+
   <!-- 列表 -->
   <content-wrap>
     <el-table v-loading="loading" :data="list">
@@ -118,6 +129,7 @@
       @pagination="getList"
     />
   </content-wrap>
+
   <!-- 表单弹窗：添加/修改 -->
   <error-code-form ref="modalRef" @success="getList" />
 </template>
@@ -194,6 +206,7 @@ const handleDelete = async (id: number) => {
     await getList()
   } catch {}
 }
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
@@ -202,7 +215,7 @@ const handleExport = async () => {
     // 发起导出
     exportLoading.value = true
     const data = await ErrorCodeApi.excelErrorCodeApi(queryParams)
-    download.excel(data, '参数配置.xls')
+    download.excel(data, '错误码.xls')
   } catch {
   } finally {
     exportLoading.value = false

From 7d1d87a1ac5943ff6b27be738f191ae82e95895b Mon Sep 17 00:00:00 2001
From: dtsz <314942997@qq.com>
Date: Tue, 21 Mar 2023 20:18:07 +0800
Subject: [PATCH 09/12] =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/apiErrorLog/index.ts            |   4 +-
 .../infra/apiErrorLog/apiErrorLog.data.ts     |  76 -----
 src/views/infra/apiErrorLog/detail.vue        |  76 +++++
 src/views/infra/apiErrorLog/index.vue         | 311 +++++++++++++-----
 4 files changed, 305 insertions(+), 162 deletions(-)
 delete mode 100644 src/views/infra/apiErrorLog/apiErrorLog.data.ts
 create mode 100644 src/views/infra/apiErrorLog/detail.vue

diff --git a/src/api/infra/apiErrorLog/index.ts b/src/api/infra/apiErrorLog/index.ts
index 06515c36..779cfd61 100644
--- a/src/api/infra/apiErrorLog/index.ts
+++ b/src/api/infra/apiErrorLog/index.ts
@@ -46,7 +46,7 @@ export interface ApiErrorLogExportReqVO {
 }
 
 // 查询列表API 访问日志
-export const getApiErrorLogPageApi = (params: ApiErrorLogPageReqVO) => {
+export const getApiErrorLogPageApi = (params: PageParam) => {
   return request.get({ url: '/infra/api-error-log/page', params })
 }
 
@@ -58,7 +58,7 @@ export const updateApiErrorLogPageApi = (id: number, processStatus: number) => {
 }
 
 // 导出API 访问日志
-export const exportApiErrorLogApi = (params: ApiErrorLogExportReqVO) => {
+export const exportApiErrorLogApi = (params) => {
   return request.download({
     url: '/infra/api-error-log/export-excel',
     params
diff --git a/src/views/infra/apiErrorLog/apiErrorLog.data.ts b/src/views/infra/apiErrorLog/apiErrorLog.data.ts
deleted file mode 100644
index a539c167..00000000
--- a/src/views/infra/apiErrorLog/apiErrorLog.data.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '日志编号',
-  action: true,
-  actionWidth: '300',
-  columns: [
-    {
-      title: '链路追踪',
-      field: 'traceId',
-      isTable: false
-    },
-    {
-      title: '用户编号',
-      field: 'userId',
-      isSearch: true
-    },
-    {
-      title: '用户类型',
-      field: 'userType',
-      dictType: DICT_TYPE.USER_TYPE,
-      isSearch: true
-    },
-    {
-      title: '应用名',
-      field: 'applicationName',
-      isSearch: true
-    },
-    {
-      title: '请求方法名',
-      field: 'requestMethod'
-    },
-    {
-      title: '请求地址',
-      field: 'requestUrl',
-      isSearch: true
-    },
-    {
-      title: '异常发生时间',
-      field: 'exceptionTime',
-      formatter: 'formatDate',
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    },
-    {
-      title: '异常名',
-      field: 'exceptionName'
-    },
-    {
-      title: '处理状态',
-      field: 'processStatus',
-      dictType: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '处理人',
-      field: 'processUserId',
-      isTable: false
-    },
-    {
-      title: '处理时间',
-      field: 'processTime',
-      formatter: 'formatDate',
-      isTable: false
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/apiErrorLog/detail.vue b/src/views/infra/apiErrorLog/detail.vue
new file mode 100644
index 00000000..9ede0f1b
--- /dev/null
+++ b/src/views/infra/apiErrorLog/detail.vue
@@ -0,0 +1,76 @@
+<template>
+  <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
+    <el-descriptions border :column="1">
+      <el-descriptions-item label="日志主键" min-width="120">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="链路追踪">
+        {{ detailData.traceId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="应用名">
+        {{ detailData.applicationName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="用户信息">
+        {{ detailData.userId }} |
+        <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
+        | {{ detailData.userIp }} | {{ detailData.userAgent }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求信息">
+        {{ detailData.requestMethod }} | {{ detailData.requestUrl }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求参数">
+        {{ detailData.requestParams }}
+      </el-descriptions-item>
+      <el-descriptions-item label="异常时间">
+        {{ formatDate(detailData.exceptionTime, 'YYYY-MM-DD HH:mm:ss') }}
+      </el-descriptions-item>
+      <el-descriptions-item label="异常名">
+        {{ detailData.exceptionName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="异常名" v-if="detailData.exceptionStackTrace">
+        <el-input
+          type="textarea"
+          :readonly="true"
+          :autosize="{ maxRows: 20 }"
+          v-model="detailData.exceptionStackTrace"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item label="处理状态">
+        <dict-tag
+          :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
+          :value="detailData.processStatus"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item label="处理人" v-if="detailData.processUserId">
+        {{ detailData.processUserId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="处理时间" v-if="detailData.processTime">
+        {{ formatDate(detailData.processTime, 'YYYY-MM-DD HH:mm:ss') }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as ApiErrorLog from '@/api/infra/apiErrorLog'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const openModal = async (data: ApiErrorLog.ApiErrorLogVO) => {
+  modelVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+</script>
diff --git a/src/views/infra/apiErrorLog/index.vue b/src/views/infra/apiErrorLog/index.vue
index 4193351a..664546cb 100644
--- a/src/views/infra/apiErrorLog/index.vue
+++ b/src/views/infra/apiErrorLog/index.vue
@@ -1,99 +1,242 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <!-- 操作：导出 -->
-      <template #toolbar_buttons>
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
-          @click="exportList('错误数据.xls')"
+  <content-wrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="用户编号" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
         />
-      </template>
-      <template #duration_default="{ row }">
-        <span>{{ row.duration + 'ms' }}</span>
-      </template>
-      <template #resultCode_default="{ row }">
-        <span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['infra:api-access-log:query']"
-          @click="handleDetail(row)"
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select
+          v-model="queryParams.userType"
+          placeholder="请选择用户类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用名" prop="applicationName">
+        <el-input
+          v-model="queryParams.applicationName"
+          placeholder="请输入应用名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
         />
-        <XTextButton
-          preIcon="ep:cpu"
-          title="已处理"
-          v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-          v-hasPermi="['infra:api-error-log:update-status']"
-          @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.DONE, '已处理')"
+      </el-form-item>
+      <el-form-item label="异常时间" prop="exceptionTime">
+        <el-date-picker
+          v-model="queryParams.exceptionTime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
-        <XTextButton
-          preIcon="ep:mute-notification"
-          title="已忽略"
-          v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-          v-hasPermi="['infra:api-error-log:update-status']"
-          @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+      </el-form-item>
+      <el-form-item label="处理状态" prop="processStatus">
+        <el-select v-model="queryParams.processStatus" placeholder="请选择处理状态" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:api-error-log:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </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="userId" />
+      <el-table-column label="用户类型" align="center" prop="userType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="应用名" align="center" prop="applicationName" />
+      <el-table-column label="请求方法名" align="center" prop="requestMethod" />
+      <el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
+      <el-table-column label="异常发生时间" align="center" prop="exceptionTime" width="180">
+        <template #default="scope">
+          <span>{{ scope.row.exceptionTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="异常名" align="center" prop="exceptionName" width="250" />
+      <el-table-column label="处理状态" align="center" prop="processStatus">
+        <template #default="scope">
+          <dict-tag
+            :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
+            :value="scope.row.processStatus"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openModal(scope.row)"
+            v-hasPermi="['infra:api-access-log:query']"
+          >
+            详细
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+            @click="
+              handleProcessClick(InfraApiErrorLogProcessStatusEnum.DONE, '已处理', scope.row.id)
+            "
+            v-hasPermi="['infra:api-error-log:update-status']"
+          >
+            已处理
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            icon="el-icon-check"
+            v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+            @click="
+              handleProcessClick(InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略', scope.row.id)
+            "
+            v-hasPermi="['infra:api-error-log:update-status']"
+          >
+            已忽略
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </content-wrap>
+
+  <!-- 表单弹窗：详情 -->
+  <api-error-log-detail ref="modalRef" />
 </template>
+
 <script setup lang="ts" name="ApiErrorLog">
-import { allSchemas } from './apiErrorLog.data'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import download from '@/utils/download'
 import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
+import ApiErrorLogDetail from './detail.vue'
 import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
+const message = useMessage() // 消息弹窗
 
-const { t } = useI18n() // 国际化
-const message = useMessage()
-
-// ========== 列表相关 ==========
-const [registerTable, { reload, exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
-  exportListApi: ApiErrorLogApi.exportApiErrorLogApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: null,
+  userType: null,
+  applicationName: null,
+  requestUrl: null,
+  processStatus: null,
+  exceptionTime: []
 })
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('') // 弹出层标题
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
 
-// 详情操作
-const handleDetail = (row: ApiErrorLogApi.ApiErrorLogVO) => {
-  // 设置数据
-  detailData.value = row
-  dialogTitle.value = t('action.detail')
-  dialogVisible.value = true
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ApiErrorLogApi.getApiErrorLogPageApi(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
-// 异常处理操作
-const handleProcessClick = (
-  row: ApiErrorLogApi.ApiErrorLogVO,
-  processSttatus: number,
-  type: string
-) => {
-  message
-    .confirm('确认标记为' + type + '?', t('common.reminder'))
-    .then(async () => {
-      await ApiErrorLogApi.updateApiErrorLogPageApi(row.id, processSttatus)
-      message.success(t('common.updateSuccess'))
-    })
-    .finally(async () => {
-      // 刷新列表
-      await reload()
-    })
-    .catch(() => {})
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
 }
+
+/** 详情操作 */
+const modalRef = ref()
+const openModal = (data: ApiErrorLogApi.ApiErrorLogVO) => {
+  modalRef.value.openModal(data)
+}
+
+/** 处理已处理 / 已忽略的操作 **/
+const handleProcessClick = async (processStatus: number, type: string, id: number) => {
+  try {
+    // 操作的二次确认
+    await message.confirm('确认标记为' + type + '?')
+    // 执行操作
+    await ApiErrorLogApi.updateApiErrorLogPageApi(id, processStatus)
+    await message.success(type)
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ApiErrorLogApi.exportApiErrorLogApi(queryParams)
+    download.excel(data, '操作日志.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>

From 7cda6f554be6d13cfc6320eb593ecc0f8ac7a6e9 Mon Sep 17 00:00:00 2001
From: Chika <wbs_2018@sina.com>
Date: Wed, 22 Mar 2023 16:47:45 +0800
Subject: [PATCH 10/12] =?UTF-8?q?[=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86=20-?=
 =?UTF-8?q?>=20=E5=B2=97=E4=BD=8D=E7=AE=A1=E7=90=86]=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20Element=20Plus=20=E5=8E=9F=E7=94=9F=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/post/form.vue     | 135 ++++++++++-------
 src/views/system/post/index.vue    | 231 ++++++++++++++++++++++-------
 src/views/system/post/post.data.ts |  58 --------
 3 files changed, 258 insertions(+), 166 deletions(-)
 delete mode 100644 src/views/system/post/post.data.ts

diff --git a/src/views/system/post/form.vue b/src/views/system/post/form.vue
index 065aecaf..d5d65dd1 100644
--- a/src/views/system/post/form.vue
+++ b/src/views/system/post/form.vue
@@ -1,81 +1,96 @@
 <template>
-  <!-- 弹窗 -->
-  <XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible">
-    <!-- 表单：添加/修改 -->
-    <Form
+  <Dialog :title="modelTitle" v-model="modelVisible" width="800">
+    <el-form
       ref="formRef"
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-    />
-    <!-- 表单：详情 -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="岗位标题" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入岗位标题" />
+      </el-form-item>
+      <el-form-item label="岗位编码" prop="code">
+        <el-input :model-value="formData.code" placeholder="请输入岗位编码" height="150px" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="formData.status" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输备注" />
+      </el-form-item>
+    </el-form>
     <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
-import type { FormExpose } from '@/components/Form'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import * as PostApi from '@/api/system/post'
-import { rules, allSchemas } from './post.data'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: '',
+  code: '',
+  status: undefined,
+  remark: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
+  code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
+  status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
+  remark: [{ required: false, message: '岗位内容不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
 
-// 打开弹窗
+/** 打开弹窗 */
 const openModal = async (type: string, id?: number) => {
   modelVisible.value = true
-  modelLoading.value = true
   modelTitle.value = t('action.' + type)
-  actionType.value = type
-  // 设置数据
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
   if (id) {
-    const res = await PostApi.getPostApi(id)
-    if (type === 'update') {
-      unref(formRef)?.setValues(res)
-    } else if (type === 'detail') {
-      detailData.value = res
+    formLoading.value = true
+    try {
+      formData.value = await PostApi.getPostApi(id)
+    } finally {
+      formLoading.value = false
     }
   }
-  modelLoading.value = false
 }
 defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
 
-// 提交新增/修改的表单
+/** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   // 校验表单
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  const valid = await elForm.validate()
+  if (!formRef) return
+  const valid = await formRef.value.validate()
   if (!valid) return
   // 提交请求
-  actionLoading.value = true
+  formLoading.value = true
   try {
-    const data = unref(formRef)?.formModel as PostApi.PostVO
-    if (actionType.value === 'create') {
+    const data = formData.value as unknown as PostApi.PostVO
+    if (formType.value === 'create') {
       await PostApi.createPostApi(data)
       message.success(t('common.createSuccess'))
     } else {
@@ -83,9 +98,23 @@ const submitForm = async () => {
       message.success(t('common.updateSuccess'))
     }
     modelVisible.value = false
+    // 发送操作成功的事件
     emit('success')
   } finally {
-    actionLoading.value = false
+    formLoading.value = false
   }
 }
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    title: '',
+    type: undefined,
+    content: '',
+    status: undefined,
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
 </script>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index c5a13e1e..321b5ae3 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,71 +1,192 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
+  <content-wrap>
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+      <el-form-item label="岗位名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入岗位名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="岗位编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入岗位编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
           type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:post:create']"
           @click="openModal('create')"
-        />
-        <!-- 操作：导出 -->
-        <XButton
-          type="primary"
+          v-hasPermi="['system:notice:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
           plain
-          preIcon="ep:download"
-          :title="t('action.export')"
-          v-hasPermi="['system:post:export']"
-          @click="exportList('岗位列表.xls')"
-        />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['system:post:update']"
-          @click="openModal('update', row?.id)"
-        />
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['system:post:query']"
-          @click="openModal('detail', row?.id)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.delete')"
-          v-hasPermi="['system:post:delete']"
-          @click="deleteData(row?.id)"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
-  <!-- 表单弹窗：添加/修改/详情 -->
-  <PostForm ref="modalRef" @success="reload()" />
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:config:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list" align="center">
+      <el-table-column label="岗位编号" align="center" prop="id" />
+      <el-table-column label="岗位名称" align="center" prop="name" />
+      <el-table-column label="岗位编码" align="center" prop="code" />
+      <el-table-column label="岗位顺序" align="center" prop="sort" />
+      <el-table-column label="岗位备注" align="center" prop="remark" />
+
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        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:post:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:post:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </content-wrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <post-form ref="modalRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Post">
+<script setup lang="tsx">
 import * as PostApi from '@/api/system/post'
-import { allSchemas } from './post.data'
 import PostForm from './form.vue'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { DictTag } from '@/components/DictTag'
+
+const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas, // 列表配置
-  getListApi: PostApi.getPostPageApi, // 加载列表的 API
-  deleteApi: PostApi.deletePostApi, // 删除数据的 API
-  exportListApi: PostApi.exportPostApi // 导出数据的 API
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  code: '',
+  name: '',
+  status: undefined,
+  pageNo: 1,
+  pageSize: 100
 })
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+/** 查询岗位列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PostApi.getPostPageApi(queryParams)
 
-// 表单相关的变量
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await PostApi.exportPostApi(queryParams)
+    download.excel(data, '岗位列表.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
 const modalRef = ref()
 const openModal = (type: string, id?: number) => {
   modalRef.value.openModal(type, id)
 }
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await PostApi.deletePostApi(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>
diff --git a/src/views/system/post/post.data.ts b/src/views/system/post/post.data.ts
deleted file mode 100644
index 4926bcc6..00000000
--- a/src/views/system/post/post.data.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  name: [required],
-  code: [required],
-  sort: [required]
-})
-
-// 增删改查 CrudSchema 配置
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '岗位编号',
-  action: true,
-  columns: [
-    {
-      title: '岗位名称',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: '岗位编码',
-      field: 'code',
-      isSearch: true
-    },
-    {
-      title: '岗位顺序',
-      field: 'sort',
-      form: {
-        component: 'InputNumber'
-      }
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      isTable: false
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false,
-      table: {
-        width: 180
-      }
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From 67de9fc5676f6a980ab5f9eaccfb5ebfde98ceaf Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 22 Mar 2023 21:50:44 +0800
Subject: [PATCH 11/12] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E5=88=86=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/userGroup/index.ts             |  12 +-
 src/api/system/user/index.ts               |   2 +-
 src/types/auto-components.d.ts             |   1 +
 src/views/bpm/group/UserGroupForm.vue      | 132 +++++++++
 src/views/bpm/group/group.data.ts          |  64 -----
 src/views/bpm/group/index.vue              | 314 +++++++++++----------
 src/views/bpm/processInstance/detail.vue   |   2 +-
 src/views/bpm/taskAssignRule/index.vue     |   8 +-
 src/views/system/dept/index.vue            |   4 +-
 src/views/system/notify/template/index.vue |   4 +-
 10 files changed, 307 insertions(+), 236 deletions(-)
 create mode 100644 src/views/bpm/group/UserGroupForm.vue
 delete mode 100644 src/views/bpm/group/group.data.ts

diff --git a/src/api/bpm/userGroup/index.ts b/src/api/bpm/userGroup/index.ts
index 88ee9619..c3399f27 100644
--- a/src/api/bpm/userGroup/index.ts
+++ b/src/api/bpm/userGroup/index.ts
@@ -11,7 +11,7 @@ export type UserGroupVO = {
 }
 
 // 创建用户组
-export const createUserGroupApi = async (data: UserGroupVO) => {
+export const createUserGroup = async (data: UserGroupVO) => {
   return await request.post({
     url: '/bpm/user-group/create',
     data: data
@@ -19,7 +19,7 @@ export const createUserGroupApi = async (data: UserGroupVO) => {
 }
 
 // 更新用户组
-export const updateUserGroupApi = async (data: UserGroupVO) => {
+export const updateUserGroup = async (data: UserGroupVO) => {
   return await request.put({
     url: '/bpm/user-group/update',
     data: data
@@ -27,21 +27,21 @@ export const updateUserGroupApi = async (data: UserGroupVO) => {
 }
 
 // 删除用户组
-export const deleteUserGroupApi = async (id: number) => {
+export const deleteUserGroup = async (id: number) => {
   return await request.delete({ url: '/bpm/user-group/delete?id=' + id })
 }
 
 // 获得用户组
-export const getUserGroupApi = async (id: number) => {
+export const getUserGroup = async (id: number) => {
   return await request.get({ url: '/bpm/user-group/get?id=' + id })
 }
 
 // 获得用户组分页
-export const getUserGroupPageApi = async (params) => {
+export const getUserGroupPage = async (params) => {
   return await request.get({ url: '/bpm/user-group/page', params })
 }
 
 // 获取用户组精简信息列表
-export const listSimpleUserGroupsApi = async () => {
+export const listSimpleUserGroup = async () => {
   return await request.get({ url: '/bpm/user-group/list-all-simple' })
 }
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
index e505921d..3cc0a84d 100644
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -86,6 +86,6 @@ export const updateUserStatusApi = (id: number, status: number) => {
 }
 
 // 获取用户精简信息列表
-export const getListSimpleUsersApi = () => {
+export const getSimpleUserList = () => {
   return request.get({ url: '/system/user/list-all-simple' })
 }
diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index be71517c..6284d4dc 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
diff --git a/src/views/bpm/group/UserGroupForm.vue b/src/views/bpm/group/UserGroupForm.vue
new file mode 100644
index 00000000..05d646d2
--- /dev/null
+++ b/src/views/bpm/group/UserGroupForm.vue
@@ -0,0 +1,132 @@
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="组名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入组名" />
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input type="textarea" v-model="formData.name" placeholder="请输入描述" />
+      </el-form-item>
+      <el-form-item label="成员" prop="memberUserIds">
+        <el-select v-model="formData.memberUserIds" multiple placeholder="请选择成员">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import * as UserApi from '@/api/system/user'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  description: undefined,
+  memberUserIds: undefined,
+  status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+  name: [{ required: true, message: '组名不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
+  memberUserIds: [{ required: true, message: '成员不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const userList = ref([]) // 用户列表
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserGroupApi.getUserGroup(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 加载用户列表
+  userList.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as UserGroupApi.UserGroupVO
+    if (formType.value === 'create') {
+      await UserGroupApi.createUserGroup(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserGroupApi.updateUserGroup(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    memberUserIds: undefined,
+    status: CommonStatusEnum.ENABLE
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/bpm/group/group.data.ts b/src/views/bpm/group/group.data.ts
deleted file mode 100644
index 613a7290..00000000
--- a/src/views/bpm/group/group.data.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  name: [required],
-  description: [required],
-  memberUserIds: [required],
-  status: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '编号',
-  action: true,
-  searchSpan: 8,
-  columns: [
-    {
-      title: '组名',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: '成员',
-      field: 'memberUserIds',
-      table: {
-        slots: {
-          default: 'memberUserIds_default'
-        }
-      }
-    },
-    {
-      title: '描述',
-      field: 'description'
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false,
-      isSearch: true,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      },
-      table: {
-        width: 180
-      }
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/bpm/group/index.vue b/src/views/bpm/group/index.vue
index b0f08516..5829ebad 100644
--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -1,182 +1,184 @@
 <template>
   <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
+    <!-- 搜索工作栏 -->
+    <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"
+          placeholder="请输入组名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
           type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
+          @click="openForm('create')"
           v-hasPermi="['bpm:user-group:create']"
-          @click="handleCreate()"
-        />
-      </template>
-      <template #memberUserIds_default="{ row }">
-        <span v-for="userId in row.memberUserIds" :key="userId">
-          {{ getUserNickname(userId) }} &nbsp;
-        </span>
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['bpm:user-group:update']"
-          @click="handleUpdate(row.id)"
-        />
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['bpm:user-group:query']"
-          @click="handleDetail(row.id)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['bpm:user-group:delete']"
-          @click="deleteData(row.id)"
-        />
-      </template>
-    </XTable>
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
 
-  <XModal v-model="dialogVisible" :title="dialogTitle" :mask-closable="false">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-      ref="formRef"
-    >
-      <template #memberUserIds="form">
-        <el-select v-model="form.memberUserIds" multiple>
-          <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
-        </el-select>
-      </template>
-    </Form>
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
-      <template #memberUserIds="{ row }">
-        <span v-for="userId in row.memberUserIds" :key="userId">
-          {{ getUserNickname(userId) }} &nbsp;
-        </span>
-      </template>
-    </Descriptions>
-    <!-- 操作按钮 -->
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm"
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="组名" align="center" prop="name" />
+      <el-table-column label="描述" align="center" prop="description" />
+      <el-table-column label="成员" align="center">
+        <template #default="scope">
+          <span v-for="userId in scope.row.memberUserIds" :key="userId" class="pr-5px">
+            {{ userList.find((user) => user.id === userId)?.nickname }}
+          </span>
+        </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" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
       />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:user-group:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['bpm:user-group:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <UserGroupForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
-// 业务相关的 import
+<script setup lang="ts" name="UserGroup">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import * as UserGroupApi from '@/api/bpm/userGroup'
-import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
-import { allSchemas, rules } from './group.data'
-import { FormExpose } from '@/components/Form'
-
-const { t } = useI18n() // 国际化
+import * as UserApi from '@/api/system/user'
+import UserGroupForm from './UserGroupForm.vue'
 const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: UserGroupApi.getUserGroupPageApi,
-  deleteApi: UserGroupApi.deleteUserGroupApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: null,
+  createTime: []
 })
-// 用户列表
-const users = ref<UserVO[]>([])
+const queryFormRef = ref() // 搜索的表单
+const userList = ref([]) // 用户列表
 
-const getUserNickname = (userId) => {
-  for (const user of users.value) {
-    if (user.id === userId) {
-      return user.nickname
-    }
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserGroupApi.getUserGroupPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
   }
-  return '未知(' + userId + ')'
 }
 
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
 }
 
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await UserGroupApi.getUserGroupApi(rowId)
-  unref(formRef)?.setValues(res)
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  detailData.value = await UserGroupApi.getUserGroupApi(rowId)
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await UserGroupApi.deleteUserGroup(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
 }
 
-// 提交按钮
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
-        if (actionType.value === 'create') {
-          await UserGroupApi.createUserGroupApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await UserGroupApi.updateUserGroupApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        // 刷新列表
-        await reload()
-      }
-    }
-  })
-}
-
-// ========== 初始化 ==========
-onMounted(() => {
-  getListSimpleUsersApi().then((data) => {
-    users.value = data
-  })
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 加载用户列表
+  userList.value = await UserApi.getSimpleUserList()
 })
 </script>
diff --git a/src/views/bpm/processInstance/detail.vue b/src/views/bpm/processInstance/detail.vue
index b6d52a4c..7d159673 100644
--- a/src/views/bpm/processInstance/detail.vue
+++ b/src/views/bpm/processInstance/detail.vue
@@ -378,7 +378,7 @@ onMounted(() => {
   // 加载详情
   getDetail()
   // 加载用户的列表
-  UserApi.getListSimpleUsersApi().then((data) => {
+  UserApi.getSimpleUserList().then((data) => {
     userOptions.value.push(...data)
   })
 })
diff --git a/src/views/bpm/taskAssignRule/index.vue b/src/views/bpm/taskAssignRule/index.vue
index 012e6f68..6e1432b6 100644
--- a/src/views/bpm/taskAssignRule/index.vue
+++ b/src/views/bpm/taskAssignRule/index.vue
@@ -140,8 +140,8 @@ import { FormInstance } from 'element-plus'
 import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
 import { listSimpleRolesApi } from '@/api/system/role'
 import { listSimplePostsApi } from '@/api/system/post'
-import { getListSimpleUsersApi } from '@/api/system/user'
-import { listSimpleUserGroupsApi } from '@/api/bpm/userGroup'
+import { getSimpleUserList } from '@/api/system/user'
+import { listSimpleUserGroup } from '@/api/bpm/userGroup'
 import { listSimpleDeptApi } from '@/api/system/dept'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { handleTree, defaultProps } from '@/utils/tree'
@@ -341,12 +341,12 @@ onMounted(() => {
   })
   // 获得用户列表
   userOptions.value = []
-  getListSimpleUsersApi().then((data) => {
+  getSimpleUserList().then((data) => {
     userOptions.value.push(...data)
   })
   // 获得用户组列表
   userGroupOptions.value = []
-  listSimpleUserGroupsApi().then((data) => {
+  listSimpleUserGroup().then((data) => {
     userGroupOptions.value.push(...data)
   })
   if (!isShow) {
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 3b182e2a..4e70070f 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -79,7 +79,7 @@ import { handleTree, defaultProps } from '@/utils/tree'
 import type { FormExpose } from '@/components/Form'
 import { allSchemas, rules } from './dept.data'
 import * as DeptApi from '@/api/system/dept'
-import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
+import { getSimpleUserList, UserVO } from '@/api/system/user'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -102,7 +102,7 @@ const deptOptions = ref() // 树形结构
 const userOption = ref<UserVO[]>([])
 
 const getUserList = async () => {
-  const res = await getListSimpleUsersApi()
+  const res = await getSimpleUserList()
   userOption.value = res
 }
 // 获取下拉框[上级]的数据
diff --git a/src/views/system/notify/template/index.vue b/src/views/system/notify/template/index.vue
index 4ec16a0a..c4113924 100644
--- a/src/views/system/notify/template/index.vue
+++ b/src/views/system/notify/template/index.vue
@@ -119,7 +119,7 @@ import { FormExpose } from '@/components/Form'
 // 业务相关的 import
 import { rules, allSchemas } from './template.data'
 import * as NotifyTemplateApi from '@/api/system/notify/template'
-import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
+import { getSimpleUserList, UserVO } from '@/api/system/user'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -244,7 +244,7 @@ const sendTest = async () => {
 
 // ========== 初始化 ==========
 onMounted(() => {
-  getListSimpleUsersApi().then((data) => {
+  getSimpleUserList().then((data) => {
     userOption.value = data
   })
 })

From c424ee76e4e5145292cb86619899e65fe27ab1ba Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 22 Mar 2023 22:11:03 +0800
Subject: [PATCH 12/12] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AREVIEW?=
 =?UTF-8?q?=20=E5=B2=97=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/post/index.ts                  | 26 ++-----
 src/views/bpm/taskAssignRule/index.vue        |  4 +-
 .../system/post/{form.vue => PostForm.vue}    | 18 +++--
 src/views/system/post/index.vue               | 78 ++++++++++---------
 src/views/system/user/index.vue               |  4 +-
 5 files changed, 63 insertions(+), 67 deletions(-)
 rename src/views/system/post/{form.vue => PostForm.vue} (91%)

diff --git a/src/api/system/post/index.ts b/src/api/system/post/index.ts
index 9e2540f0..98df227f 100644
--- a/src/api/system/post/index.ts
+++ b/src/api/system/post/index.ts
@@ -10,49 +10,37 @@ export interface PostVO {
   createTime?: Date
 }
 
-export interface PostPageReqVO extends PageParam {
-  code?: string
-  name?: string
-  status?: number
-}
-
-export interface PostExportReqVO {
-  code?: string
-  name?: string
-  status?: number
-}
-
 // 查询岗位列表
-export const getPostPageApi = async (params: PostPageReqVO) => {
+export const getPostPage = async (params: PageParam) => {
   return await request.get({ url: '/system/post/page', params })
 }
 
 // 获取岗位精简信息列表
-export const listSimplePostsApi = async () => {
+export const getSimplePostList = async () => {
   return await request.get({ url: '/system/post/list-all-simple' })
 }
 
 // 查询岗位详情
-export const getPostApi = async (id: number) => {
+export const getPost = async (id: number) => {
   return await request.get({ url: '/system/post/get?id=' + id })
 }
 
 // 新增岗位
-export const createPostApi = async (data: PostVO) => {
+export const createPost = async (data: PostVO) => {
   return await request.post({ url: '/system/post/create', data })
 }
 
 // 修改岗位
-export const updatePostApi = async (data: PostVO) => {
+export const updatePost = async (data: PostVO) => {
   return await request.put({ url: '/system/post/update', data })
 }
 
 // 删除岗位
-export const deletePostApi = async (id: number) => {
+export const deletePost = async (id: number) => {
   return await request.delete({ url: '/system/post/delete?id=' + id })
 }
 
 // 导出岗位
-export const exportPostApi = async (params: PostExportReqVO) => {
+export const exportPost = async (params) => {
   return await request.download({ url: '/system/post/export', params })
 }
diff --git a/src/views/bpm/taskAssignRule/index.vue b/src/views/bpm/taskAssignRule/index.vue
index 6e1432b6..8db7b578 100644
--- a/src/views/bpm/taskAssignRule/index.vue
+++ b/src/views/bpm/taskAssignRule/index.vue
@@ -139,7 +139,7 @@ import { FormInstance } from 'element-plus'
 // 业务相关的 import
 import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
 import { listSimpleRolesApi } from '@/api/system/role'
-import { listSimplePostsApi } from '@/api/system/post'
+import { getSimplePostList } from '@/api/system/post'
 import { getSimpleUserList } from '@/api/system/user'
 import { listSimpleUserGroup } from '@/api/bpm/userGroup'
 import { listSimpleDeptApi } from '@/api/system/dept'
@@ -336,7 +336,7 @@ onMounted(() => {
   })
   // 获得岗位列表
   postOptions.value = []
-  listSimplePostsApi().then((data) => {
+  getSimplePostList().then((data) => {
     postOptions.value.push(...data)
   })
   // 获得用户列表
diff --git a/src/views/system/post/form.vue b/src/views/system/post/PostForm.vue
similarity index 91%
rename from src/views/system/post/form.vue
rename to src/views/system/post/PostForm.vue
index d5d65dd1..14aa9651 100644
--- a/src/views/system/post/form.vue
+++ b/src/views/system/post/PostForm.vue
@@ -37,6 +37,7 @@
 </template>
 <script setup lang="ts">
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
 import * as PostApi from '@/api/system/post'
 
 const { t } = useI18n() // 国际化
@@ -50,7 +51,8 @@ const formData = ref({
   id: undefined,
   name: '',
   code: '',
-  status: undefined,
+  sort: undefined,
+  status: CommonStatusEnum.ENABLE,
   remark: ''
 })
 const formRules = reactive({
@@ -71,7 +73,7 @@ const openModal = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await PostApi.getPostApi(id)
+      formData.value = await PostApi.getPost(id)
     } finally {
       formLoading.value = false
     }
@@ -91,10 +93,10 @@ const submitForm = async () => {
   try {
     const data = formData.value as unknown as PostApi.PostVO
     if (formType.value === 'create') {
-      await PostApi.createPostApi(data)
+      await PostApi.createPost(data)
       message.success(t('common.createSuccess'))
     } else {
-      await PostApi.updatePostApi(data)
+      await PostApi.updatePost(data)
       message.success(t('common.updateSuccess'))
     }
     modelVisible.value = false
@@ -109,10 +111,10 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    title: '',
-    type: undefined,
-    content: '',
-    status: undefined,
+    name: '',
+    code: '',
+    sort: undefined,
+    status: CommonStatusEnum.ENABLE,
     remark: ''
   }
   formRef.value?.resetFields()
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 321b5ae3..03e491d0 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <content-wrap>
+  <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryFormRef" :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"
@@ -21,10 +27,10 @@
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -49,15 +55,16 @@
         </el-button>
       </el-form-item>
     </el-form>
+  </ContentWrap>
 
-    <!-- 列表 -->
+  <!-- 列表 -->
+  <ContentWrap>
     <el-table v-loading="loading" :data="list" align="center">
       <el-table-column label="岗位编号" align="center" prop="id" />
       <el-table-column label="岗位名称" align="center" prop="name" />
       <el-table-column label="岗位编码" align="center" prop="code" />
       <el-table-column label="岗位顺序" align="center" prop="sort" />
       <el-table-column label="岗位备注" align="center" prop="remark" />
-
       <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
@@ -98,18 +105,17 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </content-wrap>
+  </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <post-form ref="modalRef" @success="getList" />
+  <PostForm ref="formRef" @success="getList" />
 </template>
 <script setup lang="tsx">
-import * as PostApi from '@/api/system/post'
-import PostForm from './form.vue'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
-import { DictTag } from '@/components/DictTag'
+import * as PostApi from '@/api/system/post'
+import PostForm from './PostForm.vue'
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -118,20 +124,20 @@ const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
 const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
   code: '',
   name: '',
-  status: undefined,
-  pageNo: 1,
-  pageSize: 100
+  status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+
 /** 查询岗位列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await PostApi.getPostPageApi(queryParams)
-
+    const data = await PostApi.getPostPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -139,21 +145,6 @@ const getList = async () => {
   }
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await PostApi.exportPostApi(queryParams)
-    download.excel(data, '岗位列表.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -167,9 +158,9 @@ const resetQuery = () => {
 }
 
 /** 添加/修改操作 */
-const modalRef = ref()
+const formRef = ref()
 const openModal = (type: string, id?: number) => {
-  modalRef.value.openModal(type, id)
+  formRef.value.openModal(type, id)
 }
 
 /** 删除按钮操作 */
@@ -178,13 +169,28 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await PostApi.deletePostApi(id)
+    await PostApi.deletePost(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
   } catch {}
 }
 
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await PostApi.exportPost(queryParams)
+    download.excel(data, '岗位列表.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 2f9ba9b0..9bb50930 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -273,7 +273,7 @@ import { rules, allSchemas } from './user.data'
 import * as UserApi from '@/api/system/user'
 import { listSimpleDeptApi } from '@/api/system/dept'
 import { listSimpleRolesApi } from '@/api/system/role'
-import { listSimplePostsApi, PostVO } from '@/api/system/post'
+import { getSimplePostList, PostVO } from '@/api/system/post'
 import {
   aassignUserRoleApi,
   listUserRolesApi,
@@ -329,7 +329,7 @@ const postOptions = ref<PostVO[]>([]) //岗位列表
 
 // 获取岗位列表
 const getPostOptions = async () => {
-  const res = await listSimplePostsApi()
+  const res = await getSimplePostList()
   postOptions.value.push(...res)
 }
 const dataFormater = (val) => {