仿钉钉设计器- 节点增加校验逻辑

This commit is contained in:
jason 2024-06-21 09:59:16 +08:00
parent ea1e51a655
commit 88356c7b2a
4 changed files with 372 additions and 226 deletions

View File

@ -81,15 +81,16 @@ const addNode = (type: number) => {
type: NodeType.USER_TASK_NODE, type: NodeType.USER_TASK_NODE,
approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE, approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
candidateStrategy: CandidateStrategy.USER, candidateStrategy: CandidateStrategy.USER,
candidateParam: undefined, // candidateParam: undefined,
fieldsPermission: undefined, // fieldsPermission: undefined,
// //
timeoutHandler: {
enable: false
},
rejectHandler: { rejectHandler: {
type: RejectHandlerType.FINISH_PROCESS type: RejectHandlerType.FINISH_PROCESS
}, },
timeoutHandler: {
enable: false
},
childNode: props.childNode childNode: props.childNode
// //
// attributes: { // attributes: {
@ -114,12 +115,15 @@ const addNode = (type: number) => {
name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string, name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
showText: '', showText: '',
type: NodeType.COPY_TASK_NODE, type: NodeType.COPY_TASK_NODE,
candidateStrategy: CandidateStrategy.USER,
candidateParam: undefined,
fieldsPermission: undefined,
// //
attributes: { // attributes: {
candidateStrategy: CandidateStrategy.USER, // candidateStrategy: CandidateStrategy.USER,
candidateParam: undefined, // candidateParam: undefined,
fieldsPermission: undefined // fieldsPermission: undefined
}, // },
childNode: props.childNode childNode: props.childNode
} }
emits('update:childNode', data) emits('update:childNode', data)

View File

@ -181,7 +181,7 @@ export type SimpleFlowNode = {
// 多人审批方式 // 多人审批方式
approveMethod?: ApproveMethodType approveMethod?: ApproveMethodType
//通过比例 //通过比例
approveRatio: number approveRatio?: number
// 表单权限 // 表单权限
fieldsPermission?: any[] fieldsPermission?: any[]
// 审批任务超时处理 // 审批任务超时处理

View File

@ -16,19 +16,22 @@
v-mountedFocus v-mountedFocus
v-model="currentNode.name" v-model="currentNode.name"
:placeholder="currentNode.name" :placeholder="currentNode.name"
/> />
<div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div> <div v-else class="node-name"
>{{ currentNode.name }}
<Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
/></div>
<div class="divide-line"></div> <div class="divide-line"></div>
</div> </div>
</template> </template>
<el-tabs type="border-card"> <el-tabs type="border-card" v-model="activeTabName">
<el-tab-pane label="抄送人"> <el-tab-pane label="抄送人" name="user">
<div> <div>
<el-form label-position="top"> <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
<el-form-item label="抄送人设置" prop="candidateStrategy"> <el-form-item label="抄送人设置" prop="candidateStrategy">
<el-radio-group <el-radio-group
v-model="currentNode.attributes.candidateStrategy" v-model="configForm.candidateStrategy"
@change="changeCandidateStrategy" @change="changeCandidateStrategy"
> >
<el-radio <el-radio
@ -43,11 +46,16 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.ROLE" v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
label="指定角色" label="指定角色"
prop="candidateParam" prop="candidateParamArray"
> >
<el-select v-model="candidateParamArray" clearable multiple style="width: 100%"> <el-select
v-model="configForm.candidateParamArray"
clearable
multiple
style="width: 100%"
>
<el-option <el-option
v-for="item in roleOptions" v-for="item in roleOptions"
:key="item.id" :key="item.id"
@ -58,16 +66,16 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if=" v-if="
currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_MEMBER || configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_LEADER configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
" "
label="指定部门" label="指定部门"
prop="candidateParam" prop="candidateParamArray"
span="24" span="24"
> >
<el-tree-select <el-tree-select
ref="treeRef" ref="treeRef"
v-model="candidateParamArray" v-model="configForm.candidateParamArray"
:data="deptTreeOptions" :data="deptTreeOptions"
:props="defaultProps" :props="defaultProps"
empty-text="加载中,请稍后" empty-text="加载中,请稍后"
@ -78,28 +86,33 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.POST" v-if="configForm.candidateStrategy == CandidateStrategy.POST"
label="指定岗位" label="指定岗位"
prop="candidateParam" prop="candidateParamArray"
span="24" span="24"
> >
<el-select v-model="candidateParamArray" clearable multiple style="width: 100%"> <el-select
v-model="configForm.candidateParamArray"
clearable
multiple
style="width: 100%"
>
<el-option <el-option
v-for="item in postOptions" v-for="item in postOptions"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id!"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.USER" v-if="configForm.candidateStrategy == CandidateStrategy.USER"
label="指定用户" label="指定用户"
prop="candidateParam" prop="candidateParamArray"
span="24" span="24"
> >
<el-select <el-select
v-model="candidateParamArray" v-model="configForm.candidateParamArray"
clearable clearable
multiple multiple
style="width: 100%" style="width: 100%"
@ -113,11 +126,16 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.USER_GROUP" v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
label="指定用户组" label="指定用户组"
prop="candidateParam" prop="candidateParamArray"
> >
<el-select v-model="candidateParamArray" clearable multiple style="width: 100%"> <el-select
v-model="configForm.candidateParamArray"
clearable
multiple
style="width: 100%"
>
<el-option <el-option
v-for="item in userGroupOptions" v-for="item in userGroupOptions"
:key="item.id" :key="item.id"
@ -128,46 +146,43 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.EXPRESSION" v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
label="流程表达式" label="流程表达式"
prop="candidateParam" prop="candidateParamArray"
> >
<el-input <el-input
type="textarea" type="textarea"
v-model="candidateParamArray[0]" v-model="configForm.candidateParamArray[0]"
clearable clearable
style="width: 100%" style="width: 100%"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="表单字段权限" v-if ="formType === 10"> <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
<div class="field-setting-pane"> <div class="field-setting-pane">
<div class="field-setting-desc">字段权限</div> <div class="field-setting-desc">字段权限</div>
<div class="field-permit-title"> <div class="field-permit-title">
<div class="setting-title-label first-title"> <div class="setting-title-label first-title"> 字段名称 </div>
字段名称
</div>
<div class="other-titles"> <div class="other-titles">
<span class="setting-title-label">可编辑</span>
<span class="setting-title-label">只读</span> <span class="setting-title-label">只读</span>
<span class="setting-title-label">可编辑</span>
<span class="setting-title-label">隐藏</span> <span class="setting-title-label">隐藏</span>
</div> </div>
</div> </div>
<div <div
class="field-setting-item" class="field-setting-item"
v-for="(item, index) in currentNode.attributes.fieldsPermission" v-for="(item, index) in configForm.fieldsPermission"
:key="index" :key="index"
> >
<div class="field-setting-item-label"> {{ item.title }} </div> <div class="field-setting-item-label"> {{ item.title }} </div>
<el-radio-group class="field-setting-item-group" v-model="item.permission"> <el-radio-group class="field-setting-item-group" v-model="item.permission">
<div class="item-radio-wrap"> <div class="item-radio-wrap">
<el-radio value="1" size="large" label="1" disabled><span></span></el-radio> <el-radio value="1" size="large" label="1"><span></span></el-radio>
</div> </div>
<div class="item-radio-wrap"> <div class="item-radio-wrap">
<el-radio value="2" size="large" label="2"><span></span></el-radio> <el-radio value="2" size="large" label="2" disabled><span></span></el-radio>
</div> </div>
<div class="item-radio-wrap"> <div class="item-radio-wrap">
<el-radio value="3" size="large" label="3"><span></span></el-radio> <el-radio value="3" size="large" label="3"><span></span></el-radio>
@ -186,8 +201,8 @@
</template> </template>
</el-drawer> </el-drawer>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { SimpleFlowNode, CandidateStrategy,NodeType, NODE_DEFAULT_NAME } from '../consts' import { SimpleFlowNode, CandidateStrategy, NodeType, NODE_DEFAULT_NAME } from '../consts'
import { getDefaultFieldsPermission } from '../utils' import { getDefaultFieldsPermission } from '../utils'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as RoleApi from '@/api/system/role' import * as RoleApi from '@/api/system/role'
@ -196,6 +211,7 @@ import * as PostApi from '@/api/system/post'
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
import * as UserGroupApi from '@/api/bpm/userGroup' import * as UserGroupApi from '@/api/bpm/userGroup'
import { defaultProps } from '@/utils/tree' import { defaultProps } from '@/utils/tree'
import { cloneDeep } from 'lodash-es'
defineOptions({ defineOptions({
name: 'CopyTaskNodeConfig' name: 'CopyTaskNodeConfig'
}) })
@ -212,60 +228,87 @@ const currentNode = ref<SimpleFlowNode>(props.flowNode)
const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') //
const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') //
const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') //
const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') //
const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') //
const deptTreeOptions = inject('deptTree') // const deptTreeOptions = inject('deptTree') //
const formType = inject('formType') // const formType = inject('formType') //
const formFields = inject<Ref<string[]>>('formFields') const formFields = inject<Ref<string[]>>('formFields')
// //
const copyUserStrategies = computed( ()=> { const copyUserStrategies = computed(() => {
return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY) return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY).filter(
.filter(item => item.value !== CandidateStrategy.START_USER_SELECT && item.value !== CandidateStrategy.START_USER ); (item) =>
item.value !== CandidateStrategy.START_USER_SELECT &&
item.value !== CandidateStrategy.START_USER
)
}) })
// Tab
const activeTabName = ref('user')
const formRef = ref() // Ref
// const configForm = ref<any>({
const candidateParamArray = ref<any[]>([]) candidateParamArray: [],
candidateStrategy: CandidateStrategy.USER,
fieldsPermission: []
})
//
const formRules = reactive({
candidateStrategy: [{ required: true }],
candidateParamArray: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
})
// //
const closeDrawer = () => { const closeDrawer = () => {
settingVisible.value = false settingVisible.value = false
} }
// //
const saveConfig = () => { const saveConfig = async () => {
currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',') activeTabName.value = 'user'
currentNode.value.showText = getShowText() if (!formRef) return false
const valid = await formRef.value.validate()
if (!valid) return false
const showText = getShowText()
if (!showText) return false
currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
currentNode.value.candidateStrategy = configForm.value.candidateStrategy
currentNode.value.showText = showText
currentNode.value.fieldsPermission = configForm.value.fieldsPermission
settingVisible.value = false settingVisible.value = false
return true
} }
const open = () => { const open = () => {
settingVisible.value = true settingVisible.value = true
} }
// //
const setCurrentNode = (node:SimpleFlowNode) => { const setCurrentNode = (node: SimpleFlowNode) => {
currentNode.value = node; currentNode.value = node
currentNode.value.attributes.fieldsPermission = node.attributes.fieldsPermission || getDefaultFieldsPermission(formFields?.value) configForm.value.fieldsPermission =
const strCandidateParam = node.attributes?.candidateParam cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
if(strCandidateParam) { configForm.value.candidateStrategy = node.candidateStrategy
candidateParamArray.value = strCandidateParam.split(',').map(item=> +item) const strCandidateParam = node?.candidateParam
if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
configForm.value.candidateParamArray[0] = strCandidateParam
} else {
if (strCandidateParam) {
configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
}
} }
} }
defineExpose({ open, setCurrentNode }) // defineExpose({ open, setCurrentNode }) //
const changeCandidateStrategy = () => { const changeCandidateStrategy = () => {
candidateParamArray.value = [] configForm.value.candidateParamArray = []
} }
// TODO UserTaskNodeConfig ?? // TODO UserTaskNodeConfig ??
const getShowText = () : string => { const getShowText = (): string => {
let showText = '' let showText = ''
// //
if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) { if (configForm.value.candidateStrategy === CandidateStrategy.USER) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
userOptions?.value.forEach((item) => { userOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.nickname) candidateNames.push(item.nickname)
} }
}) })
@ -273,78 +316,80 @@ const getShowText = () : string => {
} }
} }
// //
if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.ROLE) { if (configForm.value.candidateStrategy === CandidateStrategy.ROLE) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
roleOptions?.value.forEach((item) => { roleOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
showText = `指定角色:${candidateNames.join(',')}` showText = `指定角色:${candidateNames.join(',')}`
} }
} }
// //
if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER if (
|| currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER ) { configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
if (candidateParamArray.value?.length > 0) { configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
) {
if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
deptOptions?.value.forEach((item) => { deptOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
if(currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER){ if (currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
showText = `部门成员:${candidateNames.join(',')}` showText = `部门成员:${candidateNames.join(',')}`
} else { } else {
showText = `部门的负责人:${candidateNames.join(',')}` showText = `部门的负责人:${candidateNames.join(',')}`
} }
} }
} }
// //
if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) { if (configForm.value.candidateStrategy === CandidateStrategy.POST) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
postOptions?.value.forEach((item) => { postOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
showText = `指定岗位: ${candidateNames.join(',')}` showText = `指定岗位: ${candidateNames.join(',')}`
} }
} }
// //
if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) { if (configForm.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
userGroupOptions?.value.forEach((item) => { userGroupOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
showText = `指定用户组: ${candidateNames.join(',')}` showText = `指定用户组: ${candidateNames.join(',')}`
} }
} }
// //
if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.EXPRESSION) { if (configForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
showText = `流程表达式:${candidateParamArray.value[0]}` showText = `流程表达式:${configForm.value.candidateParamArray[0]}`
} }
} }
return showText return showText
} }
// //
const showInput = ref(false) const showInput = ref(false)
const clickIcon = () => { const clickIcon = () => {
showInput.value = true; showInput.value = true
} }
// //
const blurEvent = () => { const blurEvent = () => {
showInput.value = false showInput.value = false
currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string currentNode.value.name =
currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string)
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -26,13 +26,13 @@
<div class="divide-line"></div> <div class="divide-line"></div>
</div> </div>
</template> </template>
<el-tabs type="border-card"> <el-tabs type="border-card" v-model="activeTabName">
<el-tab-pane label="审批人"> <el-tab-pane label="审批人" name="user">
<div> <div>
<el-form label-position="top"> <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
<el-form-item label="审批人设置" prop="candidateStrategy"> <el-form-item label="审批人设置" prop="candidateStrategy">
<el-radio-group <el-radio-group
v-model="currentNode.candidateStrategy" v-model="configForm.candidateStrategy"
@change="changeCandidateStrategy" @change="changeCandidateStrategy"
> >
<el-radio <el-radio
@ -47,11 +47,16 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.candidateStrategy == CandidateStrategy.ROLE" v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
label="指定角色" label="指定角色"
prop="candidateParam" prop="candidateParamArray"
> >
<el-select v-model="candidateParamArray" clearable multiple style="width: 100%"> <el-select
v-model="configForm.candidateParamArray"
clearable
multiple
style="width: 100%"
>
<el-option <el-option
v-for="item in roleOptions" v-for="item in roleOptions"
:key="item.id" :key="item.id"
@ -62,16 +67,16 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if=" v-if="
currentNode.candidateStrategy == CandidateStrategy.DEPT_MEMBER || configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
currentNode.candidateStrategy == CandidateStrategy.DEPT_LEADER configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
" "
label="指定部门" label="指定部门"
prop="candidateParam" prop="candidateParamArray"
span="24" span="24"
> >
<el-tree-select <el-tree-select
ref="treeRef" ref="treeRef"
v-model="candidateParamArray" v-model="configForm.candidateParamArray"
:data="deptTreeOptions" :data="deptTreeOptions"
:props="defaultProps" :props="defaultProps"
empty-text="加载中,请稍后" empty-text="加载中,请稍后"
@ -82,28 +87,33 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.candidateStrategy == CandidateStrategy.POST" v-if="configForm.candidateStrategy == CandidateStrategy.POST"
label="指定岗位" label="指定岗位"
prop="candidateParam" prop="candidateParamArray"
span="24" span="24"
> >
<el-select v-model="candidateParamArray" clearable multiple style="width: 100%"> <el-select
v-model="configForm.candidateParamArray"
clearable
multiple
style="width: 100%"
>
<el-option <el-option
v-for="item in postOptions" v-for="item in postOptions"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id!"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.candidateStrategy == CandidateStrategy.USER" v-if="configForm.candidateStrategy == CandidateStrategy.USER"
label="指定用户" label="指定用户"
prop="candidateParam" prop="candidateParamArray"
span="24" span="24"
> >
<el-select <el-select
v-model="candidateParamArray" v-model="configForm.candidateParamArray"
clearable clearable
multiple multiple
style="width: 100%" style="width: 100%"
@ -118,11 +128,16 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.candidateStrategy === CandidateStrategy.USER_GROUP" v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
label="指定用户组" label="指定用户组"
prop="candidateParam" prop="candidateParamArray"
> >
<el-select v-model="candidateParamArray" clearable multiple style="width: 100%"> <el-select
v-model="configForm.candidateParamArray"
clearable
multiple
style="width: 100%"
>
<el-option <el-option
v-for="item in userGroupOptions" v-for="item in userGroupOptions"
:key="item.id" :key="item.id"
@ -132,19 +147,19 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.candidateStrategy === CandidateStrategy.EXPRESSION" v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
label="流程表达式" label="流程表达式"
prop="candidateParam" prop="candidateParamArray"
> >
<el-input <el-input
type="textarea" type="textarea"
v-model="candidateParamArray[0]" v-model="configForm.candidateParamArray[0]"
clearable clearable
style="width: 100%" style="width: 100%"
/> />
</el-form-item> </el-form-item>
<el-form-item label="多人审批方式" prop="approveMethod"> <el-form-item label="多人审批方式" prop="approveMethod">
<el-radio-group v-model="currentNode.approveMethod" @change="approveMethodChanged"> <el-radio-group v-model="configForm.approveMethod" @change="approveMethodChanged">
<div class="flex-col"> <div class="flex-col">
<div <div
v-for="(item, index) in APPROVE_METHODS" v-for="(item, index) in APPROVE_METHODS"
@ -161,24 +176,26 @@
> >
{{ item.label }} {{ item.label }}
</el-radio> </el-radio>
<el-input-number <el-form-item prop="approveRatio">
v-model="currentNode.approveRatio" <el-input-number
:min="10" v-model="configForm.approveRatio"
:max="100" :min="10"
:step="10" :max="100"
size="small" :step="10"
v-if=" size="small"
item.value === ApproveMethodType.APPROVE_BY_RATIO && v-if="
currentNode.approveMethod === ApproveMethodType.APPROVE_BY_RATIO item.value === ApproveMethodType.APPROVE_BY_RATIO &&
" configForm.approveMethod === ApproveMethodType.APPROVE_BY_RATIO
/> "
/>
</el-form-item>
</div> </div>
</div> </div>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-divider content-position="left">审批人拒绝时</el-divider> <el-divider content-position="left">审批人拒绝时</el-divider>
<el-form-item prop="rejectHandler"> <el-form-item prop="rejectHandlerType">
<el-radio-group v-model="currentNode.rejectHandler!.type"> <el-radio-group v-model="configForm.rejectHandlerType">
<div class="flex-col"> <div class="flex-col">
<div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index"> <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
<el-radio :key="item.value" :value="item.value" :label="item.label" /> <el-radio :key="item.value" :value="item.value" :label="item.label" />
@ -188,15 +205,11 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentNode.rejectHandler!.type == RejectHandlerType.RETURN_USER_TASK" v-if="configForm.rejectHandlerType == RejectHandlerType.RETURN_USER_TASK"
label="驳回节点" label="驳回节点"
prop="rejectHandlerNode" prop="returnNodeId"
> >
<el-select <el-select v-model="configForm.returnNodeId" clearable style="width: 100%">
v-model="currentNode.rejectHandler!.returnNodeId"
clearable
style="width: 100%"
>
<el-option <el-option
v-for="item in returnTaskList" v-for="item in returnTaskList"
:key="item.id" :key="item.id"
@ -208,7 +221,7 @@
<el-divider content-position="left">审批人超时未处理时</el-divider> <el-divider content-position="left">审批人超时未处理时</el-divider>
<el-form-item label="启用开关" prop="timeoutHandlerEnable"> <el-form-item label="启用开关" prop="timeoutHandlerEnable">
<el-switch <el-switch
v-model="currentNode.timeoutHandler!.enable" v-model="configForm.timeoutHandlerEnable"
active-text="开启" active-text="开启"
inactive-text="关闭" inactive-text="关闭"
@change="timeoutHandlerChange" @change="timeoutHandlerChange"
@ -217,9 +230,12 @@
<el-form-item <el-form-item
label="执行动作" label="执行动作"
prop="timeoutHandlerAction" prop="timeoutHandlerAction"
v-if="currentNode.timeoutHandler?.enable" v-if="configForm.timeoutHandlerEnable"
> >
<el-radio-group v-model="currentNode.timeoutHandler!.action"> <el-radio-group
v-model="configForm.timeoutHandlerAction"
@change="timeoutActionChanged"
>
<el-radio-button <el-radio-button
v-for="item in TIMEOUT_HANDLER_ACTION_TYPES" v-for="item in TIMEOUT_HANDLER_ACTION_TYPES"
:key="item.value" :key="item.value"
@ -228,19 +244,17 @@
/> />
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="超时时间设置" v-if="configForm.timeoutHandlerEnable">
label="超时时间设置"
prop="timeoutHandlerTimeDuration"
v-if="currentNode.timeoutHandler?.enable"
>
<span class="mr-2">当超过</span> <span class="mr-2">当超过</span>
<el-input-number <el-form-item prop="timeDuration">
class="mr-2" <el-input-number
:style="{ width: '100px' }" class="mr-2"
v-model="timeDuration" :style="{ width: '100px' }"
:min="1" v-model="configForm.timeDuration"
controls-position="right" :min="1"
/> controls-position="right"
/>
</el-form-item>
<el-select <el-select
v-model="timeUnit" v-model="timeUnit"
class="mr-2" class="mr-2"
@ -258,19 +272,15 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="最大提醒次数" label="最大提醒次数"
prop="timeoutHandlerMaxRemindCount" prop="maxRemindCount"
v-if="currentNode.timeoutHandler?.enable && currentNode.timeoutHandler?.action === 1" v-if="configForm.timeoutHandlerEnable && configForm.timeoutHandlerAction === 1"
> >
<el-input-number <el-input-number v-model="configForm.maxRemindCount" :min="1" :max="10" />
v-model="currentNode.timeoutHandler!.maxRemindCount"
:min="1"
:max="10"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="表单字段权限" v-if="formType === 10"> <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
<div class="field-setting-pane"> <div class="field-setting-pane">
<div class="field-setting-desc">字段权限</div> <div class="field-setting-desc">字段权限</div>
<div class="field-permit-title"> <div class="field-permit-title">
@ -283,7 +293,7 @@
</div> </div>
<div <div
class="field-setting-item" class="field-setting-item"
v-for="(item, index) in currentNode.fieldsPermission" v-for="(item, index) in configForm.fieldsPermission"
:key="index" :key="index"
> >
<div class="field-setting-item-label"> {{ item.title }} </div> <div class="field-setting-item-label"> {{ item.title }} </div>
@ -334,6 +344,7 @@ import * as DeptApi from '@/api/system/dept'
import * as PostApi from '@/api/system/post' import * as PostApi from '@/api/system/post'
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
import * as UserGroupApi from '@/api/bpm/userGroup' import * as UserGroupApi from '@/api/bpm/userGroup'
import { cloneDeep } from 'lodash-es'
defineOptions({ defineOptions({
name: 'UserTaskNodeConfig' name: 'UserTaskNodeConfig'
@ -359,27 +370,76 @@ const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList'
const deptTreeOptions = inject('deptTree') // const deptTreeOptions = inject('deptTree') //
const formType = inject('formType') // const formType = inject('formType') //
const formFields = inject<Ref<string[]>>('formFields') const formFields = inject<Ref<string[]>>('formFields')
const candidateParamArray = ref<any[]>([])
const returnTaskList = ref<SimpleFlowNode[]>([]) const returnTaskList = ref<SimpleFlowNode[]>([])
const formRef = ref() // Ref
const activeTabName = ref('user') // Tab
const configForm = ref<any>({
candidateParamArray: [],
candidateStrategy: CandidateStrategy.USER,
approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
approveRatio: 100,
rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
returnNodeId: '',
timeoutHandlerEnable: false,
timeoutHandlerAction: 1,
timeDuration: 6, // 6
maxRemindCount: 1, // 1
fieldsPermission: []
})
//
const formRules = reactive({
candidateStrategy: [{ required: true }],
candidateParamArray: [{ required: true, message: '该选项不能为空', trigger: 'change' }],
approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
approveRatio: [{ required: true, message: '通过比例不能为空', trigger: 'blur' }],
returnNodeId: [{ required: true, message: '驳回节点不能为空', trigger: 'change' }],
timeoutHandlerEnable: [{ required: true }],
timeoutHandlerAction: [{ required: true }],
timeDuration: [{ required: true, message: '超时时间不能为空', trigger: 'blur' }],
maxRemindCount: [{ required: true, message: '提醒次数不能为空', trigger: 'blur' }]
})
//
const closeDrawer = () => { const closeDrawer = () => {
settingVisible.value = false settingVisible.value = false
} }
const saveConfig = () => { //
currentNode.value.candidateParam = candidateParamArray.value?.join(',') const saveConfig = async () => {
if (currentNode.value.timeoutHandler?.enable) { activeTabName.value = 'user'
currentNode.value.timeoutHandler.timeDuration = isoTimeDuration.value if (!formRef) return false
const valid = await formRef.value.validate()
if (!valid) return false
const showText = getShowText()
if (!showText) return false
currentNode.value.candidateStrategy = configForm.value.candidateStrategy
currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
//
currentNode.value.rejectHandler = {
type: configForm.value.rejectHandlerType,
returnNodeId: configForm.value.returnNodeId
} }
//
currentNode.value.timeoutHandler = {
enable: configForm.value.timeoutHandlerEnable,
action: cTimeoutAction.value,
timeDuration: isoTimeDuration.value,
maxRemindCount: cTimeoutMaxRemindCount.value
}
//
currentNode.value.fieldsPermission = configForm.value.fieldsPermission
currentNode.value.showText = getShowText() currentNode.value.showText = getShowText()
settingVisible.value = false settingVisible.value = false
return true
} }
const getShowText = (): string => { const getShowText = (): string => {
let showText = '' let showText = ''
// //
if (currentNode.value.candidateStrategy === CandidateStrategy.USER) { if (configForm.value.candidateStrategy === CandidateStrategy.USER) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
userOptions?.value.forEach((item) => { userOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.nickname) candidateNames.push(item.nickname)
} }
}) })
@ -387,11 +447,11 @@ const getShowText = (): string => {
} }
} }
// //
if (currentNode.value.candidateStrategy === CandidateStrategy.ROLE) { if (configForm.value.candidateStrategy === CandidateStrategy.ROLE) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
roleOptions?.value.forEach((item) => { roleOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
@ -400,17 +460,17 @@ const getShowText = (): string => {
} }
// //
if ( if (
currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER || configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
currentNode.value.candidateStrategy === CandidateStrategy.DEPT_LEADER configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
) { ) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
deptOptions?.value.forEach((item) => { deptOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
if (currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) { if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
showText = `部门成员:${candidateNames.join(',')}` showText = `部门成员:${candidateNames.join(',')}`
} else { } else {
showText = `部门的负责人:${candidateNames.join(',')}` showText = `部门的负责人:${candidateNames.join(',')}`
@ -419,11 +479,11 @@ const getShowText = (): string => {
} }
// //
if (currentNode.value.candidateStrategy === CandidateStrategy.POST) { if (configForm.value.candidateStrategy === CandidateStrategy.POST) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
postOptions?.value.forEach((item) => { postOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
@ -431,11 +491,11 @@ const getShowText = (): string => {
} }
} }
// //
if (currentNode.value.candidateStrategy === CandidateStrategy.USER_GROUP) { if (configForm.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
const candidateNames: string[] = [] const candidateNames: string[] = []
userGroupOptions?.value.forEach((item) => { userGroupOptions?.value.forEach((item) => {
if (candidateParamArray.value.includes(item.id)) { if (configForm.value.candidateParamArray.includes(item.id)) {
candidateNames.push(item.name) candidateNames.push(item.name)
} }
}) })
@ -444,18 +504,18 @@ const getShowText = (): string => {
} }
// //
if (currentNode.value.candidateStrategy === CandidateStrategy.START_USER_SELECT) { if (configForm.value.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
showText = `发起人自选` showText = `发起人自选`
} }
// //
if (currentNode.value.candidateStrategy === CandidateStrategy.START_USER) { if (configForm.value.candidateStrategy === CandidateStrategy.START_USER) {
showText = `发起人自己` showText = `发起人自己`
} }
// //
if (currentNode.value.candidateStrategy === CandidateStrategy.EXPRESSION) { if (configForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
if (candidateParamArray.value?.length > 0) { if (configForm.value.candidateParamArray?.length > 0) {
showText = `流程表达式:${candidateParamArray.value[0]}` showText = `流程表达式:${configForm.value.candidateParamArray[0]}`
} }
} }
return showText return showText
@ -466,28 +526,39 @@ const open = () => {
// //
const setCurrentNode = (node: SimpleFlowNode) => { const setCurrentNode = (node: SimpleFlowNode) => {
currentNode.value = node currentNode.value = node
currentNode.value.fieldsPermission = configForm.value.fieldsPermission =
node.fieldsPermission || getDefaultFieldsPermission(formFields?.value) cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
configForm.value.candidateStrategy = node.candidateStrategy
const strCandidateParam = node?.candidateParam const strCandidateParam = node?.candidateParam
if (strCandidateParam) { if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
candidateParamArray.value = strCandidateParam.split(',').map((item) => +item) configForm.value.candidateParamArray[0] = strCandidateParam
} else {
if (strCandidateParam) {
configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
}
configForm.value.candidateStrategy = node.candidateStrategy
} }
if ( if (
(candidateParamArray.value.length <= 1 && (configForm.value.candidateParamArray?.length <= 1 &&
currentNode.value.candidateStrategy === CandidateStrategy.USER) || node.candidateStrategy === CandidateStrategy.USER) ||
currentNode.value.candidateStrategy === CandidateStrategy.START_USER node.candidateStrategy === CandidateStrategy.START_USER
) { ) {
notAllowedMultiApprovers.value = true notAllowedMultiApprovers.value = true
} else { } else {
notAllowedMultiApprovers.value = false notAllowedMultiApprovers.value = false
} }
if (currentNode.value.timeoutHandler?.enable && currentNode.value.timeoutHandler?.timeDuration) { configForm.value.rejectHandlerType = node.rejectHandler?.type
const strTimeDuration = currentNode.value.timeoutHandler.timeDuration configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable
if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
const strTimeDuration = node.timeoutHandler.timeDuration
let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1) let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1) let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
timeDuration.value = parseInt(parseTime) configForm.value.timeDuration = parseInt(parseTime)
timeUnit.value = convertTimeUnit(parseTimeUnit) timeUnit.value = convertTimeUnit(parseTimeUnit)
} }
configForm.value.timeoutHandlerAction = node.timeoutHandler?.action
configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
// //
const matchNodeList = [] const matchNodeList = []
emits('find:returnTaskNodes', matchNodeList) emits('find:returnTaskNodes', matchNodeList)
@ -497,11 +568,11 @@ const setCurrentNode = (node: SimpleFlowNode) => {
defineExpose({ open, setCurrentNode }) // defineExpose({ open, setCurrentNode }) //
const changeCandidateStrategy = () => { const changeCandidateStrategy = () => {
candidateParamArray.value = [] configForm.value.candidateParamArray = []
currentNode.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
if ( if (
currentNode.value.candidateStrategy === CandidateStrategy.START_USER || configForm.value.candidateStrategy === CandidateStrategy.START_USER ||
currentNode.value.candidateStrategy === CandidateStrategy.USER configForm.value.candidateStrategy === CandidateStrategy.USER
) { ) {
notAllowedMultiApprovers.value = true notAllowedMultiApprovers.value = true
} else { } else {
@ -511,11 +582,11 @@ const changeCandidateStrategy = () => {
const changedCandidateUsers = () => { const changedCandidateUsers = () => {
if ( if (
candidateParamArray.value?.length <= 1 && configForm.value.candidateParamArray?.length <= 1 &&
currentNode.value.candidateStrategy === CandidateStrategy.USER configForm.value.candidateStrategy === CandidateStrategy.USER
) { ) {
currentNode.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
currentNode.value.rejectHandler!.type = RejectHandlerType.FINISH_PROCESS configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
notAllowedMultiApprovers.value = true notAllowedMultiApprovers.value = true
} else { } else {
notAllowedMultiApprovers.value = false notAllowedMultiApprovers.value = false
@ -534,37 +605,63 @@ const blurEvent = () => {
currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string) currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
} }
const approveMethodChanged = () => { const approveMethodChanged = () => {
currentNode.value.rejectHandler!.type = RejectHandlerType.FINISH_PROCESS configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
const approveMethod = currentNode.value?.approveMethod if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
if (approveMethod === ApproveMethodType.APPROVE_BY_RATIO) { configForm.value.approveRatio = 100
currentNode.value.approveRatio = 100
} }
formRef.value.clearValidate('approveRatio')
} }
// 6
const timeDuration = ref(6)
const timeUnit = ref(TimeUnitType.HOUR) const timeUnit = ref(TimeUnitType.HOUR)
// ISO
const isoTimeDuration = computed(() => { const isoTimeDuration = computed(() => {
if (!configForm.value.timeoutHandlerEnable) {
return undefined
}
let strTimeDuration = 'PT' let strTimeDuration = 'PT'
if (timeUnit.value === TimeUnitType.MINUTE) { if (timeUnit.value === TimeUnitType.MINUTE) {
strTimeDuration += timeDuration.value + 'M' strTimeDuration += configForm.value.timeDuration + 'M'
} }
if (timeUnit.value === TimeUnitType.HOUR) { if (timeUnit.value === TimeUnitType.HOUR) {
strTimeDuration += timeDuration.value + 'H' strTimeDuration += configForm.value.timeDuration + 'H'
} }
if (timeUnit.value === TimeUnitType.DAY) { if (timeUnit.value === TimeUnitType.DAY) {
strTimeDuration += timeDuration.value + 'D' strTimeDuration += configForm.value.timeDuration + 'D'
} }
return strTimeDuration return strTimeDuration
}) })
//
const cTimeoutAction = computed(() => {
if (!configForm.value.timeoutHandlerEnable) {
return undefined
}
return configForm.value.timeoutHandlerAction
})
//
const cTimeoutMaxRemindCount = computed(() => {
if (!configForm.value.timeoutHandlerEnable) {
return undefined
}
if (configForm.value.timeoutHandlerAction !== 1) {
return undefined
}
return configForm.value.maxRemindCount
})
// //
const timeoutHandlerChange = () => { const timeoutHandlerChange = () => {
if (currentNode.value.timeoutHandler?.enable) { if (configForm.value.timeoutHandlerEnable) {
timeUnit.value = 2 timeUnit.value = 2
timeDuration.value = 6 configForm.value.timeDuration = 6
currentNode.value.timeoutHandler.action = 1 configForm.value.timeoutHandlerAction = 1
currentNode.value.timeoutHandler.maxRemindCount = 1 configForm.value.maxRemindCount = 1
}
}
//
const timeoutActionChanged = () => {
if (configForm.value.timeoutHandlerAction === 1) {
configForm.value.maxRemindCount = 1 // 1
} }
} }
@ -572,15 +669,15 @@ const timeoutHandlerChange = () => {
const timeUnitChange = () => { const timeUnitChange = () => {
// 60 // 60
if (timeUnit.value === TimeUnitType.MINUTE) { if (timeUnit.value === TimeUnitType.MINUTE) {
timeDuration.value = 60 configForm.value.timeDuration = 60
} }
// 6 // 6
if (timeUnit.value === TimeUnitType.HOUR) { if (timeUnit.value === TimeUnitType.HOUR) {
timeDuration.value = 6 configForm.value.timeDuration = 6
} }
// 1 // 1
if (timeUnit.value === TimeUnitType.DAY) { if (timeUnit.value === TimeUnitType.DAY) {
timeDuration.value = 1 configForm.value.timeDuration = 1
} }
} }