abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 调整面板位置

Browse Source
This commit is contained in:
LiuHao 2024-01-24 18:06:59 +08:00
parent 917e661c5a
commit 32c9b6f656
8 changed files with 255 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/BpmnDesign/assets/showConfig.ts
View File

@ -5,16 +5,17 @@ export default {
formKey: true formKey: true
}, },
'bpmn:UserTask': { 'bpmn:UserTask': {
userType: true, auditUserType: true,
assignee: true, users: true,
candidateUsers: true, roles: true,
candidateGroups: true, specifyDesc: true,
multipleUserAuditType: true,
async: true, async: true,
priority: true, priority: true,
formKey: true,
skipExpression: true, skipExpression: true,
dueDate: true, dueDate: true,
taskListener: true taskListener: true,
executionListener: true
}, },
'bpmn:ServiceTask': { 'bpmn:ServiceTask': {
async: true, async: true,

25
src/components/BpmnDesign/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog ref="flowDialogRef" v-model="dialog.visible" :title="dialog.title" width="95%" @close="closeDialog"> <el-dialog ref="flowDialogRef" v-model="dialog.visible" width="95%" :title="dialog.title" @close="closeDialog">
<div class="app-containers"> <div class="app-containers">
<el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto"> <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
<div class="flex pb-3 justify-between"> <div class="flex pb-3 justify-between">
@ -51,7 +51,7 @@
<div ref="canvas" class="canvas" /> <div ref="canvas" class="canvas" />
</el-main> </el-main>
<el-scrollbar height="610px"> <el-scrollbar height="610px">
<el-aside style="width: 400px; min-height: 590px; background-color: #f0f2f5"> <el-aside style="width: 400px; min-height: 590px; background-color: #fff; box-shadow: 0 0 5px 1px #999">
<PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" :users="users" :groups="groups" /> <PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" :users="users" :groups="groups" />
</el-aside> </el-aside>
</el-scrollbar> </el-scrollbar>
@ -317,9 +317,6 @@ const getProcessElement = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/*左边工具栏以及编辑节点的样式*/
//@import 'bpmn-js/dist/assets/bpmn-js.css';
.app-containers { .app-containers {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -328,23 +325,5 @@ const getProcessElement = () => {
height: 100%; height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+'); background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
} }
.panel {
position: absolute;
right: 0;
top: 50px;
width: 300px;
}
.load {
margin-right: 10px;
}
.el-form-item__label {
font-size: 13px;
}
}
.bpmn-icon-start-event-none:before {
//background-color: green;
//border-radius: 100%;
//font-size: 30px;
} }
</style> </style>

168
src/components/BpmnDesign/panel/TaskPanel.vue
View File

@ -1,37 +1,78 @@
<template> <template>
<div> <div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px"> <el-collapse>
<el-form-item prop="id" label="节点 ID"> <el-collapse-item title="Consistency" name="1">
<el-input v-model="formData.id" @change="idChange"> </el-input> <el-form ref="formRef" size="small" :model="formData" :rules="formRules" label-width="90px">
</el-form-item> <el-form-item prop="id" label="节点 ID">
<el-form-item prop="name" label="节点名称"> <el-input v-model="formData.id" @change="idChange"> </el-input>
<el-input v-model="formData.name" @change="nameChange"> </el-input> </el-form-item>
</el-form-item> <el-form-item prop="name" label="节点名称">
<el-form-item prop="auditUserType" label="人员类型"> <el-input v-model="formData.name" @change="nameChange"> </el-input>
<el-select v-model="formData.auditUserType"> </el-form-item>
<el-option v-for="item in AuditUserTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option> <el-form-item v-if="showConfig.auditUserType" prop="auditUserType" label="人员类型">
</el-select> <el-select v-model="formData.auditUserType">
</el-form-item> <el-option v-for="item in AuditUserTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.USER" style=""> </el-select>
<el-button type="primary" @click="openUserSelect">选择人员</el-button> </el-form-item>
</el-form-item> <el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.USER && showConfig.users" style="">
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.SPECIFY" style=""> <el-badge :value="formData.users.length" :max="99">
<el-radio-group v-model="formData.specifyDesc" class="ml-4"> <el-button type="primary" @click="openUserSelect">选择人员</el-button>
<el-radio v-for="item in SpecifyDesc" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio> <UserSelect ref="userSelectRef" v-model="formData.users"></UserSelect>
</el-radio-group> </el-badge>
</el-form-item> </el-form-item>
<el-form-item label="多人审批方式"> <el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.ROLE && showConfig.roles" style="">
<el-radio-group v-model="formData.multipleUserAuditType" class="ml-4 block-radio"> <el-badge :value="formData.users.length" :max="99">
<el-radio v-for="item in MultipleUserAuditType" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio> <el-button type="primary" disabled @click="openUserSelect">选择角色</el-button>
</el-radio-group> <UserSelect ref="userSelectRef" v-model="formData.roles"></UserSelect>
</el-form-item> </el-badge>
<el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item> </el-form-item>
<ExecutionListener :modeler="modeler" :element="element"></ExecutionListener> <el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.SPECIFY && showConfig.specifyDesc" style="">
<el-form-item label="任务监听器" style="margin-bottom: 0"> </el-form-item> <el-radio-group v-model="formData.specifyDesc" class="ml-4">
<TaskListener :modeler="modeler" :element="element"></TaskListener> <el-radio v-for="item in SpecifyDesc" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
</el-form> </el-radio-group>
</el-form-item>
<UserSelect ref="userSelectRef" v-model="formData.users"></UserSelect> <el-form-item v-if="showConfig.multipleUserAuditType" prop="multipleUserAuditType" label="多人审批方式">
<el-radio-group v-model="formData.multipleUserAuditType" class="ml-4 block-radio">
<el-radio v-for="item in MultipleUserAuditType" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="showConfig.async" prop="sync" label="是否异步">
<el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
</el-form-item>
<el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
<el-input v-model="formData.priority"> </el-input>
</el-form-item>
<el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
<el-input v-model="formData.skipExpression"> </el-input>
</el-form-item>
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
<el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发">
<el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量">
<el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量">
<el-input v-model="formData.ruleVariablesInput"> </el-input>
</el-form-item>
<el-form-item v-if="showConfig.exclude" prop="exclude" label="排除">
<el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.class" prop="class" label="类">
<el-input v-model="formData.class"> </el-input>
</el-form-item>
<el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
<el-date-picker v-model="formData.dueDate" type="datetime" @change="dueDateChange" />
</el-form-item>
<el-form-item v-if="showConfig.executionListener" label="执行监听器" style="margin-bottom: 0"> </el-form-item>
<ExecutionListener v-if="showConfig.executionListener" :modeler="modeler" :element="element"></ExecutionListener>
<el-form-item v-if="showConfig.taskListener" label="任务监听器" style="margin-bottom: 0"> </el-form-item>
<TaskListener v-if="showConfig.taskListener" :modeler="modeler" :element="element"></TaskListener>
</el-form>
</el-collapse-item>
</el-collapse>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -40,17 +81,14 @@ import usePanel from '@/components/BpmnDesign/hooks/usePanel';
import UserSelect from '@/components/UserSelect'; import UserSelect from '@/components/UserSelect';
import { Element, Modeler } from 'bpmn'; import { Element, Modeler } from 'bpmn';
import { TaskPanel } from 'bpmnDesign'; import { TaskPanel } from 'bpmnDesign';
import { AuditUserTypeEnum, MultipleUserAuditTypeEnum } from '@/enums/bpmn/IndexEnums'; import { AuditUserTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
interface PropType { interface PropType {
modeler: Modeler; modeler: Modeler;
element: Element; element: Element;
categorys?: any[];
} }
const props = withDefaults(defineProps<PropType>(), { const props = withDefaults(defineProps<PropType>(), {});
categorys: () => [] const { nameChange, idChange, showConfig, updateProperties } = usePanel({
});
const { nameChange, idChange } = usePanel({
modeler: props.modeler, modeler: props.modeler,
element: toRaw(props.element) element: toRaw(props.element)
}); });
@ -58,14 +96,60 @@ const { parse, formData } = useParseElement<TaskPanel>({
modeler: props.modeler, modeler: props.modeler,
element: toRaw(props.element), element: toRaw(props.element),
initData: { initData: {
id: '',
name: '',
users: [],
roles: [],
multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL, multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
auditUserType: AuditUserTypeEnum.USER, auditUserType: AuditUserTypeEnum.USER,
users: [] specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
} as any }
}); });
const userSelectRef = ref<InstanceType<typeof UserSelect>>(); const userSelectRef = ref<InstanceType<typeof UserSelect>>();
const openUserSelect = () => {
userSelectRef.value.open();
};
const syncChange = (newVal) => {
updateProperties({ 'flowable:async': newVal });
};
const dueDateChange = (newVal) => {
console.log(newVal);
updateProperties({ 'flowable:dueDate': newVal });
};
watch(
() => formData.value.auditUserType,
(val, oldVal) => {
formData.value.users = [];
}
);
watch(
() => formData.value.users,
(newVal: Record<string, any>[]) => {
updateProperties({ 'flowable:candidateGroups': undefined });
if (newVal.length === 1) {
const user = newVal[0];
const userId = user.userId;
updateProperties({ 'flowable:assignee': userId });
updateProperties({ 'flowable:candidateUsers': undefined });
// 删除会签属性
} else if (newVal.length > 1) {
// 获取userId 用逗号,隔开
const userIds = newVal.map((item) => item.userId).join(',');
updateProperties({ 'flowable:candidateUsers': userIds });
updateProperties({ 'flowable:assignee': undefined });
} else {
updateProperties({ 'flowable:candidateUsers': undefined });
updateProperties({ 'flowable:assignee': undefined });
}
},
{ deep: true }
);
const formRules = ref<ElFormRules>({ const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }], id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }] name: [{ required: true, message: '请输入', trigger: 'blur' }]
@ -87,10 +171,6 @@ const MultipleUserAuditType = [
{ id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行（所有人审批通过）', value: 'parallel' }, { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行（所有人审批通过）', value: 'parallel' },
{ id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '或签（任意一人审批通过）', value: 'orSign' } { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '或签（任意一人审批通过）', value: 'orSign' }
]; ];
const openUserSelect = () => {
userSelectRef.value.open();
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

88
src/components/Process/sys-user.vue
View File

@ -1,34 +1,38 @@
<template> <template>
<el-dialog v-model="visible" draggable :title="title" :width="width" :height="height" append-to-body <el-dialog v-model="visible" draggable :title="title" :width="width" :height="height" append-to-body :close-on-click-modal="false">
:close-on-click-modal="false">
<div class="p-2"> <div class="p-2">
<el-row :gutter="20"> <el-row :gutter="20">
<!-- 部门树 --> <!-- 部门树 -->
<el-col :lg="4" :xs="24" style=""> <el-col :lg="4" :xs="24" style="">
<el-card shadow="hover"> <el-card shadow="hover">
<el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable /> <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
<el-tree class="mt-2" ref="deptTreeRef" node-key="id" :data="deptOptions" <el-tree
:props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" ref="deptTreeRef"
:filter-node-method="filterNode" highlight-current default-expand-all class="mt-2"
@node-click="handleNodeClick"></el-tree> node-key="id"
:data="deptOptions"
:props="{ label: 'label', children: 'children' }"
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
default-expand-all
@node-click="handleNodeClick"
></el-tree>
</el-card> </el-card>
</el-col> </el-col>
<el-col :lg="20" :xs="24"> <el-col :lg="20" :xs="24">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
:leave-active-class="proxy?.animate.searchAnimate.leave"> <div v-show="showSearch" class="search">
<div class="search" v-show="showSearch">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px"> <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
<el-form-item label="用户名称" prop="userName"> <el-form-item label="用户名称" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
@keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="用户昵称" prop="nickName"> <el-form-item label="用户昵称" prop="nickName">
<el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable style="width: 240px" <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable style="width: 240px" @keyup.enter="handleQuery" />
@keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleQuery" icon="Search">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button @click="resetQuery" icon="Refresh">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -37,17 +41,16 @@
<el-card shadow="hover"> <el-card shadow="hover">
<template #header> <template #header>
<el-row :gutter="10"> <el-row :gutter="10">
<right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery" :search="true"></right-toolbar> <right-toolbar v-model:showSearch="showSearch" :search="true" @query-table="getUserList"></right-toolbar>
</el-row> </el-row>
</template> </template>
<el-table v-loading="loading" :data="userList" ref="multipleTableRef" row-key="userId" <el-table ref="multipleTableRef" v-loading="loading" :data="userList" row-key="userId" @selection-change="handleSelectionChange">
@selection-change="handleSelectionChange"> <el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
<el-table-column type="selection" width="50" align="center" /> <el-table-column key="userId" label="用户编号" align="center" prop="userId" />
<el-table-column label="用户编号" align="center" key="userId" prop="userId" /> <el-table-column key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户名称" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" /> <el-table-column key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" /> <el-table-column key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
<el-table-column label="创建时间" align="center" prop="createTime" width="160"> <el-table-column label="创建时间" align="center" prop="createTime" width="160">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.createTime }}</span> <span>{{ scope.row.createTime }}</span>
@ -55,12 +58,17 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" <pagination
v-model:limit="queryParams.pageSize" @pagination="handleQuery" /> v-show="total > 0"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getUserList"
/>
</el-card> </el-card>
<el-card shadow="hover"> <el-card shadow="hover">
<el-tag v-for="(user, index) in chooseUserList" :key="user.userId" style="margin:2px" closable <el-tag v-for="(user, index) in chooseUserList" :key="user.userId" style="margin: 2px" closable @close="handleCloseTag(user, index)"
@close="handleCloseTag(user, index)">{{ user.userName }} >{{ user.userName }}
</el-tag> </el-tag>
</el-card> </el-card>
</el-col> </el-col>
@ -108,11 +116,11 @@ const props = defineProps({
//回显用户id //回显用户id
userIdList: { userIdList: {
type: Array, type: Array,
default: [] default: () => []
} }
}); });
const deptTreeRef = ref(ElTree); const deptTreeRef = ref<ElTreeInstance>();
const multipleTableRef = ref(ElTable); const multipleTableRef = ref<ElTableInstance>();
const userList = ref<UserVO[]>(); const userList = ref<UserVO[]>();
const loading = ref(true); const loading = ref(true);
@ -164,6 +172,7 @@ const getList = async () => {
loading.value = false; loading.value = false;
userList.value = res.rows; userList.value = res.rows;
total.value = res.total; total.value = res.total;
if (userList.value && userIds.value.length > 0) { if (userList.value && userIds.value.length > 0) {
const data = await getUserListByIds(userIds.value); const data = await getUserListByIds(userIds.value);
if (data.data && data.data.length > 0) { if (data.data && data.data.length > 0) {
@ -198,6 +207,7 @@ const resetQuery = () => {
/** 选择条数 */ /** 选择条数 */
const handleSelectionChange = (selection: UserVO[]) => { const handleSelectionChange = (selection: UserVO[]) => {
console.log(selection);
if (props.multiple) { if (props.multiple) {
chooseUserList.value = selection.filter((element, index, self) => { chooseUserList.value = selection.filter((element, index, self) => {
return self.findIndex((x) => x.userId === element.userId) === index; return self.findIndex((x) => x.userId === element.userId) === index;
@ -251,7 +261,7 @@ const handleNodeClick = (data: DeptVO) => {
//删除tag //删除tag
const handleCloseTag = (user: UserVO, index: any) => { const handleCloseTag = (user: UserVO, index: any) => {
if (multipleTableRef.value.selection && multipleTableRef.value.selection.length > 0) { if (multipleTableRef.value.selection && multipleTableRef.value.selection.length > 0) {
multipleTableRef.value.selection.forEach((u: UserVO, i: Number) => { multipleTableRef.value.selection.forEach((u: UserVO, i: number) => {
if (user.userId === u.userId) { if (user.userId === u.userId) {
multipleTableRef.value.selection.splice(i, 1); multipleTableRef.value.selection.splice(i, 1);
} }
@ -271,16 +281,16 @@ const handleCloseTag = (user: UserVO, index: any) => {
} }
}; };
const submitFileForm = async () => { const submitFileForm = async () => {
loading.value = true loading.value = true;
emits('submitCallback',chooseUserList); emits('submitCallback', chooseUserList);
} };
const close = async () => { const close = async () => {
visible.value = false visible.value = false;
loading.value = false loading.value = false;
emits('close'); emits('close');
} };
//事件 //事件
const emits = defineEmits(['submitCallback','close']); const emits = defineEmits(['submitCallback', 'close']);
/** /**
* 对外暴露子组件方法 * 对外暴露子组件方法
@ -289,4 +299,4 @@ defineExpose({
getUserList, getUserList,
close close
}); });
</script> </script>

0
src/components/RoleSelect/index.vue Normal file
View File

114
src/components/UserSelect/index.vue
View File

@ -31,7 +31,7 @@
v-model="queryParams.userName" v-model="queryParams.userName"
placeholder="请输入用户名称" placeholder="请输入用户名称"
clearable clearable
style="width: 240px" style="width: 200px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
@ -40,26 +40,10 @@
v-model="queryParams.phonenumber" v-model="queryParams.phonenumber"
placeholder="请输入手机号码" placeholder="请输入手机号码"
clearable clearable
style="width: 240px" style="width: 200px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="创建时间" style="width: 308px">
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@ -71,38 +55,37 @@
<el-card shadow="hover"> <el-card shadow="hover">
<template #header> <template #header>
<el-row :gutter="10"> <el-tag v-for="user in selectUserList" :key="user.userId" closable style="margin: 2px" @close="handleCloseTag(user.userId)">{{
<el-col :span="1.5"> user.userName
<el-button type="primary" plain icon="Plus">新增</el-button> }}</el-tag>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
</el-row>
</template> </template>
<vxe-table <vxe-table
ref="tableRef" ref="tableRef"
height="500px" height="400px"
border border
show-overflow show-overflow
:data="userList" :data="userList"
:loading="loading" :loading="loading"
:row-config="{ keyField: 'userId' }" :row-config="{ keyField: 'userId' }"
:checkbox-config="{ reserve: true, checkRowKeys: modelValue }" :checkbox-config="{ reserve: true, checkRowKeys: userIds }"
highlight-current-row highlight-current-row
@checkbox-all="handleCheckboxAll"
@checkbox-change="handleCheckboxChange"
> >
<vxe-column type="checkbox" width="50" align="center" /> <vxe-column type="checkbox" width="50" align="center" />
<vxe-column v-if="columns[0].visible" key="userId" title="用户编号" align="center" field="userId" /> <vxe-column key="userId" title="用户编号" align="center" field="userId" />
<vxe-column v-if="columns[1].visible" key="userName" title="用户名称" align="center" field="userName" :show-overflow-tooltip="true" /> <vxe-column key="userName" title="用户名称" align="center" field="userName" :show-overflow-tooltip="true" />
<vxe-column v-if="columns[2].visible" key="nickName" title="用户昵称" align="center" field="nickName" :show-overflow-tooltip="true" /> <vxe-column key="nickName" title="用户昵称" align="center" field="nickName" :show-overflow-tooltip="true" />
<vxe-column v-if="columns[3].visible" key="deptName" title="部门" align="center" field="deptName" :show-overflow-tooltip="true" /> <vxe-column key="deptName" title="部门" align="center" field="deptName" :show-overflow-tooltip="true" />
<vxe-column v-if="columns[4].visible" key="phonenumber" title="手机号码" align="center" field="phonenumber" width="120" /> <vxe-column key="phonenumber" title="手机号码" align="center" field="phonenumber" width="120" />
<vxe-column v-if="columns[5].visible" key="status" title="状态" align="center"> <vxe-column key="status" title="状态" align="center">
<template #default="scope"> <template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status"></dict-tag> <dict-tag :options="sys_normal_disable" :value="scope.row.status"></dict-tag>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column v-if="columns[6].visible" title="创建时间" align="center" width="160"> <vxe-column title="创建时间" align="center" width="160">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.createTime }}</span> <span>{{ scope.row.createTime }}</span>
</template> </template>
@ -133,12 +116,11 @@
import api from '@/api/system/user'; import api from '@/api/system/user';
import { UserQuery, UserVO } from '@/api/system/user/types'; import { UserQuery, UserVO } from '@/api/system/user/types';
import { DeptVO } from '@/api/system/dept/types'; import { DeptVO } from '@/api/system/dept/types';
import { globalHeaders } from '@/utils/request';
import useDialog from '@/hooks/useDialog';
import { VxeTableInstance } from 'vxe-table'; import { VxeTableInstance } from 'vxe-table';
import useDialog from '@/hooks/useDialog';
interface PropType { interface PropType {
modelValue: string[]; modelValue: UserVO[];
} }
const prop = defineProps<PropType>(); const prop = defineProps<PropType>();
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
@ -146,6 +128,8 @@ const emit = defineEmits(['update:modelValue']);
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable')); 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 userList = ref<UserVO[]>();
const loading = ref(true); const loading = ref(true);
const showSearch = ref(true); const showSearch = ref(true);
@ -153,17 +137,7 @@ const total = ref(0);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']); const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const deptName = ref(''); const deptName = ref('');
const deptOptions = ref<DeptVO[]>([]); const deptOptions = ref<DeptVO[]>([]);
const selectUserList = ref<UserVO[]>([]);
// 列显隐信息
const columns = ref<FieldOption[]>([
{ key: 0, label: `用户编号`, visible: false, children: [] },
{ key: 1, label: `用户名称`, visible: true, children: [] },
{ key: 2, label: `用户昵称`, visible: true, children: [] },
{ key: 3, label: `部门`, visible: true, children: [] },
{ key: 4, label: `手机号码`, visible: true, children: [] },
{ key: 5, label: `状态`, visible: true, children: [] },
{ key: 6, label: `创建时间`, visible: true, children: [] }
]);
const deptTreeRef = ref<ElTreeInstance>(); const deptTreeRef = ref<ElTreeInstance>();
const queryFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>();
@ -199,17 +173,8 @@ watchEffect(
); );
const confirm = () => { const confirm = () => {
const $table = tableRef.value; emit('update:modelValue', [...selectUserList.value]);
if ($table) { userDialog.closeDialog();
// 获取当前列表选中行
const checkboxRecords = $table.getCheckboxRecords();
// 获取其他列表选中行
const checkboxReserveRecords = $table.getCheckboxReserveRecords();
const data: UserVO[] = [...checkboxRecords, ...checkboxReserveRecords];
const userIds = data.map((item) => item.userId);
emit('update:modelValue', userIds);
userDialog.closeDialog();
}
}; };
/** 查询部门下拉树结构 */ /** 查询部门下拉树结构 */
@ -248,9 +213,42 @@ const resetQuery = () => {
handleQuery(); handleQuery();
}; };
const handleCheckboxChange = (checked) => {
const row = checked.row;
if (checked.checked) {
selectUserList.value.push(row);
} else {
selectUserList.value = selectUserList.value.filter((item) => {
return item.userId !== row.userId;
});
}
};
const handleCheckboxAll = (checked) => {
const rows = userList.value;
if (checked.checked) {
rows.forEach((row) => {
if (!selectUserList.value.some((item) => item.userId === row.userId)) {
selectUserList.value.push(row);
}
});
} else {
selectUserList.value = selectUserList.value.filter((item) => {
return !rows.some((row) => row.userId === item.userId);
});
}
};
const handleCloseTag = (userId: string | number) => {
// 删除选中用户
selectUserList.value = selectUserList.value.filter((item) => {
return item.userId !== userId;
});
};
onMounted(() => { onMounted(() => {
getTreeSelect(); // 初始化部门数据 getTreeSelect(); // 初始化部门数据
getList(); // 初始化列表数据 getList(); // 初始化列表数据
Object.assign(selectUserList.value, prop.modelValue);
}); });
defineExpose({ defineExpose({

19
src/types/bpmn/design.d.ts vendored
View File

@ -31,15 +31,22 @@ declare module 'bpmnDesign' {
} }
export interface TaskPanel extends BasePanel { export interface TaskPanel extends BasePanel {
processCategory: string;
auditUserType: AuditUserTypeEnum; auditUserType: AuditUserTypeEnum;
specifyDesc: SpecifyDescEnum; specifyDesc: SpecifyDescEnum;
multipleUserAuditType: MultipleUserAuditTypeEnum; multipleUserAuditType: MultipleUserAuditTypeEnum;
users: string[]; users?: Record<string, any>[];
roles?: Record<string, any>[];
assignee: string; async?: boolean;
candidateUsers: string; priority?: string;
candidateGroups: string; skipExpression?: string;
isForCompensation?: boolean;
triggerServiceTask?: boolean;
autoStoreVariables?: boolean;
ruleVariablesInput?: string;
excludeTaskListener?: boolean;
exclude?: boolean;
class?: string;
dueDate?: string;
} }
export interface StartEndPanel extends BasePanel {} export interface StartEndPanel extends BasePanel {}

8
src/views/workflow/task/allTaskWaiting.vue
View File

@ -102,7 +102,7 @@
<!-- 加签组件 --> <!-- 加签组件 -->
<multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="handleQuery" /> <multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="handleQuery" />
<!-- 加签组件 --> <!-- 加签组件 -->
<SysUser ref="sysUserRef" :multiple="false" @submit-callback="submitCallback" /> <SysUser ref="sysUserRef" :multiple="true" @submit-callback="submitCallback" />
</div> </div>
</template> </template>
@ -226,11 +226,11 @@ const handleUpdate = () => {
}; };
//修改办理人 //修改办理人
const submitCallback = (data) => { const submitCallback = (data) => {
if(data && data.value.length > 0){ if (data && data.value.length > 0) {
updateAssignee(ids.value,data.value[0].userId).then((resp) => { updateAssignee(ids.value, data.value[0].userId).then((resp) => {
sysUserRef.value.close(); sysUserRef.value.close();
proxy?.$modal.msgSuccess('操作成功'); proxy?.$modal.msgSuccess('操作成功');
handleQuery() handleQuery();
}); });
} }
}; };