提交修改代码
This commit is contained in:
zhujiyan
@@ -7,6 +7,7 @@
|
||||
:destroy-on-close="true"
|
||||
@ok="handleOk"
|
||||
@cancel="handleClose"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="7">
|
||||
|
||||
22
src/components/XnWorkflow/nodes/components/navTitle.vue
Normal file
22
src/components/XnWorkflow/nodes/components/navTitle.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="nav_title" :style="{ borderLeft: `4px solid ${borderColor}` }">
|
||||
<p><slot name="nav_name"></slot></p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { ref } from 'vue'
|
||||
const configStore = useConfig()
|
||||
const borderColor =configStore.getColorVal('elementUiPrimary')
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.nav_title {
|
||||
padding-left: 8px;
|
||||
margin-top: 10px;
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: #212121;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -42,8 +42,9 @@
|
||||
<add-node v-model="childNode.childNode" :parent-data="childNode" />
|
||||
</div>
|
||||
|
||||
<xn-form-container
|
||||
v-model:visible="drawer"
|
||||
<formContainer
|
||||
v-model="drawer"
|
||||
:visible="visible"
|
||||
:destroy-on-close="true"
|
||||
:width="700"
|
||||
:body-style="{ 'padding-top': '0px' }"
|
||||
@@ -64,7 +65,7 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<el-layout-content>
|
||||
<div>
|
||||
<el-tabs v-model="activeKey">
|
||||
<el-tab-pane name="1" label="条件配置" lazy>
|
||||
<el-form layout="vertical">
|
||||
@@ -199,12 +200,12 @@
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-layout-content>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
</template>
|
||||
</xn-form-container>
|
||||
</formContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -503,6 +504,7 @@ import tool from '@/utils/tool'
|
||||
import AddNode from './addNode.vue'
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import PropListenerInfo from './prop/propListenerInfo.vue'
|
||||
import formContainer from '@/components/formContainer/index.vue';
|
||||
const props = defineProps({
|
||||
modelValue: { type: Object, default: () => {} },
|
||||
formFieldListValue: { type: Array, default: () => [] },
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="branch-wrap">
|
||||
<div class="branch-box-wrap">
|
||||
<div class="branch-box">
|
||||
<a-button class="add-branch" type="primary" shape="round" @click="addTerm">添加并行</a-button>
|
||||
<el-button class="add-branch" type="primary" shape="round" @click="addTerm">添加并行</el-button>
|
||||
<div v-for="(item, index) in childNode.conditionNodeList" :key="index" class="col-box">
|
||||
<div class="condition-node">
|
||||
<div class="condition-node-box">
|
||||
|
||||
@@ -1,108 +1,117 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="表单人员选择"
|
||||
:mask-closable="false"
|
||||
:destroy-on-close="true"
|
||||
:width="600"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="form-user-table">
|
||||
<el-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:datel-source="dataSource"
|
||||
:row-key="(record) => record.model"
|
||||
:expand-row-by-click="true"
|
||||
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="表单人员选择"
|
||||
:mask-closable="false"
|
||||
:destroy-on-close="true"
|
||||
:width="600"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="form-user-table">
|
||||
<el-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:datel-source="dataSource"
|
||||
:row-key="record => record.model"
|
||||
:expand-row-by-click="true"
|
||||
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup name="formUserSelector">
|
||||
import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {ref,reactive} from 'vue'
|
||||
const visible = ref(false)
|
||||
import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ref, reactive } from 'vue'
|
||||
const visible = ref(false)
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '字段名',
|
||||
dataIndex: 'label'
|
||||
},
|
||||
{
|
||||
title: '字段',
|
||||
dataIndex: 'model'
|
||||
}
|
||||
]
|
||||
const columns = [
|
||||
{
|
||||
title: '字段名',
|
||||
dataIndex: 'label'
|
||||
},
|
||||
{
|
||||
title: '字段',
|
||||
dataIndex: 'model'
|
||||
}
|
||||
]
|
||||
|
||||
// 定义emit事件
|
||||
const emit = defineEmits({ click: null })
|
||||
const props = defineProps(['formFieldList'])
|
||||
// 定义emit事件
|
||||
const emit = defineEmits({ click: null })
|
||||
const props = defineProps(['formFieldList'])
|
||||
|
||||
const dataSource = ref([])
|
||||
dataSource.value = workFlowUtils.getListField(props.formFieldList).filter((f) => {
|
||||
// 判断如果是人员类型的，就让列表显示
|
||||
if (f.type === 'xnUserSelector') {
|
||||
return f
|
||||
}
|
||||
}).map((m) => {
|
||||
return {
|
||||
label: m.label,
|
||||
model: m.model,
|
||||
field: m.model,
|
||||
type: m.type
|
||||
}
|
||||
})
|
||||
const selectedRowKeys = ref([])
|
||||
// 设置默认选中的
|
||||
const state = reactive({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
loading: false
|
||||
})
|
||||
const showFormUserModal = (data = '') => {
|
||||
if (dataSource.value.length === 0) {
|
||||
message.warning('表单内无人员可提供选择！')
|
||||
return
|
||||
}
|
||||
if (dataSource.value.length === 1) {
|
||||
emit('click', dataSource.value[0])
|
||||
message.success('表单内仅有一个人员选择，默认选中！')
|
||||
} else {
|
||||
visible.value = true
|
||||
state.selectedRowKeys[0] = data
|
||||
}
|
||||
}
|
||||
// 点击复选框回调
|
||||
const onSelectChange = (selectedRowKeys) => {
|
||||
state.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
// 确定
|
||||
const handleOk = () => {
|
||||
const result = dataSource.value.filter((item) => state.selectedRowKeys[0] === item.model)
|
||||
emit('click', result[0])
|
||||
visible.value = false
|
||||
state.selectedRowKeys = []
|
||||
}
|
||||
// 关闭
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
const dataSource = ref([])
|
||||
dataSource.value = workFlowUtils
|
||||
.getListField(props.formFieldList)
|
||||
.filter(f => {
|
||||
// 判断如果是人员类型的，就让列表显示
|
||||
if (f.type === 'xnUserSelector') {
|
||||
return f
|
||||
}
|
||||
})
|
||||
.map(m => {
|
||||
return {
|
||||
label: m.label,
|
||||
model: m.model,
|
||||
field: m.model,
|
||||
type: m.type
|
||||
}
|
||||
})
|
||||
const selectedRowKeys = ref([])
|
||||
// 设置默认选中的
|
||||
const state = reactive({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
loading: false
|
||||
})
|
||||
const showFormUserModal = (data = '') => {
|
||||
if (dataSource.value.length === 0) {
|
||||
ElMessage({
|
||||
message: '表单内无人员可提供选择！',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (dataSource.value.length === 1) {
|
||||
emit('click', dataSource.value[0])
|
||||
ElMessage({
|
||||
message: '表单内仅有一个人员选择，默认选中！',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
visible.value = true
|
||||
state.selectedRowKeys[0] = data
|
||||
}
|
||||
}
|
||||
// 点击复选框回调
|
||||
const onSelectChange = selectedRowKeys => {
|
||||
state.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
// 确定
|
||||
const handleOk = () => {
|
||||
const result = dataSource.value.filter(item => state.selectedRowKeys[0] === item.model)
|
||||
emit('click', result[0])
|
||||
visible.value = false
|
||||
state.selectedRowKeys = []
|
||||
}
|
||||
// 关闭
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 抛出方法，让上个界面使用
|
||||
defineExpose({
|
||||
showFormUserModal
|
||||
})
|
||||
// 抛出方法，让上个界面使用
|
||||
defineExpose({
|
||||
showFormUserModal
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.form-user-table {
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
.form-user-table {
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,305 +1,398 @@
|
||||
<!-- 抄送人组件 -->
|
||||
<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>
|
||||
<el-input
|
||||
v-if="isEditTitle"
|
||||
ref="nodeTitle"
|
||||
v-model:value="form.title"
|
||||
allow-clear
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="saveTitle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<el-container>
|
||||
<el-tabs v-model="activeKey">
|
||||
<el-tab-pane name="1" label="抄送配置" lazy>
|
||||
<el-form layout="vertical" :model="userTypeForm">
|
||||
<div v-show="nodeLegal" style="margin-bottom: 10px">
|
||||
<el-alert message="请选择抄送人员！" type="error" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="left-span-label">选择要抄送的人员</span>
|
||||
</div>
|
||||
<el-radio-group v-model:value="userSelectionType" style="width: 100%">
|
||||
<el-row style="padding-bottom: 10px">
|
||||
<el-col :span="8" v-for="userSelectionType in userSelectionTypeList" :key="userSelectionType.value">
|
||||
<el-radio :value="userSelectionType.value" @click="selectionClick(userSelectionType.value)">
|
||||
{{ userSelectionType.label }}
|
||||
</el-radio>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
<el-form-item v-if="userSelectionType === 'USER'">
|
||||
<el-button class="mt-2" type="primary" size="small" round @click="openSelector">
|
||||
<template #icon>
|
||||
<search-outlined />
|
||||
</template>
|
||||
选择
|
||||
</el-button>
|
||||
<p />
|
||||
<prop-tag :tag-list="getTagList('USER')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
|
||||
<div class="mt-2">
|
||||
<el-button type="primary" @click="openSelector" size="small">
|
||||
<template #icon>
|
||||
<search-outlined />
|
||||
</template>
|
||||
选择
|
||||
</el-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>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="mt-2"
|
||||
v-if="recordData.formType === 'DEFINE' && userSelectionType === 'FORM_USER'"
|
||||
name="formUser"
|
||||
:rules="[{ required: true, message: '请输入人员变量' }]"
|
||||
>
|
||||
<template #label>
|
||||
<el-tooltip>
|
||||
<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template>
|
||||
<question-circle-outlined />
|
||||
人员变量：
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input
|
||||
style="width: 50%"
|
||||
v-model:value="userTypeForm.formUser"
|
||||
allow-clear
|
||||
@input="customFormUser"
|
||||
@keyup.enter="customFormUser"
|
||||
placeholder="请输入人员变量"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="2" label="执行监听" lazy>
|
||||
<prop-listener-info
|
||||
ref="propExecutionListenerInfoRef"
|
||||
v-if="form&&form.properties&&form.properties.executionListenerInfo"
|
||||
:listener-value="form.properties.executionListenerInfo"
|
||||
:default-listener-list="executionListenerInfo"
|
||||
:listener-value-array="executionListenerArray"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-container>
|
||||
<template #footer>
|
||||
<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
|
||||
<el-button @click="drawer = false">取消</el-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"
|
||||
:datel-is-converter-flw="true"
|
||||
@onBack="userCallBack"
|
||||
/>
|
||||
</div>
|
||||
<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" /> -->
|
||||
<el-icon>
|
||||
<CloseBold @click="delNode()" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(childNode)">{{ toText(childNode) }}</span>
|
||||
<span v-else class="placeholder">请选择人员</span>
|
||||
</div>
|
||||
</div>
|
||||
<addNode v-model="childNode.childNode"></addNode>
|
||||
<formContainer
|
||||
v-model="drawer"
|
||||
:visibile="drawer"
|
||||
:destroy-on-close="true"
|
||||
:body-style="{ 'padding-top': '0px' }"
|
||||
>
|
||||
<template #title>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label v-if="!isEditTitle" @click="editTitle">
|
||||
{{ form.title }}
|
||||
<el-icon>
|
||||
<EditPen />
|
||||
</el-icon>
|
||||
<!-- <edit-outlined class="node-wrap-drawer-title-edit" /> -->
|
||||
</label>
|
||||
<el-input
|
||||
v-if="isEditTitle"
|
||||
ref="nodeTitle"
|
||||
v-model:value="form.title"
|
||||
allow-clear
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="saveTitle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="tab_container">
|
||||
<el-tabs v-model="activeKey">
|
||||
<el-tab-pane name="1" label="抄送配置" lazy>
|
||||
<el-form layout="vertical" :model="userTypeForm">
|
||||
<div v-show="nodeLegal" style="margin-bottom: 10px">
|
||||
<div class="please_choose">
|
||||
<p>请选择抄送人员！</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<navTitle><template #nav_name>选择要抄送的人员</template></navTitle>
|
||||
</div>
|
||||
<!-- 选择抄送人员 -->
|
||||
<el-radio-group v-model="userSelectionType" @input="changeRadio" style="width: 100%">
|
||||
<el-radio
|
||||
v-for="(item, index) in userSelectionTypeList"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
>
|
||||
<!-- @click="selectionClick(item.value)" -->
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item v-if="userSelectionType === 'USER'">
|
||||
<el-button class="mt-2" type="primary" size="small" @click="openSelector">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
</template>
|
||||
选择
|
||||
</el-button>
|
||||
<p />
|
||||
<prop-tag :tag-list="getTagList('USER')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
|
||||
<div class="mt-2">
|
||||
<el-button type="primary" @click="openSelector" size="small">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
</template>
|
||||
选择
|
||||
</el-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>
|
||||
</el-form-item>
|
||||
<!-- 选择人员变量 -->
|
||||
<el-form-item
|
||||
class="mt-2"
|
||||
v-if="userSelectionType === 'FORM_USER'"
|
||||
name="formUser"
|
||||
:rules="[{ required: true, message: '请输入人员变量' }]">
|
||||
<!-- recordData.formType === 'DEFINE' && -->
|
||||
<!-- <template #label> -->
|
||||
<!-- <el-tooltip>
|
||||
<template #title></template>
|
||||
<question-circle-outlined />
|
||||
人员变量：
|
||||
</el-tooltip> -->
|
||||
<!-- </template> -->
|
||||
<el-tooltip
|
||||
content="单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3"
|
||||
placement="top-start"
|
||||
>
|
||||
<span class="user_icon">?</span>
|
||||
<span style="width: 100px;display:block;float: left;">
|
||||
</span>人员变量：
|
||||
</el-tooltip>
|
||||
<el-input
|
||||
v-model="userTypeForm.formUser"
|
||||
clearable
|
||||
@input="customFormUser"
|
||||
@keyup.enter="customFormUser"
|
||||
placeholder="请输入人员变量"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="2" label="执行监听" lazy>
|
||||
<prop-listener-info
|
||||
ref="propExecutionListenerInfoRef"
|
||||
v-if="form && form.properties && form.properties.executionListenerInfo"
|
||||
:listener-value="form.properties.executionListenerInfo"
|
||||
:default-listener-list="executionListenerInfo"
|
||||
:listener-value-array="executionListenerArray"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
</template>
|
||||
</formContainer>
|
||||
<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"
|
||||
:datel-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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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'
|
||||
import { CloseBold, EditPen, Search ,InfoFilled} from '@element-plus/icons-vue'
|
||||
import formContainer from '@/components/formContainer/index.vue'
|
||||
import navTitle from '../components/navTitle.vue'
|
||||
export default {
|
||||
components: {
|
||||
FormUserSelector,
|
||||
addNode,
|
||||
userSelectorPlus,
|
||||
propTag,
|
||||
PropListenerInfo,
|
||||
formContainer,
|
||||
navTitle,
|
||||
CloseBold,
|
||||
EditPen,
|
||||
Search,
|
||||
InfoFilled
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
changeRadio() {
|
||||
console.log(this.userSelectionType, '99999')
|
||||
this.form.properties.participateInfo = []
|
||||
this.nodeLegal = true
|
||||
},
|
||||
// 选择抄送人员类型
|
||||
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() {
|
||||
// console.log(this.userTypeForm.formUser,"0000000");
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
position: relative;
|
||||
.el-icon {
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 6px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.node-wrap-box:hover {
|
||||
.el-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.node-wrap-drawer__title {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.el-tab_container {
|
||||
width: 100%;
|
||||
}
|
||||
.please_choose {
|
||||
width: 96%;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
background-color: #fff0f0;
|
||||
border: 2px solid #ffa39e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 15px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.el-radio-group {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.user_icon{
|
||||
display: block;
|
||||
width:18px;
|
||||
height: 18px;
|
||||
border:1px solid #000;
|
||||
border-radius:50%;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<el-dialog v-if="isModal" v-model="visibles" @cancel="cancel" v-bind="$attrs">
|
||||
<el-dialog v-if="isModal" size="50%" v-model="visibles" @cancel="cancel" v-bind="$attrs" :append-to-body="true">
|
||||
<template v-for="slotKey in slotKeys" #[slotKey]>
|
||||
<slot :name="slotKey" />
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-drawer v-else v-model="visibles" v-bind="$attrs" :footer-style="{ textAlign: 'right' }">
|
||||
<el-drawer v-else size="50%" v-model="visibles" v-bind="$attrs" :append-to-body="true" :footer-style="{ textAlign: 'right' }">
|
||||
<template v-for="slotKey in slotKeys" #[slotKey]>
|
||||
<slot :name="slotKey" />
|
||||
</template>
|
||||
|
||||
@@ -196,3 +196,7 @@
|
||||
.sgmap-ctrl-bottom-left{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-drawer__header{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user