spfm-market-front/src/pages/main/competitor/changeCompetNew.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 :popper-append-to-body="false" 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>
                                <span>月费(元)</span>
                                <el-input v-model="infolist.monthFee" placeholder="月费"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span>预存款(元)</span>
                                <el-input v-model="infolist.preFee" placeholder="预存款"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <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>酬金</span>
                                <el-input v-model="infolist.remFee" placeholder="酬金"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span>销售渠道</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 prop="saleScope">
                                <span><i>*</i>销售范围</span>
                                <el-input v-model="infolist.saleScope" placeholder="销售范围"></el-input>
                            </el-form-item>
                            <el-form-item prop="monthSale">
                                <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>
                        <div class="info-line">
                            <el-form-item>
                                <span>解决结果</span>
                                <el-select v-model="infolist.fixFlag" placeholder="解决结果">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span>反馈总部</span>
                                <el-select v-model="infolist.groupFlag" placeholder="是否反馈总部">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item>
                                <span>返回竞合</span>
                                <el-select v-model="infolist.wwFlag" placeholder="是否返回竞合">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span>反馈总局</span>
                                <el-select v-model="infolist.admFlag" placeholder="是否反馈总局">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <div class="info-line">
                            <el-form-item prop="opName">
                                <span><i>*</i>上报人</span>
                                <el-input v-model="infolist.opName" placeholder="销售范围"></el-input>
                            </el-form-item>
                            <el-form-item prop="contactPhone">
                                <span><i>*</i>联系电话</span>
                                <el-input v-model="infolist.contactPhone" 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 violationItem = (rule, value, callback) => {
            if (!this.infolist.violationItem) {
                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 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 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
                }],
                violationItem: [{
                    required: true,
                    trigger: 'change',
                    validator: violationItem
                }],
                tariffName: [{
                    required: true,
                    trigger: 'blur',
                    validator: tariffName
                }],
                monthFee: [{
                    required: true,
                    trigger: 'blur',
                    validator: monthFee
                }],
                preFee: [{
                    required: true,
                    trigger: 'blur',
                    validator: preFee
                }],
                remFee: [{
                    required: true,
                    trigger: 'blur',
                    validator: remFee
                }],
                saleChnl: [{
                    required: true,
                    trigger: 'change',
                    validator: saleChnl
                }],
                monthSale: [{
                    required: true,
                    trigger: 'blur',
                    validator: monthSale
                }],
                saleScope: [{
                    required: true,
                    trigger: 'blur',
                    validator: saleScope
                }],
                violationContent: [{
                    required: true,
                    trigger: 'blur',
                    validator: validateUsername
                }],
                taffiffContent: [{
                    required: true,
                    trigger: 'blur',
                    validator: taffiffContent
                }],
            },
            tooltit: '修改竞争对手信息',
            infolist: {
                roomname: '0'
            },
            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: []
            },
            ifoption: [{
                id: '0',
                name: '是'
            },
                {
                    id: '1',
                    name: '否'
                }
            ]
        }
    },
    methods: {
        //获取详情
        getInfo(v) {
            let _this = this;
            this.$http({
                url: "/market/cwcompetitor/queryInfo",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    id: v
                },
            }).then((res) => {
                _this.infolist = res.data;
                this.attList = [];
                this.fileInfo.fileList = [];
                res.data.attList.forEach(item => {
                    this.fileInfo.fileList.push({
                        name: item.fileName,
                        url: '',
                        id: item.id,
                        fileName: item.fileName
                    });
                    this.attList.push({
                        name: item.fileName,
                        url: '',
                        id: item.id,
                        fileName: item.fileName
                    });
                })
                if (this.infolist.provinceCode === 'hlj') {
                    this.getListyys(1);
                } else {
                    this.getListyys();
                }
            });
        },
        //功能栏
        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.$router.push("/competitor");
                return
            }
            let _this = this;
            let attList = [];
            for (let i = 0; i < this.attList.length; i++) {
                attList.push({
                    id: this.attList[i].id
                });
            }
            this.infolist.fixFlag === '1' ? this.infolist.fixFlagDesc = '否' : this.infolist.fixFlagDesc = '是';
            this.infolist.groupFlag === '1' ? this.infolist.groupFlagDesc = '否' : this.infolist.groupFlagDesc = '是';
            this.infolist.wwFlag === '1' ? this.infolist.wwFlagDesc = '否' : this.infolist.wwFlagDesc = '是';
            this.infolist.admFlag === '1' ? this.infolist.admFlagDesc = '否' : this.infolist.admFlagDesc = '是';
            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.$http({
                        url: "/market/cwcompetitor/update",
                        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;
        }
    },
    mounted() {

    },
    created() {
        this.getListwglb();
        this.getListyys();
        this.getListsf();
        this.getListwgxx();
        this.getListregion();
        this.getsaleChnl();
        this.getInfo(this.$route.query.id);
    }
}
</script>
<style scoped lang="scss">
.fileline {
    color: #666;
    font-size: 14px;
    overflow: hidden;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    border-radius: 3px;

    span {}

    i {
        float: right;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
    }
}

.fileline:hover {
    background: #f4f4f4;
}

.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;

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