|
@@ -21,7 +21,7 @@
|
|
|
<script setup>
|
|
|
import { ref } from "vue";
|
|
|
import { useCrud } from "@/hooks/userCrud";
|
|
|
-import { getUserList } from "@/api/user/index";
|
|
|
+import {getUserList, getDepartmentTree} from "@/api/user/index";
|
|
|
|
|
|
// 传入一个url,后面不带/
|
|
|
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
|
|
@@ -35,7 +35,8 @@ const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等
|
|
|
|
|
|
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
|
|
|
|
|
|
-const usersList = ref([]); //人员列表
|
|
|
+const usersTree = ref([]); //树形结构数据
|
|
|
+
|
|
|
// 设置表格列或者其他自定义的option
|
|
|
option.value = Object.assign(option.value, {
|
|
|
editBtn: true, //是否显示编辑按钮
|
|
@@ -97,28 +98,40 @@ option.value = Object.assign(option.value, {
|
|
|
{
|
|
|
label: "人员",
|
|
|
prop: "receivers", // 这里是接收者的字段
|
|
|
- type: "select", //类型为单选框
|
|
|
+ type: "tree", // 改为tree类型
|
|
|
multiple: true, //是否多选
|
|
|
filterable: true, //是否可搜索
|
|
|
clearable: true, //是否可清空
|
|
|
- dicData: usersList, //人员列表
|
|
|
+ dicData: usersTree, //树形数据
|
|
|
props: {
|
|
|
- label: "nickName", //标签字段
|
|
|
- value: "id", //值字段
|
|
|
+ label: 'label', // 显示的名称字段
|
|
|
+ value: 'value', // 选中的值字段
|
|
|
+ children: 'children' // 子节点字段
|
|
|
},
|
|
|
+ nodeKey: 'value', // 每个节点的唯一标识
|
|
|
+ checkStrictly: false, // 是否严格遵循父子不互相关联
|
|
|
+ defaultExpandAll: true, // 默认展开所有节点
|
|
|
valueformat: "array", //确保值是数组格式
|
|
|
overHidden: true,
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
|
|
|
-const getUsersList = async () => {
|
|
|
- const res = await getUserList();
|
|
|
- usersList.value = res.data;
|
|
|
+// 获取部门树形结构数据
|
|
|
+const getDepartmentTreeData = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getDepartmentTree();
|
|
|
+ // 假设返回的数据结构是树形的,包含部门和人员
|
|
|
+ // 例如: [{id: 1, name: '部门1', children: [{id: 101, name: '人员1'}, ...]}, ...]
|
|
|
+ usersTree.value = res.data;
|
|
|
+ console.log(res.data, "部门树形结构数据")
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取部门树失败:", error);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
dataList();
|
|
|
- getUsersList();
|
|
|
+ getDepartmentTreeData();
|
|
|
});
|
|
|
</script>
|