苏州微网站制作,网站布局 种类,网站管理员的联系方式,企业局域网组建与网站建设需求#xff1a;点击左边的tab页签#xff0c;请求右侧表格数据#xff1b;如果返回的接口数据存在taskuser字段并不为null#xff0c;那么按照这个字段去回勾数据。如果存在数据#xff0c;但与后面所勾选的数据项不同#xff0c;按照后面勾选的为主。 el-tabs tab-…需求点击左边的tab页签请求右侧表格数据如果返回的接口数据存在taskuser字段并不为null那么按照这个字段去回勾数据。如果存在数据但与后面所勾选的数据项不同按照后面勾选的为主。 el-tabs tab-positionleft v-modeldialogInfo.activeTab styleheight: 350px classdemo-tabs tab-changetabChangeel-tab-pane v-fortab in dialogInfo.tabs :keytab.id :labeltab.text :nametab.textdiv classtableDivel-tablerefrefTableV:datatableConfig.tableData:header-cell-style{ background: #F5F7FA, height: 30px }stylewidth: 100%; margin: 0 autoheight100%aligncenterrow-keyempNamestripeborderselectselectel-table-column typeselection width40 fixed label操作 /el-table-column fixed propuserName label用户编号 width120 aligncenter /el-table-column fixed propempName label用户姓名 min-width150 aligncenter /el-table-column fixed propexpiresdate label过期日期 min-width150 aligncentertemplate v-slotscopeel-date-pickerv-ifdialogInfo.tabs[dialogInfo.activeTabIndex].allot?.empName scope.row.empNamev-modelscope.row.expiresdatetypedateplaceholder选择日期sizesmallchangehandleDateChange(scope.row)value-formatYYYY-MM-DD/span v-else clickchangeLeader(scope.row){{ scope.row.expiresdate || }}/span/template/el-table-columnel-table-column fixed propleaderNames label直接领导 min-width150 aligncentertemplate v-slotscopespan v-ifscope.row.leaderNames scope.row.leaderNames ! sizesmall clickleaderSearch(scope.row){{ scope.row.leaderNames || 选择领导 }}/spanspan v-else-ifdialogInfo.tabs[dialogInfo.activeTabIndex].allot?.empName scope.row.empNameel-button sizesmall clickleaderSearch(scope.row){{ 选择领导 }}/el-button/span/template/el-table-column/el-table/div/el-tab-pane/el-tabs
const refTableV ref(null) //表格
const refTree ref(null)
const dialogInfo reactive({tabs: [],dialogText: 任务分配,dialogFormVisible: false,activeTab: ,searchstrId: ,list: [],treeLearder: {},str: []
})const tableConfig reactive({allot: {},tableData: [],loading: false,page: 1,selectedData: [], // 存储当前勾选的数据项lastSelectedRow: {},paramsData: {},activeTabIndex: 0
}) 首先openInit 这个方法是我打开弹层的第一步tabs数据是左侧的角色信息我会给每一项的tab数据添加selectedData和allot 这个在后面取值会用到。
const openInit (list) {dialogInfo.str []list.forEach((item) dialogInfo.str.push(item.factory , item.materialscode))tableConfig.selectedData [] // 存储当前勾选的数据项tableConfig.lastSelectedRow {}tableConfig.allot {}dialogInfo.list JSON.parse(JSON.stringify(list))dialogInfo.treeLearder {}getPropertyList({searchstr: {taskType: SPAREPARTSTASKROLE}}).then((res) {const tabs res.data.rows || []dialogInfo.searchstrId if (tabs.length 0) {dialogInfo.searchstrId tabs[0].iddialogInfo.activeTab tabs[0].texttabs.forEach((row) {row.selectedData []row.allot {}})dialogInfo.tabs tabsdialogInfo.activeTabIndex 0dialogInfo.dialogFormVisible truegetTable() // 获取表格数据}})
}const getTable () {preTaskAssign({searchstr: {id: dialogInfo.searchstrId,eventcodes: dialogInfo.str.join(;)}}).then((res) {const tableData res.data.row?.teapSysUserEntityList || []const taskuser res.data.row?.taskuser || refTableV.value[dialogInfo.activeTabIndex].clearSelection()const strLength dialogInfo.str.lengthif (strLength 1) {if (tableData tableData.length 0) {tableData.forEach((newRow) {if (newRow.userName taskuser) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData [newRow]dialogInfo.tabs[dialogInfo.activeTabIndex].allot newRownextTick(() {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(newRow, true)})}})}}tableConfig.tableData tableData})
}
代码主要就是针对勾选数据 保存数据切换tab页签 再次回来后数据的勾选处理
const select (selectedRows) {// 获取当前 tab 的数据const currentTab dialogInfo.tabs[dialogInfo.activeTabIndex]refTableV.value[dialogInfo.activeTabIndex].clearSelection()// 清空上一次选中的数据currentTab.selectedData []currentTab.allot {}// 更新当前 tab 的 selectedData 和 allotif (selectedRows.length 1) {currentTab.selectedData selectedRowscurrentTab.allot selectedRows[0] // 如果有 allot 数据更新为第一个选中的数据nextTick(() {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(currentTab.allot, true)})} else {ElMessage.warning(只能选择一条数据,请取消已勾选项后再进行选择)}// 更新当前 tab 的 selectedData 和 allotdialogInfo.tabs[dialogInfo.activeTabIndex] currentTab
}// 选择领导的弹层
const tabChange (name) {// 查找当前 tab 索引dialogInfo.activeTab namedialogInfo.searchstrId dialogInfo.tabs.find((item) item.text name).idlet index nulldialogInfo.tabs.some((item, ind) {if (item.text name) {index indreturn true // 找到就停止遍历}return false})dialogInfo.activeTabIndex indexconst currentTab dialogInfo.tabs[index]// 保存当前勾选状态const { selectedData, allot } currentTab// 在切换 tab 时将勾选状态存储到 dialogInfo 中dialogInfo.tabs[index].selectedData selectedData || []dialogInfo.tabs[index].allot allot || {}// 重新加载当前 tab 的数据保持选中状态preTaskAssign({searchstr: {id: dialogInfo.searchstrId,eventcodes: dialogInfo.str.join(;) // 外面行勾选的数据 工厂加物料编号传字符串}}).then((res) {// 获取从接口返回的表格数据const tableDataList res.data.row?.teapSysUserEntityList || []const taskuser res.data.row?.taskuser || // 更新表格数据tableConfig.tableData tableDataListrefTableV.value[dialogInfo.activeTabIndex].clearSelection()// 使用一些逻辑优化遍历找到合适的行就停止let isFound falsetableDataList.forEach((row) {if (isFound) return // 如果已经找到匹配项直接跳过后续行const selectedUserName selectedData[0]?.userNameif (taskuser) {if (selectedData.length 0) {// 1. 如果有taskuser但是selectedData为空依照taskuser去筛选数据if (row.userName taskuser) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData [row]dialogInfo.tabs[dialogInfo.activeTabIndex].allot rownextTick(() {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(row, true)})isFound true // 标记为已找到匹配项跳出循环}} else if (selectedUserName ! taskuser) {// 2. 如果同时存在但是匹配不上那么按照selectedData中的数据去筛选if (row.userName selectedUserName) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData [row]dialogInfo.tabs[dialogInfo.activeTabIndex].allot rownextTick(() {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(row, true)})isFound true // 标记为已找到匹配项跳出循环}} else if (selectedUserName taskuser) {// 3. 如果同时存在匹配的上按照taskuser判断nextTick(() {const selectedRow dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData[0]refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(selectedRow, true)})isFound true // 标记为已找到匹配项跳出循环}} else {// 4. taskuser不存在按照selectedData去筛选if (row.userName selectedUserName) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData [row]dialogInfo.tabs[dialogInfo.activeTabIndex].allot rownextTick(() {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(row, true)})isFound true // 标记为已找到匹配项跳出循环}}})})
}const leaderSearch (row) {// 查找与勾选行对应的数据const exObj tableConfig.tableData.find((item) item.userId dialogInfo.tabs[dialogInfo.activeTabIndex].allot.userId)// 检查过期日期是否为空if (exObj.expiresdate || exObj.expiresdate null) return ElMessage.warning(请先设置时间)const str dialogInfo.tabs[dialogInfo.activeTabIndex].id // 这个就是左边角色的idrefTree.value.openInit(JSON.parse(JSON.stringify(row)), str)
}
