geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'gaoang2024-7' into 'dev'

Browse Source 
合并需求

See merge request itc-framework/ma/2024/front!7
This commit is contained in:
gao yq
2024-07-29 00:23:42 +00:00
parent 62a400adab 64f223971d
commit 9e04ccc964
10 changed files with 587 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Form/src/components/SelectDepartmentTreeV2.vue
View File

@ -23,19 +23,23 @@ const props = defineProps({
type: Boolean,
default: true
},
value: {
type: String,
default: ''
selectedNodes: {
type: Array,
default: () => []
},
parentNode: {
type: String,
default: ''
},
isArray: {
type: Boolean,
default: false
},
});
const emit = defineEmits(['change-value', 'query-completed']);
const expandedKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);
const checkedKeys = ref<string[]>([]);
const emit = defineEmits(['change-value', 'query-completed', 'select']);
const expandedKeys = ref([]);
const selectedKeys = ref([]);
const checkedKeys = ref([]);
const checkable = ref(false)
const treeData = ref([])
const params = ref({
@ -45,7 +49,6 @@ const params = ref({
parentNode: false
})
onMounted(() => {
selectedKeys.value = [props.value]
getList()
})
const loadData = (node) => {
@ -88,7 +91,7 @@ function resetTreeList(list) {
return result
}
function selectData(selectedKeys, e) {
emit('change-value', e.selectedNodes);
emit('change-value', e.node, e.selected);
}
watch(expandedKeys, () => {
console.log('expandedKeys', expandedKeys);
@ -99,4 +102,14 @@ watch(selectedKeys, () => {
watch(checkedKeys, () => {
console.log('checkedKeys', checkedKeys);
});
watch(
() => props.selectedNodes,
() => {
selectedKeys.value = props.selectedNodes.map(item => item.id)
},
{
immediate: true,
deep: true
}
);
</script>

57
src/components/Form/src/components/SelectDepartmentV2.vue
View File

@ -12,12 +12,12 @@
<div class="choose-dep-box">
<div class="choose-dep">
<a-spin :spinning="loading" class="loading-box" />
<SelectDepartmentTreeV2 v-if="visible" :parentNode="parentNode" :value="props.value" @changeValue="departChange" @queryCompleted="queryCompleted"></SelectDepartmentTreeV2>
<SelectDepartmentTreeV2 v-if="visible" :multiple="multiple" :isArray="isArray" :parentNode="parentNode" :selectedNodes="selectedNodes" @changeValue="departChange" @queryCompleted="queryCompleted"></SelectDepartmentTreeV2>
</div>
<div class="choosen-dep">
<div v-for="item in selectedNodes" class="choosen-item">
<div class="choosen-label">{{ item.name }}</div>
<close-outlined class="close" @click="deleteItem" />
<close-outlined class="close" @click="deleteItem(item)" />
</div>
</div>
</div>
@ -41,7 +41,6 @@
const valChanged = ref(false);
const props = defineProps({
value: String,
prefix: String,
suffix: String,
placeholder: String,
@ -49,13 +48,20 @@
disabled: Boolean,
parentNode: String,
size: String,
value: {
type: String || Array,
},
isArray: {
type: Boolean,
default: false
},
bordered: {
type: Boolean,
default: true
},
multiple: {
type: Boolean,
default: true
default: false
},
componentProps: {
type: Object,
@ -69,16 +75,18 @@
// Embedded in the form, just use the hook binding to perform form verification
onMounted(() => {});
onMounted(() => {
});
watch(
() => props.value,
(val) => {
if (val) {
let ids = props.isArray ? val?.join(',') : val
if (ids) {
if (props.sepTextField && !valChanged.value) {
departNames.value = props.row[camelCaseString(props.sepTextField)];
} else {
getDefaultList(val);
getDefaultList(ids);
}
}
},
@ -87,9 +95,9 @@
}
);
async function getDefaultList(id) {
async function getDefaultList(ids) {
let param = {
id: id,
ids: ids,
code: '',
name: '',
parentNode: false
@ -127,8 +135,21 @@
loading.value = false;
}
function departChange(nodes) {
selectedNodes.value = nodes;
function departChange(node, isSelect) {
if (props.multiple) {
if (isSelect) {
selectedNodes.value.push(node.dataRef)
} else {
selectedNodes.value = selectedNodes.value.filter(item => item.id !== node.dataRef.id)
}
} else {
if (isSelect) {
selectedNodes.value = [node.dataRef]
} else {
selectedNodes.value = []
}
}
valChanged.value = true;
}
@ -136,7 +157,11 @@
visible.value = true;
loading.value = true;
if (props.value) {
getDefaultList(props.value);
if(props.isArray && !props.value.length) {
return
}
let ids = props.isArray ? props.value.join(',') : props.value
getDefaultList(ids);
}
}
@ -145,13 +170,15 @@
let idList = selectedNodes.value.map((item) => item.id);
const names = nameList.join(',');
const ids = idList.join(',');
emits('update:value', ids);
emits('update:value', props.isArray ? idList : ids);
departNames.value = names;
updateSepTextField(names);
emits('change', props.isArray ? idList : ids);
}
function deleteItem() {
selectedNodes.value = [];
function deleteItem(item) {
selectedNodes.value = selectedNodes.value.filter(m => item.id !== m.id)
}
function submit() {

13
src/components/Form/src/components/SelectUserV2.vue
View File

@ -1,6 +1,7 @@
<template>
<div :class="{ disabled }" class="form-select-user" @click="show">
<a-input v-model:value="userNames" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
<a-button type="primary" v-if="buttonShow">{{ t('添加人员') }}</a-button>
<a-input v-model:value="userNames" v-if="!buttonShow" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
<template v-if="prefix" #prefix>
<Icon :icon="prefix" />
</template>
@ -69,8 +70,8 @@
import { useI18n } from '/@/hooks/web/useI18n';
import { ModalPanel } from '/@/components/ModalPanel/index';
import { getUserPageListNew, getUserMulti } from '/@/api/system/user';
import SelectDepartmentTreeV2 from './SelectDepartmentTreeV2.vue';
import SelectUserListV2 from './SelectUserListV2.vue';
import SelectDepartmentTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue';
import SelectUserListV2 from '/@/components/Form/src/components/SelectUserListV2.vue';
import { camelCaseString } from '/@/utils/stringUtil';
const emits = defineEmits(['update:value', 'selectedId', 'change']);
@ -99,7 +100,11 @@
default: true
},
row: Object, // 行数据，在表格里用的到
sepTextField: String // 将文本表示存储在独立字段
sepTextField: String, // 将文本表示存储在独立字段
buttonShow: {
type: Boolean,
default: false
}
});
let timeoutId = null;
let resetMemberList = [];

6
src/store/modules/user.ts
View File

@ -136,14 +136,13 @@ export const useUserStore = defineStore({
const { token } = data;
// save token
this.setToken(token);
router.replace(params.targetURL || params.redirect || userInfo?.homePath || PageEnum.BASE_HOME)
return await this.afterLoginAction(false);
return await this.afterLoginAction(false, params.targetURL || params.redirect);
} catch (error) {
return Promise.reject(error);
}
},
async afterLoginAction(goHome?: boolean): Promise<GetUserInfoModel | null> {
async afterLoginAction(goHome?: boolean, redirect?): Promise<GetUserInfoModel | null> {
if (!this.getToken) return null;
// get user info
@ -166,6 +165,7 @@ export const useUserStore = defineStore({
});
router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
}
redirect && (await router.replace(decodeURIComponent(redirect)));
goHome && (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME));
}

2
src/views/system/department/components/DeptDrawer.vue
View File

@ -51,7 +51,7 @@
title: '基础信息',
field: 'parentId',
label: t('上级组织'),
component: 'TreeSelect',
component: 'Dept',
componentProps: {
placeholder: '请选择上级组织',
fieldNames: {

3
src/views/system/user/components/UserModal.vue
View File

@ -136,7 +136,7 @@
{
field: 'departmentIds',
label: t('所属机构'),
component: 'TreeSelect',
component: 'Dept',
componentProps: {
placeholder: '请选择所属机构',
fieldNames: {
@ -144,6 +144,7 @@
key: 'id',
value: 'id',
},
isArray: true,
multiple: true,
getPopupContainer: () => document.body,
},

29
src/views/system/user/index.vue
View File

@ -1,6 +1,11 @@
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DeptTree class="w-1/3 xl:w-1/4" @select="handleSelect" />
<div class="dept-v2 w-1/3 xl:w-1/4">
<div class="tree-title">
组织列表
</div>
<DeptTreeV2 @select="handleSelect" />
</div>
<BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
<template #toolbar>
<a-button type="primary" v-auth="'user:add'" @click="handleCreate">{{
@ -53,6 +58,7 @@
import { useModal } from '/@/components/Modal';
import AccountModal from './components/UserModal.vue';
import DeptTree from './components/DeptTree.vue';
import DeptTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue'
import { useI18n } from '/@/hooks/web/useI18n';
import { Tag } from 'ant-design-vue';
const { t } = useI18n();
@ -157,7 +163,7 @@
export default defineComponent({
name: 'UserManagement',
components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction },
components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction, DeptTreeV2 },
setup() {
const { notification } = useMessage();
const selectDeptId = ref('');
@ -301,7 +307,7 @@
reload();
}
function handleSelect(deptId = '') {
function handleSelect([deptId]) {
selectDeptId.value = deptId;
reload();
}
@ -326,3 +332,20 @@
},
});
</script>
<style lang="less" scoped>
.dept-v2 {
margin-right: 16px;
background-color: #fff;
padding: 8px;
height: 100%;
overflow: scroll;
}
.tree-title {
padding: 8px 16px;
font-weight: 600;
font-size: 16px;
}
:deep(.select-department-tree) {
}
</style>

9
src/views/workflow/design/bpmn/components/member/MemberTable.vue
View File

@ -8,6 +8,7 @@
v-if="item.show"
:is="item.component"
:memberList="props.memberList"
v-bind="item.componentProps"
@change="changeList"
>
<a-button type="primary">{{ item.name }}</a-button>
@ -34,7 +35,9 @@
import Icon from '/@/components/Icon/index';
import Posts from '/@bpmn/components/member/Posts.vue';
import Roles from '/@bpmn/components/member/Roles.vue';
import Users from '/@bpmn/components/member/Users.vue';
// import Users from '/@bpmn/components/member/Users.vue';
import SelectUserV2 from './SelectUserV2.vue';
import NodeApprover from '/@bpmn/components/member/NodeApprover.vue';
import UpperManagement from '/@bpmn/components/member/UpperManagement.vue';
import FormFields from '/@bpmn/components/member/FormFields.vue';
@ -86,7 +89,7 @@
return [
{ name: t('添加岗位'), component: Posts, show: true },
{ name: t('添加角色'), component: Roles, show: true },
{ name: t('添加人员'), component: Users, show: true },
{ name: t('添加人员'), component: SelectUserV2, show: true, componentProps: {buttonShow: true, multiple: true} },
{ name: t('节点审批人'), component: NodeApprover, show: props.isCommonType ? false : true },
{
name: t('上级领导'),
@ -108,7 +111,7 @@
if (val === MemberType.API) return t('API审批人');
return val;
}
function changeList(list: Array<MemberConfig>) {
function changeList(list) {
emits('update:memberList', list);
}
function deleteItem(index: number) {

472
src/views/workflow/design/bpmn/components/member/SelectUserV2.vue Normal file
View File

@ -0,0 +1,472 @@
<template>
<div :class="{ disabled }" class="form-select-user" @click="show">
<a-button type="primary" v-if="buttonShow">{{ t('添加人员') }}</a-button>
<a-input v-model:value="userNames" v-if="!buttonShow" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
<template v-if="prefix" #prefix>
<Icon :icon="prefix" />
</template>
<template v-if="suffix" #suffix>
<Icon :icon="suffix" />
</template>
</a-input>
<ModalPanel :title="t('选择人员')" :visible="visible" :width="900" class="select-user-model" @close="close" @submit="submit">
<div class="select-user">
<div class="select-user-left">
<a-tabs v-model:activeKey="activeKey" :tabBarGutter="20">
<a-tab-pane key="department" tab="组织架构"></a-tab-pane>
<a-tab-pane key="allPerson" tab="所有人"></a-tab-pane>
</a-tabs>
<div class="person-search">
<a-form-item label="" name="name">
<a-input v-model:value="selectPersonNames" :placeholder="searchPlaceholder" :size="size" class="search-input"></a-input>
</a-form-item>
</div>
<div v-show="activeKey === 'department'" class="select-user-box">
<div class="department-tree">
<a-spin :spinning="treeLoading" class="loading-box" />
<div class="department-tree-box">
<SelectDepartmentTreeV2 v-if="visible && activeKey === 'department'" class="tree-select" @changeValue="departChange" @queryCompleted="departCompleted"></SelectDepartmentTreeV2>
</div>
</div>
<div class="user-select-box">
<SelectUserListV2 :data="searchDepartMemberList" emptyDescription="暂无人员" @selectId="changeDepMemberSelect"></SelectUserListV2>
<div v-if="false" class="user-select-pagination">
<a-pagination v-model:current="searchDepartMemberParams.limit" :pageSize="searchDepartMemberParams.size" :total="searchDepartMemberTotal" />
</div>
</div>
</div>
<div v-show="activeKey === 'allPerson'" class="all-user-select-box">
<SelectUserListV2 :data="searchAllMemberList" @selectId="changeMemberSelect"></SelectUserListV2>
<div v-if="searchAllMemberTotal > 25" class="all-user-select-pagination">
<a-form-item label="" name="pagination">
<a-pagination
v-model:current="searchAllMemberParams.limit"
:pageSize="searchAllMemberParams.size"
:show-size-changer="false"
:show-total="(total) => `共${total}人`"
:total="searchAllMemberTotal"
hideOnSinglePage
showLessItems
size="small"
@change="changeAllMemberPage"
/>
</a-form-item>
</div>
</div>
</div>
<div class="select-user-right">
<!-- <div class="selected-user-title sub-title">
已选列表
</div> -->
<SelectUserListV2 :data="selectedMemberList" canDel emptyDescription="暂无已选择人员，<br> 请从左侧添加人员" viewList @delId="delMember"></SelectUserListV2>
</div>
</div>
</ModalPanel>
</div>
</template>
<script setup>
import { watch, ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { useI18n } from '/@/hooks/web/useI18n';
import { ModalPanel } from '/@/components/ModalPanel/index';
import { getUserPageListNew, getUserMulti } from '/@/api/system/user';
import SelectDepartmentTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue';
import SelectUserListV2 from '/@/components/Form/src/components/SelectUserListV2.vue';
import { camelCaseString } from '/@/utils/stringUtil';
const emits = defineEmits(['update:value', 'selectedId', 'change']);
const { t } = useI18n();
const userNames = ref('');
const treeLoading = ref(true);
const visible = ref(false);
const activeKey = ref('department');
const selectedMemberList = ref([]);
const selectPersonNames = ref('');
const valChanged = ref(false);
const props = defineProps({
value: {
type: String,
default: ''
},
prefix: String,
suffix: String,
placeholder: String,
readonly: Boolean,
disabled: Boolean,
size: String,
multiple: {
type: Boolean,
default: true
},
row: Object, // 行数据，在表格里用的到
sepTextField: String, // 将文本表示存储在独立字段
buttonShow: {
type: Boolean,
default: false
},
memberList: {
type: Array,
default: []
}
});
let timeoutId = null;
let resetMemberList = [];
const searchPlaceholder = '请输入姓名或工号搜索';
function updateSepTextField(v) {
if (!props.sepTextField || !props.row) {
return;
}
props.row[camelCaseString(props.sepTextField)] = v;
}
// 防止输入多次调用搜索接口导致问题，使用防抖
watch(selectPersonNames, (newValue) => {
if (newValue && activeKey.value !== 'allPerson') {
activeKey.value = 'allPerson';
}
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
// 调用搜索接口
console.log('执行搜索API操作, 查询参数为:', newValue);
searchNameChanged(newValue);
}, 1000);
});
watch(activeKey, (newValue) => {
searchAllMemberList.value = [];
searchAllMemberTotal.value = 0;
searchDepartMemberList.value = [];
treeLoading.value = true;
if (newValue !== 'allPerson') {
selectPersonNames.value = '';
} else {
if (!timeoutId) {
searchNameChanged('');
}
}
});
watch(
props,
async () => {
if (props.value && !valChanged.value && props.sepTextField) {
const idArr = props.value.split(',');
const valStr = props.row[camelCaseString(props.sepTextField)];
const valArr = valStr.split(',');
userNames.value = valStr;
const initValue = idArr.map((id, index) => {
return {
id,
name: valArr[index]
};
});
selectedMemberList.value = initValue;
resetMemberList = cloneDeep(initValue);
return;
}
if (props.value && !resetMemberList.length) {
const list = await getUserMulti(props.value);
selectedMemberList.value = list;
resetMemberList = cloneDeep(list);
const nameList = resetMemberList.map((item) => {
return item.name;
});
userNames.value = nameList.join(',');
}
if(props.memberList) {
const list = props.memberList.filter(item => {
return item.memberType == 0
})
selectedMemberList.value = list
}
},
{
immediate: true
}
);
const searchDepartMemberParams = ref({
limit: 1,
size: 10000,
departmentId: ''
});
const searchDepartMemberTotal = ref(0);
const searchDepartMemberList = ref([]);
const searchAllMemberParams = ref({
limit: 1,
size: 25,
isSearchAll: true,
keyword: ''
});
const searchAllMemberTotal = ref(0);
const searchAllMemberList = ref([]);
async function departChange(e) {
searchDepartMemberParams.value.departmentId = e[0].id;
let res = await getUserList(searchDepartMemberParams.value);
searchDepartMemberTotal.value = res.total;
searchDepartMemberList.value = setSelected(res.list);
}
async function searchNameChanged(val) {
searchAllMemberParams.value.limit = 1;
searchAllMemberParams.value.keyword = val;
getAllMemberList();
}
async function getAllMemberList() {
let res = await getUserList(searchAllMemberParams.value);
searchAllMemberTotal.value = res.total;
searchAllMemberList.value = setSelected(res.list);
}
function setSelected(list) {
const idList = selectedMemberList.value.map((item) => item.id);
const ids = idList.join(',');
list.forEach((item) => {
if (ids?.includes(item.id)) {
item.selected = true;
} else {
item.selected = false;
}
});
return list;
}
async function getUserList(params) {
return await getUserPageListNew(params);
}
function departCompleted() {
treeLoading.value = false;
}
function changeDepMemberSelect(id) {
let list = searchDepartMemberList.value;
searchDepartMemberList.value = handleListSelected(list, id);
}
function changeMemberSelect(id) {
let list = searchAllMemberList.value;
searchAllMemberList.value = handleListSelected(list, id);
}
function handleListSelected(list, id) {
let selected = false;
let selectedItem;
list.forEach((item) => {
if (item.id === id) {
item.selected = !!!item.selected;
selected = item.selected;
selectedItem = item;
}
});
let memberList = selectedMemberList.value;
if (selected) {
memberList.push(selectedItem);
selectedMemberList.value = memberList;
} else {
selectedMemberList.value = memberList.filter((m) => m.id !== id);
}
return list;
}
function changeAllMemberPage(page) {
searchAllMemberParams.value.limit = page;
getAllMemberList();
}
function show() {
visible.value = true;
treeLoading.value = true;
}
function delMember(id) {
if (activeKey.value === 'department') {
changeDepMemberSelect(id);
} else {
changeMemberSelect(id);
}
}
function submit() {
let idsList = [];
let namesList = [];
selectedMemberList.value.forEach((item) => {
idsList.push(item.id);
namesList.push(item.name);
item.memberType = 0
});
const ids = idsList.join(',');
const names = namesList.join(',');
resetMemberList = cloneDeep(selectedMemberList.value);
userNames.value = names;
let finalList = props.memberList.filter(item => item.memberType !== 0).concat(selectedMemberList.value)
updateSepTextField(names);
emits('update:value', ids);
emits('selectedId', ids);
emits('change', finalList);
valChanged.value = false;
close();
}
function close() {
selectedMemberList.value = cloneDeep(resetMemberList);
visible.value = false;
activeKey.value = 'department';
searchDepartMemberList.value = [];
searchAllMemberList.value = [];
}
</script>
<style lang="less">
.select-user-model {
.content {
margin: 0 !important;
}
}
</style>
<style lang="less" scoped>
.sub-title {
height: 30px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(144, 147, 153, 0.7);
}
.select-user {
display: flex;
height: 100%;
// border: 1px solid #eaeaea;
.select-user-left {
width: 75%;
height: 100%;
border-right: 1px solid #eaeaea;
display: flex;
flex-direction: column;
:deep(.ant-tabs-nav) {
margin-bottom: 0;
.ant-tabs-nav-wrap {
padding-left: 10px;
}
}
.person-search {
padding: 4px;
:deep(.ant-form-item) {
margin: 0;
}
.search-input {
border: none;
}
}
.select-user-box {
flex: 1;
min-height: 0;
display: flex;
border-top: 1px solid #eaeaea;
.department-tree {
position: relative;
width: 65%;
height: 100%;
border-right: 1px solid #eaeaea;
.loading-box {
position: absolute;
top: 49%;
left: 49%;
}
.department-tree-box {
// overflow: scroll;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 4px 8px;
.department-tree-title {
}
.tree-select {
flex: 1;
min-height: 0;
overflow-y: scroll;
}
}
}
.user-select-box {
flex: 1;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
.user-select-title {
}
.user-select-list {
flex: 1;
min-height: 0;
overflow-y: scroll;
.user-select-item {
height: 30px;
padding: 0 4px;
}
}
.user-select-pagination {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.all-user-select-box {
flex: 1;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
.all-user-select-title {
}
.all-user-select-pagination {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
.ant-form-item {
margin-bottom: 0;
}
}
}
}
.select-user-right {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
.selected-user-title {
}
}
}
</style>

2
src/views/workflow/design/bpmn/index.vue
View File

@ -187,8 +187,10 @@
function addModelerListener() {
bpmnModeler.on('shape.added', (e: any) => {
let shape = e.element ? bpmnModeler.get('elementRegistry').get(e.element.id) : e.shape;
if (shape.type !== 'label') {
changePanel(shape.type, shape.id);
bpmnCanvas.elementEventName = 'added';
}
});
bpmnModeler.on('selection.changed', (e: any) => {
bpmnCanvas.elementEventName = 'change';