From bc5df9b14309a91a61a5a19f09a9fd6162335dd4 Mon Sep 17 00:00:00 2001
From: Theo <koutianyu@163.com>
Date: Tue, 7 Mar 2023 18:44:21 +0800
Subject: [PATCH 01/23] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=88=96=E4=BF=AE=E6=94=B9=E8=8F=9C=E5=8D=95=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E9=80=89=E6=8B=A9=E8=8F=9C=E5=8D=95=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon/src/IconSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Icon/src/IconSelect.vue b/src/components/Icon/src/IconSelect.vue
index 97a3e384..d7bf6ae4 100644
--- a/src/components/Icon/src/IconSelect.vue
+++ b/src/components/Icon/src/IconSelect.vue
@@ -90,7 +90,7 @@ watch(
     return props.modelValue
   },
   () => {
-    if (props.modelValue) {
+    if (props.modelValue && props.modelValue.contains(':')) {
       currentActiveType.value = props.modelValue.substring(0, props.modelValue.indexOf(':') + 1)
       icon.value = props.modelValue.substring(props.modelValue.indexOf(':') + 1)
     }
-- 
Gitee


From a692674b24a4e9ad9133b5f8b7b27767c5f6ef7d Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sun, 9 Apr 2023 17:14:31 +0800
Subject: [PATCH 02/23] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=9C=AA?=
 =?UTF-8?q?=E5=BC=95=E5=85=A5=E7=9A=84formatDate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/components/wx-material-select/main.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
index 7f565823..4c2d46f3 100644
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -238,7 +238,6 @@ export default defineComponent({
       selectMaterialFun,
       getMaterialPageFun,
       getPage,
-      formatDate,
       queryParams,
       objDataRef,
       list,
-- 
Gitee


From 7e3f6190a5953cc8a09736ef107b31564d494f94 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 9 Apr 2023 18:49:54 +0800
Subject: [PATCH 03/23] =?UTF-8?q?REVIEW=20OA=20=E8=AF=B7=E5=81=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-components.d.ts    |  4 ++++
 src/views/bpm/oa/leave/create.vue | 10 +++++-----
 src/views/mp/autoReply/index.vue  |  6 ++----
 src/views/mp/material/index.vue   |  6 ++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index e72d2988..e9e992f1 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -25,6 +25,8 @@ declare module '@vue/runtime-core' {
     Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
     Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@@ -70,9 +72,11 @@ declare module '@vue/runtime-core' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
diff --git a/src/views/bpm/oa/leave/create.vue b/src/views/bpm/oa/leave/create.vue
index dd22571a..321ec609 100644
--- a/src/views/bpm/oa/leave/create.vue
+++ b/src/views/bpm/oa/leave/create.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="发起 OA 请假流程" v-model="modelVisible">
+  <Dialog title="发起 OA 请假流程" v-model="dialogVisible">
     <el-form
       ref="formRef"
       :model="formData"
@@ -41,7 +41,7 @@
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="modelVisible = false">取 消</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
@@ -50,7 +50,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as LeaveApi from '@/api/bpm/leave'
 const message = useMessage() // 消息弹窗
 
-const modelVisible = ref(false) // 弹窗的是否展示
+const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
   type: undefined,
@@ -68,7 +68,7 @@ const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
 const open = async () => {
-  modelVisible.value = true
+  dialogVisible.value = true
   resetForm()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -86,7 +86,7 @@ const submitForm = async () => {
     const data = formData.value as unknown as LeaveApi.LeaveVO
     await LeaveApi.createLeave(data)
     message.success('新增成功')
-    modelVisible.value = false
+    dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
   } finally {
diff --git a/src/views/mp/autoReply/index.vue b/src/views/mp/autoReply/index.vue
index 60197742..03f98b54 100644
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@@ -174,10 +174,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="cancel">取 消</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        </span>
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
       </template>
     </el-dialog>
   </ContentWrap>
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index c723e2fb..778609b9 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -197,10 +197,8 @@
             </el-row>
           </el-form>
           <template #footer>
-            <div class="dialog-footer">
-              <el-button @click="cancelVideo">取 消</el-button>
-              <el-button type="primary" @click="submitVideo">提 交</el-button>
-            </div>
+            <el-button @click="cancelVideo">取 消</el-button>
+            <el-button type="primary" @click="submitVideo">提 交</el-button>
           </template>
         </el-dialog>
 
-- 
Gitee


From c33e4de5a8d506f08618c2b63977be3d85e88e6d Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 00:18:56 +0800
Subject: [PATCH 04/23] =?UTF-8?q?refactor:=20=E6=8A=BD=E7=A6=BB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E3=80=90=E5=85=AC=E4=BC=97=E5=8F=B7=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mp/components/wx-account-select/main.vue  | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/views/mp/components/wx-account-select/main.vue

diff --git a/src/views/mp/components/wx-account-select/main.vue b/src/views/mp/components/wx-account-select/main.vue
new file mode 100644
index 00000000..f75bc7d6
--- /dev/null
+++ b/src/views/mp/components/wx-account-select/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
+    <el-form-item label="公众号" prop="accountId">
+      <el-select
+        v-model="accountId"
+        placeholder="请选择公众号"
+        class="!w-240px"
+        @change="accountChanged()"
+      >
+        <el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <slot name="actions"></slot>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup name="WxAccountSelect">
+import * as MpAccountApi from '@/api/mp/account'
+const accountId = ref()
+const accountList = ref([])
+const queryFormRef = ref()
+
+const emit = defineEmits(['change'])
+
+onMounted(async () => {
+  handleQuery()
+})
+
+const handleQuery = async () => {
+  const data = await MpAccountApi.getSimpleAccountList()
+  accountList.value = data
+  // 默认选中第一个
+  if (accountList.value.length > 0) {
+    accountId.value = accountList.value[0].id
+    emit('change', accountId.value)
+  }
+}
+
+const accountChanged = () => {
+  emit('change', accountId.value)
+}
+</script>
-- 
Gitee


From e035eb261881184e25612cfa0a4654d8c12f9f89 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 00:25:45 +0800
Subject: [PATCH 05/23] =?UTF-8?q?refactor:=20=E3=80=90=E8=8D=89=E7=A8=BF?=
 =?UTF-8?q?=EF=BC=8C=E7=B4=A0=E6=9D=90=E3=80=91=E5=BA=94=E7=94=A8=E3=80=90?=
 =?UTF-8?q?=E5=85=AC=E4=BC=97=E5=8F=B7=E9=80=89=E6=8B=A9=E5=99=A8=E3=80=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/draft/index.vue    |  72 +++-----------
 src/views/mp/material/index.vue | 160 ++++++++++++++------------------
 2 files changed, 85 insertions(+), 147 deletions(-)

diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index ab5d5218..0f2aa254 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -3,31 +3,13 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
+      <template #actions>
         <el-button type="primary" plain @click="handleAdd" v-hasPermi="['mp:draft:create']">
           <Icon icon="ep:plus" />新增
         </el-button>
-      </el-form-item>
-    </el-form>
+      </template>
+    </WxAccountSelect>
   </ContentWrap>
 
   <!-- 列表 -->
@@ -35,7 +17,7 @@
     <div class="waterfall" v-loading="loading">
       <template v-for="item in list" :key="item.articleId">
         <div class="waterfall-item" v-if="item.content && item.content.newsItem">
-          <wx-news :articles="item.content.newsItem" />
+          <WxNews :articles="item.content.newsItem" />
           <!-- 操作按钮 -->
           <el-row class="ope-row">
             <el-button
@@ -239,7 +221,7 @@
           </div>
           <!--富文本编辑器组件-->
           <el-row>
-            <wx-editor
+            <WxEditor
               v-model="articlesAdd[isActiveAddNews].content"
               :account-id="uploadData.accountId"
               v-if="hackResetEditor"
@@ -258,14 +240,15 @@
 import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
 import { getAccessToken } from '@/utils/auth'
-import * as MpAccountApi from '@/api/mp/account'
 import * as MpDraftApi from '@/api/mp/draft'
 import * as MpFreePublishApi from '@/api/mp/freePublish'
-const message = useMessage() // 消息
 // 可以用改本地数据模拟，避免API调用超限
 // import drafts from './mock'
 
+const message = useMessage() // 消息
+
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -274,8 +257,6 @@ const queryParams = reactive({
   pageSize: 10,
   accountId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const accountList = ref([]) // 公众号账号列表
 
 // ========== 文件上传 ==========
 const materialSelectRef = ref()
@@ -298,16 +279,11 @@ const operateMaterial = ref('add')
 const articlesMediaId = ref('')
 const hackResetEditor = ref(false)
 
-/** 初始化 **/
-onMounted(async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 选中第一个
-  if (accountList.value.length > 0) {
-    // @ts-ignore
-    queryParams.accountId = accountList.value[0].id
-  }
-  await getList()
-})
+/** 侦听公众号变化 **/
+const accountChanged = (accountId) => {
+  setAccountId(accountId)
+  getList()
+}
 
 // ======================== 列表查询 ========================
 /** 设置账号编号 */
@@ -341,26 +317,6 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  // 默认选中第一个
-  if (queryParams.accountId) {
-    setAccountId(queryParams.accountId)
-  }
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    setAccountId(accountList.value[0].id)
-  }
-  handleQuery()
-}
-
 // ======================== 新增/修改草稿 ========================
 /** 新增按钮操作 */
 const handleAdd = () => {
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index 778609b9..5fb3fb91 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -2,28 +2,7 @@
   <doc-alert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
-      </el-form-item>
-    </el-form>
+    <WxAccountSelect @change="(accountId) => accountChange(accountId)" />
   </ContentWrap>
 
   <ContentWrap>
@@ -31,7 +10,7 @@
       <!-- tab 1：图片  -->
       <el-tab-pane name="image">
         <template #label>
-          <span><Icon icon="ep:picture" />图片</span>
+          <span> <Icon icon="ep:picture" />图片 </span>
         </template>
         <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
           <el-upload
@@ -82,7 +61,7 @@
       <!-- tab 2：语音  -->
       <el-tab-pane name="voice">
         <template #label>
-          <span><Icon icon="ep:microphone" />语音</span>
+          <span> <Icon icon="ep:microphone" />语音 </span>
         </template>
         <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
           <el-upload
@@ -111,9 +90,15 @@
               <WxVoicePlayer :url="scope.row.url" />
             </template>
           </el-table-column>
-          <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <el-table-column
+            label="上传时间"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180"
+          >
             <template #default="scope">
-              <span>{{ formatDate(scope.row.createTime) }}</span>
+              <span>{{ scope.row.createTime }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -145,7 +130,7 @@
       <!-- tab 3：视频 -->
       <el-tab-pane name="video">
         <template #label>
-          <span><Icon icon="ep:video-play" /> 视频</span>
+          <span> <Icon icon="ep:video-play" /> 视频 </span>
         </template>
         <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
           <el-button type="primary" plain @click="handleAddVideo">新建视频</el-button>
@@ -212,16 +197,22 @@
               <WxVideoPlayer :url="scope.row.url" />
             </template>
           </el-table-column>
-          <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <el-table-column
+            label="上传时间"
+            align="center"
+            :formatter="dateFormatter"
+            prop="createTime"
+            width="180"
+          >
             <template #default="scope">
-              <span>{{ formatDate(scope.row.createTime) }}</span>
+              <span>{{ scope.row.createTime }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" fixed="right">
             <template #default="scope">
-              <el-button type="primary" link plain @click="handleDownload(scope.row)"
-                ><Icon icon="ep:download" />下载</el-button
-              >
+              <el-button type="primary" link plain @click="handleDownload(scope.row)">
+                <Icon icon="ep:download" />下载
+              </el-button>
               <el-button
                 type="primary"
                 link
@@ -249,16 +240,19 @@
 <script setup name="MpMaterial">
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
-import { getSimpleAccountList } from '@/api/mp/account'
-import { getMaterialPage, deletePermanentMaterial } from '@/api/mp/material'
-import { getAccessToken } from '@/utils/auth'
-import { formatDate } from '@/utils/formatTime'
-
-const BASE_URL = import.meta.env.VITE_BASE_URL
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+// import * as MpAccountApi from '@/api/mp/account'
+import * as MpMaterialApi from '@/api/mp/material'
+import * as authUtil from '@/utils/auth'
+import { dateFormatter } from '@/utils/formatTime'
 
 const message = useMessage()
 
-const queryFormRef = ref()
+const BASE_URL = import.meta.env.VITE_BASE_URL
+const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
+const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
+
+// const queryFormRef = ref()
 const uploadFormRef = ref()
 const uploadVideoRef = ref()
 
@@ -277,8 +271,6 @@ const queryParams = reactive({
   permanent: true
 })
 
-const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
-const headers = { Authorization: 'Bearer ' + getAccessToken() }
 const fileList = ref([])
 const uploadData = reactive({
   type: 'image',
@@ -295,20 +287,11 @@ const uploadRules = reactive({
   introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
 })
 
-// 公众号账号列表
-const accountList = ref([])
-
-onMounted(() => {
-  getSimpleAccountList().then((data) => {
-    accountList.value = data
-    // 默认选中第一个
-    if (accountList.value.length > 0) {
-      setAccountId(accountList.value[0].id)
-    }
-    // 加载数据
-    getList()
-  })
-})
+/** 侦听公众号变化 **/
+const accountChange = (accountId) => {
+  setAccountId(accountId)
+  getList()
+}
 
 // ======================== 列表查询 ========================
 /** 设置账号编号 */
@@ -318,7 +301,7 @@ const setAccountId = (accountId) => {
 }
 
 /** 查询列表 */
-const getList = () => {
+const getList = async () => {
   // 如果没有选中公众号账号，则进行提示。
   if (!queryParams.accountId) {
     message.error('未选中公众号，无法查询草稿箱')
@@ -326,17 +309,16 @@ const getList = () => {
   }
 
   loading.value = true
-  getMaterialPage({
-    ...queryParams,
-    type: type.value
-  })
-    .then((data) => {
-      list.value = data.list
-      total.value = data.total
-    })
-    .finally(() => {
-      loading.value = false
+  try {
+    const data = await MpMaterialApi.getMaterialPage({
+      ...queryParams,
+      type: type.value
     })
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 搜索按钮操作 */
@@ -349,31 +331,23 @@ const handleQuery = () => {
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    setAccountId(accountList.value[0].id)
-  }
-  handleQuery()
-}
-
 const handleTabChange = (tabName) => {
   // 设置 type
   uploadData.type = tabName
+
+  // 提前情况数据，避免tab切换后显示垃圾数据
+  list.value = []
+  total.value = 0
+
   // 从第一页开始查询
   handleQuery()
 }
 
 // ======================== 文件上传 ========================
 const beforeImageUpload = (file) => {
-  const isType =
-    file.type === 'image/jpeg' ||
-    file.type === 'image/png' ||
-    file.type === 'image/gif' ||
-    file.type === 'image/bmp' ||
-    file.type === 'image/jpg'
+  const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
+    file.type
+  )
   if (!isType) {
     message.error('上传图片格式不对!')
     return false
@@ -388,11 +362,7 @@ const beforeImageUpload = (file) => {
 }
 
 const beforeVoiceUpload = (file) => {
-  const isType =
-    file.type === 'audio/mp3' ||
-    file.type === 'audio/wma' ||
-    file.type === 'audio/wav' ||
-    file.type === 'audio/amr'
+  const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type)
   const isLt = file.size / 1024 / 1024 < 2
   if (!isType) {
     message.error('上传语音格式不对!')
@@ -412,11 +382,13 @@ const beforeVideoUpload = (file) => {
     message.error('上传视频格式不对!')
     return false
   }
+
   const isLt = file.size / 1024 / 1024 < 10
   if (!isLt) {
     message.error('上传视频大小不能超过 10M!')
     return false
   }
+
   addMaterialLoading.value = true
   return true
 }
@@ -476,7 +448,7 @@ const resetVideo = () => {
 // ======================== 其它操作 ========================
 const handleDelete = async (item) => {
   await message.confirm('此操作将永久删除该文件, 是否继续?')
-  await deletePermanentMaterial(item.id)
+  await MpMaterialApi.deletePermanentMaterial(item.id)
   message.alertSuccess('删除成功')
 }
 </script>
@@ -487,40 +459,50 @@ const handleDelete = async (item) => {
   width: 100%;
   column-gap: 10px;
   column-count: 5;
-  margin-top: 10px; /* 芋道源码：增加 10px，避免顶着上面 */
+  margin-top: 10px;
+  /* 芋道源码：增加 10px，避免顶着上面 */
 }
+
 .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>
-- 
Gitee


From a8b4c16a7e5fdfb69ba49b1712782f46f296fecc Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 00:26:43 +0800
Subject: [PATCH 06/23] =?UTF-8?q?refactor:=20WxMaterialSelect=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6setup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mp/components/wx-material-select/main.vue | 199 ++++++++----------
 1 file changed, 91 insertions(+), 108 deletions(-)

diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
index 4c2d46f3..d67ffb1f 100644
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -14,7 +14,8 @@
           <p class="item-name">{{ item.name }}</p>
           <el-row class="ope-row">
             <el-button type="success" @click="selectMaterialFun(item)">
-              选择 <Icon icon="ep:circle-check" />
+              选择
+              <Icon icon="ep:circle-check" />
             </el-button>
           </el-row>
         </div>
@@ -48,7 +49,8 @@
         <el-table-column label="操作" align="center" fixed="right">
           <template #default="scope">
             <el-button type="primary" link @click="selectMaterialFun(scope.row)"
-              >选择<Icon icon="ep:plus" />
+              >选择
+              <Icon icon="ep:plus" />
             </el-button>
           </template>
         </el-table-column>
@@ -89,7 +91,8 @@
         >
           <template #default="scope">
             <el-button type="primary" link @click="selectMaterialFun(scope.row)"
-              >选择<Icon icon="akar-icons:circle-plus" />
+              >选择
+              <Icon icon="akar-icons:circle-plus" />
             </el-button>
           </template>
         </el-table-column>
@@ -110,7 +113,8 @@
             <WxNews :articles="item.content.newsItem" />
             <el-row class="ope-row">
               <el-button type="success" @click="selectMaterialFun(item)">
-                选择<Icon icon="ep:circle-check" />
+                选择
+                <Icon icon="ep:circle-check" />
               </el-button>
             </el-row>
           </div>
@@ -127,124 +131,101 @@
   </div>
 </template>
 
-<script lang="ts" name="WxMaterialSelect">
+<script lang="ts" setup 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 * as MpMaterialApi from '@/api/mp/material'
+import * as MpFreePublishApi from '@/api/mp/freePublish'
+import * as MpDraftApi from '@/api/mp/draft'
 import { dateFormatter } from '@/utils/formatTime'
-import { defineComponent, PropType } from 'vue'
 
-export default defineComponent({
-  components: {
-    WxNews,
-    WxVoicePlayer,
-    WxVideoPlayer
+const props = defineProps({
+  objData: {
+    type: Object, // type - 类型；accountId - 公众号账号编号
+    required: true
   },
-  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)
+  newsType: {
+    // 图文类型：1、已发布图文；2、草稿箱图文
+    type: String as PropType<string>,
+    default: '1'
+  }
+})
 
-    const selectMaterialFun = (item) => {
-      ctx.emit('select-material', 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 emit = defineEmits(['select-material'])
 
-    const getMaterialPageFun = async () => {
-      let data = await getMaterialPage({
-        ...queryParams,
-        type: objDataRef.type
-      })
-      list.value = data.list
-      total.value = data.total
-      loading.value = false
-    }
+// 遮罩层
+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 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 selectMaterialFun = (item) => {
+  emit('select-material', item)
+}
 
-    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
+const getPage = async () => {
+  loading.value = true
+  try {
+    if (objDataRef.type === 'news' && newsTypeRef.value === '1') {
+      // 【图文】+ 【已发布】
+      await getFreePublishPageFun()
+    } else if (objDataRef.type === 'news' && newsTypeRef.value === '2') {
+      // 【图文】+ 【草稿】
+      await getDraftPageFun()
+    } else {
+      // 【素材】
+      await getMaterialPageFun()
     }
+  } finally {
+    loading.value = false
+  }
+}
+
+const getMaterialPageFun = async () => {
+  const data = await MpMaterialApi.getMaterialPage({
+    ...queryParams,
+    type: objDataRef.type
+  })
+  list.value = data.list
+  total.value = data.total
+}
 
-    onMounted(async () => {
-      getPage()
+const getFreePublishPageFun = async () => {
+  const data = await MpFreePublishApi.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
+}
 
-    return {
-      handleQuery,
-      dateFormatter,
-      selectMaterialFun,
-      getMaterialPageFun,
-      getPage,
-      queryParams,
-      objDataRef,
-      list,
-      total,
-      loading
-    }
-  }
+const getDraftPageFun = async () => {
+  const data = await MpDraftApi.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
+}
+
+onMounted(async () => {
+  getPage()
 })
 </script>
 <style lang="scss" scoped>
@@ -275,6 +256,7 @@ p {
   .waterfall {
     column-count: 3;
   }
+
   p {
     color: red;
   }
@@ -284,6 +266,7 @@ p {
   .waterfall {
     column-count: 2;
   }
+
   p {
     color: orange;
   }
-- 
Gitee


From 098b7305c914ba13c9bcf697c66d37555d668fbd Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 00:46:18 +0800
Subject: [PATCH 07/23] =?UTF-8?q?refactor:=20=E3=80=90MP=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E8=8F=9C=E5=8D=95=E3=80=91=E5=BA=94=E7=94=A8=E3=80=90?=
 =?UTF-8?q?=E5=85=AC=E4=BC=97=E5=8F=B7=E9=80=89=E6=8B=A9=E5=99=A8=E3=80=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/menu/index.vue | 80 +++++++++----------------------------
 1 file changed, 19 insertions(+), 61 deletions(-)

diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index 2d4b7c76..fc63c37e 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -2,22 +2,7 @@
   <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
-      </el-form-item>
-    </el-form>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
   </ContentWrap>
 
   <!-- 列表 -->
@@ -204,17 +189,15 @@ import { handleTree } from '@/utils/tree'
 import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
-import { deleteMenu, getMenuList, saveMenu } from '@/api/mp/menu'
-import * as MpAccountApi from '@/api/mp/account'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+import * as MpMenuApi from '@/api/mp/menu'
 import menuOptions from './menuOptions'
 const message = useMessage() // 消息
 
 // ======================== 列表查询 ========================
 const loading = ref(true) // 遮罩层
 const accountId = ref(undefined) // 公众号Id
-const name = ref('') // 公众号名
 const menuList = ref({ children: [] })
-const accountList = ref([]) // 公众号账号列表
 
 // ======================== 菜单操作 ========================
 const isActive = ref(-1) // 一级菜单点中样式
@@ -228,60 +211,34 @@ const showConfigureContent = ref(true) // 是否展示配置内容；如果有
 const hackResetWxReplySelect = ref(false) // 重置 WxReplySelect 组件
 const tempObj = ref({}) // 右边临时变量，作为中间值牵引关系
 
-const tempSelfObj = ref({
-  // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
-})
+// 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
+const tempSelfObj = ref({})
 const dialogNewsVisible = ref(false) // 跳转图文时的素材选择弹窗
 
-onMounted(async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 选中第一个
-  if (accountList.value.length > 0) {
-    // @ts-ignore
-    setAccountId(accountList.value[0].id)
-  }
-  await getList()
-})
-
-// ======================== 列表查询 ========================
-/** 设置账号编号 */
-const setAccountId = (id) => {
+/** 侦听公众号变化 **/
+const accountChanged = (accountId) => {
   accountId.value = id
-  name.value = accountList.value.find((item) => item.id === accountId.value)?.name
+  getList()
 }
 
+/** 查询并转换菜单 **/
 const getList = async () => {
   loading.value = false
-  getMenuList(accountId.value)
-    .then((response) => {
-      const menuData = convertMenuList(response)
-      menuList.value = handleTree(menuData, 'id')
-    })
-    .finally(() => {
-      loading.value = false
-    })
+  try {
+    const data = await MpMenuApi.getMenuList(accountId.value)
+    const menuData = convertMenuList(data)
+    menuList.value = handleTree(menuData, 'id')
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   resetForm()
-  // 默认选中第一个
-  if (accountId.value) {
-    setAccountId(accountId.value)
-  }
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  resetForm()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    setAccountId(accountList.value[0].id)
-  }
-  handleQuery()
-}
-
 // 将后端返回的 menuList，转换成前端的 menuList
 const convertMenuList = (list) => {
   if (!list) return []
@@ -443,7 +400,7 @@ const handleSave = async () => {
   try {
     await message.confirm('确定要删除吗?')
     loading.value = true
-    await saveMenu(accountId.value, convertMenuFormList())
+    await MpMenuApi.saveMenu(accountId.value, convertMenuFormList())
     getList()
     message.notifySuccess('发布成功')
   } finally {
@@ -464,7 +421,7 @@ const handleDelete = async () => {
   try {
     await message.confirm('确定要删除吗?')
     loading.value = true
-    await deleteMenu(accountId.value)
+    await MpMenuApi.deleteMenu(accountId.value)
     handleQuery()
     message.notifySuccess('清空成功')
   } finally {
@@ -546,6 +503,7 @@ const deleteMaterial = () => {
   delete tempObj.value['replyArticles']
 }
 </script>
+
 <!--本组件样式-->
 <style lang="scss" scoped="scoped">
 /* 公共颜色变量 */
-- 
Gitee


From 7711ceb3f38ebdba126521d143aa167c2334131a Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 01:05:13 +0800
Subject: [PATCH 08/23] =?UTF-8?q?fix:=20=E3=80=90MP=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E8=8F=9C=E5=8D=95=E3=80=91accountChanged=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/menu/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index fc63c37e..249f3a7c 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -216,7 +216,7 @@ const tempSelfObj = ref({})
 const dialogNewsVisible = ref(false) // 跳转图文时的素材选择弹窗
 
 /** 侦听公众号变化 **/
-const accountChanged = (accountId) => {
+const accountChanged = (id) => {
   accountId.value = id
   getList()
 }
-- 
Gitee


From af18201ceb150433dd81710a6930382e3087a4ce Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 01:07:04 +0800
Subject: [PATCH 09/23] =?UTF-8?q?refactor:=E3=80=90=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=9B=9E=E5=A4=8D=E3=80=81=E5=9B=BE=E6=96=87=E3=80=91=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E3=80=90=E5=85=AC=E4=BC=97=E5=8F=B7=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E3=80=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/autoReply/index.vue   | 96 +++++++-----------------------
 src/views/mp/freePublish/index.vue | 69 ++++-----------------
 src/views/mp/material/index.vue    |  2 -
 3 files changed, 33 insertions(+), 134 deletions(-)

diff --git a/src/views/mp/autoReply/index.vue b/src/views/mp/autoReply/index.vue
index 03f98b54..4877ec76 100644
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@@ -3,28 +3,7 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
-      </el-form-item>
-    </el-form>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
   </ContentWrap>
 
   <!-- tab 切换 -->
@@ -181,20 +160,13 @@
   </ContentWrap>
 </template>
 <script setup name="MpAutoReply">
-import { ref, reactive, onMounted, nextTick } from 'vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxMusic from '@/views/mp/components/wx-music/main.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
-import { getSimpleAccountList } from '@/api/mp/account'
-import {
-  createAutoReply,
-  deleteAutoReply,
-  getAutoReply,
-  getAutoReplyPage,
-  updateAutoReply
-} from '@/api/mp/autoReply'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+import * as MpAutoReplyApi from '@/api/mp/autoReply'
 
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
@@ -202,7 +174,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 
 const message = useMessage()
 
-const queryFormRef = ref()
+// const queryFormRef = ref()
 const formRef = ref()
 
 // tab 类型（1、关注时回复；2、消息回复；3、关键词回复）
@@ -240,43 +212,27 @@ const rules = {
   requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
 }
 
-const hackResetWxReplySelect = ref(false) // 重置 WxReplySelect 组件，解决无法清除的问题
+// 重置 WxReplySelect 组件，解决无法清除的问题
+const hackResetWxReplySelect = ref(false)
 
-// 公众号账号列表
-const accountList = ref([])
-
-onMounted(() => {
-  getSimpleAccountList().then((data) => {
-    accountList.value = data
-    // 默认选中第一个
-    if (accountList.value.length > 0) {
-      queryParams.accountId = accountList.value[0].id
-    }
-    // 加载数据
-    getList()
-  })
-})
+const accountChanged = (accountId) => {
+  queryParams.accountId = accountId
+  getList()
+}
 
 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询自动回复')
-    return false
-  }
-
   loading.value = false
-  // 处理查询参数
-  let params = {
-    ...queryParams,
-    type: type.value
-  }
-  // 执行查询
-  getAutoReplyPage(params).then((data) => {
+  try {
+    const data = await MpAutoReplyApi.getAutoReplyPage({
+      ...queryParams,
+      type: type.value
+    })
     list.value = data.list
     total.value = data.total
+  } finally {
     loading.value = false
-  })
+  }
 }
 
 /** 搜索按钮操作 */
@@ -285,16 +241,6 @@ const handleQuery = () => {
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  handleQuery()
-}
-
 const handleTabChange = (tabName) => {
   type.value = tabName
   handleQuery()
@@ -319,7 +265,7 @@ const handleUpdate = (row) => {
   resetEditor()
   console.log(row)
 
-  getAutoReply(row.id).then((data) => {
+  MpAutoReplyApi.getAutoReply(row.id).then((data) => {
     // 设置属性
     form.value = { ...data }
     delete form.value['responseMessageType']
@@ -370,13 +316,13 @@ const handleSubmit = () => {
     form.responseHqMusicUrl = objData.value.hqMusicUrl
 
     if (form.value.id !== undefined) {
-      updateAutoReply(form).then(() => {
+      MpAutoReplyApi.updateAutoReply(form).then(() => {
         message.success('修改成功')
         open.value = false
         getList()
       })
     } else {
-      createAutoReply(form).then(() => {
+      MpAutoReplyApi.createAutoReply(form).then(() => {
         message.success('新增成功')
         open.value = false
         getList()
@@ -414,7 +360,7 @@ const resetEditor = () => {
 
 const handleDelete = async (row) => {
   await message.confirm('是否确认删除此数据?')
-  await deleteAutoReply(row.id)
+  await MpAutoReplyApi.deleteAutoReply(row.id)
   await getList()
   message.success('删除成功')
 }
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index 66f35012..bb42b6a2 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -3,28 +3,7 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </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-form-item>
-    </el-form>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
   </ContentWrap>
 
   <!-- 列表 -->
@@ -59,10 +38,11 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="MpFreePublish">
+<script setup name="MpFreePublish">
 import * as FreePublishApi from '@/api/mp/freePublish'
-import * as MpAccountApi from '@/api/mp/account'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -72,18 +52,17 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  accountId: undefined // 当前页数
+  accountId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+/** 侦听公众号变化 **/
+const accountChanged = (accountId) => {
+  queryParams.accountId = accountId
+  getList()
+}
 
 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询已发表图文')
-    return false
-  }
   try {
     loading.value = true
     const data = await FreePublishApi.getFreePublishPage(queryParams)
@@ -94,22 +73,6 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  handleQuery()
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (item) => {
   try {
@@ -122,16 +85,8 @@ const handleDelete = async (item) => {
     await getList()
   } catch {}
 }
-
-onMounted(async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  await getList()
-})
 </script>
+
 <style lang="scss" scoped>
 .ope-row {
   margin-top: 5px;
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index 5fb3fb91..954d0fac 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -241,7 +241,6 @@
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
-// import * as MpAccountApi from '@/api/mp/account'
 import * as MpMaterialApi from '@/api/mp/material'
 import * as authUtil from '@/utils/auth'
 import { dateFormatter } from '@/utils/formatTime'
@@ -252,7 +251,6 @@ const BASE_URL = import.meta.env.VITE_BASE_URL
 const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
 const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
 
-// const queryFormRef = ref()
 const uploadFormRef = ref()
 const uploadVideoRef = ref()
 
-- 
Gitee


From b84298641cc87ef441cb49c3ece326cb00bc3cae Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 01:15:16 +0800
Subject: [PATCH 10/23] =?UTF-8?q?refactor=EF=BC=9A=E3=80=90MP=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E3=80=91=E5=BA=94=E7=94=A8=E3=80=90=E5=85=AC=E4=BC=97?=
 =?UTF-8?q?=E5=8F=B7=E9=80=89=E6=8B=A9=E5=99=A8=E3=80=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/tag/index.vue | 82 ++++++--------------------------------
 1 file changed, 13 insertions(+), 69 deletions(-)

diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
index 0537bcaa..04366e88 100644
--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
@@ -3,45 +3,16 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="标签名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入标签名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <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>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
+      <template #actions>
         <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']">
           <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" /> 同步
         </el-button>
-      </el-form-item>
-    </el-form>
+      </template>
+    </WxAccountSelect>
   </ContentWrap>
 
   <!-- 列表 -->
@@ -92,8 +63,8 @@
 </template>
 <script setup lang="ts" name="MpTag">
 import { dateFormatter } from '@/utils/formatTime'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
 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() // 国际化
@@ -104,19 +75,18 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  accountId: undefined,
-  name: null
+  accountId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+/** 侦听公众号变化 **/
+const accountChanged = (accountId) => {
+  queryParams.pageNo = 1
+  queryParams.accountId = accountId
+  getList()
+}
 
 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    await message.error('未选中公众号，无法查询标签')
-    return
-  }
   try {
     loading.value = true
     const data = await MpTagApi.getTagPage(queryParams)
@@ -127,22 +97,6 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  handleQuery()
-}
-
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -172,14 +126,4 @@ const handleSync = async () => {
     await getList()
   } catch {}
 }
-
-/** 初始化 **/
-onMounted(async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  await getList()
-})
 </script>
-- 
Gitee


From 053ee54a1645b882e588ba6bc1351c3373d5685d Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 01:20:37 +0800
Subject: [PATCH 11/23] =?UTF-8?q?refactor:=20=E3=80=90MP=E7=B2=89=E4=B8=9D?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E3=80=91=E5=BA=94=E7=94=A8=E3=80=90=E5=85=AC?=
 =?UTF-8?q?=E4=BC=97=E5=8F=B7=E9=80=89=E6=8B=A9=E5=99=A8=E3=80=91=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/user/index.vue | 95 +++++++------------------------------
 1 file changed, 18 insertions(+), 77 deletions(-)

diff --git a/src/views/mp/user/index.vue b/src/views/mp/user/index.vue
index e338f822..d5d2e4dc 100644
--- a/src/views/mp/user/index.vue
+++ b/src/views/mp/user/index.vue
@@ -3,49 +3,13 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="用户标识" prop="openid">
-        <el-input
-          v-model="queryParams.openid"
-          placeholder="请输入用户标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="昵称" prop="nickname">
-        <el-input
-          v-model="queryParams.nickname"
-          placeholder="请输入昵称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
+      <template #actions>
         <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:user:sync']">
           <Icon icon="ep:refresh" class="mr-5px" /> 同步
         </el-button>
-      </el-form-item>
-    </el-form>
+      </template>
+    </WxAccountSelect>
   </ContentWrap>
 
   <!-- 列表 -->
@@ -101,11 +65,12 @@
   <UserForm ref="formRef" @success="getList" />
 </template>
 <script lang="ts" setup name="MpUser">
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
 import { dateFormatter } from '@/utils/formatTime'
-import * as MpAccountApi from '@/api/mp/account'
 import * as MpUserApi from '@/api/mp/user'
 import * as MpTagApi from '@/api/mp/tag'
 import UserForm from './UserForm.vue'
+
 const message = useMessage() // 消息
 
 const loading = ref(true) // 列表的加载中
@@ -118,17 +83,22 @@ const queryParams = reactive({
   openid: null,
   nickname: null
 })
-const queryFormRef = ref() // 搜索的表单
-const accountList = ref([]) // 公众号账号列表
 const tagList = ref([]) // 公众号标签列表
 
+/** 初始化 */
+onMounted(async () => {
+  tagList.value = await MpTagApi.getSimpleTagList()
+})
+
+/** 侦听公众号变化 **/
+const accountChanged = (accountId) => {
+  queryParams.pageNo = 1
+  queryParams.accountId = accountId
+  getList()
+}
+
 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询用户')
-    return false
-  }
   try {
     loading.value = true
     const data = await MpUserApi.getUserPage(queryParams)
@@ -139,22 +109,6 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  handleQuery()
-}
-
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (id: number) => {
@@ -171,17 +125,4 @@ const handleSync = async () => {
     await getList()
   } catch {}
 }
-
-/** 初始化 */
-onMounted(async () => {
-  // 加载标签
-  tagList.value = await MpTagApi.getSimpleTagList()
-
-  // 加载账号
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  await getList()
-})
 </script>
-- 
Gitee


From df399647ed401fd47318b1886bbb0dcc9c44cfe1 Mon Sep 17 00:00:00 2001
From: wuxiran <wuxiran@outlook.com>
Date: Mon, 10 Apr 2023 12:19:59 +0800
Subject: [PATCH 12/23] =?UTF-8?q?1=E3=80=81=E4=BF=AE=E5=A4=8D=E5=B2=97?=
 =?UTF-8?q?=E4=BD=8D=E9=A1=BA=E5=BA=8F=E6=B2=A1=E6=9C=89=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E7=9A=84=E9=97=AE=E9=A2=98=202=E3=80=81?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E9=97=A8=E7=AE=A1=E7=90=86=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E9=94=99=E5=88=AB=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/dept/index.vue    | 2 +-
 src/views/system/post/PostForm.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 36d3ca5c..e4c83bc7 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -19,7 +19,7 @@
       <el-form-item label="部门状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          placeholder="请选择不么你状态"
+          placeholder="请选择部门状态"
           clearable
           class="!w-240px"
         >
diff --git a/src/views/system/post/PostForm.vue b/src/views/system/post/PostForm.vue
index 877ec60e..586b86c6 100644
--- a/src/views/system/post/PostForm.vue
+++ b/src/views/system/post/PostForm.vue
@@ -13,6 +13,9 @@
       <el-form-item label="岗位编码" prop="code">
         <el-input v-model="formData.code" placeholder="请输入岗位编码" />
       </el-form-item>
+      <el-form-item label="岗位顺序" prop="sort">
+        <el-input v-model="formData.sort" placeholder="请输入岗位顺序" />
+      </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="formData.status" placeholder="请选择状态" clearable>
           <el-option
@@ -49,7 +52,7 @@ const formData = ref({
   id: undefined,
   name: '',
   code: '',
-  sort: undefined,
+  sort: 0,
   status: CommonStatusEnum.ENABLE,
   remark: ''
 })
-- 
Gitee


From b9b8e99149b8978ab043934daf00202019d0aeac Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 12:42:29 +0800
Subject: [PATCH 13/23] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0launch.json?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9.env.front=E9=85=8D=E5=90=88debug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.front          | 15 +++++++++++++++
 .vscode/launch.json | 16 ++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 .vscode/launch.json

diff --git a/.env.front b/.env.front
index 2641417d..a63b6379 100644
--- a/.env.front
+++ b/.env.front
@@ -17,3 +17,18 @@ VITE_API_URL=/admin-api
 
 # 打包路径
 VITE_BASE_PATH=/
+
+# 项目本地运行端口号, 与.vscode/launch.json配合
+VITE_PORT=5173
+
+# 是否删除debugger
+VITE_DROP_DEBUGGER=false
+
+# 是否删除console.log
+VITE_DROP_CONSOLE=false
+
+# 是否sourcemap
+VITE_SOURCEMAP=true
+
+# 验证码的开关
+VITE_APP_CAPTCHA_ENABLE=false
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..e4093b3a
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "Launch Edge against localhost",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMaps": true
+    }
+  ]
+}
-- 
Gitee


From a5cb7a50ab4172736acec771c9e137a7d544d45e Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Mon, 10 Apr 2023 16:55:02 +0800
Subject: [PATCH 14/23] fix: vscode debug

---
 build/vite/index.ts | 5 +++--
 package.json        | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/build/vite/index.ts b/build/vite/index.ts
index 0e721ce9..288ec93b 100644
--- a/build/vite/index.ts
+++ b/build/vite/index.ts
@@ -13,7 +13,7 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import viteCompression from 'vite-plugin-compression'
 import topLevelAwait from 'vite-plugin-top-level-await'
-import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
@@ -98,7 +98,8 @@ export function createVitePlugins() {
       deleteOriginFile: false //压缩后是否删除源文件
     }),
     ViteEjsPlugin(),
-    topLevelAwait({ // https://juejin.cn/post/7152191742513512485
+    topLevelAwait({
+      // https://juejin.cn/post/7152191742513512485
       // The export name of top-level await promise for each chunk module
       promiseExportName: '__tla',
       // The function to generate import names of top-level await promise in each chunk module
diff --git a/package.json b/package.json
index def1f5c7..84e420d1 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "vite-plugin-purge-icons": "^0.9.2",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-top-level-await": "^1.3.0",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vite-plugin-vue-setup-extend-plus": "^0.1.0",
     "vite-plugin-windicss": "^1.8.10",
     "vue-tsc": "^1.2.0",
     "windicss": "^3.5.6"
-- 
Gitee


From 7cb859e976abde3df874760c1cf509566d9427ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E6=96=B9=E7=99=BD?= <457776125@qq.com>
Date: Mon, 10 Apr 2023 22:29:50 +0800
Subject: [PATCH 15/23] =?UTF-8?q?=E3=80=90=E9=87=8D=E6=9E=84=E3=80=91Vue3?=
 =?UTF-8?q?=20=E7=AE=A1=E7=90=86=E5=90=8E=E5=8F=B0=EF=BC=9A[=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E7=AE=A1=E7=90=86=20->=20=E5=BA=94=E7=94=A8=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF][=E6=94=AF=E4=BB=98=E7=AE=A1=E7=90=86=20->=20?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E8=AE=A2=E5=8D=95][=E6=94=AF=E4=BB=98?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=20->=20=E9=80=80=E6=AC=BE=E8=AE=A2=E5=8D=95]?=
 =?UTF-8?q?=20=E4=BD=BF=E7=94=A8=20Element=20Plus=20=E5=8E=9F=E7=94=9F?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constants.ts              |   4 +
 src/views/pay/app/AppForm.vue       | 158 ++++++++
 src/views/pay/app/app.data.ts       |  71 ----
 src/views/pay/app/index.vue         | 580 +++++++++++++++++++++-------
 src/views/pay/order/index.vue       | 406 ++++++++++++++++---
 src/views/pay/order/order.data.ts   | 152 --------
 src/views/pay/order/orderForm.vue   | 152 ++++++++
 src/views/pay/refund/index.vue      | 392 ++++++++++++++++---
 src/views/pay/refund/refund.data.ts | 173 ---------
 src/views/pay/refund/refundForm.vue | 154 ++++++++
 10 files changed, 1607 insertions(+), 635 deletions(-)
 create mode 100644 src/views/pay/app/AppForm.vue
 delete mode 100644 src/views/pay/app/app.data.ts
 delete mode 100644 src/views/pay/order/order.data.ts
 create mode 100644 src/views/pay/order/orderForm.vue
 delete mode 100644 src/views/pay/refund/refund.data.ts
 create mode 100644 src/views/pay/refund/refundForm.vue

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 901c04e9..5cda391f 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -114,6 +114,10 @@ export const PayChannelEnum = {
   ALIPAY_QR: {
     code: 'alipay_qr',
     name: '支付宝扫码支付'
+  },
+  ALIPAY_BAR: {
+    code: 'alipay_bar',
+    name: '支付宝条码支付'
   }
 }
 
diff --git a/src/views/pay/app/AppForm.vue b/src/views/pay/app/AppForm.vue
new file mode 100644
index 00000000..cacf49b2
--- /dev/null
+++ b/src/views/pay/app/AppForm.vue
@@ -0,0 +1,158 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="160px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="应用名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入应用名" />
+      </el-form-item>
+
+      <el-form-item label="所属商户" prop="merchantId">
+        <el-select
+          v-model="formData.merchantId"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请选择所属商户"
+          :remote-method="handleGetMerchantListByName"
+          :loading="formLoading"
+        >
+          <el-option
+            v-for="item in merchantList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开启状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="支付结果的回调地址" prop="payNotifyUrl">
+        <el-input v-model="formData.payNotifyUrl" placeholder="请输入支付结果的回调地址" />
+      </el-form-item>
+      <el-form-item label="退款结果的回调地址" prop="refundNotifyUrl">
+        <el-input v-model="formData.refundNotifyUrl" placeholder="请输入退款结果的回调地址" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as AppApi from '@/api/pay/app'
+import * as MerchantApi from '@/api/pay/merchant'
+import { CommonStatusEnum } from '@/utils/constants'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  packageId: undefined,
+  contactName: undefined,
+  contactMobile: undefined,
+  accountCount: undefined,
+  expireTime: undefined,
+  domain: undefined,
+  status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+  name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
+  payNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
+  refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }],
+  merchantId: [{ required: true, message: '商户编号不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const merchantList = ref([]) // 商户列表
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await AppApi.getApp(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  await handleGetMerchantListByName(null)
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as AppApi.AppVO
+    if (formType.value === 'create') {
+      await AppApi.createApp(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await AppApi.updateApp(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/**
+ * 根据商户名称模糊匹配商户信息
+ * @param name 商户名称
+ */
+const handleGetMerchantListByName = async (name) => {
+  merchantList.value = await MerchantApi.getMerchantListByName(name)
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    status: CommonStatusEnum.ENABLE,
+    remark: undefined,
+    payNotifyUrl: undefined,
+    refundNotifyUrl: undefined,
+    merchantId: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/pay/app/app.data.ts b/src/views/pay/app/app.data.ts
deleted file mode 100644
index 30f14180..00000000
--- a/src/views/pay/app/app.data.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  name: [required],
-  status: [required],
-  payNotifyUrl: [required],
-  refundNotifyUrl: [required],
-  merchantId: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'seq',
-  primaryTitle: '编号',
-  action: true,
-  columns: [
-    {
-      title: '应用名',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: '商户名称',
-      field: 'payMerchant',
-      isSearch: true
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '支付结果的回调地址',
-      field: 'payNotifyUrl',
-      isSearch: true
-    },
-    {
-      title: '退款结果的回调地址',
-      field: 'refundNotifyUrl',
-      isSearch: true
-    },
-    {
-      title: '商户名称',
-      field: 'merchantName',
-      isSearch: true
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      isTable: false,
-      isSearch: true
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      isForm: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/pay/app/index.vue b/src/views/pay/app/index.vue
index 77b78170..0c510b8f 100644
--- a/src/views/pay/app/index.vue
+++ b/src/views/pay/app/index.vue
@@ -1,155 +1,475 @@
 <template>
+  <!-- 搜索 -->
   <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
-          type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['pay:app:create']"
-          @click="handleCreate()"
-        />
-        <!-- 操作：导出 -->
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
-          v-hasPermi="['pay:app:export']"
-          @click="exportList('应用信息.xls')"
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="应用名" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入应用名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
         />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['pay:app:update']"
-          @click="handleUpdate(row.id)"
+      </el-form-item>
+      <el-form-item label="商户名称" prop="contactName">
+        <el-input
+          v-model="queryParams.contactName"
+          placeholder="请输入商户名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
         />
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['pay:app:query']"
-          @click="handleDetail(row.id)"
+      </el-form-item>
+      <el-form-item label="开启状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择开启状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['pay:app:delete']"
-          @click="deleteData(row.id)"
-        />
-      </template>
-    </XTable>
+      </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"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['system:tenant:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" />
+          新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:tenant:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
 
-  <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 #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="应用编号" align="center" prop="id" />
+      <el-table-column label="应用名" align="center" prop="name" />
+      <el-table-column label="开启状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="商户名称" align="center" prop="payMerchant.name" />
+      <el-table-column label="支付宝配置" align="center">
+        <el-table-column :label="payChannelEnum.ALIPAY_APP.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_APP.code)"
+              @click="
+                handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_APP.code, payType.ALIPAY)
+              "
+              circle
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="
+                handleCreateChannel(scope.row, payChannelEnum.ALIPAY_APP.code, payType.ALIPAY)
+              "
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column :label="payChannelEnum.ALIPAY_PC.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              circle
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_PC.code)"
+              @click="handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_PC.code, payType.ALIPAY)"
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="handleCreateChannel(scope.row, payChannelEnum.ALIPAY_PC.code, payType.ALIPAY)"
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column :label="payChannelEnum.ALIPAY_WAP.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              circle
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_WAP.code)"
+              @click="
+                handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_WAP.code, payType.ALIPAY)
+              "
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="
+                handleCreateChannel(scope.row, payChannelEnum.ALIPAY_WAP.code, payType.ALIPAY)
+              "
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column :label="payChannelEnum.ALIPAY_QR.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              circle
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_QR.code)"
+              @click="handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_QR.code, payType.ALIPAY)"
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="handleCreateChannel(scope.row, payChannelEnum.ALIPAY_QR.code, payType.ALIPAY)"
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column :label="payChannelEnum.ALIPAY_BAR.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              circle
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_BAR.code)"
+              @click="
+                handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_BAR.code, payType.ALIPAY)
+              "
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="
+                handleCreateChannel(scope.row, payChannelEnum.ALIPAY_BAR.code, payType.ALIPAY)
+              "
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="微信配置" align="center">
+        <el-table-column :label="payChannelEnum.WX_LITE.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              circle
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.WX_LITE.code)"
+              @click="handleUpdateChannel(scope.row, payChannelEnum.WX_LITE.code, payType.WECHAT)"
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="handleCreateChannel(scope.row, payChannelEnum.WX_LITE.code, payType.WECHAT)"
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column :label="payChannelEnum.WX_PUB.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              circle
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.WX_PUB.code)"
+              @click="handleUpdateChannel(scope.row, payChannelEnum.WX_PUB.code, payType.WECHAT)"
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="handleCreateChannel(scope.row, payChannelEnum.WX_PUB.code, payType.WECHAT)"
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column :label="payChannelEnum.WX_APP.name" align="center">
+          <template #default="scope">
+            <el-button
+              type="success"
+              circle
+              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.WX_APP.code)"
+              @click="handleUpdateChannel(scope.row, payChannelEnum.WX_APP.code, payType.WECHAT)"
+            >
+              <Icon icon="ep:check" />
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              circle
+              @click="handleCreateChannel(scope.row, payChannelEnum.WX_APP.code, payType.WECHAT)"
+            >
+              <Icon icon="ep:close" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
       />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+      <el-table-column label="操作" align="center" min-width="110" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['system:tenant:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:tenant:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <AppForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="PayApp">
-import type { FormExpose } from '@/components/Form'
-import { rules, allSchemas } from './app.data'
+<script setup lang="ts" name="App">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import download from '@/utils/download'
 import * as AppApi from '@/api/pay/app'
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+import { dateFormatter } from '@/utils/formatTime'
+import AppForm from '@/views/pay/app/AppForm.vue'
+import { PayChannelEnum as payChannelEnum, PayType } from '@/utils/constants'
 
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: AppApi.getAppPage,
-  deleteApi: AppApi.deleteApp,
-  exportListApi: AppApi.exportApp
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  remark: undefined,
+  payNotifyUrl: undefined,
+  refundNotifyUrl: undefined,
+  merchantName: undefined,
+  createTime: []
 })
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const channelParam = reactive({
+  loading: false,
+  // 是否修改
+  edit: false,
+  // 微信是否显示
+  wechatOpen: false,
+  // 支付宝是否显示
+  aliPayOpen: false,
+  // 应用ID
+  appId: null,
+  // 渠道编码
+  payCode: null,
+  // 商户对象
+  payMerchant: {
+    // 编号
+    id: null,
+    // 名称
+    name: null
+  }
+}) // 微信组件传参参数
 
-// ========== 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 getList = async () => {
+  loading.value = true
+  try {
+    const data = await AppApi.getAppPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await AppApi.getApp(rowId)
-  unref(formRef)?.setValues(res)
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  const res = await AppApi.getApp(rowId)
-  detailData.value = res
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(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 AppApi.AppVO
-        if (actionType.value === 'create') {
-          await AppApi.createApp(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await AppApi.updateApp(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 AppApi.deleteApp(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
 }
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await AppApi.exportApp(queryParams)
+    download.excel(data, '支付应用信息.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/**
+ * 根据渠道编码判断渠道列表中是否存在
+ * @param channels 渠道列表
+ * @param channelCode 渠道编码
+ */
+const judgeChannelExist = (channels, channelCode) => {
+  if (!channels) {
+    return false
+  }
+  return channels.indexOf(channelCode) !== -1
+}
+
+/**
+ * 修改支付渠道信息
+ * @param row 行记录
+ * @param payCode 支付编码
+ * @param type 支付类型
+ */
+const handleUpdateChannel = async (row, payCode, type) => {
+  await settingChannelParam(row, payCode, type)
+  channelParam.edit = true
+  channelParam.loading = true
+}
+
+/**
+ * 新增支付渠道信息
+ */
+const handleCreateChannel = async (row, payCode, type) => {
+  await settingChannelParam(row, payCode, type)
+  channelParam.edit = false
+  channelParam.loading = false
+}
+
+const settingChannelParam = async (row, payCode, type) => {
+  if (type === PayType.WECHAT) {
+    channelParam.wechatOpen = true
+    channelParam.aliPayOpen = false
+  }
+  if (type === PayType.ALIPAY) {
+    channelParam.aliPayOpen = true
+    channelParam.wechatOpen = false
+  }
+  channelParam.edit = false
+  channelParam.loading = false
+  channelParam.appId = row.id
+  channelParam.payCode = payCode
+  channelParam.payMerchant = row.payMerchant
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
 </script>
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index 21b8cca4..f70801d3 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -1,79 +1,359 @@
 <template>
   <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
-          type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['pay:order:create']"
-          @click="handleCreate()"
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="120px"
+    >
+      <el-form-item label="所属商户" prop="merchantId">
+        <el-select
+          v-model="queryParams.merchantId"
+          clearable
+          @clear="
+            () => {
+              queryParams.merchantId = null
+            }
+          "
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请选择所属商户"
+          @change="handleGetAppListByMerchantId"
+          :remote-method="handleGetMerchantListByName"
+          :loading="merchantLoading"
+        >
+          <el-option
+            v-for="item in merchantList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用编号" prop="appId">
+        <el-select clearable v-model="queryParams.appId" filterable placeholder="请选择应用信息">
+          <el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="渠道编码" prop="channelCode">
+        <el-select
+          v-model="queryParams.channelCode"
+          placeholder="请输入渠道编码"
+          clearable
+          @clear="
+            () => {
+              queryParams.channelCode = null
+            }
+          "
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商户订单编号" prop="merchantOrderId">
+        <el-input
+          v-model="queryParams.merchantOrderId"
+          placeholder="请输入商户订单编号"
+          clearable
+          @keyup.enter="handleQuery"
         />
-        <!-- 操作：导出 -->
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
-          v-hasPermi="['pay:order:export']"
-          @click="exportList('订单数据.xls')"
+      </el-form-item>
+      <el-form-item label="渠道订单号" prop="channelOrderNo">
+        <el-input
+          v-model="queryParams.channelOrderNo"
+          placeholder="请输入渠道订单号"
+          clearable
+          @keyup.enter="handleQuery"
         />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['pay:order:query']"
-          @click="handleDetail(row.id)"
+      </el-form-item>
+      <el-form-item label="支付状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择支付状态" clearable size="small">
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="退款状态" prop="refundStatus">
+        <el-select v-model="queryParams.refundStatus" placeholder="请选择退款状态" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_REFUND_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="回调商户状态" prop="notifyStatus">
+        <el-select
+          v-model="queryParams.notifyStatus"
+          placeholder="请选择订单回调商户状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
-      </template>
-    </XTable>
+      </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="['system:tenant:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
+  <content-wrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="订单编号" align="center" prop="id" />
+      <el-table-column label="商户名称" align="center" prop="merchantName" width="120" />
+      <el-table-column label="应用名称" align="center" prop="appName" width="120" />
+      <el-table-column label="渠道名称" align="center" prop="channelCodeName" width="120" />
+      <el-table-column label="渠道订单号" align="center" prop="merchantOrderId" width="120" />
+      <el-table-column label="商品标题" align="center" prop="subject" width="250" />
+      <el-table-column label="商品描述" align="center" prop="body" width="250" />
+      <el-table-column label="异步通知地址" align="center" prop="notifyUrl" width="250" />
+      <el-table-column label="回调状态" align="center" prop="notifyStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="支付订单" align="left">
+        <template #default="scope">
+          <p class="order-font">
+            <el-tag size="small">商户</el-tag>
+            {{ scope.row.merchantOrderId }}
+          </p>
+          <p class="order-font">
+            <el-tag size="small" type="warning">支付</el-tag>
+            {{ scope.row.channelOrderNo }}
+          </p>
+        </template>
+      </el-table-column>
+      <el-table-column label="支付金额" align="center" prop="amount">
+        <template #default="scope">
+          ￥{{ parseFloat(scope.row.amount / 100).toFixed(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="手续金额" align="center" prop="channelFeeAmount">
+        <template #default="scope">
+          ￥{{ parseFloat(scope.row.channelFeeAmount / 100).toFixed(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="退款金额" align="center" prop="refundAmount">
+        <template #default="scope">
+          ￥{{ parseFloat(scope.row.refundAmount / 100).toFixed(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="支付状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="回调状态" align="center" prop="notifyStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="scope.row.notifyStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="100"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="支付时间"
+        align="center"
+        prop="successTime"
+        width="100"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        fixed="right"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            size="small"
+            type="text"
+            icon="el-icon-search"
+            @click="openForm(scope.row.id)"
+            v-hasPermi="['pay:order:query']"
+            >查看详情
+          </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>
+
+  <!-- 表单弹窗：预览 -->
+  <OrderForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="PayOrder">
-import { allSchemas } from './order.data'
+<script setup lang="ts" name="Order">
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+import * as MerchantApi from '@/api/pay/merchant'
 import * as OrderApi from '@/api/pay/order'
+import download from '@/utils/download'
+import * as AppApi from '@/api/pay/app'
+import { dateFormatter } from '@/utils/formatTime'
+import OrderForm from '@/views/pay/order/orderForm.vue'
+
+const message = useMessage() // 消息弹窗
 
-const { t } = useI18n() // 国际化
-// 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: OrderApi.getOrderPage,
-  exportListApi: OrderApi.exportOrder
+// const { t } = useI18n() // 国际化
+const queryFormRef = ref() // 搜索的表单
+const merchantList = ref([]) // 商户列表
+const merchantLoading = ref(false) // 商户加载遮罩层
+const appList = ref([]) // 支付应用列表集合
+const loading = ref(false) // 列表的加载中
+const exportLoading = ref(false) // 导出等待
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  merchantId: undefined,
+  appId: undefined,
+  channelId: undefined,
+  channelCode: undefined,
+  merchantOrderId: undefined,
+  subject: undefined,
+  body: undefined,
+  notifyUrl: undefined,
+  notifyStatus: undefined,
+  amount: undefined,
+  channelFeeRate: undefined,
+  channelFeeAmount: undefined,
+  status: undefined,
+  userIp: undefined,
+  successExtensionId: undefined,
+  refundStatus: undefined,
+  refundTimes: undefined,
+  refundAmount: undefined,
+  channelUserId: undefined,
+  channelOrderNo: undefined,
+  expireTime: [],
+  successTime: [],
+  notifyTime: [],
+  createTime: []
 })
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const detailData = ref() // 详情 Ref
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
+
+/**
+ * 根据商户名称模糊匹配商户信息
+ * @param name 商户名称
+ */
+const handleGetMerchantListByName = async (name) => {
+  merchantList.value = await MerchantApi.getMerchantListByName(name)
+}
+
+/**
+ * 根据商户 ID 查询支付应用信息
+ */
+const handleGetAppListByMerchantId = () => {
+  queryParams.appId = undefined
+  if (queryParams.merchantId) {
+    AppApi.getAppListByMerchantId(queryParams.merchantId).then((response) => {
+      appList.value = response.data
+    })
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await OrderApi.getOrderPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  const res = await OrderApi.getOrder(rowId)
-  detailData.value = res
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
 }
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  // 处理查询参数
+  // 导出的二次确认
+  await message.exportConfirm()
+  // 发起导出
+  exportLoading.value = true
+  const data = await OrderApi.exportOrder(queryParams)
+  download.excel(data, '支付订单.xls')
+}
+/** 预览详情 */
+const formRef = ref()
+const openForm = (id?: number) => {
+  formRef.value.open(id)
+}
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
 </script>
+
+<style>
+.order-font {
+  font-size: 12px;
+  padding: 2px 0;
+}
+</style>
diff --git a/src/views/pay/order/order.data.ts b/src/views/pay/order/order.data.ts
deleted file mode 100644
index 7b993088..00000000
--- a/src/views/pay/order/order.data.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  merchantId: [required],
-  appId: [required],
-  merchantOrderId: [required],
-  subject: [required],
-  body: [required],
-  notifyUrl: [required],
-  notifyStatus: [required],
-  amount: [required],
-  status: [required],
-  userIp: [required],
-  expireTime: [required],
-  refundStatus: [required],
-  refundTimes: [required],
-  refundAmount: [required]
-})
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'seq',
-  primaryTitle: '岗位编号',
-  action: true,
-  columns: [
-    {
-      title: '商户编号',
-      field: 'merchantId',
-      isSearch: true
-    },
-    {
-      title: '应用编号',
-      field: 'appId',
-      isSearch: true
-    },
-    {
-      title: '渠道编号',
-      field: 'channelId'
-    },
-    {
-      title: '渠道编码',
-      field: 'channelCode',
-      isSearch: true
-    },
-    {
-      title: '渠道订单号',
-      field: 'merchantOrderId',
-      isSearch: true
-    },
-    {
-      title: '商品标题',
-      field: 'subject'
-    },
-    {
-      title: '商品描述',
-      field: 'body'
-    },
-    {
-      title: '异步通知地址',
-      field: 'notifyUrl'
-    },
-    {
-      title: '回调状态',
-      field: 'notifyStatus',
-      dictType: DICT_TYPE.PAY_ORDER_NOTIFY_STATUS,
-      dictClass: 'number'
-    },
-    {
-      title: '支付金额',
-      field: 'amount',
-      isSearch: true
-    },
-    {
-      title: '渠道手续费',
-      field: 'channelFeeRate',
-      isSearch: true
-    },
-    {
-      title: '渠道手续金额',
-      field: 'channelFeeAmount',
-      isSearch: true
-    },
-    {
-      title: '支付状态',
-      field: 'status',
-      dictType: DICT_TYPE.PAY_ORDER_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '用户 IP',
-      field: 'userIp'
-    },
-    {
-      title: '订单失效时间',
-      field: 'expireTime',
-      formatter: 'formatDate'
-    },
-    {
-      title: '支付时间',
-      field: 'successTime',
-      formatter: 'formatDate'
-    },
-    {
-      title: '支付通知时间',
-      field: 'notifyTime',
-      formatter: 'formatDate'
-    },
-    {
-      title: '拓展编号',
-      field: 'successExtensionId'
-    },
-    {
-      title: '退款状态',
-      field: 'refundStatus',
-      dictType: DICT_TYPE.PAY_ORDER_REFUND_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '退款次数',
-      field: 'refundTimes'
-    },
-    {
-      title: '退款总金额',
-      field: 'refundAmount'
-    },
-    {
-      title: '渠道用户编号',
-      field: 'channelUserId'
-    },
-    {
-      title: '渠道订单号',
-      field: 'channelOrderNo'
-    },
-    {
-      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/pay/order/orderForm.vue b/src/views/pay/order/orderForm.vue
new file mode 100644
index 00000000..f9625085
--- /dev/null
+++ b/src/views/pay/order/orderForm.vue
@@ -0,0 +1,152 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="商户名称">{{ orderDetail.merchantName }}</el-descriptions-item>
+      <el-descriptions-item label="应用名称">{{ orderDetail.appName }}</el-descriptions-item>
+      <el-descriptions-item label="商品名称">{{ orderDetail.subject }}</el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="商户订单号">
+        <el-tag size="small">{{ orderDetail.merchantOrderId }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="渠道订单号">
+        <el-tag class="tag-purple" size="small">{{ orderDetail.channelOrderNo }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="支付订单号">
+        <el-tag v-if="orderDetail.payOrderExtension.no !== ''" class="tag-pink" size="small">
+          {{ orderDetail.payOrderExtension.no }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="金额">
+        <el-tag type="success" size="small">{{ parseFloat(orderDetail.amount / 100, 2) }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="手续费">
+        <el-tag type="warning" size="small"
+          >{{ parseFloat(orderDetail.channelFeeAmount / 100, 2) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="手续费比例">
+        {{ parseFloat(orderDetail.channelFeeRate / 100, 2) }}%
+      </el-descriptions-item>
+      <el-descriptions-item label="支付状态">
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="orderDetail.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label="回调状态">
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="orderDetail.notifyStatus" />
+      </el-descriptions-item>
+      <el-descriptions-item label="回调地址">{{ orderDetail.notifyUrl }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间" :formatter="dateFormatter">
+        {{ formatDate(orderDetail.createTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="支付时间" :formatter="dateFormatter">
+        {{ formatDate(orderDetail.successTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="失效时间" :formatter="dateFormatter">
+        {{ formatDate(orderDetail.expireTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="通知时间" :formatter="dateFormatter">
+        {{ formatDate(orderDetail.notifyTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="支付渠道"
+        >{{ orderDetail.channelCodeName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="支付IP">{{ orderDetail.userIp }}</el-descriptions-item>
+      <el-descriptions-item label="退款状态">
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_REFUND_STATUS" :value="orderDetail.refundStatus" />
+      </el-descriptions-item>
+      <el-descriptions-item label="退款次数">{{ orderDetail.refundTimes }}</el-descriptions-item>
+      <el-descriptions-item label="退款金额">
+        <el-tag type="warning">
+          {{ parseFloat(orderDetail.refundAmount / 100, 2) }}
+        </el-tag>
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
+      <el-descriptions-item label="商品描述">
+        {{ orderDetail.body }}
+      </el-descriptions-item>
+      <el-descriptions-item label="支付通道异步回调内容">
+        {{ orderDetail.payOrderExtension.channelNotifyData }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script setup lang="ts" name="orderForm">
+import { DICT_TYPE } from '@/utils/dict'
+import * as OrderApi from '@/api/pay/order'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+
+const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('订单详情') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const defaultOrderDetail = {
+  merchantName: '',
+  appName: '',
+  channelCodeName: '',
+  subject: '',
+  merchantOrderId: null,
+  channelOrderNo: '',
+  body: '',
+  amount: null,
+  channelFeeRate: null,
+  channelFeeAmount: null,
+  userIp: '',
+  status: null,
+  notifyUrl: '',
+  notifyStatus: null,
+  refundStatus: null,
+  refundTimes: '',
+  refundAmount: null,
+  createTime: '',
+  successTime: '',
+  notifyTime: '',
+  expireTime: '',
+  payOrderExtension: {
+    channelNotifyData: '',
+    no: ''
+  }
+}
+const orderDetail = ref(JSON.parse(JSON.stringify(defaultOrderDetail)))
+
+/** 打开弹窗 */
+const open = async (id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.preview')
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      orderDetail.value = await OrderApi.getOrderDetail(id)
+      if (orderDetail.value.payOrderExtension === null) {
+        orderDetail.value.payOrderExtension = Object.assign(
+          defaultOrderDetail.payOrderExtension,
+          {}
+        )
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+<style>
+.tag-purple {
+  color: #722ed1;
+  background: #f9f0ff;
+  border-color: #d3adf7;
+}
+
+.tag-pink {
+  color: #eb2f96;
+  background: #fff0f6;
+  border-color: #ffadd2;
+}
+</style>
diff --git a/src/views/pay/refund/index.vue b/src/views/pay/refund/index.vue
index ec8bf12c..b8a949e7 100644
--- a/src/views/pay/refund/index.vue
+++ b/src/views/pay/refund/index.vue
@@ -1,59 +1,359 @@
 <template>
   <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：导出 -->
-        <XButton
-          type="warning"
-          preIcon="ep:download"
-          :title="t('action.export')"
-          v-hasPermi="['pay:refund:export']"
-          @click="exportList('退款订单.xls')"
+    <!-- 搜索工作栏 -->
+    <el-form
+      :model="queryParams"
+      ref="queryFormRef"
+      size="small"
+      :inline="true"
+      label-width="120px"
+    >
+      <el-form-item label="所属商户" prop="merchantId">
+        <el-select
+          v-model="queryParams.merchantId"
+          clearable
+          @clear="
+            () => {
+              queryParams.merchantId = null
+            }
+          "
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请选择所属商户"
+          @change="handleGetAppListByMerchantId"
+          :remote-method="handleGetMerchantListByName"
+          :loading="merchantLoading"
+        >
+          <el-option
+            v-for="item in merchantList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用编号" prop="appId">
+        <el-select clearable v-model="queryParams.appId" filterable placeholder="请选择应用信息">
+          <el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="渠道编码" prop="channelCode">
+        <el-select
+          v-model="queryParams.channelCode"
+          placeholder="请输入渠道编码"
+          clearable
+          @clear="
+            () => {
+              queryParams.channelCode = null
+            }
+          "
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </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.PAY_REFUND_ORDER_TYPE)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商户退款订单号" prop="merchantRefundNo">
+        <el-input
+          v-model="queryParams.merchantRefundNo"
+          placeholder="请输入商户退款订单号"
+          clearable
+          @keyup.enter="handleQuery"
         />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['pay:refund:query']"
-          @click="handleDetail(row.id)"
+      </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.PAY_REFUND_ORDER_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="退款回调状态" prop="notifyStatus">
+        <el-select
+          v-model="queryParams.notifyStatus"
+          placeholder="请选择通知商户退款结果的回调状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
-      </template>
-    </XTable>
+      </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="['system:tenant:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="t('action.detail')">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
-    </template>
-  </XModal>
+  <el-table v-loading="loading" :data="list">
+    <el-table-column label="编号" align="center" prop="id" />
+    <el-table-column label="商户名称" align="center" prop="merchantName" width="120" />
+    <el-table-column label="应用名称" align="center" prop="appName" width="120" />
+    <el-table-column label="渠道名称" align="center" prop="channelCodeName" width="120" />
+    <el-table-column label="交易订单号" align="center" prop="tradeNo" width="140" />
+    <el-table-column label="商户订单编号" align="center" prop="merchantOrderId" width="140" />
+    <el-table-column label="商户订单号" align="left" width="230">
+      <template #default="scope">
+        <p class="order-font">
+          <el-tag size="small">退款</el-tag>
+          {{ scope.row.merchantRefundNo }}
+        </p>
+        <p class="order-font">
+          <el-tag type="success">交易</el-tag>
+          {{ scope.row.merchantOrderId }}
+        </p>
+      </template>
+    </el-table-column>
+    <el-table-column label="支付订单号" align="center" prop="merchantRefundNo" width="250">
+      <template #default="scope">
+        <p class="order-font">
+          <el-tag size="small">交易</el-tag>
+          {{ scope.row.tradeNo }}
+        </p>
+        <p class="order-font">
+          <el-tag size="small" type="warning">渠道</el-tag>
+          {{ scope.row.channelOrderNo }}
+        </p>
+      </template>
+    </el-table-column>
+    <el-table-column label="支付金额(元)" align="center" prop="payAmount" width="100">
+      <template #default="scope">
+        ￥{{ parseFloat(scope.row.payAmount / 100).toFixed(2) }}
+      </template>
+    </el-table-column>
+    <el-table-column label="退款金额(元)" align="center" prop="refundAmount" width="100">
+      <template #default="scope">
+        ￥{{ parseFloat(scope.row.refundAmount / 100).toFixed(2) }}
+      </template>
+    </el-table-column>
+    <el-table-column label="退款类型" align="center" prop="type" width="80">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="scope.row.type" />
+      </template>
+    </el-table-column>
+    <el-table-column label="退款状态" align="center" prop="status">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="scope.row.status" />
+      </template>
+    </el-table-column>
+    <el-table-column label="回调状态" align="center" prop="notifyStatus">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="scope.row.notifyStatus" />
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="退款原因"
+      align="center"
+      prop="reason"
+      width="140"
+      :show-overflow-tooltip="true"
+    />
+    <el-table-column
+      label="创建时间"
+      align="center"
+      prop="createTime"
+      width="100"
+      :formatter="dateFormatter"
+    />
+    <el-table-column
+      label="退款成功时间"
+      align="center"
+      prop="successTime"
+      width="100"
+      :formatter="dateFormatter"
+    />
+    <el-table-column
+      label="操作"
+      align="center"
+      fixed="right"
+      class-name="small-padding fixed-width"
+    >
+      <template #default="scope">
+        <el-button
+          size="small"
+          type="text"
+          icon="el-icon-search"
+          @click="openForm(scope.row.id)"
+          v-hasPermi="['pay:order:query']"
+          >查看详情
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <content-wrap>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </content-wrap>
+  <!-- 表单弹窗：预览 -->
+  <RefundForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="PayRefund">
-import { allSchemas } from './refund.data'
+<script setup lang="ts" name="Refund">
+import * as AppApi from '@/api/pay/app'
+import * as MerchantApi from '@/api/pay/merchant'
 import * as RefundApi from '@/api/pay/refund'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import download from '@/utils/download'
+import { dateFormatter } from '@/utils/formatTime'
+import RefundForm from '@/views/pay/refund/refundForm.vue'
 
-const { t } = useI18n() // 国际化
-
-// 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: RefundApi.getRefundPage,
-  exportListApi: RefundApi.exportRefund
+const merchantLoading = ref(false) // 商户加载遮罩层
+const message = useMessage() // 消息弹窗
+const appList = ref([]) // 支付应用列表集合
+const merchantList = ref([]) // 商户列表
+const exportLoading = ref(false) // 导出等待
+const loading = ref(false) // 列表遮罩层
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryFormRef = ref() // 搜索的表单
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  merchantId: undefined,
+  appId: undefined,
+  channelId: undefined,
+  channelCode: undefined,
+  orderId: undefined,
+  tradeNo: undefined,
+  merchantOrderId: undefined,
+  merchantRefundNo: undefined,
+  notifyUrl: undefined,
+  notifyStatus: undefined,
+  status: undefined,
+  type: undefined,
+  payAmount: undefined,
+  refundAmount: undefined,
+  reason: undefined,
+  userIp: undefined,
+  channelOrderNo: undefined,
+  channelRefundNo: undefined,
+  channelErrorCode: undefined,
+  channelErrorMsg: undefined,
+  channelExtras: undefined,
+  expireTime: [],
+  successTime: [],
+  notifyTime: [],
+  createTime: []
 })
 
-// ========== CRUD 相关 ==========
-const dialogVisible = ref(false) // 是否显示弹出层
-const detailData = ref() // 详情 Ref
+/**
+ * 根据商户 ID 查询支付应用信息
+ */
+const handleGetAppListByMerchantId = () => {
+  queryParams.appId = undefined
+  if (queryParams.merchantId) {
+    AppApi.getAppListByMerchantId(queryParams.merchantId).then((response) => {
+      appList.value = response.data
+    })
+  }
+}
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  // 设置数据
-  detailData.value = RefundApi.getRefund(rowId)
-  dialogVisible.value = true
+/**
+ * 根据商户名称模糊匹配商户信息
+ * @param name 商户名称
+ */
+const handleGetMerchantListByName = async (name) => {
+  merchantList.value = await MerchantApi.getMerchantListByName(name)
 }
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await RefundApi.getRefundPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  // 导出的二次确认
+  await message.exportConfirm()
+  // 发起导出
+  exportLoading.value = true
+  const data = await RefundApi.exportRefund(queryParams)
+  download.excel(data, '退款订单.xls')
+}
+/** 预览详情 */
+const formRef = ref()
+const openForm = (id?: number) => {
+  formRef.value.open(id)
+}
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
 </script>
+
+<style>
+.order-font {
+  font-size: 12px;
+  padding: 2px 0;
+}
+</style>
diff --git a/src/views/pay/refund/refund.data.ts b/src/views/pay/refund/refund.data.ts
deleted file mode 100644
index 456f441d..00000000
--- a/src/views/pay/refund/refund.data.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'seq',
-  primaryTitle: '序号',
-  action: true,
-  columns: [
-    {
-      title: '商户编号',
-      field: 'merchantId',
-      isSearch: true
-    },
-    {
-      title: '应用编号',
-      field: 'appId',
-      isSearch: true
-    },
-    {
-      title: '渠道编号',
-      field: 'channelId',
-      isSearch: true
-    },
-    {
-      title: '渠道编码',
-      field: 'channelCode',
-      dictType: DICT_TYPE.PAY_CHANNEL_CODE_TYPE,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '支付订单编号',
-      field: 'orderId',
-      isSearch: true
-    },
-    {
-      title: '交易订单号',
-      field: 'tradeNo',
-      isSearch: true
-    },
-    {
-      title: '商户订单号',
-      field: 'merchantOrderId',
-      isSearch: true
-    },
-    {
-      title: '商户退款单号',
-      field: 'merchantRefundNo',
-      isSearch: true
-    },
-    {
-      title: '回调地址',
-      field: 'notifyUrl',
-      isSearch: true
-    },
-    {
-      title: '回调状态',
-      field: 'notifyStatus',
-      dictType: DICT_TYPE.PAY_ORDER_NOTIFY_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '退款类型',
-      field: 'type',
-      dictType: DICT_TYPE.PAY_REFUND_ORDER_TYPE,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.PAY_REFUND_ORDER_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '支付金额',
-      field: 'payAmount',
-      formatter: 'formatAmount',
-      isSearch: true
-    },
-    {
-      title: '退款金额',
-      field: 'refundAmount',
-      formatter: 'formatAmount',
-      isSearch: true
-    },
-    {
-      title: '退款原因',
-      field: 'reason',
-      isSearch: true
-    },
-    {
-      title: '用户IP',
-      field: 'userIp',
-      isSearch: true
-    },
-    {
-      title: '渠道订单号',
-      field: 'channelOrderNo',
-      isSearch: true
-    },
-    {
-      title: '渠道退款单号',
-      field: 'channelRefundNo',
-      isSearch: true
-    },
-    {
-      title: '渠道调用报错时',
-      field: 'channelErrorCode'
-    },
-    {
-      title: '渠道调用报错时',
-      field: 'channelErrorMsg'
-    },
-    {
-      title: '支付渠道的额外参数',
-      field: 'channelExtras'
-    },
-    {
-      title: '退款失效时间',
-      field: 'expireTime',
-      formatter: 'formatDate',
-      isForm: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    },
-    {
-      title: '退款成功时间',
-      field: 'successTime',
-      formatter: 'formatDate',
-      isForm: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    },
-    {
-      title: '退款通知时间',
-      field: 'notifyTime',
-      formatter: 'formatDate',
-      isForm: false,
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
-        }
-      }
-    },
-    {
-      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/pay/refund/refundForm.vue b/src/views/pay/refund/refundForm.vue
new file mode 100644
index 00000000..cc9d8726
--- /dev/null
+++ b/src/views/pay/refund/refundForm.vue
@@ -0,0 +1,154 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="商户名称">{{ refundDetail.merchantName }}</el-descriptions-item>
+      <el-descriptions-item label="应用名称">{{ refundDetail.appName }}</el-descriptions-item>
+      <el-descriptions-item label="商品名称">{{ refundDetail.subject }}</el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="商户退款单号">
+        <el-tag size="small">{{ refundDetail.merchantRefundNo }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="商户订单号"
+        >{{ refundDetail.merchantOrderId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="交易订单号">{{ refundDetail.tradeNo }}</el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="支付金额">
+        {{ parseFloat(refundDetail.payAmount / 100).toFixed(2) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="退款金额" size="small">
+        <el-tag class="tag-purple" size="small">
+          {{ parseFloat(refundDetail.refundAmount / 100).toFixed(2) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="退款类型">
+        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="refundDetail.type" />
+      </el-descriptions-item>
+      <el-descriptions-item label="退款状态">
+        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="refundDetail.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间"
+        >{{ formatDate(refundDetail.createTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="退款成功时间"
+        >{{ formatDate(refundDetail.successTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="退款失效时间"
+        >{{ formatDate(refundDetail.expireTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="更新时间"
+        >{{ formatDate(refundDetail.updateTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="支付渠道">
+        {{ refundDetail.channelCodeName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="支付IP" size="small">
+        {{ refundDetail.userIp }}
+      </el-descriptions-item>
+      <el-descriptions-item label="回调地址">{{ refundDetail.notifyUrl }}</el-descriptions-item>
+      <el-descriptions-item label="回调状态">
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="refundDetail.notifyStatus" />
+      </el-descriptions-item>
+      <el-descriptions-item label="回调时间"
+        >{{ formatDate(refundDetail.notifyTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="渠道订单号"
+        >{{ refundDetail.channelOrderNo }}
+      </el-descriptions-item>
+      <el-descriptions-item label="渠道退款单号"
+        >{{ refundDetail.channelRefundNo }}
+      </el-descriptions-item>
+      <el-descriptions-item label="渠道错误码"
+        >{{ refundDetail.channelErrorCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="渠道错误码描述"
+        >{{ refundDetail.channelErrorMsg }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <br />
+    <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
+      <el-descriptions-item label="渠道额外参数"
+        >{{ refundDetail.channelExtras }}
+      </el-descriptions-item>
+      <el-descriptions-item label="退款原因">{{ refundDetail.reason }}</el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script setup lang="ts" name="refundForm">
+import { DICT_TYPE } from '@/utils/dict'
+import * as RefundApi from '@/api/pay/refund'
+import { formatDate } from '@/utils/formatTime'
+
+const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('退款订单详情') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const defaultrefundDetail = {
+  id: null,
+  appId: null,
+  appName: '',
+  channelCode: '',
+  channelCodeName: '',
+  channelErrorCode: '',
+  channelErrorMsg: '',
+  channelExtras: '',
+  channelId: null,
+  channelOrderNo: '',
+  channelRefundNo: '',
+  createTime: null,
+  expireTime: null,
+  merchantId: null,
+  merchantName: '',
+  merchantOrderId: '',
+  merchantRefundNo: '',
+  notifyStatus: null,
+  notifyTime: null,
+  notifyUrl: '',
+  orderId: null,
+  payAmount: null,
+  reason: '',
+  refundAmount: null,
+  status: null,
+  subject: '',
+  successTime: null,
+  tradeNo: '',
+  type: null,
+  userIp: ''
+}
+const refundDetail = ref(JSON.parse(JSON.stringify(defaultrefundDetail)))
+
+/** 打开弹窗 */
+const open = async (id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.preview')
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      refundDetail.value = await RefundApi.getRefundApi(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style>
+.tag-purple {
+  color: #722ed1;
+  background: #f9f0ff;
+  border-color: #d3adf7;
+}
+</style>
-- 
Gitee


From c7b296a8e5ea472d1573af84c88b690ada7868ef Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Tue, 11 Apr 2023 11:13:46 +0800
Subject: [PATCH 16/23] =?UTF-8?q?refactor:=20=E6=8A=BD=E7=A6=BBWxMpSelect?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/components/WxMpSelect.vue | 39 ++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/views/mp/components/WxMpSelect.vue

diff --git a/src/views/mp/components/WxMpSelect.vue b/src/views/mp/components/WxMpSelect.vue
new file mode 100644
index 00000000..6dc6809b
--- /dev/null
+++ b/src/views/mp/components/WxMpSelect.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-select
+    v-model="accountId"
+    placeholder="请选择公众号"
+    class="!w-240px"
+    @change="accountChanged"
+  >
+    <el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" />
+  </el-select>
+</template>
+
+<script lang="ts" setup name="WxMpSelect">
+import * as MpAccountApi from '@/api/mp/account'
+
+const accountId: Ref<number | undefined> = ref()
+const accountList: Ref<MpAccountApi.AccountVO[]> = ref([])
+
+const emit = defineEmits<{
+  (e: 'change', id: number | undefined): void
+}>()
+
+onMounted(async () => {
+  handleQuery()
+})
+
+const handleQuery = async () => {
+  const data = await MpAccountApi.getSimpleAccountList()
+  accountList.value = data
+  // 默认选中第一个
+  if (accountList.value.length > 0) {
+    accountId.value = accountList.value[0].id
+    emit('change', accountId.value)
+  }
+}
+
+const accountChanged = () => {
+  emit('change', accountId.value)
+}
+</script>
-- 
Gitee


From 139776749236440ca9fd2339631785676d6bf848 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Tue, 11 Apr 2023 11:14:20 +0800
Subject: [PATCH 17/23] =?UTF-8?q?refactor:=20=E3=80=90MP=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E3=80=91=E4=BD=BF=E7=94=A8=E3=80=90WxMpSelec?=
 =?UTF-8?q?t=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/material/index.vue | 130 ++++++++++++++++++--------------
 1 file changed, 74 insertions(+), 56 deletions(-)

diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index 954d0fac..ec9077f1 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -2,7 +2,14 @@
   <doc-alert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChange(accountId)" />
+    <el-form class="-mb-15px" :inline="true" label-width="68px">
+      <el-form-item label="公众号" prop="accountId">
+        <WxMpSelect @change="(accountId) => accountChange(accountId)" />
+      </el-form-item>
+      <el-form-item>
+        <slot name="actions"></slot>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
 
   <ContentWrap>
@@ -14,7 +21,7 @@
         </template>
         <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
           <el-upload
-            :action="actionUrl"
+            :action="uploadUrl"
             :headers="headers"
             multiple
             :limit="1"
@@ -37,7 +44,7 @@
               <img class="material-img" :src="item.url" />
               <div class="item-name">{{ item.name }}</div>
             </a>
-            <el-row class="ope-row" justify="center">
+            <el-row justify="center">
               <el-button
                 type="danger"
                 circle
@@ -65,7 +72,7 @@
         </template>
         <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
           <el-upload
-            :action="actionUrl"
+            :action="uploadUrl"
             :headers="headers"
             multiple
             :limit="1"
@@ -82,6 +89,8 @@
             </template>
           </el-upload>
         </div>
+
+        <!-- 列表 -->
         <el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px">
           <el-table-column label="编号" align="center" prop="mediaId" />
           <el-table-column label="文件名" align="center" prop="name" />
@@ -143,7 +152,7 @@
           v-loading="addMaterialLoading"
         >
           <el-upload
-            :action="actionUrl"
+            :action="uploadUrl"
             :headers="headers"
             multiple
             :limit="1"
@@ -182,11 +191,14 @@
             </el-row>
           </el-form>
           <template #footer>
+            <!-- <span class="dialog-footer"> -->
             <el-button @click="cancelVideo">取 消</el-button>
             <el-button type="primary" @click="submitVideo">提 交</el-button>
+            <!-- </span> -->
           </template>
         </el-dialog>
 
+        <!-- 列表 -->
         <el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px">
           <el-table-column label="编号" align="center" prop="mediaId" />
           <el-table-column label="文件名" align="center" prop="name" />
@@ -237,24 +249,41 @@
     </el-tabs>
   </ContentWrap>
 </template>
-<script setup name="MpMaterial">
+
+<script lang="ts" setup name="MpMaterial">
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
-import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+import WxMpSelect from '@/views/mp/components/WxMpSelect.vue'
 import * as MpMaterialApi from '@/api/mp/material'
 import * as authUtil from '@/utils/auth'
 import { dateFormatter } from '@/utils/formatTime'
-
-const message = useMessage()
+import type {
+  FormInstance,
+  FormRules,
+  TabPaneName,
+  UploadInstance,
+  UploadProps,
+  UploadRawFile,
+  UploadUserFile
+} from 'element-plus'
 
 const BASE_URL = import.meta.env.VITE_BASE_URL
-const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
+const uploadUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
 const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
 
-const uploadFormRef = ref()
-const uploadVideoRef = ref()
+const message = useMessage()
+
+const uploadFormRef = ref<FormInstance>()
+const uploadVideoRef = ref<UploadInstance>()
 
-const type = ref('image')
+const uploadRules: FormRules = {
+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
+}
+
+// 素材类型
+type MatertialType = 'image' | 'voice' | 'video'
+const type = ref<MatertialType>('image')
 // 遮罩层
 const loading = ref(false)
 // 总条数
@@ -262,15 +291,27 @@ const total = ref(0)
 // 数据列表
 const list = ref([])
 // 查询参数
-const queryParams = reactive({
+interface QueryParams {
+  pageNo: number
+  pageSize: number
+  accountId?: number
+  permanent: boolean
+}
+const queryParams: QueryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   accountId: undefined,
   permanent: true
 })
 
-const fileList = ref([])
-const uploadData = reactive({
+const fileList = ref<UploadUserFile[]>([])
+
+interface UploadData {
+  type: MatertialType
+  title: string
+  introduction: string
+}
+const uploadData: UploadData = reactive({
   type: 'image',
   title: '',
   introduction: ''
@@ -279,33 +320,16 @@ const uploadData = reactive({
 // === 视频上传，独有变量 ===
 const dialogVideoVisible = ref(false)
 const addMaterialLoading = ref(false)
-const uploadRules = reactive({
-  // 视频上传的校验规则
-  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
-  introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
-})
 
 /** 侦听公众号变化 **/
-const accountChange = (accountId) => {
-  setAccountId(accountId)
+const accountChange = (accountId: number | undefined) => {
+  queryParams.accountId = accountId
   getList()
 }
 
 // ======================== 列表查询 ========================
-/** 设置账号编号 */
-const setAccountId = (accountId) => {
-  queryParams.accountId = accountId
-  uploadData.accountId = accountId
-}
-
 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询草稿箱')
-    return false
-  }
-
   loading.value = true
   try {
     const data = await MpMaterialApi.getMaterialPage({
@@ -322,16 +346,12 @@ const getList = async () => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
-  // 默认选中第一个
-  if (queryParams.accountId) {
-    setAccountId(queryParams.accountId)
-  }
   getList()
 }
 
-const handleTabChange = (tabName) => {
+const handleTabChange = (tabName: TabPaneName) => {
   // 设置 type
-  uploadData.type = tabName
+  uploadData.type = tabName as MatertialType
 
   // 提前情况数据，避免tab切换后显示垃圾数据
   list.value = []
@@ -342,15 +362,15 @@ const handleTabChange = (tabName) => {
 }
 
 // ======================== 文件上传 ========================
-const beforeImageUpload = (file) => {
+const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
   const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
-    file.type
+    rawFile.type
   )
   if (!isType) {
     message.error('上传图片格式不对!')
     return false
   }
-  const isLt = file.size / 1024 / 1024 < 2
+  const isLt = rawFile.size / 1024 / 1024 < 2
   if (!isLt) {
     message.error('上传图片大小不能超过 2M!')
     return false
@@ -359,9 +379,9 @@ const beforeImageUpload = (file) => {
   return true
 }
 
-const beforeVoiceUpload = (file) => {
+const beforeVoiceUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
   const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type)
-  const isLt = file.size / 1024 / 1024 < 2
+  const isLt = rawFile.size / 1024 / 1024 < 2
   if (!isType) {
     message.error('上传语音格式不对!')
     return false
@@ -374,14 +394,14 @@ const beforeVoiceUpload = (file) => {
   return true
 }
 
-const beforeVideoUpload = (file) => {
-  const isType = file.type === 'video/mp4'
+const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  const isType = rawFile.type === 'video/mp4'
   if (!isType) {
     message.error('上传视频格式不对!')
     return false
   }
 
-  const isLt = file.size / 1024 / 1024 < 10
+  const isLt = rawFile.size / 1024 / 1024 < 10
   if (!isLt) {
     message.error('上传视频大小不能超过 10M!')
     return false
@@ -391,7 +411,7 @@ const beforeVideoUpload = (file) => {
   return true
 }
 
-const handleUploadSuccess = (response, file, fileList) => {
+const handleUploadSuccess: UploadProps['onSuccess'] = (response: any) => {
   loading.value = false
   addMaterialLoading.value = false
   if (response.code !== 0) {
@@ -410,17 +430,17 @@ const handleUploadSuccess = (response, file, fileList) => {
 }
 
 // 下载文件
-const handleDownload = (row) => {
+const handleDownload = (row: any) => {
   window.open(row.url, '_blank')
 }
 
 // 提交 video 新建的表单
 const submitVideo = () => {
-  uploadFormRef.value.validate((valid) => {
+  uploadFormRef.value?.validate((valid) => {
     if (!valid) {
       return false
     }
-    uploadVideoRef.value.submit()
+    uploadVideoRef.value?.submit()
   })
 }
 
@@ -444,7 +464,7 @@ const resetVideo = () => {
 }
 
 // ======================== 其它操作 ========================
-const handleDelete = async (item) => {
+const handleDelete = async (item: any) => {
   await message.confirm('此操作将永久删除该文件, 是否继续?')
   await MpMaterialApi.deletePermanentMaterial(item.id)
   message.alertSuccess('删除成功')
@@ -501,6 +521,4 @@ p {
     column-count: 1;
   }
 }
-
-/*瀑布流样式*/
 </style>
-- 
Gitee


From 8863d1d08096c217bb148a5a9a716d7fc92957e1 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Apr 2023 20:41:20 +0800
Subject: [PATCH 18/23] =?UTF-8?q?REVIEW=20=E6=94=AF=E4=BB=98=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E3=80=81=E6=94=AF=E4=BB=98=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/pay/merchant/index.ts                 |   4 +-
 src/api/pay/order/index.ts                    |   5 +
 .../package/designer/ProcessDesigner.vue      |  25 ++-
 src/types/auto-imports.d.ts                   |   1 -
 src/views/bpm/oa/leave/detail.vue             |   6 +-
 src/views/pay/app/AppForm.vue                 |  26 +--
 src/views/pay/app/index.vue                   | 118 +++++------
 .../order/{orderForm.vue => OrderDetail.vue}  | 129 +++++-------
 src/views/pay/order/index.vue                 | 189 ++++++++----------
 src/views/pay/refund/index.vue                |   4 +-
 10 files changed, 213 insertions(+), 294 deletions(-)
 rename src/views/pay/order/{orderForm.vue => OrderDetail.vue} (35%)

diff --git a/src/api/pay/merchant/index.ts b/src/api/pay/merchant/index.ts
index bfb8f5e4..bb630c36 100644
--- a/src/api/pay/merchant/index.ts
+++ b/src/api/pay/merchant/index.ts
@@ -39,9 +39,9 @@ export const getMerchant = (id: number) => {
 }
 
 // 根据商户名称搜索商户列表
-export const getMerchantListByName = (name: string) => {
+export const getMerchantListByName = (name?: string) => {
   return request.get({
-    url: '/pay/merchant/list-by-name?id=',
+    url: '/pay/merchant/list-by-name',
     params: {
       name: name
     }
diff --git a/src/api/pay/order/index.ts b/src/api/pay/order/index.ts
index 6088c172..6621381a 100644
--- a/src/api/pay/order/index.ts
+++ b/src/api/pay/order/index.ts
@@ -88,6 +88,11 @@ export const getOrder = async (id: number) => {
   return await request.get({ url: '/pay/order/get?id=' + id })
 }
 
+// 获得支付订单的明细
+export const getOrderDetail = async (id: number) => {
+  return await request.get({ url: '/pay/order/get-detail?id=' + id })
+}
+
 // 新增支付订单
 export const createOrder = async (data: OrderVO) => {
   return await request.post({ url: '/pay/order/create', data })
diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index a14b0b60..fb1af307 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -188,7 +188,13 @@
       <!-- <div id="js-properties-panel" class="panel"></div> -->
       <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
     </div>
-    <XModal title="预览" width="80%" height="90%" v-model="previewModelVisible" destroy-on-close>
+    <Dialog
+      title="预览"
+      v-model="previewModelVisible"
+      width="80%"
+      :scroll="true"
+      max-height="600px"
+    >
       <!-- append-to-body -->
       <div v-highlight>
         <code class="hljs">
@@ -196,10 +202,7 @@
           {{ previewResult }}
         </code>
       </div>
-      <!-- <pre>
-        <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code>
-      </pre> -->
-    </XModal>
+    </Dialog>
   </div>
 </template>
 
@@ -231,7 +234,7 @@ import activitiModdleExtension from './plugins/extension-moddle/activiti'
 import flowableModdleExtension from './plugins/extension-moddle/flowable'
 // 引入json转换与高亮
 // import xml2js from 'xml-js'
-import xml2js from 'fast-xml-parser'
+// import xml2js from 'fast-xml-parser'
 import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
 // 代码高亮插件
 // import hljs from 'highlight.js/lib/highlight'
@@ -626,7 +629,7 @@ const elementsAlign = (align) => {
 const previewProcessXML = () => {
   console.log(bpmnModeler.saveXML, 'bpmnModeler')
   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-    console.log(xml, 'xml111111')
+    // console.log(xml, 'xml111111')
     previewResult.value = xml
     previewType.value = 'xml'
     previewModelVisible.value = true
@@ -634,7 +637,7 @@ const previewProcessXML = () => {
 }
 const previewProcessJson = () => {
   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-    console.log(xml, 'xml')
+    // console.log(xml, 'xml')
 
     // const rootNode = parseXmlString(xml)
     // console.log(rootNode, 'rootNoderootNode')
@@ -644,9 +647,9 @@ const previewProcessJson = () => {
     // console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()')
     // console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()')
 
-    const parser = new xml2js.XMLParser()
-    let jObj = parser.parse(xml)
-    console.log(jObj, 'jObjjObjjObjjObjjObj')
+    // const parser = new xml2js.XMLParser()
+    // let jObj = parser.parse(xml)
+    // console.log(jObj, 'jObjjObjjObjjObjjObj')
     // const builder = new xml2js.XMLBuilder(xml)
     // const xmlContent = builder
     // console.log(xmlContent, 'xmlContent')
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 6558357f..75cf16d9 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -6,7 +6,6 @@ export {}
 declare global {
   const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
diff --git a/src/views/bpm/oa/leave/detail.vue b/src/views/bpm/oa/leave/detail.vue
index 31e54de3..838be149 100644
--- a/src/views/bpm/oa/leave/detail.vue
+++ b/src/views/bpm/oa/leave/detail.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="200">
+  <Dialog title="详情" v-model="dialogVisible" :scroll="true" :max-height="200">
     <el-descriptions border :column="1">
       <el-descriptions-item label="请假类型">
         <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="detailData.type" />
@@ -21,13 +21,13 @@ import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as LeaveApi from '@/api/bpm/leave'
 
-const modelVisible = ref(false) // 弹窗的是否展示
+const dialogVisible = ref(false) // 弹窗的是否展示
 const detailLoading = ref(false) // 表单的加载中
 const detailData = ref() // 详情数据
 
 /** 打开弹窗 */
 const open = async (data: LeaveApi.LeaveVO) => {
-  modelVisible.value = true
+  dialogVisible.value = true
   // 设置数据
   detailLoading.value = true
   try {
diff --git a/src/views/pay/app/AppForm.vue b/src/views/pay/app/AppForm.vue
index cacf49b2..2e6c81da 100644
--- a/src/views/pay/app/AppForm.vue
+++ b/src/views/pay/app/AppForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
     <el-form
       ref="formRef"
       :model="formData"
@@ -10,17 +10,8 @@
       <el-form-item label="应用名" prop="name">
         <el-input v-model="formData.name" placeholder="请输入应用名" />
       </el-form-item>
-
       <el-form-item label="所属商户" prop="merchantId">
-        <el-select
-          v-model="formData.merchantId"
-          filterable
-          remote
-          reserve-keyword
-          placeholder="请选择所属商户"
-          :remote-method="handleGetMerchantListByName"
-          :loading="formLoading"
-        >
+        <el-select v-model="formData.merchantId" placeholder="请选择所属商户">
           <el-option
             v-for="item in merchantList"
             :key="item.id"
@@ -61,9 +52,9 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as AppApi from '@/api/pay/app'
 import * as MerchantApi from '@/api/pay/merchant'
 import { CommonStatusEnum } from '@/utils/constants'
-
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -104,7 +95,8 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
-  await handleGetMerchantListByName(null)
+  // 加载商户列表
+  merchantList.value = await MerchantApi.getMerchantListByName()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -134,14 +126,6 @@ const submitForm = async () => {
   }
 }
 
-/**
- * 根据商户名称模糊匹配商户信息
- * @param name 商户名称
- */
-const handleGetMerchantListByName = async (name) => {
-  merchantList.value = await MerchantApi.getMerchantListByName(name)
-}
-
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
diff --git a/src/views/pay/app/index.vue b/src/views/pay/app/index.vue
index 0c510b8f..4bafeed8 100644
--- a/src/views/pay/app/index.vue
+++ b/src/views/pay/app/index.vue
@@ -52,24 +52,16 @@
           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 @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="['system:tenant:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" />
-          新增
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
         <el-button
           type="success"
@@ -78,8 +70,7 @@
           :loading="exportLoading"
           v-hasPermi="['system:tenant:export']"
         >
-          <Icon icon="ep:download" class="mr-5px" />
-          导出
+          <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
       </el-form-item>
     </el-form>
@@ -97,13 +88,13 @@
       </el-table-column>
       <el-table-column label="商户名称" align="center" prop="payMerchant.name" />
       <el-table-column label="支付宝配置" align="center">
-        <el-table-column :label="payChannelEnum.ALIPAY_APP.name" align="center">
+        <el-table-column :label="PayChannelEnum.ALIPAY_APP.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_APP.code)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_APP.code)"
               @click="
-                handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_APP.code, payType.ALIPAY)
+                handleUpdateChannel(scope.row, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY)
               "
               circle
             >
@@ -114,20 +105,20 @@
               type="danger"
               circle
               @click="
-                handleCreateChannel(scope.row, payChannelEnum.ALIPAY_APP.code, payType.ALIPAY)
+                handleCreateChannel(scope.row, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY)
               "
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column :label="payChannelEnum.ALIPAY_PC.name" align="center">
+        <el-table-column :label="PayChannelEnum.ALIPAY_PC.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
               circle
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_PC.code)"
-              @click="handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_PC.code, payType.ALIPAY)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_PC.code)"
+              @click="handleUpdateChannel(scope.row, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -135,20 +126,20 @@
               v-else
               type="danger"
               circle
-              @click="handleCreateChannel(scope.row, payChannelEnum.ALIPAY_PC.code, payType.ALIPAY)"
+              @click="handleCreateChannel(scope.row, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY)"
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column :label="payChannelEnum.ALIPAY_WAP.name" align="center">
+        <el-table-column :label="PayChannelEnum.ALIPAY_WAP.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
               circle
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_WAP.code)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)"
               @click="
-                handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_WAP.code, payType.ALIPAY)
+                handleUpdateChannel(scope.row, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY)
               "
             >
               <Icon icon="ep:check" />
@@ -158,20 +149,20 @@
               type="danger"
               circle
               @click="
-                handleCreateChannel(scope.row, payChannelEnum.ALIPAY_WAP.code, payType.ALIPAY)
+                handleCreateChannel(scope.row, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY)
               "
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column :label="payChannelEnum.ALIPAY_QR.name" align="center">
+        <el-table-column :label="PayChannelEnum.ALIPAY_QR.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
               circle
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_QR.code)"
-              @click="handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_QR.code, payType.ALIPAY)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_QR.code)"
+              @click="handleUpdateChannel(scope.row, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -179,20 +170,20 @@
               v-else
               type="danger"
               circle
-              @click="handleCreateChannel(scope.row, payChannelEnum.ALIPAY_QR.code, payType.ALIPAY)"
+              @click="handleCreateChannel(scope.row, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY)"
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column :label="payChannelEnum.ALIPAY_BAR.name" align="center">
+        <el-table-column :label="PayChannelEnum.ALIPAY_BAR.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
               circle
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.ALIPAY_BAR.code)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)"
               @click="
-                handleUpdateChannel(scope.row, payChannelEnum.ALIPAY_BAR.code, payType.ALIPAY)
+                handleUpdateChannel(scope.row, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY)
               "
             >
               <Icon icon="ep:check" />
@@ -202,7 +193,7 @@
               type="danger"
               circle
               @click="
-                handleCreateChannel(scope.row, payChannelEnum.ALIPAY_BAR.code, payType.ALIPAY)
+                handleCreateChannel(scope.row, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY)
               "
             >
               <Icon icon="ep:close" />
@@ -211,13 +202,13 @@
         </el-table-column>
       </el-table-column>
       <el-table-column label="微信配置" align="center">
-        <el-table-column :label="payChannelEnum.WX_LITE.name" align="center">
+        <el-table-column :label="PayChannelEnum.WX_LITE.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
               circle
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.WX_LITE.code)"
-              @click="handleUpdateChannel(scope.row, payChannelEnum.WX_LITE.code, payType.WECHAT)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_LITE.code)"
+              @click="handleUpdateChannel(scope.row, PayChannelEnum.WX_LITE.code, PayType.WECHAT)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -225,19 +216,19 @@
               v-else
               type="danger"
               circle
-              @click="handleCreateChannel(scope.row, payChannelEnum.WX_LITE.code, payType.WECHAT)"
+              @click="handleCreateChannel(scope.row, PayChannelEnum.WX_LITE.code, PayType.WECHAT)"
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column :label="payChannelEnum.WX_PUB.name" align="center">
+        <el-table-column :label="PayChannelEnum.WX_PUB.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
               circle
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.WX_PUB.code)"
-              @click="handleUpdateChannel(scope.row, payChannelEnum.WX_PUB.code, payType.WECHAT)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_PUB.code)"
+              @click="handleUpdateChannel(scope.row, PayChannelEnum.WX_PUB.code, PayType.WECHAT)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -245,19 +236,19 @@
               v-else
               type="danger"
               circle
-              @click="handleCreateChannel(scope.row, payChannelEnum.WX_PUB.code, payType.WECHAT)"
+              @click="handleCreateChannel(scope.row, PayChannelEnum.WX_PUB.code, PayType.WECHAT)"
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column :label="payChannelEnum.WX_APP.name" align="center">
+        <el-table-column :label="PayChannelEnum.WX_APP.name" align="center">
           <template #default="scope">
             <el-button
               type="success"
               circle
-              v-if="judgeChannelExist(scope.row.channelCodes, payChannelEnum.WX_APP.code)"
-              @click="handleUpdateChannel(scope.row, payChannelEnum.WX_APP.code, payType.WECHAT)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_APP.code)"
+              @click="handleUpdateChannel(scope.row, PayChannelEnum.WX_APP.code, PayType.WECHAT)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -265,7 +256,7 @@
               v-else
               type="danger"
               circle
-              @click="handleCreateChannel(scope.row, payChannelEnum.WX_APP.code, payType.WECHAT)"
+              @click="handleCreateChannel(scope.row, PayChannelEnum.WX_APP.code, PayType.WECHAT)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -312,15 +303,13 @@
   <!-- 表单弹窗：添加/修改 -->
   <AppForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="App">
+<script setup lang="ts" name="PayApp">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as AppApi from '@/api/pay/app'
-import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
-import { dateFormatter } from '@/utils/formatTime'
 import AppForm from '@/views/pay/app/AppForm.vue'
-import { PayChannelEnum as payChannelEnum, PayType } from '@/utils/constants'
-
+import { PayChannelEnum, PayType } from '@/utils/constants'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -342,22 +331,15 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const channelParam = reactive({
   loading: false,
-  // 是否修改
-  edit: false,
-  // 微信是否显示
-  wechatOpen: false,
-  // 支付宝是否显示
-  aliPayOpen: false,
-  // 应用ID
-  appId: null,
-  // 渠道编码
-  payCode: null,
+  edit: false, // 是否修改
+  wechatOpen: false, // 微信是否显示
+  aliPayOpen: false, // 支付宝是否显示
+  appId: null, // 应用 ID
+  payCode: null, // 渠道编码
   // 商户对象
   payMerchant: {
-    // 编号
-    id: null,
-    // 名称
-    name: null
+    id: null, // 编号
+    name: null // 名称
   }
 }) // 微信组件传参参数
 
@@ -421,23 +403,28 @@ const handleExport = async () => {
 
 /**
  * 根据渠道编码判断渠道列表中是否存在
+ *
  * @param channels 渠道列表
  * @param channelCode 渠道编码
  */
-const judgeChannelExist = (channels, channelCode) => {
+const isChannelExists = (channels, channelCode) => {
   if (!channels) {
     return false
   }
   return channels.indexOf(channelCode) !== -1
 }
 
+// TODO @芋艿：handleUpdateChannel 和 handleCreateChannel 合并，成为 openChannelForm
 /**
  * 修改支付渠道信息
+ *
  * @param row 行记录
  * @param payCode 支付编码
  * @param type 支付类型
  */
 const handleUpdateChannel = async (row, payCode, type) => {
+  // TODO @芋艿：表单未实现
+  message.alert('待实现')
   await settingChannelParam(row, payCode, type)
   channelParam.edit = true
   channelParam.loading = true
@@ -447,6 +434,7 @@ const handleUpdateChannel = async (row, payCode, type) => {
  * 新增支付渠道信息
  */
 const handleCreateChannel = async (row, payCode, type) => {
+  message.alert('待实现')
   await settingChannelParam(row, payCode, type)
   channelParam.edit = false
   channelParam.loading = false
diff --git a/src/views/pay/order/orderForm.vue b/src/views/pay/order/OrderDetail.vue
similarity index 35%
rename from src/views/pay/order/orderForm.vue
rename to src/views/pay/order/OrderDetail.vue
index f9625085..bb4bee74 100644
--- a/src/views/pay/order/orderForm.vue
+++ b/src/views/pay/order/OrderDetail.vue
@@ -1,77 +1,79 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="商户名称">{{ orderDetail.merchantName }}</el-descriptions-item>
-      <el-descriptions-item label="应用名称">{{ orderDetail.appName }}</el-descriptions-item>
-      <el-descriptions-item label="商品名称">{{ orderDetail.subject }}</el-descriptions-item>
+  <Dialog title="详情" v-model="dialogVisible" width="50%">
+    <el-descriptions :column="2">
+      <el-descriptions-item label="商户名称">{{ detailData.merchantName }}</el-descriptions-item>
+      <el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
+      <el-descriptions-item label="商品名称">{{ detailData.subject }}</el-descriptions-item>
     </el-descriptions>
     <el-divider />
-    <el-descriptions :column="2" label-class-name="desc-label">
+    <el-descriptions :column="2">
       <el-descriptions-item label="商户订单号">
-        <el-tag size="small">{{ orderDetail.merchantOrderId }}</el-tag>
+        <el-tag>{{ detailData.merchantOrderId }}</el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="渠道订单号">
-        <el-tag class="tag-purple" size="small">{{ orderDetail.channelOrderNo }}</el-tag>
+        <el-tag class="tag-purple">{{ detailData.channelOrderNo }}</el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="支付订单号">
-        <el-tag v-if="orderDetail.payOrderExtension.no !== ''" class="tag-pink" size="small">
-          {{ orderDetail.payOrderExtension.no }}
+        <el-tag v-if="detailData.payOrderExtension" class="tag-pink">
+          {{ detailData.payOrderExtension.no }}
         </el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="金额">
-        <el-tag type="success" size="small">{{ parseFloat(orderDetail.amount / 100, 2) }}</el-tag>
+        <el-tag type="success">￥{{ parseFloat(detailData.amount / 100, 2).toFixed(2) }}</el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="手续费">
-        <el-tag type="warning" size="small"
-          >{{ parseFloat(orderDetail.channelFeeAmount / 100, 2) }}
+        <el-tag type="warning">
+          ￥{{ parseFloat(detailData.channelFeeAmount / 100, 2).toFixed(2) }}
         </el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="手续费比例">
-        {{ parseFloat(orderDetail.channelFeeRate / 100, 2) }}%
+        {{ parseFloat(detailData.channelFeeRate / 100, 2) }}%
       </el-descriptions-item>
       <el-descriptions-item label="支付状态">
-        <dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="orderDetail.status" />
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="detailData.status" />
       </el-descriptions-item>
       <el-descriptions-item label="回调状态">
-        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="orderDetail.notifyStatus" />
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="detailData.notifyStatus" />
       </el-descriptions-item>
-      <el-descriptions-item label="回调地址">{{ orderDetail.notifyUrl }}</el-descriptions-item>
-      <el-descriptions-item label="创建时间" :formatter="dateFormatter">
-        {{ formatDate(orderDetail.createTime) }}
+      <el-descriptions-item label="回调地址">{{ detailData.notifyUrl }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(detailData.createTime) }}
       </el-descriptions-item>
-      <el-descriptions-item label="支付时间" :formatter="dateFormatter">
-        {{ formatDate(orderDetail.successTime) }}
+      <el-descriptions-item label="支付时间">
+        {{ formatDate(detailData.successTime) }}
       </el-descriptions-item>
-      <el-descriptions-item label="失效时间" :formatter="dateFormatter">
-        {{ formatDate(orderDetail.expireTime) }}
+      <el-descriptions-item label="失效时间">
+        {{ formatDate(detailData.expireTime) }}
       </el-descriptions-item>
-      <el-descriptions-item label="通知时间" :formatter="dateFormatter">
-        {{ formatDate(orderDetail.notifyTime) }}
+      <el-descriptions-item label="通知时间">
+        {{ formatDate(detailData.notifyTime) }}
       </el-descriptions-item>
     </el-descriptions>
     <el-divider />
-    <el-descriptions :column="2" label-class-name="desc-label">
+    <el-descriptions :column="2">
       <el-descriptions-item label="支付渠道"
-        >{{ orderDetail.channelCodeName }}
+        >{{ detailData.channelCodeName }}
       </el-descriptions-item>
-      <el-descriptions-item label="支付IP">{{ orderDetail.userIp }}</el-descriptions-item>
+      <el-descriptions-item label="支付IP">{{ detailData.userIp }}</el-descriptions-item>
       <el-descriptions-item label="退款状态">
-        <dict-tag :type="DICT_TYPE.PAY_ORDER_REFUND_STATUS" :value="orderDetail.refundStatus" />
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_REFUND_STATUS" :value="detailData.refundStatus" />
       </el-descriptions-item>
-      <el-descriptions-item label="退款次数">{{ orderDetail.refundTimes }}</el-descriptions-item>
+      <el-descriptions-item label="退款次数">{{ detailData.refundTimes }}</el-descriptions-item>
       <el-descriptions-item label="退款金额">
         <el-tag type="warning">
-          {{ parseFloat(orderDetail.refundAmount / 100, 2) }}
+          {{ parseFloat(detailData.refundAmount / 100, 2) }}
         </el-tag>
       </el-descriptions-item>
     </el-descriptions>
     <el-divider />
-    <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
+    <el-descriptions :column="1" direction="vertical" border>
       <el-descriptions-item label="商品描述">
-        {{ orderDetail.body }}
+        {{ detailData.body }}
       </el-descriptions-item>
       <el-descriptions-item label="支付通道异步回调内容">
-        {{ orderDetail.payOrderExtension.channelNotifyData }}
+        <div style="width: 700px; overflow: auto">
+          {{ detailData.payOrderExtension?.channelNotifyData }}
+        </div>
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
@@ -79,60 +81,21 @@
 <script setup lang="ts" name="orderForm">
 import { DICT_TYPE } from '@/utils/dict'
 import * as OrderApi from '@/api/pay/order'
-import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { formatDate } from '@/utils/formatTime'
 
-const { t } = useI18n() // 国际化
-// const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('订单详情') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const defaultOrderDetail = {
-  merchantName: '',
-  appName: '',
-  channelCodeName: '',
-  subject: '',
-  merchantOrderId: null,
-  channelOrderNo: '',
-  body: '',
-  amount: null,
-  channelFeeRate: null,
-  channelFeeAmount: null,
-  userIp: '',
-  status: null,
-  notifyUrl: '',
-  notifyStatus: null,
-  refundStatus: null,
-  refundTimes: '',
-  refundAmount: null,
-  createTime: '',
-  successTime: '',
-  notifyTime: '',
-  expireTime: '',
-  payOrderExtension: {
-    channelNotifyData: '',
-    no: ''
-  }
-}
-const orderDetail = ref(JSON.parse(JSON.stringify(defaultOrderDetail)))
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({})
 
 /** 打开弹窗 */
-const open = async (id?: number) => {
+const open = async (id: number) => {
   dialogVisible.value = true
-  dialogTitle.value = t('action.preview')
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      orderDetail.value = await OrderApi.getOrderDetail(id)
-      if (orderDetail.value.payOrderExtension === null) {
-        orderDetail.value.payOrderExtension = Object.assign(
-          defaultOrderDetail.payOrderExtension,
-          {}
-        )
-      }
-    } finally {
-      formLoading.value = false
-    }
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = await OrderApi.getOrderDetail(id)
+  } finally {
+    detailLoading.value = false
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index f70801d3..ba04d0d9 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -5,24 +5,14 @@
       :model="queryParams"
       ref="queryFormRef"
       :inline="true"
-      label-width="120px"
+      label-width="100px"
     >
       <el-form-item label="所属商户" prop="merchantId">
         <el-select
           v-model="queryParams.merchantId"
           clearable
-          @clear="
-            () => {
-              queryParams.merchantId = null
-            }
-          "
-          filterable
-          remote
-          reserve-keyword
           placeholder="请选择所属商户"
-          @change="handleGetAppListByMerchantId"
-          :remote-method="handleGetMerchantListByName"
-          :loading="merchantLoading"
+          class="!w-240px"
         >
           <el-option
             v-for="item in merchantList"
@@ -33,7 +23,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="应用编号" prop="appId">
-        <el-select clearable v-model="queryParams.appId" filterable placeholder="请选择应用信息">
+        <el-select
+          clearable
+          v-model="queryParams.appId"
+          placeholder="请选择应用信息"
+          class="!w-240px"
+        >
           <el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
@@ -42,14 +37,10 @@
           v-model="queryParams.channelCode"
           placeholder="请输入渠道编码"
           clearable
-          @clear="
-            () => {
-              queryParams.channelCode = null
-            }
-          "
+          class="!w-240px"
         >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
+            v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -62,6 +53,7 @@
           placeholder="请输入商户订单编号"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="渠道订单号" prop="channelOrderNo">
@@ -70,25 +62,36 @@
           placeholder="请输入渠道订单号"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="支付状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择支付状态" clearable size="small">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择支付状态"
+          clearable
+          class="!w-240px"
+        >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_STATUS)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_STATUS)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="退款状态" prop="refundStatus">
-        <el-select v-model="queryParams.refundStatus" placeholder="请选择退款状态" clearable>
+        <el-select
+          v-model="queryParams.refundStatus"
+          placeholder="请选择退款状态"
+          clearable
+          class="!w-240px"
+        >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_REFUND_STATUS)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_REFUND_STATUS)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -97,12 +100,13 @@
           v-model="queryParams.notifyStatus"
           placeholder="请选择订单回调商户状态"
           clearable
+          class="!w-240px"
         >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -118,14 +122,8 @@
         />
       </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="success"
           plain
@@ -133,13 +131,13 @@
           :loading="exportLoading"
           v-hasPermi="['system:tenant:export']"
         >
-          <Icon icon="ep:download" class="mr-5px" />
-          导出
+          <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
-  <content-wrap>
+
+  <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column label="订单编号" align="center" prop="id" />
       <el-table-column label="商户名称" align="center" prop="merchantName" width="120" />
@@ -151,17 +149,17 @@
       <el-table-column label="异步通知地址" align="center" prop="notifyUrl" width="250" />
       <el-table-column label="回调状态" align="center" prop="notifyStatus">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="scope.row.notifyStatus" />
         </template>
       </el-table-column>
-      <el-table-column label="支付订单" align="left">
+      <el-table-column label="支付订单" width="280">
         <template #default="scope">
           <p class="order-font">
-            <el-tag size="small">商户</el-tag>
+            <el-tag>商户</el-tag>
             {{ scope.row.merchantOrderId }}
           </p>
           <p class="order-font">
-            <el-tag size="small" type="warning">支付</el-tag>
+            <el-tag type="warning">支付</el-tag>
             {{ scope.row.channelOrderNo }}
           </p>
         </template>
@@ -195,35 +193,29 @@
         label="创建时间"
         align="center"
         prop="createTime"
-        width="100"
+        width="180"
         :formatter="dateFormatter"
       />
       <el-table-column
         label="支付时间"
         align="center"
         prop="successTime"
-        width="100"
+        width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column
-        label="操作"
-        align="center"
-        fixed="right"
-        class-name="small-padding fixed-width"
-      >
+      <el-table-column label="操作" align="center" fixed="right">
         <template #default="scope">
           <el-button
-            size="small"
-            type="text"
-            icon="el-icon-search"
-            @click="openForm(scope.row.id)"
+            type="primary"
+            link
+            @click="openDetail(scope.row.id)"
             v-hasPermi="['pay:order:query']"
-            >查看详情
+          >
+            详情
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <!-- 分页组件 -->
     <!-- 分页 -->
     <Pagination
       :total="total"
@@ -231,30 +223,21 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </content-wrap>
+  </ContentWrap>
 
   <!-- 表单弹窗：预览 -->
-  <OrderForm ref="formRef" @success="getList" />
+  <OrderDetail ref="detailRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Order">
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+<script setup lang="ts" name="PayOrder">
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import * as MerchantApi from '@/api/pay/merchant'
 import * as OrderApi from '@/api/pay/order'
-import download from '@/utils/download'
-import * as AppApi from '@/api/pay/app'
-import { dateFormatter } from '@/utils/formatTime'
-import OrderForm from '@/views/pay/order/orderForm.vue'
-
+import OrderDetail from '@/views/pay/order/OrderDetail.vue'
 const message = useMessage() // 消息弹窗
+import download from '@/utils/download'
 
-// const { t } = useI18n() // 国际化
-const queryFormRef = ref() // 搜索的表单
-const merchantList = ref([]) // 商户列表
-const merchantLoading = ref(false) // 商户加载遮罩层
-const appList = ref([]) // 支付应用列表集合
 const loading = ref(false) // 列表的加载中
-const exportLoading = ref(false) // 导出等待
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
 const queryParams = reactive({
@@ -285,26 +268,10 @@ const queryParams = reactive({
   notifyTime: [],
   createTime: []
 })
-
-/**
- * 根据商户名称模糊匹配商户信息
- * @param name 商户名称
- */
-const handleGetMerchantListByName = async (name) => {
-  merchantList.value = await MerchantApi.getMerchantListByName(name)
-}
-
-/**
- * 根据商户 ID 查询支付应用信息
- */
-const handleGetAppListByMerchantId = () => {
-  queryParams.appId = undefined
-  if (queryParams.merchantId) {
-    AppApi.getAppListByMerchantId(queryParams.merchantId).then((response) => {
-      appList.value = response.data
-    })
-  }
-}
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出等待
+const merchantList = ref([]) // 商户列表
+const appList = ref([]) // 支付应用列表集合
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -332,25 +299,35 @@ const resetQuery = () => {
 
 /** 导出按钮操作 */
 const handleExport = async () => {
-  // 处理查询参数
-  // 导出的二次确认
-  await message.exportConfirm()
-  // 发起导出
-  exportLoading.value = true
-  const data = await OrderApi.exportOrder(queryParams)
-  download.excel(data, '支付订单.xls')
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await OrderApi.exportOrder(queryParams)
+    download.excel(data, '支付订单.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
 }
+
 /** 预览详情 */
-const formRef = ref()
-const openForm = (id?: number) => {
-  formRef.value.open(id)
+const detailRef = ref()
+const openDetail = (id?: number) => {
+  detailRef.value.open(id)
 }
+
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  // 加载商户列表
+  merchantList.value = await MerchantApi.getMerchantListByName()
+  // 加载 App 列表
+  // TODO 芋艿：候选少一个查询应用列表的接口
+  // appList.value = await AppApi.getAppListByMerchantId()
 })
 </script>
-
 <style>
 .order-font {
   font-size: 12px;
diff --git a/src/views/pay/refund/index.vue b/src/views/pay/refund/index.vue
index b8a949e7..a17f5552 100644
--- a/src/views/pay/refund/index.vue
+++ b/src/views/pay/refund/index.vue
@@ -227,7 +227,7 @@
       </template>
     </el-table-column>
   </el-table>
-  <content-wrap>
+  <ContentWrap>
     <!-- 分页 -->
     <Pagination
       :total="total"
@@ -235,7 +235,7 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </content-wrap>
+  </ContentWrap>
   <!-- 表单弹窗：预览 -->
   <RefundForm ref="formRef" @success="getList" />
 </template>
-- 
Gitee


From 30cf8008ce967dc9f14b09ce7cc7b2d814552c4b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Apr 2023 23:01:51 +0800
Subject: [PATCH 19/23] =?UTF-8?q?REVIEW=20=E9=80=80=E6=AC=BE=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pay/order/index.vue                 |   4 +-
 .../{refundForm.vue => RefundDetail.vue}      | 151 +++-----
 src/views/pay/refund/index.vue                | 336 +++++++++---------
 3 files changed, 217 insertions(+), 274 deletions(-)
 rename src/views/pay/refund/{refundForm.vue => RefundDetail.vue} (31%)

diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index ba04d0d9..72e5128b 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -233,7 +233,7 @@ import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as MerchantApi from '@/api/pay/merchant'
 import * as OrderApi from '@/api/pay/order'
-import OrderDetail from '@/views/pay/order/OrderDetail.vue'
+import OrderDetail from './OrderDetail.vue'
 const message = useMessage() // 消息弹窗
 import download from '@/utils/download'
 
@@ -314,7 +314,7 @@ const handleExport = async () => {
 
 /** 预览详情 */
 const detailRef = ref()
-const openDetail = (id?: number) => {
+const openDetail = (id: number) => {
   detailRef.value.open(id)
 }
 
diff --git a/src/views/pay/refund/refundForm.vue b/src/views/pay/refund/RefundDetail.vue
similarity index 31%
rename from src/views/pay/refund/refundForm.vue
rename to src/views/pay/refund/RefundDetail.vue
index cc9d8726..8a47c6f6 100644
--- a/src/views/pay/refund/refundForm.vue
+++ b/src/views/pay/refund/RefundDetail.vue
@@ -1,150 +1,111 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="商户名称">{{ refundDetail.merchantName }}</el-descriptions-item>
-      <el-descriptions-item label="应用名称">{{ refundDetail.appName }}</el-descriptions-item>
-      <el-descriptions-item label="商品名称">{{ refundDetail.subject }}</el-descriptions-item>
+  <Dialog title="详情" v-model="dialogVisible" width="50%">
+    <el-descriptions :column="2">
+      <el-descriptions-item label="商户名称">{{ detailData.merchantName }}</el-descriptions-item>
+      <el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
+      <el-descriptions-item label="商品名称">{{ detailData.subject }}</el-descriptions-item>
     </el-descriptions>
     <el-divider />
-    <el-descriptions :column="2" label-class-name="desc-label">
+    <el-descriptions :column="2">
       <el-descriptions-item label="商户退款单号">
-        <el-tag size="small">{{ refundDetail.merchantRefundNo }}</el-tag>
+        <el-tag>{{ detailData.merchantRefundNo }}</el-tag>
       </el-descriptions-item>
-      <el-descriptions-item label="商户订单号"
-        >{{ refundDetail.merchantOrderId }}
+      <el-descriptions-item label="商户订单号">
+        {{ detailData.merchantOrderId }}
       </el-descriptions-item>
-      <el-descriptions-item label="交易订单号">{{ refundDetail.tradeNo }}</el-descriptions-item>
+      <el-descriptions-item label="交易订单号">{{ detailData.tradeNo }}</el-descriptions-item>
     </el-descriptions>
     <el-divider />
-    <el-descriptions :column="2" label-class-name="desc-label">
+    <el-descriptions :column="2">
       <el-descriptions-item label="支付金额">
-        {{ parseFloat(refundDetail.payAmount / 100).toFixed(2) }}
+        <el-tag type="success">￥{{ parseFloat(detailData.payAmount / 100, 2).toFixed(2) }}</el-tag>
       </el-descriptions-item>
-      <el-descriptions-item label="退款金额" size="small">
-        <el-tag class="tag-purple" size="small">
-          {{ parseFloat(refundDetail.refundAmount / 100).toFixed(2) }}
+      <el-descriptions-item label="退款金额">
+        <el-tag class="tag-purple">
+          ￥{{ parseFloat(detailData.refundAmount / 100).toFixed(2) }}
         </el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="退款类型">
-        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="refundDetail.type" />
+        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="detailData.type" />
       </el-descriptions-item>
       <el-descriptions-item label="退款状态">
-        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="refundDetail.status" />
+        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="detailData.status" />
       </el-descriptions-item>
-      <el-descriptions-item label="创建时间"
-        >{{ formatDate(refundDetail.createTime) }}
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(detailData.createTime) }}
       </el-descriptions-item>
-      <el-descriptions-item label="退款成功时间"
-        >{{ formatDate(refundDetail.successTime) }}
+      <el-descriptions-item label="退款成功时间">
+        {{ formatDate(detailData.successTime) }}
       </el-descriptions-item>
-      <el-descriptions-item label="退款失效时间"
-        >{{ formatDate(refundDetail.expireTime) }}
+      <el-descriptions-item label="退款失效时间">
+        {{ formatDate(detailData.expireTime) }}
       </el-descriptions-item>
-      <el-descriptions-item label="更新时间"
-        >{{ formatDate(refundDetail.updateTime) }}
+      <el-descriptions-item label="更新时间">
+        {{ formatDate(detailData.updateTime) }}
       </el-descriptions-item>
     </el-descriptions>
     <el-divider />
-    <el-descriptions :column="2" label-class-name="desc-label">
+    <el-descriptions :column="2">
       <el-descriptions-item label="支付渠道">
-        {{ refundDetail.channelCodeName }}
+        {{ detailData.channelCodeName }}
       </el-descriptions-item>
-      <el-descriptions-item label="支付IP" size="small">
-        {{ refundDetail.userIp }}
+      <el-descriptions-item label="支付 IP">
+        {{ detailData.userIp }}
       </el-descriptions-item>
-      <el-descriptions-item label="回调地址">{{ refundDetail.notifyUrl }}</el-descriptions-item>
+      <el-descriptions-item label="回调地址">{{ detailData.notifyUrl }}</el-descriptions-item>
       <el-descriptions-item label="回调状态">
-        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="refundDetail.notifyStatus" />
+        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="detailData.notifyStatus" />
       </el-descriptions-item>
-      <el-descriptions-item label="回调时间"
-        >{{ formatDate(refundDetail.notifyTime) }}
+      <el-descriptions-item label="回调时间">
+        {{ formatDate(detailData.notifyTime) }}
       </el-descriptions-item>
     </el-descriptions>
     <el-divider />
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="渠道订单号"
-        >{{ refundDetail.channelOrderNo }}
+    <el-descriptions :column="2">
+      <el-descriptions-item label="渠道订单号">
+        {{ detailData.channelOrderNo }}
       </el-descriptions-item>
-      <el-descriptions-item label="渠道退款单号"
-        >{{ refundDetail.channelRefundNo }}
+      <el-descriptions-item label="渠道退款单号">
+        {{ detailData.channelRefundNo }}
       </el-descriptions-item>
-      <el-descriptions-item label="渠道错误码"
-        >{{ refundDetail.channelErrorCode }}
+      <el-descriptions-item label="渠道错误码">
+        {{ detailData.channelErrorCode }}
       </el-descriptions-item>
-      <el-descriptions-item label="渠道错误码描述"
-        >{{ refundDetail.channelErrorMsg }}
+      <el-descriptions-item label="渠道错误码描述">
+        {{ detailData.channelErrorMsg }}
       </el-descriptions-item>
     </el-descriptions>
     <br />
-    <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
-      <el-descriptions-item label="渠道额外参数"
-        >{{ refundDetail.channelExtras }}
+    <el-descriptions :column="1" direction="vertical" border>
+      <el-descriptions-item label="渠道额外参数">
+        {{ detailData.channelExtras }}
       </el-descriptions-item>
-      <el-descriptions-item label="退款原因">{{ refundDetail.reason }}</el-descriptions-item>
+      <el-descriptions-item label="退款原因">{{ detailData.reason }}</el-descriptions-item>
     </el-descriptions>
   </Dialog>
 </template>
 <script setup lang="ts" name="refundForm">
 import { DICT_TYPE } from '@/utils/dict'
-import * as RefundApi from '@/api/pay/refund'
 import { formatDate } from '@/utils/formatTime'
+import * as RefundApi from '@/api/pay/refund'
 
-const { t } = useI18n() // 国际化
-// const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('退款订单详情') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const defaultrefundDetail = {
-  id: null,
-  appId: null,
-  appName: '',
-  channelCode: '',
-  channelCodeName: '',
-  channelErrorCode: '',
-  channelErrorMsg: '',
-  channelExtras: '',
-  channelId: null,
-  channelOrderNo: '',
-  channelRefundNo: '',
-  createTime: null,
-  expireTime: null,
-  merchantId: null,
-  merchantName: '',
-  merchantOrderId: '',
-  merchantRefundNo: '',
-  notifyStatus: null,
-  notifyTime: null,
-  notifyUrl: '',
-  orderId: null,
-  payAmount: null,
-  reason: '',
-  refundAmount: null,
-  status: null,
-  subject: '',
-  successTime: null,
-  tradeNo: '',
-  type: null,
-  userIp: ''
-}
-const refundDetail = ref(JSON.parse(JSON.stringify(defaultrefundDetail)))
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({})
 
 /** 打开弹窗 */
-const open = async (id?: number) => {
+const open = async (id: number) => {
   dialogVisible.value = true
-  dialogTitle.value = t('action.preview')
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      refundDetail.value = await RefundApi.getRefundApi(id)
-    } finally {
-      formLoading.value = false
-    }
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = await RefundApi.getRefund(id)
+  } finally {
+    detailLoading.value = false
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
-
 <style>
 .tag-purple {
   color: #722ed1;
diff --git a/src/views/pay/refund/index.vue b/src/views/pay/refund/index.vue
index a17f5552..17ca2a0d 100644
--- a/src/views/pay/refund/index.vue
+++ b/src/views/pay/refund/index.vue
@@ -1,10 +1,10 @@
 <template>
+  <!-- 搜索工作栏 -->
   <ContentWrap>
-    <!-- 搜索工作栏 -->
     <el-form
+      class="-mb-15px"
       :model="queryParams"
       ref="queryFormRef"
-      size="small"
       :inline="true"
       label-width="120px"
     >
@@ -12,18 +12,8 @@
         <el-select
           v-model="queryParams.merchantId"
           clearable
-          @clear="
-            () => {
-              queryParams.merchantId = null
-            }
-          "
-          filterable
-          remote
-          reserve-keyword
           placeholder="请选择所属商户"
-          @change="handleGetAppListByMerchantId"
-          :remote-method="handleGetMerchantListByName"
-          :loading="merchantLoading"
+          class="!w-240px"
         >
           <el-option
             v-for="item in merchantList"
@@ -34,7 +24,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="应用编号" prop="appId">
-        <el-select clearable v-model="queryParams.appId" filterable placeholder="请选择应用信息">
+        <el-select
+          v-model="queryParams.appId"
+          clearable
+          placeholder="请选择应用信息"
+          class="!w-240px"
+        >
           <el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
@@ -43,14 +38,10 @@
           v-model="queryParams.channelCode"
           placeholder="请输入渠道编码"
           clearable
-          @clear="
-            () => {
-              queryParams.channelCode = null
-            }
-          "
+          class="!w-240px"
         >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
+            v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -58,12 +49,17 @@
         </el-select>
       </el-form-item>
       <el-form-item label="退款类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择退款类型" clearable>
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择退款类型"
+          clearable
+          class="!w-240px"
+        >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_REFUND_ORDER_TYPE)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_REFUND_ORDER_TYPE)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -73,15 +69,21 @@
           placeholder="请输入商户退款订单号"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="退款状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择退款状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择退款状态"
+          clearable
+          class="!w-240px"
+        >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_REFUND_ORDER_STATUS)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_REFUND_ORDER_STATUS)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -90,12 +92,13 @@
           v-model="queryParams.notifyStatus"
           placeholder="请选择通知商户退款结果的回调状态"
           clearable
+          class="!w-240px"
         >
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
+            :key="dict.value"
             :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -111,14 +114,8 @@
         />
       </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="success"
           plain
@@ -126,108 +123,103 @@
           :loading="exportLoading"
           v-hasPermi="['system:tenant:export']"
         >
-          <Icon icon="ep:download" class="mr-5px" />
-          导出
+          <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
-  <el-table v-loading="loading" :data="list">
-    <el-table-column label="编号" align="center" prop="id" />
-    <el-table-column label="商户名称" align="center" prop="merchantName" width="120" />
-    <el-table-column label="应用名称" align="center" prop="appName" width="120" />
-    <el-table-column label="渠道名称" align="center" prop="channelCodeName" width="120" />
-    <el-table-column label="交易订单号" align="center" prop="tradeNo" width="140" />
-    <el-table-column label="商户订单编号" align="center" prop="merchantOrderId" width="140" />
-    <el-table-column label="商户订单号" align="left" width="230">
-      <template #default="scope">
-        <p class="order-font">
-          <el-tag size="small">退款</el-tag>
-          {{ scope.row.merchantRefundNo }}
-        </p>
-        <p class="order-font">
-          <el-tag type="success">交易</el-tag>
-          {{ scope.row.merchantOrderId }}
-        </p>
-      </template>
-    </el-table-column>
-    <el-table-column label="支付订单号" align="center" prop="merchantRefundNo" width="250">
-      <template #default="scope">
-        <p class="order-font">
-          <el-tag size="small">交易</el-tag>
-          {{ scope.row.tradeNo }}
-        </p>
-        <p class="order-font">
-          <el-tag size="small" type="warning">渠道</el-tag>
-          {{ scope.row.channelOrderNo }}
-        </p>
-      </template>
-    </el-table-column>
-    <el-table-column label="支付金额(元)" align="center" prop="payAmount" width="100">
-      <template #default="scope">
-        ￥{{ parseFloat(scope.row.payAmount / 100).toFixed(2) }}
-      </template>
-    </el-table-column>
-    <el-table-column label="退款金额(元)" align="center" prop="refundAmount" width="100">
-      <template #default="scope">
-        ￥{{ parseFloat(scope.row.refundAmount / 100).toFixed(2) }}
-      </template>
-    </el-table-column>
-    <el-table-column label="退款类型" align="center" prop="type" width="80">
-      <template #default="scope">
-        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="scope.row.type" />
-      </template>
-    </el-table-column>
-    <el-table-column label="退款状态" align="center" prop="status">
-      <template #default="scope">
-        <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="scope.row.status" />
-      </template>
-    </el-table-column>
-    <el-table-column label="回调状态" align="center" prop="notifyStatus">
-      <template #default="scope">
-        <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="scope.row.notifyStatus" />
-      </template>
-    </el-table-column>
-    <el-table-column
-      label="退款原因"
-      align="center"
-      prop="reason"
-      width="140"
-      :show-overflow-tooltip="true"
-    />
-    <el-table-column
-      label="创建时间"
-      align="center"
-      prop="createTime"
-      width="100"
-      :formatter="dateFormatter"
-    />
-    <el-table-column
-      label="退款成功时间"
-      align="center"
-      prop="successTime"
-      width="100"
-      :formatter="dateFormatter"
-    />
-    <el-table-column
-      label="操作"
-      align="center"
-      fixed="right"
-      class-name="small-padding fixed-width"
-    >
-      <template #default="scope">
-        <el-button
-          size="small"
-          type="text"
-          icon="el-icon-search"
-          @click="openForm(scope.row.id)"
-          v-hasPermi="['pay:order:query']"
-          >查看详情
-        </el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+
   <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="商户名称" align="center" prop="merchantName" width="120" />
+      <el-table-column label="应用名称" align="center" prop="appName" width="120" />
+      <el-table-column label="渠道名称" align="center" prop="channelCodeName" width="120" />
+      <el-table-column label="交易订单号" align="center" prop="tradeNo" width="140" />
+      <el-table-column label="商户订单编号" align="center" prop="merchantOrderId" width="140" />
+      <el-table-column label="商户订单号" align="left" width="230">
+        <template #default="scope">
+          <p class="order-font">
+            <el-tag>退款</el-tag>
+            {{ scope.row.merchantRefundNo }}
+          </p>
+          <p class="order-font">
+            <el-tag type="success">交易</el-tag>
+            {{ scope.row.merchantOrderId }}
+          </p>
+        </template>
+      </el-table-column>
+      <el-table-column label="支付订单号" align="center" prop="merchantRefundNo" width="250">
+        <template #default="scope">
+          <p class="order-font">
+            <el-tag>交易</el-tag>
+            {{ scope.row.tradeNo }}
+          </p>
+          <p class="order-font">
+            <el-tag type="warning">渠道</el-tag>
+            {{ scope.row.channelOrderNo }}
+          </p>
+        </template>
+      </el-table-column>
+      <el-table-column label="支付金额(元)" align="center" prop="payAmount" width="100">
+        <template #default="scope">
+          ￥{{ parseFloat(scope.row.payAmount / 100).toFixed(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="退款金额(元)" align="center" prop="refundAmount" width="100">
+        <template #default="scope">
+          ￥{{ parseFloat(scope.row.refundAmount / 100).toFixed(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="退款类型" align="center" prop="type" width="80">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="退款状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="回调状态" align="center" prop="notifyStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="scope.row.notifyStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="退款原因"
+        align="center"
+        prop="reason"
+        width="140"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="退款成功时间"
+        align="center"
+        prop="successTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center" fixed="right">
+        <template #default="scope">
+          <el-button
+            type="primary"
+            link
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['pay:order:query']"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
     <!-- 分页 -->
     <Pagination
       :total="total"
@@ -236,27 +228,22 @@
       @pagination="getList"
     />
   </ContentWrap>
+
   <!-- 表单弹窗：预览 -->
-  <RefundForm ref="formRef" @success="getList" />
+  <RefundDetail ref="detailRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Refund">
-import * as AppApi from '@/api/pay/app'
+<script setup lang="ts" name="PayRefund">
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import * as MerchantApi from '@/api/pay/merchant'
 import * as RefundApi from '@/api/pay/refund'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import RefundDetail from './RefundDetail.vue'
+const message = useMessage() // 消息弹窗
 import download from '@/utils/download'
-import { dateFormatter } from '@/utils/formatTime'
-import RefundForm from '@/views/pay/refund/refundForm.vue'
 
-const merchantLoading = ref(false) // 商户加载遮罩层
-const message = useMessage() // 消息弹窗
-const appList = ref([]) // 支付应用列表集合
-const merchantList = ref([]) // 商户列表
-const exportLoading = ref(false) // 导出等待
 const loading = ref(false) // 列表遮罩层
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
-const queryFormRef = ref() // 搜索的表单
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -286,26 +273,10 @@ const queryParams = reactive({
   notifyTime: [],
   createTime: []
 })
-
-/**
- * 根据商户 ID 查询支付应用信息
- */
-const handleGetAppListByMerchantId = () => {
-  queryParams.appId = undefined
-  if (queryParams.merchantId) {
-    AppApi.getAppListByMerchantId(queryParams.merchantId).then((response) => {
-      appList.value = response.data
-    })
-  }
-}
-
-/**
- * 根据商户名称模糊匹配商户信息
- * @param name 商户名称
- */
-const handleGetMerchantListByName = async (name) => {
-  merchantList.value = await MerchantApi.getMerchantListByName(name)
-}
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出等待
+const appList = ref([]) // 支付应用列表集合
+const merchantList = ref([]) // 商户列表
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -333,21 +304,32 @@ const resetQuery = () => {
 
 /** 导出按钮操作 */
 const handleExport = async () => {
-  // 导出的二次确认
-  await message.exportConfirm()
-  // 发起导出
-  exportLoading.value = true
-  const data = await RefundApi.exportRefund(queryParams)
-  download.excel(data, '退款订单.xls')
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await RefundApi.exportRefund(queryParams)
+    download.excel(data, '支付订单.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
 }
+
 /** 预览详情 */
-const formRef = ref()
-const openForm = (id?: number) => {
-  formRef.value.open(id)
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
 }
+
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  // 加载商户列表
+  merchantList.value = await MerchantApi.getMerchantListByName()
+  // TODO 芋艿：候选少一个查询应用列表的接口
+  // appList.value = await AppApi.getAppListByMerchantId()
 })
 </script>
 
-- 
Gitee


From fd447dc7a3c3ce4b582cd254d563ef2d2acef984 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Apr 2023 23:28:59 +0800
Subject: [PATCH 20/23] =?UTF-8?q?REVIEW=20=E5=85=AC=E4=BC=97=E5=8F=B7?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=9A=84=E4=B8=8B=E6=8B=89=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.front                                         | 2 +-
 .vscode/launch.json                                | 2 +-
 src/views/mp/autoReply/index.vue                   | 3 ++-
 src/views/mp/components/WxMpSelect.vue             | 5 ++---
 src/views/mp/components/wx-account-select/main.vue | 6 +++---
 src/views/mp/draft/index.vue                       | 3 ++-
 src/views/mp/freePublish/index.vue                 | 1 +
 src/views/mp/material/index.vue                    | 5 +----
 src/views/mp/menu/index.vue                        | 3 ++-
 src/views/mp/tag/index.vue                         | 3 ++-
 src/views/mp/user/index.vue                        | 1 +
 11 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/.env.front b/.env.front
index a63b6379..1629ff9f 100644
--- a/.env.front
+++ b/.env.front
@@ -19,7 +19,7 @@ VITE_API_URL=/admin-api
 VITE_BASE_PATH=/
 
 # 项目本地运行端口号, 与.vscode/launch.json配合
-VITE_PORT=5173
+VITE_PORT=80
 
 # 是否删除debugger
 VITE_DROP_DEBUGGER=false
diff --git a/.vscode/launch.json b/.vscode/launch.json
index e4093b3a..f43edc03 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -8,7 +8,7 @@
       "type": "msedge",
       "request": "launch",
       "name": "Launch Edge against localhost",
-      "url": "http://localhost:5173",
+      "url": "http://localhost",
       "webRoot": "${workspaceFolder}/src",
       "sourceMaps": true
     }
diff --git a/src/views/mp/autoReply/index.vue b/src/views/mp/autoReply/index.vue
index 4877ec76..9208d1e7 100644
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@@ -3,7 +3,8 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged" />
   </ContentWrap>
 
   <!-- tab 切换 -->
diff --git a/src/views/mp/components/WxMpSelect.vue b/src/views/mp/components/WxMpSelect.vue
index 6dc6809b..e39bbf96 100644
--- a/src/views/mp/components/WxMpSelect.vue
+++ b/src/views/mp/components/WxMpSelect.vue
@@ -19,13 +19,12 @@ const emit = defineEmits<{
   (e: 'change', id: number | undefined): void
 }>()
 
-onMounted(async () => {
+onMounted(() => {
   handleQuery()
 })
 
 const handleQuery = async () => {
-  const data = await MpAccountApi.getSimpleAccountList()
-  accountList.value = data
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 默认选中第一个
   if (accountList.value.length > 0) {
     accountId.value = accountList.value[0].id
diff --git a/src/views/mp/components/wx-account-select/main.vue b/src/views/mp/components/wx-account-select/main.vue
index f75bc7d6..4eb99615 100644
--- a/src/views/mp/components/wx-account-select/main.vue
+++ b/src/views/mp/components/wx-account-select/main.vue
@@ -1,6 +1,7 @@
 <template>
   <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
     <el-form-item label="公众号" prop="accountId">
+      <!-- TODO 芋艿：需要将 el-form 和 el-select 解耦 -->
       <el-select
         v-model="accountId"
         placeholder="请选择公众号"
@@ -24,13 +25,12 @@ const queryFormRef = ref()
 
 const emit = defineEmits(['change'])
 
-onMounted(async () => {
+onMounted(() => {
   handleQuery()
 })
 
 const handleQuery = async () => {
-  const data = await MpAccountApi.getSimpleAccountList()
-  accountList.value = data
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 默认选中第一个
   if (accountList.value.length > 0) {
     accountId.value = accountList.value[0].id
diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index 0f2aa254..299ec68a 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -3,7 +3,8 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged">
       <template #actions>
         <el-button type="primary" plain @click="handleAdd" v-hasPermi="['mp:draft:create']">
           <Icon icon="ep:plus" />新增
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index bb42b6a2..0d370f4a 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -3,6 +3,7 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
     <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
   </ContentWrap>
 
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index ec9077f1..e4382b69 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -4,10 +4,7 @@
   <ContentWrap>
     <el-form class="-mb-15px" :inline="true" label-width="68px">
       <el-form-item label="公众号" prop="accountId">
-        <WxMpSelect @change="(accountId) => accountChange(accountId)" />
-      </el-form-item>
-      <el-form-item>
-        <slot name="actions"></slot>
+        <WxMpSelect @change="accountChange" />
       </el-form-item>
     </el-form>
   </ContentWrap>
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index 249f3a7c..a6a08c97 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -2,7 +2,8 @@
   <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged" />
   </ContentWrap>
 
   <!-- 列表 -->
diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
index 04366e88..44578519 100644
--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
@@ -3,7 +3,8 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged">
       <template #actions>
         <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']">
           <Icon icon="ep:plus" class="mr-5px" /> 新增
diff --git a/src/views/mp/user/index.vue b/src/views/mp/user/index.vue
index d5d2e4dc..91fd7dff 100644
--- a/src/views/mp/user/index.vue
+++ b/src/views/mp/user/index.vue
@@ -3,6 +3,7 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
     <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
       <template #actions>
         <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:user:sync']">
-- 
Gitee


From ebbf47f509968955209e79f22e4657d3bc1905fb Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Apr 2023 23:47:59 +0800
Subject: [PATCH 21/23] =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E7=A7=BB=E9=99=A4=20VX?=
 =?UTF-8?q?E=20=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   1 -
 build/vite/optimize.ts                        |   4 -
 package.json                                  |   1 -
 src/components/XModal/index.ts                |   3 -
 src/components/XModal/src/XModal.vue          |  44 --
 src/components/XTable/index.ts                |   3 -
 src/components/XTable/src/XTable.vue          | 442 ------------------
 src/components/XTable/src/style/dark.scss     |  81 ----
 src/components/XTable/src/style/index.scss    |   6 -
 src/components/XTable/src/style/light.scss    |  16 -
 src/components/XTable/src/type.ts             |  26 --
 src/components/index.ts                       |   4 -
 src/hooks/web/useVxeCrudSchemas.ts            | 354 --------------
 src/hooks/web/useVxeGrid.ts                   | 264 -----------
 src/hooks/web/useXTable.ts                    |  39 --
 src/main.ts                                   |   5 -
 src/plugins/vxeTable/index.ts                 | 223 ---------
 src/plugins/vxeTable/renderer/dataPicker.tsx  |  20 -
 .../vxeTable/renderer/dataTimeRangePicker.tsx |  23 -
 src/plugins/vxeTable/renderer/dict.tsx        |  12 -
 src/plugins/vxeTable/renderer/html.tsx        |  10 -
 src/plugins/vxeTable/renderer/img.tsx         |  20 -
 src/plugins/vxeTable/renderer/index.tsx       |   7 -
 src/plugins/vxeTable/renderer/link.tsx        |  15 -
 src/plugins/vxeTable/renderer/preview.tsx     |  35 --
 src/types/auto-components.d.ts                |   2 -
 src/types/auto-imports.d.ts                   |   2 -
 src/views/system/notify/template/index.vue    |   8 +-
 28 files changed, 4 insertions(+), 1666 deletions(-)
 delete mode 100644 src/components/XModal/index.ts
 delete mode 100644 src/components/XModal/src/XModal.vue
 delete mode 100644 src/components/XTable/index.ts
 delete mode 100644 src/components/XTable/src/XTable.vue
 delete mode 100644 src/components/XTable/src/style/dark.scss
 delete mode 100644 src/components/XTable/src/style/index.scss
 delete mode 100644 src/components/XTable/src/style/light.scss
 delete mode 100644 src/components/XTable/src/type.ts
 delete mode 100644 src/hooks/web/useVxeCrudSchemas.ts
 delete mode 100644 src/hooks/web/useVxeGrid.ts
 delete mode 100644 src/hooks/web/useXTable.ts
 delete mode 100644 src/plugins/vxeTable/index.ts
 delete mode 100644 src/plugins/vxeTable/renderer/dataPicker.tsx
 delete mode 100644 src/plugins/vxeTable/renderer/dataTimeRangePicker.tsx
 delete mode 100644 src/plugins/vxeTable/renderer/dict.tsx
 delete mode 100644 src/plugins/vxeTable/renderer/html.tsx
 delete mode 100644 src/plugins/vxeTable/renderer/img.tsx
 delete mode 100644 src/plugins/vxeTable/renderer/index.tsx
 delete mode 100644 src/plugins/vxeTable/renderer/link.tsx
 delete mode 100644 src/plugins/vxeTable/renderer/preview.tsx

diff --git a/README.md b/README.md
index ea6214cc..503cbe83 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,6 @@
 | [TypeScript](https://www.typescriptlang.org/docs/)                   | JavaScript 的超集   | 4.9.5  |
 | [pinia](https://pinia.vuejs.org/)                                    | Vue 存储库 替代 vuex5 | 2.0.33 |
 | [vueuse](https://vueuse.org/)                                        | 常用工具集            | 9.13.0 |
-| [vxe-table](https://vxetable.cn/)                                    | Vue 最强表单         | 4.3.10  |
 | [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.2.2  |
 | [vue-router](https://router.vuejs.org/)                              | Vue 路由           | 4.1.6  |
 | [windicss](https://cn.windicss.org/)                                 | 下一代工具优先的 CSS 框架  | 3.5.6  |
diff --git a/build/vite/optimize.ts b/build/vite/optimize.ts
index 3d90dbac..f7a10eb9 100644
--- a/build/vite/optimize.ts
+++ b/build/vite/optimize.ts
@@ -18,10 +18,6 @@ const include = [
   'lodash-es',
   'nprogress',
   'animate.css',
-  'vxe-table',
-  'vxe-table/es/style',
-  'vxe-table/lib/locale/lang/zh-CN',
-  'vxe-table/lib/locale/lang/en-US',
   'web-storage-cache',
   '@iconify/iconify',
   '@vueuse/core',
diff --git a/package.json b/package.json
index 86d24520..8293eeb7 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "vue-router": "^4.1.6",
     "vue-types": "^5.0.2",
     "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.3.11",
     "web-storage-cache": "^1.1.1",
     "xe-utils": "^3.5.7",
     "xml-js": "^1.6.11"
diff --git a/src/components/XModal/index.ts b/src/components/XModal/index.ts
deleted file mode 100644
index 65a72bd7..00000000
--- a/src/components/XModal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import XModal from './src/XModal.vue'
-
-export { XModal }
diff --git a/src/components/XModal/src/XModal.vue b/src/components/XModal/src/XModal.vue
deleted file mode 100644
index 95b9f4be..00000000
--- a/src/components/XModal/src/XModal.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { propTypes } from '@/utils/propTypes'
-const slots = useSlots()
-
-const props = defineProps({
-  id: propTypes.string.def('model_1'),
-  modelValue: propTypes.bool.def(false),
-  fullscreen: propTypes.bool.def(false),
-  loading: propTypes.bool.def(false),
-  title: propTypes.string.def('弹窗'),
-  width: propTypes.string.def('40%'),
-  height: propTypes.string,
-  minWidth: propTypes.string.def('460'),
-  minHeight: propTypes.string.def('320'),
-  showFooter: propTypes.bool.def(true),
-  maskClosable: propTypes.bool.def(false),
-  escClosable: propTypes.bool.def(false)
-})
-
-const getBindValue = computed(() => {
-  const attrs = useAttrs()
-  const obj = { ...attrs, ...props }
-  return obj
-})
-</script>
-
-<template>
-  <vxe-modal v-bind="getBindValue" destroy-on-close show-zoom resize transfer>
-    <template v-if="slots.header" #header>
-      <slot name="header"></slot>
-    </template>
-    <ElScrollbar>
-      <template v-if="slots.default" #default>
-        <slot name="default"></slot>
-      </template>
-    </ElScrollbar>
-    <template v-if="slots.corner" #corner>
-      <slot name="corner"></slot>
-    </template>
-    <template v-if="slots.footer" #footer>
-      <slot name="footer"></slot>
-    </template>
-  </vxe-modal>
-</template>
diff --git a/src/components/XTable/index.ts b/src/components/XTable/index.ts
deleted file mode 100644
index 4abe968e..00000000
--- a/src/components/XTable/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import XTable from './src/XTable.vue'
-
-export { XTable }
diff --git a/src/components/XTable/src/XTable.vue b/src/components/XTable/src/XTable.vue
deleted file mode 100644
index fac292d4..00000000
--- a/src/components/XTable/src/XTable.vue
+++ /dev/null
@@ -1,442 +0,0 @@
-<template>
-  <VxeGrid v-bind="getProps" ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar">
-    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
-      <slot :name="item" v-bind="data || {}"></slot>
-    </template>
-  </VxeGrid>
-</template>
-<script setup lang="ts" name="XTable">
-import { PropType } from 'vue'
-import { SizeType, VxeGridInstance } from 'vxe-table'
-import { useAppStore } from '@/store/modules/app'
-import { useDesign } from '@/hooks/web/useDesign'
-import { XTableProps } from './type'
-import { isBoolean, isFunction } from '@/utils/is'
-import styleCss from './style/dark.scss?inline'
-import download from '@/utils/download'
-
-const { t } = useI18n()
-const message = useMessage() // 消息弹窗
-
-const appStore = useAppStore()
-
-const { getPrefixCls } = useDesign()
-const prefixCls = getPrefixCls('x-vxe-table')
-
-const attrs = useAttrs()
-const emit = defineEmits(['register'])
-const removeStyles = () => {
-  const filename = 'cssTheme'
-  //移除引入的文件名
-  const targetelement = 'style'
-  const targetattr = 'id'
-  const allsuspects = document.getElementsByTagName(targetelement)
-  for (let i = allsuspects.length; i >= 0; i--) {
-    if (
-      allsuspects[i] &&
-      allsuspects[i].getAttribute(targetattr) != null &&
-      allsuspects[i].getAttribute(targetattr)?.indexOf(filename) != -1
-    ) {
-      console.log(allsuspects[i], 'node')
-      allsuspects[i].parentNode?.removeChild(allsuspects[i])
-    }
-  }
-}
-const reImport = () => {
-  const head = document.getElementsByTagName('head')[0]
-  const style = document.createElement('style')
-  style.innerText = styleCss
-  style.id = 'cssTheme'
-  head.appendChild(style)
-}
-watch(
-  () => appStore.getIsDark,
-  () => {
-    if (appStore.getIsDark) {
-      reImport()
-    }
-    if (!appStore.getIsDark) {
-      removeStyles()
-    }
-  },
-  { immediate: true }
-)
-
-const currentSize = computed(() => {
-  let resSize: SizeType = 'small'
-  const appsize = appStore.getCurrentSize
-  switch (appsize) {
-    case 'large':
-      resSize = 'medium'
-      break
-    case 'default':
-      resSize = 'small'
-      break
-    case 'small':
-      resSize = 'mini'
-      break
-  }
-  return resSize
-})
-
-const props = defineProps({
-  options: {
-    type: Object as PropType<XTableProps>,
-    default: () => {}
-  }
-})
-const innerProps = ref<Partial<XTableProps>>()
-
-const getProps = computed(() => {
-  const options = innerProps.value || props.options
-  options.size = currentSize as any
-  options.height = 700
-  getOptionInitConfig(options)
-  getColumnsConfig(options)
-  getProxyConfig(options)
-  getPageConfig(options)
-  getToolBarConfig(options)
-  // console.log(options);
-  return {
-    ...options,
-    ...attrs
-  }
-})
-
-const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-
-let proxyForm = false
-
-const getOptionInitConfig = (options: XTableProps) => {
-  options.size = currentSize as any
-  options.rowConfig = {
-    isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
-    isHover: true // 当鼠标移到行时，是否要高亮当前行
-  }
-}
-
-// columns
-const getColumnsConfig = (options: XTableProps) => {
-  const { allSchemas } = options
-  if (!allSchemas) return
-  if (allSchemas.printSchema) {
-    options.printConfig = {
-      columns: allSchemas.printSchema
-    }
-  }
-  if (allSchemas.formSchema) {
-    proxyForm = true
-    options.formConfig = {
-      enabled: true,
-      titleWidth: 110,
-      titleAlign: 'right',
-      items: allSchemas.searchSchema
-    }
-  }
-  if (allSchemas.tableSchema) {
-    options.columns = allSchemas.tableSchema
-  }
-}
-
-// 动态请求
-const getProxyConfig = (options: XTableProps) => {
-  const { getListApi, proxyConfig, data, isList } = options
-  if (proxyConfig || data) return
-  if (getListApi && isFunction(getListApi)) {
-    if (!isList) {
-      options.proxyConfig = {
-        seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
-        form: proxyForm, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
-        props: { result: 'list', total: 'total' },
-        ajax: {
-          query: async ({ page, form }) => {
-            let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
-            if (options.params) {
-              queryParams = Object.assign(queryParams, options.params)
-            }
-            if (!options?.treeConfig) {
-              queryParams.pageSize = page.pageSize
-              queryParams.pageNo = page.currentPage
-            }
-            return new Promise(async (resolve) => {
-              resolve(await getListApi(queryParams))
-            })
-          },
-          delete: ({ body }) => {
-            return new Promise(async (resolve) => {
-              if (options.deleteApi) {
-                resolve(await options.deleteApi(JSON.stringify(body)))
-              } else {
-                Promise.reject('未设置deleteApi')
-              }
-            })
-          },
-          queryAll: ({ form }) => {
-            const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
-            return new Promise(async (resolve) => {
-              if (options.getAllListApi) {
-                resolve(await options.getAllListApi(queryParams))
-              } else {
-                resolve(await getListApi(queryParams))
-              }
-            })
-          }
-        }
-      }
-    } else {
-      options.proxyConfig = {
-        seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
-        form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
-        props: { result: 'data' },
-        ajax: {
-          query: ({ form }) => {
-            let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
-            if (options?.params) {
-              queryParams = Object.assign(queryParams, options.params)
-            }
-            return new Promise(async (resolve) => {
-              resolve(await getListApi(queryParams))
-            })
-          }
-        }
-      }
-    }
-  }
-  if (options.exportListApi) {
-    options.exportConfig = {
-      filename: options?.exportName,
-      // 默认选中类型
-      type: 'csv',
-      // 自定义数据量列表
-      modes: options?.getAllListApi ? ['current', 'all'] : ['current'],
-      columns: options?.allSchemas?.printSchema
-    }
-  }
-}
-
-// 分页
-const getPageConfig = (options: XTableProps) => {
-  const { pagination, pagerConfig, treeConfig, isList } = options
-  if (isList) return
-  if (treeConfig) {
-    options.treeConfig = options.treeConfig
-    return
-  }
-  if (pagerConfig) return
-  if (pagination) {
-    if (isBoolean(pagination)) {
-      options.pagerConfig = {
-        border: false, // 带边框
-        background: false, // 带背景颜色
-        perfect: false, // 配套的样式
-        pageSize: 10, // 每页大小
-        pagerCount: 7, // 显示页码按钮的数量
-        autoHidden: false, // 当只有一页时自动隐藏
-        pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
-        layouts: [
-          'PrevJump',
-          'PrevPage',
-          'JumpNumber',
-          'NextPage',
-          'NextJump',
-          'Sizes',
-          'FullJump',
-          'Total'
-        ]
-      }
-      return
-    }
-    options.pagerConfig = pagination
-  } else {
-    if (pagination != false) {
-      options.pagerConfig = {
-        border: false, // 带边框
-        background: false, // 带背景颜色
-        perfect: false, // 配套的样式
-        pageSize: 10, // 每页大小
-        pagerCount: 7, // 显示页码按钮的数量
-        autoHidden: false, // 当只有一页时自动隐藏
-        pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
-        layouts: [
-          'Sizes',
-          'PrevJump',
-          'PrevPage',
-          'Number',
-          'NextPage',
-          'NextJump',
-          'FullJump',
-          'Total'
-        ]
-      }
-    }
-  }
-}
-
-// tool bar
-const getToolBarConfig = (options: XTableProps) => {
-  const { toolBar, toolbarConfig, topActionSlots } = options
-  if (toolbarConfig) return
-  if (toolBar) {
-    if (!isBoolean(toolBar)) {
-      console.info(2)
-      options.toolbarConfig = toolBar
-      return
-    }
-  } else if (topActionSlots != false) {
-    options.toolbarConfig = {
-      slots: { buttons: 'toolbar_buttons' }
-    }
-  } else {
-    options.toolbarConfig = {
-      enabled: true
-    }
-  }
-}
-
-// 刷新列表
-const reload = () => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  g.commitProxy('query')
-}
-
-// 删除
-const deleteData = async (id: string | number) => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  const options = innerProps.value || props.options
-  if (!options.deleteApi) {
-    console.error('未传入delListApi')
-    return
-  }
-  return new Promise(async () => {
-    message.delConfirm().then(async () => {
-      await (options?.deleteApi && options?.deleteApi(id))
-      message.success(t('common.delSuccess'))
-      // 刷新列表
-      reload()
-    })
-  })
-}
-
-// 批量删除
-const deleteBatch = async () => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  const rows = g.getCheckboxRecords() || g.getRadioRecord()
-  let ids: any[] = []
-  if (rows.length == 0) {
-    message.error('请选择数据')
-    return
-  } else {
-    rows.forEach((row) => {
-      ids.push(row.id)
-    })
-  }
-  const options = innerProps.value || props.options
-  if (options.deleteListApi) {
-    return new Promise(async () => {
-      message.delConfirm().then(async () => {
-        await (options?.deleteListApi && options?.deleteListApi(ids))
-        message.success(t('common.delSuccess'))
-        // 刷新列表
-        reload()
-      })
-    })
-  } else if (options.deleteApi) {
-    return new Promise(async () => {
-      message.delConfirm().then(async () => {
-        ids.forEach(async (id) => {
-          await (options?.deleteApi && options?.deleteApi(id))
-        })
-        message.success(t('common.delSuccess'))
-        // 刷新列表
-        reload()
-      })
-    })
-  } else {
-    console.error('未传入delListApi')
-    return
-  }
-}
-
-// 导出
-const exportList = async (fileName?: string) => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  const options = innerProps.value || props.options
-  if (!options?.exportListApi) {
-    console.error('未传入exportListApi')
-    return
-  }
-  const queryParams = Object.assign({}, JSON.parse(JSON.stringify(g.getProxyInfo()?.form)))
-  message.exportConfirm().then(async () => {
-    const res = await (options?.exportListApi && options?.exportListApi(queryParams))
-    download.excel(res as unknown as Blob, fileName ? fileName : 'excel.xls')
-  })
-}
-
-// 获取查询参数
-const getSearchData = () => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  const queryParams = Object.assign({}, JSON.parse(JSON.stringify(g.getProxyInfo()?.form)))
-  return queryParams
-}
-
-// 获取当前列
-const getCurrentColumn = () => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  return g.getCurrentColumn()
-}
-
-// 获取当前选中列，redio
-const getRadioRecord = () => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  return g.getRadioRecord(false)
-}
-
-// 获取当前选中列，checkbox
-const getCheckboxRecords = () => {
-  const g = unref(xGrid)
-  if (!g) {
-    return
-  }
-  return g.getCheckboxRecords(false)
-}
-const setProps = (prop: Partial<XTableProps>) => {
-  innerProps.value = { ...unref(innerProps), ...prop }
-}
-
-defineExpose({ reload, Ref: xGrid, getSearchData, deleteData, exportList })
-emit('register', {
-  reload,
-  getSearchData,
-  setProps,
-  deleteData,
-  deleteBatch,
-  exportList,
-  getCurrentColumn,
-  getRadioRecord,
-  getCheckboxRecords
-})
-</script>
-<style lang="scss">
-@import './style/index.scss';
-</style>
diff --git a/src/components/XTable/src/style/dark.scss b/src/components/XTable/src/style/dark.scss
deleted file mode 100644
index d981b041..00000000
--- a/src/components/XTable/src/style/dark.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-// 修改样式变量
-//@import 'vxe-table/styles/variable.scss';
-
-/*font*/
-$vxe-font-color: #e5e7eb;
-// $vxe-font-size: 14px !default;
-// $vxe-font-size-medium: 16px !default;
-// $vxe-font-size-small: 14px !default;
-// $vxe-font-size-mini: 12px !default;
-
-/*color*/
-$vxe-primary-color: #409eff !default;
-$vxe-success-color: #67c23a !default;
-$vxe-info-color: #909399 !default;
-$vxe-warning-color: #e6a23c !default;
-$vxe-danger-color: #f56c6c !default;
-$vxe-disabled-color: #bfbfbf !default;
-$vxe-primary-disabled-color: #c0c4cc !default;
-
-/*loading*/
-$vxe-loading-color: $vxe-primary-color !default;
-$vxe-loading-background-color: #1d1e1f !default;
-$vxe-loading-z-index: 999 !default;
-
-/*icon*/
-$vxe-icon-font-family: Verdana, Arial, Tahoma !default;
-$vxe-icon-background-color: #e5e7eb !default;
-
-/*toolbar*/
-$vxe-toolbar-background-color: #1d1e1f !default;
-$vxe-toolbar-button-border: #dcdfe6 !default;
-$vxe-toolbar-custom-active-background-color: #d9dadb !default;
-$vxe-toolbar-panel-background-color: #e5e7eb !default;
-
-$vxe-table-font-color: #e5e7eb;
-$vxe-table-header-background-color: #1d1e1f;
-$vxe-table-body-background-color: #141414;
-$vxe-table-row-striped-background-color: #1d1d1d;
-$vxe-table-row-hover-background-color: #1d1e1f;
-$vxe-table-row-hover-striped-background-color: #1e1e1e;
-$vxe-table-footer-background-color: #1d1e1f;
-$vxe-table-row-current-background-color: #302d2d;
-$vxe-table-column-current-background-color: #302d2d;
-$vxe-table-column-hover-background-color: #302d2d;
-$vxe-table-row-hover-current-background-color: #302d2d;
-$vxe-table-row-checkbox-checked-background-color: #3e3c37 !default;
-$vxe-table-row-hover-checkbox-checked-background-color: #615a4a !default;
-$vxe-table-menu-background-color: #1d1e1f;
-$vxe-table-border-width: 1px !default;
-$vxe-table-border-color: #4c4d4f !default;
-$vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px rgba(0, 0, 0, 0.12) !default;
-$vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px rgba(0, 0, 0, 0.12) !default;
-
-$vxe-form-background-color: #141414;
-
-/*pager*/
-$vxe-pager-background-color: #1d1e1f !default;
-$vxe-pager-perfect-background-color: #262727 !default;
-$vxe-pager-perfect-button-background-color: #a7a3a3 !default;
-
-$vxe-input-background-color: #141414;
-$vxe-input-border-color: #4c4d4f !default;
-
-$vxe-select-option-hover-background-color: #262626 !default;
-$vxe-select-panel-background-color: #141414 !default;
-$vxe-select-empty-color: #262626 !default;
-$vxe-optgroup-title-color: #909399 !default;
-
-/*button*/
-$vxe-button-default-background-color: #262626;
-$vxe-button-dropdown-panel-background-color: #141414;
-
-/*modal*/
-$vxe-modal-header-background-color: #141414;
-$vxe-modal-body-background-color: #141414;
-$vxe-modal-border-color: #3b3b3b;
-
-/*pulldown*/
-$vxe-pulldown-panel-background-color: #262626 !default;
-
-@import 'vxe-table/styles/index.scss';
diff --git a/src/components/XTable/src/style/index.scss b/src/components/XTable/src/style/index.scss
deleted file mode 100644
index e37af37a..00000000
--- a/src/components/XTable/src/style/index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// @import 'vxe-table/styles/variable.scss';
-// @import 'vxe-table/styles/modules.scss';
-// @import './theme/light.scss';
-i {
-  border-color: initial;
-}
diff --git a/src/components/XTable/src/style/light.scss b/src/components/XTable/src/style/light.scss
deleted file mode 100644
index f2f1309f..00000000
--- a/src/components/XTable/src/style/light.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// 修改样式变量
-// /*font*/
-// $vxe-font-size: 12px !default;
-// $vxe-font-size-medium: 16px !default;
-// $vxe-font-size-small: 14px !default;
-// $vxe-font-size-mini: 12px !default;
-/*color*/
-$vxe-primary-color: #409eff !default;
-$vxe-success-color: #67c23a !default;
-$vxe-info-color: #909399 !default;
-$vxe-warning-color: #e6a23c !default;
-$vxe-danger-color: #f56c6c !default;
-$vxe-disabled-color: #bfbfbf !default;
-$vxe-primary-disabled-color: #c0c4cc !default;
-
-@import 'vxe-table/styles/index.scss';
diff --git a/src/components/XTable/src/type.ts b/src/components/XTable/src/type.ts
deleted file mode 100644
index 5e5251e4..00000000
--- a/src/components/XTable/src/type.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CrudSchema } from '@/hooks/web/useCrudSchemas'
-import type { VxeGridProps, VxeGridPropTypes, VxeTablePropTypes } from 'vxe-table'
-
-export type XTableProps<D = any> = VxeGridProps<D> & {
-  allSchemas?: CrudSchema
-  height?: number // 高度 默认730
-  topActionSlots?: boolean // 是否开启表格内顶部操作栏插槽
-  treeConfig?: VxeTablePropTypes.TreeConfig // 树形表单配置
-  isList?: boolean // 是否不带分页的list
-  getListApi?: Function // 获取列表接口
-  getAllListApi?: Function // 获取全部数据接口 用于 vxe 导出
-  deleteApi?: Function // 删除接口
-  deleteListApi?: Function // 批量删除接口
-  exportListApi?: Function // 导出接口
-  exportName?: string // 导出文件夹名称
-  params?: any // 其他查询参数
-  pagination?: boolean | VxeGridPropTypes.PagerConfig // 分页配置参数
-  toolBar?: boolean | VxeGridPropTypes.ToolbarConfig // 右侧工具栏配置参数
-}
-export type XColumns = VxeGridPropTypes.Columns
-
-export type VxeTableColumn = {
-  field: string
-  title?: string
-  children?: VxeTableColumn[]
-} & Recordable
diff --git a/src/components/index.ts b/src/components/index.ts
index 19b2aac6..35df3da6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,8 +3,6 @@ import { Icon } from './Icon'
 import { Form } from '@/components/Form'
 import { Table } from '@/components/Table'
 import { Search } from '@/components/Search'
-import { XModal } from '@/components/XModal'
-import { XTable } from '@/components/XTable'
 import { XButton, XTextButton } from '@/components/XButton'
 import { DictTag } from '@/components/DictTag'
 import { ContentWrap } from '@/components/ContentWrap'
@@ -15,8 +13,6 @@ export const setupGlobCom = (app: App<Element>): void => {
   app.component('Form', Form)
   app.component('Table', Table)
   app.component('Search', Search)
-  app.component('XModal', XModal)
-  app.component('XTable', XTable)
   app.component('XButton', XButton)
   app.component('XTextButton', XTextButton)
   app.component('DictTag', DictTag)
diff --git a/src/hooks/web/useVxeCrudSchemas.ts b/src/hooks/web/useVxeCrudSchemas.ts
deleted file mode 100644
index 5c765d4f..00000000
--- a/src/hooks/web/useVxeCrudSchemas.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-import {
-  FormItemRenderOptions,
-  VxeColumnPropTypes,
-  VxeFormItemProps,
-  VxeGridPropTypes,
-  VxeTableDefines
-} from 'vxe-table'
-import { eachTree } from 'xe-utils'
-
-import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict'
-import { FormSchema } from '@/types/form'
-import { VxeTableColumn } from '@/types/table'
-import { ComponentOptions } from '@/types/components'
-import { DescriptionsSchema } from '@/types/descriptions'
-
-export type VxeCrudSchema = {
-  primaryKey?: string // 主键ID
-  primaryTitle?: string // 主键标题 默认为序号
-  primaryType?: VxeColumnPropTypes.Type | 'id' // 还支持 "id" | "seq" | "radio" | "checkbox" | "expand" | "html" | null
-  firstColumn?: VxeColumnPropTypes.Type // 第一列显示类型
-  action?: boolean // 是否开启表格内右侧操作栏插槽
-  actionTitle?: string // 操作栏标题 默认为操作
-  actionWidth?: string // 操作栏插槽宽度,一般2个字带图标 text 类型按钮 50-70
-  columns: VxeCrudColumns[]
-  searchSpan?: number
-}
-type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
-  field: string // 字段名
-  title?: string // 标题名
-  formatter?: VxeColumnPropTypes.Formatter // vxe formatter格式化
-  isSearch?: boolean // 是否在查询显示
-  search?: CrudSearchParams // 查询的详细配置
-  isTable?: boolean // 是否在列表显示
-  table?: CrudTableParams // 列表的详细配置
-  isForm?: boolean // 是否在表单显示
-  form?: CrudFormParams // 表单的详细配置
-  isDetail?: boolean // 是否在详情显示
-  detail?: CrudDescriptionsParams // 详情的详细配置
-  print?: CrudPrintParams // vxe 打印的字段
-  children?: VxeCrudColumns[] // 子级
-  dictType?: string // 字典类型
-  dictClass?: 'string' | 'number' | 'boolean' // 字典数据类型 string | number | boolean
-}
-
-type CrudSearchParams = {
-  // 是否显示在查询项
-  show?: boolean
-} & Omit<VxeFormItemProps, 'field'>
-
-type CrudTableParams = {
-  // 是否显示表头
-  show?: boolean
-} & Omit<VxeTableDefines.ColumnOptions, 'field'>
-
-type CrudFormParams = {
-  // 是否显示表单项
-  show?: boolean
-} & Omit<FormSchema, 'field'>
-
-type CrudDescriptionsParams = {
-  // 是否显示表单项
-  show?: boolean
-} & Omit<DescriptionsSchema, 'field'>
-
-type CrudPrintParams = {
-  // 是否显示打印项
-  show?: boolean
-} & Omit<VxeTableDefines.ColumnInfo[], 'field'>
-
-export type VxeAllSchemas = {
-  searchSchema: VxeFormItemProps[]
-  tableSchema: VxeGridPropTypes.Columns
-  formSchema: FormSchema[]
-  detailSchema: DescriptionsSchema[]
-  printSchema: VxeTableDefines.ColumnInfo[]
-}
-
-// 过滤所有结构
-export const useVxeCrudSchemas = (
-  crudSchema: VxeCrudSchema
-): {
-  allSchemas: VxeAllSchemas
-} => {
-  // 所有结构数据
-  const allSchemas = reactive<VxeAllSchemas>({
-    searchSchema: [],
-    tableSchema: [],
-    formSchema: [],
-    detailSchema: [],
-    printSchema: []
-  })
-
-  const searchSchema = filterSearchSchema(crudSchema)
-  allSchemas.searchSchema = searchSchema || []
-
-  const tableSchema = filterTableSchema(crudSchema)
-  allSchemas.tableSchema = tableSchema || []
-
-  const formSchema = filterFormSchema(crudSchema)
-  allSchemas.formSchema = formSchema
-
-  const detailSchema = filterDescriptionsSchema(crudSchema)
-  allSchemas.detailSchema = detailSchema
-
-  const printSchema = filterPrintSchema(crudSchema)
-  allSchemas.printSchema = printSchema
-
-  return {
-    allSchemas
-  }
-}
-
-// 过滤 Search 结构
-const filterSearchSchema = (crudSchema: VxeCrudSchema): VxeFormItemProps[] => {
-  const { t } = useI18n()
-  const span = crudSchema.searchSpan ? crudSchema.searchSpan : 6
-  const spanLength = 24 / span
-  const searchSchema: VxeFormItemProps[] = []
-  eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
-    // 判断是否显示
-    if (schemaItem?.isSearch || schemaItem.search?.show) {
-      let itemRenderName = schemaItem?.search?.itemRender?.name || '$input'
-      const options: any[] = []
-      let itemRender: FormItemRenderOptions = {}
-
-      if (schemaItem.dictType) {
-        const allOptions = { label: '全部', value: '' }
-        options.push(allOptions)
-        getDictOptions(schemaItem.dictType).forEach((dict) => {
-          options.push(dict)
-        })
-        itemRender.options = options
-        if (!schemaItem?.search?.itemRender?.name) itemRenderName = '$select'
-        itemRender = {
-          name: itemRenderName,
-          options: options,
-          props: { placeholder: t('common.selectText') }
-        }
-      } else {
-        if (schemaItem.search?.itemRender) {
-          itemRender = schemaItem.search.itemRender
-        } else {
-          itemRender = {
-            name: itemRenderName,
-            props:
-              itemRenderName == '$input'
-                ? { placeholder: t('common.inputText') }
-                : { placeholder: t('common.selectText') }
-          }
-        }
-      }
-      const searchSchemaItem = {
-        // 默认为 input
-        folding: searchSchema.length > spanLength - 1,
-        itemRender: schemaItem.itemRender ? schemaItem.itemRender : itemRender,
-        field: schemaItem.field,
-        title: schemaItem.search?.title || schemaItem.title,
-        slots: schemaItem.search?.slots,
-        span: span
-      }
-      searchSchema.push(searchSchemaItem)
-    }
-  })
-  if (searchSchema.length > 0) {
-    // 添加搜索按钮
-    const buttons: VxeFormItemProps = {
-      span: 24,
-      align: 'right',
-      collapseNode: searchSchema.length > spanLength,
-      itemRender: {
-        name: '$buttons',
-        children: [
-          { props: { type: 'submit', content: t('common.query'), status: 'primary' } },
-          { props: { type: 'reset', content: t('common.reset') } }
-        ]
-      }
-    }
-    searchSchema.push(buttons)
-  }
-  return searchSchema
-}
-
-// 过滤 table 结构
-const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns => {
-  const { t } = useI18n()
-  const tableSchema: VxeGridPropTypes.Columns = []
-  // 第一列
-  if (crudSchema.firstColumn) {
-    const tableSchemaItem = {
-      type: crudSchema.firstColumn,
-      width: '50px'
-    }
-    tableSchema.push(tableSchemaItem)
-  }
-  // 主键ID
-  if (crudSchema.primaryKey && crudSchema.primaryType) {
-    const primaryTitle = crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index')
-    const primaryWidth = primaryTitle.length * 30 + 'px'
-
-    let tableSchemaItem: { [x: string]: any } = {
-      title: primaryTitle,
-      field: crudSchema.primaryKey,
-      width: primaryWidth
-    }
-    if (crudSchema.primaryType != 'id') {
-      tableSchemaItem = {
-        ...tableSchemaItem,
-        type: crudSchema.primaryType
-      }
-    }
-    tableSchema.push(tableSchemaItem)
-  }
-
-  eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
-    // 判断是否显示
-    if (schemaItem?.isTable !== false && schemaItem?.table?.show !== false) {
-      const tableSchemaItem = {
-        ...schemaItem.table,
-        field: schemaItem.field,
-        title: schemaItem.table?.title || schemaItem.title,
-        minWidth: '80px'
-      }
-      tableSchemaItem.showOverflow = 'tooltip'
-      if (schemaItem?.formatter) {
-        tableSchemaItem.formatter = schemaItem.formatter
-        tableSchemaItem.width = tableSchemaItem.width ? tableSchemaItem.width : 160
-      }
-      if (schemaItem?.dictType) {
-        tableSchemaItem.cellRender = {
-          name: 'XDict',
-          content: schemaItem.dictType
-        }
-        tableSchemaItem.width = tableSchemaItem.width ? tableSchemaItem.width : 160
-      }
-
-      tableSchema.push(tableSchemaItem)
-    }
-  })
-  // 操作栏插槽
-  if (crudSchema.action && crudSchema.action == true) {
-    const tableSchemaItem = {
-      title: crudSchema.actionTitle ? crudSchema.actionTitle : t('table.action'),
-      field: 'actionbtns',
-      fixed: 'right' as unknown as VxeColumnPropTypes.Fixed,
-      width: crudSchema.actionWidth ? crudSchema.actionWidth : '200px',
-      slots: {
-        default: 'actionbtns_default'
-      }
-    }
-    tableSchema.push(tableSchemaItem)
-  }
-  return tableSchema
-}
-
-// 过滤 form 结构
-const filterFormSchema = (crudSchema: VxeCrudSchema): FormSchema[] => {
-  const formSchema: FormSchema[] = []
-
-  eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
-    // 判断是否显示
-    if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) {
-      // 默认为 input
-      let component = schemaItem?.form?.component || 'Input'
-      let defaultValue: any = ''
-      if (schemaItem.form?.value) {
-        defaultValue = schemaItem.form?.value
-      } else {
-        if (component === 'InputNumber') {
-          defaultValue = 0
-        }
-      }
-      let comonentProps = {}
-      if (schemaItem.dictType) {
-        const options: ComponentOptions[] = []
-        if (schemaItem.dictClass && schemaItem.dictClass === 'number') {
-          getIntDictOptions(schemaItem.dictType).forEach((dict) => {
-            options.push(dict)
-          })
-        } else if (schemaItem.dictClass && schemaItem.dictClass === 'boolean') {
-          getBoolDictOptions(schemaItem.dictType).forEach((dict) => {
-            options.push(dict)
-          })
-        } else {
-          getDictOptions(schemaItem.dictType).forEach((dict) => {
-            options.push(dict)
-          })
-        }
-        comonentProps = {
-          options: options
-        }
-        if (!(schemaItem.form && schemaItem.form.component)) component = 'Select'
-      }
-      const formSchemaItem = {
-        component: component,
-        componentProps: comonentProps,
-        value: defaultValue,
-        ...schemaItem.form,
-        field: schemaItem.field,
-        label: schemaItem.form?.label || schemaItem.title
-      }
-
-      formSchema.push(formSchemaItem)
-    }
-  })
-
-  return formSchema
-}
-
-// 过滤 descriptions 结构
-const filterDescriptionsSchema = (crudSchema: VxeCrudSchema): DescriptionsSchema[] => {
-  const descriptionsSchema: DescriptionsSchema[] = []
-
-  eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
-    // 判断是否显示
-    if (schemaItem?.isDetail !== false && schemaItem.detail?.show !== false) {
-      const descriptionsSchemaItem = {
-        ...schemaItem.detail,
-        field: schemaItem.field,
-        label: schemaItem.detail?.label || schemaItem.title
-      }
-      if (schemaItem.dictType) {
-        descriptionsSchemaItem.dictType = schemaItem.dictType
-      }
-      if (schemaItem.detail?.dateFormat || schemaItem.formatter == 'formatDate') {
-        // 优先使用 detail 下的配置，如果没有默认为 YYYY-MM-DD HH:mm:ss
-        descriptionsSchemaItem.dateFormat = schemaItem?.detail?.dateFormat
-          ? schemaItem?.detail?.dateFormat
-          : 'YYYY-MM-DD HH:mm:ss'
-      }
-
-      descriptionsSchema.push(descriptionsSchemaItem)
-    }
-  })
-
-  return descriptionsSchema
-}
-
-// 过滤 打印 结构
-const filterPrintSchema = (crudSchema: VxeCrudSchema): any[] => {
-  const printSchema: any[] = []
-
-  eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
-    // 判断是否显示
-    if (schemaItem?.print?.show !== false) {
-      const printSchemaItem = {
-        field: schemaItem.field
-      }
-
-      printSchema.push(printSchemaItem)
-    }
-  })
-
-  return printSchema
-}
diff --git a/src/hooks/web/useVxeGrid.ts b/src/hooks/web/useVxeGrid.ts
deleted file mode 100644
index 5ac07c86..00000000
--- a/src/hooks/web/useVxeGrid.ts
+++ /dev/null
@@ -1,264 +0,0 @@
-import { computed, nextTick, reactive } from 'vue'
-import { SizeType, VxeGridProps, VxeTablePropTypes } from 'vxe-table'
-import { useAppStore } from '@/store/modules/app'
-import { VxeAllSchemas } from './useVxeCrudSchemas'
-
-import download from '@/utils/download'
-
-const { t } = useI18n()
-const message = useMessage() // 消息弹窗
-
-interface UseVxeGridConfig<T = any> {
-  allSchemas: VxeAllSchemas
-  height?: number // 高度 默认730
-  topActionSlots?: boolean // 是否开启表格内顶部操作栏插槽
-  treeConfig?: VxeTablePropTypes.TreeConfig // 树形表单配置
-  isList?: boolean // 是否不带分页的list
-  getListApi: (option: any) => Promise<T> // 获取列表接口
-  getAllListApi?: (option: any) => Promise<T> // 获取全部数据接口 用于VXE导出
-  deleteApi?: (option: any) => Promise<T> // 删除接口
-  exportListApi?: (option: any) => Promise<T> // 导出接口
-  exportName?: string // 导出文件夹名称
-  queryParams?: any // 其他查询参数
-}
-
-const appStore = useAppStore()
-
-const currentSize = computed(() => {
-  let resSize: SizeType = 'small'
-  const appsize = appStore.getCurrentSize
-  switch (appsize) {
-    case 'large':
-      resSize = 'medium'
-      break
-    case 'default':
-      resSize = 'small'
-      break
-    case 'small':
-      resSize = 'mini'
-      break
-  }
-  return resSize
-})
-
-export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
-  /**
-   * grid options 初始化
-   */
-  const gridOptions = reactive<VxeGridProps<any>>({
-    loading: true,
-    size: currentSize as any,
-    height: config?.height ? config.height : 730,
-    rowConfig: {
-      isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
-      isHover: true // 当鼠标移到行时，是否要高亮当前行
-    },
-    toolbarConfig: {
-      slots:
-        !config?.topActionSlots && config?.topActionSlots != false
-          ? { buttons: 'toolbar_buttons' }
-          : {}
-    },
-    printConfig: {
-      columns: config?.allSchemas.printSchema
-    },
-    formConfig: {
-      enabled: true,
-      titleWidth: 100,
-      titleAlign: 'right',
-      items: config?.allSchemas.searchSchema
-    },
-    columns: config?.allSchemas.tableSchema,
-    proxyConfig: {
-      seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
-      form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
-      props: { result: 'list', total: 'total' },
-      ajax: {
-        query: ({ page, form }) => {
-          let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
-          if (config?.queryParams) {
-            queryParams = Object.assign(queryParams, config.queryParams)
-          }
-          if (!config?.treeConfig) {
-            queryParams.pageSize = page.pageSize
-            queryParams.pageNo = page.currentPage
-          }
-          gridOptions.loading = false
-          return new Promise(async (resolve) => {
-            resolve(await config?.getListApi(queryParams))
-          })
-        },
-        delete: ({ body }) => {
-          return new Promise(async (resolve) => {
-            if (config?.deleteApi) {
-              resolve(await config?.deleteApi(JSON.stringify(body)))
-            } else {
-              Promise.reject('未设置deleteApi')
-            }
-          })
-        },
-        queryAll: ({ form }) => {
-          const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
-          return new Promise(async (resolve) => {
-            if (config?.getAllListApi) {
-              resolve(await config?.getAllListApi(queryParams))
-            } else {
-              resolve(await config?.getListApi(queryParams))
-            }
-          })
-        }
-      }
-    },
-    exportConfig: {
-      filename: config?.exportName,
-      // 默认选中类型
-      type: 'csv',
-      // 自定义数据量列表
-      modes: config?.getAllListApi ? ['current', 'all'] : ['current'],
-      columns: config?.allSchemas.printSchema
-    }
-  })
-
-  if (config?.treeConfig) {
-    gridOptions.treeConfig = config.treeConfig
-  } else if (config?.isList) {
-    gridOptions.proxyConfig = {
-      seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
-      form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
-      props: { result: 'data' },
-      ajax: {
-        query: ({ form }) => {
-          let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
-          if (config?.queryParams) {
-            queryParams = Object.assign(queryParams, config.queryParams)
-          }
-          gridOptions.loading = false
-          return new Promise(async (resolve) => {
-            resolve(await config?.getListApi(queryParams))
-          })
-        }
-      }
-    }
-  } else {
-    gridOptions.pagerConfig = {
-      border: false, // 带边框
-      background: true, // 带背景颜色
-      perfect: false, // 配套的样式
-      pageSize: 10, // 每页大小
-      pagerCount: 7, // 显示页码按钮的数量
-      autoHidden: false, // 当只有一页时自动隐藏
-      pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
-      layouts: [
-        'PrevJump',
-        'PrevPage',
-        'JumpNumber',
-        'NextPage',
-        'NextJump',
-        'Sizes',
-        'FullJump',
-        'Total'
-      ]
-    }
-  }
-
-  /**
-   * 刷新列表
-   * @param ref
-   * @returns
-   */
-  const getList = async (ref) => {
-    if (!ref) {
-      console.error('未传入gridRef')
-      return
-    }
-    await nextTick()
-    ref.value.commitProxy('query')
-  }
-
-  // 获取查询参数
-  const getSearchData = async (ref) => {
-    if (!ref) {
-      console.error('未传入gridRef')
-      return
-    }
-    await nextTick()
-    const queryParams = Object.assign(
-      {},
-      JSON.parse(JSON.stringify(ref.value.getProxyInfo()?.form))
-    )
-    return queryParams
-  }
-
-  /**
-   * 删除
-   * @param ref
-   * @param ids rowid
-   * @returns
-   */
-  const deleteData = async (ref, ids: string | number) => {
-    if (!ref) {
-      console.error('未传入gridRef')
-      return
-    }
-    if (!config?.deleteApi) {
-      console.error('未传入delListApi')
-      return
-    }
-    await nextTick()
-    return new Promise(async () => {
-      message.delConfirm().then(async () => {
-        await (config?.deleteApi && config?.deleteApi(ids))
-        message.success(t('common.delSuccess'))
-        // 刷新列表
-        ref.value.commitProxy('query')
-      })
-    })
-  }
-  /**
-   * 导出
-   * @param ref
-   * @param fileName 文件名，默认excel.xls
-   * @returns
-   */
-  const exportList = async (ref, fileName?: string) => {
-    if (!ref) {
-      console.error('未传入gridRef')
-      return
-    }
-    if (!config?.exportListApi) {
-      console.error('未传入exportListApi')
-      return
-    }
-    await nextTick()
-    const queryParams = Object.assign(
-      {},
-      JSON.parse(JSON.stringify(ref.value?.getProxyInfo()?.form))
-    )
-    message.exportConfirm().then(async () => {
-      const res = await (config?.exportListApi && config?.exportListApi(queryParams))
-      download.excel(res as unknown as Blob, fileName ? fileName : 'excel.xls')
-    })
-  }
-  /**
-   * 表格最大/最小化
-   * @param ref
-   * @returns
-   */
-  const zoom = async (ref) => {
-    if (!ref) {
-      console.error('未传入gridRef')
-      return
-    }
-    await nextTick()
-    ref.value.zoom(!ref.value.isMaximized())
-  }
-
-  return {
-    gridOptions,
-    getList,
-    getSearchData,
-    deleteData,
-    exportList,
-    zoom
-  }
-}
diff --git a/src/hooks/web/useXTable.ts b/src/hooks/web/useXTable.ts
deleted file mode 100644
index 501f982b..00000000
--- a/src/hooks/web/useXTable.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { XTableProps } from '@/components/XTable/src/type'
-
-export interface tableMethod {
-  reload: () => void // 刷新表格
-  setProps: (props: XTableProps) => void
-  deleteData: (id: string | number) => void // 删除数据
-  deleteBatch: () => void // 批量删除
-  exportList: (fileName?: string) => void // 导出列表
-  getCurrentColumn: () => void // 获取当前列
-  getRadioRecord: () => void // 获取当前选中列，radio
-  getCheckboxRecords: () => void //获取当前选中列， checkbox
-}
-
-export const useXTable = (props: XTableProps): [Function, tableMethod] => {
-  const tableRef = ref<Nullable<tableMethod>>(null)
-
-  const register = (instance) => {
-    tableRef.value = instance
-    props && instance.setProps(props)
-  }
-  const getInstance = (): tableMethod => {
-    const table = unref(tableRef)
-    if (!table) {
-      console.error('表格实例不存在')
-    }
-    return table as tableMethod
-  }
-  const methods: tableMethod = {
-    reload: () => getInstance().reload(),
-    setProps: (props) => getInstance().setProps(props),
-    deleteData: (id: string | number) => getInstance().deleteData(id),
-    deleteBatch: () => getInstance().deleteBatch(),
-    exportList: (fileName?: string) => getInstance().exportList(fileName),
-    getCurrentColumn: () => getInstance().getCheckboxRecords(),
-    getRadioRecord: () => getInstance().getRadioRecord(),
-    getCheckboxRecords: () => getInstance().getCheckboxRecords()
-  }
-  return [register, methods]
-}
diff --git a/src/main.ts b/src/main.ts
index f24560b5..8dd1fff0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,9 +16,6 @@ import { setupGlobCom } from '@/components'
 // 引入 element-plus
 import { setupElementPlus } from '@/plugins/elementPlus'
 
-// 引入 vxe-table
-import { setupVxeTable } from '@/plugins/vxeTable'
-
 // 引入 form-create
 import { setupFormCreate } from '@/plugins/formCreate'
 
@@ -83,8 +80,6 @@ const setupAll = async () => {
 
   setupElementPlus(app)
 
-  setupVxeTable(app)
-
   setupFormCreate(app)
 
   setupRouter(app)
diff --git a/src/plugins/vxeTable/index.ts b/src/plugins/vxeTable/index.ts
deleted file mode 100644
index 6b61bb5c..00000000
--- a/src/plugins/vxeTable/index.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import { App } from 'vue'
-import XEUtils from 'xe-utils'
-import './renderer'
-import 'vxe-table/lib/style.css'
-import { i18n } from '@/plugins/vueI18n'
-import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
-import enUS from 'vxe-table/lib/locale/lang/en-US'
-import {
-  // 全局对象
-  VXETable,
-  // 表格功能
-  Filter,
-  Edit,
-  Menu,
-  Export,
-  Keyboard,
-  Validator,
-  // 可选组件
-  Icon,
-  Column,
-  Colgroup,
-  Grid,
-  Tooltip,
-  Toolbar,
-  Pager,
-  Form,
-  FormItem,
-  FormGather,
-  Checkbox,
-  CheckboxGroup,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Switch,
-  Input,
-  Select,
-  Optgroup,
-  Option,
-  Textarea,
-  Button,
-  Modal,
-  List,
-  Pulldown,
-  // 表格
-  Table
-} from 'vxe-table'
-
-// 全局默认参数
-VXETable.setup({
-  size: 'medium', // 全局尺寸
-  version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
-  zIndex: 1008, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
-  loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
-  height: 600,
-  table: {
-    border: 'inner', // default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
-    align: 'center', // eft（左对齐）, center（居中对齐）, right（右对齐）
-    autoResize: true, // 自动监听父元素的变化去重新计算表格
-    resizable: true, // 列是否允许拖动列宽调整大小
-    emptyText: '暂无数据', // 空表单
-    highlightHoverRow: true, // 自动监听父元素的变化去重新计算表格
-    treeConfig: {
-      rowField: 'id',
-      parentField: 'parentId',
-      children: 'children',
-      indent: 20,
-      showIcon: true
-    }
-  },
-  grid: {
-    toolbarConfig: {
-      refresh: true,
-      export: true,
-      print: true,
-      zoom: true,
-      custom: true
-    },
-    pagerConfig: {
-      border: false,
-      background: false,
-      autoHidden: true,
-      perfect: true,
-      pageSize: 10,
-      pagerCount: 7,
-      pageSizes: [5, 10, 15, 20, 50, 100, 200, 500],
-      layouts: [
-        'Sizes',
-        'PrevJump',
-        'PrevPage',
-        'Number',
-        'NextPage',
-        'NextJump',
-        'FullJump',
-        'Total'
-      ]
-    }
-  },
-  pager: {
-    background: false,
-    autoHidden: false,
-    perfect: true,
-    pageSize: 10,
-    pagerCount: 7,
-    pageSizes: [10, 15, 20, 50, 100],
-    layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
-  },
-  input: {
-    clearable: true
-  },
-  form: {
-    titleColon: true // 是否显示标题冒号
-  },
-  modal: {
-    width: 800, // 窗口的宽度
-    height: 600, // 窗口的高度
-    minWidth: 460,
-    minHeight: 320,
-    showZoom: true, // 标题是否标显示最大化与还原按钮
-    resize: true, // 是否允许窗口边缘拖动调整窗口大小
-    marginSize: 0, // 只对 resize 启用后有效，用于设置可拖动界限范围，如果为负数则允许拖动超出屏幕边界
-    remember: false, // 记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态
-    destroyOnClose: true, // 在窗口关闭时销毁内容
-    storage: false, // 是否启用 localStorage 本地保存，会将窗口拖动的状态保存到本地
-    transfer: true, // 是否将弹框容器插入于 body 内
-    showFooter: true, // 是否显示底部
-    mask: true, // 是否显示遮罩层
-    maskClosable: true, // 是否允许点击遮罩层关闭窗口
-    escClosable: true // 是否允许按 Esc 键关闭窗口
-  },
-  i18n: (key, args) => {
-    return unref(i18n.global.locale) === 'zh-CN'
-      ? XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
-      : XEUtils.toFormatString(XEUtils.get(enUS, key), args)
-  }
-})
-// 自定义全局的格式化处理函数
-VXETable.formats.mixin({
-  // 格式精简日期，默认 yyyy-MM-dd HH:mm:ss
-  formatDay({ cellValue }, format) {
-    if (cellValue != null) {
-      return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd')
-    } else {
-      return ''
-    }
-  },
-  // 格式完整日期，默认 yyyy-MM-dd HH:mm:ss
-  formatDate({ cellValue }, format) {
-    if (cellValue != null) {
-      return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')
-    } else {
-      return ''
-    }
-  },
-  // 四舍五入金额，每隔3位逗号分隔，默认2位数
-  formatAmount({ cellValue }, digits = 2) {
-    return XEUtils.commafy(Number(cellValue), { digits })
-  },
-  // 格式化银行卡，默认每4位空格隔开
-  formatBankcard({ cellValue }) {
-    return XEUtils.commafy(XEUtils.toValueString(cellValue), { spaceNumber: 4, separator: ' ' })
-  },
-  // 四舍五入,默认两位数
-  formatFixedNumber({ cellValue }, digits = 2) {
-    return XEUtils.toFixed(XEUtils.round(cellValue, digits), digits)
-  },
-  // 向下舍入,默认两位数
-  formatCutNumber({ cellValue }, digits = 2) {
-    return XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits)
-  },
-  // 格式化图片，将图片链接转换为html标签
-  formatImg({ cellValue }) {
-    return '<img height="40" src="' + cellValue + '"> '
-  },
-  // 格式化文件大小
-  formatSize({ cellValue }, digits = 0) {
-    const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-    const srcSize = parseFloat(cellValue)
-    const index = Math.floor(Math.log(srcSize) / Math.log(1024))
-    const size = srcSize / Math.pow(1024, index)
-    return XEUtils.toFixed(XEUtils.floor(size, 2), 2) + ' ' + unitArr[digits]
-  }
-})
-export const setupVxeTable = (app: App<Element>) => {
-  // 表格功能
-  app.use(Filter).use(Edit).use(Menu).use(Export).use(Keyboard).use(Validator)
-
-  // 可选组件
-  app
-    .use(Icon)
-    .use(Column)
-    .use(Colgroup)
-    .use(Grid)
-    .use(Tooltip)
-    .use(Toolbar)
-    .use(Pager)
-    .use(Form)
-    .use(FormItem)
-    .use(FormGather)
-    .use(Checkbox)
-    .use(CheckboxGroup)
-    .use(Radio)
-    .use(RadioGroup)
-    .use(RadioButton)
-    .use(Switch)
-    .use(Input)
-    .use(Select)
-    .use(Optgroup)
-    .use(Option)
-    .use(Textarea)
-    .use(Button)
-    .use(Modal)
-    .use(List)
-    .use(Pulldown)
-
-    // 安装表格
-    .use(Table)
-
-  // 给 vue 实例挂载内部对象，例如：
-  // app.config.globalProperties.$XModal = VXETable.modal
-  // app.config.globalProperties.$XPrint = VXETable.print
-  // app.config.globalProperties.$XSaveFile = VXETable.saveFile
-  // app.config.globalProperties.$XReadFile = VXETable.readFile
-}
diff --git a/src/plugins/vxeTable/renderer/dataPicker.tsx b/src/plugins/vxeTable/renderer/dataPicker.tsx
deleted file mode 100644
index 6a1c1d8f..00000000
--- a/src/plugins/vxeTable/renderer/dataPicker.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ElDatePicker } from 'element-plus'
-import { VXETable } from 'vxe-table'
-
-// 日期区间选择渲染
-VXETable.renderer.add('XDataPicker', {
-  // 默认显示模板
-  renderItemContent(renderOpts, params) {
-    const { data, field } = params
-    const { content } = renderOpts
-    return (
-      <ElDatePicker
-        v-model={data[field]}
-        style="width: 100%"
-        type={content ? (content as any) : 'datetime'}
-        value-format="YYYY-MM-DD HH:mm:ss"
-        clearable
-      ></ElDatePicker>
-    )
-  }
-})
diff --git a/src/plugins/vxeTable/renderer/dataTimeRangePicker.tsx b/src/plugins/vxeTable/renderer/dataTimeRangePicker.tsx
deleted file mode 100644
index d6508d2c..00000000
--- a/src/plugins/vxeTable/renderer/dataTimeRangePicker.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ElDatePicker } from 'element-plus'
-import { VXETable } from 'vxe-table'
-
-// 日期区间选择渲染
-VXETable.renderer.add('XDataTimePicker', {
-  // 默认显示模板
-  renderItemContent(renderOpts, params) {
-    const { t } = useI18n()
-    const { data, field } = params
-    const { content } = renderOpts
-    return (
-      <ElDatePicker
-        v-model={data[field]}
-        style="width: 100%"
-        type={content ? (content as any) : 'datetimerange'}
-        value-format="YYYY-MM-DD HH:mm:ss"
-        range-separator="-"
-        start-placeholder={t('common.startTimeText')}
-        end-placeholder={t('common.endTimeText')}
-      ></ElDatePicker>
-    )
-  }
-})
diff --git a/src/plugins/vxeTable/renderer/dict.tsx b/src/plugins/vxeTable/renderer/dict.tsx
deleted file mode 100644
index 9cdf282d..00000000
--- a/src/plugins/vxeTable/renderer/dict.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DictTag } from '@/components/DictTag'
-import { VXETable } from 'vxe-table'
-
-// 字典渲染
-VXETable.renderer.add('XDict', {
-  // 默认显示模板
-  renderDefault(renderOpts, params) {
-    const { row, column } = params
-    const { content } = renderOpts
-    return <DictTag type={content as unknown as string} value={row[column.field]}></DictTag>
-  }
-})
diff --git a/src/plugins/vxeTable/renderer/html.tsx b/src/plugins/vxeTable/renderer/html.tsx
deleted file mode 100644
index 46483a1c..00000000
--- a/src/plugins/vxeTable/renderer/html.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { VXETable } from 'vxe-table'
-
-// 图片渲染
-VXETable.renderer.add('XHtml', {
-  // 默认显示模板
-  renderDefault(_renderOpts, params) {
-    const { row, column } = params
-    return <span v-html={row[column.field]}></span>
-  }
-})
diff --git a/src/plugins/vxeTable/renderer/img.tsx b/src/plugins/vxeTable/renderer/img.tsx
deleted file mode 100644
index fbbf24a1..00000000
--- a/src/plugins/vxeTable/renderer/img.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { VXETable } from 'vxe-table'
-import { ElImage } from 'element-plus'
-
-// 图片渲染
-VXETable.renderer.add('XImg', {
-  // 默认显示模板
-  renderDefault(_renderOpts, params) {
-    const { row, column } = params
-    return (
-      <ElImage
-        style="width: 80px; height: 50px"
-        src={row[column.field]}
-        key={row[column.field]}
-        preview-src-list={[row[column.field]]}
-        fit="contain"
-        lazy
-      ></ElImage>
-    )
-  }
-})
diff --git a/src/plugins/vxeTable/renderer/index.tsx b/src/plugins/vxeTable/renderer/index.tsx
deleted file mode 100644
index 744e46c3..00000000
--- a/src/plugins/vxeTable/renderer/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import './dataPicker'
-import './dataTimeRangePicker'
-import './dict'
-import './html'
-import './link'
-import './img'
-import './preview'
diff --git a/src/plugins/vxeTable/renderer/link.tsx b/src/plugins/vxeTable/renderer/link.tsx
deleted file mode 100644
index 84e1a5a1..00000000
--- a/src/plugins/vxeTable/renderer/link.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { VXETable } from 'vxe-table'
-
-// 超链接渲染
-VXETable.renderer.add('XLink', {
-  // 默认显示模板
-  renderDefault(renderOpts, params) {
-    const { row, column } = params
-    const { events = {} } = renderOpts
-    return (
-      <a class="link" onClick={() => events.click(params)}>
-        {row[column.field]}
-      </a>
-    )
-  }
-})
diff --git a/src/plugins/vxeTable/renderer/preview.tsx b/src/plugins/vxeTable/renderer/preview.tsx
deleted file mode 100644
index a737dd51..00000000
--- a/src/plugins/vxeTable/renderer/preview.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { VXETable } from 'vxe-table'
-import { ElImage, ElLink } from 'element-plus'
-
-// 图片渲染
-VXETable.renderer.add('XPreview', {
-  // 默认显示模板
-  renderDefault(_renderOpts, params) {
-    const { row, column } = params
-    if (row.type.indexOf('image/') === 0) {
-      return (
-        <ElImage
-          style="width: 80px; height: 50px"
-          src={row[column.field]}
-          key={row[column.field]}
-          preview-src-list={[row[column.field]]}
-          fit="contain"
-          lazy
-        ></ElImage>
-      )
-    } else if (row.type.indexOf('video/') === 0) {
-      return (
-        <video>
-          <source src={row[column.field]}></source>
-        </video>
-      )
-    } else {
-      return (
-        // @ts-ignore
-        <ElLink href={row[column.field]} target="_blank">
-          {row[column.field]}
-        </ElLink>
-      )
-    }
-  }
-})
diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index e9e992f1..a3afbb94 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -120,8 +120,6 @@ declare module '@vue/runtime-core' {
     VerifyPoints: typeof import('./../components/Verifition/src/Verify/VerifyPoints.vue')['default']
     VerifySlide: typeof import('./../components/Verifition/src/Verify/VerifySlide.vue')['default']
     XButton: typeof import('./../components/XButton/src/XButton.vue')['default']
-    XModal: typeof import('./../components/XModal/src/XModal.vue')['default']
-    XTable: typeof import('./../components/XTable/src/XTable.vue')['default']
     XTextButton: typeof import('./../components/XButton/src/XTextButton.vue')['default']
   }
   export interface ComponentCustomProperties {
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 75cf16d9..cfda3e66 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -62,8 +62,6 @@ declare global {
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
   const useTable: typeof import('@/hooks/web/useTable')['useTable']
-  const useVxeCrudSchemas: typeof import('@/hooks/web/useVxeCrudSchemas')['useVxeCrudSchemas']
-  const useXTable: typeof import('@/hooks/web/useXTable')['useXTable']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
diff --git a/src/views/system/notify/template/index.vue b/src/views/system/notify/template/index.vue
index 69fda907..45c1be6d 100644
--- a/src/views/system/notify/template/index.vue
+++ b/src/views/system/notify/template/index.vue
@@ -46,7 +46,7 @@
   </ContentWrap>
 
   <!-- 添加/修改的弹窗 -->
-  <XModal id="templateModel" :loading="modelLoading" v-model="dialogVisible" :title="dialogTitle">
+  <Dialog id="templateModel" :loading="modelLoading" v-model="dialogVisible" :title="dialogTitle">
     <!-- 表单：添加/修改 -->
     <Form
       ref="formRef"
@@ -72,10 +72,10 @@
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 
   <!-- 测试站内信的弹窗 -->
-  <XModal id="sendTest" v-model="sendVisible" title="测试">
+  <Dialog id="sendTest" v-model="sendVisible" title="测试">
     <el-form :model="sendForm" :rules="sendRules" label-width="200px" label-position="top">
       <el-form-item label="模板内容" prop="content">
         <el-input type="textarea" v-model="sendForm.content" readonly />
@@ -112,7 +112,7 @@
       />
       <XButton :title="t('dialog.close')" @click="sendVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts" name="SystemNotifyTemplate">
 import { FormExpose } from '@/components/Form'
-- 
Gitee


From f3c624960002ba6288a7f82013c450f0b5827740 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 13 Apr 2023 00:21:32 +0800
Subject: [PATCH 22/23] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84=E6=A8=A1=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dict.ts                             |  3 +-
 src/views/infra/codegen/PreviewCode.vue       |  2 +-
 .../codegen/components/GenerateInfoForm.vue   | 56 ++++++++++++-------
 src/views/system/dict/data/DictDataForm.vue   |  3 +-
 src/views/system/dict/data/index.vue          |  2 +-
 5 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index d1d84242..03e17e75 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -21,7 +21,7 @@ export interface DictDataType {
 }
 
 export const getDictOptions = (dictType: string) => {
-  return dictStore.getDictByType(dictType)
+  return dictStore.getDictByType(dictType) || []
 }
 
 export const getIntDictOptions = (dictType: string) => {
@@ -117,6 +117,7 @@ export enum DICT_TYPE {
   INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',
   INFRA_CONFIG_TYPE = 'infra_config_type',
   INFRA_CODEGEN_TEMPLATE_TYPE = 'infra_codegen_template_type',
+  INFRA_CODEGEN_FRONT_TYPE = 'infra_codegen_front_type',
   INFRA_CODEGEN_SCENE = 'infra_codegen_scene',
   INFRA_FILE_STORAGE = 'infra_file_storage',
 
diff --git a/src/views/infra/codegen/PreviewCode.vue b/src/views/infra/codegen/PreviewCode.vue
index 6a81499d..5dd3907b 100644
--- a/src/views/infra/codegen/PreviewCode.vue
+++ b/src/views/infra/codegen/PreviewCode.vue
@@ -15,7 +15,7 @@
         v-loading="loading"
         element-loading-text="生成文件目录中..."
       >
-        <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
+        <el-scrollbar height="calc(100vh - 88px - 40px)">
           <el-tree
             ref="treeRef"
             node-key="id"
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
index 356ee6df..b9898c09 100644
--- a/src/views/infra/codegen/components/GenerateInfoForm.vue
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -13,6 +13,19 @@
           </el-select>
         </el-form-item>
       </el-col>
+      <el-col :span="12">
+        <el-form-item prop="frontType" label="前端类型">
+          <el-select v-model="formData.frontType">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="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">
@@ -25,6 +38,26 @@
           </el-select>
         </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="12">-->
       <!--        <el-form-item prop="packageName">-->
@@ -115,27 +148,6 @@
         </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>
@@ -297,6 +309,7 @@ const props = defineProps({
 const formRef = ref()
 const formData = ref({
   templateType: null,
+  frontType: null,
   scene: null,
   moduleName: '',
   businessName: '',
@@ -315,6 +328,7 @@ const formData = ref({
 
 const rules = reactive({
   templateType: [required],
+  frontType: [required],
   scene: [required],
   moduleName: [required],
   businessName: [required],
diff --git a/src/views/system/dict/data/DictDataForm.vue b/src/views/system/dict/data/DictDataForm.vue
index 3bef7893..dc2f6057 100644
--- a/src/views/system/dict/data/DictDataForm.vue
+++ b/src/views/system/dict/data/DictDataForm.vue
@@ -115,11 +115,12 @@ const colorTypeOptions = readonly([
 ])
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: number, dictType?: string) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+  formData.value.dictType = dictType
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
diff --git a/src/views/system/dict/data/index.vue b/src/views/system/dict/data/index.vue
index 77770dda..cb4c076e 100644
--- a/src/views/system/dict/data/index.vue
+++ b/src/views/system/dict/data/index.vue
@@ -167,7 +167,7 @@ const resetQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formRef.value.open(type, id, queryParams.dictType)
 }
 
 /** 删除按钮操作 */
-- 
Gitee


From 5d089161e0d19bd72216dc253bb381304596ec92 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 13 Apr 2023 07:54:37 +0800
Subject: [PATCH 23/23] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84=E6=A8=A1=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/infra/codegen/EditTable.vue           | 2 +-
 src/views/system/mail/account/account.data.ts   | 2 +-
 src/views/system/mail/account/index.vue         | 2 +-
 src/views/system/mail/log/index.vue             | 2 +-
 src/views/system/mail/log/log.data.ts           | 2 +-
 src/views/system/mail/template/index.vue        | 2 +-
 src/views/system/mail/template/template.data.ts | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index e8cae410..8d9f498e 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -30,7 +30,7 @@ const { query } = useRoute() // 查询参数
 const { delView } = useTagsViewStore() // 视图操作
 
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const activeName = ref('basicInfo') // Tag 激活的窗口
+const activeName = ref('colum') // Tag 激活的窗口
 const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
 const columInfoRef = ref<ComponentRef<typeof ColumInfoForm>>()
 const generateInfoRef = ref<ComponentRef<typeof GenerateInfoForm>>()
diff --git a/src/views/system/mail/account/account.data.ts b/src/views/system/mail/account/account.data.ts
index eaa0673a..8b33edc5 100644
--- a/src/views/system/mail/account/account.data.ts
+++ b/src/views/system/mail/account/account.data.ts
@@ -19,7 +19,7 @@ export const rules = reactive({
   sslEnable: [required]
 })
 
-// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+// CrudSchema：https://doc.iocoder.cn/vue3/crud-schema/
 const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '邮箱',
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index eeaf8bcf..f66bbf66 100644
--- a/src/views/system/mail/account/index.vue
+++ b/src/views/system/mail/account/index.vue
@@ -72,7 +72,7 @@ import MailAccountDetail from './MailAccountDetail.vue'
 
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
-// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
 const { tableObject, tableMethods } = useTable({
   getListApi: MailAccountApi.getMailAccountPage, // 分页接口
   delListApi: MailAccountApi.deleteMailAccount // 删除接口
diff --git a/src/views/system/mail/log/index.vue b/src/views/system/mail/log/index.vue
index f039e66e..c24ff009 100644
--- a/src/views/system/mail/log/index.vue
+++ b/src/views/system/mail/log/index.vue
@@ -41,7 +41,7 @@ import MailLogDetail from './MailLogDetail.vue'
 
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
-// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
 const { tableObject, tableMethods } = useTable({
   getListApi: MailLogApi.getMailLogPage // 分页接口
 })
diff --git a/src/views/system/mail/log/log.data.ts b/src/views/system/mail/log/log.data.ts
index 0fa695e4..62cbf516 100644
--- a/src/views/system/mail/log/log.data.ts
+++ b/src/views/system/mail/log/log.data.ts
@@ -5,7 +5,7 @@ import * as MailAccountApi from '@/api/system/mail/account'
 // 邮箱账号的列表
 const accountList = await MailAccountApi.getSimpleMailAccountList()
 
-// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+// CrudSchema：https://doc.iocoder.cn/vue3/crud-schema/
 const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '编号',
diff --git a/src/views/system/mail/template/index.vue b/src/views/system/mail/template/index.vue
index 357b028f..a964a6fb 100644
--- a/src/views/system/mail/template/index.vue
+++ b/src/views/system/mail/template/index.vue
@@ -73,7 +73,7 @@ import MailTemplateSendForm from './MailTemplateSendForm.vue'
 
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
-// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
 const { tableObject, tableMethods } = useTable({
   getListApi: MailTemplateApi.getMailTemplatePage, // 分页接口
   delListApi: MailTemplateApi.deleteMailTemplate // 删除接口
diff --git a/src/views/system/mail/template/template.data.ts b/src/views/system/mail/template/template.data.ts
index 99e6764a..e68f875a 100644
--- a/src/views/system/mail/template/template.data.ts
+++ b/src/views/system/mail/template/template.data.ts
@@ -17,7 +17,7 @@ export const rules = reactive({
   status: [required]
 })
 
-// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+// CrudSchema：https://doc.iocoder.cn/vue3/crud-schema/
 const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '模板编码',
-- 
Gitee