支付应用：模拟支付的添加代码优化

src/utils/constants.ts

@@ -125,15 +125,6 @@ export const PayChannelEnum = {
   }
 }
 
-/**
- * 支付类型枚举
- */
-export const PayType = {
-  WECHAT: 'WECHAT',
-  ALIPAY: 'ALIPAY',
-  MOCK: 'MOCK'
-}
-
 /**
  * 支付订单状态枚举
  */

src/views/pay/app/components/channel/AlipayChannelForm.vue

@@ -151,8 +151,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="close">取消</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button type="primary" @click="submitForm">确定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
       </template>
     </Dialog>
   </div>

src/views/pay/app/components/channel/MockChannelForm.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        v-loading="formLoading"
+      >
+        <el-form-item label-width="180px" label="渠道状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio
+              v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="parseInt(dict.value)"
+              :label="parseInt(dict.value)"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label-width="180px" label="备注" prop="remark">
+          <el-input v-model="formData.remark" :style="{ width: '100%' }" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { CommonStatusEnum } from '@/utils/constants'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import * as ChannelApi from '@/api/pay/channel'
+
+defineOptions({ name: 'MockChannelForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref<any>({
+  appId: '',
+  code: '',
+  status: undefined,
+  feeRate: 0,
+  remark: '',
+  config: {
+    name: 'mock-conf'
+  }
+})
+const formRules = {
+  status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }]
+}
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (appId, code) => {
+  dialogVisible.value = true
+  formLoading.value = true
+  resetForm(appId, code)
+  // 加载数据
+  try {
+    const data = await ChannelApi.getChannel(appId, code)
+
+    if (data && data.id) {
+      formData.value = data
+      formData.value.config = JSON.parse(data.config)
+    }
+    dialogTitle.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
+  } finally {
+    formLoading.value = false
+  }
+}
+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 ChannelApi.ChannelVO
+    data.config = JSON.stringify(formData.value.config)
+    if (!data.id) {
+      await ChannelApi.createChannel(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ChannelApi.updateChannel(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = (appId, code) => {
+  formData.value = {
+    appId: appId,
+    code: code,
+    status: CommonStatusEnum.ENABLE,
+    remark: '',
+    feeRate: 0,
+    config: {
+      name: 'mock-conf'
+    }
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/pay/app/components/channel/WeixinChannelForm.vue

@@ -158,8 +158,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="close">取消</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button type="primary" @click="submitForm">确定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
       </template>
     </Dialog>
   </div>

src/views/pay/app/components/mockChannelForm.vue

@@ -1,130 +0,0 @@
-<template>
-  <div>
-    <el-dialog
-      v-model:visible="dialogVisible"
-      :title="title"
-      @closed="close"
-      append-to-body
-      destroy-on-close
-      width="800px"
-    >
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-        v-loading="formLoading"
-      >
-        <el-form-item label-width="180px" label="渠道状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio
-              v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
-              :key="parseInt(dict.value)"
-              :label="parseInt(dict.value)"
-            >
-              {{ dict.label }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label-width="180px" label="备注" prop="remark">
-          <el-input v-model="formData.remark" :style="{ width: '100%' }" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="submitForm">确定</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script lang="ts" setup name="MockChannelForm">
-import { createChannel, getChannel, updateChannel } from '@/api/pay/channel'
-import { CommonStatusEnum } from '@/utils/constants'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false)
-const formLoading = ref(false)
-const title = ref('')
-const formData = ref<any>({
-  appId: '',
-  code: '',
-  status: undefined,
-  feeRate: 0,
-  remark: '',
-  config: {
-    name: 'mock-conf'
-  }
-})
-
-const rules = {
-  status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }]
-}
-
-const formRef = ref()
-
-const emit = defineEmits(['success'])
-
-const open = async (appId, code) => {
-  dialogVisible.value = true
-  formLoading.value = true
-  reset(appId, code)
-
-  try {
-    const data = await getChannel(appId, code)
-
-    if (data && data.id) {
-      formData.value = data
-      formData.value.config = JSON.parse(data.config)
-    }
-    title.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
-  } finally {
-    formLoading.value = false
-  }
-}
-
-const close = () => {
-  dialogVisible.value = false
-  reset(undefined, undefined)
-}
-
-const submitForm = async () => {
-  const valid = await formRef.value?.validate()
-  if (!valid) {
-    return
-  }
-  const data = { ...formData.value }
-  data.config = JSON.stringify(formData.value.config)
-  if (!data.id) {
-    createChannel(data).then(() => {
-      message.success('新增成功')
-      emit('success')
-      close()
-    })
-  } else {
-    updateChannel(data).then(() => {
-      message.success('修改成功')
-      emit('success')
-      close()
-    })
-  }
-}
-
-/** 重置表单 */
-const reset = (appId, code) => {
-  formData.value = {
-    appId: appId,
-    code: code,
-    status: CommonStatusEnum.ENABLE,
-    remark: '',
-    feeRate: 0,
-    config: {
-      name: 'mock-conf'
-    }
-  }
-  formRef.value?.resetFields()
-}
-
-defineExpose({ open })
-</script>

src/views/pay/app/index.vue

@@ -88,7 +88,7 @@
             <el-button
               type="success"
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_APP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
               circle
             >
               <Icon icon="ep:check" />
@@ -97,7 +97,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -109,7 +109,7 @@
               type="success"
               circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_PC.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -117,7 +117,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -129,7 +129,7 @@
               type="success"
               circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -137,7 +137,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -149,7 +149,7 @@
               type="success"
               circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_QR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -157,7 +157,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -169,7 +169,7 @@
               type="success"
               circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -177,7 +177,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY)"
+              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -191,7 +191,7 @@
               type="success"
               circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_LITE.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code, PayType.WECHAT)"
+              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -199,7 +199,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code, PayType.WECHAT)"
+              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -211,7 +211,7 @@
               type="success"
               circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_PUB.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code, PayType.WECHAT)"
+              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -219,7 +219,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code, PayType.WECHAT)"
+              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -231,7 +231,7 @@
               type="success"
               circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_APP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code, PayType.WECHAT)"
+              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
@@ -239,7 +239,7 @@
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code, PayType.WECHAT)"
+              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -252,17 +252,19 @@
             <el-button
               type="success"
               circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.MOCK.code)"
+              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.MOCK)"
               @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
-              ><Icon icon="ep:check"
+            >
-            /></el-button>
+              <Icon icon="ep:check" />
+            </el-button>
             <el-button
               v-else
               type="danger"
               circle
               @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
-              ><Icon icon="ep:close"
+            >
-            /></el-button>
+              <Icon icon="ep:close" />
+            </el-button>
           </template>
         </el-table-column>
       </el-table-column>
@@ -310,7 +312,7 @@ import AppForm from './components/AppForm.vue'
 import { PayChannelEnum, PayType } from '@/utils/constants'
 import AlipayChannelForm from './components/channel/AlipayChannelForm.vue'
 import WeixinChannelForm from './components/channel/WeixinChannelForm.vue'
-import MockChannelForm from './components/mockChannelForm.vue'
+import MockChannelForm from './components/channel/MockChannelForm.vue'
 import { CommonStatusEnum } from '@/utils/constants'
 
 defineOptions({ name: 'PayApp' })
@@ -318,10 +320,6 @@ defineOptions({ name: 'PayApp' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
-const alipayFormRef = ref()
-const weixinFormRef = ref()
-const mockFormRef = ref()
-
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -376,11 +374,6 @@ const handleStatusChange = async (row: any) => {
 }
 
 /** 添加/修改操作 */
-const channelParam = reactive({
-  loading: false,
-  appId: null, // 应用 ID
-  payCode: null // 渠道编码
-})
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
@@ -429,20 +422,26 @@ const isChannelExists = (channels, channelCode) => {
 /**
  * 新增支付渠道信息
  */
-const openChannelForm = async (row, payCode, type) => {
+const alipayFormRef = ref()
-  channelParam.loading = false
+const weixinFormRef = ref()
+const mockFormRef = ref()
+const channelParam = reactive({
+  appId: null, // 应用 ID
+  payCode: null // 渠道编码
+})
+const openChannelForm = async (row, payCode) => {
   channelParam.appId = row.id
   channelParam.payCode = payCode
-  switch (type) {
+  if (payCode.indexOf('alipay_') === 0) {
-    case PayType.ALIPAY:
     alipayFormRef.value.open(row.id, payCode)
-      break
+    return
-    case PayType.WECHAT:
+  }
+  if (payCode.indexOf('wx_') === 0) {
     weixinFormRef.value.open(row.id, payCode)
-      break
+    return
-    case PayType.MOCK:
+  }
+  if (payCode.indexOf('mock') === 0) {
     mockFormRef.value.open(row.id, payCode)
-      break
   }
 }