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

<template>
    <div class="mcrh" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
        <el-dialog width="960px" title="日志查询" :visible.sync="mcrhVisible" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="40px">
                <div class="mcrh-dialog">
                    <el-form-item label="类型">
                        <el-select @change="logchange" style="width:200px" multiple collapse-tags
                            v-model="form.opTypeLabel" placeholder="请选择类型">
                            <el-option v-for="(item, index) in logtypearr" :key="index" :label="item.text"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="人员">
                        <el-select @change="logchange" style="width:200px" multiple collapse-tags
                            v-model="form.opUserLabel" placeholder="请选择人员">
                            <el-option v-for="(item, index) in personnelarr" :key="index" :label="item.text"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日期">
                        <el-date-picker @change="logchange" style="width:350px" v-model="form.time" type="daterange"
                            align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </div>
            </el-form>
            <div>
                <el-table height="529px" :data="logtableData" border style="width: 100%">
                    <el-table-column prop="rowIndex" label="序号" width="150">
                    </el-table-column>
                    <el-table-column prop="label" label="具体事件">
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间" width="180">
                    </el-table-column>
                </el-table>
                <div style="text-align: center;">
                    <el-pagination @size-change="loghandleSizeChange" @current-change="loghandleCurrentChange"
                        :current-page="logcurrentPage" :page-sizes="[10, 15, 20]" :page-size="logpagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="logtotal">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
        <div class="mcr-box">
            <div class="mcr-head">
                <!-- 预计出团量 -->
                <!-- <div style="display: flex;margin-bottom: 10px;">
                    <div style="width:24%">
                        预计出团:<span>{{ preDele }}</span>
                    </div>
                    <div style="width:24%">
                        预计出团总量:<span>{{ groupNumber.preDeleAll }}</span>
                    </div>
                    <div style="width:24%">
                        已出团:<span>{{ finlishedDele }}</span>
                    </div>
                    <div style="width:24%">
                        已出团总量:<span>{{ groupNumber.finlishedDeleAll }}</span>
                    </div>
                </div> -->
                <div>
                    <el-select v-model="principalSel" :disabled='isSelect' clearable placeholder="负责人" style="width
                    :18%" @change="QueryData">
                        <el-option v-for="item in principalList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="territorySel" clearable placeholder="省域" style="width
                    :18%" @change="(val) => { this.clientTypeSel = ''; this.clientLvSel = ''; QueryData(); }">
                        <el-option v-for="item in territoryList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="clientLvSel" clearable placeholder="客户级别" style="width
                    :18%" @change="(val) => { this.clientTypeSel = ''; QueryData(); }">
                        <el-option v-for="item in clientLvList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="clientTypeSel" clearable placeholder="客户类别" style="width
                    :18%" @change="QueryData">
                        <el-option v-for="item in clientTypeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="businessClassSel" clearable placeholder="业务分类" style="width
                    :16%" @change="QueryData">
                        <el-option v-for="item in businessClassList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>

                </div>
                <!-- textbox框 -->
                <div style="display: flex;margin-top: 10px;position: relative;">
                    <div style="width: 28%;">
                        <el-input v-model="inputLXR" placeholder="联系人"></el-input>
                    </div>
                    &nbsp;
                    <div style="width: 26.5%;">
                        <el-input v-model="inputDQ" placeholder="地区"></el-input>
                    </div>
                    &nbsp;
                    <div style="width: 27%;">
                        <!-- <el-input v-model="inputDW" placeholder="单位"></el-input> -->

                        <el-select style="width: 100%;" clearable v-model="inputDW" filterable remote placeholder="单位"
                            :remote-method="remoteMethod" :loading="selectLoading">
                            <el-option v-for="item in options" :key="item.id" :label="item.client" :value="item.client">
                            </el-option>
                        </el-select>

                    </div>
                    &nbsp;
                    <el-button v-if="userId == 21" type="primary"
                        @click="NewClientDataAuthorityExcelDownload">按权限导出</el-button>
                    &nbsp;
                    <div class="btnOp">
                        <div>
                            <el-button type="primary" @click="QueryData">查 询</el-button>
                            <el-button v-if="userId == 21" type="primary" @click="NewClientDataExcelDownload">导
                                出</el-button>
                        </div>
                        <div style="height: 10px;">
                        </div>
                        <div>
                            <el-button type="primary" @click="Add">新 增</el-button>
                            <el-button @click="logquery" v-if="userId == 21" type="primary">日 志</el-button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="mcr-table">
                <el-table :data="PageList" border @select="handleSelect" :cell-class-name="addClass"
                    style="width: 100%">
                    <el-table-column prop="weight" label="权重" width="50">
                        <template slot-scope="scope">
                            <span v-if="scope.row.weight == '393'">A</span>
                            <span v-else-if="scope.row.weight == '392'">B</span>
                            <span v-else-if="scope.row.weight == '391'">C</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="client" label="单位" width="230">
                    </el-table-column>
                    <el-table-column prop="contact" label="联系人" width="90">
                        <template slot-scope="scope">
                            <span>{{ scope.row.contact == 0 ? '-' : scope.row.contact }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="job" label="职位" width="110">
                        <template slot-scope="scope">
                            <span>{{ scope.row.job == 0 ? '-' : scope.row.job }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="telephone" label="手机号" width="120">
                        <template slot-scope="scope">
                            <span>{{ scope.row.telephone == 0 ? '-' : scope.row.telephone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="座机号" width="120">
                        <template slot-scope="scope">
                            <span>{{ scope.row.phone == 0 ? '-' : scope.row.phone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="location" label="所在区域" width="130">
                    </el-table-column>
                    <!-- <el-table-column prop="birthday" label="生日">
                    </el-table-column> -->
                    <el-table-column prop="ascribedDepartment" label="业务归属" width="80">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" placement="top">
                                <span style="text-decoration: underline;">查看</span>
                                <div slot="content">
                                    <div v-for="(yw, index) in scope.row.ascribedDepartment" :key="index"
                                        style="text-align: center; width: 100px;padding: 5px;">
                                        {{ yw.name + '部' }}<br /><br />
                                    </div>
                                    {{ scope.row.notUpdateDays + '天未修改数据' }}
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ascribedUser" label="负责人" width="85">
                        <template slot-scope="scope">
                            <!-- <el-tooltip class="item" effect="dark" placement="top">
                                <span style="color:royalblue">查看</span>
                                <div slot="content">
                                    <div v-for="yw in scope.row.ascribedUser"
                                        style="text-align: center; width: 100px;padding: 5px;">
                                        {{ yw.cnName }}
                                    </div>
                                </div>
                            </el-tooltip> -->
                            <div v-for="(yw, index) in scope.row.ascribedUser" :key="index" style="text-align: center;">
                                {{ yw.cnName }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                        <template slot-scope="scope">
                            <div id="remark">
                                <el-tooltip v-show="scope.row.remark != ''" class="item" effect="dark"
                                    :content="scope.row.remark" placement="top">
                                    <span v-if="scope.row.remark.length > 10">{{ scope.row.remark.slice(0, 10) + "..."
                                    }}</span>
                                    <span v-else>{{ scope.row.remark }}</span>
                                    <div slot="content">
                                        <div style="width: 300px;">
                                            {{ scope.row.remark }}
                                        </div>
                                    </div>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="preDele" label="预计出团">
                    </el-table-column>
                    <el-table-column prop="finlishedDele" label="已出团">
                    </el-table-column> -->
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="Edit(scope.row)">编
                                辑</el-button>

                            <el-button type="danger" size="mini" @click="Del(scope.row)">删
                                除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-sizes="[10, 20]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            total: 0, //总行数
            principalSel: '',
            principalList: [],//负责人数据
            territorySel: '',
            territoryList: [],//省域数据
            clientLvSel: '',
            clientLvList: [],//客户级别数据
            clientTypeSel: '',
            clientTypeList: [],//客户类别数据]
            businessClassSel: '',
            businessClassList: [],//业务分类
            PageList: [],    //页面数据
            currentPage: 1, // 当前页码
            pageSize: 10,// 每页的数据条数
            loading: true,
            inputLXR: '', //联系人
            inputDQ: '', //地区
            inputDW: '', //单位
            pageloadData: {
                "portType": 1,
                "pageIndex": 1,
                "pageSize": 10,
                "contact": "",
                "location": "",
                "client": "",
                "userid": "",
                "lvlid": 0,
                "business": "",
                "Range": 0,
                "Category": 0,
                "operationUserId": 0
            },
            groupNumber: {
                preDeleAll: '',
                finlishedDeleAll: ''
            },
            userId: 0,
            token: '',
            isSelect: true,
            mcrhVisible: false,
            form: {
                opTypeLabel: '',
                opUserLabel: '',
                time: '',
            },
            logtypearr: [],
            personnelarr: [],
            logtableData: [],
            logcurrentPage: 1,
            logpagesize: 10,
            logtotal: 0,
            selectLoading: false,
            options: [],

        }
    },
    methods: {
        //处理日期
        datetime(val) {
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1).toString();
            var d = date.getDate() >= 10 ? date.getDate() : '0' + (date.getDate()).toString();
            return y + '-' + m + '-' + d
        },
        loghandleSizeChange(val) {
            this.logpagesize = val;
            this.logchange();
        },
        loghandleCurrentChange(val) {
            this.logcurrentPage = val;
            let opTypeLabels = '';
            let opUserLabels = '';
            for (let i = 0; i < this.form.opTypeLabel.length; i++) {
                opTypeLabels += this.form.opTypeLabel[i] + ','
            }
            opTypeLabels = opTypeLabels.substring(0, opTypeLabels.length - 1)

            for (let j = 0; j < this.form.opUserLabel.length; j++) {
                opUserLabels += this.form.opUserLabel[j] + ','
            }
            opUserLabels = opUserLabels.substring(0, opUserLabels.length - 1)
            this.NewClientDataRecord(opTypeLabels, opUserLabels, this.datetime(this.form.time[0]), this.datetime(this.form.time[1]))
            // this.logchange();
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.pageloadData.pageIndex = this.currentPage;
            this.pageloadData.pageSize = this.pageSize;
            this.pageload();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.loading = true;
            this.pageloadData.pageIndex = val;
            this.pageloadData.pageSize = this.pageSize;
            this.pageload();
        },
        //logchange
        logchange() {
            this.logcurrentPage = 1;
            let opTypeLabels = '';
            let opUserLabels = '';
            for (let i = 0; i < this.form.opTypeLabel.length; i++) {
                opTypeLabels += this.form.opTypeLabel[i] + ','
            }
            opTypeLabels = opTypeLabels.substring(0, opTypeLabels.length - 1)

            for (let j = 0; j < this.form.opUserLabel.length; j++) {
                opUserLabels += this.form.opUserLabel[j] + ','
            }
            opUserLabels = opUserLabels.substring(0, opUserLabels.length - 1)
            this.NewClientDataRecord(opTypeLabels, opUserLabels, this.datetime(this.form.time[0]), this.datetime(this.form.time[1]))

        },
        //历史记录
        NewClientDataRecord(opTypeLabel, opUserLabel, beginTime, endTime) {
            var that = this;
            var url = "/api/MarketCustomerResources/NewClientDataRecord"
            this.$axios({
                method: 'post',
                url: url,
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: 89,
                    pageIndex: that.logcurrentPage,
                    pageSize: that.logpagesize,
                    opTypeLabel: opTypeLabel,
                    opUserLabel: opUserLabel,
                    beginTime: beginTime,
                    endTime: endTime,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    let datalog = res.data.data;
                    that.logtableData = datalog;
                    that.logtotal = res.data.count;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //多选框选中方法
        handleSelect(selection, row) {

        },
        //日志基础数据
        NewClientDataRecordInit() {
            var that = this;
            var url = "/api/MarketCustomerResources/NewClientDataRecordInit"
            this.$axios({
                method: 'post',
                url: url,
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: 89,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    let datainfo = res.data.data;
                    that.logtypearr = datainfo.operations;
                    that.personnelarr = datainfo.userDatas;

                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //日志查询
        logquery() {
            this.mcrhVisible = true;
            this.logtableData = [];
            this.form = {
                opTypeLabel: '',
                opUserLabel: '',
                time: '',
            };
            this.logchange();
        },
        //条件颜色
        addClass({ row, column, rowIndex, columnIndex }) {
            if (row.notUpdateDays >= 365) {
                return 'cell-grey';
            }
        },
        NewClientDataAuthorityExcelDownload() {
            var url = "/api/MarketCustomerResources/NewClientDataAuthorityExcelDownload"
            var that = this
            that.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    portType: 1,
                    pageIndex: that.pageloadData.pageIndex,
                    pageSize: that.pageloadData.pageIndex,
                    operationUserId: that.userId,
                    contact: that.pageloadData.contact,
                    location: that.pageloadData.location,
                    client: that.pageloadData.client,
                    userid: that.pageloadData.userid,
                    lvlid: that.pageloadData.lvlid,
                    business: that.pageloadData.business,
                    range: that.pageloadData.Range,
                    category: that.pageloadData.Category,
                    pageId: 89,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        type: 'success',
                        message: res.data.msg,
                    });
                    window.open(res.data.data)
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        NewClientDataExcelDownload() {
            var url = "api/MarketCustomerResources/NewClientDataExcelDownload"
            var that = this
            that.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    portType: 1,
                    pageIndex: that.pageloadData.pageIndex,
                    pageSize: that.pageloadData.pageIndex,
                    operationUserId: that.userId,
                    contact: that.pageloadData.contact,
                    location: that.pageloadData.location,
                    client: that.pageloadData.client,
                    userid: that.pageloadData.userid,
                    lvlid: that.pageloadData.lvlid,
                    business: that.pageloadData.business,
                    range: that.pageloadData.Range,
                    category: that.pageloadData.Category,
                    pageId: 89,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        type: 'success',
                        message: res.data.msg,
                    });
                    window.open(res.data.data)
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        pageload() {

            var that = this;
            this.$axios.post('/api/MarketCustomerResources/QueryUnlockDropList', {}, {
                headers: {
                    'Authorization': that.token,
                    // 'Accept-Encoding': 'gzip'
                },
            }).then(resp => {
                if (resp.data.code == 200) {
                    if (resp.data.data.includes(that.userId)) {
                        that.isSelect = false;
                    }
                }
            })

            that.pageloadData.operationUserId = that.userId;
            //初始化界面数据
            //console.log(that.pageloadData)
            this.$axios.post('/api/MarketCustomerResources/QueryNewClientData', that.pageloadData, {
                headers: {
                    'Authorization': that.token,
                },
            }).then(resp => {
                if (resp.data.code == 200) {
                    if (resp.data.data == null) {
                        that.PageList = [];
                        that.total = 0;
                        this.$message.error(resp.data.msg);
                    } else {
                        that.principalList = resp.data.data.users; //负责人
                        that.clientLvList = resp.data.data.level;//客户级别
                        that.clientTypeList = resp.data.data.customerClass;//客户类别
                        that.territoryList = resp.data.data.province; //省域数据
                        that.businessClassList = resp.data.data.serviceClass; //业务归属
                        that.PageList = resp.data.data.clientTableData.pageSource; //table数据
                        that.total = resp.data.data.clientTableData.pageCount; //总数
                        that.groupNumber = resp.data.data.groupNumber; //团组出团总数
                        console.log(that.pageloadData.pageIndex, parseInt(that.pageloadData.pageIndex), 'that.pageloadData.pageIndex')
                        that.currentPage = parseInt(that.pageloadData.pageIndex);
                    }
                    this.loading = false;
                    that.territoryChange();
                } else if (resp.data.code == 400) {
                    that.PageList = [];
                    that.total = 0;
                    that.$message.error('暂无数据!');
                }
            }).catch(err => {
                this.$message.error('网络异常！');
            }).finally(() => {
                this.loading = false;
                console.log('finally');
            })
        },
        //保存权限
        saveData() {
            var that = this;
        },
        QueryData() {
            this.loading = true;
            this.pageloadData.pageIndex = this.currentPage;
            this.pageloadData.pageSize = this.pageSize;
            this.pageloadData.location = this.inputDQ; //地区
            this.pageloadData.client = this.inputDW;  //单位
            this.pageloadData.contact = this.inputLXR; //联系人
            this.pageloadData.userid = this.principalSel.toString(); //负责人
            this.pageloadData.Range = this.territorySel == '' ? 0 : this.territorySel;//省域
            this.pageloadData.lvlid = this.clientLvSel == '' ? 0 : this.clientLvSel; //客户级别
            this.pageloadData.Category = this.clientTypeSel == '' ? 0 : this.clientTypeSel;//客户类别
            this.pageloadData.business = this.businessClassSel.toString();//业务分类
            this.pageloadData.operationUserId = this.userId;//
            this.pageload();
        },
        Edit(row) {
            localStorage.setItem("mcrPageData", JSON.stringify({
                inputLXR: this.inputLXR,
                inputDW: this.inputDW,
                inputDQ: this.inputDQ,
                principalSel: this.principalSel,
                territorySel: this.territorySel,
                clientLvSel: this.clientLvSel,
                clientTypeSel: this.clientTypeSel,
                businessClassSel: this.businessClassSel,
                pageSize: this.pageSize,
                currentPage: this.currentPage,
            }));
            this.$router.push('/home/MCROper?id=' + row.id);
        },
        Del(row) {
            var that = this;
            var delData = {
                "portType": 1,
                "id": row.id,
                "deleteUserId": this.userId
            }
            console.log(delData);

            this.$axios.post('/api/MarketCustomerResources/NewClientDel', delData, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    that.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                } else {
                    that.$message.error(resp.data.msg);
                }
                that.pageload();
            });
        },
        Add(row) {
            localStorage.setItem("mcrPageData", JSON.stringify({
                inputLXR: this.inputLXR,
                inputDW: this.inputDW,
                inputDQ: this.inputDQ,
                principalSel: this.principalSel,
                territorySel: this.territorySel,
                clientLvSel: this.clientLvSel,
                clientTypeSel: this.clientTypeSel,
                businessClassSel: this.businessClassSel,
                pageSize: this.pageSize,
                currentPage: this.currentPage,
            }));
            this.$router.push('/home/MCROper?id=' + 0);
        },

        territoryChange() {
            var sid = this.territorySel;
            if (!sid) {
                sid = 0;
            }
            this.$axios.post('/api/MarketCustomerResources/QueryClientType', {
                SetDataIdArr: [sid]
            }, {
                headers: {
                    'Authorization': this.token,
                },
            }).then(resp => {
                if (resp.data.code == 200) {
                    this.clientTypeList = resp.data.data.typeArr; //客户类别
                    this.clientLvList = resp.data.data.lvArr; //客户级别
                    console.log(this.clientLvSel, "clientLvSel---------------");
                    if (this.clientLvSel) {
                        this.territoryChangeSecond();
                    }
                } else {
                    //js抛异常
                    throw new Error(resp.data.msg);
                }
            }).catch(err => {
                this.$message.error('网络异常！');
            })
        },

        territoryChangeSecond() {
            var sid = this.clientLvSel;
            if (!sid) {
                sid = 0;
            }
            this.$axios.post('/api/MarketCustomerResources/QueryClientTypeSecond', {
                SetDataIdArr: [sid]
            }, {
                headers: {
                    'Authorization': this.token,
                },
            }).then(resp => {
                if (resp.data.code == 200) {
                    this.clientTypeList = resp.data.data; //客户类别
                } else {
                    //js抛异常
                    throw new Error(resp.data.msg);
                }
            }).catch(err => {
                this.$message.error('网络异常！');
            })
        },
        remoteMethod(query) {
            if (query !== '') {
                this.selectLoading = true;

                this.$axios.post('/api/MarketCustomerResources/SearchClientByKeyword', {
                    Keyword: query,
                    UserId: this.userId
                }, {
                    headers: {
                        'Authorization': this.token,
                    },
                }).then(resp => {
                    if (resp.data.code == 200) {
                        this.options = resp.data.data;
                    } else if (resp.data.code == 201) {
                        this.options = [];
                    } else {
                        //js抛异常
                        throw new Error(resp.data.msg);
                    }
                }).catch(err => {
                    this.$message.error('网络异常！');

                }).finally(() => {
                    console.log('finally');
                    this.selectLoading = false;
                })

            } else {
                this.options = [];
            }
        }
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.NewClientDataRecordInit();
        var mcrPageData = localStorage.getItem("mcrPageData");
        if (mcrPageData) {
            try {
                console.log(mcrPageData);
                var json = JSON.parse(mcrPageData);
                this.inputLXR = json.inputLXR;
                this.inputDW = json.inputDW;
                this.inputDQ = json.inputDQ;
                this.principalSel = json.principalSel;
                this.territorySel = json.territorySel;
                this.clientLvSel = json.clientLvSel;
                this.clientTypeSel = json.clientTypeSel;
                this.businessClassSel = json.businessClassSel;
                this.pageSize = json.pageSize;
                this.currentPage = json.currentPage;
                localStorage.removeItem("mcrPageData");
                this.QueryData();
            } catch (e) {
                this.pageload();
            }
            return;
        }
        this.pageload();
    },
    created() {
        var mcrPageData = localStorage.getItem("mcrPageData");
        if (mcrPageData) {
            var json = JSON.parse(mcrPageData);
            this.currentPage = json.currentPage;
        }

    },
    computed: {
        preDele() {
            var number = 0;
            this.PageList.forEach(element => {
                number += element.preDele;
            });
            return number;
        },
        finlishedDele() {
            var number = 0;
            this.PageList.forEach(element => {
                number += element.finlishedDele;
            });
            return number;
        }
    }
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
}


.mcr-box {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}

.mcr-table {
    margin-top: 10px;
}

.mcr-table .block {
    margin-top: 10px;
}

.mcr-table .el-table--enable-row-transition .el-table__body td.el-table__cell {
    text-align: center;
}

.mcr-table .el-table--border .el-table__cell:first-child .cell {
    text-align: center;
}

.mcr-input {
    display: flex;
}

.mcr-input .el-select {
    margin-right: 5px;
}

.btnOp {
    position: absolute;
    right: 6px;
    top: -50px;
}

.mcrh .cell-grey {
    color: red;
}

.mcrh-dialog {
    display: flex;
    justify-content: space-between;
}
</style>