mirror of
https://gitee.com/xiangheng/x_admin.git
synced 2025-10-06 08:37:12 +08:00
优化
This commit is contained in:
xiangheng
@@ -1,128 +1,94 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawerVisible" size="500px" :title="node?.text?.value" @close="close">
|
||||
<div class="setting-block">
|
||||
<!-- 开始节点 -->
|
||||
<!-- {{ node }} -->
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
size="600px"
|
||||
:title="'节点：' + node?.text?.value"
|
||||
@close="close"
|
||||
>
|
||||
<!-- fieldList:{{ fieldList }}
|
||||
<div>properties:{{ properties }}</div> -->
|
||||
|
||||
<div v-if="node.type == 'bpmn:startEvent'">开始节点</div>
|
||||
<div v-if="node.type == 'bpmn:userTask'">
|
||||
审批节点
|
||||
<!-- <div>设置审批人（具体人员，部门（负责人），岗位？）</div> -->
|
||||
<!-- {{ adminUserList }} -->
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="审批人">
|
||||
<el-select v-model="properties.userId" placeholder="请选择审批人">
|
||||
<el-option
|
||||
v-for="item in adminUserList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 开始节点 -->
|
||||
<!-- {{ node }} -->
|
||||
|
||||
<el-form-item label="审批部门">
|
||||
<el-select v-model="properties.deptId" placeholder="请选择审批部门">
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位">
|
||||
<el-select v-model="properties.postId" placeholder="请选择岗位">
|
||||
<el-option
|
||||
v-for="item in postList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="node.type == 'bpmn:startEvent'">
|
||||
开始节点
|
||||
<FieldAuth :node="node" :properties="properties" :fieldList="fieldList"></FieldAuth>
|
||||
</div>
|
||||
<div v-if="node.type == 'bpmn:userTask'">
|
||||
<UserTask :node="node" :properties="properties" :fieldList="fieldList"></UserTask>
|
||||
<FieldAuth :node="node" :properties="properties" :fieldList="fieldList"></FieldAuth>
|
||||
</div>
|
||||
|
||||
<div v-if="node.type == 'bpmn:serviceTask'">
|
||||
<div>系统任务</div>
|
||||
<div>抄送</div>
|
||||
<div>发送邮件</div>
|
||||
<div>发送短信</div>
|
||||
<div>发送站内消息</div>
|
||||
<div>数据入库</div>
|
||||
</div>
|
||||
<div v-if="node.type == 'bpmn:exclusiveGateway'">
|
||||
<el-alert title="同一父级的网关只能有一个通过" type="warning" />
|
||||
|
||||
<!-- 设置优先级 -->
|
||||
<div style="padding: 40px 0 20px">
|
||||
<el-select v-model="selectGateway" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in fieldList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button type="primary" style="margin-left: 10px" @click="addCondition"
|
||||
>添加条件</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-if="node.type == 'bpmn:serviceTask'">
|
||||
<div>系统任务</div>
|
||||
<div>抄送</div>
|
||||
<div>发送邮件</div>
|
||||
<div>发送短信</div>
|
||||
<div>发送站内消息</div>
|
||||
</div>
|
||||
<div v-if="node.type == 'bpmn:exclusiveGateway'">
|
||||
<div>网关，只能有一个网关通过</div>
|
||||
<div>从form取值判断</div>
|
||||
设置优先级
|
||||
<el-table fit size="small" :data="fieldList" style="width: 100%">
|
||||
<el-table-column prop="label" label="表单"></el-table-column>
|
||||
<el-table-column label="权限">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.condition" placeholder="请选择审批人">
|
||||
<el-option
|
||||
v-for="item in conditionList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="值">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.conditionValue" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div v-if="node.type == 'bpmn:endEvent'">结束</div>
|
||||
|
||||
<!-- 网关和结束节点不需要表单权限设置 -->
|
||||
<el-table
|
||||
v-if="['bpmn:startEvent', 'bpmn:userTask'].includes(node.type)"
|
||||
fit
|
||||
size="small"
|
||||
:data="fieldList"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table fit size="small" :data="GatewayList" style="width: 100%">
|
||||
<el-table-column prop="label" label="表单"></el-table-column>
|
||||
<el-table-column label="权限">
|
||||
<template #default="{ row }">
|
||||
<el-radio-group v-model="row.auth">
|
||||
<el-radio :label="1">读写</el-radio>
|
||||
<el-radio :label="2">可读</el-radio>
|
||||
<el-radio :label="3">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<el-select v-model="row.condition" placeholder="请选择审批人">
|
||||
<el-option
|
||||
v-for="item in conditionList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="值">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.conditionValue" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- {{ fieldList }} -->
|
||||
<!-- 用户审批节点 -->
|
||||
|
||||
<!-- 系统任务节点 -->
|
||||
</div>
|
||||
|
||||
<div v-if="node.type == 'bpmn:endEvent'">结束</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { adminLists } from '@/api/perms/admin'
|
||||
import { deptLists } from '@/api/org/department'
|
||||
import { postAll } from '@/api/org/post'
|
||||
|
||||
import UserTask from './PropertyPanel/UserTask.vue'
|
||||
import FieldAuth from './PropertyPanel/FieldAuth.vue'
|
||||
export default {
|
||||
name: 'PropertyPanel',
|
||||
props: {},
|
||||
components: {
|
||||
UserTask,
|
||||
FieldAuth
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drawerVisible: false,
|
||||
adminUserList: [],
|
||||
deptList: [],
|
||||
postList: [],
|
||||
|
||||
node: {},
|
||||
properties: {
|
||||
userType: '',
|
||||
userId: '', //审批人id
|
||||
deptId: '', //审批部门id
|
||||
postId: '', //岗位id
|
||||
@@ -139,7 +105,8 @@ export default {
|
||||
*/
|
||||
fieldList: [],
|
||||
// 网关条件列表
|
||||
conditionsList: [],
|
||||
GatewayList: [],
|
||||
selectGateway: '',
|
||||
|
||||
conditionList: [
|
||||
{
|
||||
@@ -169,7 +136,9 @@ export default {
|
||||
this.properties.userId = node?.properties?.userId || ''
|
||||
this.properties.deptId = node?.properties?.deptId || ''
|
||||
this.properties.postId = node?.properties?.postId || ''
|
||||
this.properties.fieldAuth = node?.properties?.fieldAuth || {}
|
||||
this.properties.fieldAuth = node?.properties?.fieldAuth
|
||||
? { ...node?.properties?.fieldAuth }
|
||||
: {}
|
||||
|
||||
this.fieldList = fieldList.map((item) => {
|
||||
let auth = 1
|
||||
@@ -183,9 +152,6 @@ export default {
|
||||
auth: auth
|
||||
}
|
||||
})
|
||||
this.getAdminList()
|
||||
this.getDeptList()
|
||||
this.getPostList()
|
||||
this.drawerVisible = true
|
||||
},
|
||||
close() {
|
||||
@@ -201,46 +167,62 @@ export default {
|
||||
this.setProperties('deptId', this.properties.deptId)
|
||||
this.setProperties('postId', this.properties.postId)
|
||||
},
|
||||
getAdminList() {
|
||||
adminLists().then((res) => {
|
||||
console.log('res', res)
|
||||
this.adminUserList = res.lists.map((item) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.nickname
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getDeptList() {
|
||||
deptLists().then((res) => {
|
||||
console.log('res', res)
|
||||
this.deptList = res.map((item) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getPostList() {
|
||||
postAll().then((res) => {
|
||||
console.log('res', res)
|
||||
this.postList = res.map((item) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// getAdminList() {
|
||||
// adminLists().then((res) => {
|
||||
// console.log('res', res)
|
||||
// this.adminUserList = res.lists.map((item) => {
|
||||
// return {
|
||||
// value: item.id,
|
||||
// label: item.nickname
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
// getDeptList() {
|
||||
// deptLists().then((res) => {
|
||||
// console.log('res', res)
|
||||
// this.deptList = res.map((item) => {
|
||||
// return {
|
||||
// value: item.id,
|
||||
// label: item.name
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
// getPostList() {
|
||||
// postAll().then((res) => {
|
||||
// console.log('res', res)
|
||||
// this.postList = res.map((item) => {
|
||||
// return {
|
||||
// value: item.id,
|
||||
// label: item.name
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
setProperties(key, val) {
|
||||
this.$emit('setProperties', this.node, {
|
||||
[key]: val
|
||||
})
|
||||
},
|
||||
|
||||
addCondition() {
|
||||
// this.selectGateway
|
||||
|
||||
this.fieldList.find((item) => {
|
||||
if (item.id === this.selectGateway) {
|
||||
// item.condition = this.GatewayList[this.GatewayList.length - 1].condition
|
||||
// item.value = this.GatewayList[this.GatewayList.length - 1].value
|
||||
this.GatewayList.push({
|
||||
id: item.id,
|
||||
label: item.label,
|
||||
value: '',
|
||||
condition: ''
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user