hookehuyr

fix 组织结构组件-组织结构-新增单选模式

<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-03 20:35:36
* @LastEditTime: 2024-08-05 14:40:59
* @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
* @Description: 树形组件
-->
......@@ -89,6 +89,8 @@
:showFooter="false"
:cascade="false"
:defaultExpandAll="false"
@check="deptTreeCheck"
@uncheck="deptTreeUncheck"
@checked-change="deptTreeCheckedChange"
style=" height: 60vh; overflow: scroll;"
>
......@@ -262,7 +264,7 @@ import '@wsfe/vue-tree/style.css';
// import dept_list from './flow_dept_list.json'
import $ from 'jquery';
import _ from 'lodash';
import { showDialog } from 'vant';
import { showDialog, showToast } from 'vant';
// 获取父组件传值
const props = inject('props');
......@@ -275,6 +277,21 @@ const $router = useRouter();
let role_list = [];
let dept_list = [];
let check_type = ref(''); // 单选/多选模式
const validateGroupObject = (obj) => {
let flag = false;
// 获取有值的数组属性
const nonEmptyArrays = [...obj.dept, ...obj.user, ...obj.role];
// 确保只有一个数组属性有值
if (nonEmptyArrays.length > 1) {
flag = true;
}
return flag
}
// 处理Tab显示问题
const tree_tabs = ['dept', 'role', 'user'];
const tabList = computed(() => {
......@@ -315,6 +332,8 @@ onMounted(async () => {
// 获取已选中数据
// 如果有默认值处理
props.value = props.component_props.default;
// TEST
check_type.value = 'single'; // 默认单选
if (props.value) {
props.value.forEach(item => {
if (item.type === 'dept') {
......@@ -549,7 +568,35 @@ const getDeptTreeData = () => { // 获取组织结构数据
deptTreeRef.value.setExpand(35697, true);
}
const deptTreeCheck = (node) => { // 组织结构单选勾中
if (check_type.value === 'single' && treeCheckedCount.value) {
showToast('单选模式下,只能勾选一个')
// 移除树结构选中的项
deptTreeRef.value?.setChecked(node.id, false);
}
}
const deptTreeUncheck = (node) => { // 组织结构单选取消
if (check_type.value === 'single') {
// 移除选中框显示
const index = checkedGroup.value['dept'].findIndex(item => item.id === node.id);
checkedGroup.value['dept'].splice(index, 1);
}
}
const treeCheckedCount = computed(() => { // 选中框的数量是否大于一
let dept_count = checkedGroup.value.dept.length;
let user_count = checkedGroup.value.user.length;
let role_count = checkedGroup.value.role.length;
return dept_count + user_count + role_count >= 1;
});
const deptTreeCheckedChange = (arr) => { // 组织结构勾选回调
if (check_type.value === 'single' && treeCheckedCount.value) {
return false
}
checkedGroup.value.dept = arr.map((item) => {
return {
id: item.id,
......