使用vue3+element plus 的table自制的穿梭框（支持多列数据）

目录

一、效果图

二、介绍

三、代码区

一、效果图

话不多说，先上图

二、介绍

项目需要：通过穿梭框选择人员信息，可以根据部门、岗位进行筛选，需要显示多列（不光显示姓名，还包括人员的一些基础信息）；项目前端用的是vue3+element plus（Transfer 组件 | Element Plus），原来打算使用element的组件 Transfer 穿梭框，发现它只实现简单的单列穿梭，无法满足需求。最后打算自己动手用table来实现：分为左右两个区域，左边查询区+待选数据列表table，右边选中的数据列表，中间两个按钮实现数据的转移。（在看的小伙伴有其他更合适的组件/组件库可以评论区分享）

三、代码区

html

    <el-dialog :title="title" :lock-scroll="false" v-model="open" :fullscreen="fullScreen" :close-on-click-modal="false":close-on-press-escape="false" align-center><el-form ref="formRef" :model="form" :rules="rules" label-width="100px"><el-row :gutter="10"><el-col :lg="6"><el-form-item label="生产线" prop="lineCode"><el-select clearable v-model="form.lineCode" placeholder="请选择生产线" filterable@change="formLineSelectChange" style="width: 100%;"><el-option v-for="item in options.mes_line_list" :key="item.id" :label="item.lineName":value="item.lineCode"><span class="fl">{{ item.innerLineCode }}</span><span class="fr" style="color: var(--el-text-color-secondary);">{{ item.lineName }}</span></el-option></el-select></el-form-item></el-col><el-col :lg="4"><el-form-item label="标准工时" prop="standardWorkHours"><el-input-number v-model="form.standardWorkHours" :min="0" :max="24" :precision="1" placeholder="请输入标准工时"style="width: 100%;" /></el-form-item></el-col><el-col :lg="4"><el-form-item label="日期" prop="workDate"><el-date-picker v-model="form.workDate" type="date" placeholder="日期" value-format="YYYY-MM-DD":shortcuts="shortcutsWorkDate" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col :lg="4"><el-form-item label="班次" prop="workShift"><el-select clearable v-model="form.workShift" placeholder="请选择生产班次" style="width: 100%;"><el-option v-for="item in options.mes_classes_type" :key="item.dictValue" :label="item.dictLabel":value="item.dictValue"></el-option></el-select></el-form-item></el-col><el-col :lg="6"><el-form-item label="备注信息" prop="remark"><el-input v-model="form.remark" placeholder="请输入备注信息" style="width: 100%;" type="textarea" :rows="2" /></el-form-item></el-col></el-row><el-divider content-position="center">报工人员明细</el-divider><!-- 查询条件 --><el-form :model="queryParamsUserNav" label-position="right" inline ref="queryRefUserNav"><el-form-item label="部门" prop="deptId"><el-tree-select v-model="queryParamsUserNav.deptId" :data="deptOptions":props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"check-strictly :render-after-expand="false" @change="changeDept($event)" filterable /></el-form-item><el-form-item label="岗位" prop="postId"><el-select v-model="queryParamsUserNav.postId" placeholder="请选择岗位" filterable clearable@change="changePost"><el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"><span class="fl">{{ item.postCode }}</span><span class="fr" style="color: var(--el-text-color-secondary);">{{ item.postName }}</span></el-option></el-select></el-form-item><el-form-item label="用户" prop="userId"><el-select v-model="queryParamsUserNav.userId" placeholder="请选择用户" filterable clearable><el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId"><span class="fl">{{ item.nickName }}</span><span class="fr" style="color: var(--el-text-color-secondary);">{{ item.userName }}</span></el-option></el-select></el-form-item><el-form-item><el-button icon="search" type="primary" @click="handleQueryUserNav">{{ $t('btn.search') }}</el-button><el-button icon="refresh" @click="resetQueryUserNav">{{ $t('btn.reset') }}</el-button></el-form-item></el-form><!-- 自制穿梭框 --><el-row><!-- 左边table --><el-col :lg="10" style="height: 100%;"><div class="table-container"><el-table :data="dataListLeft" v-loading="loadingLeft" ref="table" borderheader-cell-class-name="el-table-header-cell" highlight-current-row@selection-change="handleSelectionChangeLeft" :height="tableHeight - 40"><el-table-column type="selection" width="50" align="center" /><el-table-column type="index" width="60" label="序号" align="center" /><el-table-column prop="deptName" label="部门" align="center" /><el-table-column prop="userName" label="工号" align="center" /><el-table-column prop="nickName" label="姓名" align="center" /><el-table-column prop="postNames" label="岗位" align="center" /></el-table><pagination :total="totalLeft" v-model:page="queryParamsUserNav.pageNum"v-model:limit="queryParamsUserNav.pageSize" @pagination="handleQueryUserNav" /></div></el-col><!-- 向左箭头 --><el-col :lg="1" align="right"style="margin: 0.5%; display: flex; align-items: center; justify-content: center;"><el-button type="primary" icon="arrow-left" @click="handleLeftArrow"></el-button></el-col><!-- 向右箭头 --><el-col :lg="1" align="left"style="margin: 0.5%; display: flex; align-items: center; justify-content: center;"><el-button type="primary" icon="arrow-right" @click="handleRightArrow"></el-button></el-col><!-- 右边table --><el-col :lg="11" style="height: 100%;"><div class="table-container"><el-table :data="dataListRight" v-loading="loadingRight" ref="table" borderheader-cell-class-name="el-table-header-cell" highlight-current-row@selection-change="handleSelectionChangeRight" :height="tableHeight - 40"><el-table-column type="selection" width="50" align="center" /><el-table-column type="index" width="60" label="序号" align="center" /><el-table-column prop="deptName" label="部门" align="center" /><el-table-column prop="userName" label="工号" align="center" /><el-table-column prop="nickName" label="姓名" align="center" /><el-table-column prop="actualWorkHours" label="实际工时/h" align="center" width="150"><template #default="scope"><el-input-number v-model="scope.row.actualWorkHours" :min="0" :max="24" :precision="1"placeholder="实际工时/h" style="width: 100%;" controls-position="right" /></template></el-table-column><el-table-column prop="standardWorkHours" label="标准工时/h" align="center" width="150" /><el-table-column prop="postNames" label="岗位" align="center" /></el-table></div></el-col></el-row></el-form><template #footer><el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button><el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button></template></el-dialog>

js

<script setup name="meshumanreport">
import {listMesHumanReport, getMesHumanReportList,addMesHumanReport, delMesHumanReport,updateMesHumanReport, updateMesHumanReportDetailPartial, getMesHumanReport,
}from '@/api/dataReport/meshumanreport.js'
import { getMesLineList } from '@/api/factoryManage/mesline.js'
import { treeselect } from '@/api/system/dept'
import { listPostOptionSelectLimit } from '@/api/system/post.js'
import { getUserListByPost } from '@/api/system/user.js'
import dayjs from 'dayjs';
import auth from '@/plugins/auth'const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const loadingLeft = ref(false)
const loadingRight = ref(false)const queryParamsUserNav = reactive({pageNum: 1,pageSize: 20,sortType: 'asc',deptId: undefined,postId: undefined,userId: undefined,
})const total = ref(0)
const totalLeft = ref(0)
const totalRight = ref(0)
const dataList = ref([])
const dataListLeft = ref([])
const dataListRight = ref([])
const dataListLeftChosed = ref([])
const dataListRightChosed = ref([])
const queryRef = ref()
const queryRefUserNav = ref()const deptOptions = ref([])
const postOptions = ref([])
const userOptions = ref([])
const standardDisabled = ref(true)
const tableHeight = ref(570)var dictParams = [{ dictType: "mes_classes_type" },
]proxy.getDicts(dictParams).then((response) => {response.data.forEach((element) => {state.options[element.dictType] = element.list})
})//当前时间
const now = new Date();// 设置:subtract往前推 add往后
const dateRangeWorkDate = ref([dayjs().subtract(1, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])const shortcutsWorkDate = [{text: '今天',value: new Date(),},{text: '昨天',value: () => {const date = new Date()date.setTime(date.getTime() - 3600 * 1000 * 24)return date},},{text: '一周前',value: () => {const date = new Date()date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)return date},},
]//日期范围变化时，触发表单校验（因为el-date-picker 选中的值不会自动通知表单验证状态，所以这里要单独处理）
function handleDateChange() {dataList.value = []// console.log(dateRangeWorkDate.value)// queryParams.dateRangeWorkDate = dateRangeWorkDate.value// // 查询报表数据// getList()
}// 动态表头生成
// const dateRangeWorkDate = ref([])
const dynamicHeaders = computed(() => {console.log(dateRangeWorkDate.value)if (!dateRangeWorkDate.value || dateRangeWorkDate.value.length !== 2) return []const dates = []const start = new Date(dateRangeWorkDate.value[0])const end = new Date(dateRangeWorkDate.value[1])while (start <= end) {dates.push({date: start.toISOString().split('T')[0],shifts: ['白班', '夜班']})start.setDate(start.getDate() + 1)}console.log(dates)return dates
})/**************************************************** form操作 ****************************************************/
const formRef = ref()
const formRefEdit = ref()
const formRefUserNav = ref()
const title = ref('')
const titleUserNav = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const openUserNav = ref(false)
const openEditCell = ref(false)
const state = reactive({single: true,multiple: true,form: {},formUserNav: {},formEdit: {},rules: {//产线lineCode: [{ required: true, message: '请选择产线', trigger: 'change' },],//标准工时standardWorkHours: [{ required: true, message: '请输入标准工时', trigger: ['change', 'blur'] },],
},],workShift: [{ required: true, message: '请选择班次', trigger: 'change' },],},rulesQueryReport: {//产线// lineCode: [{ required: true, message: '请选择产线', trigger: 'change' },],//日期dateRangeWorkDate: [{ required: true, message: '请选择日期范围', trigger: 'blur' },],},rulesEdit: {lineName: [{ required: true, message: '请输入产线', trigger: 'blur' },],userName: [{ required: true, message: '请输入人员', trigger: 'blur' },],workDate: [{ required: true, message: '请选择日期', trigger: 'change' },],workShift: [{ required: true, message: '请选择班次', trigger: 'change' },],standardWorkHours: [{ required: true, message: '请输入标准工时', trigger: 'change' },],actualWorkHours: [{ required: true, message: '请输入实际工时', trigger: 'change' },],},options: {// 产线列表mes_line_list: [],// 班次 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}mes_classes_type: [],}
})const { form, formUserNav, formEdit, rules, rulesQueryReport, rulesEdit, options, single, multiple } = toRefs(state)// 添加按钮操作
function handleAdd() {reset();open.value = truetitle.value = '添加人力报工'opertype.value = 1form.value.standardWorkHours = 12//日期班次默认值var hour = dayjs().get('hour')if (hour >= 0 && hour < 8) {form.value.workDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD')}else {form.value.workDate = dayjs().format('YYYY-MM-DD')}if (hour >= 8 && hour < 20) {form.value.workShift = '白班'}else {form.value.workShift = '夜班'}//查询用户下拉列表getUserDropDownList()
}// 添加&修改 表单提交
function submitForm() {// 校验表单proxy.$refs["formRef"].validate((valid) => {if (valid) {// 校验明细表if (dataListRight.value.length == 0) {proxy.$modal.msgError('请先选择人员信息')return}dataListRight.value.forEach(item => {item.workShopName = form.value.workShopNameitem.lineCode = form.value.lineCodeitem.lineName = form.value.lineNameitem.workDate = form.value.workDateitem.workShift = form.value.workShiftitem.userCode = item.userNameitem.userName = item.nickName})// 提交表单console.log(dataListRight.value)form.value.mesHumanReportDetailNav = dataListRight.valueaddMesHumanReport(form.value).then((res) => {console.log(res)if (res.code == 200) {proxy.$modal.msgSuccess("操作成功!")open.value = false//刷新列表getList()} else {// proxy.$modal.msgError("操作失败")}}).catch(() => {proxy.$modal.msgError("操作失败")})}})
}// 关闭dialog
function cancel() {open.value = falsereset()
}// 重置表单
function reset() {form.value = {id: null,workShopId: null,workShopCode: null,workShopName: null,lineId: null,lineCode: null,lineName: null,standardWorkHours: null,startTime: null,endTime: null,remark: null,};proxy.resetForm("formRef")resetQueryUserNav()dataListLeft.value = []dataListLeftChosed.value = []dataListRight.value = []dataListRightChosed.value = []
}/*** 生产线下拉变更* @param {*} value*/
function formLineSelectChange(value) {let line = state.options.mes_line_list.find(item => item.lineCode == value)console.log(line)form.value.lineId = line.idform.value.lineCode = line.lineCodeform.value.lineName = line.lineNameform.value.workShopId = line.workShopIdform.value.workShopCode = line.workShopCodeform.value.workShopName = line.workShopName
}/********************************************  人力报工-明细子表信息  ***********************************************/
const mesHumanReportDetailList = ref([])
const checkedMesHumanReportDetail = ref([])
const fullScreen = ref(true)
const drawer = ref(false)/** 人力报工-明细序号 */
function rowMesHumanReportDetailIndex({ row, rowIndex }) {row.index = rowIndex + 1;
}/** 复选框选中数据 */
function handleMesHumanReportDetailSelectionChange(selection) {checkedMesHumanReportDetail.value = selection.map(item => item.index)
}//查询用户信息
function handleQueryUserNav() {console.log(queryParamsUserNav)loadingLeft.value = truegetUserListByPost(queryParamsUserNav).then((res) => {console.log(res)const { code, data } = resif (code == 200) {dataListLeft.value = data.resulttotalLeft.value = data.totalNumconsole.log(data.result)//dataListLeft去除掉右边dataListRight的人员dataListLeft.value = dataListLeft.value.filter(item => !dataListRight.value.some(item2 => item2.userId == item.userId))}loadingLeft.value = false}).catch(() => {loadingLeft.value = false})
}//查询用户信息条件清空
function resetQueryUserNav() {queryParamsUserNav.deptId = undefinedqueryParamsUserNav.postId = undefinedqueryParamsUserNav.userId = undefinedqueryParamsUserNav.pageNum = 1queryParamsUserNav.pageSize = 20handleQueryUserNav()
}//部门选择改变
function changeDept(e) {console.log(e)if (e) {queryParamsUserNav.deptId = egetUserDropDownList()}
}//岗位选择改变
function changePost() {getUserDropDownList()
}// 获取人员下拉列表
function getUserDropDownList() {queryParamsUserNav.userId = undefinedvar tmpQueryParams = {deptId: queryParamsUserNav.deptId,postId: queryParamsUserNav.postId,pageNum: 1,pageSize: 99999,}getUserListByPost(tmpQueryParams).then((res) => {console.log(res)const { code, data } = resif (code == 200) {userOptions.value = data.result}})}//箭头向左，取消选中数据
function handleLeftArrow() {if (dataListRightChosed.value.length == 0) {proxy.$modal.msgError('请先勾选要取消选中的人员')} else {dataListRight.value = dataListRight.value.filter(item => !dataListRightChosed.value.some(item2 => item2.userId == item.userId))dataListRightChosed.value = []//左边的数据重新查询handleQueryUserNav()}
}//箭头向右，选中数据
function handleRightArrow() {if (form.value.standardWorkHours) {if (dataListLeftChosed.value.length > 0) {//右边的数据加上左边的选中数据,已经存在的不重复添加dataListRight.value = dataListRight.value.concat(dataListLeftChosed.value.filter(item => !dataListRight.value.some(item2 => item2.userId == item.userId)))console.log(form.value.workDate)dataListRight.value.forEach(item => {item.standardWorkHours = form.value.standardWorkHoursitem.actualWorkHours = form.value.standardWorkHours})dataListLeft.value = dataListLeft.value.filter(item => !dataListLeftChosed.value.some(item2 => item2.userId == item.userId))dataListLeftChosed.value = []} else {proxy.$modal.msgError('请先勾选要添加的人员')}} else {proxy.$modal.msgError('请先设置标准工时')}
}//左侧选择改变
function handleSelectionChangeLeft(selection) {// dataListLeftChosed = selection.map(item => item.userId)dataListLeftChosed.value = selection
}//右侧选择改变
function handleSelectionChangeRight(selection) {dataListRightChosed.value = selection
}/** 查询部门下拉树结构 */
function getDeptTreeselect() {treeselect().then((response) => {deptOptions.value = response.data})
}
function getDropDownList() {// 获取生产线列表getMesLineList().then(res => {console.log(res)const { code, data } = resif (code == 200) {state.options.mes_line_list = data}})// 获取岗位列表listPostOptionSelectLimit().then((res) => {console.log(res)if (res.code == 200) {postOptions.value = res.data}})
}handleQuery()
getDropDownList()
getDeptTreeselect()
</script>