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: 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>
posted @ 2022-04-14 14:03  梦幻＆浮云％  阅读(1565)  评论(0)  编辑  收藏  举报