dy-admin-manager/src/views/adapayAccount/form.vue

<!--  -->
<template>
    <div class="m-container">
        <h2>
            <el-page-header @back="onCancel"
                :content="(payType == 'create' ? '创建账号' : '修改账号')"></el-page-header>
        </h2>
        <div class="m-core" style="overflow: hidden">
            <el-col :span="10">
                <el-form :model="form" :rules="rules" ref="accountForm" label-position="right" label-width="180px">
                    <el-form-item label="商户号" prop="memberId">
                        <el-input v-model="form.memberId" :disabled="payType == 'update' ? true : false" placeholder="请输入商户号"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="公司法人" prop="legalPerson">
                        <el-input v-model="form.legalPerson" placeholder="请输入公司法人"></el-input>
                    </el-form-item>
                    <el-form-item label="公司法人手机号" prop="legalMp">
                        <el-input v-model="form.legalMp" placeholder="请输入公司法人手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="法人身份证号" prop="legalCertId">
                        <el-input v-model="form.legalCertId" placeholder="请输入法人身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证有效期" prop="legalCertIdExpires">
                        <el-date-picker
                            v-model="form.legalCertIdExpires"
                            :picker-options="{ firstDayOfWeek:1 }"
                            value-format="yyyyMMdd"
                            type="date"
                            placeholder="请选择身份证有效期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="银行卡号" prop="cardNo">
                        <el-input v-model="form.cardNo" placeholder="请输入银行卡号"></el-input>
                    </el-form-item>
                    <el-form-item label="所属银行" prop="bankCode">
                        <el-select v-model="form.bankCode"
                            placeholder="请选择所属银行">
                            <el-option v-for="(item, index) in backList" :key="index" :label="item.title"
                                    :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="省市" required>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item prop="provCode">
                                    <el-select v-model="form.provCode" style="width: 98% !important" @change="onProvChange" placeholder="请选择省份">
                                        <el-option v-for="(item, index) in cityList" :key="index" :label="item.title"
                                                :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="areaCode">
                                    <el-select v-model="form.areaCode" style="width: 100% !important" placeholder="请选择城市">
                                        <el-option v-for="(item, index) in selectListCity" :key="index" :label="item.title"
                                                :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="统一社会信用码" prop="socialCreditCode">
                        <el-input v-model="form.socialCreditCode" placeholder="请输入统一社会信用码"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用码有效期" prop="socialCreditCodeExpires">
                        <el-date-picker
                            v-model="form.socialCreditCodeExpires"
                            :picker-options="{ firstDayOfWeek:1 }"
                            value-format="yyyyMMdd"
                            type="date"
                            placeholder="请选择统一社会信用码有效期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="经营范围" prop="businessScope">
                        <!-- <el-input v-model="form.businessScope" placeholder="请输入经营范围"></el-input> -->
                        <el-input type="textarea" :rows="3" v-model="form.businessScope" placeholder="请输入经营范围"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址" prop="address">
                        <el-input v-model="form.address" placeholder="请输入公司地址"></el-input>
                    </el-form-item>
                    <el-form-item label="证照文件" prop="multipartFile">
                        <!-- <el-input type="file" class="uploadFile" v-model="form.multipartFile"></el-input> -->
                        <el-upload
                            class="avatar-upload"
                            ref="upload"
                            action="/api-web/uploadFile"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-change="handleChange"
                            :file-list="fileList"
                            :multiple="false"
                            :limit="1"
                            :auto-upload="false">
                            <el-button slot="trigger" type="primary">选取文件</el-button>
                            <!-- ，且不超过500kb -->
                            <div slot="tip" style="display: inline; padding-left: 20px;" class="el-upload__tip">只能上传一个文件</div>
                        </el-upload>
                        <!-- <el-upload class="avatar-uploader"
                            action="/api-web/uploadFile"
                            :headers="headers"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="form.multipartFile"
                                :src="form.coverImg"
                                class="avatar" />
                            <i v-else
                            class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload> -->
                    </el-form-item>
                    <el-form-item label="邮编" prop="zipCode">
                        <el-input v-model="form.zipCode" placeholder="请输入邮编"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="onCancel">取 消</el-button>
                        <el-button type="primary" @click="onSubmit('accountForm')">确 定</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </div>
    </div>
</template>

<script>
import { cityJson } from "./cityJson";
import { bankJson } from "./bankJson";
import { getToken } from "@/utils/auth";
import load from '@/utils/loading'
import { createMember, updateMember } from './api.js'
import { isvalidPhone } from '@/utils/validate'
let validPhone = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入公司法人手机号'))
    } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
    } else {
        callback()
    }
}
export default {
    name: 'ADaPayAccount',
    data() {
        const query = this.$route.query
        return {
            payType: query.type,
            row: query.row ? JSON.parse(query.row) : {},
            backList: bankJson,
            cityList: cityJson,
            selectListCity: [],
            headers: {
                Authorization: getToken()
            },
            fileList: [],
            files: null, // 上传对象
            id: null, // 编号
            form: {
                memberId: null,
                name: null,
                legalPerson: null,
                legalMp: null,
                legalCertId: null,
                legalCertIdExpires: null,
                cardNo: null,
                bankCode: null,
                provCode: null,
                areaCode: null,
                socialCreditCode: null,
                socialCreditCodeExpires: null,
                businessScope: null,
                address: null,
                multipartFile: null,
                zipCode: null
            },
            rules: {
                memberId: [{required: true, message:'请输入商户号', trigger: 'blur'}],
                name: [{required: true, message:'请输入公司名称', trigger: 'blur'}],
                legalPerson: [{required: true, message:'请输入公司法人', trigger: 'blur'}],
                legalMp: [{ type: 'number', required: true, validator: validPhone, trigger: 'blur' }],
                legalCertId: [{required: true, message:'请输入法人身份证号', trigger: 'blur'}],
                legalCertIdExpires: [{required: true, message:'请选择身份证有效期', trigger: 'change'}],
                cardNo: [{required: true, message:'请输入银行卡号', trigger: 'blur'}],
                bankCode: [{required: true, message:'请选择所属银行', trigger: 'change'}],
                provCode: [{required: true, message:'请选择省份', trigger: 'change'}],
                areaCode: [{required: true, message:'请选择城市', trigger: 'change'}],
                socialCreditCode: [{required: true, message:'请输入统一社会信用码', trigger: 'blur'}],
                socialCreditCodeExpires: [{required: true, message:'请选择统一社会信用码有效期', trigger: 'change'}],
                businessScope: [{required: true, message:'请输入经营范围', trigger: 'blur'}],
                address: [{required: true, message:'请输入公司地址', trigger: 'blur'}],
                multipartFile: [{required: true, message:'请上传证照文件', trigger: 'change'}],
                zipCode: [{required: true, message:'请输入邮编', trigger: 'blur'}]
            }
        };
    },
    mounted() {
        this.__init()
    },
    activated() {
        this.__init()
    },
    methods: {
        __init() {
            const query = this.$route.query
            this.payType = query.type
            this.row = query.row ? JSON.parse(query.row) : {}
            this.files = null
            this.fileList = []
            this.form.multipartFile = null
            if(this.payType == 'update') {
                const row = this.row
                this.id = row.id
                this.form = {
                    memberId: row.memberId,
                    name: row.name,
                    legalPerson: row.legalPerson,
                    legalMp: row.legalMp,
                    legalCertId: row.legalCertId,
                    legalCertIdExpires: row.legalCertIdExpires,
                    cardNo: row.cardNo,
                    bankCode: row.bankCode,
                    provCode: row.provCode,
                    areaCode: row.areaCode,
                    socialCreditCode: row.socialCreditCode,
                    socialCreditCodeExpires: row.socialCreditCodeExpires,
                    businessScope: row.businessScope,
                    address: row.address,
                    multipartFile: row.multipartFile,
                    zipCode: row.zipCode
                }
                this.cityList.forEach(item => {
                    if(item.value == row.provCode) {
                        this.selectListCity = item.cities
                    }
                })
            } else if(this.payType == 'create') {
                // this.form = {
                //     memberId: null,
                //     name: null,
                //     legalPerson: null,
                //     legalMp: null,
                //     legalCertId: null,
                //     legalCertIdExpires: null,
                //     cardNo: null,
                //     bankCode: null,
                //     provCode: null,
                //     areaCode: null,
                //     socialCreditCode: null,
                //     socialCreditCodeExpires: null,
                //     businessScope: null,
                //     address: null,
                //     multipartFile: null,
                //     zipCode: null
                // }
                this.$refs["accountForm"].resetFields()
            }
        },
        async onSubmit (formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    const form = this.form
                    let formData = new FormData()
                        formData.append("memberId", form.memberId)
                        formData.append("name", form.name)
                        formData.append("legalPerson", form.legalPerson)
                        formData.append("legalMp", form.legalMp)
                        formData.append("legalCertId", form.legalCertId)
                        formData.append("legalCertIdExpires", form.legalCertIdExpires)
                        formData.append("cardNo", form.cardNo)
                        formData.append("bankCode", form.bankCode)
                        formData.append("provCode", form.provCode)
                        formData.append("areaCode", form.areaCode)
                        formData.append("socialCreditCode", form.socialCreditCode)
                        formData.append("socialCreditCodeExpires", form.socialCreditCodeExpires)
                        formData.append("businessScope", form.businessScope)
                        formData.append("address", form.address)
                        formData.append("multipartFile", form.multipartFile)
                        formData.append("zipCode", form.zipCode)
                    if(this.payType == 'create') {
                        createMember(formData).then(res => {
                            if(res.code == 200) {
                                this.$message.success('保存成功')
                                this.onCancel()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else if(this.payType == 'update') {
                        formData.append('id', this.id)
                        updateMember(formData).then(res => {
                            if(res.code == 200) {
                                this.$message.success('保存成功')
                                this.onCancel()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        handleChange(file) {
            this.files = file
            this.form.multipartFile = file.raw
            this.$refs["accountForm"].validateField('multipartFile')
        },
        handleRemove(file, fileList) {
            this.files = null
            this.form.multipartFile = null
        },
        handlePreview(file) {
            // console.log(file);
        },
        onProvChange(value) {
            this.form.areaCode = null
            this.cityList.forEach(item => {
                if(item.value == value) {
                    this.selectListCity = item.cities
                }
            })
        },
        onCancel () {
            this.files = null
            this.fileList = []
            this.form.multipartFile = null
            this.$router.push({
                path: "/insideSetting/adapayManager"
            });
        }
    },
};
</script>
<style lang='scss' scoped>
.el-input, .el-textarea, .el-select {
    width: 100% !important;
}
.el-button--primary {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
    &:hover,
    &:active,
    &:focus {
        background: #14928a;
        border-color: #14928a;
        color: #fff;
    }
}
/deep/.avatar-uploader {
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
            border-color: #409EFF;
        }
    }
}
.uploadFile {
    /deep/.el-input__inner {
        padding: 0;
        height: 40px;
        line-height: 32px;
    }
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>