优化完善支付应用和支付渠道代码逻辑，完善单元测试，基于validator完成手动校验config

yudao-admin-ui/src/views/pay/app/components/aliPayChannelForm.vue

@@ -0,0 +1,354 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="transferParam.aliPayOpen" @closed="close" append-to-body width="800px">
+      <el-form ref="aliPayForm" :model="form" :rules="rules" size="medium" label-width="100px"
+               v-loading="transferParam.loading">
+        <el-form-item label-width="180px" label="渠道费率" prop="feeRate">
+          <el-input v-model="form.feeRate" placeholder="请输入渠道费率" clearable :style="{width: '100%'}">
+            <template slot="append">%</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label-width="180px" label="开放平台APPID" prop="aliPayConfig.appId">
+          <el-input v-model="form.aliPayConfig.appId" placeholder="请输入开放平台APPID" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label-width="180px" label="渠道状态" prop="status">
+          <el-radio-group v-model="form.status" size="medium">
+            <el-radio v-for="dict in statusDictDatas" :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="aliPayConfig.serverUrl">
+          <el-radio-group v-model="form.aliPayConfig.serverUrl" size="medium">
+            <el-radio v-for="dict in aliPayServerDatas" :key="dict.value" :label="dict.value">
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label-width="180px" label="算法类型" prop="aliPayConfig.signType">
+          <el-radio-group v-model="form.aliPayConfig.signType" size="medium">
+            <el-radio v-for="dict in aliPaySignTypeDatas" :key="dict.value" :label="dict.value">
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label-width="180px" label="公钥类型" prop="aliPayConfig.mode">
+          <el-radio-group v-model="form.aliPayConfig.mode" size="medium">
+            <el-radio v-for="dict in aliPayModeDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="form.aliPayConfig.mode === 1">
+          <el-form-item label-width="180px" label="商户私钥" prop="aliPayConfig.privateKey">
+            <el-input type="textarea" :autosize="{minRows: 8, maxRows: 8}" v-model="form.aliPayConfig.privateKey"
+                      placeholder="请输入商户私钥" clearable :style="{width: '100%'}">
+            </el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="支付宝公钥字符串" prop="aliPayConfig.alipayPublicKey">
+            <el-input
+              type="textarea"
+              :autosize="{minRows: 8, maxRows: 8}"
+              v-model="form.aliPayConfig.alipayPublicKey"
+              placeholder="请输入支付宝公钥字符串" clearable
+              :style="{width: '100%'}">
+            </el-input>
+          </el-form-item>
+        </div>
+        <div v-if="form.aliPayConfig.mode === 2">
+          <el-form-item label-width="180px" label="商户公钥应用证书" prop="aliPayConfig.appCertContent">
+            <el-input v-model="form.aliPayConfig.appCertContent" type="textarea"
+                      placeholder="请上传商户公钥应用证书"
+                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="">
+            <el-upload
+              action=""
+              ref="privateKeyContentFile"
+              :limit="1"
+              :accept="fileAccept"
+              :http-request="appCertUpload"
+              :before-upload="fileBeforeUpload">
+              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label-width="180px" label="支付宝公钥证书" prop="aliPayConfig.alipayPublicCertContent">
+            <el-input v-model="form.aliPayConfig.alipayPublicCertContent" type="textarea"
+                      placeholder="请上传支付宝公钥证书"
+                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="">
+            <el-upload
+              ref="privateCertContentFile"
+              action=""
+              :limit="1"
+              :accept="fileAccept"
+              :before-upload="fileBeforeUpload"
+              :http-request="alipayPublicCertUpload">
+              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label-width="180px" label="根证书" prop="aliPayConfig.rootCertContent">
+            <el-input
+              v-model="form.aliPayConfig.rootCertContent"
+              type="textarea"
+              placeholder="请上传根证书"
+              readonly :autosize="{minRows: 8, maxRows: 8}"
+              :style="{width: '100%'}">
+            </el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="">
+            <el-upload
+              ref="privateCertContentFile"
+              :limit="1"
+              :accept="fileAccept"
+              action=""
+              :before-upload="fileBeforeUpload"
+              :http-request="rootCertUpload">
+              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+        </div>
+        <el-form-item label-width="180px" label="备注" prop="remark">
+          <el-input v-model="form.remark" :style="{width: '100%'}"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {createChannel, getChannel, updateChannel} from "@/api/pay/channel";
+
+const defaultForm = {
+  code: '',
+  status: null,
+  remark: '',
+  feeRate: null,
+  appId: '',
+  merchantId: null,
+  aliPayConfig: {
+    appId: '',
+    serverUrl: null,
+    signType: '',
+    mode: null,
+    privateKey: '',
+    alipayPublicKey: '',
+    appCertContent: '',
+    alipayPublicCertContent: '',
+    rootCertContent: ''
+  }
+};
+
+export default {
+  name: "aliPayChannelForm",
+  components: {},
+  props: {
+    // 传输的参数
+    transferParam: {
+      // 加载动画
+      "loading": false,
+      // 是否修改
+      "edit": false,
+      // 是否显示
+      "aliPayOpen": false,
+      // 应用ID
+      "appId": null,
+      // 渠道编码
+      "payCode": null,
+      // 商户对象
+      "payMerchant": {
+        // 编号
+        "id": null,
+        // 名称
+        "name": null
+      },
+    }
+  },
+  data() {
+    return {
+      form: JSON.parse(JSON.stringify(defaultForm)),
+      rules: {
+        feeRate: [{
+          required: true,
+          message: '请输入渠道费率',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.appId': [{
+          required: true,
+          message: '请输入开放平台上创建的应用的 ID',
+          trigger: 'blur'
+        }],
+        status: [{
+          required: true,
+          message: '渠道状态不能为空',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.serverUrl': [{
+          required: true,
+          message: '请传入网关地址',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.signType': [{
+          required: true,
+          message: '请传入签名算法类型',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.mode': [{
+          required: true,
+          message: '公钥类型不能为空',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.privateKey': [{
+          required: true,
+          message: '请输入商户私钥',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.alipayPublicKey': [{
+          required: true,
+          message: '请输入支付宝公钥字符串',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.appCertContent': [{
+          required: true,
+          message: '请上传商户公钥应用证书',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.alipayPublicCertContent': [{
+          required: true,
+          message: '请上传支付宝公钥证书',
+          trigger: 'blur'
+        }],
+        'aliPayConfig.rootCertContent': [{
+          required: true,
+          message: '请上传指定根证书',
+          trigger: 'blur'
+        }],
+      },
+      fileAccept: ".crt",
+      // 渠道状态 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.PAY_CHANNEL_STATUS),
+      // 支付宝加密方式
+      aliPaySignTypeDatas: getDictDatas(DICT_TYPE.PAY_CHANNEL_ALIPAY_SIGN_TYPE),
+      // 版本状态 数据字典
+      aliPayModeDatas: getDictDatas(DICT_TYPE.PAY_CHANNEL_ALIPAY_MODE),
+      // 支付宝网关地址
+      aliPayServerDatas: getDictDatas(DICT_TYPE.PAY_CHANNEL_ALIPAY_SERVER_TYPE),
+    }
+  },
+  watch: {
+    transferParam: {
+      deep: true,  // 深度监听
+      handler(newVal) {
+        if (newVal.aliPayOpen) {
+          this.form.code = newVal.payCode;
+          this.form.appId = newVal.appId;
+          this.form.merchantId = newVal.payMerchant.id;
+          // 只有在初次进来为编辑 并且为加载中的时候才回去请求数据
+          if (newVal.edit === true && newVal.loading) {
+            this.init();
+          }
+        }
+      }
+    }
+  },
+
+  methods: {
+    init() {
+      getChannel(this.transferParam.payMerchant.id, this.transferParam.appId, this.transferParam.payCode)
+        .then(response => {
+          this.form.id = response.data.id;
+          this.form.feeRate = response.data.feeRate;
+          this.form.status = response.data.status;
+          this.form.remark = response.data.remark;
+
+          let config = JSON.parse(response.data.config);
+          this.form.aliPayConfig.appId = config.appId;
+          this.form.aliPayConfig.serverUrl = config.serverUrl;
+          this.form.aliPayConfig.signType = config.signType;
+          this.form.aliPayConfig.mode = config.mode;
+          this.form.aliPayConfig.privateKey = config.privateKey;
+          this.form.aliPayConfig.alipayPublicKey = config.alipayPublicKey;
+          this.form.aliPayConfig.appCertContent = config.appCertContent;
+          this.form.aliPayConfig.alipayPublicCertContent = config.alipayPublicCertContent;
+          this.form.aliPayConfig.rootCertContent = config.rootCertContent;
+          this.transferParam.loading = false;
+        })
+    },
+    close() {
+      this.transferParam.aliPayOpen = false;
+      this.form = JSON.parse(JSON.stringify(defaultForm));
+    },
+    handleConfirm() {
+      this.$refs['aliPayForm'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        let data = this.form;
+        data.config = JSON.stringify(this.form.aliPayConfig);
+        if (this.transferParam.edit) {
+          updateChannel(data).then(response => {
+            if (response.code === 0) {
+              this.msgSuccess("修改成功");
+              this.close();
+            }
+
+          })
+        } else {
+
+          createChannel(data).then(response => {
+            if (response.code === 0) {
+              this.msgSuccess("新增成功");
+              this.$parent.refreshTable();
+              this.close();
+            }
+          });
+        }
+      });
+    },
+    fileBeforeUpload(file) {
+      let format = '.' + file.name.split(".")[1];
+      if (format !== this.fileAccept) {
+        this.$message.error('请上传指定格式"' + this.fileAccept + '"文件');
+        return false;
+      }
+      let isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    appCertUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.form.aliPayConfig.appCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    },
+    alipayPublicCertUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.form.aliPayConfig.alipayPublicCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    },
+    rootCertUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.form.aliPayConfig.rootCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    },
+
+  }
+}
+
+</script>
+<style scoped>
+
+</style>

yudao-admin-ui/src/views/pay/app/components/wechatChannelForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog :visible.sync="transferParam.open" @close="close" append-to-body>
+    <el-dialog :visible.sync="transferParam.wechatOpen" @close="close" append-to-body width="800px">
       <el-form ref="wechatJsApiForm" :model="form" :rules="rules" size="medium" label-width="100px"
                v-loading="transferParam.loading">
         <el-form-item label-width="180px" label="渠道费率" prop="feeRate">
@@ -22,7 +22,7 @@
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label-width="180px" label="API  版本" prop="weChatConfig.apiVersion">
+        <el-form-item label-width="180px" label="API 版本" prop="weChatConfig.apiVersion">
           <el-radio-group v-model="form.weChatConfig.apiVersion" size="medium">
             <el-radio v-for="dict in versionDictDatas" :key="dict.value" :label="dict.value">
               {{ dict.label }}
@@ -32,9 +32,13 @@
         <el-form-item label-width="180px" label="商户秘钥" prop="weChatConfig.mchKey"
                       v-if="form.weChatConfig.apiVersion === 'v2'">
           <el-input v-model="form.weChatConfig.mchKey" placeholder="请输入商户秘钥" clearable
-                    :style="{width: '100%'}"></el-input>
+                    :style="{width: '100%'}" type="textarea" :autosize="{minRows: 8, maxRows: 8}"></el-input>
         </el-form-item>
         <div v-if="form.weChatConfig.apiVersion === 'v3'">
+          <el-form-item label-width="180px" label="API V3秘钥" prop="weChatConfig.apiV3Key">
+            <el-input v-model="form.weChatConfig.apiV3Key" placeholder="请输入API V3秘钥" clearable
+                      :style="{width: '100%'}" type="textarea" :autosize="{minRows: 8, maxRows: 8}"></el-input>
+          </el-form-item>
           <el-form-item label-width="180px" label="apiclient_key.perm证书" prop="weChatConfig.privateKeyContent">
             <el-input v-model="form.weChatConfig.privateKeyContent" type="textarea"
                       placeholder="请上传apiclient_key.perm证书"
@@ -45,9 +49,9 @@
                        :limit="1"
                        :accept="fileAccept"
                        :headers="header"
-                       :action="pemUploadAction"
+                       action=""
                        :before-upload="pemFileBeforeUpload"
-                       :on-success="privateKeyUploadSuccess"
+                       :http-request="privateKeyUpload"
             >
               <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
             </el-upload>
@@ -62,9 +66,9 @@
                        :limit="1"
                        :accept="fileAccept"
                        :headers="header"
-                       :action="pemUploadAction"
+                       action=""
                        :before-upload="pemFileBeforeUpload"
-                       :on-success="privateCertUploadSuccess"
+                       :http-request="privateCertUpload"
             >
               <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
             </el-upload>
@@ -83,10 +87,28 @@
 </template>
 <script>
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
-import {createWechatChannel, getWechatChannel, updateWechatChannel} from "@/api/pay/channel";
+import {createChannel, getChannel, updateChannel} from "@/api/pay/channel";
+
+const defaultForm = {
+  code: '',
+  status: null,
+  remark: '',
+  feeRate: null,
+  appId: '',
+  merchantId: null,
+  weChatConfig: {
+    appId: '',
+    mchId: '',
+    apiVersion: '',
+    mchKey: '',
+    privateKeyContent: '',
+    privateCertContent: '',
+    apiV3Key:'',
+  }
+}
 
 export default {
-  name: "wechatJsApiForm",
+  name: "wechatChannelForm",
   components: {},
   props: {
     // 传输的参数
@@ -96,7 +118,7 @@ export default {
       // 是否修改
       "edit": false,
       // 是否显示
-      "open": false,
+      "wechatOpen": false,
       // 应用ID
       "appId": null,
       // 渠道编码
@@ -112,22 +134,7 @@ export default {
   },
   data() {
     return {
-      form: {
-        code: undefined,
-        status: undefined,
-        remark: undefined,
-        feeRate: undefined,
-        appId: undefined,
-        merchantId: undefined,
-        weChatConfig: {
-          appId: undefined,
-          mchId: undefined,
-          apiVersion: undefined,
-          mchKey: undefined,
-          privateKeyContent: undefined,
-          privateCertContent: undefined,
-        }
-      },
+      form: JSON.parse(JSON.stringify(defaultForm)),
       rules: {
         feeRate: [{
           required: true,
@@ -147,12 +154,12 @@ export default {
         status: [{
           required: true,
           message: '渠道状态不能为空',
-          trigger: 'change'
+          trigger: 'blur'
         }],
         'weChatConfig.apiVersion': [{
           required: true,
           message: 'API版本不能为空',
-          trigger: 'change'
+          trigger: 'blur'
         }],
         'weChatConfig.mchKey': [{
           required: true,
@@ -169,12 +176,16 @@ export default {
           message: '请上传apiclient_cert.perm证书',
           trigger: 'blur'
         }],
+        'weChatConfig.apiV3Key': [{
+          required: true,
+          message: '请上传apiV3秘钥值',
+          trigger: 'blur'
+        }],
       },
       // 文件上传的header
       header: {
         "Authorization": null
       },
-      pemUploadAction: 'http://127.0.0.1:48080/api/pay/channel/parsing-pem',
       fileAccept: ".pem",
       // 渠道状态 数据字典
       statusDictDatas: getDictDatas(DICT_TYPE.PAY_CHANNEL_STATUS),
@@ -185,51 +196,66 @@ export default {
     transferParam: {
       deep: true,  // 深度监听
       handler(newVal) {
-        this.form.code = newVal.payCode;
-        this.form.appId = newVal.appId;
-        this.form.merchantId = newVal.payMerchant.id;
-        // 只有在初次进来为编辑 并且为加载中的时候才回去请求数据
-        if (newVal.edit === true && newVal.loading) {
-          this.init();
+        if (newVal.wechatOpen) {
+          this.form.code = newVal.payCode;
+          this.form.appId = newVal.appId;
+          this.form.merchantId = newVal.payMerchant.id;
+          // 只有在初次进来为编辑 并且为加载中的时候才回去请求数据
+          if (newVal.edit && newVal.loading) {
+            this.init();
+          }
         }
       }
     }
   },
-  created() {
-    this.header.Authorization = "Bearer " + this.$store.getters.token;
-  },
   methods: {
     init() {
-      getWechatChannel(this.transferParam.payMerchant.id, this.transferParam.appId, this.transferParam.payCode)
+      getChannel(this.transferParam.payMerchant.id, this.transferParam.appId, this.transferParam.payCode)
         .then(response => {
-          this.form = response.data;
+          this.form.id = response.data.id;
+          this.form.feeRate = response.data.feeRate;
+          this.form.appId = response.data.appId;
+          this.form.status = response.data.status;
+          this.form.remark = response.data.remark;
+
+          let config = JSON.parse(response.data.config);
+          this.form.weChatConfig.appId = config.appId;
+          this.form.weChatConfig.apiVersion = config.apiVersion;
+          this.form.weChatConfig.mchId = config.mchId;
+          this.form.weChatConfig.mchKey = config.mchKey;
+          this.form.weChatConfig.privateKeyContent = config.privateKeyContent;
+          this.form.weChatConfig.privateCertContent = config.privateCertContent;
+          this.form.weChatConfig.apiV3Key = config.apiV3Key;
           this.transferParam.loading = false;
         })
     },
     close() {
-      this.transferParam.open = false;
-      this.$refs['wechatJsApiForm'].resetFields();
+      this.transferParam.wechatOpen = false;
+      this.form = JSON.parse(JSON.stringify(defaultForm));
     },
     handleConfirm() {
       this.$refs['wechatJsApiForm'].validate(valid => {
         if (!valid) {
           return
         }
+        let data = this.form;
+        data.config = JSON.stringify(this.form.weChatConfig);
         if (this.transferParam.edit) {
-          updateWechatChannel(this.form).then(response => {
-            if (response.code === 0 ) {
+          updateChannel(data).then(response => {
+            if (response.code === 0) {
               this.msgSuccess("修改成功");
               this.close();
             }
 
           })
         } else {
-          createWechatChannel(this.form).then(response => {
-           if (response.code === 0) {
-             this.msgSuccess("新增成功");
-             this.$parent.refreshTable();
-             this.close();
-           }
+
+          createChannel(data).then(response => {
+            if (response.code === 0) {
+              this.msgSuccess("新增成功");
+              this.$parent.refreshTable();
+              this.close();
+            }
           });
         }
       });
@@ -246,11 +272,19 @@ export default {
       }
       return isRightSize
     },
-    privateKeyUploadSuccess(response) {
-      this.form.weChatConfig.privateKeyContent = response.data;
+    privateKeyUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.form.weChatConfig.privateKeyContent = e.target.result
+      }
+      readFile.readAsText(event.file);
     },
-    privateCertUploadSuccess(response) {
-      this.form.weChatConfig.privateCertContent = response.data;
+    privateCertUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.form.weChatConfig.privateCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
     }
   }
 }

yudao-admin-ui/src/views/pay/app/index.vue

@@ -57,68 +57,104 @@
       <el-table-column label="支付宝配置" align="center">
         <el-table-column :label="payChannelEnum.ALIPAY_APP.name" align="center">
           <template slot-scope="scope">
-            <el-button type="success" icon="el-icon-check" circle
-                       v-if="scope.row.payChannel.alipayApp === sysCommonStatusEnum.ENABLE"></el-button>
-            <el-button type="danger" icon="el-icon-close" circle
-                       v-if="scope.row.payChannel.alipayApp === sysCommonStatusEnum.DISABLE"></el-button>
+            <el-button
+              type="success" icon="el-icon-check" circle
+              @click="handleUpdateChannel(scope.row,payChannelEnum.ALIPAY_APP.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayApp === sysCommonStatusEnum.ENABLE">
+            </el-button>
+            <el-button
+              type="danger" icon="el-icon-close" circle
+              @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_APP.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayApp === sysCommonStatusEnum.DISABLE">
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.ALIPAY_PC.name" align="center">
           <template slot-scope="scope">
-            <el-button type="success" icon="el-icon-check" circle
-                       v-if="scope.row.payChannel.alipayPc === sysCommonStatusEnum.ENABLE"></el-button>
-            <el-button type="danger" icon="el-icon-close" circle
-                       v-if="scope.row.payChannel.alipayPc === sysCommonStatusEnum.DISABLE"></el-button>
+            <el-button
+              type="success" icon="el-icon-check" circle
+              @click="handleUpdateChannel(scope.row,payChannelEnum.ALIPAY_PC.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayPc === sysCommonStatusEnum.ENABLE">
+            </el-button>
+            <el-button
+              type="danger" icon="el-icon-close" circle
+              @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_PC.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayPc === sysCommonStatusEnum.DISABLE">
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.ALIPAY_WAP.name" align="center">
           <template slot-scope="scope">
-            <el-button type="success" icon="el-icon-check" circle
-                       v-if="scope.row.payChannel.alipayWap === sysCommonStatusEnum.ENABLE"></el-button>
-            <el-button type="danger" icon="el-icon-close" circle
-                       v-if="scope.row.payChannel.alipayWap === sysCommonStatusEnum.DISABLE"></el-button>
+            <el-button
+              type="success" icon="el-icon-check" circle
+              @click="handleUpdateChannel(scope.row,payChannelEnum.ALIPAY_WAP.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayWap === sysCommonStatusEnum.ENABLE">
+            </el-button>
+            <el-button
+              type="danger" icon="el-icon-close" circle
+              @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_WAP.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayWap === sysCommonStatusEnum.DISABLE">
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.ALIPAY_QR.name" align="center">
           <template slot-scope="scope">
-            <el-button type="success" icon="el-icon-check" circle
-                       v-if="scope.row.payChannel.alipayQr === sysCommonStatusEnum.ENABLE"></el-button>
-            <el-button type="danger" icon="el-icon-close" circle
-                       v-if="scope.row.payChannel.alipayQr === sysCommonStatusEnum.DISABLE"></el-button>
+            <el-button
+              type="success" icon="el-icon-check" circle
+              @click="handleUpdateChannel(scope.row,payChannelEnum.ALIPAY_QR.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayQr === sysCommonStatusEnum.ENABLE">
+
+            </el-button>
+            <el-button
+              type="danger" icon="el-icon-close" circle
+              @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_QR.code,payType.ALIPAY)"
+              v-if="scope.row.payChannel.alipayQr === sysCommonStatusEnum.DISABLE">
+
+            </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 slot-scope="scope">
-            <el-button type="success" icon="el-icon-check" circle
-                       @click="handleUpdateChannel(scope.row,payChannelEnum.WX_LITE.code)"
-                       v-if="scope.row.payChannel.wxLite === sysCommonStatusEnum.ENABLE"></el-button>
-            <el-button type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_LITE.code)"
-                       v-if="scope.row.payChannel.wxLite === sysCommonStatusEnum.DISABLE"></el-button>
+            <el-button
+              type="success" icon="el-icon-check" circle
+              @click="handleUpdateChannel(scope.row,payChannelEnum.WX_LITE.code,payType.WECHAT)"
+              v-if="scope.row.payChannel.wxLite === sysCommonStatusEnum.ENABLE">
+            </el-button>
+            <el-button
+              type="danger" icon="el-icon-close" circle
+              @click="handleCreateChannel(scope.row,payChannelEnum.WX_LITE.code,payType.WECHAT)"
+              v-if="scope.row.payChannel.wxLite === sysCommonStatusEnum.DISABLE">
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.WX_PUB.name" align="center">
           <template slot-scope="scope">
             <el-button
               type="success" icon="el-icon-check" circle
-              @click="handleUpdateChannel(scope.row,payChannelEnum.WX_PUB.code)"
+              @click="handleUpdateChannel(scope.row,payChannelEnum.WX_PUB.code,payType.WECHAT)"
               v-if="scope.row.payChannel.wxPub === sysCommonStatusEnum.ENABLE">
             </el-button>
-            <el-button type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_PUB.code)"
-                       v-if="scope.row.payChannel.wxPub === sysCommonStatusEnum.DISABLE"></el-button>
+            <el-button
+              type="danger" icon="el-icon-close" circle
+              @click="handleCreateChannel(scope.row,payChannelEnum.WX_PUB.code,payType.WECHAT)"
+              v-if="scope.row.payChannel.wxPub === sysCommonStatusEnum.DISABLE">
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.WX_APP.name" align="center">
           <template slot-scope="scope">
-            <el-button type="success" icon="el-icon-check" circle
-                       @click="handleUpdateChannel(scope.row,payChannelEnum.WX_APP.code)"
-                       v-if="scope.row.payChannel.wxApp === sysCommonStatusEnum.ENABLE"></el-button>
-            <el-button type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_APP.code)"
-                       v-if="scope.row.payChannel.wxApp === sysCommonStatusEnum.DISABLE"></el-button>
+            <el-button
+              type="success" icon="el-icon-check" circle
+              @click="handleUpdateChannel(scope.row,payChannelEnum.WX_APP.code,payType.WECHAT)"
+              v-if="scope.row.payChannel.wxApp === sysCommonStatusEnum.ENABLE">
+            </el-button>
+            <el-button
+              type="danger" icon="el-icon-close" circle
+              @click="handleCreateChannel(scope.row,payChannelEnum.WX_APP.code,payType.WECHAT)"
+              v-if="scope.row.payChannel.wxApp === sysCommonStatusEnum.DISABLE">
+            </el-button>
           </template>
         </el-table-column>
       </el-table-column>
@@ -186,21 +222,24 @@
       </div>
     </el-dialog>
 
-    <wechat-js-api-form :transferParam="wechatChannelParam"></wechat-js-api-form>
+    <wechat-channel-form :transferParam="channelParam"></wechat-channel-form>
+    <ali-pay-channel-form :transferParam="channelParam"></ali-pay-channel-form>
   </div>
 </template>
 
 <script>
 import {createApp, updateApp, changeAppStatus, deleteApp, getApp, getAppPage, exportAppExcel} from "@/api/pay/app";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
-import {PayChannelEnum, SysCommonStatusEnum} from "@/utils/constants";
+import {PayType, PayChannelEnum, SysCommonStatusEnum} from "@/utils/constants";
 import {getMerchantListByName} from "@/api/pay/merchant";
-import wechatJsApiForm from "@/views/pay/app/components/wechatJsApiForm";
+import wechatChannelForm from "@/views/pay/app/components/wechatChannelForm";
+import aliPayChannelForm from "@/views/pay/app/components/aliPayChannelForm";
 
 export default {
   name: "App",
   components: {
-    "wechatJsApiForm": wechatJsApiForm
+    "wechatChannelForm": wechatChannelForm,
+    "aliPayChannelForm": aliPayChannelForm
   },
   data() {
     return {
@@ -243,16 +282,20 @@ export default {
       sysCommonStatusEnum: SysCommonStatusEnum,
       // 支付渠道枚举
       payChannelEnum: PayChannelEnum,
+      // 支付类型
+      payType: PayType,
       // 商户列表
       merchantList: [],
       // 是否显示支付窗口
       payOpen: false,
       // 微信组件传参参数
-      wechatChannelParam: {
+      channelParam: {
         // 是否修改
-        "edit":false,
-        // 是否显示
-        "open":false,
+        "edit": false,
+        // 微信是否显示
+        "wechatOpen": false,
+        // 支付宝是否显示
+        "aliPayOpen": false,
         // 应用ID
         "appId": null,
         // 渠道编码
@@ -279,7 +322,6 @@ export default {
       this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
       // 执行查询
       getAppPage(params).then(response => {
-        console.log(response.data);
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
@@ -355,9 +397,9 @@ export default {
         // 修改的提交
         if (this.form.id != null) {
           updateApp(this.form).then(response => {
-             this.msgSuccess("修改成功");
-             this.open = false;
-             this.getList();
+            this.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
           });
           return;
         }
@@ -407,33 +449,47 @@ export default {
      */
     handleGetMerchantListByName(name) {
       getMerchantListByName(name).then(response => {
-        console.log(response)
         this.merchantList = response.data;
       });
     },
     /**
      * 修改支付渠道信息
      */
-    handleUpdateChannel(row, payCode) {
-      this.wechatChannelParam.edit = true;
-      this.wechatChannelParam.loading = true;
-      this.wechatChannelParam.appId = row.id;
-      this.wechatChannelParam.payCode = payCode;
-      this.wechatChannelParam.payMerchant = row.payMerchant;
-      this.wechatChannelParam.open = true;
+    handleUpdateChannel(row, payCode, type) {
+      this.settingChannelParam(row, payCode, type)
+      this.channelParam.edit = true;
+      this.channelParam.loading = true;
+
     },
     /**
      * 新增支付渠道信息
      */
-    handleCreateChannel(row, payCode) {
-      this.wechatChannelParam.edit = false;
-      this.wechatChannelParam.loading = false;
-      this.wechatChannelParam.appId = row.id;
-      this.wechatChannelParam.payCode = payCode;
-      this.wechatChannelParam.payMerchant = row.payMerchant;
-      this.wechatChannelParam.open = true;
+    handleCreateChannel(row, payCode, type) {
+      this.settingChannelParam(row, payCode, type)
+      this.channelParam.edit = false;
+      this.channelParam.loading = false;
+
+
     },
-    refreshTable(){
+    /**
+     * 设置支付渠道信息
+     */
+    settingChannelParam(row, payCode, type) {
+      if (type === PayType.WECHAT) {
+        this.channelParam.wechatOpen = true;
+        this.channelParam.aliPayOpen = false;
+      }
+      if (type === PayType.ALIPAY) {
+        this.channelParam.aliPayOpen = true;
+        this.channelParam.wechatOpen = false;
+      }
+      this.channelParam.edit = false;
+      this.channelParam.loading = false;
+      this.channelParam.appId = row.id;
+      this.channelParam.payCode = payCode;
+      this.channelParam.payMerchant = row.payMerchant;
+    },
+    refreshTable() {
       this.getList();
     }
   }