教师、学员编辑时,所属单位改成从部门树中选择

This commit is contained in:
buliping committed 2026-09-28 08:45:56 +08:00
1 parent 8707aa8509
commit 8ad3fbbc6e
2 files changed
+137 -5

No files matched your search

+71 -2
View File
@@ -71,6 +71,7 @@
</template>
</el-table-column>
<el-table-column label="所属单位" align="center" prop="orgName" min-width="140" show-overflow-tooltip />
<el-table-column label="联系电话" align="center" prop="sPhone" width="130" />
<el-table-column label="邮箱" align="center" prop="sEmail" min-width="160" show-overflow-tooltip />
<el-table-column label="身份证号" align="center" prop="idCardMasked" min-width="190" />
@@ -165,7 +166,8 @@
/>
</el-form-item>
<el-form-item label="所属单位" prop="orgName">
<el-input v-model="createForm.orgName" placeholder="请输入所属单位/部门" maxlength="100" />
<!-- <el-input v-model="createForm.orgName" placeholder="请输入所属单位/部门" maxlength="100" />-->
<treeselect v-model="createForm.orgName" :options="deptOptions" :normalizer="normalizer" :show-count="true" placeholder="请选择归属部门" />
</el-form-item>
<el-form-item label="联系电话" prop="sPhone">
<el-input v-model="createForm.sPhone" placeholder="请输入联系电话" maxlength="20" />
@@ -276,9 +278,13 @@
<script>
import { addStudent, getStudent, listStudent, delStudent, getStudentBindableUsers, bindStudentUser, unbindStudentUser } from '@/api/train/student'
import {deptTreeSelect} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listDept} from "@/api/system/dept";
export default {
name: 'Student',
components: { Treeselect },
data() {
const validateIdCard = (rule, value, callback) => {
if (!value || value.trim() === '') {
@@ -316,6 +322,9 @@ export default {
sPhone: null,
status: null
},
// 部门树选项
deptOptions: undefined,
deptArr: {},
createForm: {},
rules: {
sName: [
@@ -333,7 +342,11 @@ export default {
},
created() {
this.resetCreate()
this.mapDept()
this.getList()
this.getDeptTree()
},
methods: {
getList() {
@@ -341,10 +354,53 @@ export default {
listStudent(this.queryParams).then(response => {
this.studentList = response.rows
this.total = response.total
this.studentList.forEach(stud => {
let studOrgName = this.formatOrgName(stud.orgName);
//console.log(stud.orgName +"--"+ studOrgName);
this.$set(stud, "orgName", studOrgName);
});
}).finally(() => {
this.loading = false
})
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.createForm.orgName = data.id;
this.handleQuery();
},
// 数据格式化函数,把后端返回部门树形转成treeselect需要格式
normalizer(node) {
return {
id: node.id,
label: node.label,
children: node.children
}
},
mapDept() {
listDept().then(response => {
let deptList = response.data || [];
let deptArr = {};
deptList.forEach(dept => {
if (dept && dept.deptId !== undefined && dept.deptId !== null) {
deptArr[dept.deptId] = dept.deptName;
}
});
this.deptArr = deptArr;
});
},
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
@@ -391,6 +447,8 @@ export default {
handleDetail(row) {
getStudent(row.sId).then(response => {
this.detail = response.data || {}
//console.log(this.deptArr);
this.$set(this.detail, "orgName", this.formatOrgName(this.detail.orgName));
this.detailOpen = true
})
},
@@ -467,6 +525,17 @@ export default {
}
return labels[sourceType] || '-'
},
// 所属单位:orgName 为数字或 deptArr 中存在映射时取 deptArr 对应值,否则显示 orgName 本身
formatOrgName(orgName) {
if (orgName === null || orgName === undefined || orgName === '') return '-'
const map = this.deptArr || {}
const mapped = map[orgName]
const isNumber = /^\d+$/.test(String(orgName))
if (isNumber || mapped !== undefined) {
return (mapped !== undefined && mapped !== null && mapped !== '') ? mapped : orgName
}
return orgName
},
formatGender(gender) {
if (gender === '0' || gender === 0 || gender === '男') return '男'
if (gender === '1' || gender === 1 || gender === '女') return '女'
+66 -3
View File
@@ -175,7 +175,8 @@
/>
</el-form-item>
<el-form-item label="所属单位" prop="orgName">
<el-input v-model="form.orgName" placeholder="请输入所属单位/部门" maxlength="100" />
<!-- <el-input v-model="form.orgName" placeholder="请输入所属单位/部门" maxlength="100" />-->
<treeselect v-model="form.orgName" :options="deptOptions" :normalizer="normalizer" :show-count="true" placeholder="请选择所属单位" />
</el-form-item>
<el-form-item label="职务/职称" prop="jobTitle">
<el-input v-model="form.jobTitle" placeholder="请输入职务/职称" maxlength="50" />
@@ -266,9 +267,13 @@
<script>
import { listTeacher, getTeacher, delTeacher, addTeacher, updateTeacher, getTeacherBindableUsers, bindTeacherUser, unbindTeacherUser } from '@/api/train/teacher'
import {deptTreeSelect} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listDept} from "@/api/system/dept";
export default {
name: 'Teacher',
components: { Treeselect },
data() {
return {
// 遮罩层
@@ -305,7 +310,9 @@ export default {
tPhone: null,
status: null
},
// 表单参数
// 部门树选项
deptOptions: undefined,
deptArr: {},
form: {},
// 表单校验
rules: {
@@ -323,7 +330,9 @@ export default {
}
},
created() {
this.mapDept()
this.getList()
this.getDeptTree()
},
methods: {
/** 查询教师信息列表 */
@@ -332,9 +341,52 @@ export default {
listTeacher(this.queryParams).then(response => {
this.teacherList = response.rows
this.total = response.total
this.teacherList.forEach(stud => {
let studOrgName = this.formatOrgName(stud.orgName);
//console.log(stud.orgName +"--"+ studOrgName);
this.$set(stud, "orgName", studOrgName);
});
}).finally(() => {
this.loading = false
})
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.createForm.orgName = data.id;
this.handleQuery();
},
// 数据格式化函数,把后端返回部门树形转成treeselect需要格式
normalizer(node) {
return {
id: node.id,
label: node.label,
children: node.children
}
},
mapDept() {
listDept().then(response => {
let deptList = response.data || [];
let deptArr = {};
deptList.forEach(dept => {
if (dept && dept.deptId !== undefined && dept.deptId !== null) {
deptArr[dept.deptId] = dept.deptName;
}
});
this.deptArr = deptArr;
});
},
// 取消按钮
cancel() {
this.open = false
@@ -472,6 +524,17 @@ export default {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
// 所属单位:orgName 为数字或 deptArr 中存在映射时取 deptArr 对应值,否则显示 orgName 本身
formatOrgName(orgName) {
if (orgName === null || orgName === undefined || orgName === '') return '-'
const map = this.deptArr || {}
const mapped = map[orgName]
const isNumber = /^\d+$/.test(String(orgName))
if (isNumber || mapped !== undefined) {
return (mapped !== undefined && mapped !== null && mapped !== '') ? mapped : orgName
}
return orgName
},
formatGender(gender) {
if (gender === '0' || gender === 0 || gender === '男') return '男'
if (gender === '1' || gender === 1 || gender === '女') return '女'