vue3写页面（查询，数组添加，删除等， ref 引用 ，loading）

 

 

 

 包含 查询，数组添加，删除等， ref 引用 ，loading  

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.name" placeholder="名称" class="handle-input mr10" @keyup.enter.native="handleSearch"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-divider style="margin: 5px"></el-divider>
            <el-table :data="tableData" height="565" 
                      :cell-style="{padding: '2px 0'}" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="select">
                <el-table-column type="selection" width="40"/>
                <!-- <el-table-column type="expand">
                    <template #default="scope">
                        <p><b style="color:#409EFF">已分配的成员:</b> {{ scope.row.tgName }}</p>
                    </template>
                </el-table-column> -->
                <el-table-column prop="id" label="id" align="center" v-if="show">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column prop="name" label="集运人员名称"  align="left">
                    <template #default="scope">{{ scope.row.name}}</template>
                </el-table-column>
                <el-table-column label="手机" align="left">
                    <template #default="scope">{{ scope.row.phone}}</template>
                </el-table-column>
                <el-table-column label="成员数" align="right">
                    <template #default="scope">{{ scope.row.count}}</template>
                </el-table-column>
                <!-- <el-table-column label="分配的成员" align="center" show-overflow-tooltip="false">
                    <template #default="scope">{{ scope.row.tgName}}</template>
                </el-table-column> -->
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">分配
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination" >
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNumber"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

        <el-dialog :title="title" v-model="addVisible" width="1300px" style="padding:0;" @close='cancelForm'>
            <el-row :gutter="20">
                <el-col :span="11">
                    <el-form :model="cityForm" ref="cityFormRef">
                        <el-form-item label="所属位置">
                            <el-row>
                                <el-col :span="6" >
                                    <el-form-item prop="cityCode">
                                        <el-select 
                                                size="small"
                                                v-model="cityForm.cityCode"
                                                @change="changeCity"
                                                :placeholder="('市')"
                                                filterable>
                                            <el-option
                                                    v-for="item in cityList"
                                                    :key="item.cityCode"
                                                    :label="item.cityName"
                                                    :value="item.cityCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" v-if="!hideArea">
                                    <el-form-item prop="areaCode">
                                        <el-select 
                                                size="small"
                                                v-model="cityForm.areaCode"
                                                @change="changeArea"
                                                :placeholder="'区/县'"
                                                filterable>
                                            <el-option
                                                    v-for="item in areaList"
                                                    :key="item.areaCode"
                                                    :label="item.areaName"
                                                    :value="item.areaCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" v-if="!hideAreaGrid" >
                                    <el-form-item prop="areaGridCode">
                                        <el-select 
                                                size="small"
                                                v-model="cityForm.areaGridCode"
                                                @change="getData1"
                                                :placeholder="'网格'"
                                                filterable>
                                            <el-option
                                                    v-for="item in areaGridList"
                                                    :key="item.areaGridCode"
                                                    :label="item.areaGridName"
                                                    :value="item.areaGridCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="danger"  size="small" style="margin-left: 10px" @click="resetSearch1">重 置</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>

                    <p style="margin-bottom: 10px;background-color:#E4E7ED" align="center"><b><font size="3px"> 待 分 配</font></b></p>
                    
                    <el-table :data="tableData1" height="500"  
                            :cell-style="{padding: '2px 0'}" border class="table" ref="multipleTableRef" header-cell-class-name="table-header" @selection-change="selectChanges">
                        <el-table-column type="selection" width="40"/>
                        <el-table-column prop="id" label="员工id" align="center" v-if="show">
                            <template #default="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column prop="ygName" label="人员名称" align="left"  width="160">
                            <template #default="scope">{{ scope.row.ygName }}</template>
                        </el-table-column>
                        <el-table-column prop="tdName" label="厅店名称" align="left">
                            <template #default="scope">{{ scope.row.tdName}}</template>
                        </el-table-column>
                        <el-table-column prop="wgid" label="所属网格id" align="center" v-if="show">
                            <template #default="scope">{{ scope.row.wgid}}</template>
                        </el-table-column>
                    </el-table>
                </el-col>

                <el-col :span="2">
                    <div style="margin-top: 250px" >
                        <el-button type="primary" class="el-icon-right" size="small" style="margin: 20px" @click="toRight"></el-button>
                        <el-button type="primary" class="el-icon-back" size="small" style="margin: 20px" @click="toLeft"></el-button>
                    </div>
                </el-col>

                <el-col :span="11">
                    <el-form :model="cityFormDef" ref="cityFormRefDef">
                        <el-form-item label="所属位置">
                            <el-row>
                                <el-col :span="6" >
                                    <el-form-item prop="cityCodeDef">
                                        <el-select 
                                                size="small"
                                                v-model="cityFormDef.cityCodeDef"
                                                @change="changeCityDef"
                                                :placeholder="('市')"
                                                filterable>
                                            <el-option
                                                    v-for="item in cityListDef"
                                                    :key="item.cityCode"
                                                    :label="item.cityName"
                                                    :value="item.cityCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" v-if="!hideAreaDef">
                                    <el-form-item prop="areaCodeDef">
                                        <el-select 
                                                size="small"
                                                v-model="cityFormDef.areaCodeDef"
                                                @change="changeAreaDef"
                                                :placeholder="'区/县'"
                                                filterable>
                                            <el-option
                                                    v-for="item in areaListDef"
                                                    :key="item.areaCode"
                                                    :label="item.areaName"
                                                    :value="item.areaCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" v-if="!hideAreaGridDef" >
                                    <el-form-item prop="areaGridCodeDef">
                                        <el-select 
                                                size="small"
                                                v-model="cityFormDef.areaGridCodeDef"
                                                @change="getData1Def"
                                                :placeholder="'网格'"
                                                filterable>
                                            <el-option
                                                    v-for="item in areaGridListDef"
                                                    :key="item.areaGridCode"
                                                    :label="item.areaGridName"
                                                    :value="item.areaGridCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="danger" size="small" style="margin-left: 10px" @click="resetSearch2">重 置</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>

                    <p style="margin-bottom: 10px;background-color:#E4E7ED" align="center"><b><font size="3px"> 已 分 配</font></b></p>
                    
                    <el-table :data="tableData2" height="500"  
                            :cell-style="{padding: '2px 0'}" border class="table" ref="multipleTableRefDef" header-cell-class-name="table-header" @selection-change="selectChangesDef">
                        <el-table-column type="selection" width="40"/>
                        <el-table-column prop="id" label="员工id" align="center" v-if="show">
                            <template #default="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column prop="ygName" label="人员名称" align="left" width="160">
                            <template #default="scope">{{ scope.row.ygName }}</template>
                        </el-table-column>
                        <el-table-column prop="tdName" label="厅店名称" align="left">
                            <template #default="scope">{{ scope.row.tdName}}</template>
                        </el-table-column>
                        <el-table-column prop="wgid" label="所属网格id" align="center" v-if="show">
                            <template #default="scope">{{ scope.row.wgid}}</template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="commitForm">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, reactive ,toRaw} from "vue";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import {
    queryAddCustlist,
    addCustlistAft,
    queryCityList1,
    queryAreaList1,
    queryAreaGridList1,
    queryUserTree,
    getDefault,
    getherUser,
    queryTfFocusClerkInfo
} from "../../api/apiIndex";
import { ElLoading } from 'element-plus'

import {
    REQ_SUCCESS_GET
} from "../../assets/js/commonConfig";
import { ElForm } from 'element-plus';

export default {
    name: "configClerk",
    data(){
        
    },
    methods:{
        //菜单选中变化事件
        clickDeal () {
            // this.afterSelecting =  this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys())
            // this.disabled = false
        },
   
    },
    setup() {

        //市、区域、网格列表变量
        const cityList = ref([]);
        const areaList = ref([]);
        const areaGridList = ref([]);

        const cityListDef = ref([]);
        const areaListDef = ref([]);
        const areaGridListDef = ref([]);

        // const handleEdit = () =>{};
        let cityForm = reactive({
            cityCode:null,
            areaCode:null,
            areaGridCode:null
        });

        let cityFormDef = reactive({
            cityCodeDef:null,
            areaCodeDef:null,
            areaGridCodeDef:null
        });
        

        //获取所有城市
        const getCity = () =>{
            queryCityList1({

            },res => {
                console.log('----getCity----res:'+ res);
                if(res.retCode == REQ_SUCCESS_GET){
                    cityList.value = res.body;
                    cityListDef.value = res.body;
                }else{
                    ElMessage.error(res.retMsg);
                }
            },err => {
                console.log(err)
                ElMessage.error('查询城市列表异常');
            })
        }
        getCity();
        let hideArea = ref(false);
        let hideAreaGrid = ref(false);
        // 城市修改，拉取对应区域列表
        const changeCity = (val) => {
            cityForm.areaCode = null;
            cityForm.areaGridCode = null;
            areaList.value = [];
            areaGridList.value = [];
            hideArea.value = false;
            hideAreaGrid.value = false;
            queryAreaList1({
                cityCode:val
            },res => {
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    let list = res.body;
                    if(list.length > 0){
                        areaList.value = res.body;
                    }else{
                        ElMessage.error('查无区域');
                        hideArea.value = true;
                        hideAreaGrid.value = true;
                    }
                }else{
                    ElMessage.error(res.retMsg);
                }
            },err => {
                console.log(err)
                ElMessage.error('查询区域列表异常');
            })
            getData1();
        };

        let hideAreaDef = ref(false);
        let hideAreaGridDef = ref(false);
        const changeCityDef = (val) => {
            cityFormDef.areaCodeDef = null;
            cityFormDef.areaGridCodeDef = null;
            areaListDef.value = [];
            areaGridListDef.value = [];
            hideAreaDef.value = false;
            hideAreaGridDef.value = false;
            queryAreaList1({
                cityCode:val
            },res => {
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    let list = res.body;
                    if(list.length > 0){
                        areaListDef.value = res.body;
                    }else{
                        ElMessage.error('查无区域');
                        hideAreaDef.value = true;
                        hideAreaGridDef.value = true;
                    }
                }else{
                    ElMessage.error(res.retMsg);
                }
            },err => {
                console.log(err)
                ElMessage.error('查询区域列表异常');
            })
            getData1Def();
        };

        // 区域修改，拉取对应网格列表
        const changeArea = (val) => {
            cityForm.areaGridCode = null;
            areaGridList.value = [];
            hideAreaGrid.value = false;
            queryAreaGridList1({
                areaCode:val
            },res => {
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    let list = res.body;
                    if(list.length > 0){
                        areaGridList.value = res.body;
                    }else{
                        ElMessage.error('查无网格');
                        hideAreaGrid.value = true;
                    }
                }else{
                    ElMessage.error(res.retMsg);
                }
            },err => {
                console.log(err)
                ElMessage.error('查询区域网格列表异常');
            })
            getData1();
        };

        const changeAreaDef = (val) => {
            cityFormDef.areaGridCodeDef = null;
            areaGridListDef.value = [];
            hideAreaGridDef.value = false;
            console.log(val,'val')
            queryAreaGridList1({
                areaCode:val
            },res => {
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    let list = res.body;
                    if(list.length > 0){
                        areaGridListDef.value = res.body;
                    }else{
                        ElMessage.error('查无网格');
                        hideAreaGridDef.value = true;
                    }
                }else{
                    ElMessage.error(res.retMsg);
                }
            },err => {
                console.log(err)
                ElMessage.error('查询区域网格列表异常');
            })
            getData1Def();
        };

        const query = reactive({
            isPage:1,
            pageNumber:1,
            pageSize:100,
            clientId:'',
            state:'',
            mobile:'',
            hasMsg:'',
            markState:'',
            name:''
        });

        const tableData = ref([]);
        const pageTotal = ref(2);
        
        // 获取分配员工信息
        let wgid = ref(null)
        let selected = ref([]);
        const multipleTableRef = ref();
        const multipleTableRefDef = ref()
        const getData1 = () =>{
            let params = {
                cityCode:(cityForm.cityCode?cityForm.cityCode:''),
                areaCode:(cityForm.areaCode?cityForm.areaCode:''),
                areaGridCode:(cityForm.areaGridCode?cityForm.areaGridCode:''),
                staffIdy:rowId.value
            }
            
            queryUserTree(params,res => {
                console.log(params,'queryUserTree.patams')
                console.log('tableData1');
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    tableData1.value = res.body;
                    wgid.value = res.body[0].wgid;
                    console.log(wgid.value);
                    for(let i = 0;i < tableData2.value.length;i++){
                        for(let j = 0;j < tableData1.value.length;j++){  // 左边数据 删除(已勾选到右边的数据)
                            if(tableData1.value[j].id == tableData2.value[i].id){
                                tableData1.value.splice(j,1)
                            }
                        }
                    }
                }else{
                    ElMessage.error(res.retMsg);
                    tableData1.value = []
                }
            },err => {
                console.log(err)
                ElMessage.error('获取分配员工信息异常');
            });
        }

        const getData1Def = () =>{
            let params = {
                cityCode:(cityFormDef.cityCodeDef?cityFormDef.cityCodeDef:''),
                areaCode:(cityFormDef.areaCodeDef?cityFormDef.areaCodeDef:''),
                areaGridCode:(cityFormDef.areaGridCodeDef?cityFormDef.areaGridCodeDef:''),
                staffIdy:rowId.value
            }
            getDefault(params,res => {
                console.log('tableData2');
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    tableData2.value = res.body;
                    selected.value = res.body;
                }else{
                    ElMessage.error(res.retMsg);
                    tableData2.value = []
                }
            },err => {
                console.log(err)
                ElMessage.error('获取默认的分配员工信息异常');
            });
            // 默认先勾选中
            // setTimeout(() => {
            //     toggleSelection();
            // },500);
        }
        

        const toggleSelection = () => {
            /**
             * tableData1 是table列表展示的数据
             * selected是获取 tableData2 的数据，要进行勾选的数据
             */
            console.log(tableData2.value.length,'进入勾选操作 -- tableData2.value.length')
            if (tableData2.value.length>0) {
                for(let j=0;j<selected.value.length;j++){
                    multipleTableRefDef.value.toggleRowSelection(tableData2.value[j],true);
                }
            } else {
                multipleTableRefDef.value.clearSelection();
            }
        };

        // 获取表格数据
        const getData = () =>{
            let params = {
                jyName:query.name
            }
            tableData.value = []
            console.log(params.jyName)
            // 获取集运人员信息
            queryTfFocusClerkInfo({
                jyName:params.jyName
            },res => {
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    tableData.value = res.body
                }else{
                    ElMessage.error(res.retMsg);
                }
            },err => {
                console.log(err)
                ElMessage.error('查询列表异常');
            })
        }
        getData();

        // 查询操作
        const handleSearch = () => {
            query.pageNumber = 1;
            getData();
        };
        // 分页导航
        const handlePageChange = (val) => {
            query.pageNumber = val;
            getData();
        };
        let rowId = ref('')
        let rowName = ref('')
        let rowPhone = ref('')
        let title = ref('')
        const handleEdit = (index,row) => {
            rowId.value = row.id;
            rowName.value = row.name;
            rowPhone.value = row.phone;
            console.log(rowId.value);
            addVisible.value = true;
            title.value = '成员分配  【' + rowName.value + '~' + rowPhone.value + '】';
            getData1Def();
        }
        
        const addVisible = ref(false);
        // 确认分配员工（对右边待分配数据勾选的数据进行确认分配提交）
        const n = ref([]);
        let idArrayDef = ref([])
        const commitForm = () => {
            // 拼接 要分配的（右边的数据）id 传
            idArrayDef.value=[];
            tableData2.value.forEach((item) => {
                idArrayDef.value.push(item.id);
            });
            // 去重 (因左边重复向右边 推送 造成 提交了重复的数据)
            for(let i =  0;i < idArrayDef.value.length;i++){
                if(n.value.indexOf(idArrayDef.value[i]) == -1){
                    n.value.push(idArrayDef.value[i]);
                }
            }
            let params = {
                userList:n.value,
                cityCode:(cityFormDef.cityCodeDef?cityFormDef.cityCodeDef:''),
                areaCode:(cityFormDef.areaCodeDef?cityForm.areaCodeDef:''),
                areaGridCode:(cityFormDef.areaGridCodeDef?cityForm.areaGridCodeDef:''),
                staffIdy:rowId.value
            }
            const loading = ElLoading.service({
                lock: true,
                text: '拼命加载中···',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            console.log(params,'commitForm')
            getherUser(params,res => {
                console.log(res);
                if(res.retCode == REQ_SUCCESS_GET){
                    ElMessage.success('保存成功')
                    cancelForm();
                    loading.close();
                    getData();
                }else{
                    ElMessage.error(res.retMsg);
                    loading.close();
                }
            },err => {
                console.log(err)
                ElMessage.error('保存失败');
                loading.close();
            })
        }

        let tableData1 = ref([])
        let tableData2 = ref([])
        const cancelForm = () => {
            areaList.value = [];
            areaListDef.value = [];
            areaGridList.value = [];
            areaGridListDef.value = [];
            cityForm.cityCode = '';
            cityForm.areaCode = '';
            cityForm.areaGridCode = '';
            cityFormDef.cityCodeDef = null;
            cityFormDef.areaCodeDef = null;
            cityFormDef.areaGridCodeDef = null;
            tableData1.value = [];
            tableData2.value = [];
            addVisible.value = false;
            n.value = [];
        }

        const resetSearch1 = () =>{
            areaList.value = [];
            areaGridList.value = [];
            cityForm.cityCode = '';
            cityForm.areaCode = '';
            cityForm.areaGridCode = '';
            tableData1.value = [];
        }

        const resetSearch2 = () =>{
            areaListDef.value = [];
            areaGridListDef.value = [];
            cityFormDef.cityCodeDef = null;
            cityFormDef.areaCodeDef = null;
            cityFormDef.areaGridCodeDef = null;
            tableData2.value = [];
            getData1Def();
        }

        // 选中左边 未分配 数据
        let multipleUserList = ref([])
        let idArray = ref([])
        const selectChanges = (val) => {
            idArray.value=[];
            multipleUserList.value = val;
            val.forEach((item) => {
                console.log(item.id);
                idArray.value.push(item.id);
                console.log(idArray.value);
            });
            console.log(multipleUserList.value);
        };

        // 将左边勾选的数据 移动到 右边去
        const toRight = (val) => {
            console.log(multipleUserList.value,'将左边勾选的数据 移动到 右边去');
            for(let i = 0;i < multipleUserList.value.length;i++){
                tableData2.value.unshift(multipleUserList.value[i]); // 右边数据 新增(push 是往后面添加 unshift 是往开头新增)
                for(let j = 0;j < tableData1.value.length;j++){  // 左边数据 删除
                    if(tableData1.value[j].id == multipleUserList.value[i].id){
                        tableData1.value.splice(j,1)
                    }
                }
            }
            console.log(tableData1.value,'tableData1.value');
            console.log(tableData2.value,'tableData2.value');            
        };

        // 将右边勾选的数据 移动到 左边去
        const toLeft = (val) => {
            console.log(multipleUserListDef.value,'将右边勾选的数据 移动到 左边去');
            for(let i = 0;i < multipleUserListDef.value.length;i++){
                tableData1.value.push(multipleUserListDef.value[i]);  // 左边数据 新增
                for(let j = 0;j < tableData2.value.length;j++){  // 右边数据 删除
                    if(tableData2.value[j].id == multipleUserListDef.value[i].id){
                        tableData2.value.splice(j,1)
                    }
                }
            }
            console.log(tableData1.value,'tableData1.value');
            console.log(tableData2.value,'tableData2.value');  
        };

        // 选中右边 待分配 数据
        let multipleUserListDef = ref([])
        
        const selectChangesDef = (val) => {
            multipleUserListDef.value = val;
            console.log(multipleUserListDef.value);
        };

        return {
            query,
            tableData,
            pageTotal,
            addVisible,
            handleEdit,
            handleSearch,
            handlePageChange,
            selectChanges,
            selectChangesDef,
            cityList,
            areaList,
            areaGridList,
            cityListDef,
            areaListDef,
            areaGridListDef,
            hideArea,
            getCity,
            changeCity,
            changeArea,
            cityForm,
            getData,
            cancelForm,
            commitForm,
            tableData1,
            tableData2,
            getData1,
            show: false,
            multipleTableRef,
            multipleTableRefDef,
            cityFormDef,
            changeCityDef,
            changeAreaDef,
            getData1Def,
            resetSearch1,
            resetSearch2,
            toRight,
            toLeft,
            title,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
table tbody::-webkit-scrollbar {
    width: 6px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

 

 

 

< template>

< div>

< div class= "crumbs">

< el-breadcrumb separator= "/">

< el-breadcrumb-item>

</ el-breadcrumb-item>

</ el-breadcrumb>

</ div>

< div class= "container">

< div class= "handle-box">

< el-input v-model="query.name" placeholder= "名称" class= "handle-input mr10" @keyup.enter.native="handleSearch"></ el-input>

< el-button type= "primary" icon= "el-icon-search" @click="handleSearch">搜索</ el-button>

</ div>

< el-divider style= "margin: 5px"></ el-divider>

< el-table :data="tableData" height= "565"

:cell-style="{padding: '2px 0'}" border class= "table" ref= "multipleTable" header-cell-class-name= "table-header" @selection-change="select">

< el-table-column type= "selection" width= "40"/>

<!-- <el-table-column type="expand">

<template #default="scope">

<p><b style="color:#409EFF">已分配的成员:</b> {{ scope.row.tgName }}</p>

</template>

</el-table-column> -->

< el-table-column prop= "id" label= "id" align= "center" v-if="show">

< template # default= "scope">{{ scope.row.id }}</ template>

</ el-table-column>

< el-table-column prop= "name" label= "集运人员名称" align= "left">

< template # default= "scope">{{ scope.row.name}}</ template>

</ el-table-column>

< el-table-column label= "手机" align= "left">

< template # default= "scope">{{ scope.row.phone}}</ template>

</ el-table-column>

< el-table-column label= "成员数" align= "right">

< template # default= "scope">{{ scope.row.count}}</ template>

</ el-table-column>

<!-- <el-table-column label="分配的成员" align="center" show-overflow-tooltip="false">

<template #default="scope">{{ scope.row.tgName}}</template>

</el-table-column> -->

< el-table-column label= "操作" align= "center">

< template # default= "scope">

< el-button type= "text" icon= "el-icon-edit" @click=" handleEdit(scope.$index, scope.row)">分配

</ el-button>

</ template>

</ el-table-column>

</ el-table>

< div class= "pagination" >

< el-pagination background layout= "total, prev, pager, next" :current-page="query.pageNumber"

:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></ el-pagination>

</ div>

</ div>

< el-dialog :title="title" v-model="addVisible" width= "1300px" style= "padding:0;" @close='cancelForm'>

< el-row :gutter=" 20">

< el-col :span=" 11">

< el-form :model="cityForm" ref= "cityFormRef">

< el-form-item label= "所属位置">

< el-row>

< el-col :span=" 6" >

< el-form-item prop= "cityCode">

< el-select

size= "small"

v-model="cityForm.cityCode"

@change="changeCity"

:placeholder="( '市')"

filterable>

< el-option

v-for="item in cityList"

:key="item.cityCode"

:label="item.cityName"

:value="item.cityCode">

</ el-option>

</ el-select>

</ el-form-item>

</ el-col>

< el-col :span=" 6" v-if=" !hideArea">

< el-form-item prop= "areaCode">

< el-select

size= "small"

v-model="cityForm.areaCode"

@change="changeArea"

:placeholder=" '区/县'"

filterable>

< el-option

v-for="item in areaList"

:key="item.areaCode"

:label="item.areaName"

:value="item.areaCode">

</ el-option>

</ el-select>

</ el-form-item>

</ el-col>

< el-col :span=" 6" v-if=" !hideAreaGrid" >

< el-form-item prop= "areaGridCode">

< el-select

size= "small"

v-model="cityForm.areaGridCode"

@change="getData1"

:placeholder=" '网格'"

filterable>

< el-option

v-for="item in areaGridList"

:key="item.areaGridCode"

:label="item.areaGridName"

:value="item.areaGridCode">

</ el-option>

</ el-select>

</ el-form-item>

</ el-col>

< el-col :span=" 6">

< el-button type= "danger" size= "small" style= "margin-left: 10px" @click="resetSearch1">重 置</ el-button>

</ el-col>

</ el-row>

</ el-form-item>

</ el-form>

< p style= "margin-bottom: 10px;background-color:#E4E7ED" align= "center">< b>< font size= "3px"> 待 分 配</ font></ b></ p>

 

< el-table :data="tableData1" height= "500"

:cell-style="{padding: '2px 0'}" border class= "table" ref= "multipleTableRef" header-cell-class-name= "table-header" @selection-change="selectChanges">

< el-table-column type= "selection" width= "40"/>

< el-table-column prop= "id" label= "员工id" align= "center" v-if="show">

< template # default= "scope">{{ scope.row.id }}</ template>

</ el-table-column>

< el-table-column prop= "ygName" label= "人员名称" align= "left" width= "160">

< template # default= "scope">{{ scope.row.ygName }}</ template>

</ el-table-column>

< el-table-column prop= "tdName" label= "厅店名称" align= "left">

< template # default= "scope">{{ scope.row.tdName}}</ template>

</ el-table-column>

< el-table-column prop= "wgid" label= "所属网格id" align= "center" v-if="show">

< template # default= "scope">{{ scope.row.wgid}}</ template>

</ el-table-column>

</ el-table>

</ el-col>

< el-col :span=" 2">

< div style= "margin-top: 250px" >

< el-button type= "primary" class= "el-icon-right" size= "small" style= "margin: 20px" @click="toRight"></ el-button>

< el-button type= "primary" class= "el-icon-back" size= "small" style= "margin: 20px" @click="toLeft"></ el-button>

</ div>

</ el-col>

< el-col :span=" 11">

< el-form :model="cityFormDef" ref= "cityFormRefDef">

< el-form-item label= "所属位置">

< el-row>

< el-col :span=" 6" >

< el-form-item prop= "cityCodeDef">

< el-select

size= "small"

v-model="cityFormDef.cityCodeDef"

@change="changeCityDef"

:placeholder="( '市')"

filterable>

< el-option

v-for="item in cityListDef"

:key="item.cityCode"

:label="item.cityName"

:value="item.cityCode">

</ el-option>

</ el-select>

</ el-form-item>

</ el-col>

< el-col :span=" 6" v-if=" !hideAreaDef">

< el-form-item prop= "areaCodeDef">

< el-select

size= "small"

v-model="cityFormDef.areaCodeDef"

@change="changeAreaDef"

:placeholder=" '区/县'"

filterable>

< el-option

v-for="item in areaListDef"

:key="item.areaCode"

:label="item.areaName"

:value="item.areaCode">

</ el-option>

</ el-select>

</ el-form-item>

</ el-col>

< el-col :span=" 6" v-if=" !hideAreaGridDef" >

< el-form-item prop= "areaGridCodeDef">

< el-select

size= "small"

v-model="cityFormDef.areaGridCodeDef"

@change="getData1Def"

:placeholder=" '网格'"

filterable>

< el-option

v-for="item in areaGridListDef"

:key="item.areaGridCode"

:label="item.areaGridName"

:value="item.areaGridCode">

</ el-option>

</ el-select>

</ el-form-item>

</ el-col>

< el-col :span=" 6">

< el-button type= "danger" size= "small" style= "margin-left: 10px" @click="resetSearch2">重 置</ el-button>

</ el-col>

</ el-row>

</ el-form-item>

</ el-form>

< p style= "margin-bottom: 10px;background-color:#E4E7ED" align= "center">< b>< font size= "3px"> 已 分 配</ font></ b></ p>

 

< el-table :data="tableData2" height= "500"

:cell-style="{padding: '2px 0'}" border class= "table" ref= "multipleTableRefDef" header-cell-class-name= "table-header" @selection-change="selectChangesDef">

< el-table-column type= "selection" width= "40"/>

< el-table-column prop= "id" label= "员工id" align= "center" v-if="show">

< template # default= "scope">{{ scope.row.id }}</ template>

</ el-table-column>

< el-table-column prop= "ygName" label= "人员名称" align= "left" width= "160">

< template # default= "scope">{{ scope.row.ygName }}</ template>

</ el-table-column>

< el-table-column prop= "tdName" label= "厅店名称" align= "left">

< template # default= "scope">{{ scope.row.tdName}}</ template>

</ el-table-column>

< el-table-column prop= "wgid" label= "所属网格id" align= "center" v-if="show">

< template # default= "scope">{{ scope.row.wgid}}</ template>

</ el-table-column>

</ el-table>

</ el-col>

</ el-row>

 

< template # footer>

< span class= "dialog-footer">

< el-button @click="cancelForm">取 消</ el-button>

< el-button type= "primary" @click="commitForm">保 存</ el-button>

</ span>

</ template>

</ el-dialog>

</ div>

</ template>

< script>

import { ref, reactive ,toRaw} from "vue";

import { ElMessage, ElMessageBox, ElTable } from "element-plus";

import {

queryAddCustlist,

addCustlistAft,

queryCityList1,

queryAreaList1,

queryAreaGridList1,

queryUserTree,

getDefault,

getherUser,

queryTfFocusClerkInfo

} from "../../api/apiIndex";

import { ElLoading } from 'element-plus'

import {

REQ_SUCCESS_GET

} from "../../assets/js/commonConfig";

import { ElForm } from 'element-plus';

export default {

name: "configClerk",

data(){

 

},

methods:{

//菜单选中变化事件

clickDeal () {

// this.afterSelecting = this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys())

// this.disabled = false

},

 

},

setup() {

//市、区域、网格列表变量

const cityList = ref([]);

const areaList = ref([]);

const areaGridList = ref([]);

const cityListDef = ref([]);

const areaListDef = ref([]);

const areaGridListDef = ref([]);

// const handleEdit = () =>{};

let cityForm = reactive({

cityCode: null,

areaCode: null,

areaGridCode: null

});

let cityFormDef = reactive({

cityCodeDef: null,

areaCodeDef: null,

areaGridCodeDef: null

});

 

//获取所有城市

const getCity = () =>{

queryCityList1({

}, res => {

console. log( '----getCity----res:' + res);

if(res.retCode == REQ_SUCCESS_GET){

cityList.value = res.body;

cityListDef.value = res.body;

} else{

ElMessage. error(res.retMsg);

}

}, err => {

console. log(err)

ElMessage. error( '查询城市列表异常');

})

}

getCity();

let hideArea = ref( false);

let hideAreaGrid = ref( false);

// 城市修改，拉取对应区域列表

const changeCity = ( val) => {

cityForm.areaCode = null;

cityForm.areaGridCode = null;

areaList.value = [];

areaGridList.value = [];

hideArea.value = false;

hideAreaGrid.value = false;

queryAreaList1({

cityCode:val

}, res => {

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

let list = res.body;

if(list.length > 0){

areaList.value = res.body;

} else{

ElMessage. error( '查无区域');

hideArea.value = true;

hideAreaGrid.value = true;

}

} else{

ElMessage. error(res.retMsg);

}

}, err => {

console. log(err)

ElMessage. error( '查询区域列表异常');

})

getData1();

};

let hideAreaDef = ref( false);

let hideAreaGridDef = ref( false);

const changeCityDef = ( val) => {

cityFormDef.areaCodeDef = null;

cityFormDef.areaGridCodeDef = null;

areaListDef.value = [];

areaGridListDef.value = [];

hideAreaDef.value = false;

hideAreaGridDef.value = false;

queryAreaList1({

cityCode:val

}, res => {

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

let list = res.body;

if(list.length > 0){

areaListDef.value = res.body;

} else{

ElMessage. error( '查无区域');

hideAreaDef.value = true;

hideAreaGridDef.value = true;

}

} else{

ElMessage. error(res.retMsg);

}

}, err => {

console. log(err)

ElMessage. error( '查询区域列表异常');

})

getData1Def();

};

// 区域修改，拉取对应网格列表

const changeArea = ( val) => {

cityForm.areaGridCode = null;

areaGridList.value = [];

hideAreaGrid.value = false;

queryAreaGridList1({

areaCode:val

}, res => {

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

let list = res.body;

if(list.length > 0){

areaGridList.value = res.body;

} else{

ElMessage. error( '查无网格');

hideAreaGrid.value = true;

}

} else{

ElMessage. error(res.retMsg);

}

}, err => {

console. log(err)

ElMessage. error( '查询区域网格列表异常');

})

getData1();

};

const changeAreaDef = ( val) => {

cityFormDef.areaGridCodeDef = null;

areaGridListDef.value = [];

hideAreaGridDef.value = false;

console. log(val, 'val')

queryAreaGridList1({

areaCode:val

}, res => {

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

let list = res.body;

if(list.length > 0){

areaGridListDef.value = res.body;

} else{

ElMessage. error( '查无网格');

hideAreaGridDef.value = true;

}

} else{

ElMessage. error(res.retMsg);

}

}, err => {

console. log(err)

ElMessage. error( '查询区域网格列表异常');

})

getData1Def();

};

const query = reactive({

isPage: 1,

pageNumber: 1,

pageSize: 100,

clientId: '',

state: '',

mobile: '',

hasMsg: '',

markState: '',

name: ''

});

const tableData = ref([]);

const pageTotal = ref( 2);

 

// 获取分配员工信息

let wgid = ref( null)

let selected = ref([]);

const multipleTableRef = ref();

const multipleTableRefDef = ref()

const getData1 = () =>{

let params = {

cityCode:(cityForm.cityCode ?cityForm.cityCode : ''),

areaCode:(cityForm.areaCode ?cityForm.areaCode : ''),

areaGridCode:(cityForm.areaGridCode ?cityForm.areaGridCode : ''),

staffIdy:rowId.value

}

 

queryUserTree(params, res => {

console. log(params, 'queryUserTree.patams')

console. log( 'tableData1');

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

tableData1.value = res.body;

wgid.value = res.body[ 0].wgid;

console. log(wgid.value);

for( let i = 0;i < tableData2.value.length;i ++){

for( let j = 0;j < tableData1.value.length;j ++){ // 左边数据 删除(已勾选到右边的数据)

if(tableData1.value[j].id == tableData2.value[i].id){

tableData1.value. splice(j, 1)

}

}

}

} else{

ElMessage. error(res.retMsg);

tableData1.value = []

}

}, err => {

console. log(err)

ElMessage. error( '获取分配员工信息异常');

});

}

const getData1Def = () =>{

let params = {

cityCode:(cityFormDef.cityCodeDef ?cityFormDef.cityCodeDef : ''),

areaCode:(cityFormDef.areaCodeDef ?cityFormDef.areaCodeDef : ''),

areaGridCode:(cityFormDef.areaGridCodeDef ?cityFormDef.areaGridCodeDef : ''),

staffIdy:rowId.value

}

getDefault(params, res => {

console. log( 'tableData2');

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

tableData2.value = res.body;

selected.value = res.body;

} else{

ElMessage. error(res.retMsg);

tableData2.value = []

}

}, err => {

console. log(err)

ElMessage. error( '获取默认的分配员工信息异常');

});

// 默认先勾选中

// setTimeout(() => {

// toggleSelection();

// },500);

}

 

const toggleSelection = () => {

/**

* tableData1 是table列表展示的数据

* selected是获取 tableData2 的数据，要进行勾选的数据

*/

console. log(tableData2.value.length, '进入勾选操作 -- tableData2.value.length')

if (tableData2.value.length > 0) {

for( let j = 0;j <selected.value.length;j ++){

multipleTableRefDef.value. toggleRowSelection(tableData2.value[j], true);

}

} else {

multipleTableRefDef.value. clearSelection();

}

};

// 获取表格数据

const getData = () =>{

let params = {

jyName:query.name

}

tableData.value = []

console. log(params.jyName)

// 获取集运人员信息

queryTfFocusClerkInfo({

jyName:params.jyName

}, res => {

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

tableData.value = res.body

} else{

ElMessage. error(res.retMsg);

}

}, err => {

console. log(err)

ElMessage. error( '查询列表异常');

})

}

getData();

// 查询操作

const handleSearch = () => {

query.pageNumber = 1;

getData();

};

// 分页导航

const handlePageChange = ( val) => {

query.pageNumber = val;

getData();

};

let rowId = ref( '')

let rowName = ref( '')

let rowPhone = ref( '')

let title = ref( '')

const handleEdit = ( index, row) => {

rowId.value = row.id;

rowName.value = row.name;

rowPhone.value = row.phone;

console. log(rowId.value);

addVisible.value = true;

title.value = '成员分配 【' + rowName.value + '~' + rowPhone.value + '】';

getData1Def();

}

 

const addVisible = ref( false);

// 确认分配员工（对右边待分配数据勾选的数据进行确认分配提交）

const n = ref([]);

let idArrayDef = ref([])

const commitForm = () => {

// 拼接 要分配的（右边的数据）id 传

idArrayDef.value =[];

tableData2.value. forEach(( item) => {

idArrayDef.value. push(item.id);

});

// 去重 (因左边重复向右边 推送 造成 提交了重复的数据)

for( let i = 0;i < idArrayDef.value.length;i ++){

if(n.value. indexOf(idArrayDef.value[i]) == - 1){

n.value. push(idArrayDef.value[i]);

}

}

let params = {

userList:n.value,

cityCode:(cityFormDef.cityCodeDef ?cityFormDef.cityCodeDef : ''),

areaCode:(cityFormDef.areaCodeDef ?cityForm.areaCodeDef : ''),

areaGridCode:(cityFormDef.areaGridCodeDef ?cityForm.areaGridCodeDef : ''),

staffIdy:rowId.value

}

const loading = ElLoading. service({

lock: true,

text: '拼命加载中···',

background: 'rgba(0, 0, 0, 0.7)',

})

console. log(params, 'commitForm')

getherUser(params, res => {

console. log(res);

if(res.retCode == REQ_SUCCESS_GET){

ElMessage. success( '保存成功')

cancelForm();

loading. close();

getData();

} else{

ElMessage. error(res.retMsg);

loading. close();

}

}, err => {

console. log(err)

ElMessage. error( '保存失败');

loading. close();

})

}

let tableData1 = ref([])

let tableData2 = ref([])

const cancelForm = () => {

areaList.value = [];

areaListDef.value = [];

areaGridList.value = [];

areaGridListDef.value = [];

cityForm.cityCode = '';

cityForm.areaCode = '';

cityForm.areaGridCode = '';

cityFormDef.cityCodeDef = null;

cityFormDef.areaCodeDef = null;

cityFormDef.areaGridCodeDef = null;

tableData1.value = [];

tableData2.value = [];

addVisible.value = false;

n.value = [];

}

const resetSearch1 = () =>{

areaList.value = [];

areaGridList.value = [];

cityForm.cityCode = '';

cityForm.areaCode = '';

cityForm.areaGridCode = '';

tableData1.value = [];

}

const resetSearch2 = () =>{

areaListDef.value = [];

areaGridListDef.value = [];

cityFormDef.cityCodeDef = null;

cityFormDef.areaCodeDef = null;

cityFormDef.areaGridCodeDef = null;

tableData2.value = [];

getData1Def();

}

// 选中左边 未分配 数据

let multipleUserList = ref([])

let idArray = ref([])

const selectChanges = ( val) => {

idArray.value =[];

multipleUserList.value = val;

val. forEach(( item) => {

console. log(item.id);

idArray.value. push(item.id);

console. log(idArray.value);

});

console. log(multipleUserList.value);

};

// 将左边勾选的数据 移动到 右边去

const toRight = ( val) => {

console. log(multipleUserList.value, '将左边勾选的数据 移动到 右边去');

for( let i = 0;i < multipleUserList.value.length;i ++){

tableData2.value. unshift(multipleUserList.value[i]); // 右边数据 新增(push 是往后面添加 unshift 是往开头新增)

for( let j = 0;j < tableData1.value.length;j ++){ // 左边数据 删除

if(tableData1.value[j].id == multipleUserList.value[i].id){

tableData1.value. splice(j, 1)

}

}

}

console. log(tableData1.value, 'tableData1.value');

console. log(tableData2.value, 'tableData2.value');

};

// 将右边勾选的数据 移动到 左边去

const toLeft = ( val) => {

console. log(multipleUserListDef.value, '将右边勾选的数据 移动到 左边去');

for( let i = 0;i < multipleUserListDef.value.length;i ++){

tableData1.value. push(multipleUserListDef.value[i]); // 左边数据 新增

for( let j = 0;j < tableData2.value.length;j ++){ // 右边数据 删除

if(tableData2.value[j].id == multipleUserListDef.value[i].id){

tableData2.value. splice(j, 1)

}

}

}

console. log(tableData1.value, 'tableData1.value');

console. log(tableData2.value, 'tableData2.value');

};

// 选中右边 待分配 数据

let multipleUserListDef = ref([])

 

const selectChangesDef = ( val) => {

multipleUserListDef.value = val;

console. log(multipleUserListDef.value);

};

return {

query,

tableData,

pageTotal,

addVisible,

handleEdit,

handleSearch,

handlePageChange,

selectChanges,

selectChangesDef,

cityList,

areaList,

areaGridList,

cityListDef,

areaListDef,

areaGridListDef,

hideArea,

getCity,

changeCity,

changeArea,

cityForm,

getData,

cancelForm,

commitForm,

tableData1,

tableData2,

getData1,

show: false,

multipleTableRef,

multipleTableRefDef,

cityFormDef,

changeCityDef,

changeAreaDef,

getData1Def,

resetSearch1,

resetSearch2,

toRight,

toLeft,

title,

};

},

};

</ script>

< style scoped>

.handle-box {

margin-bottom: 20 px;

}

.handle-select {

width: 120 px;

}

.handle-input {

width: 300 px;

display: inline-block;

}

.table {

width: 100 %;

font-size: 14 px;

}

table tbody ::-webkit-scrollbar {

width: 6 px;

}

.red {

color: #ff0000;

}

.mr10 {

margin-right: 10 px;

}

.table-td-thumb {

display: block;

margin: auto;

width: 40 px;

height: 40 px;

}

</ style>