| 提交 | 用户 | 时间 | ||
| 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"> | |
| 28 | <div> | |
| 29 | <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules"> | |
| 30 | <el-form-item label="抄送人设置" prop="candidateStrategy"> | |
| 31 | <el-radio-group | |
| 32 | v-model="configForm.candidateStrategy" | |
| 33 | @change="changeCandidateStrategy" | |
| 34 | > | |
| 35 | <el-radio | |
| 36 | v-for="(dict, index) in copyUserStrategies" | |
| 37 | :key="index" | |
| 38 | :value="dict.value" | |
| 39 | :label="dict.value" | |
| 40 | > | |
| 41 | {{ dict.label }} | |
| 42 | </el-radio> | |
| 43 | </el-radio-group> | |
| 44 | </el-form-item> | |
| 45 | ||
| 46 | <el-form-item | |
| 47 | v-if="configForm.candidateStrategy == CandidateStrategy.ROLE" | |
| 48 | label="指定角色" | |
| 49 | prop="roleIds" | |
| 50 | > | |
| 51 | <el-select v-model="configForm.roleIds" clearable multiple style="width: 100%"> | |
| 52 | <el-option | |
| 53 | v-for="item in roleOptions" | |
| 54 | :key="item.id" | |
| 55 | :label="item.name" | |
| 56 | :value="item.id" | |
| 57 | /> | |
| 58 | </el-select> | |
| 59 | </el-form-item> | |
| 60 | <el-form-item | |
| 61 | v-if=" | |
| 62 | configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER || | |
| 63 | configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER || | |
| 64 | configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER | |
| 65 | " | |
| 66 | label="指定部门" | |
| 67 | prop="deptIds" | |
| 68 | span="24" | |
| 69 | > | |
| 70 | <el-tree-select | |
| 71 | ref="treeRef" | |
| 72 | v-model="configForm.deptIds" | |
| 73 | :data="deptTreeOptions" | |
| 74 | :props="defaultProps" | |
| 75 | empty-text="加载中，请稍后" | |
| 76 | multiple | |
| 77 | node-key="id" | |
| 78 | style="width: 100%" | |
| 79 | show-checkbox | |
| 80 | /> | |
| 81 | </el-form-item> | |
| 82 | <el-form-item | |
| 83 | v-if="configForm.candidateStrategy == CandidateStrategy.POST" | |
| 84 | label="指定岗位" | |
| 85 | prop="postIds" | |
| 86 | span="24" | |
| 87 | > | |
| 88 | <el-select v-model="configForm.postIds" clearable multiple style="width: 100%"> | |
| 89 | <el-option | |
| 90 | v-for="item in postOptions" | |
| 91 | :key="item.id" | |
| 92 | :label="item.name" | |
| 93 | :value="item.id!" | |
| 94 | /> | |
| 95 | </el-select> | |
| 96 | </el-form-item> | |
| 97 | <el-form-item | |
| 98 | v-if="configForm.candidateStrategy == CandidateStrategy.USER" | |
| 99 | label="指定用户" | |
| 100 | prop="userIds" | |
| 101 | span="24" | |
| 102 | > | |
| 103 | <el-select v-model="configForm.userIds" clearable multiple style="width: 100%"> | |
| 104 | <el-option | |
| 105 | v-for="item in userOptions" | |
| 106 | :key="item.id" | |
| 107 | :label="item.nickname" | |
| 108 | :value="item.id" | |
| 109 | /> | |
| 110 | </el-select> | |
| 111 | </el-form-item> | |
| 112 | <el-form-item | |
| 113 | v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP" | |
| 114 | label="指定用户组" | |
| 115 | prop="userGroups" | |
| 116 | > | |
| 117 | <el-select v-model="configForm.userGroups" clearable multiple style="width: 100%"> | |
| 118 | <el-option | |
| 119 | v-for="item in userGroupOptions" | |
| 120 | :key="item.id" | |
| 121 | :label="item.name" | |
| 122 | :value="item.id" | |
| 123 | /> | |
| 124 | </el-select> | |
| 125 | </el-form-item> | |
| 126 | <el-form-item | |
| 127 | v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER" | |
| 128 | label="表单内用户字段" | |
| 129 | prop="formUser" | |
| 130 | > | |
| 131 | <el-select v-model="configForm.formUser" clearable style="width: 100%"> | |
| 132 | <el-option | |
| 133 | v-for="(item, idx) in userFieldOnFormOptions" | |
| 134 | :key="idx" | |
| 135 | :label="item.title" | |
| 136 | :value="item.field" | |
| 137 | :disabled ="!item.required" | |
| 138 | /> | |
| 139 | </el-select> | |
| 140 | </el-form-item> | |
| 141 | <el-form-item | |
| 142 | v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER" | |
| 143 | label="表单内部门字段" | |
| 144 | prop="formDept" | |
| 145 | > | |
| 146 | <el-select v-model="configForm.formDept" clearable style="width: 100%"> | |
| 147 | <el-option | |
| 148 | v-for="(item, idx) in deptFieldOnFormOptions" | |
| 149 | :key="idx" | |
| 150 | :label="item.title" | |
| 151 | :value="item.field" | |
| 152 | :disabled ="!item.required" | |
| 153 | /> | |
| 154 | </el-select> | |
| 155 | </el-form-item> | |
| 156 | <el-form-item | |
| 157 | v-if=" | |
| 158 | configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER || | |
| 159 | configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER || | |
| 160 | configForm.candidateStrategy == | |
| 161 | CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER || | |
| 162 | configForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER | |
| 163 | " | |
| 164 | :label="deptLevelLabel!" | |
| 165 | prop="deptLevel" | |
| 166 | span="24" | |
| 167 | > | |
| 168 | <el-select v-model="configForm.deptLevel" clearable> | |
| 169 | <el-option | |
| 170 | v-for="(item, index) in MULTI_LEVEL_DEPT" | |
| 171 | :key="index" | |
| 172 | :label="item.label" | |
| 173 | :value="item.value" | |
| 174 | /> | |
| 175 | </el-select> | |
| 176 | </el-form-item> | |
| 177 | <el-form-item | |
| 178 | v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION" | |
| 179 | label="流程表达式" | |
| 180 | prop="expression" | |
| 181 | > | |
| 182 | <el-input | |
| 183 | type="textarea" | |
| 184 | v-model="configForm.expression" | |
| 185 | clearable | |
| 186 | style="width: 100%" | |
| 187 | /> | |
| 188 | </el-form-item> | |
| 189 | </el-form> | |
| 190 | </div> | |
| 191 | </el-tab-pane> | |
| 192 | <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10"> | |
| 193 | <div class="field-setting-pane"> | |
| 194 | <div class="field-setting-desc">字段权限</div> | |
| 195 | <div class="field-permit-title"> | |
| 196 | <div class="setting-title-label first-title"> 字段名称 </div> | |
| 197 | <div class="other-titles"> | |
| 198 | <span class="setting-title-label">只读</span> | |
| 199 | <span class="setting-title-label">可编辑</span> | |
| 200 | <span class="setting-title-label">隐藏</span> | |
| 201 | </div> | |
| 202 | </div> | |
| 203 | <div | |
| 204 | class="field-setting-item" | |
| 205 | v-for="(item, index) in fieldsPermissionConfig" | |
| 206 | :key="index" | |
| 207 | > | |
| 208 | <div class="field-setting-item-label"> {{ item.title }} </div> | |
| 209 | <el-radio-group class="field-setting-item-group" v-model="item.permission"> | |
| 210 | <div class="item-radio-wrap"> | |
| 211 | <el-radio | |
| 212 | :value="FieldPermissionType.READ" | |
| 213 | size="large" | |
| 214 | :label="FieldPermissionType.WRITE" | |
| 215 | ><span></span | |
| 216 | ></el-radio> | |
| 217 | </div> | |
| 218 | <div class="item-radio-wrap"> | |
| 219 | <el-radio | |
| 220 | :value="FieldPermissionType.WRITE" | |
| 221 | size="large" | |
| 222 | :label="FieldPermissionType.WRITE" | |
| 223 | disabled | |
| 224 | ><span></span | |
| 225 | ></el-radio> | |
| 226 | </div> | |
| 227 | <div class="item-radio-wrap"> | |
| 228 | <el-radio | |
| 229 | :value="FieldPermissionType.NONE" | |
| 230 | size="large" | |
| 231 | :label="FieldPermissionType.NONE" | |
| 232 | ><span></span | |
| 233 | ></el-radio> | |
| 234 | </div> | |
| 235 | </el-radio-group> | |
| 236 | </div> | |
| 237 | </div> | |
| 238 | </el-tab-pane> | |
| 239 | </el-tabs> | |
| 240 | <template #footer> | |
| 241 | <el-divider /> | |
| 242 | <div> | |
| 243 | <el-button type="primary" @click="saveConfig">确 定</el-button> | |
| 244 | <el-button @click="closeDrawer">取 消</el-button> | |
| 245 | </div> | |
| 246 | </template> | |
| 247 | </el-drawer> | |
| 248 | </template> | |
| 249 | <script setup lang="ts"> | |
| 250 | import { | |
| 251 | SimpleFlowNode, | |
| 252 | CandidateStrategy, | |
| 253 | NodeType, | |
| 254 | CANDIDATE_STRATEGY, | |
| 255 | FieldPermissionType, | |
| 256 | MULTI_LEVEL_DEPT | |
| 257 | } from '../consts' | |
| 258 | import { | |
| 259 | useWatchNode, | |
| 260 | useDrawer, | |
| 261 | useNodeName, | |
| 262 | useFormFieldsPermission, | |
| 263 | useNodeForm, | |
| 264 | CopyTaskFormType | |
| 265 | } from '../node' | |
| 266 | import { defaultProps } from '@/utils/tree' | |
| 267 | defineOptions({ | |
| 268 | name: 'CopyTaskNodeConfig' | |
| 269 | }) | |
| 270 | const props = defineProps({ | |
| 271 | flowNode: { | |
| 272 | type: Object as () => SimpleFlowNode, | |
| 273 | required: true | |
| 274 | } | |
| 275 | }) | |
| 276 | const deptLevelLabel = computed(() => { | |
| 277 | let label = '部门负责人来源' | |
| 278 | if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) { | |
| 279 | label = label + '(指定部门向上)' | |
| 280 | } else { | |
| 281 | label = label + '(发起人部门向上)' | |
| 282 | } | |
| 283 | return label | |
| 284 | }) | |
| 285 | // 抽屉配置 | |
| 286 | const { settingVisible, closeDrawer, openDrawer } = useDrawer() | |
| 287 | // 当前节点 | |
| 288 | const currentNode = useWatchNode(props) | |
| 289 | // 节点名称 | |
| 290 | const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_TASK_NODE) | |
| 291 | // 激活的 Tab 标签页 | |
| 292 | const activeTabName = ref('user') | |
| 293 | // 表单字段权限配置 | |
| 294 | const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = | |
| 295 | useFormFieldsPermission(FieldPermissionType.READ) | |
| 296 | // 表单内用户字段选项, 必须是必填和用户选择器 | |
| 297 | const userFieldOnFormOptions = computed(() => { | |
| 298 | return formFieldOptions.filter((item) => item.type === 'UserSelect') | |
| 299 | }) | |
| 300 | // 表单内部门字段选项, 必须是必填和部门选择器 | |
| 301 | const deptFieldOnFormOptions = computed(() => { | |
| 302 | return formFieldOptions.filter((item) => item.type === 'DeptSelect') | |
| 303 | }) | |
| 304 | // 抄送人表单配置 | |
| 305 | const formRef = ref() // 表单 Ref | |
| 306 | // 表单校验规则 | |
| 307 | const formRules = reactive({ | |
| 308 | candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }], | |
| 309 | userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }], | |
| 310 | roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }], | |
| 311 | deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }], | |
| 312 | userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }], | |
| 313 | postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }], | |
| 314 | formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }], | |
| 315 | formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }], | |
| 316 | expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }] | |
| 317 | }) | |
| 318 | ||
| 319 | const { | |
| 320 | configForm: tempConfigForm, | |
| 321 | roleOptions, | |
| 322 | postOptions, | |
| 323 | userOptions, | |
| 324 | userGroupOptions, | |
| 325 | deptTreeOptions, | |
| 326 | getShowText, | |
| 327 | handleCandidateParam, | |
| 328 | parseCandidateParam | |
| 329 | } = useNodeForm(NodeType.COPY_TASK_NODE) | |
| 330 | const configForm = tempConfigForm as Ref<CopyTaskFormType> | |
| 331 | // 抄送人策略， 去掉发起人自选 和 发起人自己 | |
| 332 | const copyUserStrategies = computed(() => { | |
| 333 | return CANDIDATE_STRATEGY.filter((item) => item.value !== CandidateStrategy.START_USER) | |
| 334 | }) | |
| 335 | // 改变抄送人设置策略 | |
| 336 | const changeCandidateStrategy = () => { | |
| 337 | configForm.value.userIds = [] | |
| 338 | configForm.value.deptIds = [] | |
| 339 | configForm.value.roleIds = [] | |
| 340 | configForm.value.postIds = [] | |
| 341 | configForm.value.userGroups = [] | |
| 342 | configForm.value.deptLevel = 1 | |
| 343 | configForm.value.formUser = '' | |
| 344 | } | |
| 345 | // 保存配置 | |
| 346 | const saveConfig = async () => { | |
| 347 | activeTabName.value = 'user' | |
| 348 | if (!formRef) return false | |
| 349 | const valid = await formRef.value.validate() | |
| 350 | if (!valid) return false | |
| 351 | const showText = getShowText() | |
| 352 | if (!showText) return false | |
| 353 | currentNode.value.name = nodeName.value! | |
| 354 | currentNode.value.candidateParam = handleCandidateParam() | |
| 355 | currentNode.value.candidateStrategy = configForm.value.candidateStrategy | |
| 356 | currentNode.value.showText = showText | |
| 357 | currentNode.value.fieldsPermission = fieldsPermissionConfig.value | |
| 358 | settingVisible.value = false | |
| 359 | return true | |
| 360 | } | |
| 361 | // 显示抄送节点配置， 由父组件传过来 | |
| 362 | const showCopyTaskNodeConfig = (node: SimpleFlowNode) => { | |
| 363 | nodeName.value = node.name | |
| 364 | // 抄送人设置 | |
| 365 | configForm.value.candidateStrategy = node.candidateStrategy! | |
| 366 | parseCandidateParam(node.candidateStrategy!, node?.candidateParam) | |
| 367 | // 表单字段权限 | |
| 368 | getNodeConfigFormFields(node.fieldsPermission) | |
| 369 | } | |
| 370 | ||
| 371 | defineExpose({ openDrawer, showCopyTaskNodeConfig }) // 暴露方法给父组件 | |
| 372 | </script> | |
| 373 | ||
| 374 | <style lang="scss" scoped></style> | |
