renkang_companyui/src/views/crm/components/assignUser.vue

<template>
    <div>
        <el-form ref="assignForm" :model="assignForm"  label-width="120px">
            <el-form-item label="未分配客户" >
            <span>{{this.noAssignCount}}个</span>
            </el-form-item>
            <el-form-item label="已分配客户" >
            <span>{{this.assignCount}}个</span>
            </el-form-item>

            <el-form-item label="分配员工" prop="users">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button @click="handleUserSelect">添加员工</el-button>
                    </el-col>
                </el-row>
                <el-table border  :data="users" >
                    <el-table-column label="ID" align="center" prop="userId" />
                    <el-table-column label="员工帐号" align="center" prop="userName" />
                    <el-table-column label="员工姓名" align="center" prop="nickName" />
                    <el-table-column label="所属部门" align="center" prop="deptName" />
                    <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
                    <el-table-column label="今日分配数" align="center" prop="nowDayCustomerCount"   />
                    <el-table-column label="分配数量" align="center"  prop="count" width="200px" >
                        <template slot-scope="scope">
                        <div>
                            <el-input-number ref="stepTxtNum" :min="0" v-model="scope.row.count"  @change="changeVal(scope.row)"   size="mini"   ></el-input-number>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="操作"   align="center" fixed="right" width="120px" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="text"
                            @click="handleRemoveUser(scope.row.$index)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <div   class="footer">
            <el-button type="primary" @click="submitAssignForm">确 定</el-button>
        </div>
        <el-dialog :title="userSelect.title" :visible.sync="userSelect.open" width="1000px" append-to-body>
            <user-select ref="userSelects" @selectUser="selectUser"  ></user-select>
        </el-dialog>
    </div>
</template>
  
<script>
    import { assignToUser } from "@/api/crm/customer";
    import userSelect from '../../company/components/userSelect.vue';
    export default {
        components: {userSelect },
        name: "visit",
        data() {
            return {
                type:null,
                noAssignCount:0,
                assignCount:0,
                customerIds:[],
                userSelect:{
                    title:"选择员工",
                    open:false,
                },
                assignForm: {
                },
                // 表单校验
                assignRules: {
                    
                },
                users:[],
                 
            };
        },
        created() {
          
        },
        methods: {
            changeVal(row) {
                this.$forceUpdate();//解决点击计数器失效问题
                this.computeCount();
                if(this.assignCount>this.customerIds.length){
                    this.$nextTick(() => {
                         row.count=0;
                         this.computeCount();
                    });
                   
                }
            },
            handleRemoveUser(index){
                this.users.splice(index,1);
                this.computeCount();
                this.$refs.userSelects.delUser(index);
            },
            selectUser(data){
                var users=[];
                var number=parseInt(this.customerIds.length/data.length);
                data.forEach(element => {
                    var user={
                        userId:element.userId,
                        userName:element.userName,
                        nickName:element.nickName,
                        deptName:element.dept.deptName,
                        nowDayCustomerCount:element.nowDayCustomerCount,
                        phonenumber:element.phonenumber,
                        count:number,
                    }
                    users.push(user)
                });
                this.users=users;
                this.userSelect.open=false;
                this.computeCount()
            },
            computeCount(){
                this.assignCount=0;
                var that=this;
                this.users.forEach(element => {
                    that.assignCount+=element.count;
                });
                this.noAssignCount=this.customerIds.length-this.assignCount
            },
            handleUserSelect(){
                var that=this;
                this.userSelect.open=true;
                setTimeout(() => {
                    that.$refs.userSelects.getList();
                }, 500);
            },
            init(customerIds,type){
                this.type=type,
                this.customerIds =  customerIds;
                this.assignCount=0;
                this.noAssignCount=this.customerIds.length;
                this.users=[];
            },
            /** 提交按钮 */
            submitAssignForm() {
                var that=this;
                this.$refs["assignForm"].validate(valid => {
                    if (valid) {
                        var users=[];
                        var customerIds=[];
                        var idIndex=0;
                        var totalAssignCount=0;
                        console.log("qxj users",JSON.stringify(this.users));
                        this.users.forEach(element => {
                            if(element.count>0){
                                var ids=that.customerIds.slice(idIndex,idIndex+element.count)
                                console.log("qxj customerIds:"+that.customerIds+" count:"+element.count);
                                console.log("qxj ids:"+ids);
                                customerIds=customerIds.concat(ids);
                                idIndex=idIndex+element.count;
                                var data={companyUserId:element.userId,count:element.count};
                                users.push(data);
                                totalAssignCount+=element.count;
                            }
                        });
                        if(users.length==0){
                            this.msgError("请选择员工");
                            return;
                        }
                        if(totalAssignCount>(this.assignCount+this.noAssignCount)){
                            this.msgError("分配数量有误");
                            return;
                        }
                        this.myloading = this.$loading({
                            lock: true,
                            text: '处理中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        var data={customerIds:customerIds,users:users,assignType:this.type}
                        console.log("qxj data:",JSON.stringify(data));
                        assignToUser(data).then(response => {
                            this.myloading.close()
                            if (response.code === 200) {
                                this.msgSuccess("操作成功");
                                this.$emit('close');
                            }
                        });
                    }
                });
            },
            closeAction(){
                this.$refs.userSelects.users=[];
            }
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 20px;
        
}
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>