channels_web/src/pages/qualification/addCategory/index.vue

<template>
    <div class="wrapper">
        <div class="title">资质申请</div>
        <el-form class="form" ref="form" :model="form" label-width="200px" :rules="rules">
            <el-form-item label="一级类目:" prop="level1">
                <el-input placeholder="请输入" type='number' oninput="if(value.length>9)value=value.slice(0,9)" v-model="form.level1" maxlength="15">
                </el-input>
            </el-form-item>
            <el-form-item label="二级类目:" label-width="100px" prop="level2">
                <el-input placeholder="请输入" type='number' oninput="if(value.length>9)value=value.slice(0,9)" v-model="form.level2" maxlength="15">
                </el-input>
            </el-form-item>
            <el-form-item label="三级类目:" prop="level3">
                <el-input placeholder="请输入" type='number' oninput="if(value.length>9)value=value.slice(0,9)" v-model="form.level3" maxlength="15">
                </el-input>
            </el-form-item>
            <el-form-item label="三级类目名称:" label-width="120px" prop="level3_name">
                <el-input placeholder="请输入" v-model="form.level3_name" maxlength="15">
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="营业执照或组织机构代码证:" required>
                <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' ref="upload_goods" :file="licenseImgs" limitNum="10"></upload>
            </el-form-item>
            <el-form-item class="single" label="资质材料URL:" required>
                <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' ref="upload_zizhi" :file="certificateImgs" limitNum="10"></upload>
            </el-form-item>
            <el-form-item class="single" label="备注:">
                <el-input placeholder="请输入" v-model="form.remark" maxlength="25">
                </el-input>
            </el-form-item>
            <el-form-item class="commit">
                <el-button class="blackbtn" :loading="loading" @click.native.prevent="commit">提交
                </el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import store from '@/store/index'
    import upload from '@/components/upload'
    import {
        validnumber,
    } from '@/utils/validate'
    import {
        add,
    } from "@/api/category";
    export default {
        name: 'addBrand',
        components: {
            upload
        },
        props: {},
        data() {
            return {
                licenseImgs: [],
                certificateImgs: [],
                outProductId: 0,
                commodity_id: 0,
                updatePic: true,
                form: {
                    level1: '',
                    level3: '',
                    level2: '',
                    level3_name: '',
                    remark: ''
                },
                loading: false,
                rules: {
                    level1: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    level2: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    level3: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    level3_name: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }]
                }
            };
        },
        watch: {},
        computed: {},
        methods: {
            commit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.licenseImgs.length == 0) {
                            this.$message.error('请选择营业执照或组织机构代码证');
                            return
                        }
                        if (this.certificateImgs.length == 0) {
                            this.$message.error('请选择资质材料');
                            return
                        }
                        let licenseImgs_temp = []
                        this.licenseImgs.forEach(element => {
                            licenseImgs_temp.push(element.url)
                        });
                        let certificateImgs_temp = []
                        this.certificateImgs.forEach(element => {
                            certificateImgs_temp.push(element.url)
                        });
                        let params = {
                            certificateImgs: certificateImgs_temp.join(","),
                            level1: this.form.level1,
                            level2: this.form.level2,
                            level3: this.form.level3,
                            licenseImgs: licenseImgs_temp.join(","),
                            level3_name: this.form.level3_name,
                            remark: this.form.remark,
                        }
                        this.loading = true
                        add(params).then(() => {
                            this.$message.success('添加成功');
                            store.commit('REMOVETAB', '资质申请')
                            this.$router.go(-1)
                        }).catch(() => {
                            this.loading = false
                        });
                    }
                })
            },
            initPage() {
                this.loading = false
                this.$refs.form.clearValidate()
                if (this.$route.params.isNew) {
                    this.form = {
                        level1: '',
                        level3: '',
                        level2: '',
                        level3_name: '',
                        remark: ''
                    }
                    this.licenseImgs = []
                    this.certificateImgs = []
                    //刷新子组件
                    this.updatePic = false
                    this.$nextTick(() => {
                        this.updatePic = true
                    })
                }
            }
        },
        created() {},
        activated() {
            this.initPage()
        },
        mounted() {}
    };
</script>
<style lang="less" scoped>
    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-weight: bold;
            width: 90%;
            text-align: left;
            margin-left: 100px;
        }

        .form {
            margin-top: 20px;
            width: 90%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .el-form-item {
                color: #232323;
                font-weight: bold;
            }

            .el-select {
                width: 300px;
            }

            .el-input {
                width: 300px;
            }

            .single {
                width: 100%;

                .el-input {
                    width: 875px;
                }

                .el-select {
                    width: 875px;
                }
            }

            .commit {
                width: 100%;
                text-align: center;
            }
        }


    }
</style>