|
|
|
|
@ -0,0 +1,199 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: ch
|
|
|
|
|
* @Date: 2022-07-04 16:42:21
|
|
|
|
|
* @LastEditors: ch
|
|
|
|
|
* @LastEditTime: 2022-07-06 19:01:37
|
|
|
|
|
* @Description: file content
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form ref="formEl" label-width="160px" :model="form" :rules="rules">
|
|
|
|
|
<el-form-item label="商户平台" prop="mchPrimaryId">
|
|
|
|
|
<el-select v-model="form.mchPrimaryId" @change="handleChangeMch" :disabled="isEdit">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in opts.merchant"
|
|
|
|
|
:key="item.mchPrimaryId"
|
|
|
|
|
:label="item.mchName"
|
|
|
|
|
:value="item.mchPrimaryId"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="应用名称" prop="appName">
|
|
|
|
|
<el-input v-model="form.appName" maxlength="64" show-word-limit />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="应用代号" prop="appCode">
|
|
|
|
|
<el-input v-model="form.appCode" maxlength="64" show-word-limit />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="支付方式" prop="payCodes" v-if="form.mchInfo.mchCode">
|
|
|
|
|
<el-checkbox-group v-model="form.payCodes">
|
|
|
|
|
<el-checkbox v-for="item in payTypeData" :label="item.code" :key="item.code">
|
|
|
|
|
{{ item.text }}
|
|
|
|
|
</el-checkbox>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="应用ID" prop="appId">
|
|
|
|
|
<el-input v-model="form.appId" maxlength="64" show-word-limit />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="签名秘钥" prop="signKey">
|
|
|
|
|
<el-input v-model="form.signKey" maxlength="64" show-word-limit />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="应用状态">
|
|
|
|
|
<el-select v-model="form.isDisabled" :clearable="false">
|
|
|
|
|
<el-option v-for="item in opts.status" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<template v-if="form.mchInfo.mchCode === 'wxpay'">
|
|
|
|
|
<el-form-item label="应用Secret" prop="appSecret">
|
|
|
|
|
<el-input
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="400"
|
|
|
|
|
show-word-limit
|
|
|
|
|
v-model="form.appSecret"
|
|
|
|
|
:placeholder="form.wxAppData.appSecret"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="form.mchInfo.mchCode === 'alipay'">
|
|
|
|
|
<el-form-item label="应用私钥" prop="privateKey">
|
|
|
|
|
<el-input
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="400"
|
|
|
|
|
show-word-limit
|
|
|
|
|
v-model="form.privateKey"
|
|
|
|
|
:placeholder="form.aliAppData.privateKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="应用证书" prop="appCertUrl">
|
|
|
|
|
<el-upload action="none" accept=".crt" :show-file-list="false" :http-request="handleUpload">
|
|
|
|
|
<el-button type="success" v-if="form.aliAppData.hasAppCert || form.appCertUrl">
|
|
|
|
|
已上传，点击重新上传
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="primary" v-else>上传</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</template>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
|
|
|
<el-button :disabled="loading" :loading="submitting" type="primary" @click="handleSave">保存</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="jsx">
|
|
|
|
|
import { upload } from '@/api/file';
|
|
|
|
|
const store = useStore();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
// 页面字典表数据
|
|
|
|
|
const opts = computed(() => store.state.application.opts);
|
|
|
|
|
const defaultForm = {
|
|
|
|
|
mchInfo: {},
|
|
|
|
|
mchPrimaryId: '',
|
|
|
|
|
appName: '',
|
|
|
|
|
appCode: '',
|
|
|
|
|
payCodes: [],
|
|
|
|
|
appId: '',
|
|
|
|
|
signKey: '',
|
|
|
|
|
isDisabled: false,
|
|
|
|
|
aliAppData: {
|
|
|
|
|
privateKey: '',
|
|
|
|
|
appCertUrl: '',
|
|
|
|
|
},
|
|
|
|
|
wxAppData: {
|
|
|
|
|
appSecret: '',
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
const defaultRules = {
|
|
|
|
|
mchPrimaryId: [{ required: true, message: '请选择商户平台' }],
|
|
|
|
|
appName: [{ required: true, message: '应用名称不能为空' }],
|
|
|
|
|
appCode: [{ required: true, message: '应用代号不能为空' }],
|
|
|
|
|
payCodes: [{ type: 'array', required: true, message: '至少选一个支付方式' }],
|
|
|
|
|
appId: [{ required: true, message: '应用ID不能为空' }],
|
|
|
|
|
signKey: [{ required: true, message: '签名秘钥不能为空' }],
|
|
|
|
|
};
|
|
|
|
|
const form = reactive({ ...defaultForm });
|
|
|
|
|
const isEdit = computed(() => Boolean(route.params.id));
|
|
|
|
|
const payTypeData = computed(() => {
|
|
|
|
|
return (
|
|
|
|
|
unref(opts).payType.filter((i) => {
|
|
|
|
|
return i.mchCode === form.mchInfo.mchCode;
|
|
|
|
|
}) || []
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
const rules = computed(() => {
|
|
|
|
|
let meRules = { ...defaultRules };
|
|
|
|
|
if (!isEdit.value) {
|
|
|
|
|
meRules.appSecret = [{ required: true, message: '应用Secret不能为空' }];
|
|
|
|
|
meRules.privateKey = [{ required: true, message: '应用私钥不能为空' }];
|
|
|
|
|
meRules.appCertUrl = [{ required: true, message: '应用证书不能为空' }];
|
|
|
|
|
}
|
|
|
|
|
return meRules;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const formEl = ref();
|
|
|
|
|
|
|
|
|
|
store.dispatch('application/getMerchantList');
|
|
|
|
|
store.dispatch('application/getPayType');
|
|
|
|
|
onActivated(() => {
|
|
|
|
|
handlelLoadData();
|
|
|
|
|
});
|
|
|
|
|
/**
|
|
|
|
|
* 如果是编辑需要加载初始数据加载
|
|
|
|
|
*/
|
|
|
|
|
const handlelLoadData = async () => {
|
|
|
|
|
let id = route.params.id;
|
|
|
|
|
if (id && form.id !== id) {
|
|
|
|
|
let res = await store.dispatch('application/detail', id);
|
|
|
|
|
res.payCodes = res.payCodes.split(',');
|
|
|
|
|
Object.assign(form, res);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
/**
|
|
|
|
|
* 切换商户时需要拿到当前商户信息，用来应用判断属于哪个平台
|
|
|
|
|
*/
|
|
|
|
|
const handleChangeMch = (item) => {
|
|
|
|
|
if (!item) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
const mchCode = form.mchInfo.mchCode;
|
|
|
|
|
form.mchInfo = unref(opts).merchant.find((i) => i.mchPrimaryId === item);
|
|
|
|
|
if (mchCode !== form.mchInfo.mchCode) {
|
|
|
|
|
form.payCodes = [];
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 上传阿里应用证书
|
|
|
|
|
*/
|
|
|
|
|
const handleUpload = async ({ file }) => {
|
|
|
|
|
const res = await upload('payCenter', 'application/', file);
|
|
|
|
|
form.appCertUrl = res;
|
|
|
|
|
};
|
|
|
|
|
const handleSave = async () => {
|
|
|
|
|
try {
|
|
|
|
|
await formEl.value.validate();
|
|
|
|
|
let data = { ...form };
|
|
|
|
|
data.payCodes = data.payCodes.join(',');
|
|
|
|
|
if (data.privateKey) {
|
|
|
|
|
data.aliAppData.privateKey = data.privateKey;
|
|
|
|
|
}
|
|
|
|
|
if (data.appCertUrl) {
|
|
|
|
|
data.aliAppData.appCertUrl = data.appCertUrl;
|
|
|
|
|
}
|
|
|
|
|
if (data.appSecret) {
|
|
|
|
|
data.wxAppData.appSecret = data.appSecret;
|
|
|
|
|
}
|
|
|
|
|
const res = await store.dispatch('application/save', data);
|
|
|
|
|
if (res) {
|
|
|
|
|
handleCancel();
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {}
|
|
|
|
|
};
|
|
|
|
|
const handleCancel = () => {
|
|
|
|
|
Object.assign(form, defaultForm);
|
|
|
|
|
formEl.value.resetFields();
|
|
|
|
|
router.push({ name: 'PayApplication' });
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped></style>
|
ch
2 years ago