模型基础信息
This commit is contained in:
304
src/components/XnWorkflow/nodes/serviceTask.vue
Normal file
304
src/components/XnWorkflow/nodes/serviceTask.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div class="node-wrap">
|
||||
<div class="node-wrap-box" @click="show">
|
||||
<div class="title" style="background: #3296fa">
|
||||
<send-outlined class="icon" />
|
||||
<span>{{ childNode.title }}</span>
|
||||
<close-outlined class="close" @click.stop="delNode()" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(childNode)">{{ toText(childNode) }}</span>
|
||||
<span v-else class="placeholder">请选择人员</span>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="childNode.childNode"></add-node>
|
||||
<xn-form-container
|
||||
v-model:visible="drawer"
|
||||
:destroy-on-close="true"
|
||||
:width="700"
|
||||
:body-style="{ 'padding-top': '0px' }"
|
||||
>
|
||||
<template #title>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label v-if="!isEditTitle" @click="editTitle"
|
||||
>{{ form.title }}<edit-outlined class="node-wrap-drawer-title-edit" />
|
||||
</label>
|
||||
<a-input
|
||||
v-if="isEditTitle"
|
||||
ref="nodeTitle"
|
||||
v-model:value="form.title"
|
||||
allow-clear
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="saveTitle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<a-layout-content>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="抄送配置" force-render>
|
||||
<a-form layout="vertical" :model="userTypeForm">
|
||||
<div v-show="nodeLegal" style="margin-bottom: 10px">
|
||||
<a-alert message="请选择抄送人员！" type="error" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="left-span-label">选择要抄送的人员</span>
|
||||
</div>
|
||||
<a-radio-group v-model:value="userSelectionType" style="width: 100%">
|
||||
<a-row style="padding-bottom: 10px">
|
||||
<a-col :span="8" v-for="userSelectionType in userSelectionTypeList" :key="userSelectionType.value">
|
||||
<a-radio :value="userSelectionType.value" @click="selectionClick(userSelectionType.value)">
|
||||
{{ userSelectionType.label }}
|
||||
</a-radio>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
<a-form-item v-if="userSelectionType === 'USER'">
|
||||
<a-button class="mt-2" type="primary" size="small" round @click="openSelector">
|
||||
<template #icon>
|
||||
<search-outlined />
|
||||
</template>
|
||||
选择
|
||||
</a-button>
|
||||
<p />
|
||||
<prop-tag :tag-list="getTagList('USER')" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
|
||||
<div class="mt-2">
|
||||
<a-button type="primary" @click="openSelector" size="small">
|
||||
<template #icon>
|
||||
<search-outlined />
|
||||
</template>
|
||||
选择
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<prop-tag
|
||||
v-if="form.properties.participateInfo.length > 0 && form.properties.participateInfo[0].value !== ''"
|
||||
:tag-list="form.properties.participateInfo[0]"
|
||||
/>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
class="mt-2"
|
||||
v-if="recordData.formType === 'DEFINE' && userSelectionType === 'FORM_USER'"
|
||||
name="formUser"
|
||||
:rules="[{ required: true, message: '请输入人员变量' }]"
|
||||
>
|
||||
<template #label>
|
||||
<a-tooltip>
|
||||
<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template>
|
||||
<question-circle-outlined />
|
||||
人员变量：
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
style="width: 50%"
|
||||
v-model:value="userTypeForm.formUser"
|
||||
allow-clear
|
||||
@input="customFormUser"
|
||||
@keyup.enter="customFormUser"
|
||||
placeholder="请输入人员变量"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="执行监听" force-render>
|
||||
<prop-listener-info
|
||||
ref="propExecutionListenerInfoRef"
|
||||
:listener-value="form.properties.executionListenerInfo"
|
||||
:default-listener-list="executionListenerInfo"
|
||||
:listener-value-array="executionListenerArray"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-layout-content>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
|
||||
<a-button @click="drawer = false">取消</a-button>
|
||||
</template>
|
||||
</xn-form-container>
|
||||
<form-user-selector ref="formUserSelectorRef" :form-field-list="formFieldListValue" @click="userCallBack" />
|
||||
<user-selector-plus
|
||||
ref="userselectorPlus"
|
||||
:org-tree-api="selectorApiFunction.orgTreeApi"
|
||||
:user-page-api="selectorApiFunction.userPageApi"
|
||||
:checked-user-list-api="selectorApiFunction.checkedUserListApi"
|
||||
:data-is-converter-flw="true"
|
||||
@onBack="userCallBack"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode.vue'
|
||||
import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
|
||||
import FormUserSelector from './prop/formUserSelector.vue'
|
||||
import propTag from './prop/propTag.vue'
|
||||
import { cloneDeep, isEmpty } from 'lodash-es'
|
||||
import config from '@/components/XnWorkflow/nodes/config/config'
|
||||
import PropListenerInfo from './prop/propListenerInfo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormUserSelector,
|
||||
addNode,
|
||||
userSelectorPlus,
|
||||
propTag,
|
||||
PropListenerInfo
|
||||
},
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} },
|
||||
recordData: { type: Object, default: () => {} },
|
||||
executionListenerArray: { type: Array, default: () => [] },
|
||||
selectorApiFunction: { type: Object, default: () => {} },
|
||||
formFieldListValue: { type: Array, default: () => [] }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
childNode: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
activeKey: '1',
|
||||
form: {},
|
||||
nodeLegal: false,
|
||||
userTypeForm: {},
|
||||
executionListenerInfo: cloneDeep(config.listener.serviceTaskExecutionListenerInfo),
|
||||
// 用户选择类型
|
||||
userSelectionType: '',
|
||||
userSelectionTypeList: cloneDeep(config.serviceTaskConfig.userSelectionTypeList)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue() {
|
||||
this.childNode = this.modelValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.childNode = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.form = {}
|
||||
this.form = cloneDeep(this.childNode)
|
||||
this.drawer = true
|
||||
if (!isEmpty(this.form.properties.participateInfo)) {
|
||||
this.userSelectionType = this.form.properties.participateInfo[0].key
|
||||
// 如果包含表单内的人
|
||||
const formUserObj = this.form.properties.participateInfo.find((f) => f.key === 'FORM_USER')
|
||||
if (formUserObj) {
|
||||
this.userTypeForm.formUser = formUserObj.value
|
||||
}
|
||||
} else {
|
||||
this.userSelectionType = 'USER'
|
||||
this.userTypeForm = {}
|
||||
this.nodeLegal = true
|
||||
}
|
||||
},
|
||||
editTitle() {
|
||||
this.isEditTitle = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.nodeTitle.focus()
|
||||
})
|
||||
},
|
||||
saveTitle() {
|
||||
this.isEditTitle = false
|
||||
},
|
||||
save() {
|
||||
if (isEmpty(this.nodeLegal)) {
|
||||
this.form.properties.executionListenerInfo = this.$refs.propExecutionListenerInfoRef.selectedListenerList()
|
||||
this.form.dataLegal = true
|
||||
this.$emit('update:modelValue', this.form)
|
||||
this.drawer = false
|
||||
}
|
||||
},
|
||||
delNode() {
|
||||
this.$emit('update:modelValue', this.childNode.childNode)
|
||||
},
|
||||
selectHandle(data) {
|
||||
this.$refs.userselectorPlus.showUserPlusModal(data)
|
||||
},
|
||||
// 选择器回调
|
||||
userCallBack(value) {
|
||||
if (isEmpty(value.label)) {
|
||||
this.nodeLegal = true
|
||||
} else {
|
||||
this.nodeLegal = false
|
||||
}
|
||||
if (this.userSelectionType === 'USER') {
|
||||
this.form.properties.participateInfo[0] = value
|
||||
} else if (this.userSelectionType === 'FORM_USER') {
|
||||
this.form.properties.participateInfo = [
|
||||
{
|
||||
key: 'FORM_USER',
|
||||
label: this.userSelectionTypeList.filter((item) => item.value === 'FORM_USER')[0].label,
|
||||
value: value.model
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 获取tag标签的内容
|
||||
getTagList(type) {
|
||||
const participateInfo = this.form.properties.participateInfo
|
||||
if (participateInfo.length > 0) {
|
||||
const obj = participateInfo.find((item) => item.key === type)
|
||||
if (isEmpty(obj.label)) {
|
||||
return undefined
|
||||
} else {
|
||||
return obj
|
||||
}
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
// 选择抄送人员类型
|
||||
selectionClick(value) {
|
||||
this.form.properties.participateInfo = []
|
||||
this.userSelectionType = value
|
||||
this.nodeLegal = true
|
||||
},
|
||||
// 打开选择器
|
||||
openSelector() {
|
||||
let data = this.form.properties.participateInfo
|
||||
if (this.userSelectionType === 'USER') {
|
||||
this.$refs.userselectorPlus.showUserPlusModal(data)
|
||||
} else if (this.userSelectionType === 'FORM_USER') {
|
||||
this.$refs.formUserSelectorRef.showFormUserModal(data[0])
|
||||
}
|
||||
},
|
||||
// 监听自定义表单人员输入
|
||||
customFormUser() {
|
||||
if (this.userTypeForm.formUser) {
|
||||
this.form.properties.participateInfo = [
|
||||
{
|
||||
key: 'FORM_USER',
|
||||
label: '表单内的人',
|
||||
value: this.userTypeForm.formUser
|
||||
}
|
||||
]
|
||||
this.nodeLegal = false
|
||||
} else {
|
||||
this.nodeLegal = true
|
||||
}
|
||||
},
|
||||
toText(childNode) {
|
||||
if (!isEmpty(childNode)) {
|
||||
const participateInfo = childNode.properties.participateInfo
|
||||
if (participateInfo.length > 0) {
|
||||
let resultArray = []
|
||||
if (participateInfo[0].label.indexOf(',') !== -1) {
|
||||
resultArray = participateInfo[0].label.split(',')
|
||||
} else {
|
||||
resultArray.push(participateInfo[0].label)
|
||||
}
|
||||
return resultArray.toString()
|
||||
} else {
|
||||
// return '未选择抄送人';
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user