feat: app channel config

src/views/mp/components/WxLocation/index.vue

@@ -1,5 +1,3 @@
-import { Image } from 'ant-design-vue';
-
 <template>
   <div>
     <a-button

src/views/mp/components/WxNews/index.vue

@@ -1 +1,179 @@
-<template><span>123</span> </template>
+<template>
+  <div class="p-2">
+    <div class="p-4 mb-2 bg-white">
+      <BasicForm @register="registerForm" />
+    </div>
+    <div class="p-2 bg-white">
+      <List :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }" :data-source="data" :pagination="paginationProp">
+        <template #header>
+          <div class="flex justify-end space-x-2">
+            <slot name="header"></slot>
+            <Tooltip>
+              <template #title>
+                <div class="w-50">每行显示数量</div>
+                <Slider id="slider" v-bind="sliderProp" :value="grid" @change="sliderChange" />
+              </template>
+              <a-button><TableOutlined /></a-button>
+            </Tooltip>
+            <Tooltip @click="fetch">
+              <template #title>刷新</template>
+              <a-button><RedoOutlined /></a-button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <ListItem>
+            <Card>
+              <template #title>{{ item.content.newsItem[0].title }}</template>
+              <template #cover>
+                <div :class="height">
+                  <Image :src="item.content.newsItem[0].thumbUrl" />
+                </div>
+              </template>
+              <template #actions>
+                <Icon icon="ant-design:delete-outlined" @click="handleDelete.bind(null, item.id)" />
+              </template>
+
+              <CardMeta>
+                <template #title>
+                  <TypographyText :content="item.name" :ellipsis="{ tooltip: item.address }" />
+                </template>
+                <template #avatar>
+                  <Avatar :src="item.avatar" />
+                </template>
+                <template #description>{{ item.time }}</template>
+              </CardMeta>
+            </Card>
+          </ListItem>
+        </template>
+      </List>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { RedoOutlined, TableOutlined } from '@ant-design/icons-vue'
+import { List, Card, Image, Typography, Tooltip, Slider, Avatar } from 'ant-design-vue'
+import { Icon } from '@/components/Icon'
+import { BasicForm, useForm, FormSchema } from '@/components/Form'
+import { propTypes } from '@/utils/propTypes'
+import { isFunction } from '@/utils/is'
+
+const ListItem = List.Item
+const CardMeta = Card.Meta
+const TypographyText = Typography.Text
+
+// 组件接收参数
+const props = defineProps({
+  // 请求API的参数
+  params: propTypes.object.def({}),
+  //api
+  api: propTypes.func,
+  searchSchema: {
+    type: Array
+  },
+  grid: propTypes.number.def(12),
+  minSlider: propTypes.number.def(6),
+  maxSlider: propTypes.number.def(12)
+})
+
+// 获取slider属性
+const sliderProp = computed(() => useSlider())
+
+function useSlider() {
+  const min = props.minSlider
+  const max = props.maxSlider
+  // 每行显示个数滑动条
+  const getMarks = () => {
+    const l = {}
+    for (let i = min; i < max + 1; i++) {
+      l[i] = {
+        style: {
+          color: '#fff'
+        },
+        label: i
+      }
+    }
+    return l
+  }
+  return {
+    min,
+    max,
+    marks: getMarks(),
+    step: 1
+  }
+}
+
+//暴露内部方法
+const emit = defineEmits(['getMethod', 'delete'])
+//数据
+const data = ref([])
+// 切换每行个数
+// cover图片自适应高度
+//修改pageSize并重新请求数据
+
+const height = computed(() => {
+  return `h-${120 - props.grid * 6}`
+})
+//表单
+const [registerForm, { validate }] = useForm({
+  schemas: props.searchSchema as FormSchema[],
+  labelWidth: 80,
+  baseColProps: { span: 6 },
+  actionColOptions: { span: 24 },
+  autoSubmitOnEnter: true,
+  submitFunc: handleSubmit
+})
+//表单提交
+async function handleSubmit() {
+  const data = await validate()
+  await fetch(data)
+}
+function sliderChange(n: number) {
+  pageSize.value = n * 4
+  fetch()
+}
+
+// 自动请求并暴露内部方法
+onMounted(() => {
+  fetch()
+  emit('getMethod', fetch)
+})
+
+async function fetch(p = {}) {
+  const { api, params } = props
+  if (api && isFunction(api)) {
+    const res = await api({ ...params, page: page.value, pageSize: pageSize.value, ...p })
+    data.value = res.list
+    total.value = res.total
+  }
+}
+//分页相关
+const page = ref(1)
+const pageSize = ref(36)
+const total = ref(0)
+const paginationProp = ref({
+  showSizeChanger: false,
+  showQuickJumper: true,
+  pageSize,
+  current: page,
+  total,
+  showTotal: (total: number) => `总 ${total} 条`,
+  onChange: pageChange,
+  onShowSizeChange: pageSizeChange
+})
+
+function pageChange(p: number, pz: number) {
+  page.value = p
+  pageSize.value = pz
+  fetch()
+}
+function pageSizeChange(_current, size: number) {
+  pageSize.value = size
+  fetch()
+}
+
+async function handleDelete(id) {
+  emit('delete', id)
+}
+</script>

src/views/mp/freePublish/NewsList.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="p-2">
-    <div class="p-4 mb-2 bg-white">
-      <BasicForm @register="registerForm" />
-    </div>
-    <div class="p-2 bg-white">
-      <List :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }" :data-source="data" :pagination="paginationProp">
-        <template #header>
-          <div class="flex justify-end space-x-2">
-            <slot name="header"></slot>
-            <Tooltip>
-              <template #title>
-                <div class="w-50">每行显示数量</div>
-                <Slider id="slider" v-bind="sliderProp" v-model:value="grid" @change="sliderChange" />
-              </template>
-              <a-button><TableOutlined /></a-button>
-            </Tooltip>
-            <Tooltip @click="fetch">
-              <template #title>刷新</template>
-              <a-button><RedoOutlined /></a-button>
-            </Tooltip>
-          </div>
-        </template>
-        <template #renderItem="{ item }">
-          <ListItem>
-            <Card>
-              <template #title>{{ item.content.newsItem[0].title }}</template>
-              <template #cover>
-                <div :class="height">
-                  <Image :src="item.content.newsItem[0].thumbUrl" />
-                </div>
-              </template>
-              <template #actions>
-                <Icon icon="ant-design:delete-outlined" @click="handleDelete.bind(null, item.id)" />
-              </template>
-
-              <CardMeta>
-                <template #title>
-                  <TypographyText :content="item.name" :ellipsis="{ tooltip: item.address }" />
-                </template>
-                <template #avatar>
-                  <Avatar :src="item.avatar" />
-                </template>
-                <template #description>{{ item.time }}</template>
-              </CardMeta>
-            </Card>
-          </ListItem>
-        </template>
-      </List>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
-import { RedoOutlined, TableOutlined } from '@ant-design/icons-vue'
-import { List, Card, Image, Typography, Tooltip, Slider, Avatar } from 'ant-design-vue'
-import { Icon } from '@/components/Icon'
-import { BasicForm, useForm, FormSchema } from '@/components/Form'
-import { propTypes } from '@/utils/propTypes'
-import { isFunction } from '@/utils/is'
-import { useSlider, grid } from './data'
-
-const ListItem = List.Item
-const CardMeta = Card.Meta
-const TypographyText = Typography.Text
-// 获取slider属性
-const sliderProp = computed(() => useSlider(4))
-// 组件接收参数
-const props = defineProps({
-  // 请求API的参数
-  params: propTypes.object.def({}),
-  //api
-  api: propTypes.func,
-  searchSchema: {
-    type: Array
-  }
-})
-//暴露内部方法
-const emit = defineEmits(['getMethod', 'delete'])
-//数据
-const data = ref([])
-// 切换每行个数
-// cover图片自适应高度
-//修改pageSize并重新请求数据
-
-const height = computed(() => {
-  return `h-${120 - grid.value * 6}`
-})
-//表单
-const [registerForm, { validate }] = useForm({
-  schemas: props.searchSchema as FormSchema[],
-  labelWidth: 80,
-  baseColProps: { span: 6 },
-  actionColOptions: { span: 24 },
-  autoSubmitOnEnter: true,
-  submitFunc: handleSubmit
-})
-//表单提交
-async function handleSubmit() {
-  const data = await validate()
-  await fetch(data)
-}
-function sliderChange(n: number) {
-  pageSize.value = n * 4
-  fetch()
-}
-
-// 自动请求并暴露内部方法
-onMounted(() => {
-  fetch()
-  emit('getMethod', fetch)
-})
-
-async function fetch(p = {}) {
-  const { api, params } = props
-  if (api && isFunction(api)) {
-    const res = await api({ ...params, page: page.value, pageSize: pageSize.value, ...p })
-    data.value = res.list
-    total.value = res.total
-  }
-}
-//分页相关
-const page = ref(1)
-const pageSize = ref(36)
-const total = ref(0)
-const paginationProp = ref({
-  showSizeChanger: false,
-  showQuickJumper: true,
-  pageSize,
-  current: page,
-  total,
-  showTotal: (total: number) => `总 ${total} 条`,
-  onChange: pageChange,
-  onShowSizeChange: pageSizeChange
-})
-
-function pageChange(p: number, pz: number) {
-  page.value = p
-  pageSize.value = pz
-  fetch()
-}
-function pageSizeChange(_current, size: number) {
-  pageSize.value = size
-  fetch()
-}
-
-async function handleDelete(id) {
-  emit('delete', id)
-}
-</script>

src/views/mp/freePublish/data.ts

@@ -1,25 +0,0 @@
-import { ref } from 'vue'
-// 每行个数
-export const grid = ref(12)
-// slider属性
-export const useSlider = (min = 6, max = 12) => {
-  // 每行显示个数滑动条
-  const getMarks = () => {
-    const l = {}
-    for (let i = min; i < max + 1; i++) {
-      l[i] = {
-        style: {
-          color: '#fff'
-        },
-        label: i
-      }
-    }
-    return l
-  }
-  return {
-    min,
-    max,
-    marks: getMarks(),
-    step: 1
-  }
-}

src/views/mp/freePublish/index.vue

@@ -1,12 +1,12 @@
 <template>
   <PageWrapper title="公众号图文">
-    <NewsList :search-schema="searchSchema" :api="getFreePublishPage" @get-method="getMethod" @delete="handleDelete" />
+    <WxNews :search-schema="searchSchema" :api="getFreePublishPage" @get-method="getMethod" @delete="handleDelete" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
 // import { Icon } from '@/components/Icon'
 import { PageWrapper } from '@/components/Page'
-import NewsList from './NewsList.vue'
+import WxNews from '../components/WxNews/index.vue'
 import { getSimpleAccounts } from '@/api/mp/account'
 import { deleteFreePublish, getFreePublishPage } from '@/api/mp/freePublish'
 import { FormSchema } from '@/components/Form'

src/views/pay/app/ChannelModal.vue

@@ -0,0 +1,62 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? t('action.edit') : t('action.create')" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { ref, unref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { BasicForm, useForm } from '@/components/Form'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { aliPayFormSchema, weChatFormSchema } from './app.data'
+import { createChannel, updateChannel, getChannel } from '@/api/pay/channel'
+import { PayType } from '@/enums/systemEnum'
+
+defineOptions({ name: 'ChannelModal' })
+
+const { t } = useI18n()
+const { createMessage } = useMessage()
+const emit = defineEmits(['success', 'register'])
+const isUpdate = ref(true)
+const type = ref(PayType.ALIPAY)
+
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  labelWidth: 120,
+  baseColProps: { span: 24 },
+  schemas: type.value === PayType.ALIPAY ? aliPayFormSchema : weChatFormSchema,
+  showActionButtonGroup: false,
+  actionColOptions: { span: 23 }
+})
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields()
+  setModalProps({ confirmLoading: false })
+  isUpdate.value = !!data?.isUpdate
+  type.value = data.type
+  if (unref(isUpdate)) {
+    let res = await getChannel(data.record.payMerchant.id, data.record.id, data.payCode)
+    const config = JSON.parse(res.config)
+    res = Object.assign(res, config)
+    setFieldsValue({ ...res })
+  }
+})
+
+async function handleSubmit() {
+  try {
+    const values = await validate()
+    setModalProps({ confirmLoading: true })
+    values.config = Object.assign({}, values)
+    if (unref(isUpdate)) {
+      await updateChannel(values)
+    } else {
+      await createChannel(values)
+    }
+    closeModal()
+    emit('success')
+    createMessage.success(t('common.saveSuccessText'))
+  } finally {
+    setModalProps({ confirmLoading: false })
+  }
+}
+</script>

src/views/pay/app/app.data.ts

@@ -4,7 +4,7 @@ import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { PayChannelEnum } from '@/enums/systemEnum'
 import { useMessage } from '@/hooks/web/useMessage'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import { Tag, Switch } from 'ant-design-vue'
+import { Switch } from 'ant-design-vue'
 import { h } from 'vue'
 
 export const columns: BasicColumn[] = [
@@ -18,6 +18,12 @@ export const columns: BasicColumn[] = [
     dataIndex: 'name',
     width: 100
   },
+  {
+    title: '应用名',
+    dataIndex: 'appId',
+    width: 100,
+    ifShow: false
+  },
   {
     title: '开启状态',
     dataIndex: 'status',
@@ -64,47 +70,27 @@ export const columns: BasicColumn[] = [
       {
         title: PayChannelEnum.ALIPAY_APP.name,
         dataIndex: PayChannelEnum.ALIPAY_APP.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.ALIPAY_APP.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       },
       {
         title: PayChannelEnum.ALIPAY_PC.name,
         dataIndex: PayChannelEnum.ALIPAY_PC.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.ALIPAY_PC.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       },
       {
         title: PayChannelEnum.ALIPAY_WAP.name,
         dataIndex: PayChannelEnum.ALIPAY_WAP.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.ALIPAY_WAP.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       },
       {
         title: PayChannelEnum.ALIPAY_QR.name,
         dataIndex: PayChannelEnum.ALIPAY_QR.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.ALIPAY_QR.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       },
       {
         title: PayChannelEnum.ALIPAY_BAR.name,
         dataIndex: PayChannelEnum.ALIPAY_BAR.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.ALIPAY_BAR.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       }
     ]
   },
@@ -114,29 +100,17 @@ export const columns: BasicColumn[] = [
       {
         title: PayChannelEnum.WX_LITE.name,
         dataIndex: PayChannelEnum.WX_LITE.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.WX_LITE.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       },
       {
         title: PayChannelEnum.WX_PUB.name,
         dataIndex: PayChannelEnum.WX_PUB.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.WX_PUB.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       },
       {
         title: PayChannelEnum.WX_APP.name,
         dataIndex: PayChannelEnum.WX_APP.code,
-        width: 160,
+        width: 160
-        customRender: ({ record }) => {
-          const isUpdate = record.channelCodes.indexOf(PayChannelEnum.WX_APP.code) !== -1
-          return h(Tag, { color: isUpdate ? '#108ee9' : '#f50000' }, () => (isUpdate ? '已设置' : '未设置'))
-        }
       }
     ]
   },
@@ -231,3 +205,180 @@ export const formSchema: FormSchema[] = [
     component: 'InputTextArea'
   }
 ]
+
+export const aliPayFormSchema: FormSchema[] = [
+  {
+    label: '编号',
+    field: 'id',
+    show: false,
+    component: 'Input'
+  },
+  {
+    label: '渠道费率',
+    field: 'feeRate',
+    defaultValue: 0,
+    required: true,
+    component: 'InputNumber'
+  },
+  {
+    label: '开放平台APPID',
+    field: 'appId',
+    required: true,
+    component: 'Input'
+  },
+  {
+    label: '渠道状态',
+    field: 'status',
+    required: true,
+    defaultValue: 0,
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS)
+    }
+  },
+  {
+    label: '网关地址',
+    field: 'serverUrl',
+    required: true,
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_ALIPAY_SERVER_TYPE, 'string')
+    }
+  },
+  {
+    label: '算法类型',
+    field: 'signType',
+    required: true,
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_ALIPAY_SIGN_TYPE, 'string')
+    }
+  },
+  {
+    label: '公钥类型',
+    field: 'mode',
+    required: true,
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_ALIPAY_MODE)
+    }
+  },
+  {
+    label: '商户私钥',
+    field: 'privateKey',
+    required: true,
+    ifShow: ({ values }) => !!(values.mode === 1),
+    component: 'Input'
+  },
+  {
+    label: '支付宝公钥字符串',
+    field: 'alipayPublicKey',
+    required: true,
+    ifShow: ({ values }) => !!(values.mode === 1),
+    component: 'InputTextArea'
+  },
+  {
+    label: '商户公钥应用证书',
+    field: 'appCertContent',
+    required: true,
+    ifShow: ({ values }) => !!(values.mode === 2),
+    component: 'InputTextArea'
+  },
+  {
+    label: '支付宝公钥证书',
+    field: 'alipayPublicCertContent',
+    required: true,
+    ifShow: ({ values }) => !!(values.mode === 2),
+    component: 'InputTextArea'
+  },
+  {
+    label: '根证书',
+    field: 'rootCertContent',
+    required: true,
+    ifShow: ({ values }) => !!(values.mode === 2),
+    component: 'InputTextArea'
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea'
+  }
+]
+
+export const weChatFormSchema: FormSchema[] = [
+  {
+    label: '编号',
+    field: 'id',
+    show: false,
+    component: 'Input'
+  },
+  {
+    label: '渠道费率',
+    field: 'feeRate',
+    defaultValue: 0,
+    required: true,
+    component: 'InputNumber'
+  },
+  {
+    label: '公众号APPID',
+    field: 'appId',
+    required: true,
+    component: 'Input'
+  },
+  {
+    label: '商户号',
+    field: 'mchId',
+    required: true,
+    component: 'Input'
+  },
+  {
+    label: '渠道状态',
+    field: 'status',
+    required: true,
+    defaultValue: 0,
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS)
+    }
+  },
+  {
+    label: 'API 版本',
+    field: 'apiVersion',
+    required: true,
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_WECHAT_VERSION, 'string')
+    }
+  },
+  {
+    label: '商户密钥',
+    field: 'mchKey',
+    required: true,
+    ifShow: ({ values }) => !!(values.apiVersion === 'v2'),
+    component: 'Input'
+  },
+  {
+    label: 'API V3密钥',
+    field: 'apiV3Key',
+    required: true,
+    ifShow: ({ values }) => !!(values.apiVersion === 'v3'),
+    component: 'Input'
+  },
+  {
+    label: 'apiclient_key.perm证书',
+    field: 'privateKeyContent',
+    required: true,
+    component: 'InputTextArea'
+  },
+  {
+    label: 'apiclient_cert.perm证书',
+    field: 'privateCertContent',
+    required: true,
+    component: 'InputTextArea'
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea'
+  }
+]

src/views/pay/app/index.vue

@@ -10,6 +10,158 @@
         </a-button>
       </template>
       <template #bodyCell="{ column, record }">
+        <template v-if="column.key === PayChannelEnum.ALIPAY_APP.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.ALIPAY_APP.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.ALIPAY_APP.code, PayType.ALIPAY, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
+        <template v-if="column.key === PayChannelEnum.ALIPAY_PC.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.ALIPAY_PC.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.ALIPAY_PC.code, PayType.ALIPAY, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
+        <template v-if="column.key === PayChannelEnum.ALIPAY_WAP.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.ALIPAY_WAP.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.ALIPAY_WAP.code, PayType.ALIPAY, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
+        <template v-if="column.key === PayChannelEnum.ALIPAY_QR.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.ALIPAY_QR.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.ALIPAY_QR.code, PayType.ALIPAY, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
+        <template v-if="column.key === PayChannelEnum.ALIPAY_BAR.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.ALIPAY_BAR.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.ALIPAY_BAR.code, PayType.ALIPAY, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
+        <template v-if="column.key === PayChannelEnum.WX_LITE.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.WX_LITE.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.WX_LITE.code, PayType.WECHAT, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.WX_LITE.code, PayType.WECHAT, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
+        <template v-if="column.key === PayChannelEnum.WX_PUB.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.WX_PUB.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.WX_PUB.code, PayType.WECHAT, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.WX_PUB.code, PayType.WECHAT, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
+        <template v-if="column.key === PayChannelEnum.WX_APP.code">
+          <a-button
+            type="primary"
+            shape="circle"
+            v-if="record.channelCodes.indexOf(PayChannelEnum.WX_APP.code) !== -1"
+            @click="openChannel(record, PayChannelEnum.WX_APP.code, PayType.WECHAT, true)"
+          >
+            <Icon icon="ant-design:check-outlined" />
+          </a-button>
+          <a-button
+            v-else
+            type="primary"
+            shape="circle"
+            danger
+            @click="openChannel(record, PayChannelEnum.WX_APP.code, PayType.WECHAT, false)"
+          >
+            <Icon icon="ant-design:close-outlined" />
+          </a-button>
+        </template>
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
@@ -31,6 +183,7 @@
       </template>
     </BasicTable>
     <AppModal @register="registerModal" @success="reload()" />
+    <ChannelModal @register="registerChannelModal" @success="reload()" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -38,7 +191,10 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useModal } from '@/components/Modal'
 import AppModal from './AppModal.vue'
+import ChannelModal from './ChannelModal.vue'
+import { PayChannelEnum, PayType } from '@/enums/systemEnum'
 import { IconEnum } from '@/enums/appEnum'
+import { Icon } from '@/components/Icon'
 import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { AppExportReqVO, deleteApp, getAppPage, exportApp } from '@/api/pay/app'
 import { columns, searchFormSchema } from './app.data'
@@ -48,6 +204,7 @@ defineOptions({ name: 'PayApp' })
 const { t } = useI18n()
 const { createConfirm, createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
+const [registerChannelModal, { openModal: openChannelModal }] = useModal()
 
 const [registerTable, { getForm, reload }] = useTable({
   title: '应用列表',
@@ -89,4 +246,9 @@ async function handleDelete(record: Recordable) {
   createMessage.success(t('common.delSuccessText'))
   reload()
 }
+
+function openChannel(record: Recordable, payCode: string, type: string, isUpdate: boolean) {
+  console.info(record)
+  openChannelModal(true, { record, payCode, type, isUpdate })
+}
 </script>