Merge remote-tracking branch 'origin/feature/mall_product' into feature/mall_product

yudao-ui-admin/src/utils/constants.js

@@ -180,14 +180,6 @@ export const PayDisplayModeEnum = {
   }
 }
 
-/**
- * 支付类型枚举
- */
-export const PayType = {
-  WECHAT: "WECHAT",
-  ALIPAY: "ALIPAY"
-}
-
 /**
  * 支付订单状态枚举
  */

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

@@ -1,289 +0,0 @@
-<template>
-  <div>
-    <el-dialog :visible.sync="transferParam.aliPayOpen" :title="title" @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 this.getDictDatas(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="aliPayConfig.serverUrl">
-          <el-radio-group v-model="form.aliPayConfig.serverUrl" size="medium">
-            <el-radio label="https://openapi.alipay.com/gateway.do">线上环境</el-radio>
-            <el-radio label="https://openapi-sandbox.dl.alipaydev.com/gateway.do">沙箱环境</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 key="RSA2" label="RSA2">RSA2</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  key="公钥模式" :label="1">公钥模式</el-radio>
-            <el-radio  key="证书模式" :label="2">证书模式</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 {createChannel, getChannel, updateChannel} from "@/api/pay/channel";
-
-const defaultForm = {
-  code: '',
-  status: null,
-  remark: '',
-  feeRate: null,
-  appId: '',
-  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,
-    }
-  },
-  data() {
-    return {
-      title:'',
-      form: JSON.parse(JSON.stringify(defaultForm)),
-      rules: {
-        feeRate: [{ required: true,  message: '请输入渠道费率', trigger: 'blur' }],
-        status: [{ required: true,  message: '渠道状态不能为空',  trigger: 'blur' }],
-        'aliPayConfig.appId': [{ required: true, message: '请输入开放平台上创建的应用的 ID', 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",
-    }
-  },
-  watch: {
-    transferParam: {
-      deep: true,  // 深度监听
-      handler(newVal) {
-        if (newVal.aliPayOpen) {
-          this.form.code = newVal.payCode;
-          this.form.appId = newVal.appId;
-          // 只有在初次进来为编辑 并且为加载中的时候才回去请求数据
-          if (newVal.edit === true && newVal.loading) {
-            this.title = "编辑支付渠道";
-            this.init();
-          } else {
-            this.title = "创建支付渠道";
-          }
-        }
-      }
-    }
-  },
-  methods: {
-    init() {
-      getChannel(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.$modal.msgSuccess("修改成功");
-              this.close();
-            }
-          })
-        } else {
-          createChannel(data).then(response => {
-            if (response.code === 0) {
-              this.$modal.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-ui-admin/src/views/pay/app/components/alipayChannelForm.vue

@@ -0,0 +1,263 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="dialogVisible" :title="title" @closed="close" append-to-body width="800px">
+      <el-form ref="form" :model="formData" :rules="rules" size="medium" label-width="100px" v-loading="formLoading">
+        <el-form-item label-width="180px" label="渠道费率" prop="feeRate">
+          <el-input v-model="formData.feeRate" placeholder="请输入渠道费率" clearable :style="{width: '100%'}">
+            <template slot="append">%</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label-width="180px" label="开放平台 APPID" prop="config.appId">
+          <el-input v-model="formData.config.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="formData.status" size="medium">
+            <el-radio v-for="dict in this.getDictDatas(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="config.serverUrl">
+          <el-radio-group v-model="formData.config.serverUrl" size="medium">
+            <el-radio label="https://openapi.alipay.com/gateway.do">线上环境</el-radio>
+            <el-radio label="https://openapi-sandbox.dl.alipaydev.com/gateway.do">沙箱环境</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label-width="180px" label="算法类型" prop="config.signType">
+          <el-radio-group v-model="formData.config.signType" size="medium">
+            <el-radio key="RSA2" label="RSA2">RSA2</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label-width="180px" label="公钥类型" prop="config.mode">
+          <el-radio-group v-model="formData.config.mode" size="medium">
+            <el-radio  key="公钥模式" :label="1">公钥模式</el-radio>
+            <el-radio  key="证书模式" :label="2">证书模式</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="formData.config.mode === 1">
+          <el-form-item label-width="180px" label="应用私钥" prop="config.privateKey">
+            <el-input type="textarea" :autosize="{minRows: 8, maxRows: 8}" v-model="formData.config.privateKey"
+                      placeholder="请输入应用私钥" clearable :style="{width: '100%'}">
+            </el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="支付宝公钥" prop="config.alipayPublicKey">
+            <el-input
+              type="textarea"
+              :autosize="{minRows: 8, maxRows: 8}"
+              v-model="formData.config.alipayPublicKey"
+              placeholder="请输入支付宝公钥" clearable
+              :style="{width: '100%'}">
+            </el-input>
+          </el-form-item>
+        </div>
+        <div v-if="formData.config.mode === 2">
+          <el-form-item label-width="180px" label="商户公钥应用证书" prop="config.appCertContent">
+            <el-input v-model="formData.config.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="config.alipayPublicCertContent">
+            <el-input v-model="formData.config.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="config.rootCertContent">
+            <el-input
+              v-model="formData.config.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="formData.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="submitForm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { createChannel, getChannel, updateChannel } from "@/api/pay/channel";
+import { CommonStatusEnum } from "@/utils/constants";
+
+export default {
+  name: "alipayChannelForm",
+  data() {
+    return {
+      dialogVisible: false,
+      formLoading: false,
+      title:'',
+      formData: {
+        appId: '',
+        code: '',
+        status: undefined,
+        feeRate: undefined,
+        remark: '',
+        config: {
+          appId: '',
+          serverUrl: null,
+          signType: '',
+          mode: null,
+          privateKey: '',
+          alipayPublicKey: '',
+          appCertContent: '',
+          alipayPublicCertContent: '',
+          rootCertContent: ''
+        }
+      },
+      rules: {
+        feeRate: [{ required: true,  message: '请输入渠道费率', trigger: 'blur' }],
+        status: [{ required: true,  message: '渠道状态不能为空',  trigger: 'blur' }],
+        'config.appId': [{ required: true, message: '请输入开放平台上创建的应用的 ID', trigger: 'blur' }],
+        'config.serverUrl': [{ required: true, message: '请传入网关地址', trigger: 'blur' }],
+        'config.signType': [{ required: true, message: '请传入签名算法类型', trigger: 'blur' }],
+        'config.mode': [{ required: true, message: '公钥类型不能为空', trigger: 'blur'}],
+        'config.privateKey': [{ required: true, message: '请输入商户私钥', trigger: 'blur' }],
+        'config.alipayPublicKey': [{ required: true, message: '请输入支付宝公钥字符串', trigger: 'blur' }],
+        'config.appCertContent': [{ required: true,  message: '请上传商户公钥应用证书', trigger: 'blur' }],
+        'config.alipayPublicCertContent': [{ required: true, message: '请上传支付宝公钥证书', trigger: 'blur'}],
+        'config.rootCertContent': [{ required: true, message: '请上传指定根证书', trigger: 'blur' }],
+      },
+      fileAccept: ".crt",
+    }
+  },
+  methods: {
+    open(appId, code) {
+      this.dialogVisible = true;
+      this.formLoading = true;
+      this.reset(appId, code);
+      getChannel(appId, code).then(response => {
+        if (response.data && response.data.id) {
+          this.formData = response.data;
+          this.formData.config = JSON.parse(response.data.config);
+        }
+        this.title = !this.formData.id ? '创建支付渠道' : '编辑支付渠道'
+      }).finally(() => {
+        this.formLoading = false;
+      });
+    },
+    close() {
+      this.dialogVisible = false;
+      this.reset(undefined, undefined);
+    },
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        const data = { ...this.formData };
+        data.config = JSON.stringify(this.formData.config);
+        if (!data.id) {
+          createChannel(data).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.$emit('success')
+            this.close();
+          });
+        } else {
+          updateChannel(data).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.$emit('success')
+            this.close();
+          })
+        }
+      });
+    },
+    /** 重置表单 */
+    reset(appId, code) {
+      this.formData = {
+        appId: appId,
+        code: code,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: null,
+        config: {
+          appId: '',
+          serverUrl: null,
+          signType: 'RSA2',
+          mode: null,
+          privateKey: '',
+          alipayPublicKey: '',
+          appCertContent: '',
+          alipayPublicCertContent: '',
+          rootCertContent: ''
+        }
+      }
+      this.resetForm('form')
+    },
+    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.formData.config.appCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    },
+    alipayPublicCertUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.formData.config.alipayPublicCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    },
+    rootCertUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.formData.config.rootCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    }
+  }
+}
+</script>

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

@@ -1,328 +0,0 @@
-<template>
-  <div>
-    <el-dialog :visible.sync="transferParam.wechatOpen" :title="title" @close="close" append-to-body width="800px">
-      <el-form ref="wechatJsApiForm" :model="form" :rules="rules" size="medium" label-width="120px"
-               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="weChatConfig.appId">
-          <el-input v-model="form.weChatConfig.appId" placeholder="请输入公众号 APPID" clearable :style="{width: '100%'}">
-          </el-input>
-        </el-form-item>
-        <el-form-item label-width="180px" label="商户号" prop="weChatConfig.mchId">
-          <el-input v-model="form.weChatConfig.mchId" :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="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 }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <div v-if="form.weChatConfig.apiVersion === 'v2'">
-          <el-form-item label-width="180px" label="商户密钥" prop="weChatConfig.mchKey">
-            <el-input v-model="form.weChatConfig.mchKey" placeholder="请输入商户密钥" clearable
-                      :style="{width: '100%'}" type="textarea" :autosize="{minRows: 8, maxRows: 8}"></el-input>
-          </el-form-item>
-          <el-form-item label-width="180px" label="apiclient_cert.p12 证书" prop="weChatConfig.keyContent">
-            <el-input v-model="form.weChatConfig.keyContent" type="textarea"
-                      placeholder="请上传 apiclient_cert.p12 证书"
-                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
-          </el-form-item>
-          <el-form-item label-width="180px" label="">
-            <el-upload :limit="1" accept=".p12" action=""
-                       :before-upload="p12FileBeforeUpload"
-                       :http-request="keyContentUpload">
-              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
-        <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 证书"
-                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
-          </el-form-item>
-          <el-form-item label-width="180px" label="" prop="privateKeyContentFile">
-            <el-upload ref="privateKeyContentFile"
-                       :limit="1"
-                       accept=".pem"
-                       action=""
-                       :before-upload="pemFileBeforeUpload"
-                       :http-request="privateKeyContentUpload"
-            >
-              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
-            </el-upload>
-          </el-form-item>
-          <el-form-item label-width="180px" label="apiclient_cert.perm证书" prop="weChatConfig.privateCertContent">
-            <el-input v-model="form.weChatConfig.privateCertContent" type="textarea"
-                      placeholder="请上传apiclient_cert.perm证书"
-                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
-          </el-form-item>
-          <el-form-item label-width="180px" label="" prop="privateCertContentFile">
-            <el-upload ref="privateCertContentFile"
-                       :limit="1"
-                       accept=".pem"
-                       action=""
-                       :before-upload="pemFileBeforeUpload"
-                       :http-request="privateCertContentUpload"
-            >
-              <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-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: '',
-  weChatConfig: {
-    appId: '',
-    mchId: '',
-    apiVersion: '',
-    mchKey: '',
-    keyContent: '',
-    privateKeyContent: '',
-    privateCertContent: '',
-    apiV3Key:'',
-  }
-}
-
-export default {
-  name: "wechatChannelForm",
-  components: {},
-  props: {
-    // 传输的参数
-    transferParam: {
-      // 加载动画
-      "loading": false,
-      // 是否修改
-      "edit": false,
-      // 是否显示
-      "wechatOpen": false,
-      // 应用ID
-      "appId": null,
-      // 渠道编码
-      "payCode": null,
-    }
-  },
-  data() {
-    return {
-      title:'',
-      form: JSON.parse(JSON.stringify(defaultForm)),
-      rules: {
-        feeRate: [{
-          required: true,
-          message: '请输入渠道费率',
-          trigger: 'blur'
-        }],
-        'weChatConfig.mchId': [{
-          required: true,
-          message: '请传入商户号',
-          trigger: 'blur'
-        }],
-        'weChatConfig.appId': [{
-          required: true,
-          message: '请输入公众号APPID',
-          trigger: 'blur'
-        }],
-        status: [{
-          required: true,
-          message: '渠道状态不能为空',
-          trigger: 'blur'
-        }],
-        'weChatConfig.apiVersion': [{
-          required: true,
-          message: 'API版本不能为空',
-          trigger: 'blur'
-        }],
-        'weChatConfig.mchKey': [{
-          required: true,
-          message: '请输入商户密钥',
-          trigger: 'blur'
-        }],
-        'weChatConfig.keyContent': [{
-          required: true,
-          message: '请上传 apiclient_cert.p12 证书',
-          trigger: 'blur'
-        }],
-        'weChatConfig.privateKeyContent': [{
-          required: true,
-          message: '请上传 apiclient_key.perm 证书',
-          trigger: 'blur'
-        }],
-        'weChatConfig.privateCertContent': [{
-          required: true,
-          message: '请上传 apiclient_cert.perm证 书',
-          trigger: 'blur'
-        }],
-        'weChatConfig.apiV3Key': [{
-          required: true,
-          message: '请上传 api V3 密钥值',
-          trigger: 'blur'
-        }],
-      },
-      // 渠道状态 数据字典
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
-      versionDictDatas: getDictDatas(DICT_TYPE.PAY_CHANNEL_WECHAT_VERSION),
-    }
-  },
-  watch: {
-    transferParam: {
-      deep: true,  // 深度监听
-      handler(newVal) {
-        if (newVal.wechatOpen) {
-          this.form.code = newVal.payCode;
-          this.form.appId = newVal.appId;
-          // 只有在初次进来为编辑 并且为加载中的时候才回去请求数据
-          if (newVal.edit && newVal.loading) {
-            this.title = "编辑支付渠道";
-            this.init();
-          } else {
-            this.title = "创建支付渠道";
-          }
-        }
-      }
-    }
-  },
-  methods: {
-    init() {
-      getChannel(this.transferParam.appId, this.transferParam.payCode)
-        .then(response => {
-          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.keyContent = config.keyContent;
-          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.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) {
-          updateChannel(data).then(response => {
-            if (response.code === 0) {
-              this.$modal.msgSuccess("修改成功");
-              this.close();
-            }
-          })
-        } else {
-
-          createChannel(data).then(response => {
-            if (response.code === 0) {
-              this.$modal.msgSuccess("新增成功");
-              this.$parent.refreshTable();
-              this.close();
-            }
-          });
-        }
-      });
-    },
-    /**
-     * apiclient_cert.p12、apiclient_cert.pem、apiclient_key.pem 上传前的校验
-     */
-    fileBeforeUpload(file, fileAccept) {
-      let format = '.' + file.name.split(".")[1];
-      if (format !== fileAccept) {
-        debugger
-        this.$message.error('请上传指定格式"' + fileAccept + '"文件');
-        return false;
-      }
-      let isRightSize = file.size / 1024 / 1024 < 2
-      if (!isRightSize) {
-        this.$message.error('文件大小超过 2MB')
-      }
-      return isRightSize
-    },
-    p12FileBeforeUpload(file) {
-      this.fileBeforeUpload(file, '.p12')
-    },
-    pemFileBeforeUpload(file) {
-      this.fileBeforeUpload(file, '.pem')
-    },
-    /**
-     * 读取 apiclient_key.pem 到 privateKeyContent 字段
-     */
-    privateKeyContentUpload(event) {
-      const readFile = new FileReader()
-      readFile.onload = (e) => {
-        this.form.weChatConfig.privateKeyContent = e.target.result
-      }
-      readFile.readAsText(event.file);
-    },
-    /**
-     * 读取 apiclient_cert.pem 到 privateCertContent 字段
-     */
-    privateCertContentUpload(event) {
-      const readFile = new FileReader()
-      readFile.onload = (e) => {
-        this.form.weChatConfig.privateCertContent = e.target.result
-      }
-      readFile.readAsText(event.file);
-    },
-    /**
-     * 读取 apiclient_cert.p12 到 keyContent 字段
-     */
-    keyContentUpload(event) {
-      const readFile = new FileReader()
-      readFile.onload = (e) => {
-        this.form.weChatConfig.keyContent = e.target.result.split(',')[1]
-      }
-      readFile.readAsDataURL(event.file); // 读成 base64
-    }
-  }
-}
-
-</script>
-<style scoped>
-
-</style>

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

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="dialogVisible" :title="title" @close="close" append-to-body width="800px">
+      <el-form ref="form" :model="formData" :rules="rules" size="medium" label-width="120px"
+               v-loading="formLoading">
+        <el-form-item label-width="180px" label="渠道费率" prop="feeRate">
+          <el-input v-model="formData.feeRate" placeholder="请输入渠道费率" clearable :style="{width: '100%'}">
+            <template slot="append">%</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label-width="180px" label="公众号 APPID" prop="config.appId">
+          <el-input v-model="formData.config.appId" placeholder="请输入公众号 APPID" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label-width="180px" label="商户号" prop="config.mchId">
+          <el-input v-model="formData.config.mchId" :style="{width: '100%'}"></el-input>
+        </el-form-item>
+        <el-form-item label-width="180px" label="渠道状态" prop="status">
+          <el-radio-group v-model="formData.status" size="medium">
+            <el-radio v-for="dict in this.getDictDatas(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="API 版本" prop="config.apiVersion">
+          <el-radio-group v-model="formData.config.apiVersion" size="medium">
+            <el-radio label="v2">v2</el-radio>
+            <el-radio label="v3">v3</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="formData.config.apiVersion === 'v2'">
+          <el-form-item label-width="180px" label="商户密钥" prop="config.mchKey">
+            <el-input v-model="formData.config.mchKey" placeholder="请输入商户密钥" clearable
+                      :style="{width: '100%'}" type="textarea" :autosize="{minRows: 8, maxRows: 8}"></el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="apiclient_cert.p12 证书" prop="config.keyContent">
+            <el-input v-model="formData.config.keyContent" type="textarea"
+                      placeholder="请上传 apiclient_cert.p12 证书"
+                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="">
+            <el-upload :limit="1" accept=".p12" action=""
+                       :before-upload="p12FileBeforeUpload"
+                       :http-request="keyContentUpload">
+              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+        </div>
+        <div v-if="formData.config.apiVersion === 'v3'">
+          <el-form-item label-width="180px" label="API V3 密钥" prop="config.apiV3Key">
+            <el-input v-model="formData.config.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="config.privateKeyContent">
+            <el-input v-model="formData.config.privateKeyContent" type="textarea"
+                      placeholder="请上传 apiclient_key.perm 证书"
+                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="" prop="privateKeyContentFile">
+            <el-upload ref="privateKeyContentFile"
+                       :limit="1"
+                       accept=".pem"
+                       action=""
+                       :before-upload="pemFileBeforeUpload"
+                       :http-request="privateKeyContentUpload"
+            >
+              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label-width="180px" label="apiclient_cert.perm证书" prop="config.privateCertContent">
+            <el-input v-model="formData.config.privateCertContent" type="textarea"
+                      placeholder="请上传apiclient_cert.perm证书"
+                      readonly :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+          <el-form-item label-width="180px" label="" prop="privateCertContentFile">
+            <el-upload ref="privateCertContentFile"
+                       :limit="1"
+                       accept=".pem"
+                       action=""
+                       :before-upload="pemFileBeforeUpload"
+                       :http-request="privateCertContentUpload"
+            >
+              <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="formData.remark" :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { createChannel, getChannel, updateChannel } from "@/api/pay/channel";
+import { CommonStatusEnum } from "@/utils/constants";
+
+export default {
+  name: "weixinChannelForm",
+  data() {
+    return {
+      dialogVisible: false,
+      formLoading: false,
+      title:'',
+      formData: {
+        appId: '',
+        code: '',
+        status: undefined,
+        feeRate: undefined,
+        remark: '',
+        config: {
+          appId: '',
+          mchId: '',
+          apiVersion: '',
+          mchKey: '',
+          keyContent: '',
+          privateKeyContent: '',
+          privateCertContent: '',
+          apiV3Key:'',
+        }
+      },
+      rules: {
+        feeRate: [{ required: true, message: '请输入渠道费率', trigger: 'blur' }],
+        status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur'}],
+        'config.mchId': [{ required: true, message: '请传入商户号', trigger: 'blur'}],
+        'config.appId': [{ required: true, message: '请输入公众号APPID', trigger: 'blur'}],
+        'config.apiVersion': [{ required: true, message: 'API版本不能为空', trigger: 'blur'}],
+        'config.mchKey': [{ required: true, message: '请输入商户密钥', trigger: 'blur' }],
+        'config.keyContent': [{ required: true, message: '请上传 apiclient_cert.p12 证书', trigger: 'blur' }],
+        'config.privateKeyContent': [{ required: true, message: '请上传 apiclient_key.perm 证书', trigger: 'blur' }],
+        'config.privateCertContent': [{ required: true, message: '请上传 apiclient_cert.perm证 书', trigger: 'blur' }],
+        'config.apiV3Key': [{ required: true, message: '请上传 api V3 密钥值', trigger: 'blur' }],
+      },
+    }
+  },
+  methods: {
+    open(appId, code) {
+      this.dialogVisible = true;
+      this.formLoading = true;
+      this.reset(appId, code);
+      getChannel(appId, code).then(response => {
+        if (response.data && response.data.id) {
+          this.formData = response.data;
+          this.formData.config = JSON.parse(response.data.config);
+        }
+        this.title = !this.formData.id ? '创建支付渠道' : '编辑支付渠道'
+      }).finally(() => {
+        this.formLoading = false;
+      });
+    },
+    close() {
+      this.dialogVisible = false;
+      this.reset(undefined, undefined);
+    },
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        const data = { ...this.formData };
+        data.config = JSON.stringify(this.formData.config);
+        if (!data.id) {
+          createChannel(data).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.$emit('success')
+            this.close();
+          });
+        } else {
+          updateChannel(data).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.$emit('success')
+            this.close();
+          })
+        }
+      });
+    },
+    /** 重置表单 */
+    reset(appId, code) {
+      this.formData = {
+        appId: appId,
+        code: code,
+        status: CommonStatusEnum.ENABLE,
+        feeRate: undefined,
+        remark: '',
+        config: {
+          appId: '',
+          mchId: '',
+          apiVersion: '',
+          mchKey: '',
+          keyContent: '',
+          privateKeyContent: '',
+          privateCertContent: '',
+          apiV3Key:'',
+        }
+      }
+      this.resetForm('form')
+    },
+    /**
+     * apiclient_cert.p12、apiclient_cert.pem、apiclient_key.pem 上传前的校验
+     */
+    fileBeforeUpload(file, fileAccept) {
+      let format = '.' + file.name.split(".")[1];
+      if (format !== fileAccept) {
+        debugger
+        this.$message.error('请上传指定格式"' + fileAccept + '"文件');
+        return false;
+      }
+      let isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    p12FileBeforeUpload(file) {
+      this.fileBeforeUpload(file, '.p12')
+    },
+    pemFileBeforeUpload(file) {
+      this.fileBeforeUpload(file, '.pem')
+    },
+    /**
+     * 读取 apiclient_key.pem 到 privateKeyContent 字段
+     */
+    privateKeyContentUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.formData.config.privateKeyContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    },
+    /**
+     * 读取 apiclient_cert.pem 到 privateCertContent 字段
+     */
+    privateCertContentUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.formData.config.privateCertContent = e.target.result
+      }
+      readFile.readAsText(event.file);
+    },
+    /**
+     * 读取 apiclient_cert.p12 到 keyContent 字段
+     */
+    keyContentUpload(event) {
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.formData.config.keyContent = e.target.result.split(',')[1]
+      }
+      readFile.readAsDataURL(event.file); // 读成 base64
+    }
+  }
+}
+</script>

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

@@ -9,7 +9,7 @@
       </el-form-item>
       <el-form-item label="开启状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择开启状态" clearable>
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label"
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="parseInt(dict.value)" :label="dict.label"
                      :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
@@ -48,60 +48,55 @@
         <el-table-column :label="payChannelEnum.ALIPAY_APP.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" circle
-                       v-if="judgeChannelExist(scope.row.channelCodes,payChannelEnum.ALIPAY_APP.code)"
-                       @click="handleUpdateChannel(scope.row,payChannelEnum.ALIPAY_APP.code,payType.ALIPAY)">
+                       v-if="isChannelExists(scope.row.channelCodes, payChannelEnum.ALIPAY_APP.code)"
+                       @click="handleChannel(scope.row, payChannelEnum.ALIPAY_APP.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_APP.code,payType.ALIPAY)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.ALIPAY_APP.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.ALIPAY_PC.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" 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="handleChannel(scope.row, payChannelEnum.ALIPAY_PC.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_PC.code,payType.ALIPAY)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.ALIPAY_PC.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.ALIPAY_WAP.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" circle
-                       v-if="judgeChannelExist(scope.row.channelCodes,payChannelEnum.ALIPAY_WAP.code)"
-                       @click="handleUpdateChannel(scope.row,payChannelEnum.ALIPAY_WAP.code,payType.ALIPAY)">
+                       v-if="isChannelExists(scope.row.channelCodes, payChannelEnum.ALIPAY_WAP.code)"
+                       @click="handleChannel(scope.row, payChannelEnum.ALIPAY_WAP.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_WAP.code,payType.ALIPAY)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.ALIPAY_WAP.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.ALIPAY_QR.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" 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="handleChannel(scope.row, payChannelEnum.ALIPAY_QR.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_QR.code,payType.ALIPAY)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.ALIPAY_QR.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.ALIPAY_BAR.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" circle
-                       v-if="judgeChannelExist(scope.row.channelCodes,payChannelEnum.ALIPAY_BAR.code)"
-                       @click="handleUpdateChannel(scope.row,payChannelEnum.ALIPAY_BAR.code,payType.ALIPAY)">
+                       v-if="isChannelExists(scope.row.channelCodes, payChannelEnum.ALIPAY_BAR.code)"
+                       @click="handleChannel(scope.row,payChannelEnum.ALIPAY_BAR.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.ALIPAY_BAR.code,payType.ALIPAY)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.ALIPAY_BAR.code)">
             </el-button>
           </template>
         </el-table-column>
@@ -110,60 +105,55 @@
         <el-table-column :label="payChannelEnum.WX_LITE.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" 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="handleChannel(scope.row, payChannelEnum.WX_LITE.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_LITE.code,payType.WECHAT)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.WX_LITE.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.WX_PUB.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" 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="handleChannel(scope.row, payChannelEnum.WX_PUB.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_PUB.code,payType.WECHAT)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.WX_PUB.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.WX_APP.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" 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="handleChannel(scope.row, payChannelEnum.WX_APP.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_APP.code,payType.WECHAT)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.WX_APP.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.WX_NATIVE.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" circle
-                       v-if="judgeChannelExist(scope.row.channelCodes,payChannelEnum.WX_NATIVE.code)"
-                       @click="handleUpdateChannel(scope.row,payChannelEnum.WX_NATIVE.code,payType.WECHAT)">
+                       v-if="isChannelExists(scope.row.channelCodes, payChannelEnum.WX_NATIVE.code)"
+                       @click="handleChannel(scope.row, payChannelEnum.WX_NATIVE.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_NATIVE.code,payType.WECHAT)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.WX_NATIVE.code)">
             </el-button>
           </template>
         </el-table-column>
         <el-table-column :label="payChannelEnum.WX_BAR.name" align="center">
           <template v-slot="scope">
             <el-button type="success" icon="el-icon-check" circle
-                       v-if="judgeChannelExist(scope.row.channelCodes,payChannelEnum.WX_BAR.code)"
-                       @click="handleUpdateChannel(scope.row,payChannelEnum.WX_BAR.code,payType.WECHAT)">
+                       v-if="isChannelExists(scope.row.channelCodes, payChannelEnum.WX_BAR.code)"
+                       @click="handleChannel(scope.row, payChannelEnum.WX_BAR.code)">
             </el-button>
-            <el-button v-else
-                       type="danger" icon="el-icon-close" circle
-                       @click="handleCreateChannel(scope.row,payChannelEnum.WX_BAR.code,payType.WECHAT)">
+            <el-button v-else type="danger" icon="el-icon-close" circle
+                       @click="handleChannel(scope.row, payChannelEnum.WX_BAR.code)">
             </el-button>
           </template>
         </el-table-column>
@@ -191,7 +181,7 @@
         </el-form-item>
         <el-form-item label="开启状态" prop="status">
           <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
               {{ dict.label }}
             </el-radio>
           </el-radio-group>
@@ -214,24 +204,23 @@
       </div>
     </el-dialog>
 
-    <!-- 弹窗 -->
-    <wechat-channel-form :transferParam="channelParam" />
-    <ali-pay-channel-form :transferParam="channelParam"></ali-pay-channel-form>
+    <!-- 对话框（支付应用的配置） -->
+    <weixin-channel-form ref="weixinChannelFormRef" @success="getList" />
+    <alipay-channel-form ref="alipayChannelFormRef" @success="getList" />
   </div>
 </template>
 
 <script>
 import { createApp, updateApp, changeAppStatus, deleteApp, getApp, getAppPage } from "@/api/pay/app";
-import { DICT_TYPE, getDictDatas } from "@/utils/dict";
-import { PayType, PayChannelEnum, CommonStatusEnum } from "@/utils/constants";
-import wechatChannelForm from "@/views/pay/app/components/wechatChannelForm";
-import aliPayChannelForm from "@/views/pay/app/components/aliPayChannelForm";
+import { PayChannelEnum, CommonStatusEnum } from "@/utils/constants";
+import weixinChannelForm from "@/views/pay/app/components/weixinChannelForm";
+import alipayChannelForm from "@/views/pay/app/components/alipayChannelForm";
 
 export default {
   name: "PayApp",
   components: {
-    "wechatChannelForm": wechatChannelForm,
-    "aliPayChannelForm": aliPayChannelForm
+    weixinChannelForm,
+    alipayChannelForm
   },
   data() {
     return {
@@ -264,35 +253,8 @@ export default {
         orderNotifyUrl: [{required: true, message: "支付结果的回调地址不能为空", trigger: "blur"}],
         refundNotifyUrl: [{required: true, message: "退款结果的回调地址不能为空", trigger: "blur"}],
       },
-      // 数据字典
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
-      sysCommonStatusEnum: CommonStatusEnum,
       // 支付渠道枚举
       payChannelEnum: PayChannelEnum,
-      // 支付类型
-      payType: PayType,
-      // 是否显示支付窗口
-      payOpen: false,
-      // 微信组件传参参数
-      channelParam: {
-        // 是否修改
-        "edit": false,
-        // 微信是否显示
-        "wechatOpen": false,
-        // 支付宝是否显示
-        "aliPayOpen": false,
-        // 应用ID
-        "appId": null,
-        // 渠道编码
-        "payCode": null,
-        // 商户对象
-        "payMerchant": {
-          // 编号
-          "id": null,
-          // 名称
-          "name": null
-        },
-      }
     };
   },
   created() {
@@ -319,7 +281,7 @@ export default {
       this.form = {
         id: undefined,
         name: undefined,
-        status: undefined,
+        status: CommonStatusEnum.ENABLE,
         remark: undefined,
         orderNotifyUrl: undefined,
         refundNotifyUrl: undefined,
@@ -404,45 +366,25 @@ export default {
     /**
      * 修改支付渠道信息
      */
-    handleUpdateChannel(row, payCode, type) {
-      this.settingChannelParam(row, payCode, type)
-      this.channelParam.edit = true;
-      this.channelParam.loading = true;
-    },
-    /**
-     * 新增支付渠道信息
-     */
-    handleCreateChannel(row, payCode, type) {
-      this.settingChannelParam(row, payCode, type)
-      this.channelParam.edit = false;
-      this.channelParam.loading = false;
-    },
-    /**
-     * 设置支付渠道信息
-     */
-    settingChannelParam(row, payCode, type) {
-      if (type === PayType.WECHAT) {
-        this.channelParam.wechatOpen = true;
-        this.channelParam.aliPayOpen = false;
+    handleChannel(row, code) {
+      if (code.indexOf('alipay_') === 0) {
+        this.$refs['alipayChannelFormRef'].open(row.id, code);
+        return
       }
-      if (type === PayType.ALIPAY) {
-        this.channelParam.aliPayOpen = true;
-        this.channelParam.wechatOpen = false;
+      if (code.indexOf('wx_') === 0) {
+        this.$refs['weixinChannelFormRef'].open(row.id, code);
+        return
       }
-      this.channelParam.edit = false;
-      this.channelParam.loading = false;
-      this.channelParam.appId = row.id;
-      this.channelParam.payCode = payCode;
-      this.channelParam.payMerchant = row.payMerchant;
     },
     /**
      * 根据渠道编码判断渠道列表中是否存在
+     *
      * @param channels 渠道列表
      * @param channelCode 渠道编码
      */
-    judgeChannelExist(channels, channelCode) {
+    isChannelExists(channels, channelCode) {
       return channels.indexOf(channelCode) !== -1;
     }
   }
-};
+}
 </script>