优化

admin/src/components/flow/XForm/index.vue

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

admin/src/components/flow/flowEdit/PropertyPanel.vue

@@ -1,128 +1,94 @@
 <template>
-    <el-drawer v-model="drawerVisible" size="500px" :title="node?.text?.value" @close="close">
+    <el-drawer
-        <div class="setting-block">
+        v-model="drawerVisible"
-            <!-- 开始节点 -->
+        size="600px"
-            <!-- {{ node }} -->
+        :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'">
+        <!-- {{ node }} -->
-                审批节点
-                <!-- <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>
 
-                    <el-form-item label="审批部门">
+        <div v-if="node.type == 'bpmn:startEvent'">
-                        <el-select v-model="properties.deptId" placeholder="请选择审批部门">
+            开始节点
-                            <el-option
+            <FieldAuth :node="node" :properties="properties" :fieldList="fieldList"></FieldAuth>
-                                v-for="item in deptList"
+        </div>
-                                :key="item.value"
+        <div v-if="node.type == 'bpmn:userTask'">
-                                :label="item.label"
+            <UserTask :node="node" :properties="properties" :fieldList="fieldList"></UserTask>
-                                :value="item.value"
+            <FieldAuth :node="node" :properties="properties" :fieldList="fieldList"></FieldAuth>
-                            />
+        </div>
-                        </el-select>
+
-                    </el-form-item>
+        <div v-if="node.type == 'bpmn:serviceTask'">
-                    <el-form-item label="岗位">
+            <div>系统任务</div>
-                        <el-select v-model="properties.postId" placeholder="请选择岗位">
+            <div>抄送</div>
-                            <el-option
+            <div>发送邮件</div>
-                                v-for="item in postList"
+            <div>发送短信</div>
-                                :key="item.value"
+            <div>发送站内消息</div>
-                                :label="item.label"
+            <div>数据入库</div>
-                                :value="item.value"
+        </div>
-                            />
+        <div v-if="node.type == 'bpmn:exclusiveGateway'">
-                        </el-select>
+            <el-alert title="同一父级的网关只能有一个通过" type="warning" />
-                    </el-form-item>
+
-                </el-form>
+            <!-- 设置优先级 -->
+            <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'">
+            <el-table fit size="small" :data="GatewayList" style="width: 100%">
-                <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-column prop="label" label="表单"></el-table-column>
                 <el-table-column label="权限">
                     <template #default="{ row }">
-                        <el-radio-group v-model="row.auth">
+                        <el-select v-model="row.condition" placeholder="请选择审批人">
-                            <el-radio :label="1">读写</el-radio>
+                            <el-option
-                            <el-radio :label="2">可读</el-radio>
+                                v-for="item in conditionList"
-                            <el-radio :label="3">隐藏</el-radio>
+                                :key="item.value"
-                        </el-radio-group>
+                                :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 UserTask from './PropertyPanel/UserTask.vue'
-import { deptLists } from '@/api/org/department'
+import FieldAuth from './PropertyPanel/FieldAuth.vue'
-import { postAll } from '@/api/org/post'
-
 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() {
+        // getAdminList() {
-            adminLists().then((res) => {
+        //     adminLists().then((res) => {
-                console.log('res', res)
+        //         console.log('res', res)
-                this.adminUserList = res.lists.map((item) => {
+        //         this.adminUserList = res.lists.map((item) => {
-                    return {
+        //             return {
-                        value: item.id,
+        //                 value: item.id,
-                        label: item.nickname
+        //                 label: item.nickname
-                    }
+        //             }
-                })
+        //         })
-            })
+        //     })
-        },
+        // },
-        getDeptList() {
+        // getDeptList() {
-            deptLists().then((res) => {
+        //     deptLists().then((res) => {
-                console.log('res', res)
+        //         console.log('res', res)
-                this.deptList = res.map((item) => {
+        //         this.deptList = res.map((item) => {
-                    return {
+        //             return {
-                        value: item.id,
+        //                 value: item.id,
-                        label: item.name
+        //                 label: item.name
-                    }
+        //             }
-                })
+        //         })
-            })
+        //     })
-        },
+        // },
-        getPostList() {
+        // getPostList() {
-            postAll().then((res) => {
+        //     postAll().then((res) => {
-                console.log('res', res)
+        //         console.log('res', res)
-                this.postList = res.map((item) => {
+        //         this.postList = res.map((item) => {
-                    return {
+        //             return {
-                        value: item.id,
+        //                 value: item.id,
-                        label: item.name
+        //                 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>
 

admin/src/components/flow/flowEdit/PropertyPanel/FieldAuth.vue

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

admin/src/components/flow/flowEdit/PropertyPanel/UserTask.vue

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

admin/src/views/flow/flow_apply/components/apply_submit.vue

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

admin/src/views/flow/flow_apply/edit.vue

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

admin/src/views/flow/flow_apply/index.vue

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

admin/src/views/flow/flow_history/edit.vue

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

admin/src/views/flow/flow_history/index.vue

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

admin/src/views/flow/flow_history/todo.vue

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

admin/src/views/flow/flow_template/edit.vue

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

admin/src/views/flow/flow_template/index.vue

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