oa-system/src/components/OP/Groupedit.vue

<template>
    <div v-loading="fullscreenLoading">
        <div class="groupedit">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="required-box">
                    <el-form-item label-width="120px" label="销售报价号:">
                        <el-input :readonly="true" el-input v-model="ruleForm.quotenum"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="本团成单人:" prop="person">
                        <el-select v-model="ruleForm.person" placeholder="请选择本团成单人     ">
                            <el-option v-for="(item, index) in personarr" :key="index" :label="item.cnName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="120px" label="客户级别:" prop="grades">
                        <el-select @change="rankchange" v-model="ruleForm.grades" placeholder="请选择客户级别">
                            <el-option v-for="(item, index) in gradearr" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="120px" label="团组类型:" prop="OP">
                        <el-select class="op-type" v-model="ruleForm.OP" placeholder="请选择团组类型">
                            <el-option v-for="(item, index) in OPtype" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="120px" label="客户名称:" prop="customername">
                        <el-autocomplete
                        style="width: 100%;"
                        class="inline-input"
                        v-model="ruleForm.customername"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleSelect"
                        ></el-autocomplete>
                        <!-- <el-input el-input v-model="ruleForm.customername"></el-input> -->
                    </el-form-item>
                    <el-form-item label-width="120px" label="客户单位:" prop="customerunits">
                        <el-autocomplete
                        style="width: 100%;"
                        class="inline-input"
                        v-model="ruleForm.customerunits"
                        :fetch-suggestions="querySearchdw"
                        placeholder="请输入内容"
                        @select="splicingname"
                        ></el-autocomplete>
                        <!-- <el-input el-input v-model="ruleForm.customerunits"></el-input> -->
                    </el-form-item>
                    <el-form-item label-width="120px" label="出访国家:" prop="countriesvisited">
                        <el-input @blur="splicingname" el-input v-model="ruleForm.countriesvisited" placeholder="按照“国家1、国家2、国家3”录入"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="出访时间:" prop="visitingtime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.visitingtime"
                            style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label-width="120px" label="出访天数:" prop="numdays">
                        <el-input @blur="splicingname" el-input v-model="ruleForm.numdays"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="出访人数:" prop="numperson">
                        <el-input el-input v-model="ruleForm.numperson"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="团组名称:" prop="groupname">
                        <el-input el-input v-model="ruleForm.groupname"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="合同时间:" prop="contracttime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.contracttime"
                            style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    
                </div>
                <div style="display: flex;">
                    <el-form-item style="width: 36.5%;" label-width="120px" label="是否用于投标:">
                        <el-radio-group v-model="ruleForm.radioval" @change="agreeChange">
                            <el-radio label="0">否</el-radio>
                            <el-radio label="1">是</el-radio>
                        </el-radio-group>
                        <!-- <el-radio v-model="ruleForm.radioval" label='0'>否</el-radio>
                        <el-radio v-model="ruleForm.radioval" label='1'>是</el-radio> -->
                    </el-form-item>
                    <div  class="advance-box">
                        <el-form-item label-width="120px" label="于出访时间前" prop="occasion">
                            <el-input style="width: 100px;" el-input v-model="ruleForm.occasion"></el-input>
                        </el-form-item>
                        <el-form-item label-width="98px" label="日支付款项:" prop="payments">
                            <el-input el-input v-model="ruleForm.payments"></el-input>
                        </el-form-item>
                        <span style="margin-bottom: 22px;display: inline-block;color: #606266;font-size: 14px;">（预付款,请输入RMB）</span>
                    </div>
                </div>
                <div style="display: flex;align-items: center;">
                    <el-form-item style="width:16%" label-width="120px" label="OP提成等级" prop="opRoyaltyLv">
                        <el-select @change="commissionlevel" v-model="ruleForm.opRoyaltyLv" placeholder="OP提成等级" clearable filterable
                            style="width: 100%;">
                            <el-option v-for="item in opRoyaltyLvList" :key="item.id" :label="item.name + '元'"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:50%" label-width="98px" label="等级说明:" prop="opRoyaltyRemark">
                        <el-select style="width:100%" class="op-type" v-model="ruleForm.opRoyaltyRemark" placeholder="请选择团组类型">
                            <el-option v-for="(item, index) in commissionleve" :key="index" :label="item"
                                :value="item"></el-option>
                        </el-select>
                        <!-- <el-input type="textarea" v-model="ruleForm.opRoyaltyRemark" style="width: 500px;"></el-input> -->
                    </el-form-item>
                    <span style="margin-bottom: 22px;display: inline-block;color: #606266;font-size: 14px;"
                        @click="dialogVisible = true">（点击查看等级说明）</span>
                </div>
                <el-form>
                    <el-form-item label-width="120px" label="出访目的:">
                        <el-input type="textarea" v-model="ruleForm.purposevisit"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="特殊需求:">
                        <el-input type="textarea" v-model="ruleForm.specialneeds"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="公务需求:">
                        <el-input type="textarea" v-model="ruleForm.Officialneeds"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="其他需求:">
                        <el-input type="textarea" v-model="ruleForm.otherneeds"></el-input>
                    </el-form-item>
                </el-form>
                <el-form class="approval-box">
                    <el-form-item label-width="160px" label="出国任务审批部门名称:">
                        <el-input el-input v-model="ruleForm.approvalname"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="批件文号:">
                        <el-input el-input v-model="ruleForm.approvalnumber1"></el-input>
                    </el-form-item>
                    <el-form-item label-width="130px" label="政治审查部门名称:">
                        <el-input el-input v-model="ruleForm.censorshipdepartment"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="批件文号:">
                        <el-input el-input v-model="ruleForm.approvalnumber2"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item label-width="120px" label="备注:">
                        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="微信号:">
                        <el-input type="textarea" v-model="ruleForm.Wechat"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="手机号:">
                        <el-input type="textarea" v-model="ruleForm.phonenumber"></el-input>
                    </el-form-item>
                </el-form>
                <el-form-item style="text-align: right;">
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                    <el-button @click="resetForm('ruleForm')">重 置</el-button>
                    <el-button @click="clickback()">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog title="等级说明" :visible.sync="dialogVisible" width="30%"
            :close-on-click-modal="false">
            <span>
                1)普通团组：￥300/团；<br><br>

                2)VIP团（地市州书记 市长 成都副市级别 副书记级别 成都正厅级干部）：￥500/团；<br><br>

                3)VVIP团（四川省副部级 副省级 省长 ）：￥1000/团；<br><br>

                4)非全程接待或非标准团组，接待5天内（含5天）的团组：￥100/团；<br><br>

                5)非全程接待或非标准团组，但负责全程机票，接待5天以上的团组：￥200/团；<br><br>

                6)非全程接待或非标准团组且不负责全程机票，接待5天以上的团组：￥100/团<br><br>

                7)非全程接待或非标准团组且不负责全程机票，只负责地接的，人数为10人以上的的团组:300/团；<br><br>

                8)人数为5人以内（含5人）的标准团组：￥200/团；<br><br>

                9)人数为5人以内（含5人）并且非全程接待5天内（含5天）的团组：￥100/团；<br><br>

                10)人数为5人以内（含5人），非全程接待5天以上并且负责全程机票的团组：￥200/团；<br><br>

                11)人数为5人以内（含5人）并且非全程接待5天以上，但不负责全程机票的团组：￥100.00/团；<br><br>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { el } from '@fullcalendar/core/internal-common';
import { all } from 'q';
export default {
    // beforeRouteLeave(to, from, next) {
    //     console.log(to);
    //     console.log(from);
    //     if(to.name=='OPgroup'){
    //         to.meta.keepAlive = true;
    //     }
    //     next()
    // },
    data() {
        return {
            editid: '',
            token: '',
            userid: '',
            ruleForm: {
                quotenum: '',
                groupname: '',
                customername: '',
                customerunits: '',
                countriesvisited: '',
                visitingtime: '',
                contracttime: '',
                numdays: '',
                numperson: '',
                occasion: '',
                payments: '',
                purposevisit: '',
                specialneeds: '',
                otherneeds: '',
                Officialneeds:'',
                approvalname: '',
                approvalnumber1: '',
                approvalnumber2: '',
                censorshipdepartment: '',
                remark: '',
                phonenumber: '',
                Wechat: '',
                OP: '',
                grades: '',
                person: '',
                opRoyaltyLv: '',
                opRoyaltyRemark: '',
                radioval:'0',
            },
            commissionleve:[
               '无'
            ],
            personarr: [],
            gradearr: [],
            OPtype: [],
            rules: {
                groupname: [
                    { required: true, message: '请输入团组名称', trigger: 'blur' },
                ],
                customername: [
                    { required: true, message: '请输入客户名称', trigger: 'change' },
                ],
                customerunits: [
                    { required: true, message: '请输入客户单位', trigger: 'change' },
                ],
                countriesvisited: [
                    { required: true, message: '请输入出访国家', trigger: 'blur' },
                ],
                person: [
                    { required: true, message: '请选择成团人', trigger: 'change' }
                ],
                grades: [
                    { required: true, message: '请选择级别', trigger: 'change' }
                ],
                OP: [
                    { required: true, message: '请选择类型', trigger: 'change' }
                ],
                visitingtime: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                contracttime: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                numdays: [
                    { required: true, message: '请输入出访天数', trigger: 'blur' },
                    { pattern: "^\\d+$", message: "请输入正整数", trigger: "blur" }
                ],
                numperson: [
                    { required: true, message: '请输入出访人数', trigger: 'blur' },
                    { pattern: "^\\d+$", message: "请输入正整数", trigger: "blur" }
                ],
                occasion: [
                    { required: true, message: '请输入出天数', trigger: 'blur' },
                    { pattern: "^\\d+$", message: "请输入正整数", trigger: "blur" }
                ],
                payments: [
                    { required: true, message: '请输入出款额', trigger: 'blur' },
                    { pattern: "^\\d+(\\.\\d+)?$", message: "请输入正浮点数或整数", trigger: "blur" }
                ],
                opRoyaltyLv: [
                    { required: true, message: '请选择op提成等级', trigger: 'change' }
                ],
                opRoyaltyRemark: [
                    { required: true, message: '请填写等级描述', trigger: 'change' }
                ],
            },
            fullscreenLoading: false,
            dialogVisible: false,
            opRoyaltyLvList: [],
            restaurants: [],
            restaurantss:[],
            customerunitslist:[],
        };
    },
    methods: {
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        querySearchdw(queryString, cb) {
            var restaurants = this.customerunitslist;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return restaurant.value.replace("  ", "").toLowerCase().match(queryString.toLowerCase());
            };
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addGroupInfo()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //拼接团名
        splicingname(){
            console.log(111)
            this.ruleForm.groupname=this.ruleForm.customerunits+'赴'+this.ruleForm.countriesvisited+this.ruleForm.numdays+'日'
        },
        //清空
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //返回
        clickback() {
            // this.$router.back(-1)
            this.$router.go(-1);
        },
        //获取下拉列表
        getdown() {
            var url = "/api/Groups/GroupEditBasicSource"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res)
                    that.restaurantss=res.data.data.clientData;
                    that.restaurants= that.restaurantss.map((terminal) => {
                        return {
                            value: terminal.contact +'   '+ terminal.client +'   '+terminal.telephone+'   '+terminal.wechat,
                        };
                    });
                    that.customerunitslist= that.restaurantss.map((terminal) => {
                        return {
                            value:terminal.client,
                        };
                    });
                    that.personarr = res.data.data.userData;
                    that.gradearr = res.data.data.teamLevData;
                    that.OPtype = res.data.data.teamTypeData;
                }
            })
            var url = "/api/System/QuerySetData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    dataType: 70,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.opRoyaltyLvList = res.data.data;
                }
            })
        },
        //新增获取销售号
        getSalesQuoteNo() {
            if (this.editid == undefined) {
                var url = "/api/Groups/GetGroupSalesQuoteNo"
                var that = this
                if (this.editid == undefined) {
                    this.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + this.token
                        },
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.ruleForm.quotenum = res.data.data.salesQuoteNo;
                        }
                    })
                }
            }

        },
        //提成等级值改变
        commissionlevel(val){
            var tctext
            for(var tc=0;tc<this.opRoyaltyLvList.length;tc++){
                if(this.opRoyaltyLvList[tc].id==val){
                    tctext=this.opRoyaltyLvList[tc].remark.split('&')
                }
            }
            this.ruleForm.opRoyaltyRemark='';
            this.commissionleve=tctext;
            this.ruleForm.opRoyaltyRemark=tctext[0]
        },
        //处理时间
        disposeTime(val) {
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let time = y + '-' + m + '-' + d;
            return time
        },
        //是否用于投标
        agreeChange(val){
            if(val==1){
                this.ruleForm.groupname='投标-'+this.ruleForm.groupname;
            }else{
                this.ruleForm.groupname=this.ruleForm.groupname.split("投标-").join("");
            }
        },
        //编辑获取原数据
        getGroupInfo() {
            var url = "/api/Groups/GetGroupInfo"
            var that = this
            var datagroup
            if (this.editid != undefined) {
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        portType: 1,
                        id: that.editid
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        datagroup = res.data.data;
                        that.ruleForm.quotenum = datagroup.salesQuoteNo;
                        that.ruleForm.groupname = datagroup.teamName;
                        that.ruleForm.customername = datagroup.clientName;
                        that.ruleForm.customerunits = datagroup.clientUnit;
                        that.ruleForm.countriesvisited = datagroup.visitCountry.replaceAll("|", "、");
                        that.ruleForm.visitingtime = new Date(datagroup.visitDate.split(' ')[0]);
                        that.ruleForm.numdays = datagroup.visitDays + "";
                        that.ruleForm.numperson = datagroup.visitPNumber + "";
                        that.ruleForm.contracttime = new Date(datagroup.tontractTime.split(' ')[0]);
                        that.ruleForm.payments = datagroup.paymentMoney + '';
                        that.ruleForm.occasion = datagroup.payDay + '';
                        that.ruleForm.purposevisit = datagroup.visitPurpose;
                        that.ruleForm.specialneeds = datagroup.specialNeeds;
                        that.ruleForm.otherneeds = datagroup.otherNeeds;
                        that.ruleForm.Officialneeds = datagroup.officialneeds;//公务需求
                        that.ruleForm.approvalname = datagroup.cgrwspbmmc;
                        that.ruleForm.approvalnumber1 = datagroup.cgrwspwh;
                        that.ruleForm.censorshipdepartment = datagroup.zzscbmmc;
                        that.ruleForm.approvalnumber2 = datagroup.zzscspwh;
                        that.ruleForm.remark = datagroup.remark;
                        that.ruleForm.Wechat = datagroup.weChatNo;
                        that.ruleForm.phonenumber = datagroup.tellPhone;
                        that.ruleForm.OP = datagroup.teamDid;
                        that.ruleForm.grades = datagroup.teamLevSId;
                        that.ruleForm.person = datagroup.jietuanOperator;
                        that.ruleForm.opRoyaltyLv = parseInt(datagroup.opRoyaltyLv);
                        that.ruleForm.opRoyaltyRemark = datagroup.opRoyaltyRemark;
                        that.ruleForm.radioval = datagroup.isBid==0?'0':'1';
                    }
                })
            }
        },
        //新增编辑
        addGroupInfo() {
            var url = "/api/Groups/GroupOperation";
            var that = this;
            that.fullscreenLoading = true;
            var status
            if (this.editid != undefined) {
                status = 2
            } else {
                status = 1
            }
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    status: status,//添加1//修改2//删除3
                    id: that.editid,
                    userId: that.userid,
                    salesQuoteNo: that.ruleForm.quotenum,
                    jietuanOperator: parseInt(that.ruleForm.person),//
                    teamLevSId: parseInt(that.ruleForm.grades),//
                    teamDid: parseInt(that.ruleForm.OP),//
                    teamName: that.ruleForm.groupname,
                    clientName: that.ruleForm.customername,
                    clientUnit: that.ruleForm.customerunits,
                    visitCountry: that.ruleForm.countriesvisited.replaceAll("、", "|"),
                    visitDate: that.disposeTime(that.ruleForm.visitingtime),
                    visitDays: parseInt(that.ruleForm.numdays),
                    visitPNumber: parseInt(that.ruleForm.numperson),
                    tontractTime: that.disposeTime(that.ruleForm.contracttime),
                    payDay: parseInt(that.ruleForm.occasion),
                    paymentMoney: parseInt(that.ruleForm.payments),
                    visitPurpose: that.ruleForm.purposevisit,
                    specialNeeds: that.ruleForm.specialneeds,
                    otherNeeds: that.ruleForm.otherneeds,
                    officialneeds:that.ruleForm.Officialneeds,//公务需求
                    cgrwspbmmc: that.ruleForm.approvalname,
                    cgrwspwh: that.ruleForm.approvalnumber1,
                    zzscbmmc: that.ruleForm.censorshipdepartment,
                    zzscspwh: that.ruleForm.approvalnumber2,
                    tellPhone: that.ruleForm.phonenumber,
                    weChatNo:that.ruleForm.Wechat,
                    remark: that.ruleForm.remark,
                    opRoyaltyLv: that.ruleForm.opRoyaltyLv,
                    opRoyaltyRemark: that.ruleForm.opRoyaltyRemark,
                    isBid: that.ruleForm.radioval=='0'?0:1,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                    that.fullscreenLoading = false;
                    that.$router.go(-1);
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                    that.fullscreenLoading = false;
                }
            })
        },
        handleSelect(item) {
            // console.log(item.split(' '));
            console.log(item.value.split('   '));
            this.ruleForm.customername=item.value.split('   ')[0];
            this.ruleForm.customerunits=item.value.split('   ')[1];
            this.ruleForm.phonenumber=item.value.split('   ')[2];
            this.ruleForm.Wechat=item.value.split('   ')[3];
            this.splicingname();
        },
        rankchange(val){
            if (val==771) {
                this.ruleForm.opRoyaltyLv=999
                this.commissionlevel(this.ruleForm.opRoyaltyLv)
            }
            if(val==772){
                this.ruleForm.opRoyaltyLv=1000
                this.commissionlevel( this.ruleForm.opRoyaltyLv)
            }
            if(val==770){
                this.ruleForm.opRoyaltyLv=995
                this.commissionlevel( this.ruleForm.opRoyaltyLv)
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        next();
    },
    mounted() {
        this.editid = this.$route.query.id;
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userid = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.getSalesQuoteNo();
        this.getdown();
        this.getGroupInfo();
    }
}
</script>
<style>
.groupedit {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
}

.required-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.required-box>div {
    width: 30%;
}

.required-box .el-select {
    width: 100%;
}

.approval-box {
    display: flex;
    justify-content: space-between;
}

.approval-box>div {
    width: 23%;
    
}

.approval-box>div:nth-child(1) {
    width: 30%;
}

.advance-box {
    display: flex;
    align-items: center;
}
</style>>