channels_web/src/pages/brand/brandDetail/index.vue

<template>
    <div class="wrapper">
        <div class="left">
            <div class="title">资质申请</div>
            <div class="status">
                <div class="line">
                    <div class="label">申请状态:</div><span :class="status==9?'statustext':''">{{statusName}}</span>
                </div>
                <div class="line" v-if="status==9">
                    <div class="label">原因:</div><span class="reason">{{reject_reason}}</span>
                </div>
            </div>
            <el-divider></el-divider>
            <el-form size="small" class="form" ref="form" :model="form" label-width="140px" :rules="rules">
                <el-form-item label="认证审核类型:" prop="brand_audit_type">
                    <el-select v-model="form.brand_audit_type" placeholder="请选择" :disabled="isdisable" clearable
                        filterable>
                        <el-option label="国内品牌申请-R标" value="1"></el-option>
                        <el-option label="国内品牌申请-TM标" value="2"></el-option>
                        <el-option label="海外品牌申请-R标" value="3"></el-option>
                        <el-option label="海外品牌申请-TM标" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商标分类:" label-width="100px" prop="trademark_type">
                    <el-input placeholder="请输入" v-model="form.trademark_type" :disabled="isdisable" maxlength="25">
                    </el-input>
                </el-form-item>
                <el-form-item label="选择品牌经营类型:" prop="brand_management_type">
                    <el-select v-model="form.brand_management_type" placeholder="请选择" :disabled="isdisable" clearable
                        filterable>
                        <el-option label="自有品牌" value="1"></el-option>
                        <el-option label="代理品牌" value="2"></el-option>
                        <el-option label="无品牌" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品产地是否进口:" label-width="140px" prop="commodity_origin_type">
                    <el-select v-model="form.commodity_origin_type" placeholder="请选择" :disabled="isdisable" clearable
                        filterable>
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商标/品牌词:" prop="brand_wording">
                    <el-input placeholder="请输入" v-model="form.brand_wording" :disabled="isdisable"
                        maxlength="25">
                    </el-input>
                </el-form-item>
                <el-form-item label="商标注册人姓名:" label-width="140px">
                    <el-input placeholder="请输入" :disabled="isdisable" v-model="form.trademark_registrant" maxlength="25">
                    </el-input>
                </el-form-item>
                <el-form-item label="商标注册号/申请号:" prop="trademark_registrant_nu">
                    <el-input placeholder="请输入" v-model="form.trademark_registrant_nu" :disabled="isdisable"
                        maxlength="25">
                    </el-input>
                </el-form-item>
                <el-form-item label="商标有效期:">
                    <el-date-picker v-model="form.trademark_authorization_period" type="date" :disabled="isdisable"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商标申请人姓名:">
                    <el-input placeholder="请输入" v-model="form.trademark_applicant" :disabled="isdisable" maxlength="25">
                    </el-input>
                </el-form-item>
                <el-form-item label="商标申请时间:">
                    <el-date-picker v-model="form.trademark_application_time" type="date" :disabled="isdisable"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="single" label="营业执照或组织机构代码证:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="org_code_certificateList" :disabled="isdisable" limitNum="10">
                    </upload>
                </el-form-item>
                <el-form-item class="single" label="销售授权书（如商持人为自然人，还需提供:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="authorizationList" :disabled="isdisable" limitNum="10"></upload>
                </el-form-item>
                <el-form-item class="single" label="商标注册证书:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="registration_certificateList" :disabled="isdisable" limitNum="10">
                    </upload>
                </el-form-item>
                <el-form-item class="single" label="商标变更证明:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="change_certificateList" :disabled="isdisable" limitNum="10">
                    </upload>
                </el-form-item>
                <el-form-item class="single" label="商标注册申请受理通知书:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="registration_applicationList" :disabled="isdisable" limitNum="10">
                    </upload>
                </el-form-item>
                <el-form-item class="single" label="中华人民共和国海关进口货物报关单:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="goods_formList" limitNum="10" :disabled="isdisable"></upload>
                </el-form-item>
                <el-form-item class="single" label="备注:">
                    <el-input placeholder="请输入" :disabled="isdisable" v-model="form.remark" maxlength="25">
                    </el-input>
                </el-form-item>
                <el-form-item class="commit" v-if="status!=0&&status!=1">
                    <el-button class="blackbtn" :loading="loading" @click.native.prevent="commit">提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <div class="title">资质申请</div>
            <showtable class="showtable"></showtable>
        </div>
    </div>
</template>

<script>
    import store from '@/store/index'
    import upload from '@/components/upload'
    import showtable from '../components/showtable.vue'
    import {
        edit,
        detail
    } from '@/api/brand'
    export default {
        name: 'brandDetail',
        components: {
            upload,
            showtable
        },
        props: {},
        data() {
            return {
                isdisable: false,
                categoryList: [],
                brandList: [],
                org_code_certificateList: [],
                authorizationList: [],
                registration_certificateList: [],
                change_certificateList: [],
                registration_applicationList: [],
                goods_formList: [],
                brand_info_id: 0,
                updatePic: true,
                form: {
                    brand_audit_type: '',
                    trademark_type: '',
                    brand_management_type: '',
                    commodity_origin_type: '',
                    trademark_registrant: '',
                    trademark_registrant_nu: '',
                    trademark_authorization_period: '',
                    trademark_applicant: '',
                    trademark_application_time: '',
                    remark: '',
                    brand_wording:''
                },
                loading: false,
                rules: {
                    brand_audit_type: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],
                    trademark_type: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    brand_management_type: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    commodity_origin_type: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    trademark_registrant: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    trademark_registrant_nu: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],
                    brand_wording: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],
                },
            };
        },
        watch: {},
        computed: {},
        methods: {
            commit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.org_code_certificateList.length == 0) {
                            this.$message.error('请选择营业执照或组织机构代码证');
                            return
                        }
                        let imgDtoList = []
                        this.org_code_certificateList.forEach(element => {
                            imgDtoList.push({
                                type: "org_code_certificate",
                                url: element.url
                            })
                        });
                        this.authorizationList.forEach(element => {
                            imgDtoList.push({
                                type: "authorization",
                                url: element.url
                            })
                        });
                        this.registration_certificateList.forEach(element => {
                            imgDtoList.push({
                                type: "registration_certificate",
                                url: element.url
                            })
                        });
                        this.change_certificateList.forEach(element => {
                            imgDtoList.push({
                                type: "change_certificate",
                                url: element.url
                            })
                        });
                        this.registration_applicationList.forEach(element => {
                            imgDtoList.push({
                                type: "registration_application",
                                url: element.url
                            })
                        });
                        this.goods_formList.forEach(element => {
                            imgDtoList.push({
                                type: "goods_form",
                                url: element.url
                            })
                        });
                        let params = {
                            brand_audit_type: this.form.brand_audit_type,
                            brand_management_type: this.form.brand_management_type,
                            commodity_origin_type: this.form.commodity_origin_type,
                            imgDtoList: imgDtoList,
                            remark: this.form.remark,
                            trademark_applicant: this.form.trademark_applicant,
                            trademark_application_time: this.form.trademark_application_time,
                            trademark_authorization_period: this.form.trademark_authorization_period,
                            trademark_registrant: this.form.trademark_registrant,
                            trademark_registrant_nu: this.form.trademark_registrant_nu,
                            trademark_type: this.form.trademark_type,
                            brand_wording:this.form.brand_wording
                        }
                        this.loading = true
                        edit(params).then(() => {
                            this.$message.success('申请成功');
                            store.commit('REMOVETAB', '品牌申请')
                            this.$router.go(-1)
                        }).catch(() => {
                            this.loading = false
                        });
                    }
                })
            },
            getDetail() {
                this.isdisable = false
                detail({
                    brandInfoId: this.brand_info_id
                }).then(res => {
                    this.status = res.data.status
                    if (this.status == 0 || this.status == 1) { //审核中 通过全不可编辑
                        this.isdisable = true
                    }
                    this.reject_reason = res.data.reject_reason
                    this.statusName = res.data.statusName
                    this.form.brand_audit_type = res.data.brand_audit_type
                    this.form.brand_management_type = res.data.brand_management_type
                    this.form.commodity_origin_type = res.data.commodity_origin_type
                    this.form.remark = res.data.remark
                    this.form.trademark_applicant = res.data.trademark_applicant
                    this.form.trademark_application_time = res.data.trademark_application_time
                    this.form.trademark_authorization_period = res.data.trademark_authorization_period
                    this.form.trademark_registrant = res.data.trademark_registrant
                    this.form.trademark_registrant_nu = res.data.trademark_registrant_nu
                    this.form.trademark_type = res.data.trademark_type
                    this.org_code_certificateList = res.data.imgMap.org_code_certificate
                    this.form.brand_wording=res.data.brand_wording
                    this.authorizationList = res.data.imgMap.authorization
                    this.registration_certificateList = res.data.imgMap.registration_certificate
                    this.change_certificateList = res.data.imgMap.change_certificate
                    this.registration_applicationList = res.data.imgMap.registration_application
                    this.goods_formList = res.data.imgMap.goods_form
                    //刷新子组件
                    this.updatePic = false
                    this.$nextTick(() => {
                        this.updatePic = true
                    })
                })
            },
            initPage() {
                this.loading = false
                this.$refs.form.clearValidate()
                if (this.$route.params.brand_info_id) {
                    this.brand_info_id = this.$route.params.brand_info_id
                    this.getDetail()
                }
            },
        },
        created() {},
        activated() {
            this.initPage()
        },
        mounted() {}
    };
</script>
<style lang="less" scoped>
    .wrapper {
        display: flex;
        flex-direction: row;
        background: #F6F8F9 !important;
        padding: 0px !important;

        .table {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white !important;
            border-radius: 5px;
            width: 37%;
            margin-left: 10px;

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

            .showtable {
                width: 99%;
                margin-top: 20px;
            }
        }

        .left {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border-radius: 5px;
            padding: 10px;
            width: 61%;

            .status {
                width: 100%;
                display: flex;
                margin-top: 20px;
                flex-direction: column;
                font-size: 14px;
                color: #232323;
                font-weight: bolder;
                font-family: PingFangSC-Regular, PingFang SC;

                .line {
                    display: flex;
                    margin-top: 20px;
                    align-items: center;
                }

                .commitnew {
                    margin-left: 40px;
                }

                .label {
                    width: 100px;
                    text-align: right;
                    margin-right: 30px;
                }

                .reason {
                    width: 80%;
                }

                .statustext {
                    color: #E02020;
                }
            }

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

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

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

                .el-select {
                    width: 200px;
                }

                .el-input {
                    width: 200px;
                }

                .single {
                    width: 100%;

                    .el-input {
                        width: 575px;
                    }

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

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

        }

    }
</style>