root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

仿钉钉设计流程：增加字段权限设置

Browse Source
This commit is contained in:
jason 2024-04-14 10:26:42 +08:00
parent 11b7cf32ca
commit cfc0003388
4 changed files with 373 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/SimpleProcessDesigner/src/addNode.vue
View File

@ -70,6 +70,10 @@ let props = defineProps({
showAddButton:{
type:Boolean,
default:true
},
defaultFieldsPermission : {
type: Array,
default: () => ([])
}
})
let emits = defineEmits(['update:childNodeP'])
@ -78,6 +82,7 @@ const addType = (type: number) => {
visible.value = false
// 审核节点
if (type === NodeType.APPROVE_USER_NODE) {
console.log("props.defaultFieldsPermission", props.defaultFieldsPermission)
const data = {
name: '审核人',
error: true,
@ -86,7 +91,8 @@ const addType = (type: number) => {
attributes: {
approveMethod: undefined,
candidateStrategy: undefined,
candidateParam: undefined
candidateParam: undefined,
fieldsPermission: props.defaultFieldsPermission,
},
childNode: props.childNodeP
}

462
src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
View File

@ -1,3 +1,4 @@
<!-- eslint-disable vue/html-self-closing -->
<template>
<el-drawer
:append-to-body="true"
@ -5,152 +6,218 @@
:show-close="false"
:size="550"
:before-close="saveConfig"
class="justify-start"
>
<template #header>
<div class="user-task-header">审批设置</div>
<div class="w-full flex flex-col">
<span class="text-size-2xl">审批设置</span>
<el-divider />
</div>
</template>
<div>
<el-form label-position="top" label-width="100px">
<el-form-item label="审批方式" prop="approveMethod">
<el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
<el-option
v-for="dict in approveMethods"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-tabs type="border-card">
<el-tab-pane label="审批人">
<div>
<el-form label-position="top" label-width="100px">
<el-form-item label="审批方式" prop="approveMethod">
<el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
<el-option
v-for="dict in approveMethods"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="审批人规则类型" prop="candidateStrategy">
<el-select v-model="candidateConfig.candidateStrategy" style="width: 100%" clearable @change="changecandidateStrategy">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="审批人规则类型" prop="candidateStrategy">
<el-select
v-model="candidateConfig.candidateStrategy"
style="width: 100%"
clearable
@change="changecandidateStrategy"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy == 10"
label="指定角色"
prop="candidateParam"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21"
label="指定部门"
prop="candidateParam"
span="24"
>
<el-tree-select
ref="treeRef"
v-model="candidateConfig.candidateParam"
:data="deptTreeOptions"
:props="defaultProps"
empty-text="加载中，请稍后"
multiple
node-key="id"
style="width: 100%"
show-checkbox
/>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy == 22"
label="指定岗位"
prop="candidateParam"
span="24"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in postOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="
candidateConfig.candidateStrategy == 30 ||
candidateConfig.candidateStrategy == 31 ||
candidateConfig.candidateStrategy == 32
"
label="指定用户"
prop="candidateParam"
span="24"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy === 40"
label="指定用户组"
prop="candidateParam"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in userGroupOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy === 60"
label="流程表达式"
prop="candidateParam"
>
<el-input
type="textarea"
v-model="candidateConfig.candidateParam[0]"
clearable
style="width: 100%"
/>
</el-form-item>
</el-form>
</div>
<div class="demo-drawer__footer clear">
<el-button type="primary" @click="saveConfig">确 定</el-button>
<el-button @click="closeDrawer">取 消</el-button>
</div>
<el-form-item
v-if="candidateConfig.candidateStrategy == 10"
label="指定角色"
prop="candidateParam"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="
candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21
"
label="指定部门"
prop="candidateParam"
span="24"
>
<el-tree-select
ref="treeRef"
v-model="candidateConfig.candidateParam"
:data="deptTreeOptions"
:props="defaultProps"
empty-text="加载中，请稍后"
multiple
node-key="id"
style="width: 100%"
show-checkbox
/>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy == 22"
label="指定岗位"
prop="candidateParam"
span="24"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in postOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="
candidateConfig.candidateStrategy == 30 ||
candidateConfig.candidateStrategy == 31 ||
candidateConfig.candidateStrategy == 32
"
label="指定用户"
prop="candidateParam"
span="24"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy === 40"
label="指定用户组"
prop="candidateParam"
>
<el-select
v-model="candidateConfig.candidateParam"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in userGroupOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="candidateConfig.candidateStrategy === 60"
label="流程表达式"
prop="candidateParam"
>
<el-input
type="textarea"
v-model="candidateConfig.candidateParam[0]"
clearable
style="width: 100%"
/>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="设置字段权限">
<div class="field-setting-pane h-full w-full flex flex-col">
<div class="field-setting-content mr-2 overflow-auto py-4 pr-2">
<div class="field-container flex flex-col flex-items-start">
<div class="mb-2 ml-4 font-bold">字段权限</div>
<div class="field-body ml-4 mt-2">
<div class="field-permit-box text-size--13px">
<div class="field-permit-title">
<span class="setting-title-label">组件名称</span>
<span class="setting-title-label">可编辑</span>
<span class="setting-title-label">只读</span>
<span class="setting-title-label">隐藏</span>
</div>
<div class="field-setting-item">
<span class="field-setting-item-label">全选</span>
<span class="all-checkbox-wrap">
<el-checkbox label="" size="large" />
</span>
<span class="all-checkbox-wrap">
<el-checkbox label="" size="large" />
</span>
<span class="all-checkbox-wrap">
<el-checkbox label="" size="large" />
</span>
</div>
<div class="field-setting-item-check">
<div class="field-setting-item" v-for="(item,index) in candidateConfig.fieldsPermission" :key="index">
<span class="field-setting-item-label"> {{ item.title }}</span>
<el-radio-group v-model="item.permission" >
<div class="item-radio-wrap">
<el-radio value="1" size="large" label="1"/>
</div>
<div class="item-radio-wrap">
<el-radio value="2" size="large" label="2"/>
</div>
<div class="item-radio-wrap">
<el-radio value="3" size="large" label="3"/>
</div>
</el-radio-group>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<template #footer>
<el-divider />
<div>
<el-button type="primary" @click="saveConfig">确 定</el-button>
<el-button @click="closeDrawer">取 消</el-button>
</div>
</template>
</el-drawer>
</template>
<script lang="ts" setup>
@ -173,12 +240,13 @@ const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
const candidateConfig = ref({
candidateStrategy: undefined,
candidateParam: [],
approveMethod: undefined
approveMethod: undefined,
fieldsPermission:[]
})
let approverConfig = ref({})
// let approverConfig = ref({})
let store = useWorkFlowStoreWithOut()
let { setApproverDrawer, setUserTaskConfig } = store
let approverConfig1 = computed(() => store.approverConfig1)
// let approverConfig1 = computed(() => store.approverConfig1)
let approverDrawer = computed(() => store.approverDrawer)
const userTaskConfig = computed(() => store.userTaskConfig)
@ -192,34 +260,34 @@ let visible = computed({
})
watch(userTaskConfig, (val) => {
if (val.value.attributes) {
console.log('val.value.attributes', val.value.attributes);
candidateConfig.value.approveMethod = val.value.attributes.approveMethod
candidateConfig.value.candidateStrategy = val.value.attributes.candidateStrategy
const candidateParamStr = val.value.attributes.candidateParam;
if(val.value.attributes.candidateStrategy === 60) {
const candidateParamStr = val.value.attributes.candidateParam
if (val.value.attributes.candidateStrategy === 60) {
candidateConfig.value.candidateParam = [candidateParamStr]
} else {
if(candidateParamStr){
candidateConfig.value.candidateParam = candidateParamStr.split(',').map((item) => +item)
if (candidateParamStr) {
candidateConfig.value.candidateParam = candidateParamStr.split(',').map((item) => +item)
}
}
// candidateConfig.value = val.value.attributes
console.log('val.value.attributes.fieldsPermission', val.value.attributes.fieldsPermission)
candidateConfig.value.fieldsPermission = val.value.attributes.fieldsPermission
}
})
watch(approverConfig1, (val) => {
approverConfig.value = val.value
})
// watch(approverConfig1, (val) => {
// approverConfig.value = val.value
// })
const saveConfig = () => {
const rawConfig = toRaw(userTaskConfig.value)
const { approveMethod, candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(candidateConfig.value)
const candidateParamStr = candidateParam.join(',')
rawConfig.value.attributes = {
approveMethod,
candidateStrategy,
candidateParam: candidateParamStr
}
candidateParam: candidateParamStr,
fieldsPermission: fieldsPermission
}
rawConfig.flag = true
// TODO 进行校验
// setApproverConfig({
@ -230,7 +298,7 @@ const saveConfig = () => {
setUserTaskConfig({
value: rawConfig.value,
flag: true,
id: userTaskConfig.value.id,
id: userTaskConfig.value.id
})
closeDrawer()
}
@ -253,10 +321,84 @@ onMounted(async () => {
deptTreeOptions.value = handleTree(deptOptions, 'id')
// 获得用户组列表
userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
})
</script>
<style lang="scss" scoped>
.user-task-header {
font-size: 16px !important;
// ::v-deep .el-drawer__header {
// margin-bottom: 2px;
// }
.field-permit-title {
height: 45px;
padding: 0 0 0 12px;
line-height: 32px;
background-color: rgba(248, 250, 252, 0.04);
border: 1px solid rgba(31, 56, 88, 0.1);
.setting-title-label:first-child {
text-align: left;
}
.setting-title-label {
display: inline-block;
width: 110px;
padding: 5px 0;
font-size: 13px;
font-weight: 700;
color: rgba(0, 0, 0, 0.6);
text-align: center;
}
}
.field-setting-item {
display: flex;
align-items: center;
height: 38px;
padding-bottom: 0;
padding-left: 12px;
line-height: 38px;
border-right: 1px solid rgba(31, 56, 88, 0.1);
border-bottom: 1px solid rgba(31, 56, 88, 0.1);
border-left: 1px solid rgba(31, 56, 88, 0.1);
.no-label {
font-size: 0;
}
.field-setting-item-label {
display: inline-block;
width: 110px;
min-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
}
.all-checkbox-wrap {
display: inline-block;
width: 110px;
text-align: center;
}
.item-radio-wrap {
display: inline-block;
width: 110px;
padding-left: 6px;
text-align: center;
}
}
::v-deep(.el-radio__label) {
opacity: 0; /* 隐藏标签文本 */
}
::v-deep(.el-divider--horizontal) {
display: block;
width: 100%;
height: 1px;
margin: 4px 0;
border-top: 1px var(--el-border-color) var(--el-border-style);
}
</style>

28
src/components/SimpleProcessDesigner/src/nodeWrap.vue
View File

@ -44,7 +44,7 @@
<i class="anticon anticon-exclamation-circle"></i>
</div>
</div>
<addNode v-model:childNodeP="nodeConfig.childNode" />
<addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
</div>
<div class="branch-wrap" v-if="nodeConfig.type == 4">
<div class="branch-box-wrap">
@ -92,10 +92,10 @@
<i class="anticon anticon-exclamation-circle"></i>
</div>
</div>
<addNode v-model:childNodeP="item.childNode" />
<addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
</div>
</div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
<template v-if="index == 0">
<div class="top-left-cover-line"></div>
<div class="bottom-left-cover-line"></div>
@ -106,7 +106,7 @@
</template>
</div>
</div>
<addNode v-model:childNodeP="nodeConfig.childNode" />
<addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
</div>
</div>
<div class="branch-wrap" v-if="nodeConfig.type == 5">
@ -137,10 +137,10 @@
<i class="anticon anticon-exclamation-circle"></i>
</div>
</div>
<addNode v-model:childNodeP="item.childNode" />
<addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
</div>
</div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
<template v-if="index == 0">
<div class="top-left-cover-line"></div>
<div class="bottom-left-cover-line"></div>
@ -151,7 +151,7 @@
</template>
</div>
</div>
<addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
<addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission"/>
</div>
</div>
<div class="branch-wrap" v-if="nodeConfig.type == 7">
@ -186,10 +186,10 @@
<i class="anticon anticon-exclamation-circle"></i>
</div>
</div>
<addNode v-model:childNodeP="item.childNode" />
<addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
</div>
</div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
<template v-if="index == 0">
<div class="top-left-cover-line"></div>
<div class="bottom-left-cover-line"></div>
@ -200,7 +200,7 @@
</template>
</div>
</div>
<addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
<addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission" />
</div>
</div>
<div class="node-wrap" v-if="nodeConfig.type === NodeType.PARALLEL_NODE_JOIN || nodeConfig.type === NodeType.INCLUSIVE_NODE_JOIN">
@ -209,9 +209,9 @@
<div class="text">聚合</div>
</div>
</div>
<addNode v-model:childNodeP="nodeConfig.childNode" />
<addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
</div>
<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
</template>
<script lang="ts" setup>
import addNode from './addNode.vue'
@ -232,6 +232,10 @@ let props = defineProps({
nodeConfig: {
type: Object as () => WorkFlowNode,
default: () => ({}) as WorkFlowNode
},
defaultFieldsPermission : {
type: Array,
default: () => ([])
}
})

76
src/views/bpm/simpleWorkflow/index.vue
View File

@ -12,7 +12,7 @@
<div class="start-event-node-circle">开始</div>
</div>
<div class="start-event-node-line"></div>
<nodeWrap v-model:nodeConfig="nodeConfig" />
<nodeWrap v-model:nodeConfig="nodeConfig" :defaultFieldsPermission="defaultFieldsPermission" />
<!-- <div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">流程结束</div>
@ -23,7 +23,7 @@
</div>
</section>
</div>
<approverDrawer />
<approverDrawer/>
<copyerDrawer />
</template>
<script lang="ts" setup>
@ -33,6 +33,8 @@ import copyerDrawer from '@/components/SimpleProcessDesigner/src/drawer/copyerDr
import { WorkFlowNode } from '@/components/SimpleProcessDesigner/src/consts'
import { ref } from 'vue'
import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
import { getModel } from '@/api/bpm/model'
import { getForm, FormVO } from '@/api/bpm/form'
defineOptions({ name: 'SimpleWorkflowDesignEditor' })
const uid = getCurrentInstance().uid
const router = useRouter() // 路由
@ -40,33 +42,33 @@ const { query } = useRoute() // 路由的查询
const modelId = query.modelId
const message = useMessage() // 国际化
const nodeConfig = ref<WorkFlowNode>({
name: '发起人',
type: 0,
id: 'StartEvent_' + uid,
childNode: undefined,
attributes: undefined,
conditionNodes: undefined
}
)
name: '发起人',
type: 0,
id: 'StartEvent_' + uid,
childNode: undefined,
attributes: undefined,
conditionNodes: []
})
// 默认的表单字段权限
const defaultFieldsPermission: any[] = []
const test = async () => {
if (!modelId) {
message.error('缺少模型 modelId 编号')
return
}
const test = nodeConfig.value;
const test = nodeConfig.value
console.log('test is ', test)
console.log('nodeConfig.value ', nodeConfig.value)
const data = {
const data1 = {
modelId: modelId,
simpleModelBody: toRaw(nodeConfig.value)
}
const data1 = {
const data = {
modelId: modelId,
simpleModelBody: nodeConfig.value
}
console.log('request json data is ', data)
console.log('request json data1 is ', data1)
const result = await saveBpmSimpleModel(data1)
const result = await saveBpmSimpleModel(data)
console.log('save the result is ', result)
if (result) {
message.success('修改成功')
@ -74,17 +76,35 @@ const test = async () => {
} else {
message.alert('修改失败')
}
}
const close = () => {
router.push({ path: '/bpm/manager/model' })
}
onMounted(async () => {
const bpmnModel = await getModel(modelId)
if (bpmnModel) {
const formType = bpmnModel.formType
if (formType === 10) {
const bpmnForm = await getForm(bpmnModel.formId) as unknown as FormVO
const formFields = bpmnForm?.fields
if (formFields) {
formFields.forEach((fieldStr: string) => {
const { field, title } = JSON.parse(fieldStr)
defaultFieldsPermission.push({
field,
title,
permission: '2'
})
})
}
console.log('defaultFieldsPermissions', defaultFieldsPermission);
}
}
console.log('the modelId is ', modelId)
const result = await getBpmSimpleModel(modelId)
if(result){
if (result) {
console.log('get the result is ', result)
nodeConfig.value = result;
nodeConfig.value = result
}
})
</script>
@ -104,7 +124,7 @@ onMounted(async () => {
height: 40px;
font-size: 14px;
color: #f8f8fa;
background-image: linear-gradient(-30deg,#bbbbc4,#d5d5de),linear-gradient(#bcbcc5,#bcbcc5);
background-image: linear-gradient(-30deg, #bbbbc4, #d5d5de), linear-gradient(#bcbcc5, #bcbcc5);
border-radius: 50%;
justify-content: center;
align-items: center;
@ -130,19 +150,19 @@ onMounted(async () => {
justify-content: center;
font-size: 14px;
color: #f8f8fa;
background-image: linear-gradient(90deg,#ff6a00,#f78b3e),linear-gradient(#ff6a00,#ff6a00);
background-image: linear-gradient(90deg, #ff6a00, #f78b3e), linear-gradient(#ff6a00, #ff6a00);
border-radius: 50%;
}
.start-event-node-line::before {
position: absolute;
inset: 0;
z-index: -1;
width: 2px;
height: 100%;
margin: auto;
background-color: #cacaca;
content: "";
position: absolute;
inset: 0;
z-index: -1;
width: 2px;
height: 100%;
margin: auto;
background-color: #cacaca;
content: '';
}
.start-event-node-line {