From d50c90afd1ebe4f71429616d2c5dd1ccbeab4acf Mon Sep 17 00:00:00 2001 From: gssong <1742057357@qq.com> Date: 星期四, 07 三月 2024 21:18:08 +0800 Subject: [PATCH] fix 修复设计器无法选人问题,修复抄送打开弹出选中全部人员问题 --- src/components/Process/submitVerify.vue | 4 src/components/RoleSelect/index.vue | 103 +++++++++++++++++++------ src/components/UserSelect/index.vue | 106 ++++++++++++++++++++------ 3 files changed, 160 insertions(+), 53 deletions(-) diff --git a/src/components/Process/submitVerify.vue b/src/components/Process/submitVerify.vue index b52854f..da30ed7 100644 --- a/src/components/Process/submitVerify.vue +++ b/src/components/Process/submitVerify.vue @@ -59,7 +59,7 @@ //鎶勯�佷汉 const selectCopyUserList = ref<UserVO[]>([]); //鎶勯�佷汉id -const selectCopyUserIds = ref<string>(''); +const selectCopyUserIds = ref<string>(undefined); const dialog = reactive<DialogOption>({ @@ -76,7 +76,7 @@ }); //鎵撳紑寮圭獥 const openDialog = (id?: string) => { - selectCopyUserIds.value = '' + selectCopyUserIds.value = undefined selectCopyUserList.value = [] form.value.fileId = undefined taskId.value = id; diff --git a/src/components/RoleSelect/index.vue b/src/components/RoleSelect/index.vue index ec5bcc7..e190b20 100644 --- a/src/components/RoleSelect/index.vue +++ b/src/components/RoleSelect/index.vue @@ -36,7 +36,7 @@ :data="roleList" :loading="loading" :row-config="{ keyField: 'roleId' }" - :checkbox-config="{ reserve: true, checkRowKeys: roleIds }" + :checkbox-config="{ reserve: true, checkRowKeys: defaultSelectRoleIds }" highlight-current-row @checkbox-all="handleCheckboxAll" @checkbox-change="handleCheckboxChange" @@ -63,42 +63,41 @@ v-model:total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" - @pagination="getList" + @pagination="pageList" /> </el-card> <template #footer> - <el-button @click="roleDialog.closeDialog">鍙栨秷</el-button> + <el-button @click="close">鍙栨秷</el-button> <el-button type="primary" @click="confirm">纭畾</el-button> </template> </el-dialog> </div> </template> -<script setup name="Role" lang="ts"> -import { listRole } from '@/api/system/role'; +<script setup lang="ts"> import { RoleVO, RoleQuery } from '@/api/system/role/types'; import { VxeTableInstance } from 'vxe-table'; import useDialog from '@/hooks/useDialog'; +import api from '@/api/system/role'; interface PropType { - modelValue?: RoleVO[]; + modelValue?: RoleVO[] | RoleVO | undefined; + multiple?: boolean; + data?: string | number | (string | number)[]; } const prop = withDefaults(defineProps<PropType>(), { - modelValue: () => [] + multiple: true, + modelValue: undefined, + data: undefined }); -const emit = defineEmits(['update:modelValue']); +const emit = defineEmits(['update:modelValue', 'confirmCallBack']); const router = useRouter(); const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable')); -const roleIds = computed(() => prop.modelValue.map((item) => item.roleId as string)); - const roleList = ref<RoleVO[]>(); const loading = ref(true); const showSearch = ref(true); -const ids = ref<Array<string | number>>([]); -const single = ref(true); -const multiple = ref(true); const total = ref(0); const dateRange = ref<[DateModelType, DateModelType]>(['', '']); const selectRoleList = ref<RoleVO[]>([]); @@ -117,22 +116,46 @@ roleKey: '', status: '' }); + +const defaultSelectRoleIds = computed(() => computedIds(prop.data)); + const confirm = () => { - emit('update:modelValue', [...selectRoleList.value]); + emit('update:modelValue', selectRoleList.value); + emit('confirmCallBack', selectRoleList.value); roleDialog.closeDialog(); }; + +const computedIds = (data) => { + if (data instanceof Array) { + return [...data]; + } else if (typeof data === 'string') { + return data.split(','); + } else if (typeof data === 'number') { + return [data]; + } else { + console.warn('<RoleSelect> The data type of data should be array or string or number, but I received other'); + return []; + } +}; + /** * 鏌ヨ瑙掕壊鍒楄〃 */ const getList = () => { loading.value = true; - listRole(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => { + api.listRole(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => { roleList.value = res.rows; total.value = res.total; loading.value = false; }); }; - +const pageList = async () => { + await getList(); + const roles = roleList.value.filter((item) => { + return selectRoleList.value.some((role) => role.roleId === item.roleId); + }); + await tableRef.value.setCheckboxRow(roles, true); +}; /** * 鎼滅储鎸夐挳鎿嶄綔 */ @@ -149,6 +172,10 @@ }; const handleCheckboxChange = (checked) => { + if (!prop.multiple && checked.checked) { + tableRef.value.setCheckboxRow(selectRoleList.value, false); + selectRoleList.value = []; + } const row = checked.row; if (checked.checked) { selectRoleList.value.push(row); @@ -181,19 +208,43 @@ tableRef.value?.setCheckboxRow(rows, false); selectRoleList.value.splice(index, 1); }; +/** + * 鍒濆鍖栭�変腑鏁版嵁 + */ +const initSelectRole = async () => { + if (defaultSelectRoleIds.value.length > 0) { + const { data } = await api.optionSelect(defaultSelectRoleIds.value); + selectRoleList.value = data; + const users = roleList.value.filter((item) => { + return defaultSelectRoleIds.value.includes(String(item.roleId)); + }); + await nextTick(() => { + tableRef.value.setCheckboxRow(users, true); + }); + } +}; +const close = () => { + roleDialog.closeDialog(); +}; watch( - () => prop.modelValue, - (newVal, oldValue) => { - Object.assign(selectRoleList.value, newVal); - }, - { deep: true } + () => roleDialog.visible.value, + (newValue: boolean) => { + if (newValue) { + initSelectRole(); + } else { + tableRef.value.clearCheckboxReserve(); + tableRef.value.clearCheckboxRow(); + resetQuery(); + selectRoleList.value = []; + } + } ); +onMounted(() => { + getList(); // 鍒濆鍖栧垪琛ㄦ暟鎹� +}); + defineExpose({ open: roleDialog.openDialog, close: roleDialog.closeDialog }); - -onMounted(() => { - getList(); -}); -</script> \ No newline at end of file +</script> diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue index f2ef014..7f8b185 100644 --- a/src/components/UserSelect/index.vue +++ b/src/components/UserSelect/index.vue @@ -47,7 +47,7 @@ </transition> <el-card shadow="hover"> - <template #header> + <template v-if="prop.multiple" #header> <el-tag v-for="user in selectUserList" :key="user.userId" closable style="margin: 2px" @close="handleCloseTag(user)"> {{ user.userName }} </el-tag> @@ -60,9 +60,8 @@ show-overflow :data="userList" :loading="loading" - :row-config="{ keyField: 'userId' }" - :checkbox-config="{ reserve: true, checkRowKeys: userIds }" - highlight-current-row + :row-config="{ keyField: 'userId', isHover: true }" + :checkbox-config="{ reserve: true, trigger: 'row', highlight: true, showHeader: prop.multiple }" @checkbox-all="handleCheckboxAll" @checkbox-change="handleCheckboxChange" > @@ -90,14 +89,14 @@ v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" - @pagination="getList" + @pagination="pageList" /> </el-card> </el-col> </el-row> <template #footer> - <el-button @click="userDialog.closeDialog">鍙栨秷</el-button> + <el-button @click="close">鍙栨秷</el-button> <el-button type="primary" @click="confirm">纭畾</el-button> </template> </el-dialog> @@ -112,17 +111,19 @@ import useDialog from '@/hooks/useDialog'; interface PropType { - modelValue?: UserVO[]; + modelValue?: UserVO[] | UserVO | undefined; + multiple?: boolean; + data?: string | number | (string | number)[]; } const prop = withDefaults(defineProps<PropType>(), { - modelValue: () => [] + multiple: true, + modelValue: undefined, + data: undefined }); -const emit = defineEmits(['update:modelValue']); +const emit = defineEmits(['update:modelValue', 'confirmCallBack']); const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable')); - -const userIds = computed(() => prop.modelValue.map((item) => item.userId as string)); const userList = ref<UserVO[]>(); const loading = ref(true); @@ -151,11 +152,8 @@ roleId: '' }); -/** 閫氳繃鏉′欢杩囨护鑺傜偣 */ -const filterNode = (value: string, data: any) => { - if (!value) return true; - return data.label.indexOf(value) !== -1; -}; +const defaultSelectUserIds = computed(() => computedIds(prop.data)); + /** 鏍规嵁鍚嶇О绛涢�夐儴闂ㄦ爲 */ watchEffect( () => { @@ -167,8 +165,28 @@ ); const confirm = () => { - emit('update:modelValue', [...selectUserList.value]); + emit('update:modelValue', selectUserList.value); + emit('confirmCallBack', selectUserList.value); userDialog.closeDialog(); +}; + +const computedIds = (data) => { + if (data instanceof Array) { + return [...data]; + } else if (typeof data === 'string') { + return data.split(','); + } else if (typeof data === 'number') { + return [data]; + } else { + console.warn('<UserSelect> The data type of data should be array or string or number, but I received other'); + return []; + } +}; + +/** 閫氳繃鏉′欢杩囨护鑺傜偣 */ +const filterNode = (value: string, data: any) => { + if (!value) return true; + return data.label.indexOf(value) !== -1; }; /** 鏌ヨ閮ㄩ棬涓嬫媺鏍戠粨鏋� */ @@ -184,6 +202,14 @@ loading.value = false; userList.value = res.rows; total.value = res.total; +}; + +const pageList = async () => { + await getList(); + const users = userList.value.filter((item) => { + return selectUserList.value.some((user) => user.userId === item.userId); + }); + await tableRef.value.setCheckboxRow(users, true); }; /** 鑺傜偣鍗曞嚮浜嬩欢 */ @@ -208,6 +234,10 @@ }; const handleCheckboxChange = (checked) => { + if (!prop.multiple && checked.checked) { + tableRef.value.setCheckboxRow(selectUserList.value, false); + selectUserList.value = []; + } const row = checked.row; if (checked.checked) { selectUserList.value.push(row); @@ -234,22 +264,48 @@ const handleCloseTag = (user: UserVO) => { const userId = user.userId; + // 浣跨敤split鍒犻櫎鐢ㄦ埛 const index = selectUserList.value.findIndex((item) => item.userId === userId); const rows = selectUserList.value[index]; tableRef.value?.setCheckboxRow(rows, false); selectUserList.value.splice(index, 1); }; + +const initSelectUser = async () => { + if (defaultSelectUserIds.value.length > 0) { + const { data } = await api.optionSelect(defaultSelectUserIds.value); + selectUserList.value = data; + const users = userList.value.filter((item) => { + return defaultSelectUserIds.value.includes(String(item.userId)); + }); + await nextTick(() => { + tableRef.value.setCheckboxRow(users, true); + }); + } +}; +const close = () => { + userDialog.closeDialog(); +}; + watch( - () => prop.modelValue, - (newVal, oldValue) => { - Object.assign(selectUserList.value, newVal); - }, - { deep: true } + () => userDialog.visible.value, + (newValue: boolean) => { + console.log(selectUserList.value) + + if (newValue) { + initSelectUser(); + } else { + tableRef.value.clearCheckboxReserve(); + tableRef.value.clearCheckboxRow(); + resetQuery(); + selectUserList.value = []; + } + } ); onMounted(() => { - getTreeSelect(); - getList(); + getTreeSelect(); // 鍒濆鍖栭儴闂ㄦ暟鎹� + getList(); // 鍒濆鍖栧垪琛ㄦ暟鎹� }); defineExpose({ @@ -258,4 +314,4 @@ }); </script> -<style lang="scss" scoped></style> \ No newline at end of file +<style lang="scss" scoped></style> -- Gitblit v1.9.3