Project-Annex/operationSupport/src/views/payService/collection/stepPage/add.vue

<template>
    <zz-form :cols="formCols" :data="formData" :rules="formRules" labelWidth="90" ref="form">
        <template slot="companyOrgId">
            <select-tree
                class="new-select-tree"
                selectTreeTitle="请选择公司"
                placeholder="请选择公司"
                :options="params.companyArray"
                :props="defaultProps"
                v-model="formData.companyOrgId"
                @selectedLable="selectedLable"
            />
        </template>
        <template slot="payeeType">
            <el-select class="width65" v-model="formData.payeeType" clearable>
                <el-option label="微信" :value="1"></el-option>
                <el-option label="支付宝" :value="2"></el-option>
            </el-select>
        </template>
        <template slot="authFile">
            <el-input v-model="formData.authFile" disabled placeholder="请上传授权文件">
                <i slot="suffix" class="zoniot_font zoniot-icon-shangchuan1" @click="QueryClick"></i>
            </el-input>
            <el-upload
                style="display: none"
                :headers="token"
                ref="uploaduserlogo"
                limit="1"
                action="/sc-charge/payee/account/uploadFile"
                :on-success="uploadsuccess"
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                name="file"
            >
            </el-upload>
        </template>
    </zz-form>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            formData: {
                companyName: '',
                companyOrgId: '',
                payeeType: '',
                merchantNumber: '',
                paymentSecretKey: '',
                appId: '',
                appSecretKey: '',
                officialAccountsId: '',
                messageId: '',
                authFile: ''
            },
            formRules: {
                companyOrgId: [this.$valid.selectRequired('公司')],
                payeeType: [this.$valid.selectRequired('充值方式')],
                merchantNumber: [this.$valid.inputRequired('商户号')],
                paymentSecretKey: [this.$valid.inputRequired('支付密钥')],
                appId: [this.$valid.inputRequired('应用ID')],
                appSecretKey: [this.$valid.inputRequired('应用密钥')],
                authFile: [this.$valid.inputRequired('授权文件')]
            },
            formCols: [
                [
                    {
                        label: '公司',
                        prop: 'companyOrgId',
                        slot: 'companyOrgId'
                    },
                    {
                        label: '类型',
                        prop: 'payeeType',
                        slot: 'payeeType'
                    },
                    {
                        label: '商户号',
                        prop: 'merchantNumber',
                        input: true
                    },
                    {
                        label: '支付密钥',
                        prop: 'paymentSecretKey',
                        input: true
                    },
                    {
                        label: '应用ID',
                        prop: 'appId',
                        input: true
                    },
                    {
                        label: '应用密钥',
                        prop: 'appSecretKey',
                        input: true
                    },
                    {
                        label: '公众号ID',
                        prop: 'officialAccountsId',
                        input: true
                    },
                    {
                        label: '消息模板ID',
                        prop: 'messageId',
                        input: true
                    },
                    {
                        label: '授权文件',
                        prop: 'authFile',
                        slot: 'authFile'
                    }
                ]
            ],
            token: {
                [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
            },
            defaultProps: {
                value: 'id', // 唯一标识
                label: 'orgName', // 标签显示
                children: 'orgs' // 子级
            }
        };
    },

    methods: {
        selectedLable(e) {
            this.formData.companyName = e;
        },
        QueryClick() {
            this.$refs['uploaduserlogo'].$refs['upload-inner'].handleClick();
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                var loading = this.$loading();
                let url = '/sc-charge/payee/account/add';
                if (this.params.todo == 'edit') {
                    url = '/sc-charge/payee/account/update';
                }
                this.$http
                    .post(url, this.formData)
                    .then(({ status, msg }) => {
                        if (status == 0) {
                            this.$message.success(msg);
                            this.params.callback();
                            this.$emit('close');
                        } else {
                            this.$message.error(msg);
                        }
                        loading.close();
                    })
                    .catch(() => {
                        loading.close();
                    });
            });
        },
        uploadsuccess(response, file, fileList) {
            this.$refs.uploaduserlogo.clearFiles();
            if (0 === response.status) {
                this.formData.authFile = response.data;
            }
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            // const isLt2M = file.size / 1024 / 1024 < 2;
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
        }
    },
    created() {
        if (this.params.todo == 'edit') {
            this.formData = JSON.parse(JSON.stringify(this.params.data));
        }
    }
};
</script>