From a422300cc173ed7553bba188652bb353a92badc4 Mon Sep 17 00:00:00 2001
From: Siyu Kong <boil@vip.qq.com>
Date: Thu, 23 Mar 2023 10:45:40 +0800
Subject: [PATCH 01/29] =?UTF-8?q?chore:=20=E8=BF=87=E6=BB=A4ide=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 0b05e6a6..3efc9c52 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,6 @@ dist-ssr
 /dist*
 *-lock.*
 pnpm-debug
+
+.idea
+.history
\ No newline at end of file

From ca4bdb4639eccc7b1b01fc6c44cc42659bc01047 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=92=B1=E5=93=A5=E4=B8=B6?= <385454831@qq.com>
Date: Sat, 25 Mar 2023 11:33:40 +0800
Subject: [PATCH 02/29] =?UTF-8?q?=E9=87=8D=E6=9E=84VUE3=E3=80=90=E7=AB=99?=
 =?UTF-8?q?=E5=86=85=E4=BF=A1=E6=B6=88=E6=81=AF=E8=AE=B0=E5=BD=95=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A1=E3=80=81=E8=A1=A8=E6=A0=BC=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E9=AB=98=E5=BA=A6=EF=BC=88=E7=AE=80?=
 =?UTF-8?q?=E5=8D=95=E5=AE=9E=E7=8E=B0=EF=BC=892=E3=80=81=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E7=AB=99=E5=86=85=E4=BF=A1=E6=AF=8F=E6=9D=A1=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E5=88=86=E4=B8=BA=E6=9F=A5=E9=98=85=EF=BC=88=E6=9C=AA?=
 =?UTF-8?q?=E8=AF=BB=E7=8A=B6=E6=80=81=EF=BC=89=E5=92=8C=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=EF=BC=88=E5=B7=B2=E8=AF=BB=E7=8A=B6=E6=80=81=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/notify/message/detail.vue    |  64 +++++
 src/views/system/notify/message/index.vue     | 258 +++++++++++++----
 .../system/notify/message/message.data.ts     | 101 -------
 src/views/system/notify/my/detail.vue         |  46 ++++
 src/views/system/notify/my/index.vue          | 260 +++++++++++++++---
 src/views/system/notify/my/my.data.ts         |  58 ----
 6 files changed, 540 insertions(+), 247 deletions(-)
 create mode 100644 src/views/system/notify/message/detail.vue
 delete mode 100644 src/views/system/notify/message/message.data.ts
 create mode 100644 src/views/system/notify/my/detail.vue
 delete mode 100644 src/views/system/notify/my/my.data.ts

diff --git a/src/views/system/notify/message/detail.vue b/src/views/system/notify/message/detail.vue
new file mode 100644
index 00000000..0b146113
--- /dev/null
+++ b/src/views/system/notify/message/detail.vue
@@ -0,0 +1,64 @@
+<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="用户类型">
+        <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="用户编号">
+        {{ detailData.userId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="模版编号">
+        {{ detailData.templateId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="模板编码">
+        {{ detailData.templateCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="发送人名称">
+        {{ detailData.templateNickname }}
+      </el-descriptions-item>
+      <el-descriptions-item label="模版内容">
+        {{ detailData.templateContent }}
+      </el-descriptions-item>
+      <el-descriptions-item label="模版参数">
+        {{ detailData.templateParams }}
+      </el-descriptions-item>
+      <el-descriptions-item label="模版类型">
+        <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="是否已读">
+        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
+      </el-descriptions-item>
+      <el-descriptions-item label="阅读时间">
+        {{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }}
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(detailData.createTime, '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 NotifyMessageApi from '@/api/system/notify/message'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
+  modelVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/notify/message/index.vue b/src/views/system/notify/message/index.vue
index 93a8ed68..06f98c62 100644
--- a/src/views/system/notify/message/index.vue
+++ b/src/views/system/notify/message/index.vue
@@ -1,67 +1,217 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['system:notify-message:query']"
-          @click="handleDetail(row.id)"
+  <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>
-    </XTable>
-  </ContentWrap>
-  <!-- 弹窗 -->
-  <XModal id="messageModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
-    <!-- 表单：详情 -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
+      </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="templateCode">
+        <el-input
+          v-model="queryParams.templateCode"
+          placeholder="请输入模板编码"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="模版类型" prop="templateType">
+        <el-select
+          v-model="queryParams.templateType"
+          placeholder="请选择模版类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
+            :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')]"
+          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-form-item>
+    </el-form>
+  </content-wrap>
+
+  <!-- 列表 -->
+  <content-wrap>
+    <el-table ref="tableRef" v-loading="loading" :data="list" :height="tableHeight">
+      <el-table-column label="编号" align="center" prop="id" />
+      <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="userId" width="80" />
+      <el-table-column label="模版编号" align="center" prop="templateId" width="80" />
+      <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
+      <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
+      <el-table-column
+        label="模版内容"
+        align="center"
+        prop="templateContent"
+        width="200"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="模版参数"
+        align="center"
+        prop="templateParams"
+        width="180"
+        show-overflow-tooltip
+      >
+        <template #default="scope"> {{ scope.row.templateParams }}</template>
+      </el-table-column>
+      <el-table-column label="模版类型" align="center" prop="templateType" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="是否已读" align="center" prop="readStatus" width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="阅读时间"
+        align="center"
+        prop="readTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <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(scope.row)"
+            v-hasPermi="['system:notify-message:query']"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
     />
-    <template #footer>
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
-    </template>
-  </XModal>
+  </content-wrap>
+
+  <!-- 表单弹窗：详情 -->
+  <notify-message-detail ref="modalRef" />
 </template>
 <script setup lang="ts" name="NotifyMessage">
-// 业务相关的 import
-import { allSchemas } from './message.data'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
+import NotifyMessageDetail from './detail.vue'
 
-const { t } = useI18n() // 国际化
-
-// 列表相关的变量
-const [registerTable] = useXTable({
-  allSchemas: allSchemas,
-  topActionSlots: false,
-  getListApi: NotifyMessageApi.getNotifyMessagePageApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userType: undefined,
+  userId: undefined,
+  templateCode: undefined,
+  templateType: undefined,
+  createTime: []
 })
+const queryFormRef = ref() // 搜索的表单
+const tableRef = ref()
+const tableHeight = ref() // table高度
 
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('edit') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  modelLoading.value = true
-  modelTitle.value = t('action.' + type)
-  actionType.value = type
-  modelVisible.value = true
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await NotifyMessageApi.getNotifyMessagePageApi(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  const res = await NotifyMessageApi.getNotifyMessageApi(rowId)
-  detailData.value = res
-  modelLoading.value = false
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 详情操作 */
+const modalRef = ref()
+const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
+  modalRef.value.openModal(data)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+  // TODO 感觉表格自适应高度体验很好的，目前简单实现 需要进一步优化,如根据筛选条件展开或收缩改变盒子高度时
+  tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
+  // 监听浏览器高度变化
+  window.onresize = () => {
+    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
+  }
+})
 </script>
diff --git a/src/views/system/notify/message/message.data.ts b/src/views/system/notify/message/message.data.ts
deleted file mode 100644
index 665311d2..00000000
--- a/src/views/system/notify/message/message.data.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id', // 默认的主键ID
-  primaryTitle: '编号', // 默认显示的值
-  primaryType: 'id', // 默认为seq，序号模式
-  action: true,
-  actionWidth: '200', // 3个按钮默认200，如有删减对应增减即可
-  columns: [
-    {
-      title: '用户编号',
-      field: 'userId',
-      isSearch: true
-    },
-    {
-      title: '用户类型',
-      field: 'userType',
-      dictType: DICT_TYPE.USER_TYPE,
-      dictClass: 'string',
-      isSearch: true,
-      table: {
-        width: 80
-      }
-    },
-    {
-      title: '模版编号',
-      field: 'templateId'
-    },
-    {
-      title: '模板编码',
-      field: 'templateCode',
-      isSearch: true,
-      table: {
-        width: 80
-      }
-    },
-    {
-      title: '发送人名称',
-      field: 'templateNickname',
-      table: {
-        width: 120
-      }
-    },
-    {
-      title: '模版内容',
-      field: 'templateContent',
-      table: {
-        width: 200
-      }
-    },
-    {
-      title: '模版类型',
-      field: 'templateType',
-      dictType: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-      dictClass: 'number',
-      isSearch: true,
-      table: {
-        width: 80
-      }
-    },
-    {
-      title: '模版参数',
-      field: 'templateParams',
-      isTable: false
-    },
-    {
-      title: '是否已读',
-      field: 'readStatus',
-      dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
-      dictClass: 'boolean',
-      table: {
-        width: 80
-      }
-    },
-    {
-      title: '阅读时间',
-      field: 'readTime',
-      formatter: 'formatDate',
-      table: {
-        width: 180
-      }
-    },
-    {
-      title: '创建时间',
-      field: 'createTime',
-      isForm: false,
-      formatter: 'formatDate',
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      },
-      table: {
-        width: 180
-      }
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/notify/my/detail.vue b/src/views/system/notify/my/detail.vue
new file mode 100644
index 00000000..ea9ae961
--- /dev/null
+++ b/src/views/system/notify/my/detail.vue
@@ -0,0 +1,46 @@
+<template>
+  <Dialog title="消息详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
+    <el-descriptions border :column="1">
+      <el-descriptions-item label="发送人">
+        {{ detailData.templateNickname }}
+      </el-descriptions-item>
+      <el-descriptions-item label="发送时间">
+        {{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
+      </el-descriptions-item>
+      <el-descriptions-item label="消息类型">
+        <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="是否已读">
+        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
+      </el-descriptions-item>
+      <el-descriptions-item label="阅读时间" v-if="detailData.readStatus">
+        {{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }}
+      </el-descriptions-item>
+      <el-descriptions-item label="内容">
+        {{ detailData.templateContent }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
+  modelVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/notify/my/index.vue b/src/views/system/notify/my/index.vue
index 9f3e9b10..d889e184 100644
--- a/src/views/system/notify/my/index.vue
+++ b/src/views/system/notify/my/index.vue
@@ -1,58 +1,250 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：标记已读 -->
-        <XButton type="primary" preIcon="ep:zoom-in" title="标记已读" @click="handleUpdateList" />
-        <!-- 操作：全部已读 -->
-        <XButton type="primary" preIcon="ep:zoom-in" title="全部已读" @click="handleUpdateAll" />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：已读 -->
-        <XTextButton
-          preIcon="ep:view"
-          title="已读"
-          v-hasPermi="['system:notify-message:query']"
-          v-if="!row.readStatus"
-          @click="handleUpdate([row.id])"
+  <content-wrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="是否已读" prop="readStatus">
+        <el-select
+          v-model="queryParams.readStatus"
+          placeholder="请选择状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :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"
         />
-      </template>
-    </XTable>
-  </ContentWrap>
+      </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 @click="handleUpdateList"
+          ><Icon icon="ep:reading" class="mr-5px" /> 标记已读</el-button
+        >
+        <el-button @click="handleUpdateAll"
+          ><Icon icon="ep:reading" class="mr-5px" /> 全部已读</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <!-- <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button @click="handleUpdateList"
+          ><Icon icon="ep:refresh" class="mr-5px" /> 标记已读</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button @click="handleUpdateAll"
+          ><Icon icon="ep:refresh" class="mr-5px" /> 全部已读</el-button
+        >
+      </el-col>
+    </el-row> -->
+  </content-wrap>
+
+  <content-wrap>
+    <!-- 列表 -->
+    <el-table
+      ref="tableRef"
+      v-loading="loading"
+      :data="list"
+      :height="tableHeight"
+      :row-key="getRowKeys"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
+      <!-- <el-table-column label="编号" align="center" prop="id" /> -->
+      <el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
+      <el-table-column
+        label="发送时间"
+        align="center"
+        prop="createTime"
+        width="200"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="类型" align="center" prop="templateType" width="180">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="消息内容"
+        align="center"
+        prop="templateContent"
+        show-overflow-tooltip
+      />
+      <el-table-column label="是否已读" align="center" prop="readStatus" width="160">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="阅读时间"
+        align="center"
+        prop="readTime"
+        width="200"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center" width="160">
+        <template #default="scope">
+          <el-button
+            link
+            :type="scope.row.readStatus ? 'primary' : 'warning'"
+            @click="openModal(scope.row)"
+          >
+            {{ scope.row.readStatus ? '详情' : '查阅' }}
+          </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>
+
+  <!-- 表单弹窗：详情 -->
+  <my-notify-message-detail ref="modalRef" />
 </template>
+
 <script setup lang="ts" name="MyNotifyMessage">
-// 业务相关的 import
-import { allSchemas } from './my.data'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
+import MyNotifyMessageDetail from './detail.vue'
 
 const message = useMessage() // 消息
 
-// 列表相关的变量
-const [registerTable, { reload, getCheckboxRecords }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: NotifyMessageApi.getMyNotifyMessagePage
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  readStatus: undefined,
+  createTime: []
 })
+const queryFormRef = ref() // 搜索的表单
+const tableRef = ref()
+const tableHeight = ref() // table高度
+const selectedNum = ref(0) //表格select选中的条数
+const selectedIds = ref([] as any[]) //表格select复选框选中的id
+const multipleSelection = ref([])
 
-const handleUpdateList = async () => {
-  const list = getCheckboxRecords() as any as any[]
-  if (list.length === 0) {
-    return
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await NotifyMessageApi.getMyNotifyMessagePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
   }
-  await handleUpdate(list.map((v) => v.id))
+}
+
+/** 详情操作 */
+const modalRef = ref()
+const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
+  if (!data.readStatus) {
+    handleUpdate(data.id)
+  }
+  modalRef.value.openModal(data)
 }
 
 // 标记指定 id 已读
 const handleUpdate = async (ids) => {
   await NotifyMessageApi.updateNotifyMessageRead(ids)
-  message.success('标记已读成功！')
-  reload()
+  //message.success('标记已读成功！')
+  handleQuery()
 }
 
 // 标记全部已读
 const handleUpdateAll = async () => {
   await NotifyMessageApi.updateAllNotifyMessageRead()
   message.success('全部已读成功！')
-  reload()
+  handleQuery()
+}
+
+// 标记勾选 ids 已读
+const handleUpdateList = async () => {
+  if (selectedIds.value.length === 0) {
+    return
+  }
+  await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
+  message.success('批量已读成功！')
+  tableRef.value.clearSelection()
+  handleQuery()
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  tableRef.value.clearSelection()
+  handleQuery()
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+  // TODO 感觉表格自适应高度体验好些，目前简单实现 需要进一步优化
+  tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
+  // 监听浏览器高度变化
+  window.onresize = () => {
+    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
+  }
+})
+
+// 禁用某行复选框
+const selectable = (row) => {
+  return !row.readStatus
+}
+
+//选中的list
+const getRowKeys = (row) => {
+  return row.id
+}
+//当表格选择项发生变化时会触发该事件
+const handleSelectionChange = (val) => {
+  // 解决来回切换页面，也无法清除上次选中情况
+  multipleSelection.value = val
+  selectedNum.value = multipleSelection.value.length
+  selectedIds.value = []
+  if (val) {
+    undefined
+    val.forEach((row) => {
+      undefined
+      if (row) {
+        undefined
+        selectedIds.value.push(row.id)
+      }
+    })
+  }
 }
 </script>
diff --git a/src/views/system/notify/my/my.data.ts b/src/views/system/notify/my/my.data.ts
deleted file mode 100644
index 103ed8ef..00000000
--- a/src/views/system/notify/my/my.data.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryTitle: ' ',
-  primaryType: 'checkbox',
-  action: true,
-  actionWidth: '200', // 3个按钮默认200，如有删减对应增减即可
-  columns: [
-    {
-      title: '发送人名称',
-      field: 'templateNickname',
-      table: {
-        width: 120
-      }
-    },
-    {
-      title: '发送时间',
-      field: 'createTime',
-      isForm: false,
-      formatter: 'formatDate',
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      },
-      table: {
-        width: 180
-      }
-    },
-    {
-      title: '类型',
-      field: 'templateType',
-      dictType: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-      dictClass: 'number',
-      table: {
-        width: 80
-      }
-    },
-    {
-      title: '内容',
-      field: 'templateContent'
-    },
-    {
-      title: '是否已读',
-      field: 'readStatus',
-      dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
-      dictClass: 'boolean',
-      table: {
-        width: 80
-      },
-      isSearch: true
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From 6c12505771580d5c912dc5ce6a7da11f3f3fbd65 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 25 Mar 2023 15:31:29 +0800
Subject: [PATCH 03/29] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9select=E5=87=BA=E9=94=99bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/formCreate/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts
index 69816d8a..0d72048e 100644
--- a/src/plugins/formCreate/index.ts
+++ b/src/plugins/formCreate/index.ts
@@ -10,6 +10,8 @@ import {
   ElTransfer,
   ElAlert,
   ElTabs,
+  ElTable,
+  ElTableColumn,
   ElTabPane
 } from 'element-plus'
 
@@ -27,6 +29,8 @@ const components = [
   ElTransfer,
   ElAlert,
   ElTabs,
+  ElTable,
+  ElTableColumn,
   ElTabPane
 ]
 

From ed5990f22921e06abbe3e146f4566becdb9e663d Mon Sep 17 00:00:00 2001
From: wuxiran <wuxiran@outlook.com>
Date: Mon, 27 Mar 2023 03:18:25 +0800
Subject: [PATCH 04/29] =?UTF-8?q?1=E3=80=81=E5=BE=AE=E4=BF=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=96=B0vue3.=E8=A6=96=E9=A0=BB=E7=B5=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=96=B0=E4=BD=BF=E7=94=A8video.js=206.0.0?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E3=80=82=202=E3=80=81=E7=9B=AE=E5=89=8Dmp?=
 =?UTF-8?q?=E4=B8=AD=E8=A6=96=E9=A0=BB=E7=B5=84=E4=BB=B6=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E7=B0=A1=E5=96=AE=E7=9A=84=E4=BD=BF=E7=94=A8=E4=BA=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    2 +
 src/views/mp/components/wx-reply/main.vue     | 1246 ++++++++---------
 .../mp/components/wx-video-play/main.vue      |  142 +-
 .../mp/components/wx-voice-play/main.vue      |    1 +
 src/views/mp/freePublish/index.vue            |   21 +-
 src/views/mp/message/index.vue                |   12 +-
 src/views/mp/tag/index.vue                    |   17 +-
 7 files changed, 719 insertions(+), 722 deletions(-)

diff --git a/package.json b/package.json
index 8f1d24e7..683d09eb 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@form-create/designer": "^3.1.0",
     "@form-create/element-ui": "^3.1.17",
     "@iconify/iconify": "^3.1.0",
+    "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^9.13.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
@@ -58,6 +59,7 @@
     "qs": "^6.11.1",
     "steady-xml": "^0.1.0",
     "url": "^0.11.0",
+    "video.js": "^8.0.4",
     "vue": "3.2.47",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
index 57a3cd84..a151b252 100644
--- a/src/views/mp/components/wx-reply/main.vue
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -1,634 +1,634 @@
-<!--&lt;!&ndash;-->
-<!--  - Copyright (C) 2018-2019-->
-<!--  - All rights reserved, Designed By www.joolun.com-->
-<!--  芋道源码：-->
-<!--  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单-->
-<!--  ② 代码优化，补充注释，提升阅读性-->
-<!--  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入-->
-<!--  ④ 支持发送【视频】消息时，支持新建视频-->
-<!--&ndash;&gt;-->
-<!--<template>-->
-<!--  <el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">-->
-<!--    &lt;!&ndash; 类型 1：文本 &ndash;&gt;-->
-<!--    <el-tab-pane name="text">-->
-<!--      <span slot="label"><i class="el-icon-document"></i> 文本</span>-->
-<!--      <el-input-->
-<!--        type="textarea"-->
-<!--        :rows="5"-->
-<!--        placeholder="请输入内容"-->
-<!--        v-model="objData.content"-->
-<!--        @input="inputContent"-->
-<!--      />-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 2：图片 &ndash;&gt;-->
-<!--    <el-tab-pane name="image">-->
-<!--      <span slot="label"><i class="el-icon-picture"></i> 图片</span>-->
-<!--      <el-row>-->
-<!--        &lt;!&ndash; 情况一：已经选择好素材、或者上传好图片 &ndash;&gt;-->
-<!--        <div class="select-item" v-if="objData.url">-->
-<!--          <img class="material-img" :src="objData.url" />-->
-<!--          <p class="item-name" v-if="objData.name">{{ objData.name }}</p>-->
-<!--          <el-row class="ope-row">-->
-<!--            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        &lt;!&ndash; 情况二：未做完上述操作 &ndash;&gt;-->
-<!--        <div v-else>-->
-<!--          <el-row style="text-align: center">-->
-<!--            &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-select">-->
-<!--              <el-button type="success" @click="openMaterial">-->
-<!--                素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>-->
-<!--              </el-button>-->
-<!--              <el-dialog-->
-<!--                title="选择图片"-->
-<!--                v-model:visible="dialogImageVisible"-->
-<!--                width="90%"-->
-<!--                append-to-body-->
-<!--              >-->
-<!--                <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />-->
-<!--              </el-dialog>-->
-<!--            </el-col>-->
-<!--            &lt;!&ndash; 文件上传 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-add">-->
-<!--              <el-upload-->
-<!--                :action="actionUrl"-->
-<!--                :headers="headers"-->
-<!--                multiple-->
-<!--                :limit="1"-->
-<!--                :file-list="fileList"-->
-<!--                :data="uploadData"-->
-<!--                :before-upload="beforeImageUpload"-->
-<!--                :on-success="handleUploadSuccess"-->
-<!--              >-->
-<!--                <el-button type="primary">上传图片</el-button>-->
-<!--                <div slot="tip" class="el-upload__tip"-->
-<!--                  >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div-->
-<!--                >-->
-<!--              </el-upload>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 3：语音 &ndash;&gt;-->
-<!--    <el-tab-pane name="voice">-->
-<!--      <span slot="label"><i class="el-icon-phone"></i> 语音</span>-->
-<!--      <el-row>-->
-<!--        <div class="select-item2" v-if="objData.url">-->
-<!--          <p class="item-name">{{ objData.name }}</p>-->
-<!--          <div class="item-infos">-->
-<!--            <wx-voice-player :url="objData.url" />-->
-<!--          </div>-->
-<!--          <el-row class="ope-row">-->
-<!--            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        <div v-else>-->
-<!--          <el-row style="text-align: center">-->
-<!--            &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-select">-->
-<!--              <el-button type="success" @click="openMaterial">-->
-<!--                素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>-->
-<!--              </el-button>-->
-<!--              <el-dialog-->
-<!--                title="选择语音"-->
-<!--                v-model:visible="dialogVoiceVisible"-->
-<!--                width="90%"-->
-<!--                append-to-body-->
-<!--              >-->
-<!--                <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />-->
-<!--              </el-dialog>-->
-<!--            </el-col>-->
-<!--            &lt;!&ndash; 文件上传 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-add">-->
-<!--              <el-upload-->
-<!--                :action="actionUrl"-->
-<!--                :headers="headers"-->
-<!--                multiple-->
-<!--                :limit="1"-->
-<!--                :file-list="fileList"-->
-<!--                :data="uploadData"-->
-<!--                :before-upload="beforeVoiceUpload"-->
-<!--                :on-success="handleUploadSuccess"-->
-<!--              >-->
-<!--                <el-button type="primary">点击上传</el-button>-->
-<!--                <div slot="tip" class="el-upload__tip"-->
-<!--                  >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s</div-->
-<!--                >-->
-<!--              </el-upload>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 4：视频 &ndash;&gt;-->
-<!--    <el-tab-pane name="video">-->
-<!--      <span slot="label"><i class="el-icon-share"></i> 视频</span>-->
-<!--      <el-row>-->
-<!--        <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />-->
-<!--        <div style="margin: 20px 0"></div>-->
-<!--        <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />-->
-<!--        <div style="margin: 20px 0"></div>-->
-<!--        <div style="text-align: center">-->
-<!--          <wx-video-player v-if="objData.url" :url="objData.url" />-->
-<!--        </div>-->
-<!--        <div style="margin: 20px 0"></div>-->
-<!--        <el-row style="text-align: center">-->
-<!--          &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--          <el-col :span="12">-->
-<!--            <el-button type="success" @click="openMaterial">-->
-<!--              素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>-->
-<!--            </el-button>-->
-<!--            <el-dialog-->
-<!--              title="选择视频"-->
-<!--              v-model:visible="dialogVideoVisible"-->
-<!--              width="90%"-->
-<!--              append-to-body-->
-<!--            >-->
-<!--              <wx-material-select :objData="objData" @selectMaterial="selectMaterial" />-->
-<!--            </el-dialog>-->
-<!--          </el-col>-->
-<!--          &lt;!&ndash; 文件上传 &ndash;&gt;-->
-<!--          <el-col :span="12">-->
-<!--            <el-upload-->
-<!--              :action="actionUrl"-->
-<!--              :headers="headers"-->
-<!--              multiple-->
-<!--              :limit="1"-->
-<!--              :file-list="fileList"-->
-<!--              :data="uploadData"-->
-<!--              :before-upload="beforeVideoUpload"-->
-<!--              :on-success="handleUploadSuccess"-->
-<!--            >-->
-<!--              <el-button type="primary"-->
-<!--                >新建视频<i class="el-icon-upload el-icon&#45;&#45;right"></i-->
-<!--              ></el-button>-->
-<!--            </el-upload>-->
-<!--          </el-col>-->
-<!--        </el-row>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 5：图文 &ndash;&gt;-->
-<!--    <el-tab-pane name="news">-->
-<!--      <span slot="label"><i class="el-icon-news"></i> 图文</span>-->
-<!--      <el-row>-->
-<!--        <div class="select-item" v-if="objData.articles">-->
-<!--          <wx-news :articles="objData.articles" />-->
-<!--          <el-row class="ope-row">-->
-<!--            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--        <div v-if="!objData.content">-->
-<!--          <el-row style="text-align: center">-->
-<!--            <el-col :span="24">-->
-<!--              <el-button type="success" @click="openMaterial"-->
-<!--                >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文'-->
-<!--                }}<i class="el-icon-circle-check el-icon&#45;&#45;right"></i-->
-<!--              ></el-button>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        <el-dialog title="选择图文" v-model:visible="dialogNewsVisible" width="90%" append-to-body>-->
-<!--          <wx-material-select-->
-<!--            :objData="objData"-->
-<!--            @selectMaterial="selectMaterial"-->
-<!--            :newsType="newsType"-->
-<!--          />-->
-<!--        </el-dialog>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 6：音乐 &ndash;&gt;-->
-<!--    <el-tab-pane name="music">-->
-<!--      <span slot="label"><i class="el-icon-service"></i> 音乐</span>-->
-<!--      <el-row>-->
-<!--        <el-col :span="6">-->
-<!--          <div class="thumb-div">-->
-<!--            <img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />-->
-<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
-<!--            <div class="thumb-but">-->
-<!--              <el-upload-->
-<!--                :action="actionUrl"-->
-<!--                :headers="headers"-->
-<!--                multiple-->
-<!--                :limit="1"-->
-<!--                :file-list="fileList"-->
-<!--                :data="uploadData"-->
-<!--                :before-upload="beforeThumbImageUpload"-->
-<!--                :on-success="handleUploadSuccess"-->
-<!--              >-->
-<!--                <el-button slot="trigger" size="mini" type="text">本地上传</el-button>-->
-<!--                <el-button size="mini" type="text" @click="openMaterial" style="margin-left: 5px"-->
-<!--                  >素材库选择</el-button-->
-<!--                >-->
-<!--              </el-upload>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <el-dialog-->
-<!--            title="选择图片"-->
-<!--            v-model:visible="dialogThumbVisible"-->
-<!--            width="80%"-->
-<!--            append-to-body-->
-<!--          >-->
-<!--            <wx-material-select-->
-<!--              :objData="{ type: 'image', accountId: objData.accountId }"-->
-<!--              @selectMaterial="selectMaterial"-->
-<!--            />-->
-<!--          </el-dialog>-->
-<!--        </el-col>-->
-<!--        <el-col :span="18">-->
-<!--          <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />-->
-<!--          <div style="margin: 20px 0"></div>-->
-<!--          <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />-->
-<!--        </el-col>-->
-<!--      </el-row>-->
-<!--      <div style="margin: 20px 0"></div>-->
-<!--      <el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />-->
-<!--      <div style="margin: 20px 0"></div>-->
-<!--      <el-input-->
-<!--        v-model="objData.hqMusicUrl"-->
-<!--        placeholder="请输入高质量音乐链接"-->
-<!--        @input="inputContent"-->
-<!--      />-->
-<!--    </el-tab-pane>-->
-<!--  </el-tabs>-->
-<!--</template>-->
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
+  ② 代码优化，补充注释，提升阅读性
+  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
+  ④ 支持发送【视频】消息时，支持新建视频
+-->
+<template>
+  <el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">
+    <!-- 类型 1：文本 -->
+    <el-tab-pane name="text">
+      <span slot="label"><i class="el-icon-document"></i> 文本</span>
+      <el-input
+        type="textarea"
+        :rows="5"
+        placeholder="请输入内容"
+        v-model="objData.content"
+        @input="inputContent"
+      />
+    </el-tab-pane>
+    <!-- 类型 2：图片 -->
+    <el-tab-pane name="image">
+      <span slot="label"><i class="el-icon-picture"></i> 图片</span>
+      <el-row>
+        <!-- 情况一：已经选择好素材、或者上传好图片 -->
+        <div class="select-item" v-if="objData.url">
+          <img class="material-img" :src="objData.url" />
+          <p class="item-name" v-if="objData.name">{{ objData.name }}</p>
+          <el-row class="ope-row">
+            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
+          </el-row>
+        </div>
+        <!-- 情况二：未做完上述操作 -->
+        <div v-else>
+          <el-row style="text-align: center">
+            <!-- 选择素材 -->
+            <el-col :span="12" class="col-select">
+              <el-button type="success" @click="openMaterial">
+                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+              </el-button>
+              <el-dialog
+                title="选择图片"
+                v-model:visible="dialogImageVisible"
+                width="90%"
+                append-to-body
+              >
+                <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />
+              </el-dialog>
+            </el-col>
+            <!-- 文件上传 -->
+            <el-col :span="12" class="col-add">
+              <el-upload
+                :action="actionUrl"
+                :headers="headers"
+                multiple
+                :limit="1"
+                :file-list="fileList"
+                :data="uploadData"
+                :before-upload="beforeImageUpload"
+                :on-success="handleUploadSuccess"
+              >
+                <el-button type="primary">上传图片</el-button>
+                <div slot="tip" class="el-upload__tip"
+                  >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div
+                >
+              </el-upload>
+            </el-col>
+          </el-row>
+        </div>
+      </el-row>
+    </el-tab-pane>
+    <!-- 类型 3：语音 -->
+    <el-tab-pane name="voice">
+      <span slot="label"><i class="el-icon-phone"></i> 语音</span>
+      <el-row>
+        <div class="select-item2" v-if="objData.url">
+          <p class="item-name">{{ objData.name }}</p>
+          <div class="item-infos">
+            <wx-voice-player :url="objData.url" />
+          </div>
+          <el-row class="ope-row">
+            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
+          </el-row>
+        </div>
+        <div v-else>
+          <el-row style="text-align: center">
+            <!-- 选择素材 -->
+            <el-col :span="12" class="col-select">
+              <el-button type="success" @click="openMaterial">
+                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+              </el-button>
+              <el-dialog
+                title="选择语音"
+                v-model:visible="dialogVoiceVisible"
+                width="90%"
+                append-to-body
+              >
+                <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
+              </el-dialog>
+            </el-col>
+            <!-- 文件上传 -->
+            <el-col :span="12" class="col-add">
+              <el-upload
+                :action="actionUrl"
+                :headers="headers"
+                multiple
+                :limit="1"
+                :file-list="fileList"
+                :data="uploadData"
+                :before-upload="beforeVoiceUpload"
+                :on-success="handleUploadSuccess"
+              >
+                <el-button type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip"
+                  >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s</div
+                >
+              </el-upload>
+            </el-col>
+          </el-row>
+        </div>
+      </el-row>
+    </el-tab-pane>
+    <!-- 类型 4：视频 -->
+    <el-tab-pane name="video">
+      <span slot="label"><i class="el-icon-share"></i> 视频</span>
+      <el-row>
+        <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
+        <div style="margin: 20px 0"></div>
+        <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
+        <div style="margin: 20px 0"></div>
+        <div style="text-align: center">
+          <wx-video-player v-if="objData.url" :url="objData.url" />
+        </div>
+        <div style="margin: 20px 0"></div>
+        <el-row style="text-align: center">
+          <!-- 选择素材 -->
+          <el-col :span="12">
+            <el-button type="success" @click="openMaterial">
+              素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+            </el-button>
+            <el-dialog
+              title="选择视频"
+              v-model:visible="dialogVideoVisible"
+              width="90%"
+              append-to-body
+            >
+              <wx-material-select :objData="objData" @selectMaterial="selectMaterial" />
+            </el-dialog>
+          </el-col>
+          <!-- 文件上传 -->
+          <el-col :span="12">
+            <el-upload
+              :action="actionUrl"
+              :headers="headers"
+              multiple
+              :limit="1"
+              :file-list="fileList"
+              :data="uploadData"
+              :before-upload="beforeVideoUpload"
+              :on-success="handleUploadSuccess"
+            >
+              <el-button type="primary"
+                >新建视频<i class="el-icon-upload el-icon--right"></i
+              ></el-button>
+            </el-upload>
+          </el-col>
+        </el-row>
+      </el-row>
+    </el-tab-pane>
+    <!-- 类型 5：图文 -->
+    <el-tab-pane name="news">
+      <span slot="label"><i class="el-icon-news"></i> 图文</span>
+      <el-row>
+        <div class="select-item" v-if="objData.articles">
+          <wx-news :articles="objData.articles" />
+          <el-row class="ope-row">
+            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
+          </el-row>
+        </div>
+        <!-- 选择素材 -->
+        <div v-if="!objData.content">
+          <el-row style="text-align: center">
+            <el-col :span="24">
+              <el-button type="success" @click="openMaterial"
+                >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文'
+                }}<i class="el-icon-circle-check el-icon--right"></i
+              ></el-button>
+            </el-col>
+          </el-row>
+        </div>
+        <el-dialog title="选择图文" v-model:visible="dialogNewsVisible" width="90%" append-to-body>
+          <wx-material-select
+            :objData="objData"
+            @selectMaterial="selectMaterial"
+            :newsType="newsType"
+          />
+        </el-dialog>
+      </el-row>
+    </el-tab-pane>
+    <!-- 类型 6：音乐 -->
+    <el-tab-pane name="music">
+      <span slot="label"><i class="el-icon-service"></i> 音乐</span>
+      <el-row>
+        <el-col :span="6">
+          <div class="thumb-div">
+            <img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <div class="thumb-but">
+              <el-upload
+                :action="actionUrl"
+                :headers="headers"
+                multiple
+                :limit="1"
+                :file-list="fileList"
+                :data="uploadData"
+                :before-upload="beforeThumbImageUpload"
+                :on-success="handleUploadSuccess"
+              >
+                <el-button slot="trigger" size="mini" type="text">本地上传</el-button>
+                <el-button size="mini" type="text" @click="openMaterial" style="margin-left: 5px"
+                  >素材库选择</el-button
+                >
+              </el-upload>
+            </div>
+          </div>
+          <el-dialog
+            title="选择图片"
+            v-model:visible="dialogThumbVisible"
+            width="80%"
+            append-to-body
+          >
+            <wx-material-select
+              :objData="{ type: 'image', accountId: objData.accountId }"
+              @selectMaterial="selectMaterial"
+            />
+          </el-dialog>
+        </el-col>
+        <el-col :span="18">
+          <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
+          <div style="margin: 20px 0"></div>
+          <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
+        </el-col>
+      </el-row>
+      <div style="margin: 20px 0"></div>
+      <el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
+      <div style="margin: 20px 0"></div>
+      <el-input
+        v-model="objData.hqMusicUrl"
+        placeholder="请输入高质量音乐链接"
+        @input="inputContent"
+      />
+    </el-tab-pane>
+  </el-tabs>
+</template>
 
-<!--<script>-->
-<!--import WxNews from '@/views/mp/components/wx-news/main.vue'-->
-<!--import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'-->
-<!--import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'-->
-<!--import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'-->
+<script>
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 
-<!--import { getAccessToken } from '@/utils/auth'-->
+import { getAccessToken } from '@/utils/auth'
 
-<!--export default {-->
-<!--  name: 'WxReplySelect',-->
-<!--  components: {-->
-<!--    WxNews,-->
-<!--    WxMaterialSelect,-->
-<!--    WxVoicePlayer,-->
-<!--    WxVideoPlayer-->
-<!--  },-->
-<!--  props: {-->
-<!--    objData: {-->
-<!--      // 消息对象。-->
-<!--      type: Object, // 设置为 Object 的原因，方便属性的传递-->
-<!--      required: true-->
-<!--    },-->
-<!--    newsType: {-->
-<!--      // 图文类型：1、已发布图文；2、草稿箱图文-->
-<!--      type: String,-->
-<!--      default: '1'-->
-<!--    }-->
-<!--  },-->
-<!--  data() {-->
-<!--    return {-->
-<!--      tempPlayerObj: {-->
-<!--        type: '2'-->
-<!--      },-->
+export default {
+  name: 'WxReplySelect',
+  components: {
+    WxNews,
+    WxMaterialSelect,
+    WxVoicePlayer,
+    WxVideoPlayer
+  },
+  props: {
+    objData: {
+      // 消息对象。
+      type: Object, // 设置为 Object 的原因，方便属性的传递
+      required: true
+    },
+    newsType: {
+      // 图文类型：1、已发布图文；2、草稿箱图文
+      type: String,
+      default: '1'
+    }
+  },
+  data() {
+    return {
+      tempPlayerObj: {
+        type: '2'
+      },
 
-<!--      tempObj: new Map().set(-->
-<!--        // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；-->
-<!--        this.objData.type, // 消息类型-->
-<!--        Object.assign({}, this.objData)-->
-<!--      ), // 消息内容-->
+      tempObj: new Map().set(
+        // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
+        this.objData.type, // 消息类型
+        Object.assign({}, this.objData)
+      ), // 消息内容
 
-<!--      // ========== 素材选择的弹窗，是否可见 ==========-->
-<!--      dialogNewsVisible: false, // 图文-->
-<!--      dialogImageVisible: false, // 图片-->
-<!--      dialogVoiceVisible: false, // 语音-->
-<!--      dialogVideoVisible: false, // 视频-->
-<!--      dialogThumbVisible: false, // 缩略图-->
+      // ========== 素材选择的弹窗，是否可见 ==========
+      dialogNewsVisible: false, // 图文
+      dialogImageVisible: false, // 图片
+      dialogVoiceVisible: false, // 语音
+      dialogVideoVisible: false, // 视频
+      dialogThumbVisible: false, // 缩略图
 
-<!--      // ========== 文件上传（图片、语音、视频） ==========-->
-<!--      fileList: [], // 文件列表-->
-<!--      uploadData: {-->
-<!--        accountId: undefined,-->
-<!--        type: this.objData.type,-->
-<!--        title: '',-->
-<!--        introduction: ''-->
-<!--      },-->
-<!--      actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',-->
-<!--      headers: { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部-->
-<!--    }-->
-<!--  },-->
-<!--  methods: {-->
-<!--    beforeThumbImageUpload(file) {-->
-<!--      const isType =-->
-<!--        file.type === 'image/jpeg' ||-->
-<!--        file.type === 'image/png' ||-->
-<!--        file.type === 'image/gif' ||-->
-<!--        file.type === 'image/bmp' ||-->
-<!--        file.type === 'image/jpg'-->
-<!--      if (!isType) {-->
-<!--        this.$message.error('上传图片格式不对!')-->
-<!--        return false-->
-<!--      }-->
-<!--      const isLt = file.size / 1024 / 1024 < 2-->
-<!--      if (!isLt) {-->
-<!--        this.$message.error('上传图片大小不能超过 2M!')-->
-<!--        return false-->
-<!--      }-->
-<!--      this.uploadData.accountId = this.objData.accountId-->
-<!--      return true-->
-<!--    },-->
-<!--    beforeVoiceUpload(file) {-->
-<!--      // 校验格式-->
-<!--      const isType =-->
-<!--        file.type === 'audio/mp3' ||-->
-<!--        file.type === 'audio/mpeg' ||-->
-<!--        file.type === 'audio/wma' ||-->
-<!--        file.type === 'audio/wav' ||-->
-<!--        file.type === 'audio/amr'-->
-<!--      if (!isType) {-->
-<!--        this.$message.error('上传语音格式不对!' + file.type)-->
-<!--        return false-->
-<!--      }-->
-<!--      // 校验大小-->
-<!--      const isLt = file.size / 1024 / 1024 < 2-->
-<!--      if (!isLt) {-->
-<!--        this.$message.error('上传语音大小不能超过 2M!')-->
-<!--        return false-->
-<!--      }-->
-<!--      this.uploadData.accountId = this.objData.accountId-->
-<!--      return true-->
-<!--    },-->
-<!--    beforeImageUpload(file) {-->
-<!--      // 校验格式-->
-<!--      const isType =-->
-<!--        file.type === 'image/jpeg' ||-->
-<!--        file.type === 'image/png' ||-->
-<!--        file.type === 'image/gif' ||-->
-<!--        file.type === 'image/bmp' ||-->
-<!--        file.type === 'image/jpg'-->
-<!--      if (!isType) {-->
-<!--        this.$message.error('上传图片格式不对!')-->
-<!--        return false-->
-<!--      }-->
-<!--      // 校验大小-->
-<!--      const isLt = file.size / 1024 / 1024 < 2-->
-<!--      if (!isLt) {-->
-<!--        this.$message.error('上传图片大小不能超过 2M!')-->
-<!--        return false-->
-<!--      }-->
-<!--      this.uploadData.accountId = this.objData.accountId-->
-<!--      return true-->
-<!--    },-->
-<!--    beforeVideoUpload(file) {-->
-<!--      // 校验格式-->
-<!--      const isType = file.type === 'video/mp4'-->
-<!--      if (!isType) {-->
-<!--        this.$message.error('上传视频格式不对!')-->
-<!--        return false-->
-<!--      }-->
-<!--      // 校验大小-->
-<!--      const isLt = file.size / 1024 / 1024 < 10-->
-<!--      if (!isLt) {-->
-<!--        this.$message.error('上传视频大小不能超过 10M!')-->
-<!--        return false-->
-<!--      }-->
-<!--      this.uploadData.accountId = this.objData.accountId-->
-<!--      return true-->
-<!--    },-->
-<!--    handleUploadSuccess(response, file, fileList) {-->
-<!--      if (response.code !== 0) {-->
-<!--        this.$message.error('上传出错：' + response.msg)-->
-<!--        return false-->
-<!--      }-->
+      // ========== 文件上传（图片、语音、视频） ==========
+      fileList: [], // 文件列表
+      uploadData: {
+        accountId: undefined,
+        type: this.objData.type,
+        title: '',
+        introduction: ''
+      },
+      actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
+      headers: { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
+    }
+  },
+  methods: {
+    beforeThumbImageUpload(file) {
+      const isType =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/png' ||
+        file.type === 'image/gif' ||
+        file.type === 'image/bmp' ||
+        file.type === 'image/jpg'
+      if (!isType) {
+        this.$message.error('上传图片格式不对!')
+        return false
+      }
+      const isLt = file.size / 1024 / 1024 < 2
+      if (!isLt) {
+        this.$message.error('上传图片大小不能超过 2M!')
+        return false
+      }
+      this.uploadData.accountId = this.objData.accountId
+      return true
+    },
+    beforeVoiceUpload(file) {
+      // 校验格式
+      const isType =
+        file.type === 'audio/mp3' ||
+        file.type === 'audio/mpeg' ||
+        file.type === 'audio/wma' ||
+        file.type === 'audio/wav' ||
+        file.type === 'audio/amr'
+      if (!isType) {
+        this.$message.error('上传语音格式不对!' + file.type)
+        return false
+      }
+      // 校验大小
+      const isLt = file.size / 1024 / 1024 < 2
+      if (!isLt) {
+        this.$message.error('上传语音大小不能超过 2M!')
+        return false
+      }
+      this.uploadData.accountId = this.objData.accountId
+      return true
+    },
+    beforeImageUpload(file) {
+      // 校验格式
+      const isType =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/png' ||
+        file.type === 'image/gif' ||
+        file.type === 'image/bmp' ||
+        file.type === 'image/jpg'
+      if (!isType) {
+        this.$message.error('上传图片格式不对!')
+        return false
+      }
+      // 校验大小
+      const isLt = file.size / 1024 / 1024 < 2
+      if (!isLt) {
+        this.$message.error('上传图片大小不能超过 2M!')
+        return false
+      }
+      this.uploadData.accountId = this.objData.accountId
+      return true
+    },
+    beforeVideoUpload(file) {
+      // 校验格式
+      const isType = file.type === 'video/mp4'
+      if (!isType) {
+        this.$message.error('上传视频格式不对!')
+        return false
+      }
+      // 校验大小
+      const isLt = file.size / 1024 / 1024 < 10
+      if (!isLt) {
+        this.$message.error('上传视频大小不能超过 10M!')
+        return false
+      }
+      this.uploadData.accountId = this.objData.accountId
+      return true
+    },
+    handleUploadSuccess(response, file, fileList) {
+      if (response.code !== 0) {
+        this.$message.error('上传出错：' + response.msg)
+        return false
+      }
 
-<!--      // 清空上传时的各种数据-->
-<!--      this.fileList = []-->
-<!--      this.uploadData.title = ''-->
-<!--      this.uploadData.introduction = ''-->
+      // 清空上传时的各种数据
+      this.fileList = []
+      this.uploadData.title = ''
+      this.uploadData.introduction = ''
 
-<!--      // 上传好的文件，本质是个素材，所以可以进行选中-->
-<!--      let item = response.data-->
-<!--      this.selectMaterial(item)-->
-<!--    },-->
-<!--    /**-->
-<!--     * 切换消息类型的 tab-->
-<!--     *-->
-<!--     * @param tab tab-->
-<!--     */-->
-<!--    handleClick(tab) {-->
-<!--      // 设置后续文件上传的文件类型-->
-<!--      this.uploadData.type = this.objData.type-->
-<!--      if (this.uploadData.type === 'music') {-->
-<!--        // 【音乐】上传的是缩略图-->
-<!--        this.uploadData.type = 'thumb'-->
-<!--      }-->
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      let item = response.data
+      this.selectMaterial(item)
+    },
+    /**
+     * 切换消息类型的 tab
+     *
+     * @param tab tab
+     */
+    handleClick(tab) {
+      // 设置后续文件上传的文件类型
+      this.uploadData.type = this.objData.type
+      if (this.uploadData.type === 'music') {
+        // 【音乐】上传的是缩略图
+        this.uploadData.type = 'thumb'
+      }
 
-<!--      // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData-->
-<!--      let tempObjItem = this.tempObj.get(this.objData.type)-->
-<!--      if (tempObjItem) {-->
-<!--        this.objData.content = tempObjItem.content ? tempObjItem.content : null-->
-<!--        this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null-->
-<!--        this.objData.url = tempObjItem.url ? tempObjItem.url : null-->
-<!--        this.objData.name = tempObjItem.url ? tempObjItem.name : null-->
-<!--        this.objData.title = tempObjItem.title ? tempObjItem.title : null-->
-<!--        this.objData.description = tempObjItem.description ? tempObjItem.description : null-->
-<!--        return-->
-<!--      }-->
-<!--      // 如果获取不到，需要把 objData 复原-->
-<!--      // 必须使用 $set 赋值，不然 input 无法输入内容-->
-<!--      this.$set(this.objData, 'content', '')-->
-<!--      this.$delete(this.objData, 'mediaId')-->
-<!--      this.$delete(this.objData, 'url')-->
-<!--      this.$set(this.objData, 'title', '')-->
-<!--      this.$set(this.objData, 'description', '')-->
-<!--    },-->
-<!--    /**-->
-<!--     * 选择素材，将设置设置到 objData 变量-->
-<!--     *-->
-<!--     * @param item 素材-->
-<!--     */-->
-<!--    selectMaterial(item) {-->
-<!--      // 选择好素材，所以隐藏弹窗-->
-<!--      this.closeMaterial()-->
+      // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
+      let tempObjItem = this.tempObj.get(this.objData.type)
+      if (tempObjItem) {
+        this.objData.content = tempObjItem.content ? tempObjItem.content : null
+        this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
+        this.objData.url = tempObjItem.url ? tempObjItem.url : null
+        this.objData.name = tempObjItem.url ? tempObjItem.name : null
+        this.objData.title = tempObjItem.title ? tempObjItem.title : null
+        this.objData.description = tempObjItem.description ? tempObjItem.description : null
+        return
+      }
+      // 如果获取不到，需要把 objData 复原
+      // 必须使用 $set 赋值，不然 input 无法输入内容
+      this.$set(this.objData, 'content', '')
+      this.$delete(this.objData, 'mediaId')
+      this.$delete(this.objData, 'url')
+      this.$set(this.objData, 'title', '')
+      this.$set(this.objData, 'description', '')
+    },
+    /**
+     * 选择素材，将设置设置到 objData 变量
+     *
+     * @param item 素材
+     */
+    selectMaterial(item) {
+      // 选择好素材，所以隐藏弹窗
+      this.closeMaterial()
 
-<!--      // 创建 tempObjItem 对象，并设置对应的值-->
-<!--      let tempObjItem = {}-->
-<!--      tempObjItem.type = this.objData.type-->
-<!--      if (this.objData.type === 'news') {-->
-<!--        tempObjItem.articles = item.content.newsItem-->
-<!--        this.objData.articles = item.content.newsItem-->
-<!--      } else if (this.objData.type === 'music') {-->
-<!--        // 音乐需要特殊处理，因为选择的是图片的缩略图-->
-<!--        tempObjItem.thumbMediaId = item.mediaId-->
-<!--        this.objData.thumbMediaId = item.mediaId-->
-<!--        tempObjItem.thumbMediaUrl = item.url-->
-<!--        this.objData.thumbMediaUrl = item.url-->
-<!--        // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉-->
-<!--        tempObjItem.title = this.objData.title || ''-->
-<!--        tempObjItem.introduction = this.objData.introduction || ''-->
-<!--        tempObjItem.musicUrl = this.objData.musicUrl || ''-->
-<!--        tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''-->
-<!--      } else if (this.objData.type === 'image' || this.objData.type === 'voice') {-->
-<!--        tempObjItem.mediaId = item.mediaId-->
-<!--        this.objData.mediaId = item.mediaId-->
-<!--        tempObjItem.url = item.url-->
-<!--        this.objData.url = item.url-->
-<!--        tempObjItem.name = item.name-->
-<!--        this.objData.name = item.name-->
-<!--      } else if (this.objData.type === 'video') {-->
-<!--        tempObjItem.mediaId = item.mediaId-->
-<!--        this.objData.mediaId = item.mediaId-->
-<!--        tempObjItem.url = item.url-->
-<!--        this.objData.url = item.url-->
-<!--        tempObjItem.name = item.name-->
-<!--        this.objData.name = item.name-->
-<!--        // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction-->
-<!--        if (item.title) {-->
-<!--          this.objData.title = item.title || ''-->
-<!--          tempObjItem.title = item.title || ''-->
-<!--        }-->
-<!--        if (item.introduction) {-->
-<!--          this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下-->
-<!--          tempObjItem.description = item.introduction || ''-->
-<!--        }-->
-<!--      } else if (this.objData.type === 'text') {-->
-<!--        this.objData.content = item.content || ''-->
-<!--      }-->
-<!--      // 最终设置到临时缓存-->
-<!--      this.tempObj.set(this.objData.type, tempObjItem)-->
-<!--    },-->
-<!--    openMaterial() {-->
-<!--      if (this.objData.type === 'news') {-->
-<!--        this.dialogNewsVisible = true-->
-<!--      } else if (this.objData.type === 'image') {-->
-<!--        this.dialogImageVisible = true-->
-<!--      } else if (this.objData.type === 'voice') {-->
-<!--        this.dialogVoiceVisible = true-->
-<!--      } else if (this.objData.type === 'video') {-->
-<!--        this.dialogVideoVisible = true-->
-<!--      } else if (this.objData.type === 'music') {-->
-<!--        this.dialogThumbVisible = true-->
-<!--      }-->
-<!--    },-->
-<!--    closeMaterial() {-->
-<!--      this.dialogNewsVisible = false-->
-<!--      this.dialogImageVisible = false-->
-<!--      this.dialogVoiceVisible = false-->
-<!--      this.dialogVideoVisible = false-->
-<!--      this.dialogThumbVisible = false-->
-<!--    },-->
-<!--    deleteObj() {-->
-<!--      if (this.objData.type === 'news') {-->
-<!--        this.$delete(this.objData, 'articles')-->
-<!--      } else if (this.objData.type === 'image') {-->
-<!--        this.objData.mediaId = null-->
-<!--        this.$delete(this.objData, 'url')-->
-<!--        this.objData.name = null-->
-<!--      } else if (this.objData.type === 'voice') {-->
-<!--        this.objData.mediaId = null-->
-<!--        this.$delete(this.objData, 'url')-->
-<!--        this.objData.name = null-->
-<!--      } else if (this.objData.type === 'video') {-->
-<!--        this.objData.mediaId = null-->
-<!--        this.$delete(this.objData, 'url')-->
-<!--        this.objData.name = null-->
-<!--        this.objData.title = null-->
-<!--        this.objData.description = null-->
-<!--      } else if (this.objData.type === 'music') {-->
-<!--        this.objData.thumbMediaId = null-->
-<!--        this.objData.thumbMediaUrl = null-->
-<!--        this.objData.title = null-->
-<!--        this.objData.description = null-->
-<!--        this.objData.musicUrl = null-->
-<!--        this.objData.hqMusicUrl = null-->
-<!--      } else if (this.objData.type === 'text') {-->
-<!--        this.objData.content = null-->
-<!--      }-->
-<!--      // 覆盖缓存-->
-<!--      this.tempObj.set(this.objData.type, Object.assign({}, this.objData))-->
-<!--    },-->
-<!--    /**-->
-<!--     * 输入时，缓存每次 objData 到 tempObj 中-->
-<!--     *-->
-<!--     * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式-->
-<!--     */-->
-<!--    inputContent(str) {-->
-<!--      // 覆盖缓存-->
-<!--      this.tempObj.set(this.objData.type, Object.assign({}, this.objData))-->
-<!--    }-->
-<!--  }-->
-<!--}-->
-<!--</script>-->
+      // 创建 tempObjItem 对象，并设置对应的值
+      let tempObjItem = {}
+      tempObjItem.type = this.objData.type
+      if (this.objData.type === 'news') {
+        tempObjItem.articles = item.content.newsItem
+        this.objData.articles = item.content.newsItem
+      } else if (this.objData.type === 'music') {
+        // 音乐需要特殊处理，因为选择的是图片的缩略图
+        tempObjItem.thumbMediaId = item.mediaId
+        this.objData.thumbMediaId = item.mediaId
+        tempObjItem.thumbMediaUrl = item.url
+        this.objData.thumbMediaUrl = item.url
+        // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
+        tempObjItem.title = this.objData.title || ''
+        tempObjItem.introduction = this.objData.introduction || ''
+        tempObjItem.musicUrl = this.objData.musicUrl || ''
+        tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''
+      } else if (this.objData.type === 'image' || this.objData.type === 'voice') {
+        tempObjItem.mediaId = item.mediaId
+        this.objData.mediaId = item.mediaId
+        tempObjItem.url = item.url
+        this.objData.url = item.url
+        tempObjItem.name = item.name
+        this.objData.name = item.name
+      } else if (this.objData.type === 'video') {
+        tempObjItem.mediaId = item.mediaId
+        this.objData.mediaId = item.mediaId
+        tempObjItem.url = item.url
+        this.objData.url = item.url
+        tempObjItem.name = item.name
+        this.objData.name = item.name
+        // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
+        if (item.title) {
+          this.objData.title = item.title || ''
+          tempObjItem.title = item.title || ''
+        }
+        if (item.introduction) {
+          this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
+          tempObjItem.description = item.introduction || ''
+        }
+      } else if (this.objData.type === 'text') {
+        this.objData.content = item.content || ''
+      }
+      // 最终设置到临时缓存
+      this.tempObj.set(this.objData.type, tempObjItem)
+    },
+    openMaterial() {
+      if (this.objData.type === 'news') {
+        this.dialogNewsVisible = true
+      } else if (this.objData.type === 'image') {
+        this.dialogImageVisible = true
+      } else if (this.objData.type === 'voice') {
+        this.dialogVoiceVisible = true
+      } else if (this.objData.type === 'video') {
+        this.dialogVideoVisible = true
+      } else if (this.objData.type === 'music') {
+        this.dialogThumbVisible = true
+      }
+    },
+    closeMaterial() {
+      this.dialogNewsVisible = false
+      this.dialogImageVisible = false
+      this.dialogVoiceVisible = false
+      this.dialogVideoVisible = false
+      this.dialogThumbVisible = false
+    },
+    deleteObj() {
+      if (this.objData.type === 'news') {
+        this.$delete(this.objData, 'articles')
+      } else if (this.objData.type === 'image') {
+        this.objData.mediaId = null
+        this.$delete(this.objData, 'url')
+        this.objData.name = null
+      } else if (this.objData.type === 'voice') {
+        this.objData.mediaId = null
+        this.$delete(this.objData, 'url')
+        this.objData.name = null
+      } else if (this.objData.type === 'video') {
+        this.objData.mediaId = null
+        this.$delete(this.objData, 'url')
+        this.objData.name = null
+        this.objData.title = null
+        this.objData.description = null
+      } else if (this.objData.type === 'music') {
+        this.objData.thumbMediaId = null
+        this.objData.thumbMediaUrl = null
+        this.objData.title = null
+        this.objData.description = null
+        this.objData.musicUrl = null
+        this.objData.hqMusicUrl = null
+      } else if (this.objData.type === 'text') {
+        this.objData.content = null
+      }
+      // 覆盖缓存
+      this.tempObj.set(this.objData.type, Object.assign({}, this.objData))
+    },
+    /**
+     * 输入时，缓存每次 objData 到 tempObj 中
+     *
+     * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
+     */
+    inputContent(str) {
+      // 覆盖缓存
+      this.tempObj.set(this.objData.type, Object.assign({}, this.objData))
+    }
+  }
+}
+</script>
 
-<!--<style lang="scss" scoped>-->
-<!--.public-account-management {-->
-<!--  .el-input {-->
-<!--    width: 70%;-->
-<!--    margin-right: 2%;-->
-<!--  }-->
-<!--}-->
-<!--.pagination {-->
-<!--  text-align: right;-->
-<!--  margin-right: 25px;-->
-<!--}-->
-<!--.select-item {-->
-<!--  width: 280px;-->
-<!--  padding: 10px;-->
-<!--  margin: 0 auto 10px auto;-->
-<!--  border: 1px solid #eaeaea;-->
-<!--}-->
-<!--.select-item2 {-->
-<!--  padding: 10px;-->
-<!--  margin: 0 auto 10px auto;-->
-<!--  border: 1px solid #eaeaea;-->
-<!--}-->
-<!--.ope-row {-->
-<!--  padding-top: 10px;-->
-<!--  text-align: center;-->
-<!--}-->
-<!--.item-name {-->
-<!--  font-size: 12px;-->
-<!--  overflow: hidden;-->
-<!--  text-overflow: ellipsis;-->
-<!--  white-space: nowrap;-->
-<!--  text-align: center;-->
-<!--}-->
-<!--.el-form-item__content {-->
-<!--  line-height: unset !important;-->
-<!--}-->
-<!--.col-select {-->
-<!--  border: 1px solid rgb(234, 234, 234);-->
-<!--  padding: 50px 0px;-->
-<!--  height: 160px;-->
-<!--  width: 49.5%;-->
-<!--}-->
-<!--.col-select2 {-->
-<!--  border: 1px solid rgb(234, 234, 234);-->
-<!--  padding: 50px 0px;-->
-<!--  height: 160px;-->
-<!--}-->
-<!--.col-add {-->
-<!--  border: 1px solid rgb(234, 234, 234);-->
-<!--  padding: 50px 0px;-->
-<!--  height: 160px;-->
-<!--  width: 49.5%;-->
-<!--  float: right;-->
-<!--}-->
-<!--.avatar-uploader-icon {-->
-<!--  border: 1px solid #d9d9d9;-->
-<!--  font-size: 28px;-->
-<!--  color: #8c939d;-->
-<!--  width: 100px !important;-->
-<!--  height: 100px !important;-->
-<!--  line-height: 100px !important;-->
-<!--  text-align: center;-->
-<!--}-->
-<!--.material-img {-->
-<!--  width: 100%;-->
-<!--}-->
-<!--.thumb-div {-->
-<!--  display: inline-block;-->
-<!--  text-align: center;-->
-<!--}-->
-<!--.item-infos {-->
-<!--  width: 30%;-->
-<!--  margin: auto;-->
-<!--}-->
-<!--</style>-->
+<style lang="scss" scoped>
+.public-account-management {
+  .el-input {
+    width: 70%;
+    margin-right: 2%;
+  }
+}
+.pagination {
+  text-align: right;
+  margin-right: 25px;
+}
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+.select-item2 {
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+.item-name {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+.el-form-item__content {
+  line-height: unset !important;
+}
+.col-select {
+  border: 1px solid rgb(234, 234, 234);
+  padding: 50px 0px;
+  height: 160px;
+  width: 49.5%;
+}
+.col-select2 {
+  border: 1px solid rgb(234, 234, 234);
+  padding: 50px 0px;
+  height: 160px;
+}
+.col-add {
+  border: 1px solid rgb(234, 234, 234);
+  padding: 50px 0px;
+  height: 160px;
+  width: 49.5%;
+  float: right;
+}
+.avatar-uploader-icon {
+  border: 1px solid #d9d9d9;
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px !important;
+  height: 100px !important;
+  line-height: 100px !important;
+  text-align: center;
+}
+.material-img {
+  width: 100%;
+}
+.thumb-div {
+  display: inline-block;
+  text-align: center;
+}
+.item-infos {
+  width: 30%;
+  margin: auto;
+}
+</style>
diff --git a/src/views/mp/components/wx-video-play/main.vue b/src/views/mp/components/wx-video-play/main.vue
index 880d10f8..7679a70a 100644
--- a/src/views/mp/components/wx-video-play/main.vue
+++ b/src/views/mp/components/wx-video-play/main.vue
@@ -8,110 +8,84 @@
       存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
     2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
   ② 体验优化：弹窗关闭后，自动暂停视频的播放
+
 -->
 <template>
-  <div>
+  <div @click="playVideo()">
     <!-- 提示 -->
-    <div @click="playVideo()">
-      <el-icon>
-        <VideoPlay />
-      </el-icon>
+    <div>
+      <Icon icon="ep:video-play" class="mr-5px" />
       <p>点击播放视频</p>
     </div>
 
     <!-- 弹窗播放 -->
     <el-dialog
+      v-model="dialogVideo"
       title="视频播放"
-      v-model:visible="dialogVideo"
       width="40%"
       append-to-body
       @close="closeDialog"
     >
-      <video-player
-        v-if="playerOptions.sources[0].src"
-        class="video-player vjs-custom-skin"
-        ref="videoPlayerRef"
-        :playsinline="true"
-        :options="playerOptions"
-        @play="onPlayerPlay($event)"
-        @pause="onPlayerPause($event)"
-      />
+      <template #footer>
+        <video-player
+          v-if="dialogVideo"
+          class="video-player vjs-big-play-centered"
+          :src="url"
+          poster=""
+          crossorigin="anonymous"
+          playsinline
+          controls
+          :volume="0.6"
+          :height="320"
+          :playback-rates="[0.7, 1.0, 1.5, 2.0]"
+        />
+      </template>
+      <!--     事件，暫時沒用
+      @mounted="handleMounted"-->
+      <!--        @ready="handleEvent($event)"-->
+      <!--        @play="handleEvent($event)"-->
+      <!--        @pause="handleEvent($event)"-->
+      <!--        @ended="handleEvent($event)"-->
+      <!--        @loadeddata="handleEvent($event)"-->
+      <!--        @waiting="handleEvent($event)"-->
+      <!--        @playing="handleEvent($event)"-->
+      <!--        @canplay="handleEvent($event)"-->
+      <!--        @canplaythrough="handleEvent($event)"-->
+      <!--        @timeupdate="handleEvent(player?.currentTime())"-->
     </el-dialog>
   </div>
 </template>
 
-<script setup lang="ts" name="WxVideoPlayer">
-// 引入 videoPlayer 相关组件。教程：https://juejin.cn/post/6923056942281654285
-import { videoPlayer } from 'vue-video-player'
+<script lang="ts" name="WxVideoPlayer">
+//升级videojs6.0版本,重寫6.0版本
+import 'video.js/dist/video-js.css'
+import { defineComponent } from 'vue'
+import { VideoPlayer } from '@videojs-player/vue'
 import 'video.js/dist/video-js.css'
-import 'vue-video-player/src/custom-theme.css'
-import { VideoPlay } from '@element-plus/icons-vue'
 
-const props = defineProps({
-  url: {
-    // 视频地址，例如说：https://www.iocoder.cn/xxx.mp4
-    type: String,
-    required: true
-  }
-})
-const videoPlayerRef = ref()
-const dialogVideo = ref(false)
-const playerOptions = reactive({
-  playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
-  autoplay: false, // 如果 true,浏览器准备好时开始回放。
-  muted: false, // 默认情况下将会消除任何音频。
-  loop: false, // 导致视频一结束就重新开始。
-  preload: 'auto', // 建议浏览器在 <video> 加载元素后是否应该开始下载视频数据。auto 浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-  language: 'zh-CN',
-  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-  fluid: true, // 当true时，Video.js player 将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-  sources: [
-    {
-      type: 'video/mp4',
-      src: '' // 你的视频地址（必填）【重要】
+export default defineComponent({
+  components: {
+    VideoPlayer
+  },
+  props: {
+    url: {
+      // 视频地址，例如说：https://vjs.zencdn.net/v/oceans.mp4
+      type: String,
+      required: true
     }
-  ],
-  poster: '', // 你的封面地址
-  width: document.documentElement.clientWidth,
-  notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖 Video.js 无法播放媒体源时显示的默认信息。
-  controlBar: {
-    timeDivider: true,
-    durationDisplay: true,
-    remainingTimeDisplay: false,
-    fullscreenToggle: true //全屏按钮
+  },
+  setup() {
+    // const videoPlayerRef = ref(null)
+    const dialogVideo = ref(false)
+
+    const handleEvent = (log) => {
+      console.log('Basic player event', log)
+    }
+    const playVideo = () => {
+      dialogVideo.value = true
+    }
+
+    return { handleEvent, playVideo, dialogVideo }
   }
 })
-
-const playVideo = () => {
-  dialogVideo.value = true
-  playerOptions.sources[0].src = props.url
-}
-const closeDialog = () => {
-  // 暂停播放
-  // videoPlayerRef.player.pause()
-}
-//   onPlayerPlay(player) {},
-//   // // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-//   onPlayerPause(player) {}
-
-// methods: {
-//   playVideo() {
-//     this.dialogVideo = true
-//     // 设置地址
-//     this.playerOptions.sources[0]['src'] = this.url
-//   },
-//   closeDialog() {
-//     // 暂停播放
-//     this.$refs.videoPlayer.player.pause()
-//   },
-//
-//   //todo player组件引入可能有问题
-//
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-//   onPlayerPlay(player) {},
-//   // // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-//   onPlayerPause(player) {}
-// }
 </script>
diff --git a/src/views/mp/components/wx-voice-play/main.vue b/src/views/mp/components/wx-voice-play/main.vue
index 3260fc05..9ec8e2e9 100644
--- a/src/views/mp/components/wx-voice-play/main.vue
+++ b/src/views/mp/components/wx-voice-play/main.vue
@@ -25,6 +25,7 @@
 
 <script setup lang="ts" name="WxVoicePlayer">
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
+
 import BenzAMRRecorder from 'benz-amr-recorder'
 
 const props = defineProps({
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index 6ef4a303..05f3dec6 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -19,8 +19,14 @@
         </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 @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>
@@ -63,12 +69,19 @@
 import { getFreePublishPage, deleteFreePublish } from '@/api/mp/freePublish'
 import * as MpAccountApi from '@/api/mp/account'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
+
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
-const queryParams = reactive({
+interface QueryParams {
+  currentPage: number | undefined | string
+  pageNo: number | undefined | string
+  accountId: number | undefined | string
+}
+
+const queryParams: QueryParams = reactive({
   currentPage: 1, // 当前页数
   pageNo: 1, // 当前页数
   accountId: undefined // 当前页数
@@ -115,7 +128,6 @@ const resetQuery = () => {
   queryFormRef.value.resetFields()
   // 默认选中第一个
   if (accountList.value.length > 0) {
-    // @ts-ignore
     queryParams.accountId = accountList.value[0].id
   }
   handleQuery()
@@ -144,7 +156,6 @@ onMounted(async () => {
   accountList.value = await MpAccountApi.getSimpleAccountList()
   // 选中第一个
   if (accountList.value.length > 0) {
-    // @ts-ignore
     queryParams.accountId = accountList.value[0].id
   }
   await getList()
diff --git a/src/views/mp/message/index.vue b/src/views/mp/message/index.vue
index 10145221..f218de39 100644
--- a/src/views/mp/message/index.vue
+++ b/src/views/mp/message/index.vue
@@ -181,17 +181,17 @@
   </ContentWrap>
 </template>
 <script setup lang="ts" name="MpMessage">
-import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
-// import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
-// import WxMsg from '@/views/mp/components/wx-msg/main.vue'
+import WxMsg from '@/views/mp/components/wx-msg/main.vue'
 import WxLocation from '@/views/mp/components/wx-location/main.vue'
-// import WxMusic from '@/views/mp/components/wx-music/main.vue'
-// import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxMusic from '@/views/mp/components/wx-music/main.vue'
+import WxNews from '@/views/mp/components/wx-news/main.vue'
 import * as MpAccountApi from '@/api/mp/account'
 import * as MpMessageApi from '@/api/mp/message'
 const message = useMessage() // 消息弹窗
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
index 84e6fc17..f4872271 100644
--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
@@ -28,13 +28,21 @@
         />
       </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 @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" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon icon="ep:plus" class="mr-5px" />
+          新增
         </el-button>
         <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']">
-          <Icon icon="ep:refresh" class="mr-5px" /> 同步
+          <Icon icon="ep:refresh" class="mr-5px" />
+          同步
         </el-button>
       </el-form-item>
     </el-form>
@@ -91,6 +99,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import * as MpTagApi from '@/api/mp/tag'
 import * as MpAccountApi from '@/api/mp/account'
 import TagForm from './TagForm.vue'
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

From dd763019ba79f940ce448a1d20c1e0f029c5716f Mon Sep 17 00:00:00 2001
From: Siyu Kong <boil@vip.qq.com>
Date: Mon, 27 Mar 2023 11:46:33 +0800
Subject: [PATCH 05/29] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=AE=9A?=
 =?UTF-8?q?=E6=97=B6=E4=BB=BB=E5=8A=A1=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.修改crud写法
2.修复dropdown组件与v-hasPermi冲突问题
3.优化详情页后续执行时间
---
 src/views/infra/job/JobLog.vue     | 237 ++++++++++----
 src/views/infra/job/JobLogView.vue |  74 +++++
 src/views/infra/job/form.vue       | 172 ++++++++++
 src/views/infra/job/index.vue      | 490 ++++++++++++++---------------
 src/views/infra/job/job.data.ts    |  69 ----
 src/views/infra/job/jobLog.data.ts |  75 -----
 src/views/infra/job/utils.ts       |  44 +++
 src/views/infra/job/view.vue       |  89 ++++++
 8 files changed, 792 insertions(+), 458 deletions(-)
 create mode 100644 src/views/infra/job/JobLogView.vue
 create mode 100644 src/views/infra/job/form.vue
 delete mode 100644 src/views/infra/job/job.data.ts
 delete mode 100644 src/views/infra/job/jobLog.data.ts
 create mode 100644 src/views/infra/job/utils.ts
 create mode 100644 src/views/infra/job/view.vue

diff --git a/src/views/infra/job/JobLog.vue b/src/views/infra/job/JobLog.vue
index 1bf9d745..daa20046 100644
--- a/src/views/infra/job/JobLog.vue
+++ b/src/views/infra/job/JobLog.vue
@@ -1,78 +1,179 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
+  <content-wrap>
+    <!-- 搜索栏 -->
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="120px">
+      <el-form-item label="处理器的名字" prop="handlerName">
+        <el-input
+          v-model="queryParams.handlerName"
+          placeholder="请输入处理器的名字"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="开始执行时间" prop="beginTime">
+        <el-date-picker
+          clearable
+          v-model="queryParams.beginTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择开始执行时间"
+        />
+      </el-form-item>
+      <el-form-item label="结束执行时间" prop="endTime">
+        <el-date-picker
+          clearable
+          v-model="queryParams.endTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择结束执行时间"
+        />
+      </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.INFRA_JOB_LOG_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="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
           v-hasPermi="['infra:job:export']"
-          @click="exportList('定时任务详情.xls')"
-        />
-      </template>
-      <template #beginTime_default="{ row }">
-        <span>{{
-          dayjs(row.beginTime).format('YYYY-MM-DD HH:mm:ss') +
-          ' ~ ' +
-          dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
-        }}</span>
-      </template>
-      <template #duration_default="{ row }">
-        <span>{{ row.duration + ' 毫秒' }}</span>
-      </template>
-      <template #actionbtns_default="{ row }">
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['infra:job:query']"
-          @click="handleDetail(row)"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailData">
-      <template #retryInterval="{ row }">
-        <span>{{ row.retryInterval + '毫秒' }} </span>
-      </template>
-      <template #monitorTimeout="{ row }">
-        <span>{{ row.monitorTimeout > 0 ? row.monitorTimeout + ' 毫秒' : '未开启' }}</span>
-      </template>
-    </Descriptions>
-    <!-- 操作按钮 -->
-    <template #footer>
-      <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+        >
+          <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="jobId" />
+      <el-table-column label="处理器的名字" align="center" prop="handlerName" />
+      <el-table-column label="处理器的参数" align="center" prop="handlerParam" />
+      <el-table-column label="第几次执行" align="center" prop="executeIndex" />
+      <el-table-column label="执行时间" align="center" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.beginTime) + ' ~ ' + parseTime(scope.row.endTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行时长" align="center" prop="duration">
+        <template #default="scope">
+          <span>{{ scope.row.duration + ' 毫秒' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="任务状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            link
+            icon="el-icon-view"
+            @click="handleView(scope.row.id)"
+            :loading="exportLoading"
+            v-hasPermi="['infra:job:query']"
+            >详细
+          </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>
+  <!-- 表单弹窗：查看 -->
+  <log-view ref="viewModalRef" @success="getList" />
 </template>
+
 <script setup lang="ts" name="JobLog">
-import dayjs from 'dayjs'
-
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import download from '@/utils/download'
+import LogView from './JobLogView.vue'
 import * as JobLogApi from '@/api/infra/jobLog'
-import { allSchemas } from './jobLog.data'
+import { parseTime } from './utils'
 
-const { t } = useI18n() // 国际化
-// 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: JobLogApi.getJobLogPageApi,
-  exportListApi: JobLogApi.exportJobLogApi
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  handlerName: undefined,
+  beginTime: undefined,
+  endTime: undefined,
+  status: undefined
 })
-// ========== CRUD 相关 ==========
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('') // 弹出层标题
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
 
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-
-// 详情操作
-const handleDetail = async (row: JobLogApi.JobLogVO) => {
-  // 设置数据
-  const res = await JobLogApi.getJobLogApi(row.id)
-  detailData.value = res
-  dialogTitle.value = t('action.detail')
-  dialogVisible.value = true
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await JobLogApi.getJobLogPageApi({
+      ...queryParams,
+      beginTime: queryParams.beginTime ? queryParams.beginTime + ' 00:00:00' : undefined,
+      endTime: queryParams.endTime ? queryParams.endTime + ' 23:59:59' : undefined
+    })
+    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 viewModalRef = ref()
+const handleView = (rowId?: number) => {
+  viewModalRef.value.openModal(rowId)
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await JobLogApi.exportJobLogApi(queryParams)
+    download.excel(data, '定时任务执行日志.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>
diff --git a/src/views/infra/job/JobLogView.vue b/src/views/infra/job/JobLogView.vue
new file mode 100644
index 00000000..c66e0d80
--- /dev/null
+++ b/src/views/infra/job/JobLogView.vue
@@ -0,0 +1,74 @@
+<template>
+  <!-- 调度日志详细 -->
+  <Dialog title="调度日志详细" v-model="modelVisible" width="700px" append-to-body>
+    <el-form ref="form" :model="formData" label-width="120px" size="mini">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="日志编号：">{{ formData.id }}</el-form-item>
+          <el-form-item label="任务编号：">{{ formData.jobId }}</el-form-item>
+          <el-form-item label="处理器的名字：">{{ formData.handlerName }}</el-form-item>
+          <el-form-item label="处理器的参数：">{{ formData.handlerParam }}</el-form-item>
+          <el-form-item label="第几次执行：">{{ formData.executeIndex }}</el-form-item>
+          <el-form-item label="执行时间：">{{
+            parseTime(formData.beginTime) + ' ~ ' + parseTime(formData.endTime)
+          }}</el-form-item>
+          <el-form-item label="执行时长：">{{ formData.duration + ' 毫秒' }}</el-form-item>
+          <el-form-item label="任务状态：">
+            <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="formData.status" />
+          </el-form-item>
+          <el-form-item label="执行结果：">{{ formData.result }}</el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close">关 闭</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts" name="JobView">
+import * as JobLogApi from '@/api/infra/jobLog'
+import { DICT_TYPE } from '@/utils/dict'
+import { parseTime } from './utils'
+
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+const { t } = useI18n() // 国际化
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  jobId: undefined,
+  handlerParam: '',
+  handlerName: '',
+  executeIndex: '',
+  beginTime: undefined,
+  endTime: undefined,
+  duration: true,
+  result: '',
+  status: undefined
+})
+
+/** 打开弹窗 */
+const openModal = async (id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.detail')
+  // 查看，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await JobLogApi.getJobLogApi(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+const close = () => {
+  emit('success')
+}
+</script>
diff --git a/src/views/infra/job/form.vue b/src/views/infra/job/form.vue
new file mode 100644
index 00000000..24488fd7
--- /dev/null
+++ b/src/views/infra/job/form.vue
@@ -0,0 +1,172 @@
+<template>
+  <!-- 添加或修改定时任务对话框 -->
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="任务名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入任务名称" />
+      </el-form-item>
+      <el-form-item label="处理器的名字" prop="handlerName">
+        <el-input
+          :readonly="formData.id !== undefined"
+          v-model="formData.handlerName"
+          placeholder="请输入处理器的名字"
+        />
+      </el-form-item>
+      <el-form-item label="处理器的参数" prop="handlerParam">
+        <el-input v-model="formData.handlerParam" placeholder="请输入处理器的参数" />
+      </el-form-item>
+      <el-form-item label="CRON 表达式" prop="cronExpression">
+        <el-input v-model="formData.cronExpression" placeholder="请输入CRON 表达式">
+          <template #append>
+            <el-button type="primary" @click="handleShowCron">
+              生成表达式
+              <i class="el-icon-time el-icon--right"></i>
+            </el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="重试次数" prop="retryCount">
+        <el-input
+          v-model="formData.retryCount"
+          placeholder="请输入重试次数。设置为 0 时，不进行重试"
+        />
+      </el-form-item>
+      <el-form-item label="重试间隔" prop="retryInterval">
+        <el-input
+          v-model="formData.retryInterval"
+          placeholder="请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔"
+        />
+      </el-form-item>
+      <el-form-item label="监控超时时间" prop="monitorTimeout">
+        <el-input v-model="formData.monitorTimeout" placeholder="请输入监控超时时间，单位：毫秒" />
+      </el-form-item>
+    </el-form>
+    <!-- 操作按钮 -->
+    <template #footer>
+      <!-- 按钮：保存 -->
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+  <el-dialog
+    title="Cron表达式生成器"
+    v-model="openCron"
+    append-to-body
+    class="scrollbar"
+    destroy-on-close
+  >
+    <crontab @hide="openCron = false" @fill="crontabFill" :expression="expression" />
+  </el-dialog>
+</template>
+<script setup lang="ts" name="JobForm">
+import * as JobApi from '@/api/infra/job'
+
+const emit = defineEmits(['success', 'crontabFill']) // 定义 success 事件，用于操作成功后的回调
+
+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 defaultFormData = {
+  id: undefined,
+  name: '',
+  status: 0,
+  handlerName: '',
+  handlerParam: '',
+  cronExpression: '',
+  retryCount: 0,
+  retryInterval: 0,
+  monitorTimeout: 0,
+  createTime: new Date()
+}
+const formData = ref({ ...defaultFormData })
+
+// 是否显示Cron表达式弹出层
+const openCron = ref(false)
+// 传入的表达式
+const expression = ref('')
+// 表单校验
+const formRules = reactive({
+  name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
+  handlerName: [{ required: true, message: '处理器的名字不能为空', trigger: 'blur' }],
+  cronExpression: [{ required: true, message: 'CRON 表达式不能为空', trigger: 'blur' }],
+  retryCount: [{ required: true, message: '重试次数不能为空', trigger: 'blur' }],
+  retryInterval: [{ 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 JobApi.getJobApi(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** cron表达式按钮操作 */
+const handleShowCron = () => {
+  console.info(123333333333)
+  expression.value = formData.value.cronExpression
+  openCron.value = true
+}
+
+// cron表达式填充
+const crontabFill = (expression: string) => {
+  formData.value.cronExpression = expression
+  emit('crontabFill', expression)
+}
+
+// 提交按钮
+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 JobApi.JobVO
+    if (formType.value === 'create') {
+      await JobApi.createJobApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await JobApi.updateJobApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    ...defaultFormData
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/job/index.vue b/src/views/infra/job/index.vue
index 613f84c4..702b31fe 100644
--- a/src/views/infra/job/index.vue
+++ b/src/views/infra/job/index.vue
@@ -1,243 +1,175 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
+  <content-wrap>
+    <!-- 搜索栏 -->
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
+      <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="status">
+        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.INFRA_JOB_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="处理器的名字" prop="handlerName">
+        <el-input
+          v-model="queryParams.handlerName"
+          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-button
           type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
+          plain
+          @click="openModal('create')"
           v-hasPermi="['infra:job:create']"
-          @click="handleCreate()"
-        />
-        <!-- 操作：导出 -->
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
           v-hasPermi="['infra:job:export']"
-          @click="exportList('定时任务.xls')"
-        />
-        <XButton
-          type="info"
-          preIcon="ep:zoom-in"
-          title="执行日志"
-          v-hasPermi="['infra:job:query']"
-          @click="handleJobLog()"
-        />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['infra:job:update']"
-          @click="handleUpdate(row.id)"
-        />
-        <XTextButton
-          preIcon="ep:edit"
-          :title="row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停'"
-          v-hasPermi="['infra:job:update']"
-          @click="handleChangeStatus(row)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['infra:job:delete']"
-          @click="deleteData(row.id)"
-        />
-        <el-dropdown class="p-0.5" v-hasPermi="['infra:job:trigger', 'infra:job:query']">
-          <XTextButton :title="t('action.more')" postIcon="ep:arrow-down" />
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item>
-                <!-- 操作：执行 -->
-                <XTextButton
-                  preIcon="ep:view"
-                  title="执行一次"
-                  v-hasPermi="['infra:job:trigger']"
-                  @click="handleRun(row)"
-                />
-              </el-dropdown-item>
-              <el-dropdown-item>
-                <!-- 操作：详情 -->
-                <XTextButton
-                  preIcon="ep:view"
-                  :title="t('action.detail')"
-                  v-hasPermi="['infra:job:query']"
-                  @click="handleDetail(row.id)"
-                />
-              </el-dropdown-item>
-              <el-dropdown-item>
-                <!-- 操作：日志 -->
-                <XTextButton
-                  preIcon="ep:view"
-                  title="调度日志"
-                  v-hasPermi="['infra:job:query']"
-                  @click="handleJobLog(row.id)"
-                />
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </template>
-    </XTable>
-  </ContentWrap>
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-      ref="formRef"
-    >
-      <template #cronExpression="form">
-        <Crontab v-model="form['cronExpression']" :shortcuts="shortcuts" />
-      </template>
-    </Form>
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
-      <template #retryInterval="{ row }">
-        <span>{{ row.retryInterval + '毫秒' }} </span>
-      </template>
-      <template #monitorTimeout="{ row }">
-        <span>{{ row.monitorTimeout > 0 ? row.monitorTimeout + ' 毫秒' : '未开启' }}</span>
-      </template>
-      <template #nextTimes>
-        <span>{{ Array.from(nextTimes, (x) => parseTime(x)).join('; ') }}</span>
-      </template>
-    </Descriptions>
-    <!-- 操作按钮 -->
-    <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="dialogVisible = false" />
-    </template>
-  </XModal>
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+
+        <el-button type="info" plain @click="handleJobLog" v-hasPermi="['infra:job:query']">
+          <Icon icon="ep:zoom-in" 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" />
+      <el-table-column label="任务状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="scope.row.status" />
+        </template> </el-table-column
+      >>
+      <el-table-column label="处理器的名字" align="center" prop="handlerName" />
+      <el-table-column label="处理器的参数" align="center" prop="handlerParam" />
+      <el-table-column label="CRON 表达式" align="center" prop="cronExpression" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            link
+            icon="el-icon-edit"
+            @click="openModal('update', scope.row.id)"
+            v-hasPermi="['infra:job:update']"
+            >修改</el-button
+          >
+          <el-button
+            link
+            icon="el-icon-check"
+            @click="handleChangeStatus(scope.row)"
+            v-hasPermi="['infra:job:update']"
+            >{{ scope.row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停' }}</el-button
+          >
+          <el-button
+            link
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['infra:job:delete']"
+            >删除</el-button
+          >
+          <el-dropdown
+            class="mt-1"
+            :teleported="true"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['infra:job:trigger', 'infra:job:query']"
+          >
+            <el-button link icon="el-icon-d-arrow-right">更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleRun" v-if="hasPermi(['infra:job:trigger'])">
+                  执行一次
+                </el-dropdown-item>
+                <el-dropdown-item command="handleView" v-if="hasPermi(['infra:job:query'])">
+                  任务详细
+                </el-dropdown-item>
+                <el-dropdown-item command="handleJobLog" v-if="hasPermi(['infra:job:query'])">
+                  调度日志
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <job-form ref="modalRef" @success="getList" />
+  <!-- 表单弹窗：查看 -->
+  <job-view ref="viewModalRef" @success="getList" />
 </template>
+
 <script setup lang="ts" name="Job">
-import type { FormExpose } from '@/components/Form'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import JobForm from './form.vue'
+import JobView from './view.vue'
+import download from '@/utils/download'
 import * as JobApi from '@/api/infra/job'
-import { rules, allSchemas } from './job.data'
 import { InfraJobStatusEnum } from '@/utils/constants'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter()
 
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: JobApi.getJobPageApi,
-  deleteApi: JobApi.deleteJobApi,
-  exportListApi: JobApi.exportJobApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  handlerName: undefined
 })
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
 
-// ========== 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 nextTimes = ref([])
-const shortcuts = ref([
-  {
-    text: '每天8点和12点 (自定义追加)',
-    value: '0 0 8,12 * * ?'
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await JobApi.getJobPageApi(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
   }
-])
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await JobApi.getJobApi(rowId)
-  unref(formRef)?.setValues(res)
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  // 设置数据
-  const res = await JobApi.getJobApi(rowId)
-  detailData.value = res
-  // 后续执行时长
-  const jobNextTime = await JobApi.getJobNextTimesApi(rowId)
-  nextTimes.value = jobNextTime
-  setDialogTile('detail')
-}
-
-const parseTime = (time) => {
-  if (!time) {
-    return null
-  }
-  const format = '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
-      time = parseInt(time)
-    } else if (typeof time === 'string') {
-      time = time
-        .replace(new RegExp(/-/gm), '/')
-        .replace('T', ' ')
-        .replace(new RegExp(/\.[\d]{3}/gm), '')
-    }
-    if (typeof time === 'number' && time.toString().length === 10) {
-      time = time * 1000
-    }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    let value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') {
-      return ['日', '一', '二', '三', '四', '五', '六'][value]
-    }
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return time_str
 }
 
 const handleChangeStatus = async (row: JobApi.JobVO) => {
   const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
+
   const status =
     row.status === InfraJobStatusEnum.STOP ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP
   message
@@ -249,7 +181,7 @@ const handleChangeStatus = async (row: JobApi.JobVO) => {
           : InfraJobStatusEnum.STOP
       await JobApi.updateJobStatusApi(row.id, status)
       message.success(text + '成功')
-      await reload()
+      await getList()
     })
     .catch(() => {
       row.status =
@@ -258,6 +190,43 @@ const handleChangeStatus = async (row: JobApi.JobVO) => {
           : InfraJobStatusEnum.NORMAL
     })
 }
+
+/** 搜索按钮操作 */
+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 JobApi.deleteJobApi(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 查看操作 */
+const viewModalRef = ref()
+const handleView = (rowId?: number) => {
+  viewModalRef.value.openModal(rowId)
+}
 // 执行日志
 const handleJobLog = (rowId?: number) => {
   if (rowId) {
@@ -271,32 +240,61 @@ const handleRun = (row: JobApi.JobVO) => {
   message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => {
     await JobApi.runJobApi(row.id)
     message.success('执行成功')
-    await reload()
+    await getList()
   })
 }
-// 提交按钮
-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 JobApi.JobVO
-        if (actionType.value === 'create') {
-          await JobApi.createJobApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await JobApi.updateJobApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        await reload()
-      }
-    }
-  })
+
+/** '更多'操作按钮 */
+const handleCommand = (command, row) => {
+  switch (command) {
+    case 'handleRun':
+      handleRun(row)
+      break
+    case 'handleView':
+      handleView(row?.id)
+      break
+    case 'handleJobLog':
+      handleJobLog(row?.id)
+      break
+    default:
+      break
+  }
 }
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await JobApi.exportJobApi(queryParams)
+    download.excel(data, '定时任务.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+// 权限判断：dropdown 与 v-hasPermi有冲突会造成大量的waring，改用v-if调用此方法
+const hasPermi = (permiKeys: string[]) => {
+  const { wsCache } = useCache()
+  const all_permission = '*:*:*'
+  const permissions = wsCache.get(CACHE_KEY.USER).permissions
+
+  if (permiKeys && permiKeys instanceof Array && permiKeys.length > 0) {
+    const permissionFlag = permiKeys
+
+    const hasPermissions = permissions.some((permission: string) => {
+      return all_permission === permission || permissionFlag.includes(permission)
+    })
+    return hasPermissions
+  }
+  return false
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>
diff --git a/src/views/infra/job/job.data.ts b/src/views/infra/job/job.data.ts
deleted file mode 100644
index 38761cd7..00000000
--- a/src/views/infra/job/job.data.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-// 表单校验
-export const rules = reactive({
-  name: [required],
-  handlerName: [required],
-  cronExpression: [required],
-  retryCount: [required],
-  retryInterval: [required]
-})
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '任务编号',
-  action: true,
-  actionWidth: '280px',
-  columns: [
-    {
-      title: '任务名称',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.INFRA_JOB_STATUS,
-      dictClass: 'number',
-      isForm: false,
-      isSearch: true
-    },
-    {
-      title: '处理器的名字',
-      field: 'handlerName',
-      isSearch: true
-    },
-    {
-      title: '处理器的参数',
-      field: 'handlerParam',
-      isTable: false
-    },
-    {
-      title: 'CRON 表达式',
-      field: 'cronExpression'
-    },
-    {
-      title: '后续执行时间',
-      field: 'nextTimes',
-      isTable: false,
-      isForm: false
-    },
-    {
-      title: '重试次数',
-      field: 'retryCount',
-      isTable: false
-    },
-    {
-      title: '重试间隔',
-      field: 'retryInterval',
-      isTable: false
-    },
-    {
-      title: '监控超时时间',
-      field: 'monitorTimeout',
-      isTable: false
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/job/jobLog.data.ts b/src/views/infra/job/jobLog.data.ts
deleted file mode 100644
index ccca3d08..00000000
--- a/src/views/infra/job/jobLog.data.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '日志编号',
-  action: true,
-  columns: [
-    {
-      title: '任务编号',
-      field: 'jobId',
-      isSearch: true
-    },
-    {
-      title: '处理器的名字',
-      field: 'handlerName',
-      isSearch: true
-    },
-    {
-      title: '处理器的参数',
-      field: 'handlerParam'
-    },
-    {
-      title: '第几次执行',
-      field: 'executeIndex'
-    },
-    {
-      title: '开始执行时间',
-      field: 'beginTime',
-      formatter: 'formatDate',
-      table: {
-        slots: {
-          default: 'beginTime_default'
-        }
-      },
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataPicker'
-        }
-      }
-    },
-    {
-      title: '结束执行时间',
-      field: 'endTime',
-      formatter: 'formatDate',
-      isTable: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataPicker'
-        }
-      }
-    },
-    {
-      title: '执行时长',
-      field: 'duration',
-      table: {
-        slots: {
-          default: 'duration_default'
-        }
-      }
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.INFRA_JOB_LOG_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/job/utils.ts b/src/views/infra/job/utils.ts
new file mode 100644
index 00000000..a3774f22
--- /dev/null
+++ b/src/views/infra/job/utils.ts
@@ -0,0 +1,44 @@
+export const parseTime = (time) => {
+  if (!time) {
+    return null
+  }
+  const format = '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time
+        .replace(new RegExp(/-/gm), '/')
+        .replace('T', ' ')
+        .replace(new RegExp(/\.[\d]{3}/gm), '')
+    }
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
diff --git a/src/views/infra/job/view.vue b/src/views/infra/job/view.vue
new file mode 100644
index 00000000..d195e0e3
--- /dev/null
+++ b/src/views/infra/job/view.vue
@@ -0,0 +1,89 @@
+<template>
+  <!-- 任务详细 -->
+  <Dialog title="任务详细" v-model="modelVisible" width="700px" append-to-body>
+    <el-form ref="formRef" :model="formData" label-width="200px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="任务编号：">{{ formData.id }}</el-form-item>
+          <el-form-item label="任务名称：">{{ formData.name }}</el-form-item>
+          <el-form-item label="任务名称：">
+            <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="formData.status" />
+          </el-form-item>
+          <el-form-item label="处理器的名字：">{{ formData.handlerName }}</el-form-item>
+          <el-form-item label="处理器的参数：">{{ formData.handlerParam }}</el-form-item>
+          <el-form-item label="cron表达式：">{{ formData.cronExpression }}</el-form-item>
+          <el-form-item label="重试次数：">{{ formData.retryCount }}</el-form-item>
+          <el-form-item label="重试间隔：">{{ formData.retryInterval + ' 毫秒' }}</el-form-item>
+          <el-form-item label="监控超时时间：">{{
+            formData.monitorTimeout > 0 ? formData.monitorTimeout + ' 毫秒' : '未开启'
+          }}</el-form-item>
+          <el-form-item label="后续执行时间：">
+            <el-timeline class="pt-3">
+              <el-timeline-item
+                v-for="(activity, index) in nextTimes"
+                :key="index"
+                :timestamp="parseTime(activity)"
+              >
+                第{{ index + 1 }}次
+              </el-timeline-item>
+            </el-timeline>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close">关 闭</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts" name="JobView">
+import * as JobApi from '@/api/infra/job'
+import { parseTime } from './utils'
+import { DICT_TYPE } from '@/utils/dict'
+
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+const { t } = useI18n() // 国际化
+
+const formRef = ref() // 表单 Ref
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  name: '',
+  handlerParam: '',
+  handlerName: '',
+  cronExpression: '',
+  retryCount: true,
+  retryInterval: '',
+  monitorTimeout: 0,
+  status: 0
+})
+const nextTimes = ref([])
+
+/** 打开弹窗 */
+const openModal = async (id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.detail')
+  // 查看，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await JobApi.getJobApi(id)
+      // 获取下一次执行时间
+      nextTimes.value = await JobApi.getJobNextTimesApi(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+const close = () => {
+  modelVisible.value = false
+  emit('success')
+}
+</script>

From f33935868db6ce4afda865aa712fcc595e53c00d Mon Sep 17 00:00:00 2001
From: dlarmor <121919810@qq.com>
Date: Mon, 27 Mar 2023 14:06:30 +0800
Subject: [PATCH 06/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD=20->=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/codegen/index.ts                |  22 +-
 src/api/infra/codegen/types.ts                |   2 +-
 src/locales/zh-CN.ts                          |   3 +-
 src/views/infra/codegen/EditTable.vue         |  95 +++--
 .../codegen/components/BasicInfoForm.vue      | 220 +++-------
 .../codegen/components/CloumInfoForm.vue      | 137 -------
 .../codegen/components/ColumInfoForm.vue      | 157 ++++++++
 .../codegen/components/GenerateInfoForm.vue   | 379 ++++++++++++++++++
 .../infra/codegen/components/ImportTable.vue  | 110 ++---
 .../infra/codegen/components/Preview.vue      |  65 +--
 src/views/infra/codegen/components/index.ts   |   5 +-
 src/views/infra/codegen/index.vue             | 261 +++++++++---
 12 files changed, 966 insertions(+), 490 deletions(-)
 delete mode 100644 src/views/infra/codegen/components/CloumInfoForm.vue
 create mode 100644 src/views/infra/codegen/components/ColumInfoForm.vue
 create mode 100644 src/views/infra/codegen/components/GenerateInfoForm.vue

diff --git a/src/api/infra/codegen/index.ts b/src/api/infra/codegen/index.ts
index 54f00ff0..993bd552 100644
--- a/src/api/infra/codegen/index.ts
+++ b/src/api/infra/codegen/index.ts
@@ -2,56 +2,56 @@ import request from '@/config/axios'
 import type { CodegenUpdateReqVO, CodegenCreateListReqVO } from './types'
 
 // 查询列表代码生成表定义
-export const getCodegenTablePageApi = (params) => {
+export const getCodegenTablePage = (params) => {
   return request.get({ url: '/infra/codegen/table/page', params })
 }
 
 // 查询详情代码生成表定义
-export const getCodegenTableApi = (id: number) => {
+export const getCodegenTable = (id: number) => {
   return request.get({ url: '/infra/codegen/detail?tableId=' + id })
 }
 
 // 新增代码生成表定义
-export const createCodegenTableApi = (data: CodegenCreateListReqVO) => {
+export const createCodegenTable = (data: CodegenCreateListReqVO) => {
   return request.post({ url: '/infra/codegen/create', data })
 }
 
 // 修改代码生成表定义
-export const updateCodegenTableApi = (data: CodegenUpdateReqVO) => {
+export const updateCodegenTable = (data: CodegenUpdateReqVO) => {
   return request.put({ url: '/infra/codegen/update', data })
 }
 
 // 基于数据库的表结构，同步数据库的表和字段定义
-export const syncCodegenFromDBApi = (id: number) => {
+export const syncCodegenFromDB = (id: number) => {
   return request.put({ url: '/infra/codegen/sync-from-db?tableId=' + id })
 }
 
 // 基于 SQL 建表语句，同步数据库的表和字段定义
-export const syncCodegenFromSQLApi = (id: number, sql: string) => {
+export const syncCodegenFromSQL = (id: number, sql: string) => {
   return request.put({ url: '/infra/codegen/sync-from-sql?tableId=' + id + '&sql=' + sql })
 }
 
 // 预览生成代码
-export const previewCodegenApi = (id: number) => {
+export const previewCodegen = (id: number) => {
   return request.get({ url: '/infra/codegen/preview?tableId=' + id })
 }
 
 // 下载生成代码
-export const downloadCodegenApi = (id: number) => {
+export const downloadCodegen = (id: number) => {
   return request.download({ url: '/infra/codegen/download?tableId=' + id })
 }
 
 // 获得表定义
-export const getSchemaTableListApi = (params) => {
+export const getSchemaTableList = (params) => {
   return request.get({ url: '/infra/codegen/db/table/list', params })
 }
 
 // 基于数据库的表结构，创建代码生成器的表定义
-export const createCodegenListApi = (data) => {
+export const createCodegenList = (data) => {
   return request.post({ url: '/infra/codegen/create-list', data })
 }
 
 // 删除代码生成表定义
-export const deleteCodegenTableApi = (id: number) => {
+export const deleteCodegenTable = (id: number) => {
   return request.delete({ url: '/infra/codegen/delete?tableId=' + id })
 }
diff --git a/src/api/infra/codegen/types.ts b/src/api/infra/codegen/types.ts
index be6a66ed..e4e78843 100644
--- a/src/api/infra/codegen/types.ts
+++ b/src/api/infra/codegen/types.ts
@@ -52,7 +52,7 @@ export type CodegenPreviewVO = {
   code: string
 }
 export type CodegenUpdateReqVO = {
-  table: CodegenTableVO
+  table: CodegenTableVO | any
   columns: CodegenColumnVO[]
 }
 export type CodegenCreateListReqVO = {
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 6f46f1ab..ea1392c4 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -298,7 +298,8 @@ export default {
     typeUpdate: '字典类型编辑',
     dataCreate: '字典数据新增',
     dataUpdate: '字典数据编辑',
-    fileUpload: '上传文件'
+    fileUpload: '上传文件',
+    back: '返回'
   },
   dialog: {
     dialog: '弹窗',
diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index 820d23ca..34ba3bd6 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -1,67 +1,74 @@
 <template>
-  <ContentWrap>
-    <ContentDetailWrap :title="title" @back="push('/infra/codegen')">
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="基本信息" name="basicInfo">
-          <BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
-        </el-tab-pane>
-        <el-tab-pane label="字段信息" name="cloum">
-          <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" />
-        </el-tab-pane>
-      </el-tabs>
-      <template #right>
-        <XButton
-          type="primary"
-          :title="t('action.save')"
-          :loading="loading"
-          @click="submitForm()"
-        />
-      </template>
-    </ContentDetailWrap>
-  </ContentWrap>
+  <content-wrap v-loading="loading">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basicInfo">
+        <basic-info-form ref="basicInfoRef" :table="formData.table" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="colum">
+        <colum-info-form ref="columInfoRef" :columns="formData.columns" />
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="generateInfo">
+        <generate-info-form ref="generateInfoRef" :table="formData.table" />
+      </el-tab-pane>
+    </el-tabs>
+    <el-form label-width="100px">
+      <el-form-item style="text-align: center; margin-left: -100px; margin-top: 10px">
+        <el-button type="primary" @click="submitForm" :loading="submitLoading">
+          {{ t('action.save') }}
+        </el-button>
+        <el-button @click="close">{{ t('action.back') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </content-wrap>
 </template>
 <script setup lang="ts">
-import { BasicInfoForm, CloumInfoForm } from './components'
-import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen'
-import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types'
+import { BasicInfoForm, ColumInfoForm, GenerateInfoForm } from './components'
+import * as CodegenApi from '@/api/infra/codegen'
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { CodegenUpdateReqVO } from '@/api/infra/codegen/types'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const { push } = useRouter()
+const { push, currentRoute } = useRouter()
 const { query } = useRoute()
+const { delView } = useTagsViewStore()
 const loading = ref(false)
-const title = ref('代码生成')
+const submitLoading = ref(false)
 const activeName = ref('basicInfo')
-const cloumInfoRef = ref(null)
-const tableCurrentRow = ref<CodegenTableVO>()
-const cloumCurrentRow = ref<CodegenColumnVO[]>([])
 const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
+const columInfoRef = ref<ComponentRef<typeof ColumInfoForm>>()
+const generateInfoRef = ref<ComponentRef<typeof GenerateInfoForm>>()
+const formData = ref<CodegenUpdateReqVO>({
+  table: {},
+  columns: []
+})
 
-const getList = async () => {
+const getDetail = async () => {
   const id = query.id as unknown as number
   if (id) {
+    loading.value = true
     // 获取表详细信息
-    const res = await getCodegenTableApi(id)
-    title.value = '修改[ ' + res.table.tableName + ' ]生成配置'
-    tableCurrentRow.value = res.table
-    cloumCurrentRow.value = res.columns
+    formData.value = await CodegenApi.getCodegenTable(id)
+    loading.value = false
   }
 }
 const submitForm = async () => {
-  const basicInfo = unref(basicInfoRef)
-  const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {})
-  if (basicForm) {
-    const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO
-    const genTable: CodegenUpdateReqVO = {
-      table: basicInfoData,
-      columns: cloumCurrentRow.value
-    }
-    await updateCodegenTableApi(genTable)
+  if (!unref(formData)) return
+  try {
+    await unref(basicInfoRef)?.validate()
+    await unref(generateInfoRef)?.validate()
+    await CodegenApi.updateCodegenTable(unref(formData))
     message.success(t('common.updateSuccess'))
     push('/infra/codegen')
-  }
+  } catch {}
+}
+/** 关闭按钮 */
+const close = () => {
+  delView(unref(currentRoute))
+  push('/infra/codegen')
 }
 onMounted(() => {
-  getList()
+  getDetail()
 })
 </script>
diff --git a/src/views/infra/codegen/components/BasicInfoForm.vue b/src/views/infra/codegen/components/BasicInfoForm.vue
index 2009553f..21b280ee 100644
--- a/src/views/infra/codegen/components/BasicInfoForm.vue
+++ b/src/views/infra/codegen/components/BasicInfoForm.vue
@@ -1,183 +1,93 @@
 <template>
-  <Form :rules="rules" @register="register" />
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input placeholder="请输入仓库名称" v-model="formData.tableName" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input placeholder="请输入" v-model="formData.tableComment" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="className">
+          <template #label>
+            <span>
+              实体类名称
+              <el-tooltip
+                content="默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" class="" />
+              </el-tooltip>
+            </span>
+          </template>
+
+          <el-input placeholder="请输入" v-model="formData.className" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="author">
+          <el-input placeholder="请输入" v-model="formData.author" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="3" v-model="formData.remark" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
 </template>
 <script setup lang="ts">
-import { useForm } from '@/hooks/web/useForm'
-import { FormSchema } from '@/types/form'
 import { CodegenTableVO } from '@/api/infra/codegen/types'
-import { getIntDictOptions } from '@/utils/dict'
-import { listSimpleMenusApi } from '@/api/system/menu'
-import { handleTree, defaultProps } from '@/utils/tree'
 import { PropType } from 'vue'
 
+const emits = defineEmits(['update:basicInfo'])
 const props = defineProps({
-  basicInfo: {
+  table: {
     type: Object as PropType<Nullable<CodegenTableVO>>,
     default: () => null
   }
 })
 
-const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
-const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
-const menuOptions = ref<any>([]) // 树形结构
-const getTree = async () => {
-  const res = await listSimpleMenusApi()
-  menuOptions.value = handleTree(res)
-}
+const formRef = ref()
+const formData = ref({
+  tableName: '',
+  tableComment: '',
+  className: '',
+  author: '',
+  remark: ''
+})
 
 const rules = reactive({
   tableName: [required],
   tableComment: [required],
   className: [required],
-  author: [required],
-  templateType: [required],
-  scene: [required],
-  moduleName: [required],
-  businessName: [required],
-  businessPackage: [required],
-  classComment: [required]
-})
-const schema = reactive<FormSchema[]>([
-  {
-    label: '上级菜单',
-    field: 'parentMenuId',
-    component: 'TreeSelect',
-    componentProps: {
-      data: menuOptions,
-      props: defaultProps,
-      checkStrictly: true,
-      nodeKey: 'id'
-    },
-    labelMessage: '分配到指定菜单下，例如 系统管理',
-    colProps: {
-      span: 24
-    }
-  },
-  {
-    label: '表名称',
-    field: 'tableName',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '表描述',
-    field: 'tableComment',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '实体类名称',
-    field: 'className',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '类名称',
-    field: 'className',
-    component: 'Input',
-    labelMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '生成模板',
-    field: 'templateType',
-    component: 'Select',
-    componentProps: {
-      options: templateTypeOptions
-    },
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '生成场景',
-    field: 'scene',
-    component: 'Select',
-    componentProps: {
-      options: sceneOptions
-    },
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '模块名',
-    field: 'moduleName',
-    component: 'Input',
-    labelMessage: '模块名，即一级目录，例如 system、infra、tool 等等',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '业务名',
-    field: 'businessName',
-    component: 'Input',
-    labelMessage: '业务名，即二级目录，例如 user、permission、dict 等等',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '类描述',
-    field: 'classComment',
-    component: 'Input',
-    labelMessage: '用作类描述，例如 用户',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '作者',
-    field: 'author',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    component: 'Input',
-    componentProps: {
-      type: 'textarea',
-      rows: 4
-    },
-    colProps: {
-      span: 24
-    }
-  }
-])
-const { register, methods, elFormRef } = useForm({
-  schema
+  author: [required]
 })
+
 watch(
-  () => props.basicInfo,
-  (basicInfo) => {
-    if (!basicInfo) return
-    const { setValues } = methods
-    setValues(basicInfo)
+  () => props.table,
+  (table) => {
+    if (!table) return
+    formData.value = table
   },
   {
     deep: true,
     immediate: true
   }
 )
-// ========== 初始化 ==========
-onMounted(async () => {
-  await getTree()
-})
-
+watch(
+  () => formData.value,
+  (val) => {
+    emits('update:basicInfo', val)
+  }
+)
 defineExpose({
-  elFormRef,
-  getFormData: methods.getFormData
+  validate: async () => unref(formRef)?.validate()
 })
 </script>
diff --git a/src/views/infra/codegen/components/CloumInfoForm.vue b/src/views/infra/codegen/components/CloumInfoForm.vue
deleted file mode 100644
index 5a60c546..00000000
--- a/src/views/infra/codegen/components/CloumInfoForm.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <vxe-table
-    ref="dragTable"
-    border
-    :data="info"
-    max-height="600"
-    stripe
-    class="xtable-scrollbar"
-    :column-config="{ resizable: true }"
-  >
-    <vxe-column title="字段列名" field="columnName" fixed="left" width="10%" />
-    <vxe-colgroup title="基础属性">
-      <vxe-column title="字段描述" field="columnComment" width="10%">
-        <template #default="{ row }">
-          <vxe-input v-model="row.columnComment" placeholder="请输入字段描述" />
-        </template>
-      </vxe-column>
-      <vxe-column title="物理类型" field="dataType" width="10%" />
-      <vxe-column title="Java类型" width="10%" field="javaType">
-        <template #default="{ row }">
-          <vxe-select v-model="row.javaType" placeholder="请选择Java类型">
-            <vxe-option label="Long" value="Long" />
-            <vxe-option label="String" value="String" />
-            <vxe-option label="Integer" value="Integer" />
-            <vxe-option label="Double" value="Double" />
-            <vxe-option label="BigDecimal" value="BigDecimal" />
-            <vxe-option label="LocalDateTime" value="LocalDateTime" />
-            <vxe-option label="Boolean" value="Boolean" />
-          </vxe-select>
-        </template>
-      </vxe-column>
-      <vxe-column title="java属性" width="8%" field="javaField">
-        <template #default="{ row }">
-          <vxe-input v-model="row.javaField" placeholder="请输入java属性" />
-        </template>
-      </vxe-column>
-    </vxe-colgroup>
-    <vxe-colgroup title="增删改查">
-      <vxe-column title="插入" width="40px" field="createOperation">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
-        </template>
-      </vxe-column>
-      <vxe-column title="编辑" width="40px" field="updateOperation">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
-        </template>
-      </vxe-column>
-      <vxe-column title="列表" width="40px" field="listOperationResult">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
-        </template>
-      </vxe-column>
-      <vxe-column title="查询" width="40px" field="listOperation">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
-        </template>
-      </vxe-column>
-      <vxe-column title="允许空" width="40px" field="nullable">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" />
-        </template>
-      </vxe-column>
-      <vxe-column title="查询方式" width="60px" field="listOperationCondition">
-        <template #default="{ row }">
-          <vxe-select v-model="row.listOperationCondition" placeholder="请选择查询方式">
-            <vxe-option label="=" value="=" />
-            <vxe-option label="!=" value="!=" />
-            <vxe-option label=">" value=">" />
-            <vxe-option label=">=" value=">=" />
-            <vxe-option label="<" value="<>" />
-            <vxe-option label="<=" value="<=" />
-            <vxe-option label="LIKE" value="LIKE" />
-            <vxe-option label="BETWEEN" value="BETWEEN" />
-          </vxe-select>
-        </template>
-      </vxe-column>
-    </vxe-colgroup>
-    <vxe-column title="显示类型" width="10%" field="htmlType">
-      <template #default="{ row }">
-        <vxe-select v-model="row.htmlType" placeholder="请选择显示类型">
-          <vxe-option label="文本框" value="input" />
-          <vxe-option label="文本域" value="textarea" />
-          <vxe-option label="下拉框" value="select" />
-          <vxe-option label="单选框" value="radio" />
-          <vxe-option label="复选框" value="checkbox" />
-          <vxe-option label="日期控件" value="datetime" />
-          <vxe-option label="图片上传" value="imageUpload" />
-          <vxe-option label="文件上传" value="fileUpload" />
-          <vxe-option label="富文本控件" value="editor" />
-        </vxe-select>
-      </template>
-    </vxe-column>
-    <vxe-column title="字典类型" width="10%" field="dictType">
-      <template #default="{ row }">
-        <vxe-select v-model="row.dictType" clearable filterable placeholder="请选择字典类型">
-          <vxe-option
-            v-for="dict in dictOptions"
-            :key="dict.id"
-            :label="dict.name"
-            :value="dict.type"
-          />
-        </vxe-select>
-      </template>
-    </vxe-column>
-    <vxe-column title="示例" field="example">
-      <template #default="{ row }">
-        <vxe-input v-model="row.example" placeholder="请输入示例" />
-      </template>
-    </vxe-column>
-  </vxe-table>
-</template>
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { DictTypeVO } from '@/api/system/dict/types'
-import { CodegenColumnVO } from '@/api/infra/codegen/types'
-import { listSimpleDictType } from '@/api/system/dict/dict.type'
-
-const props = defineProps({
-  info: {
-    type: Array as unknown as PropType<CodegenColumnVO[]>,
-    default: () => null
-  }
-})
-/** 查询字典下拉列表 */
-const dictOptions = ref<DictTypeVO[]>()
-const getDictOptions = async () => {
-  const res = await listSimpleDictType()
-  dictOptions.value = res
-}
-onMounted(async () => {
-  await getDictOptions()
-})
-defineExpose({
-  info: props.info
-})
-</script>
diff --git a/src/views/infra/codegen/components/ColumInfoForm.vue b/src/views/infra/codegen/components/ColumInfoForm.vue
new file mode 100644
index 00000000..33d29978
--- /dev/null
+++ b/src/views/infra/codegen/components/ColumInfoForm.vue
@@ -0,0 +1,157 @@
+<template>
+  <el-table ref="dragTable" :data="formData" row-key="columnId" :max-height="tableHeight">
+    <el-table-column
+      label="字段列名"
+      prop="columnName"
+      min-width="10%"
+      :show-overflow-tooltip="true"
+    />
+    <el-table-column label="字段描述" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.columnComment" />
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="物理类型"
+      prop="dataType"
+      min-width="10%"
+      :show-overflow-tooltip="true"
+    />
+    <el-table-column label="Java类型" min-width="11%">
+      <template #default="scope">
+        <el-select v-model="scope.row.javaType">
+          <el-option label="Long" value="Long" />
+          <el-option label="String" value="String" />
+          <el-option label="Integer" value="Integer" />
+          <el-option label="Double" value="Double" />
+          <el-option label="BigDecimal" value="BigDecimal" />
+          <el-option label="LocalDateTime" value="LocalDateTime" />
+          <el-option label="Boolean" value="Boolean" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="java属性" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.javaField" />
+      </template>
+    </el-table-column>
+    <el-table-column label="插入" min-width="4%">
+      <template #default="scope">
+        <el-checkbox true-label="true" false-label="false" v-model="scope.row.createOperation" />
+      </template>
+    </el-table-column>
+    <el-table-column label="编辑" min-width="4%">
+      <template #default="scope">
+        <el-checkbox true-label="true" false-label="false" v-model="scope.row.updateOperation" />
+      </template>
+    </el-table-column>
+    <el-table-column label="列表" min-width="4%">
+      <template #default="scope">
+        <el-checkbox
+          true-label="true"
+          false-label="false"
+          v-model="scope.row.listOperationResult"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column label="查询" min-width="4%">
+      <template #default="scope">
+        <el-checkbox true-label="true" false-label="false" v-model="scope.row.listOperation" />
+      </template>
+    </el-table-column>
+    <el-table-column label="查询方式" min-width="10%">
+      <template #default="scope">
+        <el-select v-model="scope.row.listOperationCondition">
+          <el-option label="=" value="=" />
+          <el-option label="!=" value="!=" />
+          <el-option label=">" value=">" />
+          <el-option label=">=" value=">=" />
+          <el-option label="<" value="<>" />
+          <el-option label="<=" value="<=" />
+          <el-option label="LIKE" value="LIKE" />
+          <el-option label="BETWEEN" value="BETWEEN" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="允许空" min-width="5%">
+      <template #default="scope">
+        <el-checkbox true-label="true" false-label="false" v-model="scope.row.nullable" />
+      </template>
+    </el-table-column>
+    <el-table-column label="显示类型" min-width="12%">
+      <template #default="scope">
+        <el-select v-model="scope.row.htmlType">
+          <el-option label="文本框" value="input" />
+          <el-option label="文本域" value="textarea" />
+          <el-option label="下拉框" value="select" />
+          <el-option label="单选框" value="radio" />
+          <el-option label="复选框" value="checkbox" />
+          <el-option label="日期控件" value="datetime" />
+          <el-option label="图片上传" value="imageUpload" />
+          <el-option label="文件上传" value="fileUpload" />
+          <el-option label="富文本控件" value="editor" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="字典类型" min-width="12%">
+      <template #default="scope">
+        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="dict in dictOptions"
+            :key="dict.id"
+            :label="dict.name"
+            :value="dict.type"
+          />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="示例" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.example" />
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CodegenColumnVO } from '@/api/infra/codegen/types'
+import { DictTypeVO, listSimpleDictType } from '@/api/system/dict/dict.type'
+
+const emits = defineEmits(['update:columns'])
+const props = defineProps({
+  columns: {
+    type: Array as unknown as PropType<CodegenColumnVO[]>,
+    default: () => null
+  }
+})
+
+const formData = ref<CodegenColumnVO[]>([])
+const tableHeight = document.documentElement.scrollHeight - 350 + 'px'
+
+/** 查询字典下拉列表 */
+const dictOptions = ref<DictTypeVO[]>()
+const getDictOptions = async () => {
+  dictOptions.value = await listSimpleDictType()
+}
+onMounted(async () => {
+  await getDictOptions()
+})
+
+watch(
+  () => props.columns,
+  (columns) => {
+    if (!columns) return
+    formData.value = columns
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => formData.value,
+  (val) => {
+    emits('update:columns', val)
+  }
+)
+</script>
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
new file mode 100644
index 00000000..9a64c800
--- /dev/null
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -0,0 +1,379 @@
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item prop="templateType" label="生成模板">
+          <el-select v-model="formData.templateType" @change="tplSelectChange">
+            <el-option
+              v-for="dict in getDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
+              :key="parseInt(dict.value)"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="scene" label="生成场景">
+          <el-select v-model="formData.scene">
+            <el-option
+              v-for="dict in getDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)"
+              :key="parseInt(dict.value)"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <!--      <el-col :span="12">-->
+      <!--        <el-form-item prop="packageName">-->
+      <!--          <span slot="label">-->
+      <!--            生成包路径-->
+      <!--            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">-->
+      <!--              <i class="el-icon-question"></i>-->
+      <!--            </el-tooltip>-->
+      <!--          </span>-->
+      <!--          <el-input v-model="formData.packageName" />-->
+      <!--        </el-form-item>-->
+      <!--      </el-col>-->
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <template #label>
+            <span>
+              模块名
+              <el-tooltip
+                content="模块名，即一级目录，例如 system、infra、tool 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <template #label>
+            <span>
+              业务名
+              <el-tooltip
+                content="业务名，即二级目录，例如 user、permission、dict 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <!--      <el-col :span="12">-->
+      <!--        <el-form-item prop="businessPackage">-->
+      <!--          <span slot="label">-->
+      <!--            业务包-->
+      <!--            <el-tooltip content="业务包，自定义二级目录。例如说，我们希望将 dictType 和 dictData 归类成 dict 业务" placement="top">-->
+      <!--              <i class="el-icon-question"></i>-->
+      <!--            </el-tooltip>-->
+      <!--          </span>-->
+      <!--          <el-input v-model="formData.businessPackage" />-->
+      <!--        </el-form-item>-->
+      <!--      </el-col>-->
+
+      <el-col :span="12">
+        <el-form-item prop="className">
+          <template #label>
+            <span>
+              类名称
+              <el-tooltip
+                content="类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.className" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="classComment">
+          <template #label>
+            <span>
+              类描述
+              <el-tooltip content="用作类描述，例如 用户" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.classComment" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              上级菜单
+              <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-tree-select
+            v-model="formData.parentMenuId"
+            placeholder="请选择系统菜单"
+            node-key="id"
+            check-strictly
+            :data="menus"
+            :props="menuTreeProps"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" v-if="formData.genType === '1'">
+        <el-form-item prop="genPath">
+          <template #label>
+            <span>
+              自定义路径
+              <el-tooltip
+                content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.genPath">
+            <template #append>
+              <el-dropdown>
+                <el-button type="primary">
+                  最近路径快速选择
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="formData.genPath = '/'">
+                      恢复默认的生成基础路径
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-show="formData.tplCategory === 'tree'">
+      <h4 class="form-header">其他信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              树编码字段
+              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.treeCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in formData.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              树父编码字段
+              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.treeParentCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in formData.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+
+          <el-select v-model="formData.treeName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in formData.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row v-show="formData.tplCategory === 'sub'">
+      <h4 class="form-header">关联信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              关联子表的表名
+              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.subTableName" placeholder="请选择" @change="subSelectChange">
+            <el-option
+              v-for="(table0, index) in tables"
+              :key="index"
+              :label="table0.tableName + '：' + table0.tableComment"
+              :value="table0.tableName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              子表关联的外键名
+              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.subTableFkName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in subColumns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { CodegenTableVO } from '@/api/infra/codegen/types'
+import * as MenuApi from '@/api/system/menu'
+import { PropType } from 'vue'
+import { getDictOptions, DICT_TYPE } from '@/utils/dict'
+import { handleTree } from '@/utils/tree'
+
+const message = useMessage() // 消息弹窗
+const emits = defineEmits(['update:basicInfo'])
+const props = defineProps({
+  table: {
+    type: Object as PropType<Nullable<CodegenTableVO>>,
+    default: () => null
+  }
+})
+
+const formRef = ref()
+const formData = ref({
+  templateType: null,
+  scene: null,
+  moduleName: '',
+  businessName: '',
+  className: '',
+  classComment: '',
+  parentMenuId: null,
+  genPath: '',
+  treeCode: '',
+  treeParentCode: '',
+  treeName: '',
+  tplCategory: '',
+  subTableName: '',
+  subTableFkName: '',
+  genType: ''
+})
+
+const rules = reactive({
+  templateType: [required],
+  scene: [required],
+  moduleName: [required],
+  businessName: [required],
+  businessPackage: [required],
+  className: [required],
+  classComment: [required]
+})
+
+const tables = ref([])
+const subColumns = ref([])
+const menus = ref<any[]>([])
+const menuTreeProps = {
+  label: 'name'
+}
+
+/** 选择子表名触发 */
+const subSelectChange = () => {
+  formData.value.subTableFkName = ''
+}
+/** 选择生成模板触发 */
+const tplSelectChange = (value) => {
+  if (value !== 1) {
+    // TODO 芋艿：暂时不考虑支持树形结构
+    message.error(
+      '暂时不考虑支持【树形】和【主子表】的代码生成。原因是：导致 vm 模板过于复杂，不利于胖友二次开发'
+    )
+    return false
+  }
+  if (value !== 'sub') {
+    formData.value.subTableName = ''
+    formData.value.subTableFkName = ''
+  }
+}
+
+watch(
+  () => props.table,
+  (table) => {
+    if (!table) return
+    formData.value = table as any
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => formData.value,
+  (val) => {
+    emits('update:basicInfo', val)
+  }
+)
+onMounted(async () => {
+  try {
+    const resp = await MenuApi.listSimpleMenusApi()
+    menus.value = handleTree(resp)
+  } catch {}
+})
+defineExpose({
+  validate: async () => unref(formRef)?.validate()
+})
+</script>
diff --git a/src/views/infra/codegen/components/ImportTable.vue b/src/views/infra/codegen/components/ImportTable.vue
index 38a81541..7eebbe65 100644
--- a/src/views/infra/codegen/components/ImportTable.vue
+++ b/src/views/infra/codegen/components/ImportTable.vue
@@ -1,9 +1,8 @@
 <template>
-  <!-- 导入表 -->
-  <XModal title="导入表" v-model="visible">
-    <el-form :model="queryParams" ref="queryRef" :inline="true">
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
       <el-form-item label="数据源" prop="dataSourceConfigId">
-        <el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源" clearable>
+        <el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源">
           <el-option
             v-for="config in dataSourceConfigs"
             :key="config.id"
@@ -13,52 +12,64 @@
         </el-select>
       </el-form-item>
       <el-form-item label="表名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入表名称" clearable />
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入表名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="表描述" prop="comment">
-        <el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable />
+        <el-input
+          v-model="queryParams.comment"
+          placeholder="请输入表描述"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item>
-        <XButton
-          type="primary"
-          preIcon="ep:search"
-          :title="t('common.query')"
-          @click="handleQuery()"
-        />
-        <XButton preIcon="ep:refresh-right" :title="t('common.reset')" @click="resetQuery()" />
+        <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>
-    <vxe-table
-      ref="xTable"
-      :data="dbTableList"
-      v-loading="dbLoading"
-      :checkbox-config="{ highlight: true, range: true }"
-      height="260px"
-      class="xtable-scrollbar"
-    >
-      <vxe-column type="checkbox" width="60" />
-      <vxe-column field="name" title="表名称" />
-      <vxe-column field="comment" title="表描述" />
-    </vxe-table>
+
+    <el-row>
+      <el-table
+        v-loading="dbLoading"
+        @row-click="clickRow"
+        ref="tableRef"
+        :data="dbTableList"
+        @selection-change="handleSelectionChange"
+        height="260px"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="name" label="表名称" :show-overflow-tooltip="true" />
+        <el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
+      </el-table>
+    </el-row>
+
     <template #footer>
       <div class="dialog-footer">
-        <XButton type="primary" :title="t('action.import')" @click="handleImportTable()" />
-        <XButton :title="t('dialog.close')" @click="handleClose()" />
+        <el-button @click="handleImportTable" type="primary" :disabled="tables.length === 0">{{
+          t('action.import')
+        }}</el-button>
+        <el-button @click="handleClose">{{ t('dialog.close') }}</el-button>
       </div>
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
-import { VxeTableInstance } from 'vxe-table'
 import type { DatabaseTableVO } from '@/api/infra/codegen/types'
-import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
-import { getDataSourceConfigListApi, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
+import * as CodegenApi from '@/api/infra/codegen'
+import { getDataSourceConfigList, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
+import { ElTable } from 'element-plus'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const emit = defineEmits(['ok'])
-// ======== 显示页面 ========
-const visible = ref(false)
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('导入表') // 弹窗的标题
 const dbLoading = ref(true)
 const queryParams = reactive({
   name: undefined,
@@ -67,10 +78,9 @@ const queryParams = reactive({
 })
 const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
 const show = async () => {
-  const res = await getDataSourceConfigListApi()
-  dataSourceConfigs.value = res
-  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id
-  visible.value = true
+  dataSourceConfigs.value = await getDataSourceConfigList()
+  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
+  modelVisible.value = true
   await getList()
 }
 /** 查询表数据 */
@@ -79,8 +89,7 @@ const dbTableList = ref<DatabaseTableVO[]>([])
 /** 查询表数据 */
 const getList = async () => {
   dbLoading.value = true
-  const res = await getSchemaTableListApi(queryParams)
-  dbTableList.value = res
+  dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
   dbLoading.value = false
 }
 // 查询操作
@@ -91,23 +100,22 @@ const handleQuery = async () => {
 const resetQuery = async () => {
   queryParams.name = undefined
   queryParams.comment = undefined
-  queryParams.dataSourceConfigId = 0
+  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
   await getList()
 }
-const xTable = ref<VxeTableInstance>()
+const tableRef = ref<typeof ElTable>()
 /** 多选框选中数据 */
 const tables = ref<string[]>([])
-
+const clickRow = (row) => {
+  unref(tableRef)?.toggleRowSelection(row)
+}
+// 多选框选中数据
+const handleSelectionChange = (selection) => {
+  tables.value = selection.map((item) => item.name)
+}
 /** 导入按钮操作 */
 const handleImportTable = async () => {
-  if (xTable.value?.getCheckboxRecords().length === 0) {
-    message.error('请选择要导入的表')
-    return
-  }
-  xTable.value?.getCheckboxRecords().forEach((item) => {
-    tables.value.push(item.name)
-  })
-  await createCodegenListApi({
+  await CodegenApi.createCodegenList({
     dataSourceConfigId: queryParams.dataSourceConfigId,
     tableNames: tables.value
   })
@@ -116,7 +124,7 @@ const handleImportTable = async () => {
   handleClose()
 }
 const handleClose = () => {
-  visible.value = false
+  modelVisible.value = false
   tables.value = []
 }
 defineExpose({
diff --git a/src/views/infra/codegen/components/Preview.vue b/src/views/infra/codegen/components/Preview.vue
index 2d9482ff..82307d59 100644
--- a/src/views/infra/codegen/components/Preview.vue
+++ b/src/views/infra/codegen/components/Preview.vue
@@ -1,5 +1,11 @@
 <template>
-  <XModal title="预览" v-model="preview.open">
+  <Dialog
+    :title="modelTitle"
+    v-model="modelVisible"
+    align-center
+    width="60%"
+    class="app-infra-codegen-preview-container"
+  >
     <div class="flex">
       <el-card class="w-1/4" :gutter="12" shadow="hover">
         <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
@@ -10,6 +16,7 @@
             :expand-on-click-node="false"
             highlight-current
             @node-click="handleNodeClick"
+            default-expand-all
           />
         </el-scrollbar>
       </el-card>
@@ -21,38 +28,34 @@
             :name="item.filePath"
             :key="item.filePath"
           >
-            <XTextButton style="float: right" :title="t('common.copy')" @click="copy(item.code)" />
+            <el-button text type="primary" class="float-right" @click="copy(item.code)">
+              {{ t('common.copy') }}
+            </el-button>
             <pre>{{ item.code }}</pre>
           </el-tab-pane>
         </el-tabs>
       </el-card>
     </div>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
 import { handleTree2 } from '@/utils/tree'
-import { previewCodegenApi } from '@/api/infra/codegen'
-import { CodegenTableVO, CodegenPreviewVO } from '@/api/infra/codegen/types'
+import * as CodegenApi from '@/api/infra/codegen'
+import { CodegenPreviewVO } from '@/api/infra/codegen/types'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('代码预览') // 弹窗的标题
 // ======== 显示页面 ========
 const preview = reactive({
-  open: false,
-  titel: '代码预览',
   fileTree: [],
   activeName: ''
 })
 const previewCodegen = ref<CodegenPreviewVO[]>()
-const show = async (row: CodegenTableVO) => {
-  const res = await previewCodegenApi(row.id)
-  let file = handleFiles(res)
-  previewCodegen.value = res
-  preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
-  preview.activeName = res[0].filePath
-  preview.open = true
-}
+
 const handleNodeClick = async (data, node) => {
   if (node && !node.isLeaf) {
     return false
@@ -132,14 +135,30 @@ const copy = async (text: string) => {
   const { copy, copied, isSupported } = useClipboard({ source: text })
   if (!isSupported) {
     message.error(t('common.copyError'))
-  } else {
-    await copy()
-    if (unref(copied)) {
-      message.success(t('common.copySuccess'))
-    }
+    return
+  }
+  await copy()
+  if (unref(copied)) {
+    message.success(t('common.copySuccess'))
   }
 }
-defineExpose({
-  show
-})
+
+/** 打开弹窗 */
+const openModal = async (id: number) => {
+  modelVisible.value = true
+  const res = await CodegenApi.previewCodegen(id)
+  let file = handleFiles(res)
+  previewCodegen.value = res
+  preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
+  preview.activeName = res[0].filePath
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
 </script>
+<style lang="scss">
+.app-infra-codegen-preview-container {
+  .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
+    white-space: nowrap;
+    display: inline-block;
+  }
+}
+</style>
diff --git a/src/views/infra/codegen/components/index.ts b/src/views/infra/codegen/components/index.ts
index b84c5a03..71d0587f 100644
--- a/src/views/infra/codegen/components/index.ts
+++ b/src/views/infra/codegen/components/index.ts
@@ -1,5 +1,6 @@
 import BasicInfoForm from './BasicInfoForm.vue'
-import CloumInfoForm from './CloumInfoForm.vue'
+import ColumInfoForm from './ColumInfoForm.vue'
+import GenerateInfoForm from './GenerateInfoForm.vue'
 import ImportTable from './ImportTable.vue'
 import Preview from './Preview.vue'
-export { BasicInfoForm, CloumInfoForm, ImportTable, Preview }
+export { BasicInfoForm, ColumInfoForm, GenerateInfoForm, ImportTable, Preview }
diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index 8337d2d4..591f99d3 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -1,56 +1,124 @@
 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：导入 -->
-        <XButton
-          type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.import')"
-          v-hasPermi="['infra:codegen:create']"
-          @click="openImportTable()"
+  <!-- 搜索 -->
+  <content-wrap>
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          @keyup.enter="handleQuery"
         />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：预览 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.preview')"
-          v-hasPermi="['infra:codegen:query']"
-          @click="handlePreview(row)"
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          @keyup.enter="handleQuery"
         />
-        <!-- 操作：编辑 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['infra:codegen:update']"
-          @click="handleUpdate(row.id)"
+      </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')]"
         />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['infra:codegen:delete']"
-          @click="deleteData(row.id)"
-        />
-        <!-- 操作：同步 -->
-        <XTextButton
-          preIcon="ep:refresh"
-          :title="t('action.sync')"
-          v-hasPermi="['infra:codegen:update']"
-          @click="handleSynchDb(row)"
-        />
-        <!-- 操作：生成 -->
-        <XTextButton
-          preIcon="ep:download"
-          :title="t('action.generate')"
-          v-hasPermi="['infra:codegen:download']"
-          @click="handleGenTable(row)"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
+      </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" v-hasPermi="['infra:codegen:create']" @click="openImportTable()">
+          <Icon icon="ep:zoom-in" class="mr-5px" />{{ t('action.import') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </content-wrap>
+
+  <!-- 列表 -->
+  <content-wrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="数据源" align="center" :formatter="dataSourceConfigNameFormat" />
+      <el-table-column label="表名称" align="center" prop="tableName" width="200" />
+      <el-table-column
+        label="表描述"
+        align="center"
+        prop="tableComment"
+        :show-overflow-tooltip="true"
+        width="120"
+      />
+      <el-table-column label="实体" align="center" prop="className" width="200" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="更新时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        width="300px"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handlePreview(scope.row)"
+            v-hasPermi="['infra:codegen:preview']"
+            >预览</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            @click="handleUpdate(scope.row.id)"
+            v-hasPermi="['infra:codegen:update']"
+            >编辑</el-button
+          >
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:codegen:delete']"
+            >删除</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            @click="handleSynchDb(scope.row)"
+            v-hasPermi="['infra:codegen:update']"
+            >同步</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            @click="handleGenTable(scope.row)"
+            v-hasPermi="['infra:codegen:download']"
+            >生成代码</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>
+
   <!-- 弹窗：导入表 -->
   <ImportTable ref="importRef" @ok="reload()" />
   <!-- 弹窗：预览代码 -->
@@ -59,19 +127,70 @@
 <script setup lang="ts" name="Codegen">
 import download from '@/utils/download'
 import * as CodegenApi from '@/api/infra/codegen'
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
 import { CodegenTableVO } from '@/api/infra/codegen/types'
-import { allSchemas } from './codegen.data'
 import { ImportTable, Preview } from './components'
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+import { DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
+import { dateFormatter } from '@/utils/formatTime'
 
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由跳转
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: CodegenApi.getCodegenTablePageApi,
-  deleteApi: CodegenApi.deleteCodegenTableApi
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  tableName: undefined,
+  tableComment: undefined,
+  createTime: []
 })
+const queryFormRef = ref() // 搜索的表单
+
+const dataSourceConfigs = ref<DataSourceConfigVO[]>([]) // 数据源列表
+
+/** 查询参数列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CodegenApi.getCodegenTablePage(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()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  getList()
+  dataSourceConfigs.value = await DataSourceConfigApi.getDataSourceConfigList()
+})
+
+// 数据源配置的名字
+const dataSourceConfigNameFormat = (row) => {
+  for (const config of dataSourceConfigs.value) {
+    if (row.dataSourceConfigId === config.id) {
+      return config.name
+    }
+  }
+  return '未知【' + row.leaderUserId + '】'
+}
 
 // 导入操作
 const importRef = ref()
@@ -81,27 +200,39 @@ const openImportTable = () => {
 // 预览操作
 const previewRef = ref()
 const handlePreview = (row: CodegenTableVO) => {
-  previewRef.value.show(row)
+  previewRef.value.openModal(row.id)
 }
 // 编辑操作
 const handleUpdate = (rowId: number) => {
   push('/codegen/edit?id=' + rowId)
 }
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await CodegenApi.deleteCodegenTable(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
 // 同步操作
-const handleSynchDb = (row: CodegenTableVO) => {
+const handleSynchDb = async (row: CodegenTableVO) => {
   // 基于 DB 同步
   const tableName = row.tableName
-  message
-    .confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
-    .then(async () => {
-      await CodegenApi.syncCodegenFromDBApi(row.id)
-      message.success('同步成功')
-    })
+  try {
+    await message.confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
+    await CodegenApi.syncCodegenFromDB(row.id)
+    message.success('同步成功')
+  } catch {}
 }
 
 // 生成代码操作
 const handleGenTable = async (row: CodegenTableVO) => {
-  const res = await CodegenApi.downloadCodegenApi(row.id)
+  const res = await CodegenApi.downloadCodegen(row.id)
   download.zip(res, 'codegen-' + row.className + '.zip')
 }
 </script>

From bedcd2205eb1c3cb9cbb4ff6fe73adedf14156ad Mon Sep 17 00:00:00 2001
From: dlarmor <121919810@qq.com>
Date: Mon, 27 Mar 2023 14:18:35 +0800
Subject: [PATCH 07/29] =?UTF-8?q?update:=20=E8=A7=A3=E5=86=B3=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/infra/codegen/components/GenerateInfoForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
index 9a64c800..92bac8dd 100644
--- a/src/views/infra/codegen/components/GenerateInfoForm.vue
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -369,7 +369,7 @@ watch(
 )
 onMounted(async () => {
   try {
-    const resp = await MenuApi.listSimpleMenusApi()
+    const resp = await MenuApi.getSimpleMenusList()
     menus.value = handleTree(resp)
   } catch {}
 })

From 51344a5967df87a90904e321ee8dd636c9ac5999 Mon Sep 17 00:00:00 2001
From: zhangjinlong <zhangjinlong@sdcreditech.com>
Date: Mon, 27 Mar 2023 18:18:29 +0800
Subject: [PATCH 08/29] =?UTF-8?q?Vue3=E9=87=8D=E6=9E=84=EF=BC=9A=E5=85=AC?=
 =?UTF-8?q?=E4=BC=97=E5=8F=B7=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dateUtils.ts            |  79 ++++++
 src/views/mp/statistics/index.vue | 404 +++++++++++++++++++++++++++++-
 2 files changed, 482 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/dateUtils.ts

diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
new file mode 100644
index 00000000..617a88af
--- /dev/null
+++ b/src/utils/dateUtils.ts
@@ -0,0 +1,79 @@
+/**
+ * 将毫秒，转换成时间字符串。例如说，xx 分钟
+ *
+ * @param ms 毫秒
+ * @returns {string} 字符串
+ */
+export function getDate(ms) {
+  const day = Math.floor(ms / (24 * 60 * 60 * 1000))
+  const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
+  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
+  const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
+  if (day > 0) {
+    return day + '天' + hour + '小时' + minute + '分钟'
+  }
+  if (hour > 0) {
+    return hour + '小时' + minute + '分钟'
+  }
+  if (minute > 0) {
+    return minute + '分钟'
+  }
+  if (second > 0) {
+    return second + '秒'
+  } else {
+    return 0 + '秒'
+  }
+}
+
+export function beginOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+export function endOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999)
+}
+
+export function betweenDay(date1, date2) {
+  date1 = convertDate(date1)
+  date2 = convertDate(date2)
+  // 计算差值
+  return Math.floor((date2.getTime() - date1.getTime()) / (24 * 3600 * 1000))
+}
+
+export function formatDate(date, fmt) {
+  date = convertDate(date)
+  const o = {
+    'M+': date.getMonth() + 1, //月份
+    'd+': date.getDate(), //日
+    'H+': date.getHours(), //小时
+    'm+': date.getMinutes(), //分
+    's+': date.getSeconds(), //秒
+    'q+': Math.floor((date.getMonth() + 3) / 3), //季度
+    S: date.getMilliseconds() //毫秒
+  }
+  if (/(y+)/.test(fmt)) {
+    // 年份
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  for (const k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+      )
+    }
+  }
+  return fmt
+}
+
+export function addTime(date, time) {
+  date = convertDate(date)
+  return new Date(date.getTime() + time)
+}
+
+export function convertDate(date) {
+  if (typeof date === 'string') {
+    return new Date(date)
+  }
+  return date
+}
diff --git a/src/views/mp/statistics/index.vue b/src/views/mp/statistics/index.vue
index 497f72ec..9411b674 100644
--- a/src/views/mp/statistics/index.vue
+++ b/src/views/mp/statistics/index.vue
@@ -1,3 +1,405 @@
 <template>
-  <span>开发中</span>
+  <!-- 搜索工作栏 -->
+  <content-wrap>
+    <el-form ref="queryForm" class="-mb-15px" :inline="true" label-width="68px">
+      <el-form-item label="公众号" prop="accountId">
+        <el-select v-model="accountId" @change="getSummary">
+          <el-option
+            v-for="item in accounts"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间范围" prop="dateRange">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 260px"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="defaultTime"
+          @change="getSummary"
+        />
+      </el-form-item>
+    </el-form>
+  </content-wrap>
+
+  <!-- 图表 -->
+  <content-wrap>
+    <el-row>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header>
+            <div>
+              <span>用户增减数据</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="userSummaryChartRef" style="height: 420px"></div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header>
+            <div>
+              <span>累计用户数据</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="userCumulateChartRef" style="height: 420px"></div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header>
+            <div>
+              <span>消息概况数据</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="upstreamMessageChartRef" style="height: 420px"></div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header>
+            <div>
+              <span>接口分析数据</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="interfaceSummaryChartRef" style="height: 420px"></div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </content-wrap>
 </template>
+
+<script setup lang="ts" name="MpStatistics">
+// 引入基本模板
+import * as echarts from 'echarts'
+import {
+  getInterfaceSummary,
+  getUpstreamMessage,
+  getUserCumulate,
+  getUserSummary
+} from '@/api/mp/statistics'
+import { addTime, beginOfDay, betweenDay, endOfDay, formatDate } from '@/utils/dateUtils'
+import { getSimpleAccountList } from '@/api/mp/account'
+
+const message = useMessage() // 消息弹窗
+
+const defaultTime = ref<[Date, Date]>([
+  new Date(2000, 1, 1, 0, 0, 0),
+  new Date(2000, 2, 1, 23, 59, 59)
+])
+const dateRange = ref([
+  beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
+  endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
+]) // -1 天
+const accountId = ref()
+const accounts = ref([
+  {
+    id: '0',
+    name: ''
+  }
+])
+
+const userSummaryChartRef = ref()
+const userCumulateChartRef = ref()
+const upstreamMessageChartRef = ref()
+const interfaceSummaryChartRef = ref()
+
+const xAxisDate = ref([] as any[]) // X 轴的日期范围
+const userSummaryOption = reactive({
+  // 用户增减数据
+  color: ['#67C23A', '#e5323e'],
+  legend: {
+    data: ['新增用户', '取消关注的用户']
+  },
+  tooltip: {},
+  xAxis: {
+    data: [] as any[] // X 轴的日期范围
+  },
+  yAxis: {
+    minInterval: 1
+  },
+  series: [
+    {
+      name: '新增用户',
+      type: 'bar',
+      label: {
+        show: true
+      },
+      barGap: 0,
+      data: [] as any[] // 新增用户的数据
+    },
+    {
+      name: '取消关注的用户',
+      type: 'bar',
+      label: {
+        show: true
+      },
+      data: [] as any[] // 取消关注的用户的数据
+    }
+  ]
+})
+const userCumulateOption = reactive({
+  // 累计用户数据
+  legend: {
+    data: ['累计用户量']
+  },
+  xAxis: {
+    type: 'category',
+    data: [] as any[]
+  },
+  yAxis: {
+    minInterval: 1
+  },
+  series: [
+    {
+      name: '累计用户量',
+      data: [] as any[], // 累计用户量的数据
+      type: 'line',
+      smooth: true,
+      label: {
+        show: true
+      }
+    }
+  ]
+})
+const upstreamMessageOption = reactive({
+  // 消息发送概况数据
+  color: ['#67C23A', '#e5323e'],
+  legend: {
+    data: ['用户发送人数', '用户发送条数']
+  },
+  tooltip: {},
+  xAxis: {
+    data: [] as any[] // X 轴的日期范围
+  },
+  yAxis: {
+    minInterval: 1
+  },
+  series: [
+    {
+      name: '用户发送人数',
+      type: 'line',
+      smooth: true,
+      label: {
+        show: true
+      },
+      data: [] as any[] // 用户发送人数的数据
+    },
+    {
+      name: '用户发送条数',
+      type: 'line',
+      smooth: true,
+      label: {
+        show: true
+      },
+      data: [] as any[] // 用户发送条数的数据
+    }
+  ]
+})
+const interfaceSummaryOption = reactive({
+  // 接口分析况数据
+  color: ['#67C23A', '#e5323e', '#E6A23C', '#409EFF'],
+  legend: {
+    data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时']
+  },
+  tooltip: {},
+  xAxis: {
+    data: [] as any[] // X 轴的日期范围
+  },
+  yAxis: {},
+  series: [
+    {
+      name: '被动回复用户消息的次数',
+      type: 'bar',
+      label: {
+        show: true
+      },
+      barGap: 0,
+      data: [] as any[] // 被动回复用户消息的次数的数据
+    },
+    {
+      name: '失败次数',
+      type: 'bar',
+      label: {
+        show: true
+      },
+      data: [] as any[] // 失败次数的数据
+    },
+    {
+      name: '最大耗时',
+      type: 'bar',
+      label: {
+        show: true
+      },
+      data: [] as any[] // 最大耗时的数据
+    },
+    {
+      name: '总耗时',
+      type: 'bar',
+      label: {
+        show: true
+      },
+      data: [] as any[] // 总耗时的数据
+    }
+  ]
+})
+
+onMounted(async () => {
+  // 获取公众号下拉列表
+  await getAccountList()
+  // 加载数据
+  getSummary()
+})
+const getAccountList = async () => {
+  const data = await getSimpleAccountList()
+  accounts.value = data
+  // 默认选中第一个
+  if (accounts.value.length > 0) {
+    accountId.value = accounts.value[0].id
+  }
+}
+const getSummary = () => {
+  // 如果没有选中公众号账号，则进行提示。
+  if (!accountId) {
+    message.error('未选中公众号，无法统计数据')
+    return false
+  }
+  // 必须选择 7 天内，因为公众号有时间跨度限制为 7
+  if (betweenDay(dateRange.value[0], dateRange.value[1]) >= 7) {
+    message.error('时间间隔 7 天以内，请重新选择')
+    return false
+  }
+  xAxisDate.value = []
+  const days = betweenDay(dateRange.value[0], dateRange.value[1]) // 相差天数
+  for (let i = 0; i <= days; i++) {
+    xAxisDate.value.push(
+      formatDate(addTime(dateRange.value[0], 3600 * 1000 * 24 * i), 'yyyy-MM-dd')
+    )
+  }
+
+  // 初始化图表
+  initUserSummaryChart()
+  initUserCumulateChart()
+  initUpstreamMessageChart()
+  interfaceSummaryChart()
+}
+const initUserSummaryChart = async () => {
+  userSummaryOption.xAxis.data = []
+  userSummaryOption.series[0].data = []
+  userSummaryOption.series[1].data = []
+  try {
+    const data = await getUserSummary({
+      accountId: accountId.value,
+      date: [
+        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
+        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
+      ]
+    })
+
+    userSummaryOption.xAxis.data = xAxisDate.value
+    // 处理数据
+    xAxisDate.value.forEach((date, index) => {
+      data.forEach((item) => {
+        // 匹配日期
+        const refDate = formatDate(new Date(item.refDate), 'yyyy-MM-dd')
+        if (refDate.indexOf(date) === -1) {
+          return
+        }
+        // 设置数据到对应的位置
+        userSummaryOption.series[0].data[index] = item.newUser
+        userSummaryOption.series[1].data[index] = item.cancelUser
+      })
+    })
+    // 绘制图表
+    const userSummaryChart = echarts.init(userSummaryChartRef.value)
+    userSummaryChart.setOption(userSummaryOption)
+  } catch {}
+}
+const initUserCumulateChart = async () => {
+  userCumulateOption.xAxis.data = []
+  userCumulateOption.series[0].data = []
+  // 发起请求
+  try {
+    const data = await getUserCumulate({
+      accountId: accountId.value,
+      date: [
+        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
+        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
+      ]
+    })
+    userCumulateOption.xAxis.data = xAxisDate.value
+    // 处理数据
+    data.forEach((item, index) => {
+      userCumulateOption.series[0].data[index] = item.cumulateUser
+    })
+    // 绘制图表
+    const userCumulateChart = echarts.init(userCumulateChartRef.value)
+    userCumulateChart.setOption(userCumulateOption)
+  } catch {}
+}
+const initUpstreamMessageChart = async () => {
+  upstreamMessageOption.xAxis.data = []
+  upstreamMessageOption.series[0].data = []
+  upstreamMessageOption.series[1].data = []
+  // 发起请求
+  try {
+    const data = await getUpstreamMessage({
+      accountId: accountId.value,
+      date: [
+        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
+        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
+      ]
+    })
+    upstreamMessageOption.xAxis.data = xAxisDate.value
+    // 处理数据
+    data.forEach((item, index) => {
+      upstreamMessageOption.series[0].data[index] = item.messageUser
+      upstreamMessageOption.series[1].data[index] = item.messageCount
+    })
+    // 绘制图表
+    const upstreamMessageChart = echarts.init(upstreamMessageChartRef.value)
+    upstreamMessageChart.setOption(upstreamMessageOption)
+  } catch {}
+}
+const interfaceSummaryChart = async () => {
+  interfaceSummaryOption.xAxis.data = []
+  interfaceSummaryOption.series[0].data = []
+  interfaceSummaryOption.series[1].data = []
+  interfaceSummaryOption.series[2].data = []
+  interfaceSummaryOption.series[3].data = []
+  // 发起请求
+  try {
+    const data = await getInterfaceSummary({
+      accountId: accountId.value,
+      date: [
+        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
+        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
+      ]
+    })
+    interfaceSummaryOption.xAxis.data = xAxisDate.value
+    // 处理数据
+    data.forEach((item, index) => {
+      interfaceSummaryOption.series[0].data[index] = item.callbackCount
+      interfaceSummaryOption.series[1].data[index] = item.failCount
+      interfaceSummaryOption.series[2].data[index] = item.maxTimeCost
+      interfaceSummaryOption.series[3].data[index] = item.totalTimeCost
+    })
+    // 绘制图表
+    const interfaceSummaryChart = echarts.init(interfaceSummaryChartRef.value)
+    interfaceSummaryChart.setOption(interfaceSummaryOption)
+  } catch {}
+}
+</script>

From c5a3fa1f94d981fc498f92153ed49e300518920f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 00:10:42 +0800
Subject: [PATCH 09/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts               |   2 +-
 src/types/auto-components.d.ts                |   2 +
 .../detail/TaskUpdateAssigneeForm.vue         |  81 +++++++++++
 .../{detail.vue => detail/index.vue}          | 136 +++---------------
 4 files changed, 107 insertions(+), 114 deletions(-)
 create mode 100644 src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
 rename src/views/bpm/processInstance/{detail.vue => detail/index.vue} (76%)

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 58d5601b..380e3618 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -284,7 +284,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: '/process-instance/detail',
-        component: () => import('@/views/bpm/processInstance/detail.vue'),
+        component: () => import('@/views/bpm/processInstance/detail/index.vue'),
         name: 'BpmProcessInstanceDetail',
         meta: {
           noCache: true,
diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index cb8ff559..480691fc 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -73,6 +73,8 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElTree: typeof import('element-plus/es')['ElTree']
diff --git a/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue b/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
new file mode 100644
index 00000000..7f9cfd48
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
@@ -0,0 +1,81 @@
+<template>
+  <Dialog title="转派审批人" v-model="modelVisible" width="500">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="新审批人" prop="assigneeUserId">
+        <el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
+          <el-option
+            v-for="item in userList"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="modelVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: '',
+  assigneeUserId: undefined
+})
+const formRules = ref({
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
+})
+
+const formRef = ref() // 表单 Ref
+const userList = ref<any[]>([]) // 用户列表
+
+/** 打开弹窗 */
+const open = async (id: string) => {
+  modelVisible.value = true
+  resetForm()
+  formData.value.id = id
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 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 {
+    await TaskApi.updateTaskAssignee(formData.value)
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: '',
+    assigneeUserId: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/bpm/processInstance/detail.vue b/src/views/bpm/processInstance/detail/index.vue
similarity index 76%
rename from src/views/bpm/processInstance/detail.vue
rename to src/views/bpm/processInstance/detail/index.vue
index a34d8a1a..e811475f 100644
--- a/src/views/bpm/processInstance/detail.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -33,31 +33,21 @@
           </el-form-item>
         </el-form>
         <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
-          <XButton
-            pre-icon="ep:select"
-            type="success"
-            title="通过"
-            @click="handleAudit(item, true)"
-          />
-          <XButton
-            pre-icon="ep:close"
-            type="danger"
-            title="不通过"
-            @click="handleAudit(item, false)"
-          />
-          <XButton
-            pre-icon="ep:edit"
-            type="primary"
-            title="转办"
-            @click="handleUpdateAssignee(item)"
-          />
-          <XButton
-            pre-icon="ep:position"
-            type="primary"
-            title="委派"
-            @click="handleDelegate(item)"
-          />
-          <XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
+          <el-button type="success" @click="handleAudit(item, true)">
+            <Icon icon="ep:select" /> 通过
+          </el-button>
+          <el-button type="danger" @click="handleAudit(item, false)">
+            <Icon icon="ep:close" /> 不通过
+          </el-button>
+          <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
+            <Icon icon="ep:edit" /> 转办
+          </el-button>
+          <el-button type="primary" @click="handleDelegate(item)">
+            <Icon icon="ep:position" /> 委派
+          </el-button>
+          <el-button type="warning" @click="handleBack(item)">
+            <Icon icon="ep:back" /> 回退
+          </el-button>
         </div>
       </el-col>
     </el-card>
@@ -85,7 +75,7 @@
             processInstance.businessKey
           "
         >
-          <XButton type="primary" preIcon="ep:view" title="点击查看" />
+          <el-button type="primary"><Icon icon="ep:view" /> 点击查看</el-button>
         </router-link>
       </div>
     </el-card>
@@ -153,42 +143,8 @@
       />
     </el-card>
 
-    <!-- 对话框(转派审批人) -->
-    <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
-      <el-form
-        ref="updateAssigneeFormRef"
-        :model="updateAssigneeForm"
-        :rules="updateAssigneeRules"
-        label-width="110px"
-      >
-        <el-form-item label="新审批人" prop="assigneeUserId">
-          <el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
-            <el-option
-              v-for="item in userOptions"
-              :key="parseInt(item.id)"
-              :label="item.nickname"
-              :value="parseInt(item.id)"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <!-- 操作按钮 -->
-      <template #footer>
-        <!-- 按钮：保存 -->
-        <XButton
-          type="primary"
-          :title="t('action.save')"
-          :loading="updateAssigneeLoading"
-          @click="submitUpdateAssigneeForm"
-        />
-        <!-- 按钮：关闭 -->
-        <XButton
-          :loading="updateAssigneeLoading"
-          :title="t('dialog.close')"
-          @click="updateAssigneeLoading = false"
-        />
-      </template>
-    </XModal>
+    <!-- 弹窗：转派审批人 -->
+    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
   </ContentWrap>
 </template>
 <script setup lang="ts">
@@ -200,13 +156,12 @@ import * as TaskApi from '@/api/bpm/task'
 import * as ActivityApi from '@/api/bpm/activity'
 import { formatPast2 } from '@/utils/formatTime'
 import { setConfAndFields2 } from '@/utils/formCreate'
-// import { OptionAttrs } from '@form-create/element-ui/types/config'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useUserStore } from '@/store/modules/user'
+import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
 const { proxy } = getCurrentInstance() as any
 
 // ========== 审批信息 ==========
@@ -294,55 +249,11 @@ const getTimelineItemType = (item) => {
 }
 
 // ========== 审批记录 ==========
-const updateAssigneeVisible = ref(false)
-const updateAssigneeLoading = ref(false)
-const updateAssigneeForm = ref({
-  id: undefined,
-  assigneeUserId: undefined
-})
-const updateAssigneeRules = ref({
-  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
-})
-const updateAssigneeFormRef = ref()
-const userOptions = ref<any[]>([])
 
-// 处理转派审批人
-const handleUpdateAssignee = (task) => {
-  // 设置表单
-  resetUpdateAssigneeForm()
-  updateAssigneeForm.value.id = task.id
-  // 设置为打开
-  updateAssigneeVisible.value = true
-}
-
-// 提交转派审批人
-const submitUpdateAssigneeForm = async () => {
-  // 1. 校验表单
-  const elForm = unref(updateAssigneeFormRef)
-  if (!elForm) return
-  const valid = await elForm.validate()
-  if (!valid) return
-
-  // 2.1 提交审批
-  updateAssigneeLoading.value = true
-  try {
-    await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
-    // 2.2 设置为隐藏
-    updateAssigneeVisible.value = false
-    // 加载最新数据
-    getDetail()
-  } finally {
-    updateAssigneeLoading.value = false
-  }
-}
-
-// 重置转派审批人表单
-const resetUpdateAssigneeForm = () => {
-  updateAssigneeForm.value = {
-    id: undefined,
-    assigneeUserId: undefined
-  }
-  updateAssigneeFormRef.value?.resetFields()
+/** 转派审批人 */
+const taskUpdateAssigneeFormRef = ref()
+const openTaskUpdateAssigneeForm = (id: string) => {
+  taskUpdateAssigneeFormRef.value.open(id)
 }
 
 /** 处理审批退回的操作 */
@@ -375,7 +286,6 @@ const activityList = ref([])
 
 // ========== 初始化 ==========
 onMounted(() => {
-  // 加载详情
   getDetail()
   // 加载用户的列表
   UserApi.getSimpleUserList().then((data) => {

From 16c5e3ea0171c7e147072c8ca49513ea81e2c9fe Mon Sep 17 00:00:00 2001
From: wuxiran <wuxiran@outlook.com>
Date: Tue, 28 Mar 2023 01:18:37 +0800
Subject: [PATCH 10/29] =?UTF-8?q?1=E3=80=81=E5=BE=AE=E4=BF=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=96=B0=E7=AC=AC=E4=B8=89=E6=B3=A2=EF=BC=8C?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=A1=B5=E9=9D=A2=E8=83=BD=E6=AD=A3=E5=B8=B8?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=BA=86=E3=80=82=E4=BD=86=E6=98=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8F=AF=E8=83=BD=E8=BF=98=E8=A6=81=E9=94=99=E4=B9=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/profile.jpg                   | Bin 0 -> 7885 bytes
 src/assets/imgs/wechat.png                    | Bin 0 -> 1881 bytes
 .../mp/components/wx-material-select/main.vue | 302 +++++++
 src/views/mp/components/wx-msg/main.vue       | 309 ++++---
 src/views/mp/components/wx-reply/main.vue     | 753 ++++++++++--------
 .../mp/components/wx-video-play/main.vue      |   8 +-
 src/views/mp/message/index.vue                |  39 +-
 7 files changed, 904 insertions(+), 507 deletions(-)
 create mode 100644 src/assets/imgs/profile.jpg
 create mode 100644 src/assets/imgs/wechat.png
 create mode 100644 src/views/mp/components/wx-material-select/main.vue

diff --git a/src/assets/imgs/profile.jpg b/src/assets/imgs/profile.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e4bcf879884f76657292f2e792bf9efbb4090f63
GIT binary patch
literal 7885
zcmbuEWl$Vlx3*_+2sR8pKyW8G!Gl{E+$C6m;1)=L-~<M@;6rd3+&zL$aJNB%I|&W}
z0*B{$-><%^^Y^UXf4aJQ@4l+;d#|-uKg>U@0*KX=RFwcgAOHY-9Ds*KKsW&F-@wMf
z!N$YG#ls^cz{e*bBqJhz9AxyQl%$UrJuMRrH4PK3AUiWNyP$*suYiP#jEstjfr*b#
zF7W?4!9zCygahaY^rHhA0B9f}ItcjC3!nu6(9qC<|9tCz0|N^k6NrWlz`=b$0dW5F
zU~BN5Cs7V9yYHR&>nUuH`e`If0hiOFuWs1gt%FfSI5%4^rs_!KMZCtC5u3t}&@c;_
z^^f7sE&dPNVoV8wtCy;yeuY8Um6fe*;=A8Q>KEL9rLSBMYSx$zT*)=8Tj~g>g#1+q
zX|XPEZg4l*`~+Q2TaWG{_C7RA&05y~w2-Txv#9UAgZ}(o%<GH(SN@7^MVpR(;r&;n
zn)$=|CUU!If3Yed`fQv<p+8^&TAf9QJ*wv~guJr1L+_IhRP=b7cHf-GzIGM%oYZBr
zu<@YVh&p*PR&AD)Lf5}X^E?L?Z7`9~_~)SAY>Dh7Ra0$0$CgLzu(*QEU{v4gh}1VC
zB_K*~=s9vGC~tLwwMHB?d;TY9BW?ahqWojat7*qDilNTm=ZX%BB6UNrCVr1ecUib?
z8;Wu=Ia%=v9tY*mkbyqBQ9;i(*_0Mzy`T6E4k5-~uLQIx73{RPO@H`$nfswXpmZFI
zYu?4SgDxOreH%XQvwUwV?Ia&C{xu}iZ#~F(q}hv<2AS?(5T244Od8lVi<>9VZT)fS
z%g2~3PmTesNqXzKz{#Ul78eE?q!nN5&K*)7qk+vcHmCg;l{c)r=R`m`x?TJRsLtwT
z4_~BZF?AX!-0`)Zr$52qEFykwhjb8TjSFPuX=3+9!-gEjzs_Dge1FXCY|8{)<Mvem
z(+z&Q*&Mlo`o%BmZ1<0oONP$5(dqqIgs74tZ_edmm&$xD{nd+_Tp+C1pYumQcTa-t
z7vJDUI<A&R{(O`gH4yNR(Eh*D0BGnKKmaDzzdA!Be$-#4Qp)>akI0sFjW38jH&5sD
zzz>3-7oez^fP`c_Z`mDhvPgu*aINr!hQ!g38N$wm&atRwnlM{aEkVetsWF*+dB1b!
zqwwx9?`S#u?HoGp5Wwvx)z?-_Hd&_K7s#K+r+88ciLGvtQ)geqt+)K{g%-`e!kUiv
zkCd}e2HW45rWXXVCR{!c?>nn4DY&vIm#v`^GM?eq>PT3*BL48A`MWUCTd4yu8%Y*X
zZve(lt>!2-LZ!Wv=kBwVpI1ca*2?%LQ0i7z%szpW+d{R8Qjgpa;3Me&;syXQFtM=z
z1xNn}e1W~oK)vZ_%;k~zaN5WIQ^~P!9K>HN^Mk;>f30+wZv^SQPC66HO4fZ2={KII
z&x~imcK2suK4~8+>i9id48znFqPG^;l<fTDGVysk;0tggwmC-QMB_40>XQgzO#kN_
zU#bh^Gye@=k+XKm&P6LP@pdQaSbnvICv-V^$vXOeg@SblPhP2*GVFMf(&H6QQ7apF
zbMnM@OnHBDuxkjQgNZq&$!K!9=x}oCH^vpJ1tWNhO&o*C+dBlS_^f5UeR>i;ahdEN
z6+dM+z^iC6e*iq9a}hs+q5;v-G0*|%|L!l3HyD@zED#Bp0h^Scn2b??iCIucR_?!h
z4G<Hsz(`|vifF-Q(N_=X-(!3CwCEFSpGz2FJ<H;J%8f^+Az3$>v>|Z<V@!47Fob`7
zK^3OOYm^jz=4#{I_x_NJi?O8Yo5}w8vr5*VV=#g~T)|oS=npkz+})zFz0VtTg546Q
zlP#yS)~B)xCPfj?>iV&*NmVMP58VwSakK^6IaS%AwFJYuT0fxP;#0%HGT}a+ZUIc$
z@=83A7;?_WX(UYmQ@{7w3#gCL$uB2vB_S+Y153sFinyzauR529T0Ro_vMARuBCERW
zY_u~n0uZ#9g?Wd=X|s_`Z)`zD4G)pbdlA)$P2Azue$BC;&EPa=YL5`O+~2><ju&8o
z7gfu6J_|n+CWjDS2$`ibkkshM51&TyZ>8bFqM~7$-S+W5Pp>~zd$uX63z!5laO}sS
zvq@U`?WYm8`O11B{vx0lr1*-Qszl6lAi47Lt!N`lnTcj-K%)5*KE*I&v!Xt;cQzUr
zUFt8wy#}6Ay_fS4#|Bo{NA!4~aJNge-^Cwf!AS#Cd2C4SVd}q@50a)4S?e5yiAhf7
zT)OkxGWSovOdoh`p$@ZOrd6RC_Ib>rtn1aq02#TeDpi>e0CqEKnD;YBXOX|tVIuR1
z>myR)b<CY{AJvCgEv${d>MXWw?G0-!4v32nc#n4A286R_e+1rVJC3~5RW2}`eGcM5
zM$gw~i@H?w24_T_Cr^qJkc65A-+F6`x4QqDKE=RbBR#+At_i7?;ozSS-}<5@lVi_n
z*23vyv{IGLJ7+quP*u|B?o>l1R5KB*13qe=HaTY*%3E)ypzF#k_=DyF%h=5YSgSG$
zR5b6F^*gFX@>)e}Ml>ejZE9v1WK;JyPHETW*nqMck{F(*Xd5%`54KF<nso3sN-w$*
zW@H)X$?be0M2I@s%~t16e+OJP<@Xk8@aYnZA+0ZL)(;%smN`>M9;E2t-(Wjc+Z6No
zGobOY=)UFik0DL^srCG_lF@5G%T(f}YsVLj@#%EYxF!lS7vnz4M2d1uw}=A~wU@HX
z3)Ml^bKV^>QO&~SWUfMz>q2cPB&9rL_e;byNS~s)9Wz<JEx<R%(A^aYTa1lG$m5Ys
z(l6$1C+zk0Z&UxO5!9~Dx&k$`Y1=pr<`b6vsd3IE=M9huKqNOtdOI$Iy=@FrI)4dM
zd>Urt%(IT?v>P6~P<h{np{q>xvET#4xSWl3va`@?RUyU}K`o?SMskmIL~FmJ$eq64
z>t=5Bj4-#)+g{F4z&aL8ud#r{^=_KI*%w&6h*BSjYJc$r?pd0jS|Rc|X;K(7Kp=sV
zYk!Y@kok?9$Q@g1eS#267_@ces@UWpdHwkuPYuDZeFWZk6q7jx=)mwsxUBFMR^DI+
zE^5$`#S}bD7w5d7E4Kk&dq46DM~Yoczg>FS+p>wX*3rKOpE{%uu9_m7K5b$j`i7vY
zVNy6yPw+Y8Z&w^-D?iR0Z&<#?bx$PAw-)sEDzlrfcU3hrQcY)5f0)G^`5hVDLq8NG
z+o}sk8GztqZ715g`17$t3JR!aO8N)nD&y9SmW^Sd<Aj_i*>SJip14Y>zbX)NC(6(U
zkhCP@d_C^SCckb;g|?3IZ6AZSldX-DSr}5A>g!?BpbEQLMRfz*Y3~Nx^=QUQdBp%p
zw&~i$SCHKAK8C~w`M>`94Jla`I>XV*(x;bIhzao0luAT;Ez8#X^~TgIW`<6Q`s7c%
zF`FH;_iW#L^oOIcfDlsVoliH(tGuT!v@Rp_FhllnlB!m+`irQU-|`Mzh38eyvJ@ua
zD`Kb~nZ8}K^L}~^(zBS=fXejxHX4^6@-YC$*;=88GVosSCB^C(<dyj{uH4jX>5?-2
zz!3)*E3@uj1~rx!c$A&nG`ifEtZkP&Pp~r1)M1IcM%TW&NrqG~yb5?Jrx`~&LDpH=
z2H?*d&Fcri>Dce~E+4Z$sgp@SV>_DNxZxT%UFjih-(FZ@7$yazicF>wpL%t>t<ELF
zLQY=aa3~c0Ed+;<G<F9u7o^yyL6*z-<eC>}>S<Gjiq7XsY!FJNT9D1~EyS-Mh0a7P
z{_(RrW&eDy6R2oZi%I!zT}TZvMkQbc4HRWkZ`d5$*m}8^y7pajU{pf=Zh@DmFsfTp
z)H<R@z%?(OJ+xC~e)T+>qre7DEg9F;4}IVW%r?a4Sug%>?8GJZ#f-EnpCm=sw_E<z
zN^Hch0rxoHT@4T)wFa=7&vZ={3@}U-M4}8ygg%e*T^j)fLYrIydDDd8HlH#1b-O>*
z^gI9#$CBZyD`YI)Iy*_d+!z=N+M^yI@!$}C_4k-Nl$b3YrS8-*9I_-_Zx%Ibbn`ce
zRv%vsLIq`i+Z`J|zt@xN+t-uZ9bL6{H)5A$d*dG0NrJCPHiRorf@$t)Fe4*GveCwM
z(R;dj_nBzo16QEzZ;T1A6vNcx@{%YRJh_jgOTlalMAoGvPo~fOogb8j5a{=`QIolF
zM|@p-_Ixu8u5b1<|E}RiGHQ0kNUZ0tZ#O50yVG>VV~&;}emnsH(Sev)XgHXd|0HQ3
z8UP)H!N5;K43^cl!lY*u@CecIBxMqm3r$MSCzH4Kn!wVvsq6Z0&c=EHnDWLa@h6fQ
z{-Js@b37JWRghRL!^H3Pl&?kB_LUV^Eqqj6)CTw)QsewvfF^0v((u{@JVPqgMVd2Q
z)reYikc<s`s#@yzIeDwwD09!jwL#~v4{BK<Bx=QYlnJy@WMb|&F&gwqbRO68j$7Ft
z%|lu>xfK*{t8NLuoG0YV3-a{|^tJ;dX@hfugGszNr}lcJW?S_XsaRsap?Hq)xC5lD
zewU%O(nS#FtUCFe$4z`rA}>$MNeGS2g#JE6x*ijKRBPbf1~uXL%^@dWjLQcYgv>5!
z!l5uY?kPtO`7EhC#=MKjwsih@m9vN|A4Z$dtiebc3t?}(Po(<SnY}<b@kL^OX9LL1
zaV6cQQkjq?(0Ij4w};h1su0RPCQq9iN@>|UKBYCeca}|NR@X35>gy^JuWM`U&LmCj
z=sfu(6~Re_`GQ&T(l7ep)yv?8oT+9#+^Q-#W|i`lpkeVlZjQF`0Mc7zLq=8%@%*fj
zPI+X4CQE1faL><q7p__wy^Le+J@hh6m;@RHI_QGh@%H=T+H-te8yMY<W6!Kptx@K#
zo6O|F+b$P9W@0RPUi#UU7xJC>0^%JI5JYsilW(4T8vVOKw1bp0g{RmkKdh##mh}TZ
zn$g?KtV*s>Lzj|*4hW*X-gIoK>yW8V-;f&#fIe>s*?XIBp?C0upjGjL)x9iul?b?Z
zPBM6KEqMCknN(o6)1hPNO4j5c@~)YwEFgBbJOr9X&n@|+hCXCt(_Y^8iKkc>4dtpH
zG4>KKuu}%!^QRbW<gp{n(mcS|P+NZn2e$E7mTXUrN3QB`bG<*pQR)&!4-%b4t;NL#
z@F~#dHxM%DE|iJ@muIQwZ|L_0&pSjKwEDNt_x}VHTUsLvDYf@_S^~wfCru4Cp(crB
zcTtcq+8z<y&G+%L(M2EIo>I|}DE0bLl_B)92|C!Rm@_VB4*$xF1B~9%hUCna7n<&b
z2|ZHrI?XfEqzLD(RZT6Uq2r*I-E^0X?k4++14-V~fdWINihfgc+KJA;zKswSl$OfM
zX_zavy>EU(O7zpZVi%*ji8*Pi7G`Gk(-YrL#xLE2VEP`F-a|waf@vZpD7=@fp^tVB
zUrkm<N!N$#Tr97Iy9)HIgDM{YI9h7J;Cn^_XcLdGB^iZ#f&Ov=49NY`C~>Iwi${x|
zdrU}YU1Vm|Wjy|`)Ic47&l1c2uHHRq+BEj#s-WgG#k9XBbGFERjc&$yGb6s;>JB~-
zEiSEmF0WD6OUKK!DoA_`d84z}B;Y4WZ=P8@)Wv+u`Y^(<CiUm|nCro9Jy+F8Wv|PO
z5vKB4oK4^Zpzlf$nm<|QR8z}nZ<Vqm)ZWoF^UA-MoRI_QMGWmM{%Q08c>e&%=xcre
z*qfvV7kwMXo+FuN`tb4_|CK-~maFJV=1C}5-D3W!^ppt|x^YQ;?YE=$2f&X=t;RA-
zvG1QQjzvC(dVM`p(n6atDe@yEx=i<n$QC;uIGvTZwv1{w<6+x{Sy+seeBr(ceg{@H
zY&f*X>hlNcv?4>IF5`A1%sZKHkjM@G<T!l;;x=0h@D*79o>q?C#PBP7tM2QW`>_1_
z6Y~ro2>VTnxUk>LH_k`1t=PN%qKEXb6(ujK&h*<1gwuKzG@ysX2O}re&np7k18xrz
z8p!jfx!YG(<GfCu%0E`0UJ10VJioV_hiY%Wi>$xh<4{UYnRIIq<=xCvo^b5mu~Rmm
znZAy)sAl<=IFw+`$$(FIwt&*KUm6G)yEUJ?u<@~p@+mwYn=D5jP?o;rzO14yU)pn>
zhUicDwVQ@<6v{#Smd(DYb_0K<^<s|#*ES&1OxQg(U&k#FlTR)<^kok%1#QS6nPrzB
z8P2nm1FL`4c6uZdUPu3S5|j9hI3nL0ijFCJ061SLH`Xv;fLe!9{!DT(AXHrVbM*!y
zcHAOX+{{oqTrIG`QSt`=O|9ki;2~F<%=f4CQ>G;zpBgl+o23-$v)au*Uc+?qa?RrH
z44S^1H-iRGragXP&N)G#(}K&hA&2O55;#v)k9e%xL1~RlHA{f{3gK5X{t_#gLLZ+_
z_m0`@z0DHWxjiJZ9nL>uH$`7}KD5bKJMK-Hs!N?K-6h*0N3YvMqP-K3|D*<E(A%l_
zk-6M{!Ng&J-DhgeT8?VGd{J)}QN2a0_BD-4hRLo8c$<;?2}(!w=K*l{$!+Ty#%Ue0
zNJ(1D=0rhGS=SzYPZ$+xNm3<Mt$L~-9@icp1jl*0&a~8`x4}`0UOL;qPBFT=?HDwx
zN3_nr*WfkVL-*O{M^y0_n9!67VagBTV>T^5bPi_x;CJVOcIyJfm6b(gR*3;P3DpmP
zQmB65?HhP1@Y{*dRJu;hGQ##$bcyP4Yjj7Oo%@4=dnq$)br6{tb|95nIqt9^B(7fL
z?XdFe%8ut*g{pC-6B<*4C#VfAfU!lpE35^oLRsInvTzY}O^haD1!l{Zd%Cv5B>Jbm
zXII^A=(wjP7NjBaeZ}7G)kwrO(k|QFysbQzC-t5fxdYa~J&mN(9>y*T9M$_7&2eIY
z{RjFirk!02;a1-5$x7;iZ5N}0HH$*`qhBsHcy1&90KmTt<xK86&GUl8K;ShkV053z
zE9D|nV!M{58yW1gVE<;l4bFYN1bKD~R^(}{Z6u8g8Bv@UH0?OH3s=3XjzB~ZbLR;E
z&lW1wlYQ#>g^>q2`7skdE23d2w~mr{$A|6x{z1bBz8U!Hk$3`+*i|U{z0*ta(TN*V
zG5!nYZ+rTi&L0vev)-D0;^ME%E+ak<!9{N|epKlf1ny;(r8MykY-G8ta^8q$h^&)U
zp4f_QkZo#NI=Bxed82tovb?im2o<sJ2(%)vpadDs_k=wkfNQXUJ%skUcx`e!WLqS0
z5bGNFMRA!#su$oIbhgZWdzF~;qZ>+_TouNwfx+3@tMhkJ>jq?%Z>!%&Z^^Q=ytCN>
z6NpfOJ+P*>a=E9by303*xSw+7Ay;(6ZX<8|ESR1MTIsz`p+4oq?IvP5qzx5~mtwf-
zqD+F9kAw>^mty#a;7q>i`at}fB<9?HO@eQUDp6|K#{}zW5*uX!lpIrGFS|#WV%)Pn
z076I!0aqS7{G@)DM1yRCQE<!e)U~S~3n60gOSB1<6SJ4Hn~kT$Q?lRJmV$N_7j3V?
zK@@Wh*9sdAHuKNn!`oh{%I92=GFvgWSjzt7{-z&x{a7n#BpCLRDIuixE4q7&cZ`-)
ztydvZog?~x*j^S(u?zSaU#CqgbqzB}YA}XuVbGo25cXZD4zE~6D9m5}7CA({T3s7F
zM_f3RR#tO+i@YclY6SlnRy>A$?zX%NIRnS4^}ok*w!?)V2~gWKP-b(ldkFdI@P&jW
z?O<<(hYdFktgb>6-dyS3(DhoJ<H9vqS&`t!3X>lMKm($oV_{%Ewt@bQe=AH927U};
zMgdt5u;4#crd&uJDU*DXXXwO#`hh^;3qYQmx?C4$vVHXD`U);$g%alo0w$A*_aUtZ
zXk>3j*9(HvbrB!q4ae0S%{wx(1uy{z?4l;d=cyU*<M?GJWM0<=55~`DD!){mq_TE%
zO|GzYsG~n2|I2_H2Rj8RaUn|6E8E3bEmhY_T0SB1jT{jOorMr9j@flQrFJEEg4kZU
zBr$kq1A||No6`z!&p3O(DOp2ZG!L|+UyE>!!*ish^rK2r(&P!<Wo_+wYE^tDfpz^y
zO|YclMHUVb#<k8mDvVAaBSj=3CcJXLtcb7#yF2&&Ci&N!*CEo3y;J&EUpmx`btzJ#
zgO6OB?{|7|g{imo2GnnCseh|wmv5Q~=Gl07frW0nyDF8=X#|}|Yw5nLrR(7_xH6V}
z5OdLw%=?Cta)iDmd}4A5)?&5Jj2pJjX8ZYmQg<s`G22o5H<x4BZ_fM^-b1_YkRgr<
zM4~NExN{%;%W3W4ltc(5nbvai0q_PhV%3Gib8v@nDoB>gnoRJiN~3LU(M$AbXFS=m
z*-MgY5kkNgAVV=jeyhj-JC&>fIsLAUQ!8Z9ti(m{0pR}SYevE5&q>SLLFa*pjMO+q
zX3k|ZfM#(aEyL*=Ggu_9B<^i##99v|lv}2e+q<qgeUB>7LE(6CC_4KxdR`;FwULUj
zTjzA@PNA|Y;_ox2$92MUSfEL@61HzIX9M%9z$zsQp^%c6=doVFgV>>T3~%PF(Mr<A
zUed5hN9ai6Nnw<~czsDcwy~txMORm5K!#)K9fwf@70Nc4(q75o;|u+B8zZkEKtqo8
z^G$Tu4;MEFbrXYA)5Zrt%JtUA(W7EQdIbj+^Iqqq4$5;(rGl%iPpE$JDaT>e=Hyv=
zB307?hoIhje({W%?(^+blc5!%Jkh9lQAne95p~om`E!vNRRd&MYKWsV2Ga>-2n_1<
zGm5^!8ALJ>@N=-#a5^ke*;rbt_n%d@h^~^18(`YZWE4wIBPV$od+%@vH!7W@;<5<G
z4|oMTNz%F9p}|o<fMJycHo(>#g+QO*5IziCUS57RWtJm|P5{=bccfA2iFlNDm3BwJ
z7%nWn<9N{SyQYyQ39Ma6%KA-1St==o>+wprEzcKmpD>k3a9z|8VFYVf=K-fzOTg^q
zif~kAnX|;8S*7(Zn><*v^QJJ=y!fjuu+h1ncb`>neXmVOa6eW<@J--L*uvUx$}ng^
zxELc$Xeq~XJ6?1x{STIXZ4RkFa+mQJRGoSdKAt`Nl+i)!HiRNWJ~O6dYn#uD@@^;S
z(f-dK?f>ZiNB2MeY5ITm2ciGtei8vpMp<nSFuj}=R!C@FQvQF=l#ku=7k~iDK^A*?
ze+3L>@{PpEL52M~w0tF&vbb<FOMdzsJ44FxI&t>QPEElrA6=QuL~yc=sjRq_(PqW`
zW}X(?72&a5m(vxoCiSq#ae|?X91-675Ap=>U4_@Se$rE;!B2ABqznDkbH>LC1~U#P
zB$RtLxd|7)b8EzxU~LcS_O*s|7uc~Iak1tujomfGd{`jDC$?&TRop<cqHrBNzmwAL
zKHqPaN81wriFzd0H~fWseD=PeG*kGDVI!oc^WHvt@7kfieREK*Aa0;-?OV6Tt0zyk
z*9BOW$n{kKayc5(jL~FctY<x+0+igWEY1X+5<~bZe6hMqqa5PiPG{syR+Un$&9{zn
zMGU2DNBpo@xQK~^k>w>6CPXPZ)46r7mRYl1+Hu-*2ij|dgr9)lkKbm%=DdsMyA*qM
zWt7Pu02`2`mDj)E(s2I!ZCdyPKo>$74fid^Y9gc`Gz-xk&*+HK{`mR<K-oXW+4jh@
zQ4v|=#rGC&ov`W3Wju_QNO8aaJ}i`<=Qic<u&sXD6>B*5p!F{?EVD=i6o!Ger8l%J
zsvcIXyIh#11*ozbupbd@F_5q9FCQ+-Q7|uXWf_H#tNX$v^e}Pv>O2he1|_GSyxo*P
zw4wK2DO>K@e!=?scTftyz=dIzY+Y3AR!p>P>f4FF5Axyg9+o>82BZD&FxB97<m^I5
ztx&#Zr!~(T!wmJDqgz2xWwh_Jjg3ShSHX&4y<N))@kob+aAX4B>#rsD`G){<%aO^A
z>cOSq!5_sU6`2GJU<yCayEfX`?>!}X@eb<d=79=SYH8$eDDrQ`m0#tP)jwkan44ky
zXN26ua0V(TepmUqZDr~PW7W-reb^837^#a0a7~h<VBKa!M+iIsmT3F6qR%M}&LBYa
z;W%&NDWW7^lN=K-;=W($;y6*!Z>Iy+{d$%rMsxY%<sGiOT0=2I^ZBn}GOf#(Os*^r
zIKgi$4=wheB@fegalT&aoA;DXbiw%?!HDARH6PxiTdFn-Q2ji9nL<>`)On{azhwdA
zI&%BFm7<6ya)zSa*&y~M$HAfNjOC9=dY36|1@YZya(jUjImq%i0_0_*b=C8YHL~%8
z;t@^7A+`6@>B4FIO{<?N@+d|h9G0hbal8YMdYJAaVyexJ)tDHnI2_1B9;>^=LgarO
NvOP|&09Jii_#cBOpN9Yd

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/wechat.png b/src/assets/imgs/wechat.png
new file mode 100644
index 0000000000000000000000000000000000000000..6afc5e41cfc29d258e0c6135981a7a09b7bcf126
GIT binary patch
literal 1881
zcmV-f2d4OmP)<h;3K|Lk000e1NJLTq0021v001%w1^@s6=HGKh00001b5ch_0Itp)
z=>Px+6G=otRA@uxT5F6HRTlovt)4-Yt`>DxqM{h1piEaoG!it+;>Ku9<e|d&%*J&M
zBTQEV$!2|FcJPt7Mv>`iG12%)6qSb>G)jC#QP~(>XJx8!Ncf>R3nRXU>6!tR>8fLH
z&-BPlcUM(+R|8q^kNH#I`M&erd#dK%bDQux7!;JpamncoOxXzv({Uli+0)aoy&Fxi
zgW|7-ry`T%jK<l5l?5Q4!N3FpCIAQ(Nn|e=dzh#la5kg9ersQI`w!J5TuH2NlVM}p
z#e$r9%$Nt@oJz!oV%`O?RoP#+dfy%GnJRdEhkBYEyDD~SeaN|&iEi=D>JPYsh*xLg
z=_mZbD@VDSjI=d2u_EpTV{+vZ?vV_<2cWG_H(#rjMoE)uN^1inQ7hpBUdB=@VJ2&#
zSJb3xM4tobrdkMkaJE{yxiV<o0+XttJr3ZupoPld3*6`klMy5KF9!dkjD%_eWyY+&
zg!xfW<ijSzDeYEbJn2EaPktzfun{(<KwtrYsXmk04Cb{Y=yYbx0Wi}ojubvCvn2hc
zPi|M(ut_x)`!|>`Dvjn&heT6<yyJ^JCY+4kOhnIkB|_k)jGo?*$3=|B3mD=*9^c)!
zt&{CJXzD!Z#qaezXHrdR*Mae(>&y}!$;8dSkH)Ae?JF=Qm5e2{TXFM(B5|Eyoa>Qb
zi=~@uyi9mKA2ex1-va0|S1@Cjl`zjd6m$He(<V6~XD5I<w^%{Sq~7@FUmuE54edJs
z4XzUlel??~ul6$G^_(Kf=%q~bju%iqXTr_OfY{W#d|NM8%^a)N_1^~2Dz8`qJ##RG
zdwyEnu}5NadtZq6z2d;=%i05z4=msDjVIOxK&qiF0q|IvB-;R-0^kqj#4*7n#z{l5
zr9y26z9C>YfOA2lTk($P%F!8(B{iu%3c|8#NUDitV7DNwa~y0EA>Nbu?!+#%Zpl`|
zS!mMGWT{>nB&i=RX1p&z>&T{cvi!#-r=KUtUPy$~m@yH+X#h_IhzaOoa2J@m2-Ja)
zvp%yVz0Z%1#K>~p3*cnG0Ri9!K=e0Rf?*>%ML^7F@KpdVER*{sfL|vCo4pKE#L#v#
zaB7(X6~X03!V%dU_cx$N-CK7Lh*wlZbZ8J^7c=hf)6J(!aZw}{eTA9iOxAj=v~;sI
zoQhpZoHI8gV8L}x2>16dHn$hNlaZu$7ZV-`Sa1{_zisL1%hhCb1&HpenHHmm34a}Z
zHl?tk%_U${&4huEE#16GO=<}c+G?mXNX_VT$eG)(Z{L#FlJDf13<R<fE+`XVJ3HcP
zCi`MPd)xpg;D1DzpNX6Q&3#?vpRl2AB;c9=Me<b3$l<Ll=(8GdyHhgSt;FD-dC+81
z`y&xP3^<W){-rL4G1&(QyvU841TUh4$_6`R%kAD$2G1^qXV4RUdPlQrM6V#w?F{^>
z<X2VjqD)Kr$={AzNo@@Xi-R&spoic%>wT=^8cR1@^18<x(`GwxO6_aEuynK0Csw|n
zxz+sb(7alkObR{*Fg^&QitWU*iqhh>ig2*fT57iXNu0r3`t<ZAez3zI9pdH@?GLq0
zYlXl+12FlurJIu?NiEHU;h8VV%Y2itl{fs9D?kZL?=bw7Yfg`7ZDAuT6>R}is!F3D
zS-LqZVrT~#7+WP*wc$I8wj?7)>{<rP<BjWK*hT#X#m?SoE1?kw<!ZC7G`?hWIbvvk
zW<VO1=f<)IgCAt@TfPp)WieL<cD*JTzq(Pg712=v^@}1a?s7uTR~5tt9^z_JzT5!4
zS%K<K>&FwOswejRRN_jn0?G<Q7(ck03@5b>M7iE-*~8LJ*>%_n!r5g92N}TF>amg<
z7w8c^%fQRTd_F)^0ge^BuM9CJW(o4j;mRO$E|-g#7nL+QE)|_6m_8UH&4TE8F+eMO
zmv7ruN+{Q&tVcr#*}XmAJKu&+2whHunqA3x8Xmpl866NYqE9nuF2FB{tg_0@oST?x
zXs;is)g<C(dCBW?KN-7E4A4`Rn#&sxC$%|8WHlL&TM1LPTL(`eqsOtv^ivM#pLctf
zgHJ#>8GVq5Zubcf0@iKm=5XK2^EU%QC`yjQdGD#%*)#Sn>+H(se%MS78C?tDhM*>{
z2+z+#h?%`D+hm7-cpO%fIisoQ3NXoT-I##Qerk*Cy!|bmvX4As9Cnj~MztAWNTY%M
z50#sbQj>N>Oy-kOliFX1_$mg?uX<Gp*IRM(rD8ls)MP#(`MW%M55nMu1RA;rDO%2-
z0Q@N!p8#UYhz>ksla(-wPS#Ojve@iP<BG5+!e$ycroQ_?b9=!ZW%%LqPogmcvh0^i
zj#4Fi)S4`(e8;b8)NDt&+kx{~e>`2#b^O0DIsA?r(JL%Hz4@s4x|Xv_L12Fc30Q=P
TM8y=K00000NkvXXu0mjf4<3N5

literal 0
HcmV?d00001

diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
new file mode 100644
index 00000000..26b747e2
--- /dev/null
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -0,0 +1,302 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除 avue 组件，使用 ElementUI 原生组件
+-->
+<template>
+  <!-- 类型：图片 -->
+  <div v-if="objData.type === 'image'">
+    <div class="waterfall" v-loading="loading">
+      <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+        <img class="material-img" :src="item.url" />
+        <p class="item-name">{{ item.name }}</p>
+        <el-row class="ope-row">
+          <el-button type="success" @click="selectMaterialFun(item)"
+            >选择
+            <i class="el-icon-circle-check el-icon--right"></i>
+          </el-button>
+        </el-row>
+      </div>
+    </div>
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getMaterialPageFun"
+    />
+  </div>
+  <!-- 类型：语音 -->
+  <div v-else-if="objData.type === 'voice'">
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="mediaId" />
+      <el-table-column label="文件名" align="center" prop="name" />
+      <el-table-column label="语音" align="center">
+        <template #default="scope">
+          <wx-voice-player :url="scope.row.url" />
+        </template>
+      </el-table-column>
+      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        fixed="right"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
+            >选择
+          </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="getPage"
+    />
+  </div>
+  <div v-else-if="objData.type === 'video'">
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="mediaId" />
+      <el-table-column label="文件名" align="center" prop="name" />
+      <el-table-column label="标题" align="center" prop="title" />
+      <el-table-column label="介绍" align="center" prop="introduction" />
+      <el-table-column label="视频" align="center">
+        <template #default="scope">
+          <wx-video-player :url="scope.row.url" />
+        </template>
+      </el-table-column>
+      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        fixed="right"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
+            >选择
+          </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="getMaterialPageFun"
+    />
+  </div>
+  <div v-else-if="objData.type === 'news'">
+    <div class="waterfall" v-loading="loading">
+      <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+        <div v-if="item.content && item.content.newsItem">
+          <wx-news :articles="item.content.newsItem" />
+          <el-row class="ope-row">
+            <el-button type="success" @click="selectMaterialFun(item)">
+              选择<i class="el-icon-circle-check el-icon--right"></i>
+            </el-button>
+          </el-row>
+        </div>
+      </div>
+    </div>
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getMaterialPageFun"
+    />
+  </div>
+</template>
+
+<script lang="ts" name="WxMaterialSelect">
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+import { getMaterialPage } from '@/api/mp/material'
+import { getFreePublishPage } from '@/api/mp/freePublish'
+import { getDraftPage } from '@/api/mp/draft'
+import { dateFormatter, parseTime } from '@/utils/formatTime'
+import { defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+  components: {
+    WxNews,
+    WxVoicePlayer,
+    WxVideoPlayer
+  },
+  props: {
+    objData: {
+      type: Object, // type - 类型；accountId - 公众号账号编号
+      required: true
+    },
+    newsType: {
+      // 图文类型：1、已发布图文；2、草稿箱图文
+      type: String as PropType<string>,
+      default: '1'
+    }
+  },
+  setup(props, ctx) {
+    // 遮罩层
+    const loading = ref(false)
+    // 总条数
+    const total = ref(0)
+    // 数据列表
+    const list = ref([])
+    // 查询参数
+    const queryParams = reactive({
+      pageNo: 1,
+      pageSize: 10,
+      accountId: props.objData.accountId
+    })
+    const objDataRef = reactive(props.objData)
+    const newsTypeRef = ref(props.newsType)
+
+    const selectMaterialFun = (item) => {
+      ctx.emit('selectMaterial', item)
+    }
+    /** 搜索按钮操作 */
+    const handleQuery = () => {
+      queryParams.pageNo = 1
+      getPage()
+    }
+    const getPage = () => {
+      loading.value = true
+      if (objDataRef.type === 'news' && newsTypeRef.value === '1') {
+        // 【图文】+ 【已发布】
+        getFreePublishPageFun()
+      } else if (objDataRef.type === 'news' && newsTypeRef.value === '2') {
+        // 【图文】+ 【草稿】
+        getDraftPageFun()
+      } else {
+        // 【素材】
+        getMaterialPageFun()
+      }
+    }
+
+    const getMaterialPageFun = async () => {
+      let data = await getMaterialPage({
+        ...queryParams,
+        type: objDataRef.type
+      })
+      list.value = data.list
+      total.value = data.total
+      loading.value = false
+    }
+    const getFreePublishPageFun = async () => {
+      let data = await getFreePublishPage(queryParams)
+      data.list.foreach((item) => {
+        const newsItem = item.content.newsItem
+        newsItem.forEach((article) => {
+          article.picUrl = article.thumbUrl
+        })
+      })
+      list.value = data.list
+      total.value = data.total
+      loading.value = false
+    }
+
+    const getDraftPageFun = async () => {
+      let data = await getDraftPage(queryParams)
+      data.list.forEach((item) => {
+        const newsItem = item.content.newsItem
+        newsItem.forEach((article) => {
+          article.picUrl = article.thumbUrl
+        })
+      })
+      list.value = data.list
+      total.value = data.total
+      loading.value = false
+    }
+
+    onMounted(async () => {
+      getPage()
+    })
+    return {
+      handleQuery,
+      dateFormatter,
+      selectMaterialFun,
+      getMaterialPageFun,
+      getPage,
+      parseTime,
+      newsTypeRef,
+      queryParams,
+      objDataRef,
+      list,
+      total,
+      loading
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+/*瀑布流样式*/
+.waterfall {
+  width: 100%;
+  column-gap: 10px;
+  column-count: 5;
+  margin: 0 auto;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  break-inside: avoid;
+  border: 1px solid #eaeaea;
+}
+
+.material-img {
+  width: 100%;
+}
+
+p {
+  line-height: 30px;
+}
+
+@media (min-width: 992px) and (max-width: 1300px) {
+  .waterfall {
+    column-count: 3;
+  }
+  p {
+    color: red;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .waterfall {
+    column-count: 2;
+  }
+  p {
+    color: orange;
+  }
+}
+
+@media (max-width: 767px) {
+  .waterfall {
+    column-count: 1;
+  }
+}
+
+/*瀑布流样式*/
+</style>
diff --git a/src/views/mp/components/wx-msg/main.vue b/src/views/mp/components/wx-msg/main.vue
index b514a73e..215b4f97 100644
--- a/src/views/mp/components/wx-msg/main.vue
+++ b/src/views/mp/components/wx-msg/main.vue
@@ -6,7 +6,7 @@
   ② 代码优化，补充注释，提升阅读性
 -->
 <template>
-  <div class="msg-main">
+  <ContentWrap>
     <div class="msg-div" :id="'msg-div' + nowStr">
       <!-- 加载更多 -->
       <div v-loading="loading"></div>
@@ -26,9 +26,9 @@
               :src="item.sendFrom === 1 ? user.avatar : mp.avatar"
               class="avue-comment__avatar"
             />
-            <div class="avue-comment__author">{{
-              item.sendFrom === 1 ? user.nickname : mp.nickname
-            }}</div>
+            <div class="avue-comment__author"
+              >{{ item.sendFrom === 1 ? user.nickname : mp.nickname }}
+            </div>
           </div>
           <div class="avue-comment__main">
             <div class="avue-comment__header">
@@ -40,37 +40,41 @@
             >
               <!-- 【事件】区域 -->
               <div v-if="item.type === 'event' && item.event === 'subscribe'">
-                <el-tag type="success" size="mini">关注</el-tag>
+                <el-tag type="success">关注</el-tag>
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'unsubscribe'">
-                <el-tag type="danger" size="mini">取消关注</el-tag>
+                <el-tag type="danger">取消关注</el-tag>
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'CLICK'">
-                <el-tag size="mini">点击菜单</el-tag>【{{ item.eventKey }}】
+                <el-tag>点击菜单</el-tag>
+                【{{ item.eventKey }}】
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'VIEW'">
-                <el-tag size="mini">点击菜单链接</el-tag>【{{ item.eventKey }}】
+                <el-tag>点击菜单链接</el-tag>
+                【{{ item.eventKey }}】
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'scancode_waitmsg'">
-                <el-tag size="mini">扫码结果</el-tag>【{{ item.eventKey }}】
+                <el-tag>扫码结果</el-tag>
+                【{{ item.eventKey }}】
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'scancode_push'">
-                <el-tag size="mini">扫码结果</el-tag>【{{ item.eventKey }}】
+                <el-tag>扫码结果</el-tag>
+                【{{ item.eventKey }}】
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'pic_sysphoto'">
-                <el-tag size="mini">系统拍照发图</el-tag>
+                <el-tag>系统拍照发图</el-tag>
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'pic_photo_or_album'">
-                <el-tag size="mini">拍照或者相册</el-tag>
+                <el-tag>拍照或者相册</el-tag>
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'pic_weixin'">
-                <el-tag size="mini">微信相册</el-tag>
+                <el-tag>微信相册</el-tag>
               </div>
               <div v-else-if="item.type === 'event' && item.event === 'location_select'">
-                <el-tag size="mini">选择地理位置</el-tag>
+                <el-tag>选择地理位置</el-tag>
               </div>
               <div v-else-if="item.type === 'event'">
-                <el-tag type="danger" size="mini">未知事件类型</el-tag>
+                <el-tag type="danger">未知事件类型</el-tag>
               </div>
               <!-- 【消息】区域 -->
               <div v-else-if="item.type === 'text'">{{ item.content }}</div>
@@ -124,10 +128,10 @@
       <wx-reply-select ref="replySelect" :objData="objData" />
       <el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>
     </div>
-  </div>
+  </ContentWrap>
 </template>
 
-<script>
+<script lang="ts" name="WxMsg">
 import { getMessagePage, sendMessage } from '@/api/mp/message'
 import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
@@ -136,9 +140,14 @@ import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxLocation from '@/views/mp/components/wx-location/main.vue'
 import WxMusic from '@/views/mp/components/wx-music/main.vue'
 import { getUser } from '@/api/mp/mpuser'
+import { defineComponent } from 'vue'
 
-export default {
-  name: 'WxMsg',
+const message = useMessage() // 消息弹窗
+import profile from '@/assets/imgs/profile.jpg'
+import wechat from '@/assets/imgs/wechat.png'
+import { parseTime } from '@/utils/formatTime'
+
+export default defineComponent({
   components: {
     WxReplySelect,
     WxVideoPlayer,
@@ -153,160 +162,144 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      nowStr: new Date().getTime(), // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
-      loading: false, // 消息列表是否正在加载中
-      loadMore: true, // 是否可以加载更多
-      list: [], // 消息列表
-      queryParams: {
-        pageNo: 1, // 当前页数
-        pageSize: 14, // 每页显示多少条
-        accountId: undefined
-      },
-      user: {
-        // 由于微信不再提供昵称，直接使用“用户”展示
-        nickname: '用户',
-        avatar: require('@/assets/images/profile.jpg'),
-        accountId: 0 // 公众号账号编号
-      },
-      mp: {
-        nickname: '公众号',
-        avatar: require('@/assets/images/wechat.png')
-      },
-
-      // ========= 消息发送 =========
-      sendLoading: false, // 发送消息是否加载中
-      objData: {
-        // 微信发送消息
-        type: 'text'
-      }
-    }
-  },
-  created() {
-    // 获得用户信息
-    getUser(this.userId).then((response) => {
-      this.user.nickname =
-        response.data.nickname && response.data.nickname.length > 0
-          ? response.data.nickname
-          : this.user.nickname
-      this.user.avatar =
-        response.data.avatar && this.user.avatar.length > 0
-          ? response.data.avatar
-          : this.user.avatar
-      this.user.accountId = response.data.accountId
-      // 设置公众号账号编号
-      this.queryParams.accountId = response.data.accountId
-      this.objData.accountId = response.data.accountId
-
-      // 加载消息
-      console.log(this.queryParams)
-      this.refreshChange()
+  setup(props) {
+    const nowStr = ref(new Date().getTime()) // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
+    const loading = ref(false) // 消息列表是否正在加载中
+    const loadMore = ref(true) // 是否可以加载更多
+    const list = ref<any[]>([]) // 消息列表
+    const queryParams = reactive({
+      pageNo: 1, // 当前页数
+      pageSize: 14, // 每页显示多少条
+      accountId: undefined
     })
-  },
-  methods: {
-    sendMsg() {
-      if (!this.objData) {
+    const user = reactive({
+      // 由于微信不再提供昵称，直接使用“用户”展示
+      nickname: '用户',
+      avatar: profile,
+      accountId: 0 // 公众号账号编号
+    })
+    const mp = reactive({
+      nickname: '公众号',
+      avatar: wechat
+    })
+
+    // ========= 消息发送 =========
+    const sendLoading = ref(false) // 发送消息是否加载中
+    const objData = reactive({
+      // 微信发送消息
+      type: 'text',
+      accountId: null,
+      articles: []
+    })
+
+    const replySelect = ref(null)
+    // 执行发送
+    const sendMsg = async () => {
+      if (!objData) {
         return
       }
-      // 公众号限制：客服消息，公众号只允许发送一条
-      if (this.objData.type === 'news' && this.objData.articles.length > 1) {
-        this.objData.articles = [this.objData.articles[0]]
-        this.$message({
-          showClose: true,
-          message: '图文消息条数限制在 1 条以内，已默认发送第一条',
-          type: 'success'
-        })
+      //     // 公众号限制：客服消息，公众号只允许发送一条
+      if (objData.type === 'news' && objData.articles.length > 1) {
+        objData.articles = [objData.articles[0]]
+        message.success('图文消息条数限制在 1 条以内，已默认发送第一条')
       }
-
-      // 执行发送
-      this.sendLoading = true
-      sendMessage(
-        Object.assign(
-          {
-            userId: this.userId
-          },
-          {
-            ...this.objData
-          }
-        )
-      )
-        .then((response) => {
-          this.sendLoading = false
-          // 添加到消息列表，并滚动
-          this.list = [...this.list, ...[response.data]]
-          this.scrollToBottom()
-          // 重置 objData 状态
-          this.$refs['replySelect'].deleteObj() // 重置，避免 tab 的数据未清理
-        })
-        .catch(() => {
-          this.sendLoading = false
-        })
-    },
-    loadingMore() {
-      this.queryParams.pageNo++
-      this.getPage(this.queryParams)
-    },
-    getPage(page, params) {
-      this.loading = true
-      getMessagePage(
+      let data = await sendMessage(Object.assign({ userId: props.userId }, { ...objData }))
+      sendLoading.value = false
+      list.value = [...list.value, ...[data]]
+      scrollToBottom()
+      //ts檢查的時候會判斷這個組件可能是空的，所以需要進行斷言。
+      //避免 tab 的数据未清理
+      const deleteObj = (replySelect.value as any).deleteObj
+      if (deleteObj) {
+        deleteObj()
+      }
+    }
+    const loadingMore = () => {
+      queryParams.pageNo++
+      getPage(queryParams, null)
+    }
+    const getPage = async (page, params) => {
+      loading.value = true
+      let dataTemp = await getMessagePage(
         Object.assign(
           {
             pageNo: page.pageNo,
             pageSize: page.pageSize,
-            userId: this.userId,
+            userId: props.userId,
             accountId: page.accountId
           },
           params
         )
-      ).then((response) => {
-        // 计算当前的滚动高度
-        const msgDiv = document.getElementById('msg-div' + this.nowStr)
-        let scrollHeight = 0
-        if (msgDiv) {
-          scrollHeight = msgDiv.scrollHeight
-        }
-
-        // 处理数据
-        const data = response.data.list.reverse()
-        this.list = [...data, ...this.list]
-        this.loading = false
-        if (data.length < this.queryParams.pageSize || data.length === 0) {
-          this.loadMore = false
-        }
-        this.queryParams.pageNo = page.pageNo
-        this.queryParams.pageSize = page.pageSize
-
-        // 滚动到原来的位置
-        if (this.queryParams.pageNo === 1) {
-          // 定位到消息底部
-          this.scrollToBottom()
-        } else if (data.length !== 0) {
-          // 定位滚动条
-          this.$nextTick(() => {
-            if (scrollHeight !== 0) {
-              msgDiv.scrollTop =
-                document.getElementById('msg-div' + this.nowStr).scrollHeight - scrollHeight - 100
+      )
+      const msgDiv = document.getElementById('msg-div' + nowStr.value)
+      let scrollHeight = 0
+      if (msgDiv) {
+        scrollHeight = msgDiv.scrollHeight
+      }
+      // 处理数据
+      let data = dataTemp.list.reverse()
+      list.value = [...data, ...list.value]
+      loading.value = false
+      if (data.length < queryParams.pageSize || data.length === 0) {
+        loadMore.value = false
+      }
+      queryParams.pageNo = page.pageNo
+      queryParams.pageSize = page.pageSize
+      // 滚动到原来的位置
+      if (queryParams.pageNo === 1) {
+        // 定位到消息底部
+        scrollToBottom()
+      } else if (data.length !== 0) {
+        // 定位滚动条
+        await nextTick(() => {
+          if (scrollHeight !== 0) {
+            let div = document.getElementById('msg-div' + nowStr.value)
+            if (div && msgDiv) {
+              msgDiv.scrollTop = div.scrollHeight - scrollHeight - 100
             }
-          })
-        }
-      })
-    },
-    /**
-     * 刷新回调
-     */
-    refreshChange() {
-      this.getPage(this.queryParams)
-    },
+          }
+        })
+      }
+    }
+    const refreshChange = () => {
+      getPage(queryParams, null)
+    }
     /** 定位到消息底部 */
-    scrollToBottom: function () {
-      this.$nextTick(() => {
-        let div = document.getElementById('msg-div' + this.nowStr)
-        div.scrollTop = div.scrollHeight
+    const scrollToBottom = () => {
+      nextTick(() => {
+        let div = document.getElementById('msg-div' + nowStr.value)
+        if (div) {
+          div.scrollTop = div.scrollHeight
+        }
       })
     }
+
+    onMounted(async () => {
+      let data = await getUser(props.userId)
+      user.nickname = data.nickname && data.nickname.length > 0 ? data.nickname : user.nickname
+      user.avatar = data.avatar && user.avatar.length > 0 ? data.avatar : user.avatar
+      user.accountId = data.accountId
+      queryParams.accountId = data.accountId
+      objData.accountId = data.accountId
+      refreshChange()
+    })
+    return {
+      sendMsg,
+      loadingMore,
+      parseTime,
+      scrollToBottom,
+      objData,
+      mp,
+      user,
+      queryParams,
+      list,
+      loadMore,
+      loading,
+      nowStr,
+      sendLoading
+    }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
@@ -317,6 +310,7 @@ export default {
   margin-top: -30px;
   padding: 10px;
 }
+
 .msg-div {
   height: 50vh;
   overflow: auto;
@@ -324,13 +318,16 @@ export default {
   margin-left: 10px;
   margin-right: 10px;
 }
+
 .msg-send {
   padding: 10px;
 }
+
 .avatar-div {
   text-align: center;
   width: 80px;
 }
+
 .send-but {
   float: right;
   margin-top: 8px !important;
diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
index a151b252..a31e9462 100644
--- a/src/views/mp/components/wx-reply/main.vue
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -8,100 +8,165 @@
   ④ 支持发送【视频】消息时，支持新建视频
 -->
 <template>
-  <el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">
+  <el-tabs type="border-card" v-model="objDataRef.type" @tab-click="handleClick">
     <!-- 类型 1：文本 -->
     <el-tab-pane name="text">
-      <span slot="label"><i class="el-icon-document"></i> 文本</span>
+      <template #label>
+        <el-row align="middle">
+          <icon icon="ep:document" />
+          文本
+        </el-row>
+      </template>
       <el-input
         type="textarea"
         :rows="5"
         placeholder="请输入内容"
-        v-model="objData.content"
+        v-model="objDataRef.content"
         @input="inputContent"
       />
     </el-tab-pane>
     <!-- 类型 2：图片 -->
     <el-tab-pane name="image">
-      <span slot="label"><i class="el-icon-picture"></i> 图片</span>
-      <el-row>
-        <!-- 情况一：已经选择好素材、或者上传好图片 -->
-        <div class="select-item" v-if="objData.url">
-          <img class="material-img" :src="objData.url" />
-          <p class="item-name" v-if="objData.name">{{ objData.name }}</p>
-          <el-row class="ope-row">
-            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
-          </el-row>
-        </div>
-        <!-- 情况二：未做完上述操作 -->
-        <div v-else>
-          <el-row style="text-align: center">
-            <!-- 选择素材 -->
-            <el-col :span="12" class="col-select">
-              <el-button type="success" @click="openMaterial">
-                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
-              </el-button>
-              <el-dialog
-                title="选择图片"
-                v-model:visible="dialogImageVisible"
-                width="90%"
-                append-to-body
-              >
-                <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />
-              </el-dialog>
-            </el-col>
-            <!-- 文件上传 -->
-            <el-col :span="12" class="col-add">
-              <el-upload
-                :action="actionUrl"
-                :headers="headers"
-                multiple
-                :limit="1"
-                :file-list="fileList"
-                :data="uploadData"
-                :before-upload="beforeImageUpload"
-                :on-success="handleUploadSuccess"
-              >
-                <el-button type="primary">上传图片</el-button>
-                <div slot="tip" class="el-upload__tip"
+      <template #label>
+        <el-row align="middle">
+          <icon icon="ep:picture" class="mr-5px" />
+          图片
+        </el-row>
+      </template>
+      <!-- 情况一：已经选择好素材、或者上传好图片 -->
+      <div class="select-item" v-if="objDataRef.url">
+        <img class="material-img" :src="objDataRef.url" />
+        <p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
+        <el-row class="ope-row">
+          <el-button type="danger" circle @click="deleteObj">
+            <icon icon="ep:delete" />
+          </el-button>
+        </el-row>
+      </div>
+      <!-- 情况二：未做完上述操作 -->
+      <el-row v-else style="text-align: center" align="middle">
+        <!-- 选择素材 -->
+        <el-col :span="12" class="col-select">
+          <el-button type="success" @click="openMaterial">
+            素材库选择
+            <icon icon="ep:circle-check" />
+          </el-button>
+          <el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
+            <wx-material-select :obj-data="objDataRef" @selectMaterial="selectMaterial" />
+          </el-dialog>
+        </el-col>
+        <!-- 文件上传 -->
+        <el-col :span="12" class="col-add">
+          <el-upload
+            :action="actionUrl"
+            :headers="headers"
+            multiple
+            :limit="1"
+            :file-list="fileList"
+            :data="uploadData"
+            :before-upload="beforeImageUpload"
+            :on-success="handleUploadSuccess"
+          >
+            <el-button type="primary">上传图片</el-button>
+            <template #tip>
+              <span>
+                <div class="el-upload__tip"
                   >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div
-                >
-              </el-upload>
-            </el-col>
-          </el-row>
-        </div>
+                ></span
+              >
+            </template>
+          </el-upload>
+        </el-col>
       </el-row>
     </el-tab-pane>
     <!-- 类型 3：语音 -->
     <el-tab-pane name="voice">
-      <span slot="label"><i class="el-icon-phone"></i> 语音</span>
-      <el-row>
-        <div class="select-item2" v-if="objData.url">
-          <p class="item-name">{{ objData.name }}</p>
-          <div class="item-infos">
-            <wx-voice-player :url="objData.url" />
-          </div>
-          <el-row class="ope-row">
-            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
-          </el-row>
+      <template #label>
+        <el-row align="middle">
+          <icon icon="ep:phone" />
+          语音
+        </el-row>
+      </template>
+
+      <div class="select-item2" v-if="objDataRef.url">
+        <p class="item-name">{{ objDataRef.name }}</p>
+        <div class="item-infos">
+          <wx-voice-player :url="objDataRef.url" />
         </div>
-        <div v-else>
-          <el-row style="text-align: center">
+        <el-row class="ope-row">
+          <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
+        </el-row>
+      </div>
+      <el-row v-else style="text-align: center">
+        <!-- 选择素材 -->
+        <el-col :span="12" class="col-select">
+          <el-button type="success" @click="openMaterial">
+            素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+          </el-button>
+          <el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
+            <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
+          </el-dialog>
+        </el-col>
+        <!-- 文件上传 -->
+        <el-col :span="12" class="col-add">
+          <el-upload
+            :action="actionUrl"
+            :headers="headers"
+            multiple
+            :limit="1"
+            :file-list="fileList"
+            :data="uploadData"
+            :before-upload="beforeVoiceUpload"
+            :on-success="handleUploadSuccess"
+          >
+            <el-button type="primary">点击上传</el-button>
+            <template #tip>
+              <div class="el-upload__tip"
+                >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+              </div>
+            </template>
+          </el-upload>
+        </el-col>
+      </el-row>
+    </el-tab-pane>
+    <!-- 类型 4：视频 -->
+    <el-tab-pane name="video">
+      <template #label>
+        <el-row align="middle">
+          <icon icon="ep:share" />
+          视频
+        </el-row>
+      </template>
+      <el-row>
+        <el-input
+          v-model="objDataRef.title"
+          class="input-margin-bottom"
+          placeholder="请输入标题"
+          @input="inputContent"
+        />
+        <el-input
+          class="input-margin-bottom"
+          v-model="objDataRef.description"
+          placeholder="请输入描述"
+          @input="inputContent"
+        />
+        <div style="text-align: center">
+          <wx-video-player v-if="objDataRef.url" :url="objDataRef.url" />
+        </div>
+        <el-col>
+          <el-row style="text-align: center" align="middle">
             <!-- 选择素材 -->
-            <el-col :span="12" class="col-select">
+            <el-col :span="12">
               <el-button type="success" @click="openMaterial">
-                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+                素材库选择
+                <icon icon="ep:circle-check" />
               </el-button>
-              <el-dialog
-                title="选择语音"
-                v-model:visible="dialogVoiceVisible"
-                width="90%"
-                append-to-body
-              >
-                <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
+              <el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
+                <wx-material-select :objData="objDataRef" @selectMaterial="selectMaterial" />
               </el-dialog>
             </el-col>
             <!-- 文件上传 -->
-            <el-col :span="12" class="col-add">
+            <el-col :span="12">
               <el-upload
                 :action="actionUrl"
                 :headers="headers"
@@ -109,90 +174,50 @@
                 :limit="1"
                 :file-list="fileList"
                 :data="uploadData"
-                :before-upload="beforeVoiceUpload"
+                :before-upload="beforeVideoUpload"
                 :on-success="handleUploadSuccess"
               >
-                <el-button type="primary">点击上传</el-button>
-                <div slot="tip" class="el-upload__tip"
-                  >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s</div
-                >
+                <el-button type="primary"
+                  >新建视频
+                  <icon icon="ep:upload" />
+                </el-button>
               </el-upload>
             </el-col>
           </el-row>
-        </div>
-      </el-row>
-    </el-tab-pane>
-    <!-- 类型 4：视频 -->
-    <el-tab-pane name="video">
-      <span slot="label"><i class="el-icon-share"></i> 视频</span>
-      <el-row>
-        <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
-        <div style="margin: 20px 0"></div>
-        <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
-        <div style="margin: 20px 0"></div>
-        <div style="text-align: center">
-          <wx-video-player v-if="objData.url" :url="objData.url" />
-        </div>
-        <div style="margin: 20px 0"></div>
-        <el-row style="text-align: center">
-          <!-- 选择素材 -->
-          <el-col :span="12">
-            <el-button type="success" @click="openMaterial">
-              素材库选择<i class="el-icon-circle-check el-icon--right"></i>
-            </el-button>
-            <el-dialog
-              title="选择视频"
-              v-model:visible="dialogVideoVisible"
-              width="90%"
-              append-to-body
-            >
-              <wx-material-select :objData="objData" @selectMaterial="selectMaterial" />
-            </el-dialog>
-          </el-col>
-          <!-- 文件上传 -->
-          <el-col :span="12">
-            <el-upload
-              :action="actionUrl"
-              :headers="headers"
-              multiple
-              :limit="1"
-              :file-list="fileList"
-              :data="uploadData"
-              :before-upload="beforeVideoUpload"
-              :on-success="handleUploadSuccess"
-            >
-              <el-button type="primary"
-                >新建视频<i class="el-icon-upload el-icon--right"></i
-              ></el-button>
-            </el-upload>
-          </el-col>
-        </el-row>
+        </el-col>
       </el-row>
     </el-tab-pane>
     <!-- 类型 5：图文 -->
     <el-tab-pane name="news">
-      <span slot="label"><i class="el-icon-news"></i> 图文</span>
+      <template #label>
+        <el-row align="middle">
+          <icon icon="ep:reading" />
+          图文
+        </el-row>
+      </template>
       <el-row>
-        <div class="select-item" v-if="objData.articles">
-          <wx-news :articles="objData.articles" />
-          <el-row class="ope-row">
-            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
-          </el-row>
+        <div class="select-item" v-if="objDataRef.articles.size > 0">
+          <wx-news :articles="objDataRef.articles" />
+          <el-col class="ope-row">
+            <el-button type="danger" circle @click="deleteObj">
+              <icon icon="ep:delete" />
+            </el-button>
+          </el-col>
         </div>
         <!-- 选择素材 -->
-        <div v-if="!objData.content">
-          <el-row style="text-align: center">
+        <el-col :span="24" v-if="!objDataRef.content">
+          <el-row style="text-align: center" align="middle">
             <el-col :span="24">
               <el-button type="success" @click="openMaterial"
-                >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文'
-                }}<i class="el-icon-circle-check el-icon--right"></i
-              ></el-button>
+                >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文' }}
+                <icon icon="ep:circle-check" />
+              </el-button>
             </el-col>
           </el-row>
-        </div>
-        <el-dialog title="选择图文" v-model:visible="dialogNewsVisible" width="90%" append-to-body>
+        </el-col>
+        <el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
           <wx-material-select
-            :objData="objData"
+            :objData="objDataRef"
             @selectMaterial="selectMaterial"
             :newsType="newsType"
           />
@@ -201,53 +226,69 @@
     </el-tab-pane>
     <!-- 类型 6：音乐 -->
     <el-tab-pane name="music">
-      <span slot="label"><i class="el-icon-service"></i> 音乐</span>
-      <el-row>
+      <template #label>
+        <el-row align="middle">
+          <icon icon="ep:service" />
+          音乐
+        </el-row>
+      </template>
+      <el-row align="middle" justify="center">
         <el-col :span="6">
-          <div class="thumb-div">
-            <img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            <div class="thumb-but">
-              <el-upload
-                :action="actionUrl"
-                :headers="headers"
-                multiple
-                :limit="1"
-                :file-list="fileList"
-                :data="uploadData"
-                :before-upload="beforeThumbImageUpload"
-                :on-success="handleUploadSuccess"
-              >
-                <el-button slot="trigger" size="mini" type="text">本地上传</el-button>
-                <el-button size="mini" type="text" @click="openMaterial" style="margin-left: 5px"
-                  >素材库选择</el-button
-                >
-              </el-upload>
-            </div>
-          </div>
-          <el-dialog
-            title="选择图片"
-            v-model:visible="dialogThumbVisible"
-            width="80%"
-            append-to-body
-          >
+          <el-row align="middle" justify="center" class="thumb-div">
+            <el-col :span="24">
+              <el-row align="middle" justify="center">
+                <img
+                  style="width: 100px"
+                  v-if="objDataRef.thumbMediaUrl"
+                  :src="objDataRef.thumbMediaUrl"
+                />
+                <icon v-else icon="ep:plus" />
+              </el-row>
+              <el-row align="middle" justify="center" style="margin-top: 2%">
+                <div class="thumb-but">
+                  <el-upload
+                    :action="actionUrl"
+                    :headers="headers"
+                    multiple
+                    :limit="1"
+                    :file-list="fileList"
+                    :data="uploadData"
+                    :before-upload="beforeThumbImageUpload"
+                    :on-success="handleUploadSuccess"
+                  >
+                    <template #trigger>
+                      <el-button type="text">本地上传</el-button>
+                    </template>
+                    <el-button type="text" @click="openMaterial" style="margin-left: 5px"
+                      >素材库选择
+                    </el-button>
+                  </el-upload>
+                </div>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
             <wx-material-select
-              :objData="{ type: 'image', accountId: objData.accountId }"
+              :objData="{ type: 'image', accountId: objDataRef.accountId }"
               @selectMaterial="selectMaterial"
             />
           </el-dialog>
         </el-col>
         <el-col :span="18">
-          <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
+          <el-input v-model="objDataRef.title" placeholder="请输入标题" @input="inputContent" />
           <div style="margin: 20px 0"></div>
-          <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
+          <el-input
+            v-model="objDataRef.description"
+            placeholder="请输入描述"
+            @input="inputContent"
+          />
         </el-col>
       </el-row>
       <div style="margin: 20px 0"></div>
-      <el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
+      <el-input v-model="objDataRef.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
       <div style="margin: 20px 0"></div>
       <el-input
-        v-model="objData.hqMusicUrl"
+        v-model="objDataRef.hqMusicUrl"
         placeholder="请输入高质量音乐链接"
         @input="inputContent"
       />
@@ -255,16 +296,16 @@
   </el-tabs>
 </template>
 
-<script>
+<script lang="ts" name="WxReplySelect">
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 
 import { getAccessToken } from '@/utils/auth'
+import { defineComponent } from 'vue'
 
-export default {
-  name: 'WxReplySelect',
+export default defineComponent({
   components: {
     WxNews,
     WxMaterialSelect,
@@ -283,39 +324,29 @@ export default {
       default: '1'
     }
   },
-  data() {
-    return {
-      tempPlayerObj: {
-        type: '2'
-      },
-
-      tempObj: new Map().set(
-        // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
-        this.objData.type, // 消息类型
-        Object.assign({}, this.objData)
-      ), // 消息内容
-
-      // ========== 素材选择的弹窗，是否可见 ==========
-      dialogNewsVisible: false, // 图文
-      dialogImageVisible: false, // 图片
-      dialogVoiceVisible: false, // 语音
-      dialogVideoVisible: false, // 视频
-      dialogThumbVisible: false, // 缩略图
-
-      // ========== 文件上传（图片、语音、视频） ==========
-      fileList: [], // 文件列表
-      uploadData: {
-        accountId: undefined,
-        type: this.objData.type,
-        title: '',
-        introduction: ''
-      },
-      actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
-      headers: { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
-    }
-  },
-  methods: {
-    beforeThumbImageUpload(file) {
+  setup(props) {
+    const objDataRef = reactive(props.objData)
+    const message = useMessage() // 消息弹窗
+    const tempObj = new Map().set(objDataRef.type, Object.assign({}, objDataRef))
+    // ========== 素材选择的弹窗，是否可见 ==========
+    const dialogNewsVisible = ref(false) // 图文
+    const dialogImageVisible = ref(false) // 图片
+    const dialogVoiceVisible = ref(false) // 语音
+    const dialogVideoVisible = ref(false) // 视频
+    const dialogThumbVisible = ref(false) // 缩略图
+    // ========== 文件上传（图片、语音、视频） ==========
+    const fileList = ref([])
+    const uploadData = reactive({
+      accountId: undefined,
+      type: objDataRef.type,
+      title: '',
+      introduction: ''
+    })
+    const actionUrl = ref(
+      import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
+    )
+    const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
+    const beforeThumbImageUpload = (file) => {
       const isType =
         file.type === 'image/jpeg' ||
         file.type === 'image/png' ||
@@ -323,18 +354,18 @@ export default {
         file.type === 'image/bmp' ||
         file.type === 'image/jpg'
       if (!isType) {
-        this.$message.error('上传图片格式不对!')
+        message.error('上传图片格式不对!')
         return false
       }
       const isLt = file.size / 1024 / 1024 < 2
       if (!isLt) {
-        this.$message.error('上传图片大小不能超过 2M!')
+        message.error('上传图片大小不能超过 2M!')
         return false
       }
-      this.uploadData.accountId = this.objData.accountId
+      uploadData.accountId = objDataRef.accountId
       return true
-    },
-    beforeVoiceUpload(file) {
+    }
+    const beforeVoiceUpload = (file) => {
       // 校验格式
       const isType =
         file.type === 'audio/mp3' ||
@@ -343,19 +374,19 @@ export default {
         file.type === 'audio/wav' ||
         file.type === 'audio/amr'
       if (!isType) {
-        this.$message.error('上传语音格式不对!' + file.type)
+        message.error('上传语音格式不对!' + file.type)
         return false
       }
       // 校验大小
       const isLt = file.size / 1024 / 1024 < 2
       if (!isLt) {
-        this.$message.error('上传语音大小不能超过 2M!')
+        message.error('上传语音大小不能超过 2M!')
         return false
       }
-      this.uploadData.accountId = this.objData.accountId
+      uploadData.accountId = objDataRef.accountId
       return true
-    },
-    beforeImageUpload(file) {
+    }
+    const beforeImageUpload = (file) => {
       // 校验格式
       const isType =
         file.type === 'image/jpeg' ||
@@ -364,197 +395,232 @@ export default {
         file.type === 'image/bmp' ||
         file.type === 'image/jpg'
       if (!isType) {
-        this.$message.error('上传图片格式不对!')
+        message.error('上传图片格式不对!')
         return false
       }
       // 校验大小
       const isLt = file.size / 1024 / 1024 < 2
       if (!isLt) {
-        this.$message.error('上传图片大小不能超过 2M!')
+        message.error('上传图片大小不能超过 2M!')
         return false
       }
-      this.uploadData.accountId = this.objData.accountId
+      uploadData.accountId = objDataRef.accountId
       return true
-    },
-    beforeVideoUpload(file) {
+    }
+    const beforeVideoUpload = (file) => {
       // 校验格式
       const isType = file.type === 'video/mp4'
       if (!isType) {
-        this.$message.error('上传视频格式不对!')
+        message.error('上传视频格式不对!')
         return false
       }
       // 校验大小
       const isLt = file.size / 1024 / 1024 < 10
       if (!isLt) {
-        this.$message.error('上传视频大小不能超过 10M!')
+        message.error('上传视频大小不能超过 10M!')
         return false
       }
-      this.uploadData.accountId = this.objData.accountId
+      uploadData.accountId = objDataRef.accountId
       return true
-    },
-    handleUploadSuccess(response, file, fileList) {
+    }
+    const handleUploadSuccess = (response) => {
       if (response.code !== 0) {
-        this.$message.error('上传出错：' + response.msg)
+        message.error('上传出错：' + response.msg)
         return false
       }
 
       // 清空上传时的各种数据
-      this.fileList = []
-      this.uploadData.title = ''
-      this.uploadData.introduction = ''
+      fileList.value = []
+      uploadData.title = ''
+      uploadData.introduction = ''
 
       // 上传好的文件，本质是个素材，所以可以进行选中
       let item = response.data
-      this.selectMaterial(item)
-    },
+      selectMaterial(item)
+    }
     /**
      * 切换消息类型的 tab
      *
-     * @param tab tab
+     * @param tab tab  没用 暂时删了tab
      */
-    handleClick(tab) {
+    const handleClick = () => {
       // 设置后续文件上传的文件类型
-      this.uploadData.type = this.objData.type
-      if (this.uploadData.type === 'music') {
+      uploadData.type = objDataRef.type
+      if (uploadData.type === 'music') {
         // 【音乐】上传的是缩略图
-        this.uploadData.type = 'thumb'
+        uploadData.type = 'thumb'
       }
 
-      // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
-      let tempObjItem = this.tempObj.get(this.objData.type)
+      // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objDataRef
+      let tempObjItem = tempObj.get(objDataRef.type)
       if (tempObjItem) {
-        this.objData.content = tempObjItem.content ? tempObjItem.content : null
-        this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
-        this.objData.url = tempObjItem.url ? tempObjItem.url : null
-        this.objData.name = tempObjItem.url ? tempObjItem.name : null
-        this.objData.title = tempObjItem.title ? tempObjItem.title : null
-        this.objData.description = tempObjItem.description ? tempObjItem.description : null
+        objDataRef.content = tempObjItem.content ? tempObjItem.content : null
+        objDataRef.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
+        objDataRef.url = tempObjItem.url ? tempObjItem.url : null
+        objDataRef.name = tempObjItem.url ? tempObjItem.name : null
+        objDataRef.title = tempObjItem.title ? tempObjItem.title : null
+        objDataRef.description = tempObjItem.description ? tempObjItem.description : null
         return
       }
-      // 如果获取不到，需要把 objData 复原
+      // 如果获取不到，需要把 objDataRef 复原
       // 必须使用 $set 赋值，不然 input 无法输入内容
-      this.$set(this.objData, 'content', '')
-      this.$delete(this.objData, 'mediaId')
-      this.$delete(this.objData, 'url')
-      this.$set(this.objData, 'title', '')
-      this.$set(this.objData, 'description', '')
-    },
+      objDataRef.content = ''
+      objDataRef.mediaId = ''
+      objDataRef.url = ''
+      objDataRef.title = ''
+      objDataRef.description = ''
+    }
     /**
-     * 选择素材，将设置设置到 objData 变量
+     * 选择素材，将设置设置到 objDataRef 变量
      *
      * @param item 素材
      */
-    selectMaterial(item) {
+    const selectMaterial = (item) => {
       // 选择好素材，所以隐藏弹窗
-      this.closeMaterial()
+      closeMaterial()
 
       // 创建 tempObjItem 对象，并设置对应的值
-      let tempObjItem = {}
-      tempObjItem.type = this.objData.type
-      if (this.objData.type === 'news') {
+      let tempObjItem = {
+        type: '',
+        articles: '',
+        thumbMediaId: '',
+        thumbMediaUrl: '',
+        introduction: '',
+        title: '',
+        musicUrl: '',
+        hqMusicUrl: '',
+        mediaId: '',
+        url: '',
+        name: '',
+        description: ''
+      }
+      tempObjItem.type = objDataRef.type
+      if (objDataRef.type === 'news') {
         tempObjItem.articles = item.content.newsItem
-        this.objData.articles = item.content.newsItem
-      } else if (this.objData.type === 'music') {
+        objDataRef.articles = item.content.newsItem
+      } else if (objDataRef.type === 'music') {
         // 音乐需要特殊处理，因为选择的是图片的缩略图
         tempObjItem.thumbMediaId = item.mediaId
-        this.objData.thumbMediaId = item.mediaId
+        objDataRef.thumbMediaId = item.mediaId
         tempObjItem.thumbMediaUrl = item.url
-        this.objData.thumbMediaUrl = item.url
-        // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
-        tempObjItem.title = this.objData.title || ''
-        tempObjItem.introduction = this.objData.introduction || ''
-        tempObjItem.musicUrl = this.objData.musicUrl || ''
-        tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''
-      } else if (this.objData.type === 'image' || this.objData.type === 'voice') {
+        objDataRef.thumbMediaUrl = item.url
+        // title、introduction、musicUrl、hqMusicUrl：从 objDataRef 到 tempObjItem，避免上传素材后，被覆盖掉
+        tempObjItem.title = objDataRef.title || ''
+        tempObjItem.introduction = objDataRef.introduction || ''
+        tempObjItem.musicUrl = objDataRef.musicUrl || ''
+        tempObjItem.hqMusicUrl = objDataRef.hqMusicUrl || ''
+      } else if (objDataRef.type === 'image' || objDataRef.type === 'voice') {
         tempObjItem.mediaId = item.mediaId
-        this.objData.mediaId = item.mediaId
+        objDataRef.mediaId = item.mediaId
         tempObjItem.url = item.url
-        this.objData.url = item.url
+        objDataRef.url = item.url
         tempObjItem.name = item.name
-        this.objData.name = item.name
-      } else if (this.objData.type === 'video') {
+        objDataRef.name = item.name
+      } else if (objDataRef.type === 'video') {
         tempObjItem.mediaId = item.mediaId
-        this.objData.mediaId = item.mediaId
+        objDataRef.mediaId = item.mediaId
         tempObjItem.url = item.url
-        this.objData.url = item.url
+        objDataRef.url = item.url
         tempObjItem.name = item.name
-        this.objData.name = item.name
+        objDataRef.name = item.name
         // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
         if (item.title) {
-          this.objData.title = item.title || ''
+          objDataRef.title = item.title || ''
           tempObjItem.title = item.title || ''
         }
         if (item.introduction) {
-          this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
+          objDataRef.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
           tempObjItem.description = item.introduction || ''
         }
-      } else if (this.objData.type === 'text') {
-        this.objData.content = item.content || ''
+      } else if (objDataRef.type === 'text') {
+        objDataRef.content = item.content || ''
       }
       // 最终设置到临时缓存
-      this.tempObj.set(this.objData.type, tempObjItem)
-    },
-    openMaterial() {
-      if (this.objData.type === 'news') {
-        this.dialogNewsVisible = true
-      } else if (this.objData.type === 'image') {
-        this.dialogImageVisible = true
-      } else if (this.objData.type === 'voice') {
-        this.dialogVoiceVisible = true
-      } else if (this.objData.type === 'video') {
-        this.dialogVideoVisible = true
-      } else if (this.objData.type === 'music') {
-        this.dialogThumbVisible = true
+      tempObj.set(objDataRef.type, tempObjItem)
+    }
+    const openMaterial = () => {
+      if (objDataRef.type === 'news') {
+        dialogNewsVisible.value = true
+      } else if (objDataRef.type === 'image') {
+        dialogImageVisible.value = true
+      } else if (objDataRef.type === 'voice') {
+        dialogVoiceVisible.value = true
+      } else if (objDataRef.type === 'video') {
+        dialogVideoVisible.value = true
+      } else if (objDataRef.type === 'music') {
+        dialogThumbVisible.value = true
       }
-    },
-    closeMaterial() {
-      this.dialogNewsVisible = false
-      this.dialogImageVisible = false
-      this.dialogVoiceVisible = false
-      this.dialogVideoVisible = false
-      this.dialogThumbVisible = false
-    },
-    deleteObj() {
-      if (this.objData.type === 'news') {
-        this.$delete(this.objData, 'articles')
-      } else if (this.objData.type === 'image') {
-        this.objData.mediaId = null
-        this.$delete(this.objData, 'url')
-        this.objData.name = null
-      } else if (this.objData.type === 'voice') {
-        this.objData.mediaId = null
-        this.$delete(this.objData, 'url')
-        this.objData.name = null
-      } else if (this.objData.type === 'video') {
-        this.objData.mediaId = null
-        this.$delete(this.objData, 'url')
-        this.objData.name = null
-        this.objData.title = null
-        this.objData.description = null
-      } else if (this.objData.type === 'music') {
-        this.objData.thumbMediaId = null
-        this.objData.thumbMediaUrl = null
-        this.objData.title = null
-        this.objData.description = null
-        this.objData.musicUrl = null
-        this.objData.hqMusicUrl = null
-      } else if (this.objData.type === 'text') {
-        this.objData.content = null
+    }
+    const closeMaterial = () => {
+      dialogNewsVisible.value = false
+      dialogImageVisible.value = false
+      dialogVoiceVisible.value = false
+      dialogVideoVisible.value = false
+      dialogThumbVisible.value = false
+    }
+    const deleteObj = () => {
+      if (objDataRef.type === 'news') {
+        objDataRef.articles = ''
+      } else if (objDataRef.type === 'image') {
+        objDataRef.mediaId = null
+        objDataRef.url = null
+        objDataRef.name = null
+      } else if (objDataRef.type === 'voice') {
+        objDataRef.mediaId = null
+        objDataRef.url = null
+        objDataRef.name = null
+      } else if (objDataRef.type === 'video') {
+        objDataRef.mediaId = null
+        objDataRef.url = null
+        objDataRef.name = null
+        objDataRef.title = null
+        objDataRef.description = null
+      } else if (objDataRef.type === 'music') {
+        objDataRef.thumbMediaId = null
+        objDataRef.thumbMediaUrl = null
+        objDataRef.title = null
+        objDataRef.description = null
+        objDataRef.musicUrl = null
+        objDataRef.hqMusicUrl = null
+      } else if (objDataRef.type === 'text') {
+        objDataRef.content = null
       }
       // 覆盖缓存
-      this.tempObj.set(this.objData.type, Object.assign({}, this.objData))
-    },
+      tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
+    }
     /**
-     * 输入时，缓存每次 objData 到 tempObj 中
+     * 输入时，缓存每次 objDataRef 到 tempObj 中
      *
-     * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
+     * why？不确定为什么 v-model="objDataRef.content" 不能自动缓存，所以通过这样的方式
      */
-    inputContent(str) {
+    const inputContent = () => {
       // 覆盖缓存
-      this.tempObj.set(this.objData.type, Object.assign({}, this.objData))
+      tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
+    }
+    return {
+      inputContent,
+      dialogNewsVisible,
+      deleteObj,
+      openMaterial,
+      handleClick,
+      beforeImageUpload,
+      beforeVoiceUpload,
+      handleUploadSuccess,
+      beforeVideoUpload,
+      selectMaterial,
+      dialogImageVisible,
+      dialogVoiceVisible,
+      dialogThumbVisible,
+      actionUrl,
+      objDataRef,
+      headers,
+      fileList,
+      beforeThumbImageUpload,
+      uploadData,
+      dialogVideoVisible
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -564,25 +630,34 @@ export default {
     margin-right: 2%;
   }
 }
+
 .pagination {
   text-align: right;
   margin-right: 25px;
 }
+
 .select-item {
   width: 280px;
   padding: 10px;
   margin: 0 auto 10px auto;
   border: 1px solid #eaeaea;
 }
+
 .select-item2 {
   padding: 10px;
   margin: 0 auto 10px auto;
   border: 1px solid #eaeaea;
 }
+
 .ope-row {
   padding-top: 10px;
   text-align: center;
 }
+
+.input-margin-bottom {
+  margin-bottom: 2%;
+}
+
 .item-name {
   font-size: 12px;
   overflow: hidden;
@@ -590,20 +665,24 @@ export default {
   white-space: nowrap;
   text-align: center;
 }
+
 .el-form-item__content {
   line-height: unset !important;
 }
+
 .col-select {
   border: 1px solid rgb(234, 234, 234);
   padding: 50px 0px;
   height: 160px;
   width: 49.5%;
 }
+
 .col-select2 {
   border: 1px solid rgb(234, 234, 234);
   padding: 50px 0px;
   height: 160px;
 }
+
 .col-add {
   border: 1px solid rgb(234, 234, 234);
   padding: 50px 0px;
@@ -611,6 +690,7 @@ export default {
   width: 49.5%;
   float: right;
 }
+
 .avatar-uploader-icon {
   border: 1px solid #d9d9d9;
   font-size: 28px;
@@ -620,13 +700,16 @@ export default {
   line-height: 100px !important;
   text-align: center;
 }
+
 .material-img {
   width: 100%;
 }
+
 .thumb-div {
   display: inline-block;
   text-align: center;
 }
+
 .item-infos {
   width: 30%;
   margin: auto;
diff --git a/src/views/mp/components/wx-video-play/main.vue b/src/views/mp/components/wx-video-play/main.vue
index 7679a70a..7dc4347c 100644
--- a/src/views/mp/components/wx-video-play/main.vue
+++ b/src/views/mp/components/wx-video-play/main.vue
@@ -19,13 +19,7 @@
     </div>
 
     <!-- 弹窗播放 -->
-    <el-dialog
-      v-model="dialogVideo"
-      title="视频播放"
-      width="40%"
-      append-to-body
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogVideo" title="视频播放" width="40%" append-to-body>
       <template #footer>
         <video-player
           v-if="dialogVideo"
diff --git a/src/views/mp/message/index.vue b/src/views/mp/message/index.vue
index f218de39..35420e6f 100644
--- a/src/views/mp/message/index.vue
+++ b/src/views/mp/message/index.vue
@@ -51,8 +51,14 @@
         />
       </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 @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>
   </ContentWrap>
@@ -85,16 +91,20 @@
             <el-tag type="danger">取消关注</el-tag>
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'CLICK'">
-            <el-tag>点击菜单</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>点击菜单</el-tag>
+            【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'VIEW'">
-            <el-tag>点击菜单链接</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>点击菜单链接</el-tag>
+            【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_waitmsg'">
-            <el-tag>扫码结果</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>扫码结果</el-tag>
+            【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_push'">
-            <el-tag>扫码结果</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>扫码结果</el-tag>
+            【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_sysphoto'">
             <el-tag>系统拍照发图</el-tag>
@@ -125,7 +135,8 @@
             <wx-video-player :url="scope.row.mediaUrl" style="margin-top: 10px" />
           </div>
           <div v-else-if="scope.row.type === 'link'">
-            <el-tag>链接</el-tag>：
+            <el-tag>链接</el-tag>
+            ：
             <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
           </div>
           <div v-else-if="scope.row.type === 'location'">
@@ -175,8 +186,10 @@
     />
 
     <!-- 发送消息的弹窗 -->
-    <el-dialog title="粉丝消息列表" v-model:visible="open" width="50%">
-      <wx-msg :user-id="userId" v-if="open" />
+    <el-dialog title="粉丝消息列表" v-model="open" @click="openDialog()" width="50%">
+      <template #footer>
+        <wx-msg :user-id="userId" v-if="open" />
+      </template>
     </el-dialog>
   </ContentWrap>
 </template>
@@ -189,6 +202,7 @@ import WxMusic from '@/views/mp/components/wx-music/main.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import * as MpAccountApi from '@/api/mp/account'
 import * as MpMessageApi from '@/api/mp/message'
+
 const message = useMessage() // 消息弹窗
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
@@ -248,6 +262,13 @@ const handleSend = async (row) => {
   open.value = true
 }
 
+const openDialog = () => {
+  open.value = true
+}
+// const closeDiaLog = () => {
+//   open.value = false
+// }
+
 /** 初始化 **/
 onMounted(async () => {
   accountList.value = await MpAccountApi.getSimpleAccountList()

From 9e6da44881591df07f20cc3e7d3804ddb4e4fca1 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 01:19:25 +0800
Subject: [PATCH 11/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=EF=BC=88=E6=B5=81=E7=A8=8B=E5=9B=BE=E9=A2=84=E8=A7=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceBpmnViewer.vue      | 53 ++++++++++++++++
 .../bpm/processInstance/detail/index.vue      | 60 ++++---------------
 2 files changed, 63 insertions(+), 50 deletions(-)
 create mode 100644 src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
new file mode 100644
index 00000000..a06ac368
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-card class="box-card" v-loading="loading">
+    <template #header>
+      <span class="el-icon-picture-outline">流程图</span>
+    </template>
+    <my-process-viewer
+      key="designer"
+      :value="bpmnXml"
+      v-bind="bpmnControlForm"
+      :prefix="bpmnControlForm.prefix"
+      :activityData="activityList"
+      :processInstanceData="processInstance"
+      :taskData="tasks"
+    />
+  </el-card>
+</template>
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import * as ActivityApi from '@/api/bpm/activity'
+// import * as DefinitionApi from '@/api/bpm/definition'
+
+const props = defineProps({
+  loading: propTypes.bool, // 是否加载中
+  id: propTypes.string, // 流程实例的编号
+  processInstance: propTypes.any, // 流程实例的信息
+  tasks: propTypes.array, // 流程任务的数组
+  bpmnXml: propTypes.string // BPMN XML
+})
+
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
+const activityList = ref([]) // 任务列表
+// const bpmnXML = computed(() => { // TODO 芋艿：不晓得为啊哈不能这么搞
+//   if (!props.processInstance || !props.processInstance.processDefinition) {
+//     return
+//   }
+//   return DefinitionApi.getProcessDefinitionBpmnXML(props.processInstance.processDefinition.id)
+// })
+
+/** 初始化 */
+onMounted(async () => {
+  activityList.value = await ActivityApi.getActivityList({
+    processInstanceId: props.id
+  })
+})
+</script>
+<style>
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index e811475f..1651f97a 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -127,21 +127,13 @@
     </el-card>
 
     <!-- 高亮流程图 -->
-    <el-card class="box-card" v-loading="processInstanceLoading">
-      <template #header>
-        <span class="el-icon-picture-outline">流程图</span>
-      </template>
-      <my-process-viewer
-        key="designer"
-        v-model="bpmnXML"
-        :value="bpmnXML"
-        v-bind="bpmnControlForm"
-        :prefix="bpmnControlForm.prefix"
-        :activityData="activityList"
-        :processInstanceData="processInstance"
-        :taskData="tasks"
-      />
-    </el-card>
+    <ProcessInstanceBpmnViewer
+      :id="id"
+      :process-instance="processInstance"
+      :loading="processInstanceLoading"
+      :tasks="tasks"
+      :bpmn-xml="bpmnXML"
+    />
 
     <!-- 弹窗：转派审批人 -->
     <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
@@ -149,16 +141,15 @@
 </template>
 <script setup lang="ts">
 import { parseTime } from '@/utils/formatTime'
-import * as UserApi from '@/api/system/user'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as DefinitionApi from '@/api/bpm/definition'
 import * as TaskApi from '@/api/bpm/task'
-import * as ActivityApi from '@/api/bpm/activity'
 import { formatPast2 } from '@/utils/formatTime'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useUserStore } from '@/store/modules/user'
 import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
+import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import * as DefinitionApi from '@/api/bpm/definition'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
@@ -249,6 +240,7 @@ const getTimelineItemType = (item) => {
 }
 
 // ========== 审批记录 ==========
+const bpmnXML = ref('')
 
 /** 转派审批人 */
 const taskUpdateAssigneeFormRef = ref()
@@ -265,32 +257,12 @@ const handleDelegate = async (task) => {
 /** 处理审批退回的操作 */
 const handleBack = async (task) => {
   message.error('暂不支持【退回】功能！')
-  // 可参考 http://blog.wya1.com/article/636697030/details/7296
-  // const data = {
-  //   id: task.id,
-  //   assigneeUserId: 1
-  // }
-  // backTask(data).then(response => {
-  //   this.$modal.msgSuccess("回退成功！");
-  //   this.getDetail(); // 获得最新详情
-  // });
   console.log(task)
 }
 
-// ========== 高亮流程图 ==========
-const bpmnXML = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const activityList = ref([])
-
 // ========== 初始化 ==========
 onMounted(() => {
   getDetail()
-  // 加载用户的列表
-  UserApi.getSimpleUserList().then((data) => {
-    userOptions.value.push(...data)
-  })
 })
 
 const getDetail = () => {
@@ -324,13 +296,6 @@ const getDetail = () => {
       DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id).then((data) => {
         bpmnXML.value = data
       })
-
-      // 加载活动列表
-      ActivityApi.getActivityList({
-        processInstanceId: data.id
-      }).then((data) => {
-        activityList.value = data
-      })
     })
     .finally(() => {
       processInstanceLoading.value = false
@@ -387,12 +352,7 @@ const getDetail = () => {
     })
 }
 </script>
-
 <style lang="scss">
-.my-process-designer {
-  height: calc(100vh - 200px);
-}
-
 .box-card {
   width: 100%;
   margin-bottom: 20px;

From 4388d6565a0856b7034b7574871e174d35ab4aef Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 07:29:32 +0800
Subject: [PATCH 12/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=EF=BC=88=E6=B5=81=E7=A8=8B=E4=BB=BB=E5=8A=A1=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTaskList.vue        |  89 ++++++++++++
 .../bpm/processInstance/detail/index.vue      | 129 +++---------------
 2 files changed, 109 insertions(+), 109 deletions(-)
 create mode 100644 src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
new file mode 100644
index 00000000..3bbabcc6
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -0,0 +1,89 @@
+<template>
+  <el-card class="box-card" v-loading="loading">
+    <template #header>
+      <span class="el-icon-picture-outline">审批记录</span>
+    </template>
+    <el-col :span="16" :offset="4">
+      <div class="block">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(item, index) in tasks"
+            :key="index"
+            :icon="getTimelineItemIcon(item)"
+            :type="getTimelineItemType(item)"
+          >
+            <p style="font-weight: 700">任务：{{ item.name }}</p>
+            <el-card :body-style="{ padding: '10px' }">
+              <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
+                审批人：{{ item.assigneeUser.nickname }}
+                <el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
+              </label>
+              <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+              <label style="color: #8a909c; font-weight: normal">
+                {{ parseTime(item?.createTime) }}
+              </label>
+              <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
+                审批时间：
+              </label>
+              <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
+                {{ parseTime(item?.endTime) }}
+              </label>
+              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
+                耗时：
+              </label>
+              <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
+                {{ formatPast2(item?.durationInMillis) }}
+              </label>
+              <p v-if="item.reason">
+                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+              </p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-col>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { parseTime, formatPast2 } from '@/utils/formatTime'
+import { propTypes } from '@/utils/propTypes'
+
+defineProps({
+  loading: propTypes.bool, // 是否加载中
+  tasks: propTypes.array // 流程任务的数组
+})
+
+/** 获得任务对应的 icon */
+const getTimelineItemIcon = (item) => {
+  if (item.result === 1) {
+    return 'el-icon-time'
+  }
+  if (item.result === 2) {
+    return 'el-icon-check'
+  }
+  if (item.result === 3) {
+    return 'el-icon-close'
+  }
+  if (item.result === 4) {
+    return 'el-icon-remove-outline'
+  }
+  return ''
+}
+
+/** 获得任务对应的颜色 */
+const getTimelineItemType = (item) => {
+  if (item.result === 1) {
+    return 'primary'
+  }
+  if (item.result === 2) {
+    return 'success'
+  }
+  if (item.result === 3) {
+    return 'danger'
+  }
+  if (item.result === 4) {
+    return 'info'
+  }
+  return ''
+}
+</script>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 1651f97a..54296389 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -81,50 +81,7 @@
     </el-card>
 
     <!-- 审批记录 -->
-    <el-card class="box-card" v-loading="tasksLoad">
-      <template #header>
-        <span class="el-icon-picture-outline">审批记录</span>
-      </template>
-      <el-col :span="16" :offset="4">
-        <div class="block">
-          <el-timeline>
-            <el-timeline-item
-              v-for="(item, index) in tasks"
-              :key="index"
-              :icon="getTimelineItemIcon(item)"
-              :type="getTimelineItemType(item)"
-            >
-              <p style="font-weight: 700">任务：{{ item.name }}</p>
-              <el-card :body-style="{ padding: '10px' }">
-                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
-                  审批人：{{ item.assigneeUser.nickname }}
-                  <el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
-                </label>
-                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
-                <label style="color: #8a909c; font-weight: normal">
-                  {{ parseTime(item?.createTime) }}
-                </label>
-                <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
-                  审批时间：
-                </label>
-                <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
-                  {{ parseTime(item?.endTime) }}
-                </label>
-                <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
-                  耗时：
-                </label>
-                <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
-                  {{ formatPast2(item?.durationInMillis) }}
-                </label>
-                <p v-if="item.reason">
-                  <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
-                </p>
-              </el-card>
-            </el-timeline-item>
-          </el-timeline>
-        </div>
-      </el-col>
-    </el-card>
+    <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
 
     <!-- 高亮流程图 -->
     <ProcessInstanceBpmnViewer
@@ -140,38 +97,46 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
-import { parseTime } from '@/utils/formatTime'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as TaskApi from '@/api/bpm/task'
-import { formatPast2 } from '@/utils/formatTime'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useUserStore } from '@/store/modules/user'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as TaskApi from '@/api/bpm/task'
 import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
-import * as DefinitionApi from '@/api/bpm/definition'
-
+import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
 
-// ========== 审批信息 ==========
-const id = query.id as unknown as number
+const userId = useUserStore().getUser.id // 当前登录的编号
+const id = query.id as unknown as number // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
+const bpmnXML = ref('') // BPMN XML
+const tasksLoad = ref(true) // 任务的加载中
+const tasks = ref<any[]>([]) // 任务列表
+// ========== 审批信息 ==========
 const runningTasks = ref<any[]>([]) // 运行中的任务
 const auditForms = ref<any[]>([]) // 审批任务的表单
 const auditRule = reactive({
   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
+// ========== 申请信息 ==========
+const fApi = ref<ApiAttrs>() //
+const detailForm = ref({
+  // 流程表单详情
+  rule: [],
+  option: {},
+  value: {}
+})
 
-// 处理审批通过和不通过的操作
+/** 处理审批通过和不通过的操作 */
 const handleAudit = async (task, pass) => {
   // 1.1 获得对应表单
   const index = runningTasks.value.indexOf(task)
   const auditFormRef = proxy.$refs['form' + index][0]
-  // alert(auditFormRef)
-
   // 1.2 校验表单
   const elForm = unref(auditFormRef)
   if (!elForm) return
@@ -194,54 +159,6 @@ const handleAudit = async (task, pass) => {
   getDetail()
 }
 
-// ========== 申请信息 ==========
-const fApi = ref<ApiAttrs>()
-const userId = useUserStore().getUser.id // 当前登录的编号
-// 流程表单详情
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-})
-
-// ========== 审批记录 ==========
-const tasksLoad = ref(true)
-const tasks = ref<any[]>([])
-
-const getTimelineItemIcon = (item) => {
-  if (item.result === 1) {
-    return 'el-icon-time'
-  }
-  if (item.result === 2) {
-    return 'el-icon-check'
-  }
-  if (item.result === 3) {
-    return 'el-icon-close'
-  }
-  if (item.result === 4) {
-    return 'el-icon-remove-outline'
-  }
-  return ''
-}
-const getTimelineItemType = (item) => {
-  if (item.result === 1) {
-    return 'primary'
-  }
-  if (item.result === 2) {
-    return 'success'
-  }
-  if (item.result === 3) {
-    return 'danger'
-  }
-  if (item.result === 4) {
-    return 'info'
-  }
-  return ''
-}
-
-// ========== 审批记录 ==========
-const bpmnXML = ref('')
-
 /** 转派审批人 */
 const taskUpdateAssigneeFormRef = ref()
 const openTaskUpdateAssigneeForm = (id: string) => {
@@ -352,9 +269,3 @@ const getDetail = () => {
     })
 }
 </script>
-<style lang="scss">
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
-</style>

From 7587acedb0e7ccbc3993acaf694b50f69a66b66f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 07:45:18 +0800
Subject: [PATCH 13/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=EF=BC=88=E6=B5=81=E7=A8=8B=E4=BB=BB=E5=8A=A1=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/index.vue      | 184 +++++++++---------
 1 file changed, 95 insertions(+), 89 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 54296389..3a48b3b3 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -97,9 +97,9 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
+import { useUserStore } from '@/store/modules/user'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import { useUserStore } from '@/store/modules/user'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
@@ -177,95 +177,101 @@ const handleBack = async (task) => {
   console.log(task)
 }
 
-// ========== 初始化 ==========
+/** 获得详情 */
+const getDetail = () => {
+  // 1. 获得流程实例相关
+  getProcessInstance()
+  // 2. 获得流程任务列表（审批记录）
+  getTaskList()
+}
+
+/** 加载流程实例 */
+const getProcessInstance = async () => {
+  try {
+    processInstanceLoading.value = true
+    const data = await ProcessInstanceApi.getProcessInstanceApi(id)
+    if (!data) {
+      message.error('查询不到流程信息！')
+      return
+    }
+    processInstance.value = data
+
+    // 设置表单信息
+    const processDefinition = data.processDefinition
+    if (processDefinition.formType === 10) {
+      setConfAndFields2(
+        detailForm,
+        processDefinition.formConf,
+        processDefinition.formFields,
+        data.formVariables
+      )
+      nextTick().then(() => {
+        fApi.value?.fapi?.btn.show(false)
+        fApi.value?.fapi?.resetBtn.show(false)
+        fApi.value?.fapi?.disabled(true)
+      })
+    }
+
+    // 加载流程图
+    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id)
+  } finally {
+    processInstanceLoading.value = false
+  }
+}
+
+/** 加载任务列表 */
+const getTaskList = async () => {
+  try {
+    // 获得未取消的任务
+    tasksLoad.value = true
+    const data = await TaskApi.getTaskListByProcessInstanceId(id)
+    tasks.value = []
+    // 1.1 移除已取消的审批
+    data.forEach((task) => {
+      if (task.result !== 4) {
+        tasks.value.push(task)
+      }
+    })
+    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
+    tasks.value.sort((a, b) => {
+      // 有已完成的情况，按照完成时间倒序
+      if (a.endTime && b.endTime) {
+        return b.endTime - a.endTime
+      } else if (a.endTime) {
+        return 1
+      } else if (b.endTime) {
+        return -1
+        // 都是未完成，按照创建时间倒序
+      } else {
+        return b.createTime - a.createTime
+      }
+    })
+
+    // 获得需要自己审批的任务
+    runningTasks.value = []
+    auditForms.value = []
+    tasks.value.forEach((task) => {
+      // 2.1 只有待处理才需要
+      if (task.result !== 1) {
+        return
+      }
+      // 2.2 自己不是处理人
+      if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+        return
+      }
+      // 2.3 添加到处理任务
+      runningTasks.value.push({ ...task })
+      auditForms.value.push({
+        reason: ''
+      })
+    })
+  } finally {
+    tasksLoad.value = false
+  }
+}
+
+/** 初始化 */
 onMounted(() => {
   getDetail()
 })
-
-const getDetail = () => {
-  // 1. 获得流程实例相关
-  processInstanceLoading.value = true
-  ProcessInstanceApi.getProcessInstanceApi(id)
-    .then((data) => {
-      if (!data) {
-        message.error('查询不到流程信息！')
-        return
-      }
-      processInstance.value = data
-
-      // 设置表单信息
-      const processDefinition = data.processDefinition
-      if (processDefinition.formType === 10) {
-        setConfAndFields2(
-          detailForm,
-          processDefinition.formConf,
-          processDefinition.formFields,
-          data.formVariables
-        )
-        nextTick().then(() => {
-          fApi.value?.fapi?.btn.show(false)
-          fApi.value?.fapi?.resetBtn.show(false)
-          fApi.value?.fapi?.disabled(true)
-        })
-      }
-
-      // 加载流程图
-      DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id).then((data) => {
-        bpmnXML.value = data
-      })
-    })
-    .finally(() => {
-      processInstanceLoading.value = false
-    })
-
-  // 2. 获得流程任务列表（审批记录）
-  tasksLoad.value = true
-  runningTasks.value = []
-  auditForms.value = []
-  TaskApi.getTaskListByProcessInstanceId(id)
-    .then((data) => {
-      // 审批记录
-      tasks.value = []
-      // 移除已取消的审批
-      data.forEach((task) => {
-        if (task.result !== 4) {
-          tasks.value.push(task)
-        }
-      })
-      // 排序，将未完成的排在前面，已完成的排在后面；
-      tasks.value.sort((a, b) => {
-        // 有已完成的情况，按照完成时间倒序
-        if (a.endTime && b.endTime) {
-          return b.endTime - a.endTime
-        } else if (a.endTime) {
-          return 1
-        } else if (b.endTime) {
-          return -1
-          // 都是未完成，按照创建时间倒序
-        } else {
-          return b.createTime - a.createTime
-        }
-      })
-
-      // 需要审核的记录
-      tasks.value.forEach((task) => {
-        // 1.1 只有待处理才需要
-        if (task.result !== 1) {
-          return
-        }
-        // 1.2 自己不是处理人
-        if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-          return
-        }
-        // 2. 添加到处理任务
-        runningTasks.value.push({ ...task })
-        auditForms.value.push({
-          reason: ''
-        })
-      })
-    })
-    .finally(() => {
-      tasksLoad.value = false
-    })
-}
 </script>

From ddd6bbbee1718a12b1af0b32dc4ac088e90d4e26 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 07:51:46 +0800
Subject: [PATCH 14/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E7=9A=84=E7=9B=AE=E5=BD=95=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{create.vue => create/index.vue}          | 34 +++----------------
 .../{ => create}/process.create.ts            |  0
 .../detail/ProcessInstanceBpmnViewer.vue      |  8 +++--
 3 files changed, 9 insertions(+), 33 deletions(-)
 rename src/views/bpm/processInstance/{create.vue => create/index.vue} (84%)
 rename src/views/bpm/processInstance/{ => create}/process.create.ts (100%)

diff --git a/src/views/bpm/processInstance/create.vue b/src/views/bpm/processInstance/create/index.vue
similarity index 84%
rename from src/views/bpm/processInstance/create.vue
rename to src/views/bpm/processInstance/create/index.vue
index b6fc0f49..023788c3 100644
--- a/src/views/bpm/processInstance/create.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -37,31 +37,20 @@
           />
         </el-col>
       </el-card>
-      <el-card class="box-card">
-        <div class="clearfix">
-          <span class="el-icon-picture-outline">流程图</span>
-        </div>
-        <!-- TODO 芋艿：待完成？？？ -->
-        <my-process-viewer
-          key="designer"
-          v-model="bpmnXML"
-          :value="bpmnXML"
-          v-bind="bpmnControlForm"
-          :prefix="bpmnControlForm.prefix"
-        />
-      </el-card>
+      <!-- 流程图预览 -->
+      <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
     </div>
   </ContentWrap>
 </template>
 <script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
 // 业务相关的 import
 import { allSchemas } from './process.create'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import { DICT_TYPE } from '@/utils/dict'
-
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 const router = useRouter() // 路由
 const message = useMessage() // 消息
 
@@ -126,7 +115,6 @@ const submitForm = async (formData) => {
     })
     // 提示
     message.success('发起流程成功')
-    // this.$tab.closeOpenPage();
     router.go(-1)
   } finally {
     fApi.value.btn.loading(false)
@@ -137,18 +125,4 @@ const submitForm = async (formData) => {
 
 // // BPMN 数据
 const bpmnXML = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
 </script>
-
-<style lang="scss">
-.my-process-designer {
-  height: calc(100vh - 200px);
-}
-
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
-</style>
diff --git a/src/views/bpm/processInstance/process.create.ts b/src/views/bpm/processInstance/create/process.create.ts
similarity index 100%
rename from src/views/bpm/processInstance/process.create.ts
rename to src/views/bpm/processInstance/create/process.create.ts
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index a06ac368..3a3e244b 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -40,9 +40,11 @@ const activityList = ref([]) // 任务列表
 
 /** 初始化 */
 onMounted(async () => {
-  activityList.value = await ActivityApi.getActivityList({
-    processInstanceId: props.id
-  })
+  if (props.id) {
+    activityList.value = await ActivityApi.getActivityList({
+      processInstanceId: props.id
+    })
+  }
 })
 </script>
 <style>

From d7891fe7592bc32d24efe81875dcdc467482ee90 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 08:10:11 +0800
Subject: [PATCH 15/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E5=88=9B=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/processInstance/index.ts          |   1 +
 src/router/modules/remaining.ts               |   2 +-
 .../bpm/processInstance/create/index.vue      | 126 +++++++++---------
 .../processInstance/create/process.create.ts  |  39 ------
 4 files changed, 66 insertions(+), 102 deletions(-)
 delete mode 100644 src/views/bpm/processInstance/create/process.create.ts

diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index d48253c3..95591ae3 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -4,6 +4,7 @@ export type Task = {
   id: string
   name: string
 }
+
 export type ProcessInstanceVO = {
   id: number
   name: string
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 380e3618..4d8c3dac 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -272,7 +272,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: '/process-instance/create',
-        component: () => import('@/views/bpm/processInstance/create.vue'),
+        component: () => import('@/views/bpm/processInstance/create/index.vue'),
         name: 'BpmProcessInstanceCreate',
         meta: {
           noCache: true,
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 023788c3..dd043eae 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -1,51 +1,53 @@
 <template>
-  <ContentWrap>
-    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-    <div v-if="!selectProcessInstance">
-      <XTable @register="registerTable">
-        <!-- 流程分类 -->
-        <template #category_default="{ row }">
-          <DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="Number(row?.category)" />
+  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+  <ContentWrap v-if="!selectProcessInstance">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" />
+      <el-table-column label="流程分类" align="center" prop="category">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
         </template>
-        <template #version_default="{ row }">
-          <el-tag v-if="row">v{{ row.version }}</el-tag>
+      </el-table-column>
+      <el-table-column label="流程版本" align="center" prop="version">
+        <template #default="scope">
+          <el-tag>v{{ scope.row.version }}</el-tag>
         </template>
-        <template #actionbtns_default="{ row }">
-          <XTextButton preIcon="ep:plus" title="选择" @click="handleSelect(row)" />
+      </el-table-column>
+      <el-table-column label="流程描述" align="center" prop="description" />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleSelect(scope.row)">
+            <Icon icon="ep:plus" /> 选择
+          </el-button>
         </template>
-      </XTable>
-    </div>
-    <!-- 第二步，填写表单，进行流程的提交 -->
-    <div v-else>
-      <el-card class="box-card">
-        <div class="clearfix">
-          <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
-          <XButton
-            style="float: right"
-            type="primary"
-            preIcon="ep:delete"
-            title="选择其它流程"
-            @click="selectProcessInstance = undefined"
-          />
-        </div>
-        <el-col :span="16" :offset="6" style="margin-top: 20px">
-          <form-create
-            :rule="detailForm.rule"
-            v-model:api="fApi"
-            :option="detailForm.option"
-            @submit="submitForm"
-          />
-        </el-col>
-      </el-card>
-      <!-- 流程图预览 -->
-      <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
-    </div>
+      </el-table-column>
+    </el-table>
+  </ContentWrap>
+
+  <!-- 第二步，填写表单，进行流程的提交 -->
+  <ContentWrap v-else>
+    <el-card class="box-card">
+      <div class="clearfix">
+        <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
+        <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined">
+          <Icon icon="ep:delete" /> 选择其它流程
+        </el-button>
+      </div>
+      <el-col :span="16" :offset="6" style="margin-top: 20px">
+        <form-create
+          :rule="detailForm.rule"
+          v-model:api="fApi"
+          :option="detailForm.option"
+          @submit="submitForm"
+        />
+      </el-col>
+    </el-card>
+    <!-- 流程图预览 -->
+    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
   </ContentWrap>
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
-// 业务相关的 import
-import { allSchemas } from './process.create'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { setConfAndFields2 } from '@/utils/formCreate'
@@ -55,28 +57,32 @@ const router = useRouter() // 路由
 const message = useMessage() // 消息
 
 // ========== 列表相关 ==========
-
-const [registerTable] = useXTable({
-  allSchemas: allSchemas,
-  params: {
-    suspensionState: 1
-  },
-  getListApi: DefinitionApi.getProcessDefinitionList,
-  isList: true
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  suspensionState: 1
 })
 
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await DefinitionApi.getProcessDefinitionList(queryParams)
+  } finally {
+    loading.value = false
+  }
+}
+
 // ========== 表单相关 ==========
-
+const bpmnXML = ref(null) // BPMN 数据
 const fApi = ref<ApiAttrs>()
-
-// 流程表单详情
 const detailForm = ref({
+  // 流程表单详情
   rule: [],
   option: {}
 })
-
-// 流程表单
 const selectProcessInstance = ref() // 选择的流程实例
+
 /** 处理选择流程的按钮操作 **/
 const handleSelect = async (row) => {
   // 设置选择的流程
@@ -86,11 +92,8 @@ const handleSelect = async (row) => {
   if (row.formType == 10) {
     // 设置表单
     setConfAndFields2(detailForm, row.formConf, row.formFields)
-
     // 加载流程图
-    DefinitionApi.getProcessDefinitionBpmnXML(row.id).then((response) => {
-      bpmnXML.value = response
-    })
+    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
     await router.push({
@@ -105,7 +108,6 @@ const submitForm = async (formData) => {
   if (!fApi.value || !selectProcessInstance.value) {
     return
   }
-
   // 提交请求
   fApi.value.btn.loading(true)
   try {
@@ -121,8 +123,8 @@ const submitForm = async (formData) => {
   }
 }
 
-// ========== 流程图相关 ==========
-
-// // BPMN 数据
-const bpmnXML = ref(null)
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
 </script>
diff --git a/src/views/bpm/processInstance/create/process.create.ts b/src/views/bpm/processInstance/create/process.create.ts
deleted file mode 100644
index 7516c0b4..00000000
--- a/src/views/bpm/processInstance/create/process.create.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// crudSchemas
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: null,
-  action: true,
-  columns: [
-    {
-      title: '流程名称',
-      field: 'name'
-    },
-    {
-      title: '流程分类',
-      field: 'category',
-      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
-      dictClass: 'number',
-      table: {
-        slots: {
-          default: 'category_default'
-        }
-      }
-    },
-    {
-      title: '流程版本',
-      field: 'version',
-      table: {
-        slots: {
-          default: 'version_default'
-        }
-      }
-    },
-    {
-      title: '流程描述',
-      field: 'description'
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From 66d412c10ada2e8200a72b947c38073b7019b532 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 09:24:12 +0800
Subject: [PATCH 16/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AREVIEW?=
 =?UTF-8?q?=20=E5=85=AC=E4=BC=97=E5=8F=B7=E6=A0=87=E7=AD=BE=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/account/index.vue    | 14 +++---
 src/views/mp/statistics/index.vue | 71 +++++++++++++------------------
 2 files changed, 36 insertions(+), 49 deletions(-)

diff --git a/src/views/mp/account/index.vue b/src/views/mp/account/index.vue
index 3489998b..2629c658 100644
--- a/src/views/mp/account/index.vue
+++ b/src/views/mp/account/index.vue
@@ -121,13 +121,13 @@ const queryFormRef = ref() // 搜索的表单
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
-  // 处理查询参数
-  let params = { ...queryParams }
-  // 执行查询
-  const data = await AccountApi.getAccountPage(params)
-  list.value = data.list
-  total.value = data.total
-  loading.value = false
+  try {
+    const data = await AccountApi.getAccountPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 搜索按钮操作 */
diff --git a/src/views/mp/statistics/index.vue b/src/views/mp/statistics/index.vue
index 9411b674..d1dcb53c 100644
--- a/src/views/mp/statistics/index.vue
+++ b/src/views/mp/statistics/index.vue
@@ -5,7 +5,7 @@
       <el-form-item label="公众号" prop="accountId">
         <el-select v-model="accountId" @change="getSummary">
           <el-option
-            v-for="item in accounts"
+            v-for="item in accountList"
             :key="parseInt(item.id)"
             :label="item.name"
             :value="parseInt(item.id)"
@@ -83,17 +83,16 @@
 </template>
 
 <script setup lang="ts" name="MpStatistics">
-// 引入基本模板
 import * as echarts from 'echarts'
 import {
   getInterfaceSummary,
   getUpstreamMessage,
   getUserCumulate,
   getUserSummary
-} from '@/api/mp/statistics'
-import { addTime, beginOfDay, betweenDay, endOfDay, formatDate } from '@/utils/dateUtils'
-import { getSimpleAccountList } from '@/api/mp/account'
-
+} from '@/api/mp/statistics' // TODO 改成 StatisticsApi 整体引入
+import { addTime, beginOfDay, betweenDay, endOfDay } from '@/utils/dateUtils' // TODO 可以改到 formatTime 里
+import { formatDate } from '@/utils/formatTime'
+import * as MpAccountApi from '@/api/mp/account'
 const message = useMessage() // 消息弹窗
 
 const defaultTime = ref<[Date, Date]>([
@@ -105,18 +104,13 @@ const dateRange = ref([
   endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
 ]) // -1 天
 const accountId = ref()
-const accounts = ref([
-  {
-    id: '0',
-    name: ''
-  }
-])
+const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
 const userSummaryChartRef = ref()
 const userCumulateChartRef = ref()
 const upstreamMessageChartRef = ref()
 const interfaceSummaryChartRef = ref()
-
+// TODO 看看能不能用 https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/echart.html 组件
 const xAxisDate = ref([] as any[]) // X 轴的日期范围
 const userSummaryOption = reactive({
   // 用户增减数据
@@ -257,20 +251,16 @@ const interfaceSummaryOption = reactive({
   ]
 })
 
-onMounted(async () => {
-  // 获取公众号下拉列表
-  await getAccountList()
-  // 加载数据
-  getSummary()
-})
+/** 加载公众号账号的列表 */
 const getAccountList = async () => {
-  const data = await getSimpleAccountList()
-  accounts.value = data
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 默认选中第一个
-  if (accounts.value.length > 0) {
-    accountId.value = accounts.value[0].id
+  if (accountList.value.length > 0) {
+    accountId.value = accountList.value[0].id
   }
 }
+
+// TODO 一些方法的注释补全下
 const getSummary = () => {
   // 如果没有选中公众号账号，则进行提示。
   if (!accountId) {
@@ -286,7 +276,7 @@ const getSummary = () => {
   const days = betweenDay(dateRange.value[0], dateRange.value[1]) // 相差天数
   for (let i = 0; i <= days; i++) {
     xAxisDate.value.push(
-      formatDate(addTime(dateRange.value[0], 3600 * 1000 * 24 * i), 'yyyy-MM-dd')
+      formatDate(addTime(dateRange.value[0], 3600 * 1000 * 24 * i), 'YYYY-MM-DD')
     )
   }
 
@@ -296,6 +286,7 @@ const getSummary = () => {
   initUpstreamMessageChart()
   interfaceSummaryChart()
 }
+
 const initUserSummaryChart = async () => {
   userSummaryOption.xAxis.data = []
   userSummaryOption.series[0].data = []
@@ -303,18 +294,14 @@ const initUserSummaryChart = async () => {
   try {
     const data = await getUserSummary({
       accountId: accountId.value,
-      date: [
-        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
-        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
-      ]
+      date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
-
     userSummaryOption.xAxis.data = xAxisDate.value
     // 处理数据
     xAxisDate.value.forEach((date, index) => {
       data.forEach((item) => {
         // 匹配日期
-        const refDate = formatDate(new Date(item.refDate), 'yyyy-MM-dd')
+        const refDate = formatDate(new Date(item.refDate), 'YYYY-MM-DD')
         if (refDate.indexOf(date) === -1) {
           return
         }
@@ -328,6 +315,7 @@ const initUserSummaryChart = async () => {
     userSummaryChart.setOption(userSummaryOption)
   } catch {}
 }
+
 const initUserCumulateChart = async () => {
   userCumulateOption.xAxis.data = []
   userCumulateOption.series[0].data = []
@@ -335,10 +323,7 @@ const initUserCumulateChart = async () => {
   try {
     const data = await getUserCumulate({
       accountId: accountId.value,
-      date: [
-        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
-        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
-      ]
+      date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
     userCumulateOption.xAxis.data = xAxisDate.value
     // 处理数据
@@ -358,10 +343,7 @@ const initUpstreamMessageChart = async () => {
   try {
     const data = await getUpstreamMessage({
       accountId: accountId.value,
-      date: [
-        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
-        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
-      ]
+      date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
     upstreamMessageOption.xAxis.data = xAxisDate.value
     // 处理数据
@@ -384,10 +366,7 @@ const interfaceSummaryChart = async () => {
   try {
     const data = await getInterfaceSummary({
       accountId: accountId.value,
-      date: [
-        formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
-        formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
-      ]
+      date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
     interfaceSummaryOption.xAxis.data = xAxisDate.value
     // 处理数据
@@ -402,4 +381,12 @@ const interfaceSummaryChart = async () => {
     interfaceSummaryChart.setOption(interfaceSummaryOption)
   } catch {}
 }
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取公众号下拉列表
+  await getAccountList()
+  // 加载数据
+  getSummary()
+})
 </script>

From 944015484a4442682c64fb6a56d8756573c3d0ca Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 28 Mar 2023 11:27:08 +0800
Subject: [PATCH 17/29] =?UTF-8?q?1=E3=80=81=E9=85=8D=E5=90=88=E5=9C=B0?=
 =?UTF-8?q?=E5=8C=BA=E7=AE=A1=E7=90=86=E6=8E=A5=E5=8F=A3=E7=9A=84api?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=EF=BC=8C=E5=90=8E=E7=AB=AF=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=9B=B8=E5=BA=94=E5=AD=97=E6=AE=B5=E5=8F=AF=E4=BB=A5=E4=B8=8D?=
 =?UTF-8?q?=E8=A6=81=E6=AD=A4=E6=96=87=E4=BB=B6=202=E3=80=81=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E8=AE=BE=E6=96=BD/=E6=96=87=E4=BB=B6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86/=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=20=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=A4=B1=E8=B4=A5=E6=97=A0=E6=B3=95=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=8F=AA=E8=83=BD=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2=E6=89=8D?=
 =?UTF-8?q?=E8=83=BD=E4=B8=8A=E4=BC=A0bug=203=E3=80=81=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E8=AE=BE=E6=96=BD/=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86/?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=98=AF=E4=B8=8B=E6=8B=89=E6=A1=86=E6=98=BE=E7=A4=BA0=20?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=BAnull?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/fileConfig/index.ts    |  2 +-
 src/config/axios/request.ts          | 50 ++++++++++++++++++++++++++++
 src/views/infra/fileConfig/index.vue |  4 +--
 src/views/infra/fileList/index.vue   |  6 +++-
 4 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/config/axios/request.ts

diff --git a/src/api/infra/fileConfig/index.ts b/src/api/infra/fileConfig/index.ts
index 2151141c..9a4f625c 100644
--- a/src/api/infra/fileConfig/index.ts
+++ b/src/api/infra/fileConfig/index.ts
@@ -16,7 +16,7 @@ export interface FileClientConfig {
 export interface FileConfigVO {
   id: number
   name: string
-  storage: number
+  storage: any
   master: boolean
   visible: boolean
   config: FileClientConfig
diff --git a/src/config/axios/request.ts b/src/config/axios/request.ts
new file mode 100644
index 00000000..d65842c2
--- /dev/null
+++ b/src/config/axios/request.ts
@@ -0,0 +1,50 @@
+import { service } from './service'
+
+import { config } from './config'
+
+const { default_headers } = config
+
+const request = (option: any) => {
+  const { url, method, params, data, headersType, responseType } = option
+  return service({
+    url: url,
+    method,
+    params,
+    data,
+    responseType: responseType,
+    headers: {
+      'Content-Type': headersType || default_headers
+    }
+  })
+}
+export default {
+  get: async <T = any>(option: any) => {
+    const res = await request({ method: 'GET', ...option })
+    return res as unknown as T
+  },
+  post: async <T = any>(option: any) => {
+    const res = await request({ method: 'POST', ...option })
+    return res as unknown as T
+  },
+  delete: async <T = any>(option: any) => {
+    const res = await request({ method: 'DELETE', ...option })
+    return res as unknown as T
+  },
+  put: async <T = any>(option: any) => {
+    const res = await request({ method: 'PUT', ...option })
+    return res as unknown as T
+  },
+  patch: async <T = any>(option: any) => {
+    const res = await request({ method: 'PATCH', ...option })
+    return res as unknown as T
+  },
+  download: async <T = any>(option: any) => {
+    const res = await request({ method: 'GET', responseType: 'blob', ...option })
+    return res as unknown as Promise<T>
+  },
+  upload: async <T = any>(option: any) => {
+    option.headersType = 'multipart/form-data'
+    const res = await request({ method: 'POST', ...option })
+    return res as unknown as Promise<T>
+  }
+}
diff --git a/src/views/infra/fileConfig/index.vue b/src/views/infra/fileConfig/index.vue
index 9d796a65..bd9a978a 100644
--- a/src/views/infra/fileConfig/index.vue
+++ b/src/views/infra/fileConfig/index.vue
@@ -183,7 +183,7 @@ const detailData = ref() // 详情 Ref
 const form = ref<FileConfigApi.FileConfigVO>({
   id: 0,
   name: '',
-  storage: 0,
+  storage: null,
   master: false,
   visible: false,
   config: {
@@ -216,7 +216,7 @@ const handleCreate = (formEl: FormInstance | undefined) => {
   form.value = {
     id: 0,
     name: '',
-    storage: 0,
+    storage: null,
     master: false,
     visible: false,
     config: {
diff --git a/src/views/infra/fileList/index.vue b/src/views/infra/fileList/index.vue
index cda8b68d..b9bfb815 100644
--- a/src/views/infra/fileList/index.vue
+++ b/src/views/infra/fileList/index.vue
@@ -59,6 +59,7 @@
       :on-exceed="handleExceed"
       :on-success="handleFileSuccess"
       :on-error="excelUploadError"
+      :before-remove="beforeRemove"
       :auto-upload="false"
       accept=".jpg, .png, .gif"
     >
@@ -82,7 +83,7 @@
   </XModal>
 </template>
 <script setup lang="ts" name="FileList">
-import type { UploadInstance, UploadRawFile } from 'element-plus'
+import type { UploadInstance, UploadRawFile, UploadProps } from 'element-plus'
 // 业务相关的 import
 import { allSchemas } from './fileList.data'
 import * as FileApi from '@/api/infra/fileList'
@@ -141,6 +142,9 @@ const handleFileSuccess = async (response: any): Promise<void> => {
   uploadDisabled.value = false
   await reload()
 }
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  uploadDisabled.value = false
+}
 // 文件数超出提示
 const handleExceed = (): void => {
   message.error('最多只能上传一个文件！')

From 90959702ee4c232d05098e84000d08111a8eb84e Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 28 Mar 2023 13:41:56 +0800
Subject: [PATCH 18/29] =?UTF-8?q?=E9=82=AE=E4=BB=B6=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=EF=BC=8C=E5=88=9B=E5=BB=BA=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=8D=E6=AD=A3=E7=A1=AE=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=8F=82=E6=95=B0=E9=94=AE=E5=90=8D=EF=BC=8C=E9=94=AE?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E4=BF=AE=E6=94=B9=EF=BC=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E6=97=B6=E5=8F=AA=E8=AF=BB=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=97=B6?=
 =?UTF-8?q?=E6=AD=A3=E5=B8=B8=20=E7=A7=9F=E6=88=B7=E5=A5=97=E9=A4=90?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=A4=87=E6=B3=A8=E5=8F=8A=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E6=98=BE=E7=A4=BA=EF=BC=88=E5=90=8Cvue2?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/form/formEditor.vue             |   8 +-
 src/views/bpm/model/index.vue                 |   8 +-
 src/views/infra/config/config.data.ts         |  90 +++++
 src/views/infra/config/form.vue               | 131 -------
 src/views/infra/config/index.vue              | 352 +++++++++---------
 src/views/system/mail/log/log.data.ts         |   3 +-
 .../tenantPackage/tenantPackage.data.ts       |   2 +-
 7 files changed, 269 insertions(+), 325 deletions(-)
 create mode 100644 src/views/infra/config/config.data.ts
 delete mode 100644 src/views/infra/config/form.vue

diff --git a/src/views/bpm/form/formEditor.vue b/src/views/bpm/form/formEditor.vue
index 1070739e..989ea56e 100644
--- a/src/views/bpm/form/formEditor.vue
+++ b/src/views/bpm/form/formEditor.vue
@@ -12,9 +12,11 @@
       <div ref="editor" v-if="dialogVisible1">
         <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
         <el-scrollbar height="580">
-          <pre>
-            {{ formValue }}
-          </pre>
+          <div v-highlight>
+            <code class="hljs">
+              {{ formValue }}
+            </code>
+          </div>
         </el-scrollbar>
       </div>
     </Dialog>
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 01a97d3f..25136e13 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -146,8 +146,8 @@
             style="width: 100%"
           >
             <el-option
-              v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
-              :key="dict.value"
+              v-for="(dict, index) in getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
+              :key="index"
               :label="dict.label"
               :value="dict.value"
             />
@@ -434,9 +434,9 @@ const handleUpdate = async (rowId: number) => {
   // 设置数据
   saveForm.value = await ModelApi.getModelApi(rowId)
   if (saveForm.value.category == null) {
-    saveForm.value.category = 1
+    saveForm.value.category = '1'
   } else {
-    saveForm.value.category = Number(saveForm.value.category)
+    saveForm.value.category = saveForm.value.category
   }
 }
 
diff --git a/src/views/infra/config/config.data.ts b/src/views/infra/config/config.data.ts
new file mode 100644
index 00000000..41acfa15
--- /dev/null
+++ b/src/views/infra/config/config.data.ts
@@ -0,0 +1,90 @@
+import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+const { t } = useI18n() // 国际化
+
+// 表单校验
+export const rules = reactive({
+  category: [required],
+  name: [required],
+  key: [required],
+  value: [required]
+})
+
+// CrudSchema
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: null,
+  action: true,
+  columns: [
+    {
+      title: '参数分类',
+      field: 'category'
+    },
+    {
+      title: '参数名称',
+      field: 'name',
+      isSearch: true
+    },
+    {
+      title: '参数键名',
+      field: 'key',
+      isSearch: true
+    },
+    {
+      title: '参数键值',
+      field: 'value'
+    },
+    {
+      title: '系统内置',
+      field: 'type',
+      dictType: DICT_TYPE.INFRA_CONFIG_TYPE,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '是否可见',
+      field: 'visible',
+      table: {
+        slots: {
+          default: 'visible_default'
+        }
+      },
+      form: {
+        component: 'RadioButton',
+        componentProps: {
+          options: [
+            { label: '是', value: true },
+            { label: '否', value: false }
+          ]
+        }
+      }
+    },
+    {
+      title: t('form.remark'),
+      field: 'remark',
+      isTable: false,
+      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)
diff --git a/src/views/infra/config/form.vue b/src/views/infra/config/form.vue
deleted file mode 100644
index 30e2f4d9..00000000
--- a/src/views/infra/config/form.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<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="category">
-        <el-input v-model="formData.category" placeholder="请输入参数分类" />
-      </el-form-item>
-      <el-form-item label="参数名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入参数名称" />
-      </el-form-item>
-      <el-form-item label="参数键名" prop="key">
-        <el-input v-model="formData.key" 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="visible">
-        <el-radio-group v-model="formData.visible">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="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, getBoolDictOptions } from '@/utils/dict'
-import * as ConfigApi from '@/api/infra/config'
-
-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,
-  category: '',
-  name: '',
-  key: '',
-  value: '',
-  visible: true,
-  remark: ''
-})
-const formRules = reactive({
-  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
-  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
-  visible: [{ 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 ConfigApi.getConfig(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 ConfigApi.ConfigVO
-    if (formType.value === 'create') {
-      await ConfigApi.createConfig(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await ConfigApi.updateConfig(data)
-      message.success(t('common.updateSuccess'))
-    }
-    modelVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    category: '',
-    name: '',
-    key: '',
-    value: '',
-    visible: true,
-    remark: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index e75b09da..b2bc8a8b 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -1,203 +1,185 @@
 <template>
-  <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="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入参数键名"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="系统内置" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择系统内置" clearable>
-          <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
-            :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"
-          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="['infra:config:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['infra:config:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-
+  <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="category" />
-      <el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
-      <el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
-      <el-table-column label="参数键值" align="center" prop="value" />
-      <el-table-column label="是否可见" align="center" prop="visible">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.visible" />
-        </template>
-      </el-table-column>
-      <el-table-column label="系统内置" align="center" prop="type">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <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="['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>
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：新增 -->
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          :title="t('action.add')"
+          v-hasPermi="['infra:config:create']"
+          @click="handleCreate()"
+        />
+        <!-- 操作：导出 -->
+        <XButton
+          type="warning"
+          preIcon="ep:download"
+          :title="t('action.export')"
+          v-hasPermi="['infra:config:export']"
+          @click="exportList('配置.xls')"
+        />
+      </template>
+      <template #visible_default="{ row }">
+        <span>{{ row.visible ? '是' : '否' }} </span>
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：修改 -->
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
+          v-hasPermi="['infra:config:update']"
+          @click="handleUpdate(row.id)"
+        />
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['infra:config:query']"
+          @click="handleDetail(row.id)"
+        />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
+          v-hasPermi="['infra:config:delete']"
+          @click="deleteData(row.id)"
+        />
+      </template>
+    </XTable>
+  </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <config-form ref="modalRef" @success="getList" />
+  <XModal 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 #visible="{ row }">
+        <span>{{ row.visible ? '是' : '否' }} </span>
+      </template>
+    </Descriptions>
+    <!-- 操作按钮 -->
+    <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="dialogVisible = false" />
+    </template>
+  </XModal>
 </template>
 <script setup lang="ts" name="Config">
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
+import type { FormExpose } from '@/components/Form'
+// 业务相关的 import
 import * as ConfigApi from '@/api/infra/config'
-import ConfigForm from './form.vue'
-const message = useMessage() // 消息弹窗
+import { rules, allSchemas } from './config.data'
+
 const { t } = useI18n() // 国际化
-
-const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  name: undefined,
-  key: undefined,
-  type: undefined,
-  createTime: []
+const message = useMessage() // 消息弹窗
+// 列表相关的变量
+const [registerTable, { reload, deleteData, exportList }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: ConfigApi.getConfigPageApi,
+  deleteApi: ConfigApi.deleteConfigApi,
+  exportListApi: ConfigApi.exportConfigApi
 })
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
-/** 查询参数列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ConfigApi.getConfigPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
+// ========== 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 handleCreate = async () => {
+  setDialogTile('create')
+  await nextTick()
+  console.log(allSchemas.formSchema, 'allSchemas.formSchema')
+  if (allSchemas.formSchema[2].field !== 'key') {
+    unref(formRef)?.addSchema(
+      {
+        field: 'key',
+        label: '参数键名',
+        component: 'Input'
+      },
+      2
+    )
+    unref(formRef)?.addSchema(
+      {
+        field: 'value',
+        label: '参数键值',
+        component: 'Input'
+      },
+      3
+    )
   }
 }
 
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
+// 修改操作
+const handleUpdate = async (rowId: number) => {
+  setDialogTile('update')
+  // 设置数据
+  const res = await ConfigApi.getConfigApi(rowId)
+  unref(formRef)?.delSchema('key')
+  unref(formRef)?.delSchema('value')
+
+  unref(formRef)?.setValues(res)
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
+// 详情操作
+const handleDetail = async (rowId: number) => {
+  setDialogTile('detail')
+  const res = await ConfigApi.getConfigApi(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 ConfigApi.ConfigVO
+        if (actionType.value === 'create') {
+          await ConfigApi.createConfigApi(data)
+          message.success(t('common.createSuccess'))
+        } else {
+          await ConfigApi.updateConfigApi(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 ConfigApi.deleteConfig(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await ConfigApi.exportConfigApi(queryParams)
-    download.excel(data, '参数配置.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
 </script>
diff --git a/src/views/system/mail/log/log.data.ts b/src/views/system/mail/log/log.data.ts
index d389bce5..f01cb549 100644
--- a/src/views/system/mail/log/log.data.ts
+++ b/src/views/system/mail/log/log.data.ts
@@ -114,7 +114,8 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: '创建时间',
       field: 'createTime',
-      isTable: false
+      isTable: false,
+      formatter: 'formatDate'
     }
   ]
 })
diff --git a/src/views/system/tenantPackage/tenantPackage.data.ts b/src/views/system/tenantPackage/tenantPackage.data.ts
index 47db56d4..d57dee29 100644
--- a/src/views/system/tenantPackage/tenantPackage.data.ts
+++ b/src/views/system/tenantPackage/tenantPackage.data.ts
@@ -43,7 +43,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: t('form.remark'),
       field: 'remark',
-      isTable: false,
+      isTable: true,
       isSearch: true,
       form: {
         component: 'Input',

From ffd2b5b8eee96c95bc379ae9dbe1992f6b6bcbd9 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 28 Mar 2023 16:10:07 +0800
Subject: [PATCH 19/29] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86/?=
 =?UTF-8?q?=E7=A7=9F=E6=88=B7=E7=AE=A1=E7=90=86/=E7=A7=9F=E6=88=B7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=96=B0=E5=A2=9E=E6=97=B6=E8=B4=A6=E5=8F=B7?=
 =?UTF-8?q?=E9=A2=9D=E5=BA=A6=E9=BB=98=E8=AE=A4=E4=B8=BA1=20=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E4=B8=8D=E9=80=89=E6=8B=A9=E6=80=A7?=
 =?UTF-8?q?=E5=88=AB=20=E4=BF=AE=E6=94=B9=E6=97=B6=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=A1=86=E4=B8=BA0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/tenant/tenant.data.ts | 6 +++++-
 src/views/system/user/index.vue        | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/views/system/tenant/tenant.data.ts b/src/views/system/tenant/tenant.data.ts
index 1137b44a..4d9e6d33 100644
--- a/src/views/system/tenant/tenant.data.ts
+++ b/src/views/system/tenant/tenant.data.ts
@@ -143,7 +143,11 @@ const crudSchemas = reactive<VxeCrudSchema>({
         }
       },
       form: {
-        component: 'InputNumber'
+        component: 'InputNumber',
+        value: null,
+        componentProps: {
+          min: 0
+        }
       }
     },
     {
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 2f9ba9b0..c59e6d18 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -394,6 +394,7 @@ const handleUpdate = async (rowId: number) => {
   unref(formRef)?.delSchema('password')
   // 设置数据
   const res = await UserApi.getUserApi(rowId)
+  if (res.sex == 0) res.sex = null
   unref(formRef)?.setValues(res)
 }
 const detailData = ref()

From 46fc6ce1b7a23e5f9fb9cf02af15fd3cd97d6849 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 28 Mar 2023 17:24:20 +0800
Subject: [PATCH 20/29] =?UTF-8?q?=E6=9C=80=E5=B0=8F=E5=80=BC=E4=B8=BA0?=
 =?UTF-8?q?=E4=BC=9A=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/tenant/tenant.data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/system/tenant/tenant.data.ts b/src/views/system/tenant/tenant.data.ts
index 4d9e6d33..2c1e846a 100644
--- a/src/views/system/tenant/tenant.data.ts
+++ b/src/views/system/tenant/tenant.data.ts
@@ -146,7 +146,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
         component: 'InputNumber',
         value: null,
         componentProps: {
-          min: 0
+          min: 1
         }
       }
     },

From 0503b7d0780dc8b616b13cb5ebc2cdd71472d5c9 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 28 Mar 2023 18:00:18 +0800
Subject: [PATCH 21/29] =?UTF-8?q?=E6=96=B0=E7=9A=84=E7=A7=9F=E6=88=B7?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E9=80=89=E6=8B=A9=E5=B2=97=E4=BD=8D=E6=89=8D?=
 =?UTF-8?q?=E8=83=BD=E4=BF=AE=E6=94=B9=EF=BC=8C=E6=9A=82=E5=B0=86=E5=85=B6?=
 =?UTF-8?q?=E8=AE=BE=E6=88=90=E5=BF=85=E5=A1=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/user.data.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/system/user/user.data.ts b/src/views/system/user/user.data.ts
index 3a702c04..7f7384eb 100644
--- a/src/views/system/user/user.data.ts
+++ b/src/views/system/user/user.data.ts
@@ -28,6 +28,7 @@ export const rules = reactive({
     }
   ],
   status: [required],
+  postIds: [{ required: true, message: '请选择岗位', trigger: ['blur', 'change'] }],
   mobile: [
     required,
     {

From 658150c1c8e7f7d49cbb378a450914ba5c12bc98 Mon Sep 17 00:00:00 2001
From: kinlon92 <zhangjinlong1211@126.com>
Date: Tue, 28 Mar 2023 18:23:58 +0800
Subject: [PATCH 22/29] =?UTF-8?q?Vue3=E9=87=8D=E6=9E=84=EF=BC=9A=E5=85=AC?=
 =?UTF-8?q?=E4=BC=97=E5=8F=B7=E7=BB=9F=E8=AE=A1=E4=BC=98=E5=8C=96=20TODO?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dateUtils.ts            | 79 ----------------------------
 src/utils/formatTime.ts           | 51 ++++++++++++++++++
 src/views/mp/statistics/index.vue | 87 +++++++++++--------------------
 3 files changed, 82 insertions(+), 135 deletions(-)
 delete mode 100644 src/utils/dateUtils.ts

diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
deleted file mode 100644
index 617a88af..00000000
--- a/src/utils/dateUtils.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * 将毫秒，转换成时间字符串。例如说，xx 分钟
- *
- * @param ms 毫秒
- * @returns {string} 字符串
- */
-export function getDate(ms) {
-  const day = Math.floor(ms / (24 * 60 * 60 * 1000))
-  const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
-  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
-  const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
-  if (day > 0) {
-    return day + '天' + hour + '小时' + minute + '分钟'
-  }
-  if (hour > 0) {
-    return hour + '小时' + minute + '分钟'
-  }
-  if (minute > 0) {
-    return minute + '分钟'
-  }
-  if (second > 0) {
-    return second + '秒'
-  } else {
-    return 0 + '秒'
-  }
-}
-
-export function beginOfDay(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
-}
-
-export function endOfDay(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999)
-}
-
-export function betweenDay(date1, date2) {
-  date1 = convertDate(date1)
-  date2 = convertDate(date2)
-  // 计算差值
-  return Math.floor((date2.getTime() - date1.getTime()) / (24 * 3600 * 1000))
-}
-
-export function formatDate(date, fmt) {
-  date = convertDate(date)
-  const o = {
-    'M+': date.getMonth() + 1, //月份
-    'd+': date.getDate(), //日
-    'H+': date.getHours(), //小时
-    'm+': date.getMinutes(), //分
-    's+': date.getSeconds(), //秒
-    'q+': Math.floor((date.getMonth() + 3) / 3), //季度
-    S: date.getMilliseconds() //毫秒
-  }
-  if (/(y+)/.test(fmt)) {
-    // 年份
-    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
-  }
-  for (const k in o) {
-    if (new RegExp('(' + k + ')').test(fmt)) {
-      fmt = fmt.replace(
-        RegExp.$1,
-        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
-      )
-    }
-  }
-  return fmt
-}
-
-export function addTime(date, time) {
-  date = convertDate(date)
-  return new Date(date.getTime() + time)
-}
-
-export function convertDate(date) {
-  if (typeof date === 'string') {
-    return new Date(date)
-  }
-  return date
-}
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index 008bc929..d4dea9b5 100644
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -196,3 +196,54 @@ export const dateFormatter = (row, column, cellValue) => {
   }
   return formatDate(cellValue)
 }
+
+/**
+ * 设置起始日期，时间为00:00:00
+ * @param param 传入日期
+ * @returns 带时间00:00:00的日期
+ */
+export function beginOfDay(param: Date) {
+  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0, 0)
+}
+
+/**
+ * 设置结束日期，时间为23:59:59
+ * @param param 传入日期
+ * @returns 带时间23:59:59的日期
+ */
+export function endOfDay(param: Date) {
+  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59, 999)
+}
+
+/**
+ * 计算两个日期间隔天数
+ * @param param1 日期1
+ * @param param2 日期2
+ */
+export function betweenDay(param1: Date, param2: Date) {
+  param1 = convertDate(param1)
+  param2 = convertDate(param2)
+  // 计算差值
+  return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
+}
+
+/**
+ * 日期计算
+ * @param param1 日期
+ * @param param2 添加的时间
+ */
+export function addTime(param1: Date, param2: number) {
+  param1 = convertDate(param1)
+  return new Date(param1.getTime() + param2)
+}
+
+/**
+ * 日期转换
+ * @param param 日期
+ */
+export function convertDate(param: Date | string) {
+  if (typeof param === 'string') {
+    return new Date(param)
+  }
+  return param
+}
diff --git a/src/views/mp/statistics/index.vue b/src/views/mp/statistics/index.vue
index d1dcb53c..c625f9dc 100644
--- a/src/views/mp/statistics/index.vue
+++ b/src/views/mp/statistics/index.vue
@@ -6,9 +6,9 @@
         <el-select v-model="accountId" @change="getSummary">
           <el-option
             v-for="item in accountList"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.name"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
@@ -37,9 +37,7 @@
               <span>用户增减数据</span>
             </div>
           </template>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="userSummaryChartRef" style="height: 420px"></div>
-          </div>
+          <Echart :options="userSummaryOption" :height="420" />
         </el-card>
       </el-col>
       <el-col :span="12" class="card-box">
@@ -49,9 +47,7 @@
               <span>累计用户数据</span>
             </div>
           </template>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="userCumulateChartRef" style="height: 420px"></div>
-          </div>
+          <Echart :options="userCumulateOption" :height="420" />
         </el-card>
       </el-col>
       <el-col :span="12" class="card-box">
@@ -61,9 +57,7 @@
               <span>消息概况数据</span>
             </div>
           </template>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="upstreamMessageChartRef" style="height: 420px"></div>
-          </div>
+          <Echart :options="upstreamMessageOption" :height="420" />
         </el-card>
       </el-col>
       <el-col :span="12" class="card-box">
@@ -73,9 +67,7 @@
               <span>接口分析数据</span>
             </div>
           </template>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="interfaceSummaryChartRef" style="height: 420px"></div>
-          </div>
+          <Echart :options="interfaceSummaryOption" :height="420" />
         </el-card>
       </el-col>
     </el-row>
@@ -83,38 +75,28 @@
 </template>
 
 <script setup lang="ts" name="MpStatistics">
-import * as echarts from 'echarts'
-import {
-  getInterfaceSummary,
-  getUpstreamMessage,
-  getUserCumulate,
-  getUserSummary
-} from '@/api/mp/statistics' // TODO 改成 StatisticsApi 整体引入
-import { addTime, beginOfDay, betweenDay, endOfDay } from '@/utils/dateUtils' // TODO 可以改到 formatTime 里
-import { formatDate } from '@/utils/formatTime'
+import * as StatisticsApi from '@/api/mp/statistics'
+import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
 import * as MpAccountApi from '@/api/mp/account'
 const message = useMessage() // 消息弹窗
 
+// 默认时间 开始时间00:00:00 结束时间23:59:59
 const defaultTime = ref<[Date, Date]>([
   new Date(2000, 1, 1, 0, 0, 0),
   new Date(2000, 2, 1, 23, 59, 59)
 ])
+// 默认开始时间是当前日期-7，结束时间是当前日期-1
 const dateRange = ref([
   beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
   endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
-]) // -1 天
+])
 const accountId = ref()
 const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
-const userSummaryChartRef = ref()
-const userCumulateChartRef = ref()
-const upstreamMessageChartRef = ref()
-const interfaceSummaryChartRef = ref()
-// TODO 看看能不能用 https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/echart.html 组件
 const xAxisDate = ref([] as any[]) // X 轴的日期范围
+// 用户增减数据图表配置项
 const userSummaryOption = reactive({
-  // 用户增减数据
-  color: ['#67C23A', '#e5323e'],
+  color: ['#67C23A', '#E5323E'],
   legend: {
     data: ['新增用户', '取消关注的用户']
   },
@@ -145,8 +127,8 @@ const userSummaryOption = reactive({
     }
   ]
 })
+// 累计用户数据图表配置项
 const userCumulateOption = reactive({
-  // 累计用户数据
   legend: {
     data: ['累计用户量']
   },
@@ -169,9 +151,9 @@ const userCumulateOption = reactive({
     }
   ]
 })
+// 消息发送概况数据图表配置项
 const upstreamMessageOption = reactive({
-  // 消息发送概况数据
-  color: ['#67C23A', '#e5323e'],
+  color: ['#67C23A', '#E5323E'],
   legend: {
     data: ['用户发送人数', '用户发送条数']
   },
@@ -203,9 +185,9 @@ const upstreamMessageOption = reactive({
     }
   ]
 })
+// 接口分析况数据图表配置项
 const interfaceSummaryOption = reactive({
-  // 接口分析况数据
-  color: ['#67C23A', '#e5323e', '#E6A23C', '#409EFF'],
+  color: ['#67C23A', '#E5323E', '#E6A23C', '#409EFF'],
   legend: {
     data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时']
   },
@@ -260,7 +242,7 @@ const getAccountList = async () => {
   }
 }
 
-// TODO 一些方法的注释补全下
+/** 加载数据 */
 const getSummary = () => {
   // 如果没有选中公众号账号，则进行提示。
   if (!accountId) {
@@ -272,30 +254,33 @@ const getSummary = () => {
     message.error('时间间隔 7 天以内，请重新选择')
     return false
   }
+  // 清空横坐标日期
   xAxisDate.value = []
+  // 横坐标加载日期数据
   const days = betweenDay(dateRange.value[0], dateRange.value[1]) // 相差天数
   for (let i = 0; i <= days; i++) {
     xAxisDate.value.push(
       formatDate(addTime(dateRange.value[0], 3600 * 1000 * 24 * i), 'YYYY-MM-DD')
     )
   }
-
   // 初始化图表
   initUserSummaryChart()
   initUserCumulateChart()
   initUpstreamMessageChart()
   interfaceSummaryChart()
 }
-
+/** 用户增减数据 */
 const initUserSummaryChart = async () => {
   userSummaryOption.xAxis.data = []
   userSummaryOption.series[0].data = []
   userSummaryOption.series[1].data = []
   try {
-    const data = await getUserSummary({
+    // 用户增减数据
+    const data = await StatisticsApi.getUserSummary({
       accountId: accountId.value,
       date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
+    // 横坐标
     userSummaryOption.xAxis.data = xAxisDate.value
     // 处理数据
     xAxisDate.value.forEach((date, index) => {
@@ -310,18 +295,15 @@ const initUserSummaryChart = async () => {
         userSummaryOption.series[1].data[index] = item.cancelUser
       })
     })
-    // 绘制图表
-    const userSummaryChart = echarts.init(userSummaryChartRef.value)
-    userSummaryChart.setOption(userSummaryOption)
   } catch {}
 }
-
+/** 累计用户数据 */
 const initUserCumulateChart = async () => {
   userCumulateOption.xAxis.data = []
   userCumulateOption.series[0].data = []
   // 发起请求
   try {
-    const data = await getUserCumulate({
+    const data = await StatisticsApi.getUserCumulate({
       accountId: accountId.value,
       date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
@@ -330,18 +312,16 @@ const initUserCumulateChart = async () => {
     data.forEach((item, index) => {
       userCumulateOption.series[0].data[index] = item.cumulateUser
     })
-    // 绘制图表
-    const userCumulateChart = echarts.init(userCumulateChartRef.value)
-    userCumulateChart.setOption(userCumulateOption)
   } catch {}
 }
+/** 消息概况数据 */
 const initUpstreamMessageChart = async () => {
   upstreamMessageOption.xAxis.data = []
   upstreamMessageOption.series[0].data = []
   upstreamMessageOption.series[1].data = []
   // 发起请求
   try {
-    const data = await getUpstreamMessage({
+    const data = await StatisticsApi.getUpstreamMessage({
       accountId: accountId.value,
       date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
@@ -351,11 +331,9 @@ const initUpstreamMessageChart = async () => {
       upstreamMessageOption.series[0].data[index] = item.messageUser
       upstreamMessageOption.series[1].data[index] = item.messageCount
     })
-    // 绘制图表
-    const upstreamMessageChart = echarts.init(upstreamMessageChartRef.value)
-    upstreamMessageChart.setOption(upstreamMessageOption)
   } catch {}
 }
+/** 接口分析数据 */
 const interfaceSummaryChart = async () => {
   interfaceSummaryOption.xAxis.data = []
   interfaceSummaryOption.series[0].data = []
@@ -364,7 +342,7 @@ const interfaceSummaryChart = async () => {
   interfaceSummaryOption.series[3].data = []
   // 发起请求
   try {
-    const data = await getInterfaceSummary({
+    const data = await StatisticsApi.getInterfaceSummary({
       accountId: accountId.value,
       date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
     })
@@ -376,9 +354,6 @@ const interfaceSummaryChart = async () => {
       interfaceSummaryOption.series[2].data[index] = item.maxTimeCost
       interfaceSummaryOption.series[3].data[index] = item.totalTimeCost
     })
-    // 绘制图表
-    const interfaceSummaryChart = echarts.init(interfaceSummaryChartRef.value)
-    interfaceSummaryChart.setOption(interfaceSummaryOption)
   } catch {}
 }
 

From a4dea6c25465cea7c4ebf82e5ba3b9ed85166890 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 23:18:10 +0800
Subject: [PATCH 23/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AREVIEW?=
 =?UTF-8?q?=20=E7=AB=99=E5=86=85=E4=BF=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/notify/message/index.ts        |  22 +--
 src/views/bpm/definition/index.vue            |   2 +-
 src/views/bpm/form/index.vue                  |   2 +-
 src/views/bpm/group/index.vue                 |   2 +-
 src/views/bpm/model/index.vue                 |   2 +-
 src/views/bpm/taskAssignRule/index.vue        |   2 +-
 src/views/infra/apiErrorLog/index.vue         |   2 +-
 src/views/infra/config/index.vue              |   2 +-
 src/views/infra/dataSourceConfig/index.vue    |   2 +-
 src/views/infra/file/index.vue                |   2 +-
 src/views/infra/fileConfig/index.vue          |   2 +-
 src/views/mp/message/index.vue                |   2 +-
 src/views/mp/tag/index.vue                    |   2 +-
 src/views/system/dict/data.vue                |   2 +-
 src/views/system/loginlog/index.vue           |   2 +-
 src/views/system/menu/index.vue               |   2 +-
 .../{detail.vue => NotifyMessageDetail.vue}   |  10 +-
 src/views/system/notify/message/index.vue     |  43 ++---
 .../{detail.vue => MyNotifyMessageDetail.vue} |   6 +-
 src/views/system/notify/my/index.vue          | 157 +++++++-----------
 src/views/system/oauth2/token/index.vue       |   2 +-
 src/views/system/operatelog/index.vue         |   2 +-
 src/views/system/sensitiveWord/index.vue      |   2 +-
 src/views/system/sms/channel/index.vue        |   2 +-
 src/views/system/tenant/index.vue             |   2 +-
 25 files changed, 107 insertions(+), 171 deletions(-)
 rename src/views/system/notify/message/{detail.vue => NotifyMessageDetail.vue} (87%)
 rename src/views/system/notify/my/{detail.vue => MyNotifyMessageDetail.vue} (89%)

diff --git a/src/api/system/notify/message/index.ts b/src/api/system/notify/message/index.ts
index a42d75c2..e24c3f8c 100644
--- a/src/api/system/notify/message/index.ts
+++ b/src/api/system/notify/message/index.ts
@@ -15,31 +15,13 @@ export interface NotifyMessageVO {
   readTime: Date
 }
 
-export interface NotifyMessagePageReqVO extends PageParam {
-  userId?: number
-  userType?: number
-  templateCode?: string
-  templateType?: number
-  createTime?: Date[]
-}
-
-export interface NotifyMessageMyPageReqVO extends PageParam {
-  readStatus?: boolean
-  createTime?: Date[]
-}
-
 // 查询站内信消息列表
-export const getNotifyMessagePageApi = async (params: NotifyMessagePageReqVO) => {
+export const getNotifyMessagePage = async (params: PageParam) => {
   return await request.get({ url: '/system/notify-message/page', params })
 }
 
-// 查询站内信消息详情
-export const getNotifyMessageApi = async (id: number) => {
-  return await request.get({ url: '/system/notify-message/get?id=' + id })
-}
-
 // 获得我的站内信分页
-export const getMyNotifyMessagePage = async (params: NotifyMessageMyPageReqVO) => {
+export const getMyNotifyMessagePage = async (params: PageParam) => {
   return await request.get({ url: '/system/notify-message/my-page', params })
 }
 
diff --git a/src/views/bpm/definition/index.vue b/src/views/bpm/definition/index.vue
index ce643ff6..66a6a23b 100644
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@@ -110,7 +110,7 @@ const queryParams = reactive({
   key: query.key
 })
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index 7e14b3e3..616e60be 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -103,7 +103,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/bpm/group/index.vue b/src/views/bpm/group/index.vue
index 5829ebad..0b52e9a2 100644
--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -132,7 +132,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const userList = ref([]) // 用户列表
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index b19ed956..9a0d725f 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -248,7 +248,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/bpm/taskAssignRule/index.vue b/src/views/bpm/taskAssignRule/index.vue
index feea80a2..4a4e76f8 100644
--- a/src/views/bpm/taskAssignRule/index.vue
+++ b/src/views/bpm/taskAssignRule/index.vue
@@ -56,7 +56,7 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 const taskAssignScriptDictDatas = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/infra/apiErrorLog/index.vue b/src/views/infra/apiErrorLog/index.vue
index cfe4adb1..800b5043 100644
--- a/src/views/infra/apiErrorLog/index.vue
+++ b/src/views/infra/apiErrorLog/index.vue
@@ -182,7 +182,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index fcc3c12c..5fcafc07 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -153,7 +153,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/infra/dataSourceConfig/index.vue b/src/views/infra/dataSourceConfig/index.vue
index ff44cdd5..ab3523e7 100644
--- a/src/views/infra/dataSourceConfig/index.vue
+++ b/src/views/infra/dataSourceConfig/index.vue
@@ -66,7 +66,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref([]) // 列表的数据
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/infra/file/index.vue b/src/views/infra/file/index.vue
index adf9d3a4..32b35562 100644
--- a/src/views/infra/file/index.vue
+++ b/src/views/infra/file/index.vue
@@ -104,7 +104,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/infra/fileConfig/index.vue b/src/views/infra/fileConfig/index.vue
index ed0cfed7..ca0fac15 100644
--- a/src/views/infra/fileConfig/index.vue
+++ b/src/views/infra/fileConfig/index.vue
@@ -130,7 +130,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/mp/message/index.vue b/src/views/mp/message/index.vue
index 10145221..d9ddce0d 100644
--- a/src/views/mp/message/index.vue
+++ b/src/views/mp/message/index.vue
@@ -210,7 +210,7 @@ const open = ref(false) // 是否显示弹出层
 const userId = ref(0) // 操作的用户编号
 const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   // 如果没有选中公众号账号，则进行提示。
   if (!queryParams.accountId) {
diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
index 84e6fc17..ec083114 100644
--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
@@ -106,7 +106,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   // 如果没有选中公众号账号，则进行提示。
   if (!queryParams.accountId) {
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 7b159481..8492262a 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -130,7 +130,7 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const dicts = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/system/loginlog/index.vue b/src/views/system/loginlog/index.vue
index 7b1aca5f..c48957a7 100644
--- a/src/views/system/loginlog/index.vue
+++ b/src/views/system/loginlog/index.vue
@@ -123,7 +123,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 3baf3148..8feb066b 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -126,7 +126,7 @@ const queryFormRef = ref() // 搜索的表单
 const isExpandAll = ref(false) // 是否展开，默认全部折叠
 const refreshTable = ref(true) // 重新渲染表格状态
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/system/notify/message/detail.vue b/src/views/system/notify/message/NotifyMessageDetail.vue
similarity index 87%
rename from src/views/system/notify/message/detail.vue
rename to src/views/system/notify/message/NotifyMessageDetail.vue
index 0b146113..283575bb 100644
--- a/src/views/system/notify/message/detail.vue
+++ b/src/views/system/notify/message/NotifyMessageDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
+  <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500">
     <el-descriptions border :column="1">
       <el-descriptions-item label="编号" min-width="120">
         {{ detailData.id }}
@@ -32,10 +32,10 @@
         <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
       </el-descriptions-item>
       <el-descriptions-item label="阅读时间">
-        {{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }}
+        {{ formatDate(detailData.readTime) }}
       </el-descriptions-item>
       <el-descriptions-item label="创建时间">
-        {{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
+        {{ formatDate(detailData.createTime) }}
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
@@ -50,7 +50,7 @@ const detailLoading = ref(false) // 表单的加载中
 const detailData = ref() // 详情数据
 
 /** 打开弹窗 */
-const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
+const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
   modelVisible.value = true
   // 设置数据
   detailLoading.value = true
@@ -60,5 +60,5 @@ const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
     detailLoading.value = false
   }
 }
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
diff --git a/src/views/system/notify/message/index.vue b/src/views/system/notify/message/index.vue
index 06f98c62..9a39e7f6 100644
--- a/src/views/system/notify/message/index.vue
+++ b/src/views/system/notify/message/index.vue
@@ -25,10 +25,10 @@
           class="!w-240px"
         >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -49,10 +49,10 @@
           class="!w-240px"
         >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -76,7 +76,7 @@
 
   <!-- 列表 -->
   <content-wrap>
-    <el-table ref="tableRef" v-loading="loading" :data="list" :height="tableHeight">
+    <el-table v-loading="loading" :data="list">
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="用户类型" align="center" prop="userType">
         <template #default="scope">
@@ -84,7 +84,6 @@
         </template>
       </el-table-column>
       <el-table-column label="用户编号" align="center" prop="userId" width="80" />
-      <el-table-column label="模版编号" align="center" prop="templateId" width="80" />
       <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
       <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
       <el-table-column
@@ -127,12 +126,12 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" fixed="right">
         <template #default="scope">
           <el-button
             link
             type="primary"
-            @click="openModal(scope.row)"
+            @click="openDetail(scope.row)"
             v-hasPermi="['system:notify-message:query']"
           >
             详情
@@ -150,13 +149,13 @@
   </content-wrap>
 
   <!-- 表单弹窗：详情 -->
-  <notify-message-detail ref="modalRef" />
+  <NotifyMessageDetail ref="detailRef" />
 </template>
 <script setup lang="ts" name="NotifyMessage">
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
-import NotifyMessageDetail from './detail.vue'
+import NotifyMessageDetail from './NotifyMessageDetail.vue'
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -171,14 +170,12 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const tableRef = ref()
-const tableHeight = ref() // table高度
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await NotifyMessageApi.getNotifyMessagePageApi(queryParams)
+    const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -199,19 +196,13 @@ const resetQuery = () => {
 }
 
 /** 详情操作 */
-const modalRef = ref()
-const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
-  modalRef.value.openModal(data)
+const detailRef = ref()
+const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
+  detailRef.value.open(data)
 }
 
 /** 初始化 **/
 onMounted(() => {
   getList()
-  // TODO 感觉表格自适应高度体验很好的，目前简单实现 需要进一步优化,如根据筛选条件展开或收缩改变盒子高度时
-  tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
-  // 监听浏览器高度变化
-  window.onresize = () => {
-    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
-  }
 })
 </script>
diff --git a/src/views/system/notify/my/detail.vue b/src/views/system/notify/my/MyNotifyMessageDetail.vue
similarity index 89%
rename from src/views/system/notify/my/detail.vue
rename to src/views/system/notify/my/MyNotifyMessageDetail.vue
index ea9ae961..45af259d 100644
--- a/src/views/system/notify/my/detail.vue
+++ b/src/views/system/notify/my/MyNotifyMessageDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="消息详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
+  <Dialog title="消息详情" v-model="modelVisible" :scroll="true" :max-height="500">
     <el-descriptions border :column="1">
       <el-descriptions-item label="发送人">
         {{ detailData.templateNickname }}
@@ -32,7 +32,7 @@ const detailLoading = ref(false) // 表单的加载中
 const detailData = ref() // 详情数据
 
 /** 打开弹窗 */
-const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
+const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
   modelVisible.value = true
   // 设置数据
   detailLoading.value = true
@@ -42,5 +42,5 @@ const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
     detailLoading.value = false
   }
 }
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
diff --git a/src/views/system/notify/my/index.vue b/src/views/system/notify/my/index.vue
index d889e184..d423a98c 100644
--- a/src/views/system/notify/my/index.vue
+++ b/src/views/system/notify/my/index.vue
@@ -16,7 +16,7 @@
           class="!w-240px"
         >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -37,40 +37,26 @@
       <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 @click="handleUpdateList"
-          ><Icon icon="ep:reading" class="mr-5px" /> 标记已读</el-button
-        >
-        <el-button @click="handleUpdateAll"
-          ><Icon icon="ep:reading" class="mr-5px" /> 全部已读</el-button
-        >
+        <el-button @click="handleUpdateList">
+          <Icon icon="ep:reading" class="mr-5px" /> 标记已读
+        </el-button>
+        <el-button @click="handleUpdateAll">
+          <Icon icon="ep:reading" class="mr-5px" /> 全部已读
+        </el-button>
       </el-form-item>
     </el-form>
-    <!-- <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button @click="handleUpdateList"
-          ><Icon icon="ep:refresh" class="mr-5px" /> 标记已读</el-button
-        >
-      </el-col>
-      <el-col :span="1.5">
-        <el-button @click="handleUpdateAll"
-          ><Icon icon="ep:refresh" class="mr-5px" /> 全部已读</el-button
-        >
-      </el-col>
-    </el-row> -->
   </content-wrap>
 
   <content-wrap>
     <!-- 列表 -->
     <el-table
-      ref="tableRef"
       v-loading="loading"
       :data="list"
-      :height="tableHeight"
-      :row-key="getRowKeys"
+      ref="tableRef"
+      row-key="id"
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
-      <!-- <el-table-column label="编号" align="center" prop="id" /> -->
       <el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
       <el-table-column
         label="发送时间"
@@ -107,9 +93,9 @@
           <el-button
             link
             :type="scope.row.readStatus ? 'primary' : 'warning'"
-            @click="openModal(scope.row)"
+            @click="openDetail(scope.row)"
           >
-            {{ scope.row.readStatus ? '详情' : '查阅' }}
+            {{ scope.row.readStatus ? '详情' : '已读' }}
           </el-button>
         </template>
       </el-table-column>
@@ -124,15 +110,14 @@
   </content-wrap>
 
   <!-- 表单弹窗：详情 -->
-  <my-notify-message-detail ref="modalRef" />
+  <MyNotifyMessageDetail ref="detailRef" />
 </template>
 
 <script setup lang="ts" name="MyNotifyMessage">
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
-import MyNotifyMessageDetail from './detail.vue'
-
+import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
 const message = useMessage() // 消息
 
 const loading = ref(true) // 列表的加载中
@@ -145,13 +130,10 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const tableRef = ref()
-const tableHeight = ref() // table高度
-const selectedNum = ref(0) //表格select选中的条数
-const selectedIds = ref([] as any[]) //表格select复选框选中的id
-const multipleSelection = ref([])
+const tableRef = ref() // 表格的 Ref
+const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -163,40 +145,6 @@ const getList = async () => {
   }
 }
 
-/** 详情操作 */
-const modalRef = ref()
-const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
-  if (!data.readStatus) {
-    handleUpdate(data.id)
-  }
-  modalRef.value.openModal(data)
-}
-
-// 标记指定 id 已读
-const handleUpdate = async (ids) => {
-  await NotifyMessageApi.updateNotifyMessageRead(ids)
-  //message.success('标记已读成功！')
-  handleQuery()
-}
-
-// 标记全部已读
-const handleUpdateAll = async () => {
-  await NotifyMessageApi.updateAllNotifyMessageRead()
-  message.success('全部已读成功！')
-  handleQuery()
-}
-
-// 标记勾选 ids 已读
-const handleUpdateList = async () => {
-  if (selectedIds.value.length === 0) {
-    return
-  }
-  await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
-  message.success('批量已读成功！')
-  tableRef.value.clearSelection()
-  handleQuery()
-}
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -210,41 +158,56 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 初始化 **/
-onMounted(() => {
-  getList()
-  // TODO 感觉表格自适应高度体验好些，目前简单实现 需要进一步优化
-  tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
-  // 监听浏览器高度变化
-  window.onresize = () => {
-    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
+  if (!data.readStatus) {
+    handleReadOne(data.id)
   }
-})
+  detailRef.value.open(data)
+}
 
-// 禁用某行复选框
+/** 标记一条站内信已读 */
+const handleReadOne = async (id) => {
+  await NotifyMessageApi.updateNotifyMessageRead(id)
+  await getList()
+}
+
+/** 标记全部站内信已读 **/
+const handleUpdateAll = async () => {
+  await NotifyMessageApi.updateAllNotifyMessageRead()
+  message.success('全部已读成功！')
+  tableRef.value.clearSelection()
+  await getList()
+}
+
+/** 标记一些站内信已读 **/
+const handleUpdateList = async () => {
+  if (selectedIds.value.length === 0) {
+    return
+  }
+  await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
+  message.success('批量已读成功！')
+  tableRef.value.clearSelection()
+  await getList()
+}
+
+/** 某一行，是否允许选中 */
 const selectable = (row) => {
   return !row.readStatus
 }
 
-//选中的list
-const getRowKeys = (row) => {
-  return row.id
-}
-//当表格选择项发生变化时会触发该事件
-const handleSelectionChange = (val) => {
-  // 解决来回切换页面，也无法清除上次选中情况
-  multipleSelection.value = val
-  selectedNum.value = multipleSelection.value.length
+/** 当表格选择项发生变化时会触发该事件  */
+const handleSelectionChange = (array: NotifyMessageApi.NotifyMessageVO[]) => {
   selectedIds.value = []
-  if (val) {
-    undefined
-    val.forEach((row) => {
-      undefined
-      if (row) {
-        undefined
-        selectedIds.value.push(row.id)
-      }
-    })
+  if (!array) {
+    return
   }
+  array.forEach((row) => selectedIds.value.push(row.id))
 }
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>
diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue
index 7e8aca22..a809e452 100644
--- a/src/views/system/oauth2/token/index.vue
+++ b/src/views/system/oauth2/token/index.vue
@@ -115,7 +115,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/system/operatelog/index.vue b/src/views/system/operatelog/index.vue
index d7490ba8..c5713be1 100644
--- a/src/views/system/operatelog/index.vue
+++ b/src/views/system/operatelog/index.vue
@@ -156,7 +156,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/system/sensitiveWord/index.vue b/src/views/system/sensitiveWord/index.vue
index cf1fdb82..5b73132b 100644
--- a/src/views/system/sensitiveWord/index.vue
+++ b/src/views/system/sensitiveWord/index.vue
@@ -168,7 +168,7 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const tagList = ref([]) // 标签数组
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/system/sms/channel/index.vue b/src/views/system/sms/channel/index.vue
index 65d18029..62cd7cc2 100644
--- a/src/views/system/sms/channel/index.vue
+++ b/src/views/system/sms/channel/index.vue
@@ -146,7 +146,7 @@ const queryParams = reactive({
   createTime: []
 })
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index e316992d..1991fbea 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -191,7 +191,7 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const packageList = ref([]) //租户套餐列表
 
-/** 查询参数列表 */
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {

From 337b80ca3d316dbdfab8bcec00815d875dbdb570 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 23:28:29 +0800
Subject: [PATCH 24/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AREVIEW?=
 =?UTF-8?q?=20=E5=85=AC=E4=BC=97=E5=8F=B7=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/statistics/index.vue | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/views/mp/statistics/index.vue b/src/views/mp/statistics/index.vue
index c625f9dc..a692365c 100644
--- a/src/views/mp/statistics/index.vue
+++ b/src/views/mp/statistics/index.vue
@@ -1,9 +1,9 @@
 <template>
   <!-- 搜索工作栏 -->
   <content-wrap>
-    <el-form ref="queryForm" class="-mb-15px" :inline="true" label-width="68px">
+    <el-form class="-mb-15px" ref="queryForm" :inline="true" label-width="68px">
       <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="accountId" @change="getSummary">
+        <el-select v-model="accountId" @change="getSummary" class="!w-240px">
           <el-option
             v-for="item in accountList"
             :key="item.id"
@@ -15,13 +15,12 @@
       <el-form-item label="时间范围" prop="dateRange">
         <el-date-picker
           v-model="dateRange"
-          style="width: 260px"
           type="daterange"
-          range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-          :default-time="defaultTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           @change="getSummary"
+          class="!w-240px"
         />
       </el-form-item>
     </el-form>
@@ -75,22 +74,17 @@
 </template>
 
 <script setup lang="ts" name="MpStatistics">
-import * as StatisticsApi from '@/api/mp/statistics'
 import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
+import * as StatisticsApi from '@/api/mp/statistics'
 import * as MpAccountApi from '@/api/mp/account'
 const message = useMessage() // 消息弹窗
 
-// 默认时间 开始时间00:00:00 结束时间23:59:59
-const defaultTime = ref<[Date, Date]>([
-  new Date(2000, 1, 1, 0, 0, 0),
-  new Date(2000, 2, 1, 23, 59, 59)
-])
 // 默认开始时间是当前日期-7，结束时间是当前日期-1
 const dateRange = ref([
   beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
   endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
 ])
-const accountId = ref()
+const accountId = ref() // 选中的公众号编号
 const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
 const xAxisDate = ref([] as any[]) // X 轴的日期范围
@@ -269,6 +263,7 @@ const getSummary = () => {
   initUpstreamMessageChart()
   interfaceSummaryChart()
 }
+
 /** 用户增减数据 */
 const initUserSummaryChart = async () => {
   userSummaryOption.xAxis.data = []
@@ -297,6 +292,7 @@ const initUserSummaryChart = async () => {
     })
   } catch {}
 }
+
 /** 累计用户数据 */
 const initUserCumulateChart = async () => {
   userCumulateOption.xAxis.data = []
@@ -314,6 +310,7 @@ const initUserCumulateChart = async () => {
     })
   } catch {}
 }
+
 /** 消息概况数据 */
 const initUpstreamMessageChart = async () => {
   upstreamMessageOption.xAxis.data = []
@@ -333,6 +330,7 @@ const initUpstreamMessageChart = async () => {
     })
   } catch {}
 }
+
 /** 接口分析数据 */
 const interfaceSummaryChart = async () => {
   interfaceSummaryOption.xAxis.data = []

From 7ab8aa71685c9e52fd5fc8584f8f6cbece4f81bb Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Mar 2023 23:50:32 +0800
Subject: [PATCH 25/29] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9AREVIEW?=
 =?UTF-8?q?=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/RoleForm.vue |  9 ++++-----
 src/views/system/user/index.vue    | 18 ++++++++++++------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/views/system/user/RoleForm.vue b/src/views/system/user/RoleForm.vue
index cb5603fe..0cb82df8 100644
--- a/src/views/system/user/RoleForm.vue
+++ b/src/views/system/user/RoleForm.vue
@@ -8,12 +8,12 @@
         <el-input v-model="formData.nickname" :disabled="true" />
       </el-form-item>
       <el-form-item label="角色">
-        <el-select v-model="formData.roleIds" multiple placeholder="请选择">
+        <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
           <el-option
             v-for="item in roleOptions"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.name"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
@@ -28,6 +28,7 @@
 </template>
 
 <script setup lang="ts">
+// TODO el-dialog 用 Dialog 组件
 import { assignUserRoleApi, PermissionAssignUserRoleReqVO } from '@/api/system/permission'
 
 interface Props {
@@ -86,5 +87,3 @@ const submit = async () => {
   }
 }
 </script>
-
-<style></style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ce034c4e..641f8bd4 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -269,6 +269,7 @@
 import type { ElTree } from 'element-plus'
 import { handleTree, defaultProps } from '@/utils/tree'
 // 原vue3版本api方法都是Api结尾觉得见名知义，个人觉得这个可以形成规范
+// TODO 使用 DeptApi 这种形式哈
 import { getSimpleDeptList as getSimpleDeptListApi } from '@/api/system/dept'
 import { getSimplePostList as getSimplePostListApi, PostVO } from '@/api/system/post'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
@@ -279,16 +280,15 @@ import {
   updateUserStatusApi,
   UserVO
 } from '@/api/system/user'
-import { parseTime } from './utils'
-import AddForm from './AddForm.vue'
-import ImportForm from './ImportForm.vue'
-import RoleForm from './RoleForm.vue'
+import { parseTime } from './utils' // TODO 可以使用 formatTime 里的方法
+import AddForm from './AddForm.vue' // TODO 改成 UserForm
+import ImportForm from './ImportForm.vue' // TODO 改成 UserImportForm
+import RoleForm from './RoleForm.vue' // TODO 改成 UserAssignRoleForm
 import { getUserApi, getUserPageApi } from '@/api/system/user'
 import { getSimpleRoleList as getSimpleRoleListApi } from '@/api/system/role'
 import { listUserRolesApi } from '@/api/system/permission'
 import { CommonStatusEnum } from '@/utils/constants'
 import download from '@/utils/download'
-
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -304,10 +304,11 @@ const queryParams = reactive({
 const showSearch = ref(true)
 const showAddDialog = ref(false)
 
-// 数据字典-
+// 数据字典- // TODO 可以直接 vue 那 getIntDictOptions，这样一方面少个变量，也可以 getIntDictOptions
 const statusDictDatas = getDictOptions(DICT_TYPE.COMMON_STATUS)
 
 // ========== 创建部门树结构 ==========
+// TODO 要不把部门树拆成一个左侧的组件，然后点击后触发 handleDeptNodeClick
 const deptName = ref('')
 watch(
   () => deptName.value,
@@ -375,6 +376,7 @@ const resetQuery = () => {
 // 添加或编辑
 const addEditFormRef = ref()
 // 添加用户
+// TODO 可以参考别的模块哈，openForm；然后 tree 和 position 可以里面在加载下，让组件自己维护自己哈。
 const handleAdd = () => {
   addEditFormRef?.value.resetForm()
   // 获得下拉数据
@@ -389,6 +391,7 @@ const handleImport = () => {
 }
 
 // 用户导出
+// TODO 改成 await 的风格；
 const exportLoading = ref(false)
 const handleExport = () => {
   message
@@ -432,6 +435,7 @@ const handleCommand = (command: string, index: number, row: UserVO) => {
 }
 
 // 用户状态修改
+// TODO 改成 await 的风格；
 const handleStatusChange = (row: UserVO) => {
   let text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
   message
@@ -466,6 +470,7 @@ const handleUpdate = (row: UserVO) => {
 }
 
 // 删除用户
+// TODO 改成 await 的风格；
 const handleDelete = (row: UserVO) => {
   const ids = row.id
   message
@@ -481,6 +486,7 @@ const handleDelete = (row: UserVO) => {
 }
 
 // 重置密码
+// TODO 改成 await 的风格；
 const handleResetPwd = (row: UserVO) => {
   message.prompt('请输入"' + row.username + '"的新密码', t('common.reminder')).then(({ value }) => {
     resetUserPwdApi(row.id, value)

From 17ef65df06ee091554a502c33f4e2069216b67d7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 29 Mar 2023 00:01:39 +0800
Subject: [PATCH 26/29] =?UTF-8?q?=E5=90=8C=E6=AD=A5=20master=20=E6=9C=80?=
 =?UTF-8?q?=E6=96=B0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/axios/request.ts | 50 -------------------------------------
 1 file changed, 50 deletions(-)
 delete mode 100644 src/config/axios/request.ts

diff --git a/src/config/axios/request.ts b/src/config/axios/request.ts
deleted file mode 100644
index d65842c2..00000000
--- a/src/config/axios/request.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { service } from './service'
-
-import { config } from './config'
-
-const { default_headers } = config
-
-const request = (option: any) => {
-  const { url, method, params, data, headersType, responseType } = option
-  return service({
-    url: url,
-    method,
-    params,
-    data,
-    responseType: responseType,
-    headers: {
-      'Content-Type': headersType || default_headers
-    }
-  })
-}
-export default {
-  get: async <T = any>(option: any) => {
-    const res = await request({ method: 'GET', ...option })
-    return res as unknown as T
-  },
-  post: async <T = any>(option: any) => {
-    const res = await request({ method: 'POST', ...option })
-    return res as unknown as T
-  },
-  delete: async <T = any>(option: any) => {
-    const res = await request({ method: 'DELETE', ...option })
-    return res as unknown as T
-  },
-  put: async <T = any>(option: any) => {
-    const res = await request({ method: 'PUT', ...option })
-    return res as unknown as T
-  },
-  patch: async <T = any>(option: any) => {
-    const res = await request({ method: 'PATCH', ...option })
-    return res as unknown as T
-  },
-  download: async <T = any>(option: any) => {
-    const res = await request({ method: 'GET', responseType: 'blob', ...option })
-    return res as unknown as Promise<T>
-  },
-  upload: async <T = any>(option: any) => {
-    option.headersType = 'multipart/form-data'
-    const res = await request({ method: 'POST', ...option })
-    return res as unknown as Promise<T>
-  }
-}

From 76c5c7c1de79517f4585af16eb48a0f854366f77 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 29 Mar 2023 09:09:34 +0800
Subject: [PATCH 27/29] =?UTF-8?q?REVIEW=20=E4=BB=A3=E7=A0=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/codegen/index.ts          |  70 ++++++++++++++-
 src/api/infra/codegen/types.ts          |  61 -------------
 src/locales/zh-CN.ts                    |   3 +-
 src/views/infra/codegen/EditTable.vue   |   2 +-
 src/views/infra/codegen/codegen.data.ts |  53 -----------
 src/views/infra/codegen/index.vue       | 112 ++++++++++++------------
 6 files changed, 128 insertions(+), 173 deletions(-)
 delete mode 100644 src/api/infra/codegen/types.ts
 delete mode 100644 src/views/infra/codegen/codegen.data.ts

diff --git a/src/api/infra/codegen/index.ts b/src/api/infra/codegen/index.ts
index 993bd552..64701efe 100644
--- a/src/api/infra/codegen/index.ts
+++ b/src/api/infra/codegen/index.ts
@@ -1,8 +1,74 @@
 import request from '@/config/axios'
-import type { CodegenUpdateReqVO, CodegenCreateListReqVO } from './types'
+
+export type CodegenTableVO = {
+  id: number
+  tableId: number
+  isParentMenuIdValid: boolean
+  dataSourceConfigId: number
+  scene: number
+  tableName: string
+  tableComment: string
+  remark: string
+  moduleName: string
+  businessName: string
+  className: string
+  classComment: string
+  author: string
+  createTime: Date
+  updateTime: Date
+  templateType: number
+  parentMenuId: number
+}
+
+export type CodegenColumnVO = {
+  id: number
+  tableId: number
+  columnName: string
+  dataType: string
+  columnComment: string
+  nullable: number
+  primaryKey: number
+  autoIncrement: string
+  ordinalPosition: number
+  javaType: string
+  javaField: string
+  dictType: string
+  example: string
+  createOperation: number
+  updateOperation: number
+  listOperation: number
+  listOperationCondition: string
+  listOperationResult: number
+  htmlType: string
+}
+
+export type DatabaseTableVO = {
+  name: string
+  comment: string
+}
+
+export type CodegenDetailVO = {
+  table: CodegenTableVO
+  columns: CodegenColumnVO[]
+}
+
+export type CodegenPreviewVO = {
+  filePath: string
+  code: string
+}
+
+export type CodegenUpdateReqVO = {
+  table: CodegenTableVO | any
+  columns: CodegenColumnVO[]
+}
+
+export type CodegenCreateListReqVO = {
+  dataSourceConfigId: number
+  tableNames: string[]
+}
 
 // 查询列表代码生成表定义
-export const getCodegenTablePage = (params) => {
+export const getCodegenTablePage = (params: PageParam) => {
   return request.get({ url: '/infra/codegen/table/page', params })
 }
 
diff --git a/src/api/infra/codegen/types.ts b/src/api/infra/codegen/types.ts
deleted file mode 100644
index e4e78843..00000000
--- a/src/api/infra/codegen/types.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-export type CodegenTableVO = {
-  id: number
-  tableId: number
-  isParentMenuIdValid: boolean
-  dataSourceConfigId: number
-  scene: number
-  tableName: string
-  tableComment: string
-  remark: string
-  moduleName: string
-  businessName: string
-  className: string
-  classComment: string
-  author: string
-  createTime: Date
-  updateTime: Date
-  templateType: number
-  parentMenuId: number
-}
-
-export type CodegenColumnVO = {
-  id: number
-  tableId: number
-  columnName: string
-  dataType: string
-  columnComment: string
-  nullable: number
-  primaryKey: number
-  autoIncrement: string
-  ordinalPosition: number
-  javaType: string
-  javaField: string
-  dictType: string
-  example: string
-  createOperation: number
-  updateOperation: number
-  listOperation: number
-  listOperationCondition: string
-  listOperationResult: number
-  htmlType: string
-}
-export type DatabaseTableVO = {
-  name: string
-  comment: string
-}
-export type CodegenDetailVO = {
-  table: CodegenTableVO
-  columns: CodegenColumnVO[]
-}
-export type CodegenPreviewVO = {
-  filePath: string
-  code: string
-}
-export type CodegenUpdateReqVO = {
-  table: CodegenTableVO | any
-  columns: CodegenColumnVO[]
-}
-export type CodegenCreateListReqVO = {
-  dataSourceConfigId: number
-  tableNames: string[]
-}
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index ea1392c4..6f46f1ab 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -298,8 +298,7 @@ export default {
     typeUpdate: '字典类型编辑',
     dataCreate: '字典数据新增',
     dataUpdate: '字典数据编辑',
-    fileUpload: '上传文件',
-    back: '返回'
+    fileUpload: '上传文件'
   },
   dialog: {
     dialog: '弹窗',
diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index 34ba3bd6..79922ffc 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -16,7 +16,7 @@
         <el-button type="primary" @click="submitForm" :loading="submitLoading">
           {{ t('action.save') }}
         </el-button>
-        <el-button @click="close">{{ t('action.back') }}</el-button>
+        <el-button @click="close">返回</el-button>
       </el-form-item>
     </el-form>
   </content-wrap>
diff --git a/src/views/infra/codegen/codegen.data.ts b/src/views/infra/codegen/codegen.data.ts
deleted file mode 100644
index f3723a35..00000000
--- a/src/views/infra/codegen/codegen.data.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  title: [required],
-  type: [required],
-  status: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'seq',
-  action: true,
-  actionWidth: '400px',
-  columns: [
-    {
-      title: '表名称',
-      field: 'tableName',
-      isSearch: true
-    },
-    {
-      title: '表描述',
-      field: 'tableComment',
-      isSearch: true
-    },
-    {
-      title: '实体',
-      field: 'className',
-      isSearch: true
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    },
-    {
-      title: t('common.updateTime'),
-      field: 'updateTime',
-      formatter: 'formatDate',
-      isForm: false
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index 591f99d3..b975779a 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/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="tableName">
         <el-input
           v-model="queryParams.tableName"
           placeholder="请输入表名称"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="表描述" prop="tableComment">
@@ -16,23 +23,25 @@
           placeholder="请输入表描述"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
-          value-format="yyyy-MM-dd HH:mm:ss"
+          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" v-hasPermi="['infra:codegen:create']" @click="openImportTable()">
-          <Icon icon="ep:zoom-in" class="mr-5px" />{{ t('action.import') }}
+          <Icon icon="ep:zoom-in" class="mr-5px" /> 导入
         </el-button>
       </el-form-item>
     </el-form>
@@ -41,14 +50,20 @@
   <!-- 列表 -->
   <content-wrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="数据源" align="center" :formatter="dataSourceConfigNameFormat" />
+      <el-table-column label="数据源" align="center">
+        <template #default="scope">
+          {{
+            dataSourceConfigList.find((config) => config.id === scope.row.dataSourceConfigId)?.name
+          }}
+        </template>
+      </el-table-column>
       <el-table-column label="表名称" align="center" prop="tableName" width="200" />
       <el-table-column
         label="表描述"
         align="center"
         prop="tableComment"
         :show-overflow-tooltip="true"
-        width="120"
+        width="200"
       />
       <el-table-column label="实体" align="center" prop="className" width="200" />
       <el-table-column
@@ -65,53 +80,53 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column
-        label="操作"
-        align="center"
-        width="300px"
-        class-name="small-padding fixed-width"
-      >
+      <el-table-column label="操作" align="center" width="300px" fixed="right">
         <template #default="scope">
           <el-button
             link
             type="primary"
             @click="handlePreview(scope.row)"
             v-hasPermi="['infra:codegen:preview']"
-            >预览</el-button
           >
+            预览
+          </el-button>
           <el-button
             link
             type="primary"
             @click="handleUpdate(scope.row.id)"
             v-hasPermi="['infra:codegen:update']"
-            >编辑</el-button
           >
+            编辑
+          </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['infra:codegen:delete']"
-            >删除</el-button
           >
+            删除
+          </el-button>
           <el-button
             link
             type="primary"
-            @click="handleSynchDb(scope.row)"
+            @click="handleSyncDB(scope.row)"
             v-hasPermi="['infra:codegen:update']"
-            >同步</el-button
           >
+            同步
+          </el-button>
           <el-button
             link
             type="primary"
             @click="handleGenTable(scope.row)"
             v-hasPermi="['infra:codegen:download']"
-            >生成代码</el-button
           >
+            生成代码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination
-      v-show="total > 0"
+    <!-- 分页 -->
+    <Pagination
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
@@ -120,20 +135,16 @@
   </content-wrap>
 
   <!-- 弹窗：导入表 -->
-  <ImportTable ref="importRef" @ok="reload()" />
+  <ImportTable ref="importRef" @ok="getList" />
   <!-- 弹窗：预览代码 -->
   <Preview ref="previewRef" />
 </template>
 <script setup lang="ts" name="Codegen">
+import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CodegenApi from '@/api/infra/codegen'
 import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
-import { CodegenTableVO } from '@/api/infra/codegen/types'
 import { ImportTable, Preview } from './components'
-import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
-import { DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
-import { dateFormatter } from '@/utils/formatTime'
-
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由跳转
@@ -149,8 +160,7 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-
-const dataSourceConfigs = ref<DataSourceConfigVO[]>([]) // 数据源列表
+const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表
 
 /** 查询参数列表 */
 const getList = async () => {
@@ -176,35 +186,21 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 初始化 **/
-onMounted(async () => {
-  getList()
-  dataSourceConfigs.value = await DataSourceConfigApi.getDataSourceConfigList()
-})
-
-// 数据源配置的名字
-const dataSourceConfigNameFormat = (row) => {
-  for (const config of dataSourceConfigs.value) {
-    if (row.dataSourceConfigId === config.id) {
-      return config.name
-    }
-  }
-  return '未知【' + row.leaderUserId + '】'
-}
-
 // 导入操作
 const importRef = ref()
 const openImportTable = () => {
   importRef.value.show()
 }
-// 预览操作
-const previewRef = ref()
-const handlePreview = (row: CodegenTableVO) => {
-  previewRef.value.openModal(row.id)
+
+/** 编辑操作 */
+const handleUpdate = (id: number) => {
+  push('/codegen/edit?id=' + id)
 }
-// 编辑操作
-const handleUpdate = (rowId: number) => {
-  push('/codegen/edit?id=' + rowId)
+
+/** 预览操作 */
+const previewRef = ref()
+const handlePreview = (row: CodegenApi.CodegenTableVO) => {
+  previewRef.value.openModal(row.id)
 }
 
 /** 删除按钮操作 */
@@ -219,8 +215,9 @@ const handleDelete = async (id: number) => {
     await getList()
   } catch {}
 }
-// 同步操作
-const handleSynchDb = async (row: CodegenTableVO) => {
+
+/** 同步操作  */
+const handleSyncDB = async (row: CodegenApi.CodegenTableVO) => {
   // 基于 DB 同步
   const tableName = row.tableName
   try {
@@ -230,9 +227,16 @@ const handleSynchDb = async (row: CodegenTableVO) => {
   } catch {}
 }
 
-// 生成代码操作
-const handleGenTable = async (row: CodegenTableVO) => {
+/** 生成代码操作 */
+const handleGenTable = async (row: CodegenApi.CodegenTableVO) => {
   const res = await CodegenApi.downloadCodegen(row.id)
   download.zip(res, 'codegen-' + row.className + '.zip')
 }
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 加载数据源列表
+  dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList()
+})
 </script>

From d5f3f0add1f91982402bdf2dd6508cfc08b70123 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 29 Mar 2023 13:57:16 +0800
Subject: [PATCH 28/29] =?UTF-8?q?REVIEW=20=E4=BB=A3=E7=A0=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/infra/codegen/EditTable.vue | 56 +++++++++--------
 src/views/infra/config/config.data.ts | 90 ---------------------------
 2 files changed, 31 insertions(+), 115 deletions(-)
 delete mode 100644 src/views/infra/config/config.data.ts

diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index 79922ffc..714b2761 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <content-wrap v-loading="loading">
+  <content-wrap v-loading="formLoading">
     <el-tabs v-model="activeName">
       <el-tab-pane label="基本信息" name="basicInfo">
         <basic-info-form ref="basicInfoRef" :table="formData.table" />
@@ -11,63 +11,69 @@
         <generate-info-form ref="generateInfoRef" :table="formData.table" />
       </el-tab-pane>
     </el-tabs>
-    <el-form label-width="100px">
-      <el-form-item style="text-align: center; margin-left: -100px; margin-top: 10px">
-        <el-button type="primary" @click="submitForm" :loading="submitLoading">
-          {{ t('action.save') }}
-        </el-button>
+    <el-form>
+      <el-form-item style="float: right">
+        <el-button type="primary" @click="submitForm" :loading="formLoading">保存</el-button>
         <el-button @click="close">返回</el-button>
       </el-form-item>
     </el-form>
   </content-wrap>
 </template>
 <script setup lang="ts">
+import { useTagsViewStore } from '@/store/modules/tagsView'
 import { BasicInfoForm, ColumInfoForm, GenerateInfoForm } from './components'
 import * as CodegenApi from '@/api/infra/codegen'
-import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import { CodegenUpdateReqVO } from '@/api/infra/codegen/types'
-
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const { push, currentRoute } = useRouter()
-const { query } = useRoute()
-const { delView } = useTagsViewStore()
-const loading = ref(false)
-const submitLoading = ref(false)
-const activeName = ref('basicInfo')
+const { push, currentRoute } = useRouter() // 路由
+const { query } = useRoute() // 查询参数
+const { delView } = useTagsViewStore() // 视图操作
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeName = ref('basicInfo') // Tag 激活的窗口
 const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
 const columInfoRef = ref<ComponentRef<typeof ColumInfoForm>>()
 const generateInfoRef = ref<ComponentRef<typeof GenerateInfoForm>>()
-const formData = ref<CodegenUpdateReqVO>({
+const formData = ref<CodegenApi.CodegenUpdateReqVO>({
   table: {},
   columns: []
 })
 
+/** 获得详情 */
 const getDetail = async () => {
   const id = query.id as unknown as number
-  if (id) {
-    loading.value = true
-    // 获取表详细信息
+  if (!id) {
+    return
+  }
+  formLoading.value = true
+  try {
     formData.value = await CodegenApi.getCodegenTable(id)
-    loading.value = false
+  } finally {
+    formLoading.value = false
   }
 }
+
+/** 提交按钮 */
 const submitForm = async () => {
+  // 参数校验
   if (!unref(formData)) return
+  await unref(basicInfoRef)?.validate()
+  await unref(generateInfoRef)?.validate()
   try {
-    await unref(basicInfoRef)?.validate()
-    await unref(generateInfoRef)?.validate()
-    await CodegenApi.updateCodegenTable(unref(formData))
+    // 提交请求
+    await CodegenApi.updateCodegenTable(formData.value)
     message.success(t('common.updateSuccess'))
-    push('/infra/codegen')
+    close()
   } catch {}
 }
+
 /** 关闭按钮 */
 const close = () => {
   delView(unref(currentRoute))
   push('/infra/codegen')
 }
+
+/** 初始化 */
 onMounted(() => {
   getDetail()
 })
diff --git a/src/views/infra/config/config.data.ts b/src/views/infra/config/config.data.ts
deleted file mode 100644
index 41acfa15..00000000
--- a/src/views/infra/config/config.data.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  category: [required],
-  name: [required],
-  key: [required],
-  value: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: null,
-  action: true,
-  columns: [
-    {
-      title: '参数分类',
-      field: 'category'
-    },
-    {
-      title: '参数名称',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: '参数键名',
-      field: 'key',
-      isSearch: true
-    },
-    {
-      title: '参数键值',
-      field: 'value'
-    },
-    {
-      title: '系统内置',
-      field: 'type',
-      dictType: DICT_TYPE.INFRA_CONFIG_TYPE,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '是否可见',
-      field: 'visible',
-      table: {
-        slots: {
-          default: 'visible_default'
-        }
-      },
-      form: {
-        component: 'RadioButton',
-        componentProps: {
-          options: [
-            { label: '是', value: true },
-            { label: '否', value: false }
-          ]
-        }
-      }
-    },
-    {
-      title: t('form.remark'),
-      field: 'remark',
-      isTable: false,
-      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 b1e74a1d053566d051d5af8ad62588c09f2db3ba Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 29 Mar 2023 15:07:50 +0800
Subject: [PATCH 29/29] =?UTF-8?q?REVIEW=20=E4=BB=A3=E7=A0=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90(ImportTable)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../codegen/{components => }/ImportTable.vue  | 125 ++++++++++--------
 .../Preview.vue => PreviewCode.vue}           |   0
 src/views/infra/codegen/components/index.ts   |   4 +-
 src/views/infra/codegen/index.vue             |   9 +-
 4 files changed, 73 insertions(+), 65 deletions(-)
 rename src/views/infra/codegen/{components => }/ImportTable.vue (51%)
 rename src/views/infra/codegen/{components/Preview.vue => PreviewCode.vue} (100%)

diff --git a/src/views/infra/codegen/components/ImportTable.vue b/src/views/infra/codegen/ImportTable.vue
similarity index 51%
rename from src/views/infra/codegen/components/ImportTable.vue
rename to src/views/infra/codegen/ImportTable.vue
index 7eebbe65..b89b2923 100644
--- a/src/views/infra/codegen/components/ImportTable.vue
+++ b/src/views/infra/codegen/ImportTable.vue
@@ -1,10 +1,15 @@
 <template>
-  <Dialog :title="modelTitle" v-model="modelVisible">
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+  <Dialog title="导入表" v-model="modelVisible" width="800px">
+    <!-- 搜索栏 -->
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
       <el-form-item label="数据源" prop="dataSourceConfigId">
-        <el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源">
+        <el-select
+          v-model="queryParams.dataSourceConfigId"
+          placeholder="请选择数据源"
+          class="!w-240px"
+        >
           <el-option
-            v-for="config in dataSourceConfigs"
+            v-for="config in dataSourceConfigList"
             :key="config.id"
             :label="config.name"
             :value="config.id"
@@ -16,7 +21,8 @@
           v-model="queryParams.name"
           placeholder="请输入表名称"
           clearable
-          @keyup.enter="handleQuery"
+          @keyup.enter="getList"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="表描述" prop="comment">
@@ -24,19 +30,20 @@
           v-model="queryParams.comment"
           placeholder="请输入表描述"
           clearable
-          @keyup.enter="handleQuery"
+          @keyup.enter="getList"
+          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="getList"><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>
-
+    <!-- 列表 -->
     <el-row>
       <el-table
-        v-loading="dbLoading"
-        @row-click="clickRow"
+        v-loading="dbTableLoading"
+        @row-click="handleRowClick"
         ref="tableRef"
         :data="dbTableList"
         @selection-change="handleSelectionChange"
@@ -47,87 +54,89 @@
         <el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
       </el-table>
     </el-row>
-
+    <!-- 操作 -->
     <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="handleImportTable" type="primary" :disabled="tables.length === 0">{{
-          t('action.import')
-        }}</el-button>
-        <el-button @click="handleClose">{{ t('dialog.close') }}</el-button>
-      </div>
+      <el-button @click="handleImportTable" type="primary" :disabled="tableList.length === 0">
+        导入
+      </el-button>
+      <el-button @click="close">关闭</el-button>
     </template>
   </Dialog>
 </template>
 <script setup lang="ts">
-import type { DatabaseTableVO } from '@/api/infra/codegen/types'
 import * as CodegenApi from '@/api/infra/codegen'
-import { getDataSourceConfigList, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
 import { ElTable } from 'element-plus'
-
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const emit = defineEmits(['ok'])
 
 const modelVisible = ref(false) // 弹窗的是否展示
-const modelTitle = ref('导入表') // 弹窗的标题
-const dbLoading = ref(true)
+const dbTableLoading = ref(true) // 数据源的加载中
+const dbTableList = ref<CodegenApi.DatabaseTableVO[]>([]) // 表的列表
 const queryParams = reactive({
   name: undefined,
   comment: undefined,
   dataSourceConfigId: 0
 })
-const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
-const show = async () => {
-  dataSourceConfigs.value = await getDataSourceConfigList()
-  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
-  modelVisible.value = true
-  await getList()
-}
-/** 查询表数据 */
-const dbTableList = ref<DatabaseTableVO[]>([])
+const queryFormRef = ref() // 搜索的表单
+const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表
 
 /** 查询表数据 */
 const getList = async () => {
-  dbLoading.value = true
-  dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
-  dbLoading.value = false
+  dbTableLoading.value = true
+  try {
+    dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
+  } finally {
+    dbTableLoading.value = false
+  }
 }
-// 查询操作
-const handleQuery = async () => {
-  await getList()
-}
-// 重置操作
+
+/** 重置操作 */
 const resetQuery = async () => {
   queryParams.name = undefined
   queryParams.comment = undefined
-  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
+  queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
   await getList()
 }
-const tableRef = ref<typeof ElTable>()
-/** 多选框选中数据 */
-const tables = ref<string[]>([])
-const clickRow = (row) => {
+
+/** 打开弹窗 */
+const open = async () => {
+  // 加载数据源的列表
+  dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList()
+  queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
+  modelVisible.value = true
+  // 加载表的列表
+  await getList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 关闭弹窗 */
+const close = () => {
+  modelVisible.value = false
+  tableList.value = []
+}
+
+const tableRef = ref<typeof ElTable>() // 表格的 Ref
+const tableList = ref<string[]>([]) // 选中的表名
+
+/** 处理某一行的点击 */
+const handleRowClick = (row) => {
   unref(tableRef)?.toggleRowSelection(row)
 }
-// 多选框选中数据
+
+/** 多选框选中数据 */
 const handleSelectionChange = (selection) => {
-  tables.value = selection.map((item) => item.name)
+  tableList.value = selection.map((item) => item.name)
 }
+
 /** 导入按钮操作 */
 const handleImportTable = async () => {
   await CodegenApi.createCodegenList({
     dataSourceConfigId: queryParams.dataSourceConfigId,
-    tableNames: tables.value
+    tableNames: tableList.value
   })
   message.success('导入成功')
-  emit('ok')
-  handleClose()
+  emit('success')
+  close()
 }
-const handleClose = () => {
-  modelVisible.value = false
-  tables.value = []
-}
-defineExpose({
-  show
-})
+const emit = defineEmits(['success'])
 </script>
diff --git a/src/views/infra/codegen/components/Preview.vue b/src/views/infra/codegen/PreviewCode.vue
similarity index 100%
rename from src/views/infra/codegen/components/Preview.vue
rename to src/views/infra/codegen/PreviewCode.vue
diff --git a/src/views/infra/codegen/components/index.ts b/src/views/infra/codegen/components/index.ts
index 71d0587f..1634a76f 100644
--- a/src/views/infra/codegen/components/index.ts
+++ b/src/views/infra/codegen/components/index.ts
@@ -1,6 +1,4 @@
 import BasicInfoForm from './BasicInfoForm.vue'
 import ColumInfoForm from './ColumInfoForm.vue'
 import GenerateInfoForm from './GenerateInfoForm.vue'
-import ImportTable from './ImportTable.vue'
-import Preview from './Preview.vue'
-export { BasicInfoForm, ColumInfoForm, GenerateInfoForm, ImportTable, Preview }
+export { BasicInfoForm, ColumInfoForm, GenerateInfoForm }
diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index b975779a..64a270e5 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -135,16 +135,17 @@
   </content-wrap>
 
   <!-- 弹窗：导入表 -->
-  <ImportTable ref="importRef" @ok="getList" />
+  <ImportTable ref="importRef" success="getList" />
   <!-- 弹窗：预览代码 -->
-  <Preview ref="previewRef" />
+  <PreviewCode ref="previewRef" />
 </template>
 <script setup lang="ts" name="Codegen">
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CodegenApi from '@/api/infra/codegen'
 import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
-import { ImportTable, Preview } from './components'
+import ImportTable from './ImportTable.vue'
+import PreviewCode from './PreviewCode.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由跳转
@@ -189,7 +190,7 @@ const resetQuery = () => {
 // 导入操作
 const importRef = ref()
 const openImportTable = () => {
-  importRef.value.show()
+  importRef.value.open()
 }
 
 /** 编辑操作 */