开发学习资料模块的dialog弹窗的穿梭框

This commit is contained in:
Vce 2024-04-13 16:53:20 +08:00
parent bbb613c303
commit 2d39702bae

View File

@ -1,6 +1,5 @@
<template>
<!-- 评价中心 -->
<div class="assessmentCentent whiteBlock">
<div class="learningMaterial whiteBlock">
<div v-if="!isStudyDetail">
<el-tabs v-model="activeName" @tab-click="handleClick" style="padding: 0 15px;">
<el-tab-pane :label="'全部'" name="allModule"></el-tab-pane>
@ -12,7 +11,7 @@
<div class="headPart">
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-button type="primary" size="medium" @click="addCourse">新增课程</el-button>
<el-button type="primary" size="medium" @click="handleOpen">新增课程</el-button>
</el-form-item>
<el-form-item>
<el-input placeholder="请搜索课程" size="medium" suffix-icon="el-icon-search"></el-input>
@ -97,7 +96,6 @@
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="addCourseForm.remark"></el-input>
</el-form-item>
<!-- @click="submitForm('addCourseForm')" -->
</el-form>
</div>
<div class="dialogRight">
@ -109,7 +107,8 @@
<div class="tlTwo">
人员类型
<div>
<el-select v-model="personType" style="width:128px;margin-left:9px" size="mini" placeholder="请选择" @change="getWorkerInfoList">
<!-- <el-select v-model="personType" style="width:128px;margin-left:9px" size="mini" placeholder="请选择" @change="getWorkerInfoList"> -->
<el-select v-model="personType" style="width:128px;margin-left:9px" size="mini" placeholder="请选择">
<el-option label="劳务人员" :value="1"></el-option>
<el-option label="管理人员" :value="2"></el-option>
<el-option label="临时人员" :value="3"></el-option>
@ -121,9 +120,27 @@
</div>
<div class="tlThree">
<vue-scroll>
<div class="dialog-tree">
<el-tree :data="personTreeList" :filter-node-method="filterNode" :highlight-current="true" :check-on-click-node="false" show-checkbox :props="defaultProps" node-key="id" ref="personTree" @check="checkedPerson">
<span class="custom-tree-node" slot-scope="{ node, data }">
<div class="dialog-tree" v-show="personType === 1">
<el-tree :data="laborPersonList" :filter-node-method="filterNode" :highlight-current="true" :check-on-click-node="false" show-checkbox :props="defaultProps" node-key="id" ref="personTree" default-expand-all @check="checkedPerson">
<span class="custom-tree-node" slot-scope="{ node }">
<span style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;" :title="node.label" >
{{ node.label }}
</span>
</span>
</el-tree>
</div>
<div class="dialog-tree" v-show="personType === 2">
<el-tree :data="adminPersonList" :filter-node-method="filterNode" :highlight-current="true" :check-on-click-node="false" show-checkbox :props="defaultProps" node-key="id" ref="personTree2" default-expand-all @check="checkedPerson">
<span class="custom-tree-node" slot-scope="{ node }">
<span style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;" :title="node.label" >
{{ node.label }}
</span>
</span>
</el-tree>
</div>
<div class="dialog-tree" v-show="personType === 3">
<el-tree :data="tempPersonList" :filter-node-method="filterNode" :highlight-current="true" :check-on-click-node="false" show-checkbox :props="defaultProps" node-key="id" ref="personTree3" default-expand-all @check="checkedPerson">
<span class="custom-tree-node" slot-scope="{ node }">
<span style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;" :title="node.label" >
{{ node.label }}
</span>
@ -148,12 +165,12 @@
</div>
<div class="transBtn">
<div>
<el-button plain style="margin-bottom:10px">
<el-button plain style="margin-bottom:10px" @click="eleLtoR">
<i class="el-icon-arrow-right"></i>
</el-button>
</div>
<div>
<el-button style="margin-bottom:10px" type="primary">
<el-button style="margin-bottom:10px" type="primary" @click="eleRtoL">
<i class="el-icon-arrow-left"></i>
</el-button>
</div>
@ -174,18 +191,10 @@
</div>
<div class="innerThree">
<vue-scroll>
<!-- <el-table class="tables" :show-header="false" :data="compulsoryList" height="200" style="min-height:191px">
<el-table-column align="center" prop="id" label="考" width="80"></el-table-column>
<el-table-column align="center"></el-table-column>
<el-table-column align="center" type="selection" width="65"></el-table-column>
</el-table> -->
<!-- <el-checkbox-group v-model="cpsCheckedList" @change="handleCpsList">
<el-checkbox v-for="(item) in compulsoryList" :key="item.id" :label="item.label">{{item.label}}</el-checkbox>
</el-checkbox-group> -->
<div class="dialog-tree">
<el-tree :data="compulsoryList" :filter-node-method="filterNode" :highlight-current="true" :check-on-click-node="false"
show-checkbox :props="defaultProps" node-key="sn" ref="compulsoryTree" >
<span class="custom-tree-node" slot-scope="{ node, data }">
show-checkbox :props="defaultProps" node-key="id" ref="compulsoryTree" @check="cpsCheckedPersonFn">
<span class="custom-tree-node" slot-scope="{ node }">
<span style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;" :title="node.label">
{{ node.label }}
</span>
@ -210,11 +219,10 @@
</div>
<div class="innerThree">
<vue-scroll>
<div class="dialog-tree">
<el-tree :data="electiveList" :filter-node-method="filterNode" :highlight-current="true" :check-on-click-node="false"
show-checkbox :props="defaultProps" node-key="sn" ref="electiveTree" >
<span class="custom-tree-node" slot-scope="{ node, data }">
show-checkbox :props="defaultProps" node-key="id" ref="electiveTree" @check="eleCheckedPersonFn" >
<span class="custom-tree-node" slot-scope="{ node }">
<span style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;" :title="node.label">
{{ node.label }}
</span>
@ -321,43 +329,59 @@ import {
getWorkerInfoListApi,
getTeamInfoListApi,
getDepartmentListApi,
addCourseApi,
} from '@/assets/js/api/examSystem/examSystem'
import { getComapnyStatisticsListApi, } from '@/assets/js/api/company/project'
export default {
computed: {},
data() {
return {
examSubjectList: [], //
materialFileList: [],//
coverFileList: [],//
tempPersonTree: [],
personTreeList: [],
cpsCheckedList:[],
compulsoryList: [],
electiveList: [],
defaultProps: {
isStudyDetail: true, //
examSubjectList: [], //
materialFileList: [], //
coverFileList: [], //
defaultProps: { //
children: 'children',
label: 'workerName',
},
isStudyDetail: true,
dialogImageUrl: '',
disabled: false,
checkedPersonList: [], //
compulsoryList: [], //
electiveList: [], //
addCourseForm: {}, //
examCourseRecords: [], //
studyCycle: [], //
searchKeyWord: '', //
personType: 1, //
userEnterpriseId: '1706588724057112577', // Id
projectSn: '', //Sn
departmentList: [], //
teamInfoList: [], //
activeName: 'allModule', //tab
activeName2: 'studySitu', //tab
pagInfo: {
//
laborPersonList: [], //
adminPersonList: [], //
tempPersonList: [], //
checkedPersonList: [], //
personTotal: 0, //
personCheckedTotal: 0, //
compulsoryList: [], //
compulsoryList: [], //
cpsCheckedList:[], //
cpsFormList: [], //
cpsTotal: [], //
cpsCheckedTotal: [], //
electiveList: [], //
eleCheckedList: [], //
electiveList: [], //
eleFormList: [], //
eleTotal: [], //
eleCheckedTotal: [], //
addCourseForm: {}, //
cpsEleRecords: [], //
studyCycle: [], //
searchKeyWord: '', //
personType: 0, //
userEnterpriseId: '1706588724057112577', // Id()
projectSn: '', // Sn
departmentList: [], //
teamInfoList: [], //
activeName: 'allModule', // tab
activeName2: 'studySitu', // tab
pagInfo: { //
pageNo: 1,
pageSize: 10,
total: 0,
@ -405,22 +429,44 @@ export default {
this.getExamSubjectList()
// this.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId;
this.userEnterpriseId = "1706588724057112577";//
this.personType = 1
// this.getTeamInfoList()
// this.getDepartmentList()
this.loadData()
this.loadData() //
},
mounted() {},
watch:{
// personType: function(newV,oldV){
// this.$refs.personTree.filter(this.compulsoryList); //
// }
personTreeList: function(newV,oldV){
this.$refs.personTree.filter(this.compulsoryList); //
compulsoryList: function(newV,oldV){ //
this.cpsFormList = [],
this.compulsoryList.map(item => this.cpsFormList.push({ // --便
userId: item.id,
userName: item.workerName,
userCard: item.idCard,
type: 1
}))
console.log("==========cpsFormList==========",this.cpsFormList)
this.publicFilter()
},
electiveList: function(newV,oldV){ //
this.eleFormList = [],
this.electiveList.map(item => this.eleFormList.push({ // --便
userId: item.id,
userName: item.workerName,
userCard: item.idCard,
type: 2
}))
console.log("==========eleFormList==========",this.eleFormList)
this.publicFilter()
},
personType: function(newV,oldV){ //
if(this.personType === 1){
}
this.publicFilter()
}
},
methods: {
getExamSubjectList() { //
getExamSubjectList() { //
let data = {
sn: this.projectSn,
}
@ -432,10 +478,10 @@ export default {
}
})
},
async loadData(){ //
await this.getDepartmentList()
async loadData(){ //
await this.getTeamInfoList()
await this.getWorkerInfoList()
await this.getDepartmentList()
// await this.getWorkerInfoList()
},
async getDepartmentList(){ //
let data = {
@ -463,6 +509,61 @@ export default {
}
})
},
async getLaborPersonList(){ //
let data = {
personType: 1,
projectSn: this.projectSn,
enterpriseId: this.userEnterpriseId,
pageNo: 1,
pageSize: 99999,
}
for(let i = 0;i<this.teamInfoList.length;i++){
data.teamId = this.teamInfoList[i].id
await getWorkerInfoListApi(data).then((res) => {
if (res.code == 200) {
this.teamInfoList[i].children = res.result.records
this.teamInfoList[i].workerName = res.result.records[i].teamName
}
})
}
this.laborPersonList = this.teamInfoList
console.log('==========劳务人员列表==========',this.laborPersonList)
},
async getAdminPersonList(){ //
let data = {
personType: 2,
projectSn: this.projectSn,
enterpriseId: this.userEnterpriseId,
pageNo: 1,
pageSize: 99999,
}
for(let i = 0;i<this.departmentList.length;i++){
data.departmentId = this.departmentList[i].id
await getWorkerInfoListApi(data).then((res) => {
if (res.code == 200) {
this.departmentList[i].children = res.result.records
this.departmentList[i].workerName = res.result.records[i].departmentName
}
})
}
this.adminPersonList = this.departmentList
console.log('==========管理人员列表==========',this.adminPersonList)
},
async getTempPersonList(){ //
let data = {
personType: 3,
projectSn: this.projectSn,
enterpriseId: this.userEnterpriseId,
pageNo: 1,
pageSize: 99999,
}
await getWorkerInfoListApi(data).then((res) => {
if (res.code == 200) {
this.tempPersonList = res.result.records
}
console.log('==========临时人员列表==========',this.tempPersonList)
})
},
async getWorkerInfoList(){ //
let data = {
personType: this.personType,
@ -471,7 +572,6 @@ export default {
pageNo: 1,
pageSize: 99999,
}
console.log('==========personType==========',this.personType)
if(this.personType === 1){
for(let i = 0;i<this.teamInfoList.length;i++){
data.teamId = this.teamInfoList[i].id
@ -481,11 +581,9 @@ export default {
this.teamInfoList[i].workerName = res.result.records[i].teamName
}
})
// this.personTreeList = this.teamInfoList
}
this.personTreeList = this.teamInfoList
console.log('==========劳务人员列表==========',this.personTreeList)
this.$refs.personTree.filter(this.compulsoryList);
this.laborPersonList = this.teamInfoList
console.log('==========劳务人员列表==========',this.laborPersonList)
}
if(this.personType === 2){
for(let i = 0;i<this.departmentList.length;i++){
@ -497,22 +595,19 @@ export default {
}
})
}
this.personTreeList = this.departmentList
console.log('==========管理人员列表==========',this.personTreeList)
this.$refs.personTree.filter(this.compulsoryList);
this.adminPersonList = this.departmentList
console.log('==========管理人员列表==========',this.adminPersonList)
}
if(this.personType === 3){
await getWorkerInfoListApi(data).then((res) => {
if (res.code == 200) {
this.personTreeList = res.result.records
// this.personTreeList = res.result
this.tempPersonList = res.result.records
}
console.log('==========临时人员列表==========',this.personTreeList)
this.$refs.personTree.filter(this.compulsoryList);
console.log('==========临时人员列表==========',this.tempPersonList)
})
}
},
checkedPerson(curData, curNode) { //
checkedPerson(curData, curNode) { //
console.log('==========curData==========', curData)
console.log('==========curNode==========', curNode)
this.checkedPersonList = []
@ -522,9 +617,15 @@ export default {
this.checkedPersonList.push(tempList[i])
}
}
console.log('==========checkedPersonList==========', this.checkedPersonList)
console.log('==========转存源列表已选列表checkedPersonList==========', this.checkedPersonList)
},
cpsLtoR(){ //
cpsCheckedPersonFn(curData,curNode){ //
console.log('==========cpsCurData==========', curData)
console.log('==========cpsCurNode==========', curNode)
this.cpsCheckedList = curNode.checkedNodes
console.log('==========cpsCheckedList==========', this.cpsCheckedList)
},
cpsLtoR(){ // --
if(this.checkedPersonList.length !== 0){
if(!this.compulsoryList.length > 0){
this.compulsoryList = this.checkedPersonList
@ -533,41 +634,124 @@ export default {
this.compulsoryList.push(item)
})
}
this.resetPersonChecked()
this.$refs.personTree.filter(this.compulsoryList);
console.log('==========personTreeList==========',this.personTreeList)
this.resetAllChecked()
// if(this.personType ===1) this.$refs.personTree.filter(this.compulsoryList);
// if(this.personType ===2) this.$refs.personTree2.filter(this.compulsoryList);
// if(this.personType ===3) this.$refs.personTree3.filter(this.compulsoryList);
console.log('==========接收选项后的compulsoryList==========',this.compulsoryList)
}
},
cpsRtoL(){ //
cpsRtoL(){ // --
if(this.cpsCheckedList.length !== 0){
this.cpsCheckedList.map(item => {
let findCheckedIndex = this.compulsoryList.findIndex(item2 => item2.id === item.id)
if(findCheckedIndex !== -1){
this.compulsoryList.splice(findCheckedIndex, 1)
}
})
this.resetAllChecked()
// if(this.personType ===1) this.$refs.personTree.filter(this.compulsoryList);
// if(this.personType ===2) this.$refs.personTree2.filter(this.compulsoryList);
// if(this.personType ===3) this.$refs.personTree3.filter(this.compulsoryList);
console.log('==========移除选项后的compulsoryList==========',this.compulsoryList)
}
},
filterNode(value, data) { //
console.log('==========value==========',value)
console.log('==========data==========',data)
console.log('==========filter调用啦==========')
eleCheckedPersonFn(curData,curNode){ //
console.log('==========eleCurData==========', curData)
console.log('==========eleCurNode==========', curNode)
this.eleCheckedList = curNode.checkedNodes
console.log('==========eleCheckedList==========', this.eleCheckedList)
},
eleLtoR(){ // --
if(this.checkedPersonList.length !== 0){
if(!this.electiveList.length > 0){
this.electiveList = this.checkedPersonList
}else{
this.checkedPersonList.map(item =>{
this.electiveList.push(item)
})
}
this.resetAllChecked()
// if(this.personType ===1) this.$refs.personTree.filter(this.electiveList);
// if(this.personType ===2) this.$refs.personTree2.filter(this.electiveList);
// if(this.personType ===3) this.$refs.personTree3.filter(this.electiveList);
console.log('==========接收选项后的electiveList==========',this.electiveList)
}
},
eleRtoL(){ // --
if(this.eleCheckedList.length !== 0){
this.eleCheckedList.map(item => {
let findCheckedIndex = this.electiveList.findIndex(item2 => item2.id === item.id)
if(findCheckedIndex !== -1){
this.electiveList.splice(findCheckedIndex, 1)
}
})
this.resetAllChecked()
// if(this.personType ===1) this.$refs.personTree.filter(this.electiveList);
// if(this.personType ===2) this.$refs.personTree2.filter(this.electiveList);
// if(this.personType ===3) this.$refs.personTree3.filter(this.electiveList);
console.log('==========移除选项后的electiveList==========',this.electiveList)
}
},
filterNode(value, data) { //
console.log('==========filterNode--value==========',value)
console.log('==========filterNode--data==========',data)
console.log('==========filterNode--调用啦==========')
if (!value) return true
let findIndex = value.findIndex(item => {
return item.workerName == data.workerName
})
return findIndex !== -1?false:true
},
addCourse() { //
this.getExamSubjectList()
this.getWorkerInfoList()
publicFilter(){ //
let newArr = this.compulsoryList.concat(this.electiveList)
if(this.personType ===1) this.$refs.personTree.filter(newArr);
if(this.personType ===2) this.$refs.personTree2.filter(newArr);
if(this.personType ===3) this.$refs.personTree3.filter(newArr);
},
async handleOpen() { //
this.personType = 1
await this.getExamSubjectList()
// this.getWorkerInfoList()
await this.getLaborPersonList()
await this.getAdminPersonList()
await this.getTempPersonList()
this.dialogVisible = true
},
handleClose(){ //
handleClose(){ //
this.clearObj()
this.resetPersonChecked()
this.resetAllChecked()
this.dialogVisible = false
},
clearObj(){ //
this.addCourseForm = {}
this.personTreeList = []
this.laborPersonList = [] //
this.adminPersonList = [] //
this.tempPersonList = [] //
this.compulsoryList = []
this.electiveList = []
},
resetAllChecked() { //
this.checkedPersonList = []
this.$refs.personTree.setCheckedKeys([]);
this.$refs.personTree2.setCheckedKeys([]);
this.$refs.personTree3.setCheckedKeys([]);
this.$refs.compulsoryTree.setCheckedKeys([]);
this.$refs.electiveTree.setCheckedKeys([]);
},
resetPersonChecked() { //
this.$refs.personTree.setCheckedKeys([]);
},
@ -577,20 +761,15 @@ export default {
resetElectiveChecked() { //
this.$refs.electiveTree.setCheckedKeys([]);
},
handleCpsList(val) {
console.log('compulsoryChecked', val)
},
gotoStudyDetail(val) {
gotoStudyDetail(val) { //
this.isStudyDetail = !this.isStudyDetail
this.activeName2 = 'studySitu'
this.tableList4 = this.tableList2
},
materialHandleRemove(file, materialFileList) {
materialHandleRemove(file, materialFileList) { // ----
this.materialFileList = materialFileList
},
materialHandleSuccess(res, file) {
materialHandleSuccess(res, file) { // ----
console.log('===========回调结果===========',res)
console.log('===========文件===========',file)
if (res.status == 'SUCCESS') {
@ -603,16 +782,13 @@ export default {
console.log('===========addCourseForm===========',this.addCourseForm)
}
},
materialExceedFn(files, fileList){
materialExceedFn(files, fileList){ // --
this.$message.warning('已经上传了5个文件啦');
},
coverExceedFn(files, fileList){
this.$message.warning('已经上传了1个封面啦');
},
coverHandleRemove(file, coverFileList) {
coverHandleRemove(file, coverFileList) { // ----
this.coverFileList = coverFileList
},
coverHandleSuccess(res, file) {
coverHandleSuccess(res, file) { // ----
console.log('===========回调结果===========',res)
console.log('===========文件===========',file)
if (res.status == 'SUCCESS') {
@ -625,14 +801,10 @@ export default {
console.log('===========addCourseForm===========',this.addCourseForm)
}
},
arrayLength(val) {
console.log('==================================')
// console.log(val.correctAnswers.length)
let arr = val.correctAnswers
let len = arr.reduce((acc) => acc + 1, 0)
return len
coverExceedFn(files, fileList){ // --
this.$message.warning('已经上传了1个封面啦');
},
getRecordList() {
getRecordList() { //
let data = {}
data.pageNo = this.pagInfo.pageNo
data.pageSize = this.pagInfo.pageSize
@ -657,17 +829,22 @@ export default {
this.tableList[0].courseName = 'enterSafeDrill'
}
},
//
submitBtn() {
submitBtn() { //
if(this.studyCycle.length > 0){
console.log('==========studyCycle-submitBtn==========',this.studyCycle)
this.addCourseForm.beginTime = this.studyCycle[0]
this.addCourseForm.endTime = this.studyCycle[1]
}
this.addCourseForm.examCourseRecords = this.cpsFormList.concat(this.eleFormList)
addCourseApi(this.addCourseForm).then((res)=>{
if (res.code == 200) {
this.handleClose()
this.$message.success(result.message)
}
})
console.log('==========addCourseForm-submitBtn==========',this.addCourseForm)
},
//Tab
handleClick(val) {
handleClick(val) { // Tab
this.activeName = val.name
this.pagInfo = {
pageNo: 1,
@ -677,8 +854,7 @@ export default {
this.getRecordList()
},
//Tab
handleClick2(val) {
handleClick2(val) { //Tab
this.activeName2 = val.name
if (val.name === 'studySitu') {
this.tableList4 = this.tableList2
@ -696,21 +872,11 @@ export default {
// this.getRecordList()
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
},
sizeChange(val) {
sizeChange(val) { // pageSize
this.pagInfo.pageSize = val
// this.getContractList()
},
currentChange(val) {
currentChange(val) { // pageNo
this.pagInfo.pageNo = val
// this.getContractList()
},
@ -1111,7 +1277,7 @@ export default {
bottom: 5%;
margin-top: 0;
}
.assessmentCentent {
.learningMaterial {
width: 100%;
height: 100%;
box-sizing: border-box;