Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交修改代码

Browse Source
This commit is contained in:
zhujiyan
2024-05-09 13:46:20 +08:00
parent 6076cec029
commit eeef608ccd
8 changed files with 535 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Selector/userSelectorPlus.vue
View File

@@ -7,6 +7,7 @@
:destroy-on-close="true" :destroy-on-close="true"
@ok="handleOk" @ok="handleOk"
@cancel="handleClose" @cancel="handleClose"
:append-to-body="true"
> >
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="7"> <el-col :span="7">

22
src/components/XnWorkflow/nodes/components/navTitle.vue Normal file
View 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>

12
src/components/XnWorkflow/nodes/exclusiveGateway.vue
View File

@@ -42,8 +42,9 @@
<add-node v-model="childNode.childNode" :parent-data="childNode" /> <add-node v-model="childNode.childNode" :parent-data="childNode" />
</div> </div>
<xn-form-container <formContainer
v-model:visible="drawer" v-model="drawer"
:visible="visible"
:destroy-on-close="true" :destroy-on-close="true"
:width="700" :width="700"
:body-style="{ 'padding-top': '0px' }" :body-style="{ 'padding-top': '0px' }"
@@ -64,7 +65,7 @@
/> />
</div> </div>
</template> </template>
<el-layout-content> <div>
<el-tabs v-model="activeKey"> <el-tabs v-model="activeKey">
<el-tab-pane name="1" label="条件配置" lazy> <el-tab-pane name="1" label="条件配置" lazy>
<el-form layout="vertical"> <el-form layout="vertical">
@@ -199,12 +200,12 @@
/> />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-layout-content> </div>
<template #footer> <template #footer>
<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button> <el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
<el-button @click="drawer = false">取消</el-button> <el-button @click="drawer = false">取消</el-button>
</template> </template>
</xn-form-container> </formContainer>
</div> </div>
</template> </template>
@@ -503,6 +504,7 @@ import tool from '@/utils/tool'
import AddNode from './addNode.vue' import AddNode from './addNode.vue'
import { ref, watch, onMounted } from 'vue' import { ref, watch, onMounted } from 'vue'
import PropListenerInfo from './prop/propListenerInfo.vue' import PropListenerInfo from './prop/propListenerInfo.vue'
import formContainer from '@/components/formContainer/index.vue';
const props = defineProps({ const props = defineProps({
modelValue: { type: Object, default: () => {} }, modelValue: { type: Object, default: () => {} },
formFieldListValue: { type: Array, default: () => [] }, formFieldListValue: { type: Array, default: () => [] },

2
src/components/XnWorkflow/nodes/parallelGateway.vue
View File

@@ -2,7 +2,7 @@
<div class="branch-wrap"> <div class="branch-wrap">
<div class="branch-box-wrap"> <div class="branch-box-wrap">
<div class="branch-box"> <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 v-for="(item, index) in childNode.conditionNodeList" :key="index" class="col-box">
<div class="condition-node"> <div class="condition-node">
<div class="condition-node-box"> <div class="condition-node-box">

81
src/components/XnWorkflow/nodes/prop/formUserSelector.vue
View File

@@ -13,7 +13,7 @@
ref="table" ref="table"
:columns="columns" :columns="columns"
:datel-source="dataSource" :datel-source="dataSource"
:row-key="(record) => record.model" :row-key="record => record.model"
:expand-row-by-click="true" :expand-row-by-click="true"
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }" :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
:pagination="false" :pagination="false"
@@ -25,12 +25,12 @@
</template> </template>
<script setup name="formUserSelector"> <script setup name="formUserSelector">
import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index' import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import {ref,reactive} from 'vue' import { ref, reactive } from 'vue'
const visible = ref(false) const visible = ref(false)
const columns = [ const columns = [
{ {
title: '字段名', title: '字段名',
dataIndex: 'label' dataIndex: 'label'
@@ -39,19 +39,22 @@
title: '字段', title: '字段',
dataIndex: 'model' dataIndex: 'model'
} }
] ]
// 定义emit事件 // 定义emit事件
const emit = defineEmits({ click: null }) const emit = defineEmits({ click: null })
const props = defineProps(['formFieldList']) const props = defineProps(['formFieldList'])
const dataSource = ref([]) const dataSource = ref([])
dataSource.value = workFlowUtils.getListField(props.formFieldList).filter((f) => { dataSource.value = workFlowUtils
.getListField(props.formFieldList)
.filter(f => {
// 判断如果是人员类型的，就让列表显示 // 判断如果是人员类型的，就让列表显示
if (f.type === 'xnUserSelector') { if (f.type === 'xnUserSelector') {
return f return f
} }
}).map((m) => { })
.map(m => {
return { return {
label: m.label, label: m.label,
model: m.model, model: m.model,
@@ -59,50 +62,56 @@
type: m.type type: m.type
} }
}) })
const selectedRowKeys = ref([]) const selectedRowKeys = ref([])
// 设置默认选中的 // 设置默认选中的
const state = reactive({ const state = reactive({
selectedRowKeys: selectedRowKeys.value, selectedRowKeys: selectedRowKeys.value,
loading: false loading: false
}) })
const showFormUserModal = (data = '') => { const showFormUserModal = (data = '') => {
if (dataSource.value.length === 0) { if (dataSource.value.length === 0) {
message.warning('表单内无人员可提供选择！') ElMessage({
message: '表单内无人员可提供选择！',
type: 'warning'
})
return return
} }
if (dataSource.value.length === 1) { if (dataSource.value.length === 1) {
emit('click', dataSource.value[0]) emit('click', dataSource.value[0])
message.success('表单内仅有一个人员选择，默认选中！') ElMessage({
message: '表单内仅有一个人员选择，默认选中！',
type: 'success'
})
} else { } else {
visible.value = true visible.value = true
state.selectedRowKeys[0] = data state.selectedRowKeys[0] = data
} }
} }
// 点击复选框回调 // 点击复选框回调
const onSelectChange = (selectedRowKeys) => { const onSelectChange = selectedRowKeys => {
state.selectedRowKeys = selectedRowKeys state.selectedRowKeys = selectedRowKeys
} }
// 确定 // 确定
const handleOk = () => { const handleOk = () => {
const result = dataSource.value.filter((item) => state.selectedRowKeys[0] === item.model) const result = dataSource.value.filter(item => state.selectedRowKeys[0] === item.model)
emit('click', result[0]) emit('click', result[0])
visible.value = false visible.value = false
state.selectedRowKeys = [] state.selectedRowKeys = []
} }
// 关闭 // 关闭
const handleCancel = () => { const handleCancel = () => {
visible.value = false visible.value = false
} }
// 抛出方法，让上个界面使用 // 抛出方法，让上个界面使用
defineExpose({ defineExpose({
showFormUserModal showFormUserModal
}) })
</script> </script>
<style lang="less"> <style lang="less">
.form-user-table { .form-user-table {
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
} }
</style> </style>

205
src/components/XnWorkflow/nodes/serviceTask.vue
View File

@@ -1,27 +1,35 @@
<!-- 抄送人组件 -->
<template> <template>
<div class="node-wrap"> <div class="node-wrap">
<div class="node-wrap-box" @click="show"> <div class="node-wrap-box" @click="show">
<div class="title" style="background: #3296fa"> <div class="title" style="background: #3296fa">
<send-outlined class="icon" /> <send-outlined class="icon" />
<span>{{ childNode.title }}</span> <span>{{ childNode.title }}</span>
<close-outlined class="close" @click.stop="delNode()" /> <!-- <close-outlined class="close" /> -->
<el-icon>
<CloseBold @click="delNode()" />
</el-icon>
</div> </div>
<div class="content"> <div class="content">
<span v-if="toText(childNode)">{{ toText(childNode) }}</span> <span v-if="toText(childNode)">{{ toText(childNode) }}</span>
<span v-else class="placeholder">请选择人员</span> <span v-else class="placeholder">请选择人员</span>
</div> </div>
</div> </div>
<add-node v-model="childNode.childNode"></add-node> <addNode v-model="childNode.childNode"></addNode>
<xn-form-container <formContainer
v-model:visible="drawer" v-model="drawer"
:visibile="drawer"
:destroy-on-close="true" :destroy-on-close="true"
:width="700"
:body-style="{ 'padding-top': '0px' }" :body-style="{ 'padding-top': '0px' }"
> >
<template #title> <template #title>
<div class="node-wrap-drawer__title"> <div class="node-wrap-drawer__title">
<label v-if="!isEditTitle" @click="editTitle" <label v-if="!isEditTitle" @click="editTitle">
>{{ form.title }}<edit-outlined class="node-wrap-drawer-title-edit" /> {{ form.title }}
<el-icon>
<EditPen />
</el-icon>
<!-- <edit-outlined class="node-wrap-drawer-title-edit" /> -->
</label> </label>
<el-input <el-input
v-if="isEditTitle" v-if="isEditTitle"
@@ -33,29 +41,35 @@
/> />
</div> </div>
</template> </template>
<el-container> <div class="tab_container">
<el-tabs v-model="activeKey"> <el-tabs v-model="activeKey">
<el-tab-pane name="1" label="抄送配置" lazy> <el-tab-pane name="1" label="抄送配置" lazy>
<el-form layout="vertical" :model="userTypeForm"> <el-form layout="vertical" :model="userTypeForm">
<div v-show="nodeLegal" style="margin-bottom: 10px"> <div v-show="nodeLegal" style="margin-bottom: 10px">
<el-alert message="请选择抄送人员！" type="error" /> <div class="please_choose">
<p>请选择抄送人员！</p>
</div>
</div> </div>
<div class="mb-2"> <div class="mb-2">
<span class="left-span-label">选择要抄送的人员</span> <navTitle><template #nav_name>选择要抄送的人员</template></navTitle>
</div> </div>
<el-radio-group v-model:value="userSelectionType" style="width: 100%"> <!-- 选择抄送人员 -->
<el-row style="padding-bottom: 10px"> <el-radio-group v-model="userSelectionType" @input="changeRadio" style="width: 100%">
<el-col :span="8" v-for="userSelectionType in userSelectionTypeList" :key="userSelectionType.value"> <el-radio
<el-radio :value="userSelectionType.value" @click="selectionClick(userSelectionType.value)"> v-for="(item, index) in userSelectionTypeList"
{{ userSelectionType.label }} :value="item.value"
:key="index"
>
<!-- @click="selectionClick(item.value)" -->
{{ item.label }}
</el-radio> </el-radio>
</el-col>
</el-row>
</el-radio-group> </el-radio-group>
<el-form-item v-if="userSelectionType === 'USER'"> <el-form-item v-if="userSelectionType === 'USER'">
<el-button class="mt-2" type="primary" size="small" round @click="openSelector"> <el-button class="mt-2" type="primary" size="small" @click="openSelector">
<template #icon> <template #icon>
<search-outlined /> <el-icon>
<Search />
</el-icon>
</template> </template>
选择 选择
</el-button> </el-button>
@@ -66,35 +80,48 @@
<div class="mt-2"> <div class="mt-2">
<el-button type="primary" @click="openSelector" size="small"> <el-button type="primary" @click="openSelector" size="small">
<template #icon> <template #icon>
<search-outlined /> <el-icon>
<Search />
</el-icon>
</template> </template>
选择 选择
</el-button> </el-button>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<prop-tag <prop-tag
v-if="form.properties.participateInfo.length > 0 && form.properties.participateInfo[0].value !== ''" v-if="
form.properties.participateInfo.length > 0 &&
form.properties.participateInfo[0].value !== ''
"
:tag-list="form.properties.participateInfo[0]" :tag-list="form.properties.participateInfo[0]"
/> />
</div> </div>
</el-form-item> </el-form-item>
<!-- 选择人员变量 -->
<el-form-item <el-form-item
class="mt-2" class="mt-2"
v-if="recordData.formType === 'DEFINE' && userSelectionType === 'FORM_USER'" v-if="userSelectionType === 'FORM_USER'"
name="formUser" name="formUser"
:rules="[{ required: true, message: '请输入人员变量' }]" :rules="[{ required: true, message: '请输入人员变量' }]">
> <!-- recordData.formType === 'DEFINE' && -->
<template #label> <!-- <template #label> -->
<el-tooltip> <!-- <el-tooltip>
<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template> <template #title></template>
<question-circle-outlined /> <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-tooltip>
</template>
<el-input <el-input
style="width: 50%" v-model="userTypeForm.formUser"
v-model:value="userTypeForm.formUser" clearable
allow-clear
@input="customFormUser" @input="customFormUser"
@keyup.enter="customFormUser" @keyup.enter="customFormUser"
placeholder="请输入人员变量" placeholder="请输入人员变量"
@@ -105,19 +132,19 @@
<el-tab-pane name="2" label="执行监听" lazy> <el-tab-pane name="2" label="执行监听" lazy>
<prop-listener-info <prop-listener-info
ref="propExecutionListenerInfoRef" ref="propExecutionListenerInfoRef"
v-if="form&&form.properties&&form.properties.executionListenerInfo" v-if="form && form.properties && form.properties.executionListenerInfo"
:listener-value="form.properties.executionListenerInfo" :listener-value="form.properties.executionListenerInfo"
:default-listener-list="executionListenerInfo" :default-listener-list="executionListenerInfo"
:listener-value-array="executionListenerArray" :listener-value-array="executionListenerArray"
/> />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-container> </div>
<template #footer> <template #footer>
<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button> <el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
<el-button @click="drawer = false">取消</el-button> <el-button @click="drawer = false">取消</el-button>
</template> </template>
</xn-form-container> </formContainer>
<form-user-selector ref="formUserSelectorRef" :form-field-list="formFieldListValue" @click="userCallBack" /> <form-user-selector ref="formUserSelectorRef" :form-field-list="formFieldListValue" @click="userCallBack" />
<user-selector-plus <user-selector-plus
ref="userselectorPlus" ref="userselectorPlus"
@@ -131,21 +158,29 @@
</template> </template>
<script> <script>
import addNode from './addNode.vue' import addNode from './addNode.vue'
import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue' import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
import FormUserSelector from './prop/formUserSelector.vue' import FormUserSelector from './prop/formUserSelector.vue'
import propTag from './prop/propTag.vue' import propTag from './prop/propTag.vue'
import { cloneDeep, isEmpty } from 'lodash-es' import { cloneDeep, isEmpty } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config' import config from '@/components/XnWorkflow/nodes/config/config'
import PropListenerInfo from './prop/propListenerInfo.vue' import PropListenerInfo from './prop/propListenerInfo.vue'
import { CloseBold, EditPen, Search ,InfoFilled} from '@element-plus/icons-vue'
export default { import formContainer from '@/components/formContainer/index.vue'
import navTitle from '../components/navTitle.vue'
export default {
components: { components: {
FormUserSelector, FormUserSelector,
addNode, addNode,
userSelectorPlus, userSelectorPlus,
propTag, propTag,
PropListenerInfo PropListenerInfo,
formContainer,
navTitle,
CloseBold,
EditPen,
Search,
InfoFilled
}, },
props: { props: {
modelValue: { type: Object, default: () => {} }, modelValue: { type: Object, default: () => {} },
@@ -185,7 +220,7 @@
if (!isEmpty(this.form.properties.participateInfo)) { if (!isEmpty(this.form.properties.participateInfo)) {
this.userSelectionType = this.form.properties.participateInfo[0].key this.userSelectionType = this.form.properties.participateInfo[0].key
// 如果包含表单内的人 // 如果包含表单内的人
const formUserObj = this.form.properties.participateInfo.find((f) => f.key === 'FORM_USER') const formUserObj = this.form.properties.participateInfo.find(f => f.key === 'FORM_USER')
if (formUserObj) { if (formUserObj) {
this.userTypeForm.formUser = formUserObj.value this.userTypeForm.formUser = formUserObj.value
} }
@@ -206,7 +241,8 @@
}, },
save() { save() {
if (isEmpty(this.nodeLegal)) { if (isEmpty(this.nodeLegal)) {
this.form.properties.executionListenerInfo = this.$refs.propExecutionListenerInfoRef.selectedListenerList() this.form.properties.executionListenerInfo =
this.$refs.propExecutionListenerInfoRef.selectedListenerList()
this.form.dataLegal = true this.form.dataLegal = true
this.$emit('update:modelValue', this.form) this.$emit('update:modelValue', this.form)
this.drawer = false this.drawer = false
@@ -231,7 +267,7 @@
this.form.properties.participateInfo = [ this.form.properties.participateInfo = [
{ {
key: 'FORM_USER', key: 'FORM_USER',
label: this.userSelectionTypeList.filter((item) => item.value === 'FORM_USER')[0].label, label: this.userSelectionTypeList.filter(item => item.value === 'FORM_USER')[0].label,
value: value.model value: value.model
} }
] ]
@@ -241,7 +277,7 @@
getTagList(type) { getTagList(type) {
const participateInfo = this.form.properties.participateInfo const participateInfo = this.form.properties.participateInfo
if (participateInfo.length > 0) { if (participateInfo.length > 0) {
const obj = participateInfo.find((item) => item.key === type) const obj = participateInfo.find(item => item.key === type)
if (isEmpty(obj.label)) { if (isEmpty(obj.label)) {
return undefined return undefined
} else { } else {
@@ -251,6 +287,11 @@
return undefined return undefined
} }
}, },
changeRadio() {
console.log(this.userSelectionType, '99999')
this.form.properties.participateInfo = []
this.nodeLegal = true
},
// 选择抄送人员类型 // 选择抄送人员类型
selectionClick(value) { selectionClick(value) {
this.form.properties.participateInfo = [] this.form.properties.participateInfo = []
@@ -268,14 +309,15 @@
}, },
// 监听自定义表单人员输入 // 监听自定义表单人员输入
customFormUser() { customFormUser() {
// console.log(this.userTypeForm.formUser,"0000000");
if (this.userTypeForm.formUser) { if (this.userTypeForm.formUser) {
this.form.properties.participateInfo = [ // this.form.properties.participateInfo = [
{ // {
key: 'FORM_USER', // key: 'FORM_USER',
label: '表单内的人', // label: '表单内的人',
value: this.userTypeForm.formUser // value: this.userTypeForm.formUser
} // }
] // ]
this.nodeLegal = false this.nodeLegal = false
} else { } else {
this.nodeLegal = true this.nodeLegal = true
@@ -301,5 +343,56 @@
} }
} }
} }
} }
</script> </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>

4
src/components/formContainer/index.vue
View File

@@ -1,10 +1,10 @@
<template> <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]> <template v-for="slotKey in slotKeys" #[slotKey]>
<slot :name="slotKey" /> <slot :name="slotKey" />
</template> </template>
</el-dialog> </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]> <template v-for="slotKey in slotKeys" #[slotKey]>
<slot :name="slotKey" /> <slot :name="slotKey" />
</template> </template>

4
src/styles/element.scss
View File

@@ -196,3 +196,7 @@
.sgmap-ctrl-bottom-left{ .sgmap-ctrl-bottom-left{
display: none !important; display: none !important;
} }
.el-drawer__header{
margin-bottom: 0 !important;
}