mirror of
https://gitee.com/xiangheng/x_admin.git
synced 2025-10-05 00:02:50 +08:00
优化
This commit is contained in:
@@ -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>
|
||||
|
@@ -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>
|
||||
|
||||
|
@@ -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>
|
131
admin/src/components/flow/flowEdit/PropertyPanel/UserTask.vue
Normal file
131
admin/src/components/flow/flowEdit/PropertyPanel/UserTask.vue
Normal 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>
|
@@ -153,4 +153,3 @@ defineExpose({
|
||||
// margin: 0; /* 如果页面出现垂直滚动条,则加入此行CSS以消除之 */
|
||||
// }
|
||||
</style>
|
||||
@/api/flow/flow_history
|
||||
|
@@ -236,4 +236,3 @@ defineExpose({
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@/api/flow/flow_apply@/api/flow/flow_template
|
||||
|
@@ -227,4 +227,3 @@ const SaveViewForm = (id, form_data) => {
|
||||
}
|
||||
getLists()
|
||||
</script>
|
||||
@/api/flow/flow_apply
|
||||
|
@@ -211,4 +211,3 @@ defineExpose({
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@/api/flow/flow_history
|
||||
|
@@ -134,4 +134,3 @@ const handleDelete = async (id: number) => {
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@/api/flow/flow_history
|
||||
|
@@ -153,4 +153,3 @@ const OpenApplySubmit = async (row: any) => {
|
||||
}
|
||||
getLists()
|
||||
</script>
|
||||
@/api/flow/flow_apply@/api/flow/flow_history
|
||||
|
@@ -150,4 +150,3 @@ defineExpose({
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@/api/flow/flow_template
|
||||
|
@@ -181,4 +181,3 @@ const handleConfig = async (data: any) => {
|
||||
}
|
||||
getLists()
|
||||
</script>
|
||||
@/api/flow/flow_template
|
||||
|
Reference in New Issue
Block a user