|
|
@@ -1,340 +1,212 @@
|
|
|
<template>
|
|
|
- <div class="between">
|
|
|
- <el-form
|
|
|
- ref="formRef"
|
|
|
- :model="form"
|
|
|
- label-width="120px"
|
|
|
- size="small"
|
|
|
- :rules="rules"
|
|
|
- :disabled="disabled"
|
|
|
- >
|
|
|
- <slot name="form-item-task-nodeCode" :model="form" field="nodeCode">
|
|
|
- <el-form-item label="节点编码">
|
|
|
- <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot name="form-item-task-nodeName" :model="form" field="nodeName">
|
|
|
- <el-form-item label="节点名称">
|
|
|
- <el-input v-model="form.nodeName" :disabled="disabled"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot name="form-item-task-collaborativeWay" :model="form" field="collaborativeWay">
|
|
|
- <el-form-item label="协作方式">
|
|
|
- <el-radio-group v-model="form.collaborativeWay" @change="collaborativeWayChange">
|
|
|
- <el-radio label="1" v-if="form.collaborativeWay === '1'">
|
|
|
- <span class="flex-hc">
|
|
|
- 或签
|
|
|
- <el-tooltip class="box-item" effect="dark" content="只需一个人审批">
|
|
|
- <el-icon :size="14" class="ml5">
|
|
|
- <WarningFilled />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- </el-radio>
|
|
|
- <el-radio label="2" v-if="form.collaborativeWay === '2'">
|
|
|
- <span class="flex-hc">
|
|
|
- 票签
|
|
|
- <el-tooltip class="box-item" effect="dark" content="部分办理人审批，只支持选择用户">
|
|
|
- <el-icon :size="14" class="ml5">
|
|
|
- <WarningFilled />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- </el-radio>
|
|
|
- <el-radio label="3" v-if="form.collaborativeWay === '3'">
|
|
|
- <span class="flex-hc">
|
|
|
- 会签
|
|
|
- <el-tooltip
|
|
|
- class="box-item"
|
|
|
- effect="dark"
|
|
|
- content="所有办理都需要审批，只支持选择用户"
|
|
|
- >
|
|
|
- <el-icon :size="14" class="ml5">
|
|
|
- <WarningFilled />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot
|
|
|
- name="form-item-task-nodeRatio"
|
|
|
- :model="form"
|
|
|
- field="nodeRatio"
|
|
|
- v-if="form.collaborativeWay === '2'"
|
|
|
+ <a-form v-model="computedModelValue" :config="config" :disabled="disabled" :span="24">
|
|
|
+ <template #permissionFlag>
|
|
|
+ <el-select
|
|
|
+ v-if="computedModelValue.collaborativeWay === '1'"
|
|
|
+ v-model="computedModelValue.permissionFlagArr"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :disabled="disabled"
|
|
|
>
|
|
|
- <el-form-item label="票签占比" prop="nodeRatio">
|
|
|
- <el-input v-model="form.nodeRatio" type="number" placeholder="请输入"></el-input>
|
|
|
- <div class="placeholder">票签比例范围：(0-100)的值</div>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot name="form-item-task-permissionFlag" :model="form" field="permissionFlag">
|
|
|
- <el-tooltip effect="dark" :content="userNameList" :disabled="!disabled">
|
|
|
- <el-form-item label="办理人选择">
|
|
|
- <el-select
|
|
|
- v-model="form.permissionFlag"
|
|
|
- allow-create
|
|
|
- multiple
|
|
|
- collapse-tags
|
|
|
- :disabled="disabled"
|
|
|
- :clearable="!disabled"
|
|
|
- filterable
|
|
|
- v-if="form.collaborativeWay === '1'"
|
|
|
- >
|
|
|
- <el-option-group
|
|
|
- v-for="groupOption in groupOptions"
|
|
|
- :key="groupOption.label"
|
|
|
- :label="groupOption.label"
|
|
|
- :disabled="disabled"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in groupOption.options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-option-group>
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-else
|
|
|
- v-model="form.permissionFlag"
|
|
|
- multiple
|
|
|
- collapse-tags
|
|
|
- ref="userSelect"
|
|
|
- :disabled="disabled"
|
|
|
- :clearable="!disabled"
|
|
|
- @focus="initUser"
|
|
|
- popper-class="dialogSelect"
|
|
|
- :popper-append-to-body="false"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in form.permissionFlag"
|
|
|
- :key="item"
|
|
|
- :label="item"
|
|
|
- :value="item"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-tooltip>
|
|
|
- </slot>
|
|
|
- <slot name="form-item-task-skipAnyNode" :model="form" field="skipAnyNode">
|
|
|
- <el-form-item label="是否跳转任意节点">
|
|
|
- <el-radio-group v-model="form.skipAnyNode">
|
|
|
- <el-radio label="N">否</el-radio>
|
|
|
- <el-radio label="Y">是</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot name="form-item-task-listenerType" :model="form" field="listenerType">
|
|
|
- <el-form-item label="监听器类型">
|
|
|
- <el-select v-model="form.listenerType" multiple>
|
|
|
- <el-option label="任务创建" value="create"></el-option>
|
|
|
- <el-option label="任务开始办理" value="start"></el-option>
|
|
|
- <el-option label="分派监听器" value="assignment"></el-option>
|
|
|
- <el-option label="权限认证" value="permission"></el-option>
|
|
|
- <el-option label="任务完成" value="finish"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot name="form-item-task-listenerPath" :model="form" field="listenerPath">
|
|
|
- <el-form-item
|
|
|
- label="监听器路径"
|
|
|
- description="输入监听器的路径，以@@分隔,顺序与监听器类型一致"
|
|
|
+ <el-option-group
|
|
|
+ v-for="groupOption in groupOptions"
|
|
|
+ :key="groupOption.label"
|
|
|
+ :label="groupOption.label"
|
|
|
+ :disabled="disabled"
|
|
|
>
|
|
|
- <el-input type="textarea" v-model="form.listenerPath" rows="8"></el-input>
|
|
|
- <el-tooltip
|
|
|
- class="box-item"
|
|
|
- effect="dark"
|
|
|
- content="输入监听器的路径，以@@分隔，顺序与监听器类型一致"
|
|
|
+ <el-option
|
|
|
+ v-for="item in groupOption.options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
>
|
|
|
- <el-icon :size="14" class="mt5">
|
|
|
- <WarningFilled />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot name="form-item-task-formCustom" :model="form" field="formCustom">
|
|
|
- <el-form-item label="审批表单是否自定义">
|
|
|
- <el-select v-model="form.formCustom">
|
|
|
- <el-option label="使用流程表单" :value="''"></el-option>
|
|
|
- <!-- <el-option label="节点自定义表单" value="Y"></el-option> -->
|
|
|
- <el-option label="节点表单路径" value="N"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- <slot
|
|
|
- name="form-item-task-formPath"
|
|
|
- :model="form"
|
|
|
- field="formPath"
|
|
|
- v-if="form.formCustom === 'N'"
|
|
|
+ </el-option>
|
|
|
+ </el-option-group>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-else
|
|
|
+ v-model="computedModelValue.permissionFlagArr"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :disabled="disabled"
|
|
|
>
|
|
|
- <el-form-item label="审批表单路径">
|
|
|
- <el-input v-model="form.formPath"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </slot>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <!-- 权限标识：会签票签选择用户 -->
|
|
|
- <el-dialog title="用户选择" v-if="userVisible" v-model="userVisible" width="80%" append-to-body>
|
|
|
- <!-- <selectUser v-model:selectUser="form.permissionFlag" v-model:userVisible="userVisible" @handleUserSelect="handleUserSelect"></selectUser>-->
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </a-form>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { WarningFilled } from '@element-plus/icons-vue'
|
|
|
+import AForm from '@/components/AForm/index.vue'
|
|
|
+import { StrAnyObj } from '@/typings'
|
|
|
+import { FormConfigType } from '@/components/AForm/type'
|
|
|
import { getListApi as getRoleListApi } from '@/api/system/role'
|
|
|
import { getListApi as getUserListApi } from '@/api/system/user'
|
|
|
import { getListApi as getDeptListApi } from '@/api/system/dept'
|
|
|
-import { getUsernameApi } from '@/api/flow/definition'
|
|
|
|
|
|
-const { proxy } = getCurrentInstance()
|
|
|
+const groupOptions = ref([])
|
|
|
+const options = ref([])
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- modelValue: {
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
- return {}
|
|
|
- }
|
|
|
- },
|
|
|
- disabled: {
|
|
|
- // 是否禁止
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
+const props = withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ modelValue: StrAnyObj
|
|
|
+ disabled: boolean
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ disabled: false
|
|
|
}
|
|
|
-})
|
|
|
+)
|
|
|
|
|
|
-const form = ref(props.modelValue)
|
|
|
-const userNameList = ref('')
|
|
|
-const groupOptions = ref([])
|
|
|
-const rules = reactive({
|
|
|
- nodeRatio: [
|
|
|
- { required: false, message: '请输入', trigger: 'change' },
|
|
|
- {
|
|
|
- pattern: /^(?:[1-9]\d?|0\.\d{1,3}|[1-9]\d?\.\d{1,3})$/,
|
|
|
- message: '请输入(0, 100)的值，最多保留三位小数',
|
|
|
- trigger: ['change', 'blur']
|
|
|
- }
|
|
|
- ]
|
|
|
-})
|
|
|
-const userVisible = ref(false)
|
|
|
-const emit = defineEmits(['change'])
|
|
|
+const emits = defineEmits(['update:modelValue'])
|
|
|
|
|
|
-watch(
|
|
|
- () => form,
|
|
|
- (n) => {
|
|
|
- if (n) {
|
|
|
- emit('change', n)
|
|
|
- }
|
|
|
+const computedModelValue = computed({
|
|
|
+ get() {
|
|
|
+ return props.modelValue
|
|
|
},
|
|
|
- { deep: true }
|
|
|
-)
|
|
|
-
|
|
|
-// 根据id查用户名
|
|
|
-function getIdReverseDisplayName() {
|
|
|
- if (form.value.collaborativeWay !== '1') {
|
|
|
- getUsernameApi(form.value.permissionFlag.join(',')).then((res) => {
|
|
|
- userNameList.value = res.data ? res.data.map((e) => e.nickName).join(',') : ''
|
|
|
- })
|
|
|
+ set(newValue) {
|
|
|
+ emits('update:modelValue', newValue)
|
|
|
}
|
|
|
-}
|
|
|
+})
|
|
|
|
|
|
-/** 选择角色权限范围触发 */
|
|
|
-function getPermissionFlag() {
|
|
|
- if (form.value.permissionFlag) {
|
|
|
- form.value.permissionFlag = form.value.permissionFlag.split(',')
|
|
|
- }
|
|
|
- if (form.value.listenerType) {
|
|
|
- form.value.listenerType = form.value.listenerType.split(',')
|
|
|
+const config: FormConfigType[] = [
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ prop: 'nodeCode',
|
|
|
+ label: '节点编码'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ prop: 'nodeName',
|
|
|
+ label: '节点名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'radio',
|
|
|
+ prop: 'collaborativeWay',
|
|
|
+ label: '协作方式',
|
|
|
+ option: [
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ label: '或签',
|
|
|
+ disabled: () => props.modelValue.collaborativeWay !== '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ label: '票签',
|
|
|
+ disabled: () => props.modelValue.collaborativeWay !== '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '3',
|
|
|
+ label: '会签',
|
|
|
+ disabled: () => props.modelValue.collaborativeWay !== '3'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inputNumber',
|
|
|
+ prop: 'nodeRatioNumber',
|
|
|
+ label: '票签占比',
|
|
|
+ min: 0.01,
|
|
|
+ max: 99.99,
|
|
|
+ precision: 2,
|
|
|
+ if: () => props.modelValue.collaborativeWay === '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'slot',
|
|
|
+ prop: 'permissionFlag',
|
|
|
+ label: '办理人选择'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'radio',
|
|
|
+ prop: 'skipAnyNode',
|
|
|
+ label: '跳转任意节点',
|
|
|
+ option: [
|
|
|
+ { key: 'N', label: '否' },
|
|
|
+ { key: 'Y', label: '是' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'select',
|
|
|
+ prop: 'listenerTypeArr',
|
|
|
+ label: '监听器类型',
|
|
|
+ multiple: true,
|
|
|
+ option: [
|
|
|
+ { key: 'create', label: '任务创建' },
|
|
|
+ { key: 'start', label: '任务开始办理' },
|
|
|
+ { key: 'assignment', label: '分派监听器' },
|
|
|
+ { key: 'permission', label: '权限认证' },
|
|
|
+ { key: 'finish', label: '任务完成' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ itemType: 'textarea',
|
|
|
+ prop: 'listenerPath',
|
|
|
+ label: '监听器路径',
|
|
|
+ rows: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'radio',
|
|
|
+ prop: 'formCustom',
|
|
|
+ label: '审批表单',
|
|
|
+ option: [
|
|
|
+ { key: '1', label: '流程表单' },
|
|
|
+ { key: '2', label: '节点表单' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ prop: 'formPath',
|
|
|
+ label: '节点表单路径',
|
|
|
+ if: () => props.modelValue.formCustom === '2'
|
|
|
}
|
|
|
- getRoleListApi({ status: 1 }).then((resp) => {
|
|
|
- let groupOptionCreateBy = {
|
|
|
- label: '创建人',
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: 'warmFlowInitiator',
|
|
|
- label: '流程发起人'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- groupOptions.value.push(groupOptionCreateBy)
|
|
|
- let groupOption = {
|
|
|
- label: '角色',
|
|
|
- options: resp.map((item) => {
|
|
|
- return {
|
|
|
- value: 'role:' + item.id,
|
|
|
- label: item.name
|
|
|
- }
|
|
|
- })
|
|
|
+]
|
|
|
+
|
|
|
+// 选择角色权限范围触发
|
|
|
+async function getPermissionFlag() {
|
|
|
+ const roleListApi = getRoleListApi({ status: 1 })
|
|
|
+ const userListApi = getUserListApi({ status: 1 })
|
|
|
+ const deptListApi = getDeptListApi({ status: 1 })
|
|
|
+
|
|
|
+ options.value = (await userListApi).map((item) => {
|
|
|
+ return {
|
|
|
+ value: item.id,
|
|
|
+ label: `用户:${item.nickname}`
|
|
|
}
|
|
|
- groupOptions.value.push(groupOption)
|
|
|
- getUserListApi({ status: 1 }).then((resp) => {
|
|
|
- let groupOption = {
|
|
|
- label: '用户',
|
|
|
- options: resp.map((item) => {
|
|
|
- return {
|
|
|
- value: item.id,
|
|
|
- label: item.nickname
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- groupOptions.value.push(groupOption)
|
|
|
- getDeptListApi().then((resp) => {
|
|
|
- let groupOption = {
|
|
|
- label: '部门',
|
|
|
- options: resp.map((item) => {
|
|
|
- return {
|
|
|
- value: 'dept:' + item.id,
|
|
|
- label: item.name
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- groupOptions.value.push(groupOption)
|
|
|
- if (props.disabled && form.value.collaborativeWay === '1') {
|
|
|
- let userNameList = []
|
|
|
- groupOptions.value.forEach((e) => {
|
|
|
- e.options.forEach((o) => {
|
|
|
- if (form.value.permissionFlag.includes(o.value)) userNameList.push(o.label)
|
|
|
- })
|
|
|
- })
|
|
|
- userNameList.value = userNameList.join(',')
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
})
|
|
|
-}
|
|
|
|
|
|
-function collaborativeWayChange(val) {
|
|
|
- form.value.permissionFlag = []
|
|
|
- form.value.nodeRatio = val === '1' ? '0.000' : val === '3' ? '100.000' : ''
|
|
|
-}
|
|
|
+ groupOptions.value.push({
|
|
|
+ label: '用户',
|
|
|
+ options: options.value
|
|
|
+ })
|
|
|
|
|
|
-// 打开用户选择弹窗
|
|
|
-function initUser() {
|
|
|
- userVisible.value = true
|
|
|
- proxy.$refs.userSelect.blur()
|
|
|
-}
|
|
|
+ groupOptions.value.push({
|
|
|
+ label: '部门',
|
|
|
+ options: (await deptListApi).map((item) => {
|
|
|
+ return {
|
|
|
+ value: `dept:${item.id}`,
|
|
|
+ label: `部门:${item.name}`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
|
|
|
-// 获取选中用户数据
|
|
|
-function handleUserSelect(checkedItemList) {
|
|
|
- form.value.permissionFlag = checkedItemList.map((e) => {
|
|
|
- return e.userId
|
|
|
+ groupOptions.value.push({
|
|
|
+ label: '角色',
|
|
|
+ options: (await roleListApi).map((item) => {
|
|
|
+ return {
|
|
|
+ value: `role:${item.id}`,
|
|
|
+ label: `角色:${item.name}`
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
|
|
|
getPermissionFlag()
|
|
|
-if (props.disabled) getIdReverseDisplayName()
|
|
|
</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.dialogSelect {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.placeholder {
|
|
|
- color: #828f9e;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-</style>
|
24282