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 ref="form" :model="requestData" label-width="110px">
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="客户级别:">
                                    <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="客户类别:">
                                    <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="权重:">
                                    <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="联系人">
                                    <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="手机号">
                                    <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="职务:">
                                    <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="单位名称:">
                                    <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="所在城市:">
                                    <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-input v-model="requestData.passportDate"></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.birthday"></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.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="usersSel" 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="serviceClassSel" 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, //number
                "lvlid": 0, //地市州Id
                "client": "", //客户单位
                "weight": "", 
                "clientshort": "",
                "contact": "",
                "gender": 0,
                "passport": "",
                "passportDate": "",
                "job": "",
                "telephone": "",
                "phone": "",
                "email": "",
                "location": "",
                "address": "",
                "birthday": "",
                "otherinfo": "",
                "wechat": "",
                "category": 0,
                "predele": 0,
                "finlishedDele": 0,
                "createUserId": parseInt(JSON.parse(localStorage.getItem("userinif")).userInfo.userId),
                "remark": ""
            },
            BtnTitle: '保存新增数据',
            customerClass: [],//客户类别
            level: [], //客户级别
            clientTypeList: [],
            serviceClass: [],//业务归属
            users: [],//负责人
            serviceClassSel: [],
            usersSel: [],
        }
    },
    methods: {
        Getback() {
            this.$router.push('/home/MCR');
        },
        QueryPageData() {
            var that = this;
            //初始化界面数据
            this.$axios.post('/api/MarketCustomerResources/QuerySelectAndSingleData', { Id: this.requestData.id }, {
                headers: {
                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
                }
            }).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.toString();
                        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.usersSel = obj.ascribedUser.map(x=>x.userId);
                        that.serviceClassSel = obj.ascribedDepartment.map(x=>x.id);
                        that.requestData.remark = obj.remark;
                    }
                }

            })
        },
        save(){

            if(this.requestData.id == 0){

            }
            
        }
    },
    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>