sz-team/supervision-test-frontend-repo
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

!32 czh-20260612-完成部门组件改造，过滤工作组，公司无法选择。目前已经把把把脉的组件替换

Browse Source 
Merge pull request !32 from 陈志浩/feature/selectDept
This commit is contained in:
陈志浩
2026-06-12 00:33:05 +00:00
committed by Gitee
parent 0852245789 e852ebd7e3
commit b8d57da4e4
5 changed files with 362 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Form/src/jeecg/components/SzSelectDept.vue
+207
View File
@@ -0,0 +1,207 @@
<!--部门选择组件-->
<template>
<div class="JSelectDept">
<JSelectBiz @change="handleSelectChange" @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs"/>
<!-- update-begin--author:liaozhiyang---date:20240515---for：【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式 -->
<a-form-item>
<DeptSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue" :multiple="multiple" @close="handleClose"/>
</a-form-item>
<!-- update-end--author:liaozhiyang---date:20240515---for：【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式 -->
</div>
</template>
<script lang="ts">
import DeptSelectModal from './modal/SzDeptSelectModal.vue';
import JSelectBiz from './base/JSelectBiz.vue';
import { defineComponent, ref, reactive, watchEffect, watch, provide, unref, toRaw } from 'vue';
import { useModal } from '/@/components/Modal';
import { propTypes } from '/@/utils/propTypes';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { SelectValue } from 'ant-design-vue/es/select';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
name: 'SzSelectDept',
components: {
DeptSelectModal,
JSelectBiz,
},
inheritAttrs: false,
props: {
value: propTypes.oneOfType([propTypes.string, propTypes.array]),
// 是否允许多选，默认 true
multiple: propTypes.bool.def(true),
},
emits: ['options-change', 'change', 'select', 'update:value'],
setup(props, { emit, refs }) {
const emitData = ref<any[]>();
//注册model
const [regModal, { openModal }] = useModal();
//表单值
// const [state] = useRuleFormItem(props, 'value', 'change', emitData);
//下拉框选项值
const selectOptions = ref<SelectValue>([]);
//下拉框选中值
let selectValues = reactive<Recordable>({
value: [],
});
let tempSave: any = [];
// 是否正在加载回显数据
const loadingEcho = ref<boolean>(false);
//下发 selectOptions,xxxBiz组件接收
provide('selectOptions', selectOptions);
//下发 selectValues,xxxBiz组件接收
provide('selectValues', selectValues);
//下发 loadingEcho,xxxBiz组件接收
provide('loadingEcho', loadingEcho);
const tag = ref(false);
const attrs = useAttrs();
/**
* 监听组件值
*/
watchEffect(() => {
// update-begin--author:liaozhiyang---date:20240611---for：【TV360X-576】已选中了数据，再次选择打开弹窗点击取消，数据清空了（同步JSelectDept改法）
//update-begin-author:liusq---date:2024-06-03--for: [TV360X-840]用户授权，没有选择，点取消，也会回显一个选过的用户
tempSave = [];
//update-end-author:liusq---date:2024-06-03--for:[TV360X-840]用户授权，没有选择，点取消，也会回显一个选过的用户
// update-end--author:liaozhiyang---date:20240611---for：【TV360X-576】已选中了数据，再次选择打开弹窗点击取消，数据清空了（同步JSelectDept改法）
props.value && initValue();
});
//update-begin-author:liusq---date:20220609--for: 为了解决弹窗form初始化赋值问题 ---
watch(
() => props.value,
() => {
initValue();
}
);
//update-end-author:liusq---date:20220609--for: 为了解决弹窗form初始化赋值问题 ---
/**
* 监听selectValues变化
*/
// update-begin--author:liaozhiyang---date:20240527---for：【TV360X-414】部门设置了默认值，查询重置变成空了(同步JSelectUser组件改法)
// watch(selectValues, () => {
// if (selectValues) {
// state.value = selectValues.value;
// }
// });
// update-end--author:liaozhiyang---date:20240527---for：【TV360X-414】部门设置了默认值，查询重置变成空了(同步JSelectUser组件改法)
/**
* 监听selectOptions变化
*/
watch(selectOptions, () => {
if (selectOptions) {
emit('select', toRaw(unref(selectOptions)), toRaw(unref(selectValues)));
}
});
/**
* 打卡弹出框
*/
function handleOpen() {
tag.value = true;
openModal(true, {
isUpdate: false,
});
}
/**
* 将字符串值转化为数组
*/
function initValue() {
let value = props.value ? props.value : [];
if (value && typeof value === 'string') {
// state.value = value.split(',');
selectValues.value = value.split(',');
tempSave = value.split(',');
} else {
// 【VUEN-857】兼容数组（行编辑的用法问题）
selectValues.value = value;
tempSave = cloneDeep(value);
}
}
/**
* 设置下拉框的值
*/
function setValue(options, values) {
selectOptions.value = options;
//emitData.value = values.join(",");
// state.value = values;
selectValues.value = values;
send(values);
}
const getBindValue = Object.assign({}, unref(props), unref(attrs));
// update-begin--author:liaozhiyang---date:20240527---for：【TV360X-414】部门设置了默认值，查询重置变成空了(同步JSelectUser组件改法)
const handleClose = () => {
if (tempSave.length) {
selectValues.value = cloneDeep(tempSave);
} else {
send(tempSave);
}
};
const handleSelectChange = (values) => {
tempSave = cloneDeep(values);
send(tempSave);
};
const send = (values) => {
let result = typeof props.value == 'string' ? values.join(',') : values;
emit('update:value', result);
emit('change', result);
// update-begin--author:liaozhiyang---date:20240627---for：【TV360X-1648】用户编辑界面“所属部门”与“负责部门”联动出错（同步之前丢的代码）
if (!values || values.length == 0) {
emit('select', null, null);
}
// update-end--author:liaozhiyang---date:20240627---for：【TV360X-1648】用户编辑界面“所属部门”与“负责部门”联动出错（同步之前丢的代码）
};
// update-end--author:liaozhiyang---date:20240527---for：【TV360X-414】部门设置了默认值，查询重置变成空了(同步JSelectUser组件改法)
return {
// state,
attrs,
selectOptions,
selectValues,
loadingEcho,
getBindValue,
tag,
regModal,
setValue,
handleOpen,
handleClose,
handleSelectChange,
};
},
});
</script>
<style lang="less" scoped>
// update-begin--author:liaozhiyang---date:20240515---for：【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
.JSelectDept {
> .ant-form-item {
display: none;
}
}
// update-end--author:liaozhiyang---date:20240515---for：【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
.j-select-row {
@width: 82px;
.left {
width: calc(100% - @width - 8px);
}
.right {
width: @width;
}
.full {
width: 100%;
}
:deep(.ant-select-search__field) {
display: none !important;
}
}
</style>
src/components/Form/src/jeecg/components/modal/SzDeptSelectModal.vue
+145
View File
@@ -0,0 +1,145 @@
<!--部门选择框-->
<template>
<div>
<BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="500px" :maxHeight="maxHeight" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
<BasicTree
ref="treeRef"
:treeData="treeData"
:load-data="sync == false ? null : onLoadData"
v-bind="getBindValue"
@select="onSelect"
@check="onCheck"
:fieldNames="fieldNames"
:checkedKeys="checkedKeys"
:multiple="multiple"
:checkStrictly="getCheckStrictly"
/>
<!--树操作部分-->
<template #insertFooter>
<a-dropdown placement="top">
<template #overlay>
<a-menu>
<a-menu-item v-if="multiple" key="1" @click="checkALL(true)">全部勾选</a-menu-item>
<a-menu-item v-if="multiple" key="2" @click="checkALL(false)">取消全选</a-menu-item>
<a-menu-item key="3" @click="expandAll(true)">展开全部</a-menu-item>
<a-menu-item key="4" @click="expandAll(false)">折叠全部</a-menu-item>
</a-menu>
</template>
<a-button style="float: left"> 树操作 <Icon icon="ant-design:up-outlined" /> </a-button>
</a-dropdown>
</template>
</BasicModal>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { queryDepartTreeSync, queryTreeList } from '/@/api/common/api';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { treeProps } from '/@/components/Form/src/jeecg/props/props';
import { BasicTree, TreeActionType } from '/@/components/Tree';
import { useTreeBiz } from '/@/components/Form/src/jeecg/hooks/useTreeBiz';
import {propTypes} from "/@/utils/propTypes";
import { omit } from 'lodash-es';
export default defineComponent({
name: 'SzDeptSelectModal',
components: {
BasicModal,
BasicTree,
},
props: {
...treeProps,
defaultExpandLevel: {
type: Number,
default: 1,
},
//选择框标题
modalTitle: {
type: String,
default: '部门选择',
},
// update-begin--author:liaozhiyang---date:20231220---for：【QQYUN-7678】部门组件内容过多没有滚动条（给一个默认最大高）
maxHeight: {
type: Number,
default: 500,
},
// update-end--author:liaozhiyang---date:20231220---for：【QQYUN-7678】部门组件内容过多没有滚动条（给一个默认最大高）
value: propTypes.oneOfType([propTypes.string, propTypes.array])
},
emits: ['register', 'getSelectResult', 'close'],
setup(props, { emit, refs }) {
//注册弹框
const [register, { closeModal }] = useModalInner();
const attrs = useAttrs();
const treeRef = ref<Nullable<TreeActionType>>(null);
//update-begin-author:taoyan date:2022-10-28 for: 部门选择警告类型不匹配
let propValue = props.value === ''?[]:props.value;
//update-begin-author:liusq date:2023-05-26 for: [issues/538]JSelectDept组件受 dynamicDisabled 影响
let temp = Object.assign({}, unref(props), unref(attrs), {value: propValue},{disabled: false});
const getBindValue = omit(temp, 'multiple');
//update-end-author:liusq date:2023-05-26 for: [issues/538]JSelectDept组件受 dynamicDisabled 影响
//update-end-author:taoyan date:2022-10-28 for: 部门选择警告类型不匹配
const queryUrl = getQueryUrl();
const [{ visibleChange, checkedKeys, getCheckStrictly, getSelectTreeData, onCheck, onLoadData, treeData, checkALL, expandAll, onSelect }] =
useTreeBiz(treeRef, queryUrl, getBindValue, props, emit);
const searchInfo = ref(props.params);
const tree = ref([]);
//替换treeNode中key字段为treeData中对应的字段
const fieldNames = {
key: props.rowKey,
};
// {children:'children', title:'title', key:'key' }
/**
* 确定选择
*/
function handleOk() {
getSelectTreeData((options, values) => {
//回传选项和已选择的值
emit('getSelectResult', options, values);
//关闭弹窗
closeModal();
});
}
/** 获取查询数据方法 */
function getQueryUrl() {
let queryFn = props.sync ? queryDepartTreeSync : queryTreeList;
return (params) => queryFn(Object.assign({}, params, { primaryKey: props.rowKey })).then(filterDeptTree);
}
/** 过滤部门树：隐藏工作组(departType=3)，公司节点(orgCategory=1)禁止勾选 */
function filterDeptTree(nodes: any[]): any[] {
if (!Array.isArray(nodes)) return nodes;
return nodes
.filter((node) => String(node.departType) !== '3')
.map((node) => ({
...node,
disableCheckbox: String(node.orgCategory) === '1' ? true : !!node.disableCheckbox,
children: node.children ? filterDeptTree(node.children) : node.children,
}));
}
return {
tree,
handleOk,
searchInfo,
treeRef,
treeData,
onCheck,
onSelect,
checkALL,
expandAll,
fieldNames,
checkedKeys,
register,
getBindValue,
getCheckStrictly,
visibleChange,
onLoadData,
};
},
});
</script>
src/views/bg/bqtakepulse/BgTakepulseList.vue
+3 -3
View File
@@ -26,13 +26,13 @@
<a-col :lg="6">
<a-form-item name="responDeptid">
<template #label><span title="牵头部门">牵头部门</span></template>
<j-select-dept placeholder="请选择牵头部门" v-model:value="queryParam.responDeptid" checkStrictly allow-clear />
<sz-select-dept placeholder="请选择牵头部门" v-model:value="queryParam.responDeptid" checkStrictly allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="assistDeptid">
<template #label><span title="协办部门">协办部门</span></template>
<j-select-dept placeholder="请选择协办部门" v-model:value="queryParam.assistDeptid" checkStrictly allow-clear />
<sz-select-dept placeholder="请选择协办部门" v-model:value="queryParam.assistDeptid" checkStrictly allow-clear />
</a-form-item>
</a-col>
</template>
@@ -132,7 +132,7 @@
import {columns, superQuerySchema} from './BgTakepulse.data';
import {list, deleteOne, getImportUrl, getExportUrl, saveOrUpdate, bgTakepulseFeedbackList} from './BgTakepulse.api';
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
import Icon from '/@/components/Icon/index';
import { startProcessSchedules } from '/@/api/common/api';
import { dateUtil } from '/@/utils/dateUtil';
src/views/bg/bqtakepulse/components/BgTakepulseBPMForm.vue
+3 -3
View File
@@ -66,7 +66,7 @@
</a-col>
<a-col :span="12">
<a-form-item label="牵头部门" name="responDeptid">
<j-select-dept
<sz-select-dept
v-model:value="mainForm.responDeptid"
:disabled="mainDisabled"
:multiple="true"
@@ -79,7 +79,7 @@
</a-col>
<a-col :span="12">
<a-form-item label="协办部门" name="assistDeptid">
<j-select-dept
<sz-select-dept
v-model:value="mainForm.assistDeptid"
:disabled="mainDisabled"
:multiple="true"
@@ -237,7 +237,7 @@
import { defHttp } from '/@/utils/http/axios';
import { getUserList, queryDepartTreeSync } from '/@/api/common/api';
import { useMessage } from '/@/hooks/web/useMessage';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
src/views/bg/bqtakepulse/components/BgTakepulseForm.vue
+4 -4
View File
@@ -51,12 +51,12 @@
</a-col>
<a-col :span="12">
<a-form-item label="牵头部门" v-bind="validateInfos.responDeptid" id="BgTakepulseForm-responDeptid" name="responDeptid">
<j-select-dept v-model:value="formData.responDeptid" :multiple="true" checkStrictly allow-clear />
<sz-select-dept v-model:value="formData.responDeptid" :multiple="true" checkStrictly allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="协办部门" v-bind="validateInfos.assistDeptid" id="BgTakepulseForm-assistDeptid" name="assistDeptid">
<j-select-dept v-model:value="formData.assistDeptid" :multiple="true" checkStrictly allow-clear />
<sz-select-dept v-model:value="formData.assistDeptid" :multiple="true" checkStrictly allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
@@ -156,7 +156,7 @@
import { queryDataById, saveOrUpdate } from '../BgTakepulse.api';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import { Form } from 'ant-design-vue';
@@ -167,7 +167,7 @@
components:{
JDictSelectTag,
JSwitch,
JSelectDept,
SzSelectDept,
JSelectUser,
JFormContainer,
},