spfm-market-front/src/pages/main/competitor/addCompetitorNew.vue

<template>
    <div>
        <fullscreen :fullscreen.sync="fullscreen" class="container structure-l" style="margin: 0;width: calc(75% - 15px);">
            <div class="container-box">
                <toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
                <div class="info-form">
                    <el-form :model="infolist" ref="infolist" :rules="rules">
                        <div class="info-line">
                            <el-form-item prop="violationCate">
                                <span><i>*</i>类别</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.violationCate" placeholder="请选择类别" @change="verifcheck(1)">
                                    <el-option v-for="item in options1" :key="item.orderNumber" :label="item.dataName"
                                               :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="provinceCode">
                                <span><i>*</i>地域</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.provinceCode" placeholder="请选择省份" @change="verifcheck(2)">
                                    <el-option v-for="item in options2" :key="item.orderNumber" :label="item.dataName"
                                               :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item prop="operatorCode">
                                <span><i>*</i>运营商</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.operatorCode" placeholder="请选择运营商" @change="verifcheck(3)">
                                    <el-option v-for="item in options3" :key="item.orderNumber" :label="item.dataName"
                                               :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="packageGear">
                                <span><i>*</i>套餐档位</span>
                                <el-select v-model="infolist.packageGear" placeholder="请选择" @change="verifcheck(4)" >
                                    <el-option
                                        v-for="item in options6"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item prop="tariffName">
                                <span><i>*</i>套餐名称</span>
                                <el-input v-model="infolist.tariffName" placeholder="请输入资费名称"></el-input>
                            </el-form-item>
                            <el-form-item prop="recordRegionCode" class="info-line tea-r">
                                <span><i>*</i>地市</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.recordRegionCode" placeholder="请选择违规地市" @change="verifcheck(5)">
                                    <el-option v-for="item in options5" :key="item.dataCode" :label="item.dataName"
                                               :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item prop="monthFee">
                                <span><i>*</i>月费(元)</span>
                                <el-input v-model="infolist.monthFee" placeholder="请输入月费金额"></el-input>
                            </el-form-item>
                            <el-form-item prop="preFee">
                                <span><i>*</i>预存款(元)</span>
                                <el-input v-model="infolist.preFee" placeholder="请输入预存款金额"></el-input>
                            </el-form-item>
                            <el-form-item prop="concessionalRate">
                                <span><i>*</i>优惠价(元)</span>
                                <el-input v-model="infolist.concessionalRate" placeholder="请输入预存款金额"></el-input>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item>
                                <span><i></i>酬金</span>
                                <el-input v-model="infolist.remFee" placeholder="请输入酬金金额"></el-input>
                            </el-form-item>
                            <el-form-item prop="saleChnl">
                                <span><i>*</i>销售渠道</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.saleChnl" placeholder="请选择销售渠道">
                                    <el-option v-for="item in saleChnlopt" :key="item.dataName" :label="item.dataName"
                                               :value="item.dataName">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item>
                                <span><i></i>销售范围</span>
                                <el-input v-model="infolist.saleScope" placeholder="请输入销售范围"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span><i></i>月销量</span>
                                <el-input v-model="infolist.monthSale" placeholder="请输入月销量"></el-input>
                            </el-form-item>
                            <el-form-item prop="isDb">
                                <span><i>*</i>是否包含宽带</span>
                                <el-select v-model="infolist.isDb" placeholder="请选择" >
                                    <el-option
                                        v-for="item in options7"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span><i></i>宽带内容</span>
                                <el-input v-model="infolist.dbContent" placeholder="请输入宽带内容"></el-input>
                            </el-form-item>
                        </div>

                        <el-form-item prop="taffiffContent" class="info-line online">
                            <span><i>*</i>套餐内容</span>
                            <el-input v-model="infolist.taffiffContent" placeholder="请输入资费内容" type="textarea" :rows="3"></el-input>
                        </el-form-item>
                        <div style="padding-left: 60px">
                            <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList"></myUpload>
                        </div>
                    </el-form>
                </div>
                <div class="titbtn-box">
                    <el-button type="primary" plain @click="submitList(1)">取消</el-button>
                    <el-button type="primary" @click="submitList">提交</el-button>
                </div>
            </div>
        </fullscreen>
        <competeRight></competeRight>
    </div>
</template>
<script>
import competeRight from "../../../components/competeRight";
import myUpload from "../../../components/upload";
import toolList from "../../../components/toolList";

export default {
    components: {
        competeRight,
        myUpload,
        toolList
    },
    data() {
        const fileLists = (rule, value, callback) => {
            if (!this.fileLists.length > 0) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const opName = (rule, value, callback) => {
            if (!this.infolist.opName) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const contactPhone = (rule, value, callback) => {
            let x = this.infolist.contactPhone * 1;
            if (!(/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(x))) {
                callback(new Error('请输入正确的电话号码'))
            } else {
                callback()
            }
        }
        const violationCate = (rule, value, callback) => {
            if (!this.infolist.violationCate) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const provinceCode = (rule, value, callback) => {
            if (!this.infolist.provinceCode) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const operatorCode = (rule, value, callback) => {
            if (!this.infolist.operatorCode) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const recordRegionCode = (rule, value, callback) => {
            if (!this.infolist.recordRegionCode) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const packageGear = (rule, value, callback) => {
            if (!this.infolist.packageGear) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const tariffName = (rule, value, callback) => {
            if (!this.infolist.tariffName) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const monthFee = (rule, value, callback) => {
            let x = isNaN(this.infolist.monthFee);
            if (x) {
                callback(new Error('请输入数字'))
            } else {
                callback()
            }
        }
        const preFee = (rule, value, callback) => {
            let x = isNaN(this.infolist.preFee);
            if (x) {
                callback(new Error('请输入数字'))
            } else {
                callback()
            }
        }
        const concessionalRate = (rule, value, callback) => {
            let x = isNaN(this.infolist.concessionalRate);
            if (x) {
                callback(new Error('请输入数字'))
            } else {
                callback()
            }
        }
        const remFee = (rule, value, callback) => {
            if (!this.infolist.remFee) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const saleChnl = (rule, value, callback) => {
            if (!this.infolist.saleChnl) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const saleScope = (rule, value, callback) => {
            if (!this.infolist.saleScope) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const monthSale = (rule, value, callback) => {
            if (!this.infolist.monthSale) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const isDb = (rule, value, callback) => {
            if (!this.infolist.isDb) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const dbContent = (rule, value, callback) => {
            if (!this.infolist.dbContent) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const evidenceType = (rule, value, callback) => {
            if (!this.infolist.evidenceType) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const validateUsername = (rule, value, callback) => {
            if (!this.infolist.violationContent) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const taffiffContent = (rule, value, callback) => {
            if (!this.infolist.taffiffContent) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        return {
            rules: {
                fileLists: [{
                    required: true,
                    trigger: 'change',
                    validator: fileLists
                }],
                recordRegionCode: [{
                    required: true,
                    trigger: 'change',
                    validator: recordRegionCode
                }],
                opName: [{
                    required: true,
                    trigger: 'blur',
                    validator: opName
                }],
                contactPhone: [{
                    required: true,
                    trigger: 'blur',
                    validator: contactPhone
                }],
                violationCate: [{
                    required: true,
                    trigger: 'change',
                    validator: violationCate
                }],
                provinceCode: [{
                    required: true,
                    trigger: 'change',
                    validator: provinceCode
                }],
                operatorCode: [{
                    required: true,
                    trigger: 'change',
                    validator: operatorCode
                }],
                packageGear: [{
                    required: true,
                    trigger: 'change',
                    validator: packageGear
                }],
                tariffName: [{
                    required: true,
                    trigger: 'blur',
                    validator: tariffName
                }],
                monthFee: [{
                    required: true,
                    trigger: 'blur',
                    validator: monthFee
                }],
                preFee: [{
                    required: true,
                    trigger: 'blur',
                    validator: preFee
                }],
                concessionalRate: [{
                    required: true,
                    trigger: 'blur',
                    validator: concessionalRate
                }],
                remFee: [{
                    required: true,
                    trigger: 'blur',
                    validator: remFee
                }],
                saleChnl: [{
                    required: true,
                    trigger: 'change',
                    validator: saleChnl
                }],
                monthSale: [{
                    required: true,
                    trigger: 'blur',
                    validator: monthSale
                }],
                isDb: [{
                    required: true,
                    trigger: 'blur',
                    validator: isDb
                }],
                dbContent: [{
                    required: true,
                    trigger: 'blur',
                    validator: dbContent
                }],
                evidenceType: [{
                    required: true,
                    trigger: 'blur',
                    validator: evidenceType
                }],
                saleScope: [{
                    required: true,
                    trigger: 'blur',
                    validator: saleScope
                }],
                violationContent: [{
                    required: true,
                    trigger: 'blur',
                    validator: validateUsername
                }],
                taffiffContent: [{
                    required: true,
                    trigger: 'blur',
                    validator: taffiffContent
                }],
            },
            tooltit: '新增竞争对手信息',
            infolist: {},
            options1: [],
            options2: [],
            options3: [],
            options4: [],
            options5: [],
            options6: [{
                value: '低档：58元以下套餐',
                label: '低档：58元以下套餐'
            }, {
                value: '中档：58元（含）-128元套餐（不含）',
                label: '中档：58元（含）-128元套餐（不含）'
            }, {
                value: '高档：128元及以上套餐',
                label: '高档：128元及以上套餐'
            }],
            options7: [{
                value: '是',
                label: '是'
            }, {
                value: '否',
                label: '否'
            }],
            saleChnlopt: [],
            fullscreen: false,
            fileList: [],
            fileLists: [],
            attList: [],
            fileInfo: {
                limit: 5,
                url: '/market/compatt/upload',
                fileList: []
            },
            userInfo: {},
        }
    },
    methods: {
        //功能栏
        iconCli(v) {
            if (v === 1) {

            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen
            }
        },
        //查询字典
        getListwglb() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'wglb'
                },
            }).then((res) => {
                this.options1 = res.data;
            });
        },
        getListsf() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'sf'
                },
            }).then((res) => {
                this.options2 = res.data;
            });
        },
        getListyys(v) {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'yys'
                },
            }).then((res) => {
                if (v === 1) {
                    this.options3 = [];
                    res.data.forEach(item => {
                        if (item.dataName !== '移动') {
                            this.options3.push(item)
                        }
                    })
                } else {
                    this.options3 = res.data;
                }
            });
        },
        getListwgxx() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'wgxx'
                },
            }).then((res) => {
                this.options4 = res.data;
            });
        },
        getListregion() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'region'
                },
            }).then((res) => {
                this.options5 = res.data;
            });
        },
        getsaleChnl() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'saleChnl'
                },
            }).then((res) => {
                this.saleChnlopt = res.data;
            });
        },
        //添加、取消
        submitList(v) {
            if (v === 1) {
                this.getUser();
                this.$router.push("/competitor?type=1");
                return
            }
            let _this = this;
            let attList = [];
            for (let i = 0; i < this.attList.length; i++) {
                attList.push({
                    id: this.attList[i].id
                });
            }
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    let nowdata = _this.$formatDate(new Date(), "YYYY-MM-DD");
                    this.infolist.opTime = nowdata;
                    this.infolist.sts = 0;
                    this.infolist.stsDesc = '未审核';
                    this.infolist.type = '正规';
                    this.$http({
                        url: "/market/cwcompetitor/save",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            wCompetitor: this.infolist,
                            attList: attList
                        },
                    }).then((res) => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: 'error'
                            });
                        } else {
                            _this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            _this.$router.push("/competitor");
                        }
                    });
                }
            })
        },
        //处理所需数据
        verifcheck(v) {
            if (v === 1) {
                for (let i = 0; i < this.options1.length; i++) {
                    if (this.options1[i].dataCode === this.infolist.violationCate) {
                        this.infolist.violationCateName = this.options1[i].dataName
                    }
                }
            }
            if (v === 2) {
                if (this.infolist.provinceCode === 'hlj') {
                    this.getListyys(1);
                    if (this.infolist.operatorCode === 'mobile') {
                        this.infolist.operatorCode = '';
                    }
                } else {
                    this.getListyys();
                }
                for (let i = 0; i < this.options2.length; i++) {
                    if (this.options2[i].dataCode === this.infolist.provinceCode) {
                        this.infolist.provinceName = this.options2[i].dataName
                    }
                }
            }
            if (v === 3) {
                for (let i = 0; i < this.options3.length; i++) {
                    if (this.options3[i].dataCode === this.infolist.operatorCode) {
                        this.infolist.operatorName = this.options3[i].dataName
                    }
                }
            }
            if (v === 4) {
                for (let i = 0; i < this.options4.length; i++) {
                    if (this.options4[i].dataCode === this.infolist.violationItem) {
                        this.infolist.violationItemName = this.options4[i].dataName
                    }
                }
            }
            if (v === 5) {
                for (let i = 0; i < this.options5.length; i++) {
                    if (this.options5[i].dataCode === this.infolist.recordRegionCode) {
                        this.infolist.recordRegionName = this.options5[i].dataName
                    }
                }
            }
        },
        uploadBack(v) {
            this.attList = v;
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.infolist = {
                opNo: '',
                regionName: '',
                regionCode: '',
                deptName: '',
                deptCode: '',
                opName: '',
                contactPhone: '',
            };
            this.infolist.opNo = this.userInfo.loginNo;
            // this.infolist.regionName = '';
            // this.infolist.regionCode = '';
            // this.infolist.deptName = '';
            // this.infolist.deptCode = '';
            this.infolist.opName = this.userInfo.loginName;
            this.infolist.contactPhone = this.userInfo.phoneNo;
        }
    },
    mounted() {

    },
    created() {
        this.getListwglb();
        this.getListyys();
        this.getListsf();
        this.getListwgxx();
        this.getListregion();
        this.getsaleChnl();
        this.getUser();
    },
    watch:{
        $route(to, from) {
            if(to.path === '/addCompetitor'){

            }
        },
    }
}
</script>
<style scoped lang="scss">
.titbox {
    div {
        float: right;
        margin-top: 20px;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.info-form {
    margin-top: 30px;
    height: calc(100% - 150px);
    overflow-y: scroll;

    .info-line {
        width: 100%;
        display: block;

        div {
            width: 50%;
            display: inline-block;
        }

        span {
            width: 80px;
            display: inline-block;
            text-align: left;

            i {
                color: red;
                display: inline-block;
                padding-right: 5px;
            }
        }

        .el-select,
        .el-input {
            width: calc(100% - 100px);
        }
    }

    .tea-r {
        /*text-align: right;*/
    }

    .online {
        width: 100%;

        span {
            vertical-align: top;
        }

        .el-textarea {
            width: calc(100% - 100px);
        }
    }
}

.titbtn-box {
    text-align: right;
    margin: 15px 20px 0 0;

    button {
        width: 120px;
    }
}
</style>