工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
3 天以前 c9a6f7cbb5209415e626df29c7572cf40fe92b66
提交 | 用户 | 时间
3e359e 1 <template>
H 2   <el-drawer
3     :append-to-body="true"
4     v-model="settingVisible"
5     :show-close="false"
6     :size="550"
7     :before-close="saveConfig"
8   >
9     <template #header>
10       <div class="config-header">
11         <input
12           v-if="showInput"
13           type="text"
14           class="config-editable-input"
15           @blur="blurEvent()"
16           v-mountedFocus
17           v-model="nodeName"
18           :placeholder="nodeName"
19         />
20         <div v-else class="node-name">
21           {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
22         </div>
23         <div class="divide-line"></div>
24       </div>
25     </template>
26     <el-tabs type="border-card" v-model="activeTabName">
27       <el-tab-pane label="权限" name="user">
c9a6f7 28         <el-text v-if="!startUserIds || startUserIds.length === 0"> 全部成员可以发起流程 </el-text>
H 29         <el-text v-else-if="startUserIds.length == 1">
30           {{ getUserNicknames(startUserIds) }} 可发起流程
31         </el-text>
32         <el-text v-else>
33           <el-tooltip
34             class="box-item"
35             effect="dark"
36             placement="top"
37             :content="getUserNicknames(startUserIds)"
38           >
39             {{ getUserNicknames(startUserIds.slice(0,2)) }} 等 {{ startUserIds.length }} 人可发起流程
40           </el-tooltip>
41         </el-text>
3e359e 42       </el-tab-pane>
H 43       <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
44         <div class="field-setting-pane">
45           <div class="field-setting-desc">字段权限</div>
46           <div class="field-permit-title">
47             <div class="setting-title-label first-title"> 字段名称 </div>
48             <div class="other-titles">
49               <span class="setting-title-label">只读</span>
50               <span class="setting-title-label">可编辑</span>
51               <span class="setting-title-label">隐藏</span>
52             </div>
53           </div>
54           <div
55             class="field-setting-item"
56             v-for="(item, index) in fieldsPermissionConfig"
57             :key="index"
58           >
59             <div class="field-setting-item-label"> {{ item.title }} </div>
60             <el-radio-group class="field-setting-item-group" v-model="item.permission">
61               <div class="item-radio-wrap">
62                 <el-radio
63                   :value="FieldPermissionType.READ"
64                   size="large"
65                   :label="FieldPermissionType.READ"
66                   ><span></span
67                 ></el-radio>
68               </div>
69               <div class="item-radio-wrap">
70                 <el-radio
71                   :value="FieldPermissionType.WRITE"
72                   size="large"
73                   :label="FieldPermissionType.WRITE"
74                   ><span></span
75                 ></el-radio>
76               </div>
77               <div class="item-radio-wrap">
78                 <el-radio
79                   :value="FieldPermissionType.NONE"
80                   size="large"
81                   :label="FieldPermissionType.NONE"
82                   ><span></span
83                 ></el-radio>
84               </div>
85             </el-radio-group>
86           </div>
87         </div>
88       </el-tab-pane>
89     </el-tabs>
90     <template #footer>
91       <el-divider />
92       <div>
93         <el-button type="primary" @click="saveConfig">确 定</el-button>
94         <el-button @click="closeDrawer">取 消</el-button>
95       </div>
96     </template>
97   </el-drawer>
98 </template>
99 <script setup lang="ts">
100 import { SimpleFlowNode, NodeType, FieldPermissionType, START_USER_BUTTON_SETTING } from '../consts'
101 import { useWatchNode, useDrawer, useNodeName, useFormFieldsPermission } from '../node'
c9a6f7 102 import * as UserApi from '@/api/system/user'
3e359e 103 defineOptions({
H 104   name: 'StartUserNodeConfig'
105 })
106 const props = defineProps({
107   flowNode: {
108     type: Object as () => SimpleFlowNode,
109     required: true
110   }
111 })
c9a6f7 112 // 可发起流程的用户编号
H 113 const startUserIds = inject<Ref<any[]>>('startUserIds')
114 // 用户列表
115 const userOptions = inject<Ref<UserApi.UserVO[]>>('userList')
3e359e 116 // 抽屉配置
H 117 const { settingVisible, closeDrawer, openDrawer } = useDrawer()
118 // 当前节点
119 const currentNode = useWatchNode(props)
120 // 节点名称
121 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_TASK_NODE)
122 // 激活的 Tab 标签页
123 const activeTabName = ref('user')
124 // 表单字段权限配置
125 const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
126   FieldPermissionType.WRITE
127 )
c9a6f7 128 const getUserNicknames = (userIds: number[]): string => {
H 129   if (!userIds || userIds.length === 0) {
130     return ''
131   }
132   const nicknames: string[] = []
133   userIds.forEach((userId) => {
134     const found = userOptions?.value.find((item) => item.id === userId)
135     if (found && found.nickname) {
136       nicknames.push(found.nickname)
137     }
138   })
139   return nicknames.join(',')
140 }
3e359e 141 // 保存配置
H 142 const saveConfig = async () => {
143   activeTabName.value = 'user'
144   currentNode.value.name = nodeName.value!
145   currentNode.value.showText = '已设置'
146   // 设置表单权限
147   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
148   // 设置发起人的按钮权限
149   currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING
150   settingVisible.value = false
151   return true
152 }
153 // 显示发起人节点配置， 由父组件传过来
154 const showStartUserNodeConfig = (node: SimpleFlowNode) => {
155   nodeName.value = node.name
156   // 表单字段权限
157   getNodeConfigFormFields(node.fieldsPermission)
158 }
159
160 defineExpose({ openDrawer, showStartUserNodeConfig }) // 暴露方法给父组件
161 </script>
162
163 <style lang="scss" scoped></style>