This commit is contained in:
xiangheng
2023-12-24 02:00:22 +08:00
parent 2ab342d2c2
commit 1dbbef2cfd
12 changed files with 303 additions and 154 deletions

View File

@@ -17,9 +17,13 @@ function getFieldWidgets() {
}
function getData() {
return new Promise((resolve, reject) => {
const jsonData = designerRef.value.getFormJson()
console.log('jsonData', jsonData)
resolve({ formData: jsonData })
try {
const jsonData = designerRef.value.getFormJson()
console.log('jsonData', jsonData)
resolve({ formData: jsonData })
} catch (error) {
reject(error)
}
})
}
const props = defineProps({
@@ -44,7 +48,7 @@ defineExpose({
</script>
<style lang="scss">
// body {
// margin: 0; /* 如果页面出现垂直滚动条则加入此行CSS以消除之 */
// }
.el-range-editor.el-input__wrapper {
box-sizing: border-box;
}
</style>

View File

@@ -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>

View File

@@ -0,0 +1,40 @@
<template>
<div style="padding-bottom: 10px">
<el-card header="表单项权限">
<el-table
v-if="['bpmn:startEvent', 'bpmn:userTask'].includes(props.node.type)"
fit
size="small"
:data="props.fieldList"
:show-header="false"
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>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script setup>
const props = defineProps({
node: {
type: Object,
default: () => ({})
},
fieldList: {
type: Array,
default: () => []
}
})
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,131 @@
<template>
<div class="user-task" style="padding-bottom: 10px">
<el-card header="审批用户">
<!-- 审批节点 -->
<!-- <div>设置审批人具体人员部门负责人岗位</div> -->
<!-- {{ adminUserList }} -->
<el-form label-width="80px">
<el-form-item label="">
<el-radio-group v-model="props.properties.userType">
<el-radio :label="1">指定部门岗位</el-radio>
<el-radio :label="2">用户部门负责人部门需要加一个负责人字段</el-radio>
<el-radio :label="3">指定审批人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="指定部门" v-if="props.properties.userType == 1">
<el-select
v-model="props.properties.deptId"
placeholder="请选择审批部门"
style="width: 100%"
>
<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="岗位" v-if="[1].includes(props.properties.userType)">
<el-select
v-model="props.properties.postId"
placeholder="请选择岗位"
style="width: 100%"
>
<el-option
v-for="item in postList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="审批人" v-if="props.properties.userType == 3">
<el-select
v-model="props.properties.userId"
placeholder="请选择审批人"
style="width: 100%"
clearable
filterable
>
<el-option
v-for="item in adminUserList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { adminLists } from '@/api/perms/admin'
import { deptLists } from '@/api/org/department'
import { postAll } from '@/api/org/post'
const props = defineProps({
node: {
type: Object,
default: () => ({})
},
properties: {
type: Object,
default: () => ({})
},
fieldList: {
type: Array,
default: () => []
}
})
const adminUserList = ref([])
const deptList = ref([])
const postList = ref([])
function getAdminList() {
adminLists().then((res) => {
adminUserList.value = res.lists.map((item) => {
return {
value: item.id,
label: item.nickname
}
})
})
}
function getDeptList() {
deptLists().then((res) => {
deptList.value = res.map((item) => {
return {
value: item.id,
label: item.name
}
})
})
}
function getPostList() {
postAll().then((res) => {
postList.value = res.map((item) => {
return {
value: item.id,
label: item.name
}
})
})
}
onMounted(() => {
getAdminList()
getDeptList()
getPostList()
})
</script>
<style lang="scss">
.user-task {
user-select: none;
}
</style>

View File

@@ -153,4 +153,3 @@ defineExpose({
// margin: 0; /* 如果页面出现垂直滚动条则加入此行CSS以消除之 */
// }
</style>
@/api/flow/flow_history

View File

@@ -236,4 +236,3 @@ defineExpose({
getDetail
})
</script>
@/api/flow/flow_apply@/api/flow/flow_template

View File

@@ -227,4 +227,3 @@ const SaveViewForm = (id, form_data) => {
}
getLists()
</script>
@/api/flow/flow_apply

View File

@@ -211,4 +211,3 @@ defineExpose({
getDetail
})
</script>
@/api/flow/flow_history

View File

@@ -134,4 +134,3 @@ const handleDelete = async (id: number) => {
getLists()
</script>
@/api/flow/flow_history

View File

@@ -153,4 +153,3 @@ const OpenApplySubmit = async (row: any) => {
}
getLists()
</script>
@/api/flow/flow_apply@/api/flow/flow_history

View File

@@ -150,4 +150,3 @@ defineExpose({
getDetail
})
</script>
@/api/flow/flow_template

View File

@@ -181,4 +181,3 @@ const handleConfig = async (data: any) => {
}
getLists()
</script>
@/api/flow/flow_template