oa-system/src/components/MCR/MarketCustomerResourcesOperation.vue

<template>
    <div class="operationMCR-Box">
        <div class="operationMCR-topOper">
            <el-button type="primary" @click="Getback">返回</el-button>
            <el-button type="primary" @click="save">{{ BtnTitle }}</el-button>
        </div>
        <div>
            <el-form :model="requestData" label-width="110px" :rules="rules" ref="BindData">
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="客户级别:" prop="lvlid">
                                    <el-select v-model="requestData.lvlid" placeholder="请选择客户级别">
                                        <el-option v-for="item in level" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="客户类别:" prop="category">
                                    <el-select v-model="requestData.category" placeholder="请选择客户类别">
                                        <el-option v-for="item in customerClass" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="权重:" prop="weight">
                                    <el-select v-model="requestData.weight" placeholder="权重">
                                        <el-option label="A" value="393"></el-option>
                                        <el-option label="B" value="392"></el-option>
                                        <el-option label="C" value="391"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="联系人" prop="contact">
                                    <el-input v-model="requestData.contact"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="性别">
                                    <el-select v-model="requestData.gender" placeholder="请选择活动区域">
                                        <el-option label="男" :value="0"></el-option>
                                        <el-option label="女" :value="1"></el-option>
                                        <el-option label="暂无" :value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="手机号" prop="telephone">
                                    <el-input v-model="requestData.telephone"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="座机号:">
                                    <el-input v-model="requestData.phone"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="邮箱:">
                                    <el-input v-model="requestData.email"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="职务:" prop="job">
                                    <el-input v-model="requestData.job"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="单位名称:" prop="client">
                                    <el-input v-model="requestData.client"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="单位名称缩写:">
                                    <el-input v-model="requestData.clientshort"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="所在城市:" prop="location">
                                    <el-input v-model="requestData.location"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="具体地址:">
                                    <el-input v-model="requestData.address"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="护照:">
                                    <el-input v-model="requestData.passport"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple"><el-form-item label="护照有效期:">
                                    <el-date-picker v-model="requestData.passportDate" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item></div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="生日信息:">
                                    <el-date-picker v-model="requestData.birthday" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="今年预计出团:">
                                    <el-input v-model="requestData.predele"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple"><el-form-item label="今年已出团:">
                                    <el-input v-model="requestData.finlishedDele"></el-input>
                                </el-form-item></div>
                        </el-col>
                    </el-row>
                </div>
                <div id="BiTian">
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-form-item label="负责人:">
                                    <el-select v-model="requestData.ascribedUser" multiple placeholder="请选择">
                                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-form-item label="业务归属:">
                                    <el-select v-model="requestData.ascribedDepartment" multiple placeholder="请选择"
                                        width="300px">
                                        <el-option v-for="item in serviceClass" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>

                </div>
                <div>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <el-form-item label="备注:">
                                    <el-input v-model="requestData.remark" type="textarea" :rows="5"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>


export default {
    data() {
        return {
            requestData: {
                "status": 0,
                "id": 0,
                "number": 0,
                "lvlid": "",
                "client": "",
                "weight": "",
                "clientshort": "",
                "contact": "",
                "gender": 0,
                "passport": "",
                "passportDate": "",
                "job": "",
                "telephone": "",
                "phone": "",
                "email": "",
                "location": "",
                "address": "",
                "birthday": "",
                "otherinfo": "",
                "wechat": "",
                "category": "",
                "predele": "",
                "finlishedDele": "",
                "createUserId": JSON.parse(localStorage.getItem("userinif")).userInfo.userId,
                "remark": "",
                "ascribedUser": [

                ],
                "ascribedDepartment": [

                ]
            },
            BtnTitle: '保存新增数据',
            customerClass: [],//客户类别
            level: [], //客户级别
            clientTypeList: [],
            serviceClass: [],//业务归属
            users: [],//负责人
            rules: { //校验规则
                lvlid: [
                    { required: true, message: '请选择客户级别', trigger: 'blur' },
                ],
                category: [
                    { required: true, message: '请选择客户类别', trigger: 'blur' },
                ],
                weight: [
                    { required: true, message: '权重级别', trigger: 'blur' },
                ],
                contact: [
                    { required: true, message: '请输入联系人名称', trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '请输入联系人手机号', trigger: 'blur' },
                ],
                job: [
                    { required: true, message: '请输入联系人职务', trigger: 'blur' },
                ],
                client: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' },
                ],
                location: [
                    { required: true, message: '请输入所在城市', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        Getback() {
            this.$router.push('/home/MCR');
        },
        QueryPageData() {
            var that = this;
            //初始化界面数据
            this.$axios.post('/api/MarketCustomerResources/QuerySelectAndSingleData', { Id: this.requestData.id }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    //下拉列表
                    that.customerClass = resp.data.data.customerClass;//客户类别
                    that.level = resp.data.data.level;//客户级别

                    that.serviceClass = resp.data.data.serviceClass;//业务分类
                    that.users = resp.data.data.users; //负责人

                    if (resp.data.data.data != null) { //单条数据
                        var obj = resp.data.data.data;
                        that.requestData.lvlid = obj.lvlid;
                        that.requestData.category = obj.category;
                        that.requestData.weight = obj.weight;
                        that.requestData.contact = obj.contact;
                        that.requestData.gender = obj.gender;
                        that.requestData.telephone = obj.telephone;
                        that.requestData.phone = obj.phone;
                        that.requestData.email = obj.email;
                        that.requestData.job = obj.job;
                        that.requestData.client = obj.client;
                        that.requestData.clientshort = obj.clientShort;
                        that.requestData.location = obj.location;
                        that.requestData.address = obj.address;
                        that.requestData.passport = obj.passport;
                        that.requestData.passportDate = obj.passportDate;
                        that.requestData.birthday = obj.birthday;
                        that.requestData.predele = obj.preDele;
                        that.requestData.finlishedDele = obj.finlishedDele;
                        that.requestData.ascribedUser = obj.ascribedUser.map(x => x.userId);
                        that.requestData.ascribedDepartment = obj.ascribedDepartment.map(x => x.id);
                        that.requestData.remark = obj.remark;
                    }
                }
            })
        },
        save() {
            var that = this;

            var p = new Promise((resolve, reject) => {
                this.$refs.BindData.validate((valid) => {
                    if (valid) {
                        resolve(true);
                    } else {
                        reject(false);
                    }
                });
            })

            p.then(resolve => {
                if (this.requestData.id == 0) {
                    //添加
                    this.requestData.status = 1;
                } else {
                    //修改
                    this.requestData.status = 2;
                }

                var pred = parseInt(that.requestData.predele);
                var inli = parseInt(that.requestData.finlishedDele);

                that.requestData.predele = isNaN(pred) ? 0 : pred;
                that.requestData.finlishedDele = isNaN(inli) ? 0 : inli;

                this.$axios.post('/api/MarketCustomerResources/NewClientOp', this.requestData, {
                    headers: {
                        'Authorization': that.token,
                    }
                }).then(resp => {
                    if (resp.data.code == 200) {
                        that.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.$router.push('/home/MCR');
                    } else {
                        that.$message.error(resp.data.msg);
                    }
                })

            }).catch(reject => {
                console.log("未通过表单校验");
            })

        }
    },
    mounted() {
        try {
            this.requestData.id = parseInt(this.$route.query.id);
        } catch (err) {
            this.requestData.id = 0;
            console.log('未获取id');
        }

        if (this.requestData.id == 0) {
            this.BtnTitle = '保存新增数据';
        } else {
            this.BtnTitle = '保存修改数据';
        }

        this.QueryPageData();
    }
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
}

.operationMCR-Box {
    background-color: #fff;
    padding: 30px 30px 20px 0px;
    border-radius: 10px;
}

.operationMCR-topOper {
    text-align: right;
    padding: 0 10px 20px 0px;

}

#BiTian .el-select {
    width: 400px;

}
</style>