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-08 20:44:33 +08:00
parent 1e645adce8
commit 6076cec029
71 changed files with 8222 additions and 1866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/ColorPicker/index.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div class="snowy-color-picker" @click="forceResize">
<color-picker v-bind="$attrs" format="hex" :pureColor="props.value" @update:pureColor="update" />
</div>
</template>
<script setup>
import { ColorPicker } from 'vue3-colorpicker'
import 'vue3-colorpicker/style.css'
const emit = defineEmits(['update:value'])
const props = defineProps({
value: {
type: String,
default: '#1890ff'
}
})
const forceResize = () => {
window.dispatchEvent(new Event('resize'))
}
const update = (val) => {
const currentColor = document.querySelector('.current-color')
if (currentColor) {
currentColor.textContent = val
}
emit('update:value', val)
}
</script>
<style lang="less">
.snowy-color-picker {
.vc-color-wrap {
width: auto;
}
.current-color {
color: #fff;
padding: 0 10px;
}
}
</style>

860
src/components/Selector/orgSelectorPlus.vue
View File

@@ -1,398 +1,496 @@
<template>
<a-modal
v-model:visible="visible"
title="机构选择"
:width="1000"
:mask-closable="false"
<el-dialog v-model="visible" title="机构选择" :align-center="true" width="90%" style="height: 600px">
<!-- :mask-closable="false"
:destroy-on-close="true"
@ok="handleOk"
@cancel="handleClose"
>
<a-row :gutter="10">
<a-col :span="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree
v-if="treeData"
v-model:expandedKeys="defaultExpandedKeys"
:tree-data="treeData"
:field-names="treeFieldNames"
@select="treeSelect"
>
</a-tree>
</a-card>
</a-col>
<a-col :span="11">
<div class="table-operator" style="margin-bottom: 10px">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入机构名" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
<a-button class="snowy-buttom-left" @click="() => reset()"> 重置 </a-button>
</a-col>
</a-row>
</a-form>
</div>
<div class="org-table">
<a-table
ref="table"
size="small"
:columns="commons"
:data-source="tableData"
:expand-row-by-click="true"
:loading="pageLoading"
bordered
:pagination="false"
>
<template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
@cancel="handleClose" -->
<div class="drawer_body">
<el-row :gutter="10">
<el-col :span="7">
<el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<el-tree
v-if="treeData"
v-model:expandedKeys="defaultExpandedKeys"
:data="treeData"
:field-names="treeFieldNames"
:props="defaultProps"
accordion
:default-expand-all="true"
@node-click="treeSelect"
></el-tree>
</el-card>
</el-col>
<el-col :span="11">
<div class="table-operator" style="margin-bottom: 10px">
<el-form
ref="searchFormRef"
name="advanced_search"
class="ant-advanced-search-form"
:model="searchFormState"
>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item name="searchKey">
<el-input
v-model="searchFormState.searchKey"
placeholder="请输入机构名"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-button type="primary" class="primarySele" @click="loadData()">查询</el-button>
<el-button class="snowy-buttom-left" @click="() => reset()">重置</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="org-table">
<div class="org_table_head">
<p>待选择列表</p>
<div class="org_table_head_add">
添加当前数据
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'category'">
{{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
</template>
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
</template>
</template>
</a-table>
<div class="mt-2">
<a-pagination
v-if="!isEmpty(tableData)"
v-model:current="current"
v-model:page-size="pageSize"
:total="total"
size="small"
showSizeChanger
@change="paginationChange"
/>
</div>
</div>
</a-col>
<a-col :span="6">
<div class="org-table">
<a-table
ref="selectedTable"
size="small"
:columns="selectedCommons"
:data-source="selectedData"
:expand-row-by-click="true"
:loading="selectedTableListLoading"
bordered
>
<template #title>
<span>已选择: {{ selectedData.length }}</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
</div>
<el-table
ref="table"
size="small"
:columns="commons"
:data="tableData"
:expand-row-by-click="true"
:loading="pageLoading"
bordered
:pagination="false"
border
stripe
height="330"
>
<template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span>
<div v-if="!radioModel" style="float: right">
<el-button type="dashed" size="small" @click="addAllPageRecord">
添加当前数据
</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'category'">
{{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
</template>
<template v-if="column.dataIndex === 'action'">
<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
</template>
</template>
<el-table-column prop="action" label="操作" width="80" align="center">
<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
</el-table-column>
<el-table-column prop="name" label="机构名" />
<el-table-column prop="type" label="分类"></el-table-column>
</el-table>
<div class="mt-2">
<el-pagination
v-if="!isEmpty(tableData)"
v-model:current="current"
v-model:page-size="pageSize"
:total="total"
size="small"
showSizeChanger
@change="paginationChange"
/>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="org-table">
<div class="org_table_heads">
<p>待选择列表</p>
<div class="org_table_head_delete">
全部移除
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
</template>
</template>
</a-table>
</div>
</a-col>
</a-row>
</a-modal>
</div>
<el-table
ref="selectedTable"
size="small"
:columns="selectedCommons"
:data="selectedData"
:expand-row-by-click="true"
:loading="selectedTableListLoading"
bordered
border
>
<template #title>
<span>已选择: {{ selectedData.length }}</span>
<div v-if="!radioModel" style="float: right">
<el-button type="dashed" danger size="small" @click="delAllRecord">
全部移除
</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<el-button type="dashed" danger size="small" @click="delRecord(record)">
移除
</el-button>
</template>
</template>
<el-table-column prop="action" label="操作" width="80" align="center">
<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
</el-table-column>
<el-table-column prop="name" label="机构名" />
</el-table>
</div>
</el-col>
</el-row>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="visible = false">确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup name="orgSelectorPlus">
import { ElMessage } from 'element-plus'
import { remove, isEmpty } from 'lodash-es'
import { ref } from 'vue'
// 弹窗是否打开
const visible = ref(false)
// 主表格common
const commons = [
{
title: '操作',
dataIndex: 'action',
align: 'center',
width: 80
},
{
title: '机构名',
dataIndex: 'name',
ellipsis: true
},
{
title: '分类',
dataIndex: 'category'
}
]
// 选中表格的表格common
const selectedCommons = [
{
title: '操作',
dataIndex: 'action',
align: 'center',
width: 80
},
{
title: '机构名',
dataIndex: 'name',
ellipsis: true
}
]
// 主表格的ref 名称
const table = ref()
// 选中表格的ref 名称
const selectedTable = ref()
const tableRecordNum = ref()
const searchFormState = ref({})
const searchFormRef = ref()
const cardLoading = ref(true)
const pageLoading = ref(false)
const selectedTableListLoading = ref(false)
// 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
// 获取机构树数据
const treeData = ref()
// 默认展开二级树的节点id
const defaultExpandedKeys = ref([])
const emit = defineEmits({ onBack: null })
const tableData = ref([])
const selectedData = ref([])
const recordIds = ref()
const props = defineProps(['orgPageApi', 'orgTreeApi', 'radioModel', 'dataIsConverterFlw', 'checkedOrgListApi'])
// 是否是单选
const radioModel = props.radioModel || false
// 数据是否转换成工作流格式
const dataIsConverterFlw = props.dataIsConverterFlw || false
// 分页相关
const current = ref(0) // 当前页数
const pageSize = ref(20) // 每页条数
const total = ref(0) // 数据总数
import { ElMessage } from 'element-plus'
import { remove, isEmpty } from 'lodash-es'
import { ref } from 'vue'
// 弹窗是否打开
const visible = ref(false)
// 主表格common
const commons = [
{
label: '操作',
prop: 'action',
align: 'center',
width: 80
},
{
label: '机构名',
prop: 'name',
ellipsis: true
},
{
label: '分类',
prop: 'category'
}
]
// 选中表格的表格common
const selectedCommons = [
{
label: '操作',
prop: 'action',
align: 'center',
width: 80
},
{
label: '机构名',
prop: 'name',
ellipsis: true
}
]
// 打开弹框
const showOrgPlusModal = (ids) => {
visible.value = true
if (dataIsConverterFlw) {
ids = goDataConverter(ids)
}
recordIds.value = ids
if (props.orgTreeApi) {
// 获取机构树
props.orgTreeApi().then((data) => {
cardLoading.value = false
if (data !== null) {
treeData.value = data
// 默认展开2级
treeData.value.forEach((item) => {
// 因为0的顶级
if (item.parentId === '0') {
defaultExpandedKeys.value.push(item.id)
// 取到下级ID
if (item.children) {
item.children.forEach((items) => {
defaultExpandedKeys.value.push(items.id)
})
}
}
})
}
})
}
searchFormState.value.size = pageSize.value
loadData()
if (props.checkedOrgListApi) {
if (isEmpty(recordIds.value)) {
return
}
const param = {
idList: recordIds.value
}
selectedTableListLoading.value = true
props
.checkedOrgListApi(param)
.then((data) => {
selectedData.value = data
})
.finally(() => {
selectedTableListLoading.value = false
})
}
}
// 查询主表格数据
const loadData = () => {
pageLoading.value = true
props
.orgPageApi(searchFormState.value)
.then((data) => {
current.value = data.current
total.value = data.total
// 重置、赋值
tableData.value = []
tableRecordNum.value = 0
tableData.value = data.records
if (data.records) {
tableRecordNum.value = data.records.length
} else {
tableRecordNum.value = 0
}
})
.finally(() => {
pageLoading.value = false
})
}
// pageSize改变回调分页事件
const paginationChange = (page, pageSize) => {
searchFormState.value.current = page
searchFormState.value.size = pageSize
loadData()
}
const judge = () => {
if (radioModel && selectedData.value.length > 0) {
return false
}
return true
}
// 添加记录
const addRecord = (record) => {
if (!judge()) {
message.warning('只可选择一条')
return
}
const selectedRecord = selectedData.value.filter((item) => item.id === record.id)
if (selectedRecord.length === 0) {
selectedData.value.push(record)
} else {
message.warning('该记录已存在')
}
}
// 添加全部
const addAllPageRecord = () => {
let newArray = selectedData.value.concat(tableData.value)
let list = []
for (let item1 of newArray) {
let flag = true
for (let item2 of list) {
if (item1.id === item2.id) {
flag = false
}
}
if (flag) {
list.push(item1)
}
}
selectedData.value = list
}
// 删减记录
const delRecord = (record) => {
remove(selectedData.value, (item) => item.id === record.id)
}
// 删减记录
const delAllRecord = () => {
selectedData.value = []
}
// 点击树查询
const treeSelect = (selectedKeys) => {
searchFormState.value.current = 0
if (selectedKeys.length > 0) {
searchFormState.value.orgId = selectedKeys.toString()
} else {
delete searchFormState.value.orgId
}
loadData()
}
// 确定
const handleOk = () => {
const value = []
selectedData.value.forEach((item) => {
const obj = {
id: item.id,
name: item.name,
category: item.category
}
value.push(obj)
})
// 判断是否做数据的转换为工作流需要的
if (dataIsConverterFlw) {
emit('onBack', outDataConverter(value))
} else {
emit('onBack', value)
}
handleClose()
}
// 重置
const reset = () => {
delete searchFormState.value.searchKey
loadData()
}
const handleClose = () => {
searchFormState.value = {}
tableRecordNum.value = 0
tableData.value = []
current.value = 0
pageSize.value = 20
total.value = 0
selectedData.value = []
visible.value = false
}
// 主表格的ref 名称
const table = ref()
// 选中表格的ref 名称
const selectedTable = ref()
const tableRecordNum = ref()
const searchFormState = ref({})
const searchFormRef = ref()
const cardLoading = ref(true)
const pageLoading = ref(false)
const selectedTableListLoading = ref(false)
//树状图数据配置
const defaultProps = {
children: 'children',
label: 'name'
}
// 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
// 获取机构树数据
const treeData = ref()
// 默认展开二级树的节点id
const defaultExpandedKeys = ref([])
const emit = defineEmits({ onBack: null })
const tableData = ref([])
const selectedData = ref([])
const recordIds = ref()
const props = defineProps(['orgPageApi', 'orgTreeApi', 'radioModel', 'dataIsConverterFlw', 'checkedOrgListApi'])
// 是否是单选
const radioModel = props.radioModel || false
// 数据是否转换成工作流格式
const dataIsConverterFlw = props.dataIsConverterFlw || false
// 分页相关
const current = ref(0) // 当前页数
const pageSize = ref(20) // 每页条数
const total = ref(0) // 数据总数
// 数据进入后转换
const goDataConverter = (data) => {
const resultData = []
if (data.length > 0) {
const values = data[0].value.split(',')
if (JSON.stringify(values) !== '[""]') {
for (let i = 0; i < values.length; i++) {
resultData.push(values[i])
}
}
}
return resultData
}
// 数据出口转换器
const outDataConverter = (data) => {
const obj = {}
let label = ''
let value = ''
for (let i = 0; i < data.length; i++) {
if (data.length === i + 1) {
label = label + data[i].name
value = value + data[i].id
} else {
label = label + data[i].name + ','
value = value + data[i].id + ','
}
}
obj.key = 'ORG'
obj.label = label
obj.value = value
obj.extJson = ''
return obj
}
defineExpose({
showOrgPlusModal
})
// 打开弹框
const showOrgPlusModal = ids => {
visible.value = true
if (dataIsConverterFlw) {
ids = goDataConverter(ids)
}
recordIds.value = ids
if (props.orgTreeApi) {
// 获取机构树
props.orgTreeApi().then(data => {
cardLoading.value = false
if (data !== null) {
console.log(data, 'data,++++++++++++')
treeData.value = data.data
// 默认展开2级
treeData.value.forEach(item => {
// 因为0的顶级
if (item.parentId === '0') {
defaultExpandedKeys.value.push(item.id)
// 取到下级ID
if (item.children) {
item.children.forEach(items => {
defaultExpandedKeys.value.push(items.id)
})
}
}
})
}
})
}
searchFormState.value.size = pageSize.value
loadData()
if (props.checkedOrgListApi) {
if (isEmpty(recordIds.value)) {
return
}
const param = {
idList: recordIds.value
}
selectedTableListLoading.value = true
props
.checkedOrgListApi(param)
.then(data => {
selectedData.value = data
})
.finally(() => {
selectedTableListLoading.value = false
})
}
}
// 查询主表格数据
const loadData = () => {
pageLoading.value = true
props
.orgPageApi(searchFormState.value)
.then(data => {
current.value = data.current
total.value = data.total
// 重置、赋值
tableData.value = []
tableRecordNum.value = 0
console.log(data, '999999999999')
tableData.value = data.data.records
if (data.records) {
tableRecordNum.value = data.data.records.length
} else {
tableRecordNum.value = 0
}
})
.finally(() => {
pageLoading.value = false
})
}
// pageSize改变回调分页事件
const paginationChange = (page, pageSize) => {
searchFormState.value.current = page
searchFormState.value.size = pageSize
loadData()
}
const judge = () => {
if (radioModel && selectedData.value.length > 0) {
return false
}
return true
}
// 添加记录
const addRecord = record => {
if (!judge()) {
message.warning('只可选择一条')
return
}
const selectedRecord = selectedData.value.filter(item => item.id === record.id)
if (selectedRecord.length === 0) {
selectedData.value.push(record)
} else {
message.warning('该记录已存在')
}
}
// 添加全部
const addAllPageRecord = () => {
let newArray = selectedData.value.concat(tableData.value)
let list = []
for (let item1 of newArray) {
let flag = true
for (let item2 of list) {
if (item1.id === item2.id) {
flag = false
}
}
if (flag) {
list.push(item1)
}
}
selectedData.value = list
}
// 删减记录
const delRecord = record => {
remove(selectedData.value, item => item.id === record.id)
}
// 删减记录
const delAllRecord = () => {
selectedData.value = []
}
// 点击树查询
const treeSelect = selectedKeys => {
console.log(selectedKeys.id, '111112222333')
searchFormState.value.current = 0
if (selectedKeys.id) {
searchFormState.value.orgId = selectedKeys.id.toString()
} else {
// delete searchFormState.value.orgId
delete searchFormState.value.orgId
}
loadData()
}
// 确定
const handleOk = () => {
const value = []
selectedData.value.forEach(item => {
const obj = {
id: item.id,
name: item.name,
category: item.category
}
value.push(obj)
})
// 判断是否做数据的转换为工作流需要的
if (dataIsConverterFlw) {
emit('onBack', outDataConverter(value))
} else {
emit('onBack', value)
}
handleClose()
}
// 重置
const reset = () => {
delete searchFormState.value.searchKey
loadData()
}
const handleClose = () => {
searchFormState.value = {}
tableRecordNum.value = 0
tableData.value = []
current.value = 0
pageSize.value = 20
total.value = 0
selectedData.value = []
visible.value = false
}
// 数据进入后转换
const goDataConverter = data => {
const resultData = []
if (data.length > 0) {
const values = data[0].value.split(',')
if (JSON.stringify(values) !== '[""]') {
for (let i = 0; i < values.length; i++) {
resultData.push(values[i])
}
}
}
return resultData
}
// 数据出口转换器
const outDataConverter = data => {
const obj = {}
let label = ''
let value = ''
for (let i = 0; i < data.length; i++) {
if (data.length === i + 1) {
label = label + data[i].name
value = value + data[i].id
} else {
label = label + data[i].name + ','
value = value + data[i].id + ','
}
}
obj.key = 'ORG'
obj.label = label
obj.value = value
obj.extJson = ''
return obj
}
defineExpose({
showOrgPlusModal
})
</script>
<style lang="less" scoped>
.selectorTreeDiv {
max-height: 500px;
overflow: auto;
<style lang="scss" scoped>
.selectorTreeDiv {
height: 500px;
overflow: auto;
}
.cardTag {
margin-left: 10px;
}
.primarySele {
margin-right: 10px;
}
.ant-form-item {
margin-bottom: 0 !important;
}
.org-table {
overflow: auto;
max-height: 450px;
}
.drawer_body {
width: 100%;
height: 350px;
}
.dialog-footer{
position:absolute;
right:10px;
bottom:10px;
z-index:2005;
}
.org_table_head,.org_table_heads{
width:100%;
height: 40px;
border: 1px solid #F0F0F0;
display:flex;
align-items:center;
justify-content: space-between;
padding:0 10px;
p{
font-size: 12px;
}
.cardTag {
margin-left: 10px;
.org_table_head_add,.org_table_head_delete{
width:100px;
height:24px;
font-size: 12px;
border:2px dashed #F0F0F0;
border-radius:2px;
cursor:pointer;
display:flex;
align-items: center;
justify-content: center;
}
.primarySele {
margin-right: 10px;
.org_table_head_add:hover{
border:2px dashed #3FA9FF;
color:#3FA9FF;
}
.ant-form-item {
margin-bottom: 0 !important;
}
.org-table {
overflow: auto;
max-height: 450px;
.org_table_head_delete{
width:72px;
height:24px;
border:2px dashed #FF4D4F;
color:#FF4D4F;
}
}
</style>

80
src/components/Selector/posSelectorPlus.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal
v-model:visible="visible"
<el-dialog
v-model="visible"
title="职位选择"
:width="1000"
:mask-closable="false"
@@ -8,41 +8,41 @@
@ok="handleOk"
@cancel="handleClose"
>
<a-row :gutter="10">
<a-col :span="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree
<el-row :gutter="10">
<el-col :span="7">
<el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<el-tree
v-if="treeData"
v-model:expandedKeys="defaultExpandedKeys"
:tree-data="treeData"
:field-names="treeFieldNames"
@select="treeSelect"
@node-click="treeSelect"
>
</a-tree>
</a-card>
</a-col>
<a-col :span="11">
</el-tree>
</el-card>
</el-col>
<el-col :span="11">
<div class="table-operator" style="margin-bottom: 10px">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
<a-button class="snowy-buttom-left" @click="() => reset()"> 重置 </a-button>
</a-col>
</a-row>
</a-form>
<el-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item name="searchKey">
<el-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-button type="primary" class="primarySele" @click="loadData()"> 查询 </el-button>
<el-button class="snowy-buttom-left" @click="() => reset()"> 重置 </el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="pos-table">
<a-table
<el-table
ref="table"
size="small"
:columns="commons"
:data-source="tableData"
:datel="tableData"
:expand-row-by-click="true"
:loading="pageLoading"
bordered
@@ -51,20 +51,20 @@
<template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
<el-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
</template>
<template v-if="column.dataIndex === 'category'">
{{ $TOOL.dictTypeData('POSITION_CATEGORY', record.category) }}
</template>
</template>
</a-table>
</el-table>
<div class="mt-2">
<a-pagination
<el-pagination
v-if="!isEmpty(tableData)"
v-model:current="current"
v-model:page-size="pageSize"
@@ -75,14 +75,14 @@
/>
</div>
</div>
</a-col>
<a-col :span="6">
</el-col>
<el-col :span="6">
<div class="pos-table">
<a-table
<el-table
ref="selectedTable"
size="small"
:columns="selectedCommons"
:data-source="selectedData"
:datel-source="selectedData"
:expand-row-by-click="true"
:loading="selectedTableListLoading"
bordered
@@ -90,19 +90,19 @@
<template #title>
<span>已选择: {{ selectedData.length }}</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
<el-button type="dashed" danger size="small" @click="delAllRecord">全部移除</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
<el-button type="dashed" danger size="small" @click="delRecord(record)">移除</el-button>
</template>
</template>
</a-table>
</el-table>
</div>
</a-col>
</a-row>
</a-modal>
</el-col>
</el-row>
</el-dialog>
</template>
<script setup name="posSelectorPlus">

78
src/components/Selector/roleSelectorPlus.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal
v-model:visible="visible"
<el-dialog
v-model="visible"
title="角色选择"
:width="1000"
:mask-closable="false"
@@ -8,41 +8,41 @@
@ok="handleOk"
@cancel="handleClose"
>
<a-row :gutter="10">
<a-col :span="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree
<el-row :gutter="10">
<el-col :span="7">
<el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<el-tree
v-if="treeData"
v-model:expandedKeys="defaultExpandedKeys"
:tree-data="treeData"
:data="treeData"
:field-names="treeFieldNames"
@select="treeSelect"
>
</a-tree>
</a-card>
</a-col>
<a-col :span="11">
</el-tree>
</el-card>
</el-col>
<el-col :span="11">
<div class="table-operator" style="margin-bottom: 10px">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入角色名" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
<a-button class="snowy-buttom-left" @click="() => reset()"> 重置 </a-button>
</a-col>
</a-row>
</a-form>
<el-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item name="searchKey">
<el-input v-model:value="searchFormState.searchKey" placeholder="请输入角色名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-button type="primary" class="primarySele" @click="loadData()"> 查询 </el-button>
<el-button class="snowy-buttom-left" @click="() => reset()"> 重置 </el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="role-table">
<a-table
<el-table
ref="table"
size="small"
:columns="commons"
:data-source="tableData"
:data="tableData"
:expand-row-by-click="true"
:loading="pageLoading"
bordered
@@ -51,20 +51,20 @@
<template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
<el-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
</template>
<template v-if="column.dataIndex === 'category'">
{{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }}
</template>
</template>
</a-table>
</el-table>
<div class="mt-2">
<a-pagination
<el-pagination
v-if="!isEmpty(tableData)"
v-model:current="current"
v-model:page-size="pageSize"
@@ -75,10 +75,10 @@
/>
</div>
</div>
</a-col>
<a-col :span="6">
</el-col>
<el-col :span="6">
<div class="role-table">
<a-table
<el-table
ref="selectedTable"
size="small"
:columns="selectedCommons"
@@ -90,19 +90,19 @@
<template #title>
<span>已选择: {{ selectedData.length }}</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
<el-button type="dashed" danger size="small" @click="delAllRecord">全部移除</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
<el-button type="dashed" danger size="small" @click="delRecord(record)">移除</el-button>
</template>
</template>
</a-table>
</el-table>
</div>
</a-col>
</a-row>
</a-modal>
</el-col>
</el-row>
</el-dialog>
</template>
<script setup name="roleSelectorPlus">

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

@@ -1,6 +1,6 @@
<template>
<a-modal
v-model:visible="visible"
<el-dialog
v-model="visible"
title="用户选择"
:width="1000"
:mask-closable="false"
@@ -8,37 +8,37 @@
@ok="handleOk"
@cancel="handleClose"
>
<a-row :gutter="10">
<a-col :span="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree
<el-row :gutter="10">
<el-col :span="7">
<el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<el-tree
v-if="treeData"
v-model:expandedKeys="defaultExpandedKeys"
:tree-data="treeData"
:data="treeData"
:field-names="treeFieldNames"
@select="treeSelect"
@node-click="treeSelect"
>
</a-tree>
</a-card>
</a-col>
<a-col :span="11">
</el-tree>
</el-card>
</el-col>
<el-col :span="11">
<div class="table-operator" style="margin-bottom: 10px">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入用户名" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
<a-button class="snowy-buttom-left" @click="reset()"> 重置 </a-button>
</a-col>
</a-row>
</a-form>
<el-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item name="searchKey">
<el-input v-model:value="searchFormState.searchKey" placeholder="请输入用户名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-button type="primary" class="primarySele" @click="loadData()"> 查询 </el-button>
<el-button class="snowy-buttom-left" @click="reset()"> 重置 </el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="user-table">
<a-table
<el-table
ref="table"
size="small"
:columns="commons"
@@ -51,20 +51,20 @@
<template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
<el-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
</template>
<template v-if="column.dataIndex === 'category'">
{{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }}
</template>
</template>
</a-table>
</el-table>
<div class="mt-2">
<a-pagination
<el-pagination
v-if="!isEmpty(tableData)"
v-model:current="current"
v-model:page-size="pageSize"
@@ -75,10 +75,10 @@
/>
</div>
</div>
</a-col>
<a-col :span="6">
</el-col>
<el-col :span="6">
<div class="user-table">
<a-table
<el-table
ref="selectedTable"
size="small"
:columns="selectedCommons"
@@ -90,19 +90,19 @@
<template #title>
<span>已选择: {{ selectedData.length }}</span>
<div v-if="!radioModel" style="float: right">
<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
<el-button type="dashed" danger size="small" @click="delAllRecord">全部移除</el-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
<el-button type="dashed" danger size="small" @click="delRecord(record)">移除</el-button>
</template>
</template>
</a-table>
</el-table>
</div>
</a-col>
</a-row>
</a-modal>
</el-col>
</el-row>
</el-dialog>
</template>
<script setup name="userSelectorPlus">
@@ -186,7 +186,7 @@
props.orgTreeApi().then((data) => {
cardLoading.value = false
if (data !== null) {
treeData.value = data
treeData.value = data.data
// 默认展开2级
treeData.value.forEach((item) => {
// 因为0的顶级

47
src/components/XnFormContainer/index.vue
View File

@@ -1,47 +0,0 @@
<template>
<el-dialog v-if="isModal" :visible="visible" @cancel="cancel" v-bind="$attrs">
<template v-for="slotKey in slotKeys" #[slotKey]>
<slot :name="slotKey" />
</template>
</el-dialog>
<el-drawer v-else :visible="visible" v-bind="$attrs" :footer-style="{ textAlign: 'right' }">
<template v-for="slotKey in slotKeys" #[slotKey]>
<slot :name="slotKey" />
</template>
</el-drawer>
</template>
<script>
import { mapState } from 'pinia'
import { globalStore } from '@/store'
const FormContainerTypeEnum = {
DRAWER: 'drawer',
MODAL: 'modal'
}
export default {
name: 'XnFormContainer',
inheritAttrs: false,
props: {
visible: {
type: Boolean,
default: false,
required: true
}
},
computed: {
...mapState(globalStore, ['formStyle']),
slotKeys() {
return Object.keys(this.$slots)
},
isModal() {
return FormContainerTypeEnum.MODAL === this.formStyle
}
},
methods: {
cancel() {
this.$emit('close')
}
}
}
</script>

31
src/components/XnWorkflow/components/addWatch.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-dialog v-model="dialogFormVisible" title="新增" width="500">
<el-dialog v-model="dialogFormVisible" title="新增" width="500" :append-to-body="true">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" label-position="top">
<el-form-item label="监听类型：" prop="listenerType">
<el-select v-model="formData.listenerType" placeholder="请选择类型">
@@ -40,7 +40,7 @@ const props = defineProps({
default: false
}
})
const emit=defineEmits(['close','addWacth'])
const emit = defineEmits(['close', 'addWacth'])
watch(
() => props.addFlag,
(val, oldVal) => {
@@ -99,13 +99,22 @@ const listenerValueArray = reactive([
}
])
//关闭
async function handleClose(){
emit("close")
async function handleClose() {
emit('close')
}
//提交
async function handleAdd(){
emit("addWatch",formData);
emit("close");
const formRef = ref(null)
async function handleAdd() {
formRef.value.validate(valid => {
if (valid) {
console.log(valid)
emit("addWatch",formData);
emit("close");
} else {
console.log('error submit!')
return false
}
})
}
onMounted(() => {
console.log()
@@ -115,9 +124,9 @@ onMounted(() => {
.dialog-footer {
padding: 20px 15px !important;
}
.el-form{
width:96%;
margin:0 auto;
margin-top:20px;
.el-form {
width: 96%;
margin: 0 auto;
margin-top: 20px;
}
</style>

4
src/components/XnWorkflow/globalAttribute/watchs.vue
View File

@@ -7,8 +7,8 @@
<div class="watchs_info">
<el-button type="primary" :icon="Plus" size="small" @click="handleAdd">新增</el-button>
<el-table :data="tableData" border style="width: 100%" height="400">
<el-table-column align="left" prop="listenerType" label="名称" width="180" />
<el-table-column align="left" prop="javaClass" label="JAVA监听器" width="180" />
<el-table-column align="left" prop="listenerType" label="名称" width="120" />
<el-table-column align="left" prop="javaClass" label="JAVA监听器"/>
<el-table-column align="left" fixed="right" label="操作" width="120">
<template #default="scope">
<el-button link type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

51
src/components/XnWorkflow/index.vue
View File

@@ -25,29 +25,34 @@
<!-- </el-button>-->
<!-- </el-tooltip>-->
<el-tooltip class="box-item" effect="dark" content="配置流程全局属性" placement="top">
<el-tooltip class="box-item" effect="dark" content="配置流程全局属性" placement="top-start">
<el-button :icon="Setting" @click="drawerVisibile=true">
全局配置
<template #icon>
<!-- <template #icon>
<Setting />
</template>
</template> -->
</el-button>
</el-tooltip>
</div>
<div class="box-scale">
<node-wrap
v-if="childNode"
v-model="childNode.childNode"
:form-field-list-value="childFormFieldListValue"
:record-data="childRecordData"
:process-config-info="childNode.properties.configInfo"
:execution-listener-array="executionListenerArray"
:task-listener-array="taskListenerArray"
:selector-api-function="selectorApiFunction"
/>
<!-- 展示流程图组件 -->
<!-- {{ childNode }}{{ modelValue }}444{{ childRecordData }}
节点111{{ childNode }} -->
<!-- {{ childRecordData }} -->
<node-wrap
v-if="childNode"
v-model="childNode.childNode"
:form-field-list-value="childFormFieldListValue"
:record-data="childRecordData"
:process-config-info="childNode.properties.configInfo"
:execution-listener-array="executionListenerArray"
:task-listener-array="taskListenerArray"
:selector-api-function="selectorApiFunction"
/>
<!-- <nodeWrap v-if="childNode" v-model="childNode.childNode" :currentActivityId="currentActivityId" /> -->
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">流程结束</div>
<div class="end-node-text">流程结束111</div>
</div>
</div>
<process
@@ -76,7 +81,13 @@ export default {
computed: {
Plus() {
return Plus
}
},
Setting(){
return Setting
},
Setting(){
return Warning
}
},
components: {
nodeWrap,
@@ -105,8 +116,13 @@ export default {
childRecordData: this.recordData
}
},
mounted(){
console.log(this);
},
watch: {
modelValue(val) {
console.log(val,"9999999");
this.childNode = val
},
// 监听字段列表传输的相关动静
@@ -137,4 +153,9 @@ export default {
<style lang="less">
@import './flowIndex.less';
.box-scale{
width: 100%;
height: calc(100vh - 150px);
overflow-y: auto;
}
</style>

73
src/components/XnWorkflow/nodeWrap.vue
View File

@@ -85,47 +85,36 @@
/>
</template>
<script>
import startEvent from './nodes/startEvent.vue'
import startTask from './nodes/startTask.vue'
import userTask from './nodes/userTask.vue'
import exclusiveGateway from './nodes/exclusiveGateway.vue'
import parallelGateway from './nodes/parallelGateway.vue'
import serviceTask from './nodes/serviceTask.vue'
export default {
components: {
startEvent,
startTask,
userTask,
exclusiveGateway,
parallelGateway,
serviceTask
<script setup>
import StartEvent from './nodes/startEvent.vue'
import StartTask from './nodes/startTask.vue'
import UserTask from './nodes/userTask.vue'
import ExclusiveGateway from './nodes/exclusiveGateway.vue'
import ParallelGateway from './nodes/parallelGateway.vue'
import ServiceTask from './nodes/serviceTask.vue'
import {ref,watch} from 'vue'
const props = defineProps({
modelValue: { type: Object, default: () => {} },
formFieldListValue: { type: Array, default: () => [] },
recordData: { type: Object, default: () => {} },
processConfigInfo: { type: Object, default: () => {} },
executionListenerArray: { type: Array, default: () => [] },
taskListenerArray: { type: Array, default: () => [] },
selectorApiFunction: { type: Object, default: () => {} }
})
const emit = defineEmits(['update:modelValue'])
// 创建响应式引用
const childNode = ref({})
// 监听 props.modelValue 的变化，并同步到 childNode.value
watch(
() => props.modelValue,
(newValue) => {
childNode.value = newValue
},
props: {
modelValue: { type: Object, default: () => {} },
formFieldListValue: { type: Array, default: () => [] },
recordData: { type: Object, default: () => {} },
processConfigInfo: { type: Object, default: () => {} },
executionListenerArray: { type: Array, default: () => [] },
taskListenerArray: { type: Array, default: () => [] },
selectorApiFunction: { type: Object, default: () => {} }
},
data() {
return {
childNode: {}
}
},
watch: {
modelValue(val) {
this.childNode = val
},
childNode(val) {
this.$emit('update:modelValue', val)
}
},
mounted() {
this.childNode = this.modelValue
}
}
{ immediate: true } // 立即执行一次监听器
)
// 监听 childNode.value 的变化，并发出自定义事件 update:modelValue
watch(childNode, (newValue) => {
emit('update:modelValue', newValue)
})
</script>

397
src/components/XnWorkflow/nodes/addNode.vue
View File

@@ -1,152 +1,273 @@
<!-- 添加节点组件 -->
<template>
<div class="add-node-btn-box">
<div class="add-node-btn">
<a-popover v-model:visible="visible" placement="rightTop" trigger="click" :width="270">
<template #content>
<div class="add-node-popover-body">
<ul style="height: 80px">
<li>
<a-button shape="circle" size="large" @click="addType('userTask')">
<template #icon>
<user-outlined style="color: #ff943e; font-size: 18px" />
</template>
</a-button>
<p>审批节点</p>
</li>
<li>
<a-button shape="circle" size="large" @click="addType('serviceTask')">
<template #icon>
<send-outlined style="color: #3296fa; font-size: 18px" />
</template>
</a-button>
<p>抄送节点</p>
</li>
<li v-if="addExclusiveGateway">
<a-button shape="circle" size="large" @click="addType('exclusiveGateway')">
<template #icon>
<share-alt-outlined style="color: #15bc83; font-size: 18px" />
</template>
</a-button>
<p>条件分支</p>
</li>
<li v-if="addParallelGateway">
<a-button shape="circle" size="large" @click="addType('parallelGateway')">
<template #icon>
<partition-outlined :rotate="180" style="color: #ac28f5; font-size: 18px" />
</template>
</a-button>
<p>并行分支</p>
</li>
</ul>
</div>
</template>
<a-button type="primary" shape="circle">
<!-- @click="addNodeButton" -->
<template #icon><plus-outlined /></template>
</a-button>
</a-popover>
</div>
</div>
<div class="add-node-btn-box">
<div class="add-node-btn">
<el-popover placement="right" :width="280" trigger="click">
<template #reference>
<el-button type="primary" circle @click="addNodeButton" :icon="Plus"></el-button>
</template>
<div class="button_info">
<ul style="height: 80px">
<li>
<el-button
size="large"
type="primary"
:icon="UserFilled"
circle
@click="addType('userTask')"
></el-button>
<p>审批节点</p>
</li>
<li>
<el-button
size="large"
type="warning"
:icon="Promotion"
circle
@click="addType('serviceTask')"
></el-button>
<p>抄送节点</p>
</li>
<li v-if="addExclusiveGateway">
<el-button
size="large"
type="danger"
:icon="Share"
circle
@click="addType('exclusiveGateway')"
></el-button>
<p>条件分支</p>
</li>
<li v-if="addParallelGateway">
<el-button
size="large"
type="success"
:icon="Operation"
circle
@click="addType('parallelGateway')"
></el-button>
<p>并行分支</p>
</li>
</ul>
</div>
</el-popover>
</div>
</div>
</template>
<!-- <script>
import { cloneDeep } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config'
const NodeTitleMap = {
userTask: '审核人',
serviceTask: '抄送人',
exclusiveGateway: '条件路由',
parallelGateway: '并行路由'
}
export default {
props: {
modelValue: { type: Object, default: () => {} },
parentData: { type: Object, default: () => {} },
nodeItem: { type: Object, default: () => {} }
},
emits: ['update:modelValue'],
data() {
return {
visible: true,
addExclusiveGateway: true,
addParallelGateway: true
}
},
mounted() {},
methods: {
addNodeButton() {
// 他的上级是条件分支或并行分支，将其不在添加 // 控制节点下面
if (!this.parentData) {
this.disabledChildren()
} else {
if (this.parentData.type === 'exclusiveGateway' || this.parentData.type === 'parallelGateway') {
this.addExclusiveGateway = false
this.addParallelGateway = false
}
}
},
disabledChildren() {
// 如果下级是条件分支或并行分支，将其不在添加 // 控制节点上面
if (this.modelValue && this.modelValue.type) {
if (this.modelValue.type === 'exclusiveGateway' || this.modelValue.type === 'parallelGateway') {
this.addExclusiveGateway = false
this.addParallelGateway = false
}
}
// 不管其他的，如果是条件分支的项，那么他的下面无法添加条件
if (this.nodeItem) {
this.addExclusiveGateway = false
}
},
getBaseCondition(type, title) {
const condition = cloneDeep(config.nodeModel.node)
condition.id = this.$TOOL.snowyUuid()
condition.type = type
condition.title = title
return condition
},
addType(type) {
const nodeModel = this.getBaseCondition(type, NodeTitleMap[type]) || {}
nodeModel.childNode = this.modelValue
if (type === 'userTask') {
// 创建 configInfo
const configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
nodeModel.properties.configInfo = configInfo
} else if (type === 'exclusiveGateway') {
nodeModel.dataLegal = true
// 创建分支节点1
const condition1 = this.getBaseCondition('sequenceFlow', '条件1')
// 创建分支节点1 configInfo
const condition1ConfigInfo1 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
condition1ConfigInfo1.priorityLevel = 1
condition1.properties.configInfo = condition1ConfigInfo1
// 创建分支节点2
const condition2 = this.getBaseCondition('sequenceFlow', '条件2')
// 创建分支节点2 configInfo
const condition1ConfigInfo2 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
condition1ConfigInfo2.priorityLevel = 2
condition2.properties.configInfo = condition1ConfigInfo2
// 装进去
nodeModel.conditionNodeList.push(condition1)
nodeModel.conditionNodeList.push(condition2)
} else if (type === 'parallelGateway') {
// 创建主节点
nodeModel.dataLegal = true
// 创建分支节点1
const condition1 = this.getBaseCondition('userTask', '审批人1')
condition1.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
condition1.dataLegal = true
// 创建分支节点2
const condition2 = this.getBaseCondition('userTask', '审批人2')
condition2.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
condition2.dataLegal = true
// 装进去
nodeModel.conditionNodeList.push(condition1)
nodeModel.conditionNodeList.push(condition2)
}
this.visible = true
this.$emit('update:modelValue', nodeModel)
}
}
}
<script>
import { cloneDeep } from 'lodash-es'
</script> -->
<script setup>
import { Plus, UserFilled, Promotion, Share, Operation } from '@element-plus/icons-vue';
import {ref,nextTick} from 'vue'
import { cloneDeep } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config'
import tool from '@/utils/tool'
const NodeTitleMap = {
userTask: '审核人',
serviceTask: '抄送人',
exclusiveGateway: '条件路由',
parallelGateway: '并行路由'
}
export default {
props: {
modelValue: { type: Object, default: () => {} },
parentData: { type: Object, default: () => {} },
nodeItem: { type: Object, default: () => {} }
},
emits: ['update:modelValue'],
data() {
return {
visible: false,
addExclusiveGateway: true,
addParallelGateway: true
}
},
mounted() {},
methods: {
addNodeButton() {
// 他的上级是条件分支或并行分支，将其不在添加 // 控制节点下面
if (!this.parentData) {
this.disabledChildren()
} else {
if (this.parentData.type === 'exclusiveGateway' || this.parentData.type === 'parallelGateway') {
this.addExclusiveGateway = false
this.addParallelGateway = false
}
}
},
disabledChildren() {
// 如果下级是条件分支或并行分支，将其不在添加 // 控制节点上面
if (this.modelValue && this.modelValue.type) {
if (this.modelValue.type === 'exclusiveGateway' || this.modelValue.type === 'parallelGateway') {
this.addExclusiveGateway = false
this.addParallelGateway = false
}
}
// 不管其他的，如果是条件分支的项，那么他的下面无法添加条件
if (this.nodeItem) {
this.addExclusiveGateway = false
}
},
getBaseCondition(type, title) {
const condition = cloneDeep(config.nodeModel.node)
condition.id = this.$TOOL.snowyUuid()
condition.type = type
condition.title = title
return condition
},
addType(type) {
const nodeModel = this.getBaseCondition(type, NodeTitleMap[type]) || {}
nodeModel.childNode = this.modelValue
if (type === 'userTask') {
// 创建 configInfo
const configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
nodeModel.properties.configInfo = configInfo
} else if (type === 'exclusiveGateway') {
nodeModel.dataLegal = true
// 创建分支节点1
const condition1 = this.getBaseCondition('sequenceFlow', '条件1')
// 创建分支节点1 configInfo
const condition1ConfigInfo1 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
condition1ConfigInfo1.priorityLevel = 1
condition1.properties.configInfo = condition1ConfigInfo1
// 创建分支节点2
const condition2 = this.getBaseCondition('sequenceFlow', '条件2')
// 创建分支节点2 configInfo
const condition1ConfigInfo2 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
condition1ConfigInfo2.priorityLevel = 2
condition2.properties.configInfo = condition1ConfigInfo2
// 装进去
nodeModel.conditionNodeList.push(condition1)
nodeModel.conditionNodeList.push(condition2)
} else if (type === 'parallelGateway') {
// 创建主节点
nodeModel.dataLegal = true
// 创建分支节点1
const condition1 = this.getBaseCondition('userTask', '审批人1')
condition1.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
condition1.dataLegal = true
// 创建分支节点2
const condition2 = this.getBaseCondition('userTask', '审批人2')
condition2.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
condition2.dataLegal = true
// 装进去
nodeModel.conditionNodeList.push(condition1)
nodeModel.conditionNodeList.push(condition2)
}
this.visible = false
this.$emit('update:modelValue', nodeModel)
const props = defineProps({
modelValue: { type: Object, default: () => {} },
parentData: { type: Object, default: () => {} },
nodeItem: { type: Object, default: () => {} }
})
const emit = defineEmits(['update:modelValue'])
const visible = ref(false)
const addExclusiveGateway = ref(true)
const addParallelGateway = ref(true)
const addNodeButton = () => {
// 他的上级是条件分支或并行分支，将其不在添加 // 控制节点下面
if (!props.parentData) {
disabledChildren()
} else {
if (props.parentData.type === 'exclusiveGateway' || props.parentData.type === 'parallelGateway') {
addExclusiveGateway.value = false
addParallelGateway.value = false
}
}
}
const disabledChildren = () => {
// 如果下级是条件分支或并行分支，将其不在添加 // 控制节点上面
if (props.modelValue && props.modelValue.type) {
if (props.modelValue.type === 'exclusiveGateway' || props.modelValue.type === 'parallelGateway') {
addExclusiveGateway.value = false
addParallelGateway.value = false
}
}
// 不管其他的，如果是条件分支的项，那么他的下面无法添加条件
if (props.nodeItem) {
addExclusiveGateway.value = false
}
}
const getBaseCondition = (type, title) => {
const condition = cloneDeep(config.nodeModel.node)
condition.id = tool.snowyUuid()
condition.type = type
condition.title = title
return condition
}
const addType = (type) => {
const nodeModel = getBaseCondition(type, NodeTitleMap[type]) || {}
nodeModel.childNode = props.modelValue
if (type === 'userTask') {
// 创建 configInfo
nodeModel.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
} else if (type === 'exclusiveGateway') {
nodeModel.dataLegal = true
// 创建分支节点1
const condition1 = getBaseCondition('sequenceFlow', '条件1')
// 创建分支节点1 configInfo
const condition1ConfigInfo1 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
condition1ConfigInfo1.priorityLevel = 1
condition1.properties.configInfo = condition1ConfigInfo1
// 创建分支节点2
const condition2 = getBaseCondition('sequenceFlow', '条件2')
// 创建分支节点2 configInfo
const condition1ConfigInfo2 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
condition1ConfigInfo2.priorityLevel = 2
condition2.properties.configInfo = condition1ConfigInfo2
// 装进去
nodeModel.conditionNodeList.push(condition1)
nodeModel.conditionNodeList.push(condition2)
} else if (type === 'parallelGateway') {
// 创建主节点
nodeModel.dataLegal = true
// 创建分支节点1
const condition1 = getBaseCondition('userTask', '审批人1')
condition1.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
condition1.dataLegal = true
// 创建分支节点2
const condition2 = getBaseCondition('userTask', '审批人2')
condition2.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
condition2.dataLegal = true
// 装进去
nodeModel.conditionNodeList.push(condition1)
nodeModel.conditionNodeList.push(condition2)
}
visible.value = false
emit('update:modelValue', nodeModel)
}
</script>
<style lang="scss" scoped>
.button_info{
width:100%;
ul{
width:100%;
display:flex;
align-items: center;
justify-content: space-between;
li{
list-style: none;
p{
font-size: 12px;
text-align: center;
margin-top: 10px;
font-weight: 800;
}
}
}
}
</style>

74
src/components/XnWorkflow/nodes/common/previewCustomForm.vue
View File

@@ -1,42 +1,42 @@
<template>
<a-modal
title="预览"
:width="700"
:visible="visible"
:destroy-on-close="true"
:footer-style="{ textAlign: 'right' }"
:mask="false"
:confirmLoading="confirmLoading"
@ok="onSubmit"
@cancel="onClose"
>
<component ref="customFormRef" :is="customFormsLayouts" />
</a-modal>
<el-dialog
title="预览"
:width="700"
v-model="visible"
:destroy-on-close="true"
:footer-style="{ textAlign: 'right' }"
:mask="false"
:confirmLoading="confirmLoading"
@ok="onSubmit"
@cancel="onClose"
>
<component ref="customFormRef" :is="customFormsLayouts" />
</el-dialog>
</template>
<script setup name="previewCustomForm">
import { ElMessage } from 'element-plus'
import { loadComponent } from '../../customForm'
import { ref } from 'vue'
const visible = ref(false)
const confirmLoading = ref(false)
const customFormRef = ref()
const customFormsLayouts = ref()
const onOpen = (url) => {
if (url) {
visible.value = true
customFormsLayouts.value = loadComponent(url)
}
}
const onSubmit = () => {
customFormRef.value.getData().then((value) => {
message.info(JSON.stringify(value))
})
}
const onClose = () => {
visible.value = false
}
defineExpose({
onOpen
})
import { ElMessage } from 'element-plus'
import { loadComponent } from '../../customForm'
import { ref } from 'vue'
const visible = ref(false)
const confirmLoading = ref(false)
const customFormRef = ref()
const customFormsLayouts = ref()
const onOpen = url => {
if (url) {
visible.value = true
customFormsLayouts.value = loadComponent(url)
}
}
const onSubmit = () => {
customFormRef.value.getData().then(value => {
message.info(JSON.stringify(value))
})
}
const onClose = () => {
visible.value = false
}
defineExpose({
onOpen
})
</script>

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

@@ -1,189 +1,214 @@
<template>
<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>
<div v-for="(item, index) in childNode.conditionNodeList" :key="index" class="col-box">
<div class="condition-node">
<div class="condition-node-box">
<div class="auto-judge" @click="show(index)">
<div v-if="index != 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
<left-outlined />
</div>
<div class="title">
<span class="node-title">{{ item.title }}</span>
<span class="priority-title">优先级{{ item.properties.configInfo.priorityLevel }}</span>
<close-outlined class="close" @click.stop="delTerm(index)" />
</div>
<div class="content">
<span v-if="toText(childNode, index)">{{ toText(childNode, index) }}</span>
<span v-else class="placeholder">请设置条件</span>
</div>
<div
v-if="index !== childNode.conditionNodeList.length - 1"
class="sort-right"
@click.stop="arrTransfer(index)"
>
<right-outlined />
</div>
</div>
<add-node v-model="item.childNode" :node-item="item" />
</div>
</div>
<slot v-if="item.childNode" :node="item" />
<div v-if="index === 0" class="top-left-cover-line" />
<div v-if="index === 0" class="bottom-left-cover-line" />
<div v-if="index === childNode.conditionNodeList.length - 1" class="top-right-cover-line" />
<div v-if="index === childNode.conditionNodeList.length - 1" class="bottom-right-cover-line" />
</div>
</div>
<add-node v-model="childNode.childNode" :parent-data="childNode" />
</div>
<div class="branch-wrap">
<div class="branch-box-wrap">
<div class="branch-box">
<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">
<div class="auto-judge" @click="show(index)">
<div v-if="index != 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
<left-outlined />
</div>
<div class="title">
<span class="node-title">{{ item.title }}</span>
<span class="priority-title">
优先级{{ item.properties.configInfo.priorityLevel }}
</span>
<close-outlined class="close" @click.stop="delTerm(index)" />
</div>
<div class="content">
<span v-if="toText(childNode, index)">{{ toText(childNode, index) }}</span>
<span v-else class="placeholder">请设置条件</span>
</div>
<div
v-if="index !== childNode.conditionNodeList.length - 1"
class="sort-right"
@click.stop="arrTransfer(index)"
>
<right-outlined />
</div>
</div>
<add-node v-model="item.childNode" :node-item="item" />
</div>
</div>
<slot v-if="item.childNode" :node="item" />
<div v-if="index === 0" class="top-left-cover-line" />
<div v-if="index === 0" class="bottom-left-cover-line" />
<div v-if="index === childNode.conditionNodeList.length - 1" class="top-right-cover-line" />
<div v-if="index === childNode.conditionNodeList.length - 1" class="bottom-right-cover-line" />
</div>
</div>
<add-node v-model="childNode.childNode" :parent-data="childNode" />
</div>
<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">
<div v-show="!isNodeLegal(form)" style="margin-bottom: 10px">
<a-alert message="请填写完成所有项！" type="error" />
</div>
<div class="mb-2">
<span class="left-span-label">配置要执行的条件</span>
</div>
<p style="margin-bottom: 2px">
<a-button type="primary" round @click="addDynamicValidateForm" size="small">
<plus-outlined />
增加条件组
</a-button>
</p>
<a-form-item v-for="(domain, index) in dynamicValidateForm" :key="index">
<a-divider style="margin: 10px 0" />
<a-row>
<a-col :span="22">
<a-table :data-source="domain" size="small" :pagination="false">
<a-table-column data-index="field" title="条件字段" width="130">
<template #default="{ record }">
<a-select
v-model:value="record.field"
placeholder="请选择"
v-if="recordData.formType === 'DESIGN'"
>
<a-select-option
v-for="formField in fieldList"
:key="formField.model"
:value="formField.model"
@click="record.label = formField.label"
>{{ formField.label }}</a-select-option
>
</a-select>
<a-input v-model:value="record.field" placeholder="条件" v-else />
</template>
</a-table-column>
<a-table-column data-index="label" title="描述">
<template #default="{ record }">
<a-input v-model:value="record.label" placeholder="描述" />
</template>
</a-table-column>
<a-table-column data-index="operator" width="140">
<template #title>
<a-tooltip>
<template #title
>注：自定义表单模式下条件选择完全放开，中文字段不可以使用大于、大于等于、小于、小于等于！</template
>
<question-circle-outlined />
运算符
</a-tooltip>
</template>
<template #default="{ record }">
<a-select v-model:value="record.operator" placeholder="请选择">
<a-select-option value="==">等于</a-select-option>
<a-select-option value="!=">不等于</a-select-option>
<a-select-option value=">" v-if="isSelectOption(record)">大于</a-select-option>
<a-select-option value=">=" v-if="isSelectOption(record)">大于等于</a-select-option>
<a-select-option value="<" v-if="isSelectOption(record)">小于</a-select-option>
<a-select-option value="<=" v-if="isSelectOption(record)">小于等于</a-select-option>
<a-select-option value="include" v-if="!isSelectOption(record, 'include')"
>包含</a-select-option
>
<a-select-option value="notInclude" v-if="!isSelectOption(record, 'notInclude')"
>不包含</a-select-option
>
</a-select>
</template>
</a-table-column>
<a-table-column data-index="value" width="100">
<template #title>
<a-tooltip>
<template #title>中文字段需判断等于，值必须加入英文双引号</template>
<question-circle-outlined />
值
</a-tooltip>
</template>
<template #default="{ record }">
<a-input v-model:value="record.value" placeholder="值" />
</template>
</a-table-column>
<a-table-column data-index="value" title="移除" width="55">
<template #default="{ index }">
<a-button size="small" type="primary" danger ghost @click="deleteConditionList(index, domain)"
>移除</a-button
>
</template>
</a-table-column>
</a-table>
<a-button type="dashed" class="dashedButton" @click="addConditionList(index)">
<PlusOutlined />
增加条件
</a-button>
</a-col>
<a-col :span="2" class="deleteIcon">
<minus-circle-two-tone class="minusCircle" @click="delDomains(index)" />
</a-col>
</a-row>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="2" tab="执行监听" force-render>
<prop-listener-info
ref="propExecutionListenerInfoRef"
:listenerValue="form.properties.executionListenerInfo"
:defaultListenerList="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>
</div>
<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="form.title"
allow-clear
@blur="saveTitle"
@keyup.enter="saveTitle"
/>
</div>
</template>
<el-layout-content>
<el-tabs v-model="activeKey">
<el-tab-pane name="1" label="条件配置" lazy>
<el-form layout="vertical">
<div v-show="!isNodeLegal(form)" style="margin-bottom: 10px">
<el-alert message="请填写完成所有项！" type="error" />
</div>
<div class="mb-2">
<span class="left-span-label">配置要执行的条件</span>
</div>
<p style="margin-bottom: 2px">
<el-button type="primary" round @click="addDynamicValidateForm" size="small">
<plus-outlined />
增加条件组
</el-button>
</p>
<el-form-item v-for="(domain, index) in dynamicValidateForm" :key="index">
<el-divider style="margin: 10px 0" />
<el-row>
<el-col :span="22">
<el-table :datel-source="domain" size="small" :pagination="false">
<el-table-column datel-index="field" title="条件字段" width="130">
<template #default="{ record }">
<el-select
v-model:value="record.field"
placeholder="请选择"
v-if="recordData.formType === 'DESIGN'"
>
<el-select-option
v-for="formField in fieldList"
:key="formField.model"
:value="formField.model"
@click="record.label = formField.label"
>
{{ formField.label }}
</el-select-option>
</el-select>
<el-input v-model:value="record.field" placeholder="条件" v-else />
</template>
</el-table-column>
<el-table-column datel-index="label" title="描述">
<template #default="{ record }">
<el-input v-model:value="record.label" placeholder="描述" />
</template>
</el-table-column>
<el-table-column datel-index="operator" width="140">
<template #title>
<el-tooltip>
<template #title>
注：自定义表单模式下条件选择完全放开，中文字段不可以使用大于、大于等于、小于、小于等于！
</template>
<question-circle-outlined />
运算符
</el-tooltip>
</template>
<template #default="{ record }">
<el-select v-model:value="record.operator" placeholder="请选择">
<el-select-option value="==">等于</el-select-option>
<el-select-option value="!=">不等于</el-select-option>
<el-select-option value=">" v-if="isSelectOption(record)">
大于
</el-select-option>
<el-select-option value=">=" v-if="isSelectOption(record)">
大于等于
</el-select-option>
<el-select-option value="<" v-if="isSelectOption(record)">
小于
</el-select-option>
<el-select-option value="<=" v-if="isSelectOption(record)">
小于等于
</el-select-option>
<el-select-option
value="include"
v-if="!isSelectOption(record, 'include')"
>
包含
</el-select-option>
<el-select-option
value="notInclude"
v-if="!isSelectOption(record, 'notInclude')"
>
不包含
</el-select-option>
</el-select>
</template>
</el-table-column>
<el-table-column datel-index="value" width="100">
<template #title>
<el-tooltip>
<template #title>
中文字段需判断等于，值必须加入英文双引号
</template>
<question-circle-outlined />
值
</el-tooltip>
</template>
<template #default="{ record }">
<el-input v-model:value="record.value" placeholder="值" />
</template>
</el-table-column>
<el-table-column datel-index="value" title="移除" width="55">
<template #default="{ index }">
<el-button
size="small"
type="primary"
danger
ghost
@click="deleteConditionList(index, domain)"
>
移除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="dashed" class="dashedButton" @click="addConditionList(index)">
<PlusOutlined />
增加条件
</el-button>
</el-col>
<el-col :span="2" class="deleteIcon">
<minus-circle-two-tone class="minusCircle" @click="delDomains(index)" />
</el-col>
</el-row>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane name="2" label="执行监听" lazy>
<prop-listener-info
ref="propExecutionListenerInfoRef"
:listenerValue="form.properties.executionListenerInfo"
:defaultListenerList="executionListenerInfo"
:listener-value-array="executionListenerArray"
/>
</el-tab-pane>
</el-tabs>
</el-layout-content>
<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>
</div>
</template>
<script>
<!-- <script>
import { cloneDeep, isEmpty } from 'lodash-es'
import addNode from './addNode.vue'
import config from '@/components/XnWorkflow/nodes/config/config'
@@ -281,9 +306,9 @@
},
// 校验此条件是否通过
isNodeLegal(data) {
const priorityLevel = data.properties.configInfo.priorityLevel
const len = this.childNode.conditionNodeList.length
const priorityLevelMax = this.childNode.conditionNodeList[len - 1].properties.configInfo.priorityLevel
const priorityLevel = data&&data.propertie&&data.properties.configInfo&&data.properties.configInfo.priorityLevel?data.properties.configInfo.priorityLevel:{};
const len = this.childNode&&this.childNode.conditionNodeList&&this.childNode.conditionNodeList.length?this.childNode.conditionNodeList.length:0;
const priorityLevelMax = len!=0?this.childNode.conditionNodeList[len - 1].properties.configInfo.priorityLevel:0;
// 如果往其他条件的分支中增加，那我们一视同仁
if (priorityLevelMax === priorityLevel) {
if (this.dynamicValidateForm.length > 0) {
@@ -469,19 +494,299 @@
}
}
}
</script> -->
<script setup>
import { cloneDeep, isEmpty } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config'
import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
import tool from '@/utils/tool'
import AddNode from './addNode.vue'
import { ref, watch, onMounted } from 'vue'
import PropListenerInfo from './prop/propListenerInfo.vue'
const props = defineProps({
modelValue: { type: Object, default: () => {} },
formFieldListValue: { type: Array, default: () => [] },
recordData: { type: Object, default: () => {} },
executionListenerArray: { type: Array, default: () => [] },
taskListenerArray: { type: Array, default: () => [] }
})
const emit = defineEmits(['update:modelValue'])
const nodeTitleRef = ref()
const propExecutionListenerInfoRef = ref()
const childNode = ref({})
const drawer = ref(false)
const isEditTitle = ref(false)
const index = ref(0)
const form = ref({})
const dynamicValidateForm = ref([])
const fieldList = ref([])
const activeKey = ref('1')
const executionListenerInfo = cloneDeep(config.listener.exclusiveGatewayExecutionListenerInfo)
const operatorList = cloneDeep(config.exclusiveGatewayConfig.operatorList)
watch(props, newValue => {
if (newValue.modelValue) {
childNode.value = newValue.modelValue
}
})
onMounted(() => {
childNode.value = props.modelValue
// 把字段给掏出来
fieldList.value = workFlowUtils.getListField(props.formFieldListValue).map(m => {
let type = m.type //slider rate number
if (type === 'slider' || type === 'rate' || type === 'number') {
m.type = 'number'
}
return {
label: m.label,
model: m.selectTable + '.' + m.model,
type: m.type
}
})
})
const show = value => {
index.value = value
form.value = {}
form.value = cloneDeep(childNode.value.conditionNodeList[value])
drawer.value = true
dynamicValidateForm.value = form.value.properties.conditionInfo
}
const editTitle = () => {
isEditTitle.value = true
nextTick(() => {
nodeTitleRef.value.focus()
})
}
const saveTitle = () => {
isEditTitle.value = false
}
const save = () => {
form.value.properties.conditionInfo = dynamicValidateForm.value
form.value.properties.executionListenerInfo = propExecutionListenerInfoRef.value.selectedListenerList()
if (isNodeLegal(form.value)) {
form.value.dataLegal = true
childNode.value.conditionNodeList[index.value] = form.value
setCalibration()
emit('update:modelValue', childNode)
drawer.value = false
} else {
form.value.dataLegal = false
}
}
const isSelectOption = (record, value) => {
if (props.recordData.formType === 'DESIGN') {
if (record.field) {
return fieldList.value.find(f => f.model === record.field).type === 'number'
}
} else {
if (value === 'include' || value === 'notInclude') {
return false
} else {
return true
}
}
}
// 校验此条件是否通过
const isNodeLegal = data => {
const priorityLevel =
data && data.properties && data.properties.configInfo && data.properties.configInfo.priorityLevel
? data.properties.configInfo.priorityLevel
: ''
const len =
childNode.value && childNode.value.conditionNodeList && childNode.value.conditionNodeList.length
? childNode.value.conditionNodeList.length
: 0
const priorityLevelMax =
len != 0 ? childNode.value.conditionNodeList[len - 1].properties.configInfo.priorityLevel : 0
// 如果往其他条件的分支中增加，那我们一视同仁
if (priorityLevelMax === priorityLevel) {
if (dynamicValidateForm.value.length > 0) {
for (let i = 0; i < dynamicValidateForm.value.length; i++) {
const obj = dynamicValidateForm.value[i]
if (obj.length > 0) {
return isNodeLegalItem()
}
}
} else {
return true
}
} else {
return isNodeLegalItem()
}
}
// 设置校验
const setCalibration = () => {
// 在数据返回更新之前，我要顺手吧优先级最后的条件校验设置为 true，管他设没设
for (let i = 0; i < childNode.value.conditionNodeList.length; i++) {
let conditionNode = childNode.value.conditionNodeList[i]
// 取到优先级
const priorityLevel = conditionNode.properties.configInfo.priorityLevel
// 如果是最高的
if (priorityLevel === childNode.value.conditionNodeList.length) {
// 给成通过，不管他的条件，本身优先级最后的就是其他条件进入，一般也不设
conditionNode.dataLegal = true
} else {
// 其他地方的，判断是否有条件，无条件的统统给 false
if (conditionNode.properties.conditionInfo.length === 0) {
conditionNode.dataLegal = false
}
}
}
}
const isNodeLegalItem = () => {
let objNum = 0
let successNum = 0
if (dynamicValidateForm.value.length > 0) {
for (let i = 0; i < dynamicValidateForm.value.length; i++) {
const obj = dynamicValidateForm.value[i]
let objNumItem = 0
if (!isEmpty(obj)) {
for (let a = 0; a < obj.length; a++) {
objNumItem++
if (isObjLegal(obj[a])) {
successNum++
}
}
objNum = objNum + objNumItem
} else {
objNum++
}
}
}
if (successNum !== 0) {
if (objNum === successNum) {
return true
}
}
return false
}
// 校验对象中是否有空值
const isObjLegal = obj => {
let a = 0
for (let b in obj) {
if (!obj[b]) {
a++
}
}
return a === 1
}
// 增加条件组
const addDynamicValidateForm = () => {
dynamicValidateForm.value.push([])
}
// 删除条件组
const delDomains = index => {
dynamicValidateForm.value.splice(index, 1)
}
const addTerm = () => {
const len = childNode.value.conditionNodeList.length
const priorityLevel = childNode.value.conditionNodeList[len - 1].properties.configInfo.priorityLevel
// 创建分支节点 n
const condition = cloneDeep(config.nodeModel.node)
condition.id = tool.snowyUuid()
condition.type = 'sequenceFlow'
condition.title = `条件${priorityLevel + 1}`
// 创建分支节点2 configInfo
const condition1ConfigInfo = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
condition1ConfigInfo.priorityLevel = priorityLevel + 1
condition.properties.configInfo = condition1ConfigInfo
childNode.value.conditionNodeList.push(condition)
}
const delTerm = index => {
childNode.value.conditionNodeList.splice(index, 1)
if (childNode.value.conditionNodeList.length === 1) {
if (childNode.value.childNode) {
// 如果有子项
if (!isEmpty(childNode.value.conditionNodeList[0].childNode)) {
reData(childNode.value.conditionNodeList[0].childNode, childNode.value.childNode)
} else {
childNode.value.conditionNodeList[0].childNode = childNode.value.childNode
}
}
emit('update:modelValue', childNode.value.conditionNodeList[0].childNode)
}
}
const reData = (data, addData) => {
if (!isEmpty(data)) {
data.childNode = addData
} else {
reData(data.childNode, addData)
}
}
const arrTransfer = (index, type = 1) => {
childNode.value.conditionNodeList[index] = childNode.value.conditionNodeList.splice(
index + type,
1,
childNode.value.conditionNodeList[index]
)[0]
childNode.value.conditionNodeList.map((item, index) => {
item.properties.configInfo.priorityLevel = index + 1
})
setCalibration()
emit('update:modelValue', childNode.value)
}
const addConditionList = index => {
const domainsObj = {
label: '',
key: '',
operator: '==',
value: ''
}
dynamicValidateForm.value[index].push(domainsObj)
}
const deleteConditionList = (index, domain) => {
domain.splice(index, 1)
}
const toText = (childNode, index) => {
const conditionList = childNode.conditionNodeList[index].properties.conditionInfo
const priorityLevel = childNode.conditionNodeList[index].properties.configInfo.priorityLevel
const len = childNode.conditionNodeList.length
const priorityLevelMax = childNode.conditionNodeList[len - 1].properties.configInfo.priorityLevel
if (JSON.stringify(conditionList) !== undefined && conditionList.length > 0) {
let text = ''
for (let i = 0; i < conditionList.length; i++) {
for (let j = 0; j < conditionList[i].length; j++) {
if (j + 1 !== conditionList[i].length) {
text =
text +
conditionList[i][j].label +
getOperatorLabel(conditionList[i][j].operator) +
conditionList[i][j].value +
' 且 '
} else {
text =
text +
conditionList[i][j].label +
getOperatorLabel(conditionList[i][j].operator) +
conditionList[i][j].value
}
}
if (i + 1 !== conditionList.length) {
text = text + ' 或 '
}
}
return text
} else if (conditionList.length === 0 && priorityLevel < priorityLevelMax) {
return false
} else {
return '其他条件进入此流程'
}
}
// 通过value 获取界面显示的label汉字
const getOperatorLabel = value => {
return operatorList.find(item => item.value === value).label
}
</script>
<style scoped lang="less">
.deleteIcon {
display: flex;
justify-content: center;
align-items: center;
}
.minusCircle {
font-size: 25px;
}
.dashedButton {
margin-top: 10px;
width: 100%;
}
.deleteIcon {
display: flex;
justify-content: center;
align-items: center;
}
.minusCircle {
font-size: 25px;
}
.dashedButton {
margin-top: 10px;
width: 100%;
}
</style>

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

@@ -30,7 +30,7 @@
</div>
</template>
<script>
<!-- <script>
import { cloneDeep } from 'lodash-es'
import addNode from './addNode.vue'
import userTask from './userTask.vue'
@@ -107,4 +107,69 @@
}
}
}
</script> -->
<script setup>
import { cloneDeep } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config'
import tool from '@/utils/tool'
import AddNode from './addNode.vue'
import UserTask from './userTask.vue'
import {ref,watch,onMounted} from 'vue';
const props = defineProps({
modelValue: { type: Object, default: () => {} },
formFieldListValue: { type: Array, default: () => [] },
recordData: { type: Object, default: () => {} },
processConfigInfo: { type: Object, default: () => {} },
executionListenerArray: { type: Array, default: () => [] },
taskListenerArray: { type: Array, default: () => [] },
selectorApiFunction: { type: Object, default: () => {} }
})
const emit = defineEmits(['update:modelValue'])
const childNode = ref({})
const drawer = ref(false)
const index = ref(0)
const form = ref({})
watch(props, (newValue) => {
if (props.modelValue) {
childNode.value = newValue.modelValue
}
})
onMounted(() => {
childNode.value = props.modelValue
})
const addTerm = () => {
const len = childNode.value.conditionNodeList.length + 1
// 创建主节点
const nodeModel = cloneDeep(config.nodeModel.node)
nodeModel.id = tool.snowyUuid()
nodeModel.type = 'userTask'
;(nodeModel.title = `审批人${len}`),
(nodeModel.priorityLevel = len),
(nodeModel.conditionNodeList = []),
(nodeModel.childNode = {})
// 创建 configInfo
nodeModel.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
childNode.value.conditionNodeList.push(nodeModel)
}
const delTerm = (index) => {
childNode.value.conditionNodeList.splice(index, 1)
if (childNode.value.conditionNodeList.length === 1) {
if (childNode.value.childNode) {
// 这是{}
if (JSON.stringify(childNode.value.conditionNodeList[0].childNode) !== '{}') {
reData(childNode.value.conditionNodeList[0].childNode, childNode.value.childNode)
} else {
childNode.value.conditionNodeList[0].childNode = childNode.value.childNode
}
}
emit('update:modelValue', childNode.value.conditionNodeList[0].childNode)
}
}
const reData = (data, addData) => {
if (JSON.stringify(data) !== '{}') {
data.childNode = addData
} else {
reData(data.childNode, addData)
}
}
</script>

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

@@ -1,6 +1,6 @@
<template>
<a-modal
v-model:visible="visible"
<el-dialog
v-model="visible"
title="表单人员选择"
:mask-closable="false"
:destroy-on-close="true"
@@ -9,10 +9,10 @@
@cancel="handleCancel"
>
<div class="form-user-table">
<a-table
<el-table
ref="table"
:columns="columns"
:data-source="dataSource"
:datel-source="dataSource"
:row-key="(record) => record.model"
:expand-row-by-click="true"
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
@@ -21,12 +21,13 @@
bordered
/>
</div>
</a-modal>
</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)
const columns = [

306
src/components/XnWorkflow/nodes/prop/propButtonInfo.vue
View File

@@ -1,157 +1,171 @@
<template>
<div class="mb-2">
<span class="left-span-label">参与者可以看见或操作哪些按钮</span>
</div>
<a-table
ref="table"
:columns="columns"
:data-source="dataSource"
:row-key="(record) => record.key"
:expand-row-by-click="true"
:row-selection="{
selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange,
getCheckboxProps: checkboxProps
}"
:pagination="false"
:show-header="false"
size="small"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'label'">
<a-popover trigger="hover" placement="left">
<template #content>
<a-button :type="record.type" size="small">
<template #icon>
<component :is="record.icon" />
</template>
{{ record.label }}
</a-button>
<div v-if="record.key === 'SAVE'" style="width: 300px">
”保存“按钮作用为发起节点保存操作，审批节点下无保存操作。
</div>
<div v-if="record.key === 'SUBMIT'" style="width: 300px">
”提交“按钮作用为发起节点填写完申请单，提交流程到下一步。
</div>
<div v-if="record.key === 'REVOKE'" style="width: 300px">”撤回“按钮作用为发起节点发错内容，将其撤回。</div>
<div v-if="record.key === 'PASS'" style="width: 300px">按钮作用为审批节点同意该审核之操作。</div>
<div v-if="record.key === 'REJECT'" style="width: 300px">按钮作用为审批节点进行拒绝之操作。</div>
<div v-if="record.key === 'BACK'" style="width: 300px">按钮作用为审批节点退回操作，可退回至任意节点。</div>
<div v-if="record.key === 'ADD_SIGN'" style="width: 300px">按钮作用为审批节点加签操作。</div>
<div v-if="record.key === 'TURN'" style="width: 300px">按钮作用为审批节点转给他人办理操作。</div>
<div v-if="record.key === 'JUMP'" style="width: 300px">按钮作用为审批节点可跳转至任意节点操作。</div>
<div v-if="record.key === 'PRINT'" style="width: 300px">
按钮配置后，操作人到该节点可以进行管理员配置的全局打印模板，进行打印此流程进展的内容。
</div>
</template>
<a-button size="small" :type="record.type">
<template #icon>
<component :is="record.icon" />
</template>
{{ record.label }}
</a-button>
</a-popover>
</template>
<template v-if="column.dataIndex === 'newLabel'">
<a-input v-model:value="record.newLabel" show-count :maxlength="10" />
</template>
</template>
</a-table>
<div class="mb-2">
<span class="left-span-label">参与者可以看见或操作哪些按钮</span>
</div>
<el-table
ref="table"
:columns="columns"
:datel-source="dataSource"
:row-key="record => record.key"
:expand-row-by-click="true"
:row-selection="{
selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange,
getCheckboxProps: checkboxProps
}"
:pagination="false"
:show-header="false"
size="small"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'label'">
<el-popover trigger="hover" placement="left">
<template #content>
<el-button :type="record.type" size="small">
<template #icon>
<component :is="record.icon" />
</template>
{{ record.label }}
</el-button>
<div v-if="record.key === 'SAVE'" style="width: 300px">
”保存“按钮作用为发起节点保存操作，审批节点下无保存操作。
</div>
<div v-if="record.key === 'SUBMIT'" style="width: 300px">
”提交“按钮作用为发起节点填写完申请单，提交流程到下一步。
</div>
<div v-if="record.key === 'REVOKE'" style="width: 300px">
”撤回“按钮作用为发起节点发错内容，将其撤回。
</div>
<div v-if="record.key === 'PASS'" style="width: 300px">
按钮作用为审批节点同意该审核之操作。
</div>
<div v-if="record.key === 'REJECT'" style="width: 300px">
按钮作用为审批节点进行拒绝之操作。
</div>
<div v-if="record.key === 'BACK'" style="width: 300px">
按钮作用为审批节点退回操作，可退回至任意节点。
</div>
<div v-if="record.key === 'ADD_SIGN'" style="width: 300px">按钮作用为审批节点加签操作。</div>
<div v-if="record.key === 'TURN'" style="width: 300px">
按钮作用为审批节点转给他人办理操作。
</div>
<div v-if="record.key === 'JUMP'" style="width: 300px">
按钮作用为审批节点可跳转至任意节点操作。
</div>
<div v-if="record.key === 'PRINT'" style="width: 300px">
按钮配置后，操作人到该节点可以进行管理员配置的全局打印模板，进行打印此流程进展的内容。
</div>
</template>
<el-button size="small" :type="record.type">
<template #icon>
<component :is="record.icon" />
</template>
{{ record.label }}
</el-button>
</el-popover>
</template>
<template v-if="column.dataIndex === 'newLabel'">
<el-input v-model:value="record.newLabel" show-count :maxlength="10" />
</template>
</template>
</el-table>
</template>
<script setup name="propButtonInfo">
import config from '@/components/XnWorkflow/nodes/config/config'
import { cloneDeep } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config'
import { cloneDeep } from 'lodash-es'
import { ref, reactive } from 'vue'
const columns = [
{
title: '',
dataIndex: 'label',
align: 'center'
},
{
title: '',
dataIndex: 'newLabel'
}
]
const buttonInfo = cloneDeep(config.nodeModel.buttonInfo)
const columns = [
{
title: '',
dataIndex: 'label',
align: 'center'
},
{
title: '',
dataIndex: 'newLabel'
}
]
const buttonInfo = cloneDeep(config.nodeModel.buttonInfo)
const props = defineProps(['buttonInfo', 'showButton', 'noChecked'])
const props = defineProps(['buttonInfo', 'showButton', 'noChecked'])
const dataSource = ref([])
const selectedRowKeys = ref([])
// 将其回传的跟本组件的关联性切断
selectedRowKeys.value = cloneDeep(props.showButton)
const dataSource = ref([])
const selectedRowKeys = ref([])
// 将其回传的跟本组件的关联性切断
selectedRowKeys.value = cloneDeep(props.showButton)
// 设置按钮选中及显示的
const buttonInfoData = () => {
buttonInfo.forEach((button) => {
if (props.buttonInfo.length > 0) {
props.buttonInfo.forEach((item) => {
if (button.key === item.key) {
button.newLabel = item.label
button.value = item.value
}
})
} else {
button.newLabel = button.label
}
// 匹配选中的
if (selectedRowKeys.value.length > 0) {
selectedRowKeys.value.forEach((selectedRowKey) => {
if (button.value === 'SHOW') {
// 已有的里面如果不包含这个已经被选中的
if (selectedRowKeys.value.indexOf(button.key) === -1) {
selectedRowKeys.value.push(button.key)
}
}
if (selectedRowKey === button.key) {
button.value = 'SHOW'
}
})
} else if (button.value === 'SHOW') {
if (selectedRowKeys.value.indexOf(button.key) === -1) {
selectedRowKeys.value.push(button.key)
}
}
})
return buttonInfo
}
// 设置按钮选中及显示的
const buttonInfoData = () => {
buttonInfo.forEach(button => {
if (props.buttonInfo.length > 0) {
props.buttonInfo.forEach(item => {
if (button.key === item.key) {
button.newLabel = item.label
button.value = item.value
}
})
} else {
button.newLabel = button.label
}
// 匹配选中的
if (selectedRowKeys.value.length > 0) {
selectedRowKeys.value.forEach(selectedRowKey => {
if (button.value === 'SHOW') {
// 已有的里面如果不包含这个已经被选中的
if (selectedRowKeys.value.indexOf(button.key) === -1) {
selectedRowKeys.value.push(button.key)
}
}
if (selectedRowKey === button.key) {
button.value = 'SHOW'
}
})
} else if (button.value === 'SHOW') {
if (selectedRowKeys.value.indexOf(button.key) === -1) {
selectedRowKeys.value.push(button.key)
}
}
})
return buttonInfo
}
dataSource.value = buttonInfoData()
dataSource.value = buttonInfoData()
// 设置默认选中的
const state = reactive({
selectedRowKeys: selectedRowKeys.value,
loading: false
})
// 点击复选框回调
const onSelectChange = (selectedRowKeys) => {
state.selectedRowKeys = selectedRowKeys
}
// 设置选择框的默认属性配置，将其设置成不可取消，不可选中
const checkboxProps = (record) => ({
disabled:
(record.value === 'SHOW' && props.showButton.indexOf(record.key) > -1) || props.noChecked.indexOf(record.key) > -1
})
// 父界面需要调用获取参数
const selectedButtonKeyList = () => {
let resultData = cloneDeep(dataSource.value)
resultData.forEach((dataItem) => {
if (state.selectedRowKeys.indexOf(dataItem.key) > -1) {
dataItem.value = 'SHOW'
} else {
dataItem.value = 'HIDE'
}
if (dataItem.newLabel !== '') {
dataItem.label = dataItem.newLabel
}
delete dataItem.newLabel
})
return resultData
}
// 抛出方法，让上个界面使用
defineExpose({
selectedButtonKeyList
})
// 设置默认选中的
const state = reactive({
selectedRowKeys: selectedRowKeys.value,
loading: false
})
// 点击复选框回调
const onSelectChange = selectedRowKeys => {
state.selectedRowKeys = selectedRowKeys
}
// 设置选择框的默认属性配置，将其设置成不可取消，不可选中
const checkboxProps = record => ({
disabled:
(record.value === 'SHOW' && props.showButton.indexOf(record.key) > -1) ||
props.noChecked.indexOf(record.key) > -1
})
// 父界面需要调用获取参数
const selectedButtonKeyList = () => {
let resultData = cloneDeep(dataSource.value)
resultData.forEach(dataItem => {
if (state.selectedRowKeys.indexOf(dataItem.key) > -1) {
dataItem.value = 'SHOW'
} else {
dataItem.value = 'HIDE'
}
if (dataItem.newLabel !== '') {
dataItem.label = dataItem.newLabel
}
delete dataItem.newLabel
})
return resultData
}
// 抛出方法，让上个界面使用
defineExpose({
selectedButtonKeyList
})
</script>

13
src/components/XnWorkflow/nodes/prop/propFieldInfo.vue
View File

@@ -2,10 +2,10 @@
<div class="mb-2">
<span class="left-span-label">参与者可以看见或操作哪些字段</span>
</div>
<a-table
<el-table
ref="table"
:columns="columns"
:data-source="dataSource"
:datel-source="dataSource"
:row-key="(record) => record.key"
:expand-row-by-click="true"
:pagination="false"
@@ -19,16 +19,17 @@
{{ record.label }}
</template>
<template v-if="column.dataIndex === 'value'">
<a-radio-group v-model:value="record.value" :disabled="record.disabled">
<a-radio :key="radio.value" v-for="radio in fieldRadioList" :value="radio.value">{{ radio.label }}</a-radio>
</a-radio-group>
<el-radio-group v-model:value="record.value" :disabled="record.disabled">
<el-radio :key="radio.value" v-for="radio in fieldRadioList" :value="radio.value">{{ radio.label }}</el-radio>
</el-radio-group>
</template>
</template>
</a-table>
</el-table>
</template>
<script setup name="propFieldInfo">
import config from '@/components/XnWorkflow/nodes/config/config'
import {ref} from 'vue'
const columns = [
{
title: '表单字段',

38
src/components/XnWorkflow/nodes/prop/propListenerInfo.vue
View File

@@ -2,16 +2,16 @@
<div class="mb-2">
<span class="left-span-label">配置要执行的监听</span>
</div>
<a-button type="primary" size="small" @click="addEditListener" class="mb-2">
<el-button type="primary" size="small" @click="addEditListener" class="mb-2">
<template #icon>
<plus-outlined />
<!-- <plus-outlined/> -->
</template>
新增
</a-button>
<a-table
</el-button>
<el-table
ref="table"
:columns="columns"
:data-source="dataSource"
:datel-source="dataSource"
:row-key="(record) => record.id"
bordered
:expand-row-by-click="true"
@@ -23,22 +23,22 @@
{{ listenerlabel(record.listenerType) }}
</template>
<template v-if="column.dataIndex === 'action'">
<a-popconfirm title="确定要删除此监听吗？" @confirm="deleteListener(record)" placement="topRight">
<a-button type="link" danger size="small">删除</a-button>
</a-popconfirm>
<el-popconfirm title="确定要删除此监听吗？" @confirm="deleteListener(record)" placement="topRight">
<el-button type="link" danger size="small">删除</el-button>
</el-popconfirm>
</template>
</template>
</a-table>
<a-modal v-model:visible="modalVisible" title="新增" @ok="handleOk" @cancel="handleCancel">
<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
<a-form-item label="监听类型：" name="listenerType">
<a-select v-model:value="formData.listenerType" placeholder="请选择类型" :options="listenerTypeOptions" @change="listenerType" />
</a-form-item>
<a-form-item label="JAVA监听器：" name="javaClass">
<a-select v-model:value="formData.javaClass" placeholder="请选择JAVA监听器" :options="listenerValueArray" />
</a-form-item>
</a-form>
</a-modal>
</el-table>
<el-dialog v-model="modalVisible" title="新增" @ok="handleOk" @cancel="handleCancel">
<el-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
<el-form-item label="监听类型：" name="listenerType">
<el-select v-model:value="formData.listenerType" placeholder="请选择类型" :options="listenerTypeOptions" @change="listenerType" />
</el-form-item>
<el-form-item label="JAVA监听器：" name="javaClass">
<el-select v-model:value="formData.javaClass" placeholder="请选择JAVA监听器" :options="listenerValueArray" />
</el-form-item>
</el-form>
</el-dialog>
</template>
<script setup name="PropListenerInfo">

2
src/components/XnWorkflow/nodes/prop/propTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<a-tag v-for="tag in tagList()">{{ tag }}</a-tag
<el-tag v-for="tag in tagList()">{{ tag }}</el-tag
><!-- 花里胡哨的颜色先去掉，用的时候拿到旁边就行 :color="randomColor()"-->
</template>

23
src/components/XnWorkflow/nodes/prop/templateGenerator.vue
View File

@@ -1,7 +1,8 @@
<template>
<div>
<a-textarea
<el-input
ref="smsInput"
type="textarea"
v-model:value="smsContent"
:auto-size="{ minRows: 3, maxRows: 6 }"
placeholder="请输入内容"
@@ -11,25 +12,25 @@
@click.native="focusHandler"
@keydown.up.down.left.right.native="focusHandler"
@select.native="selectHandler"
></a-textarea>
<a-dropdown>
></el-input>
<el-dropdown>
<template #overlay>
<a-menu>
<a-menu-item
<el-menu>
<el-menu-item
v-for="fields in fieldInfoLisNew"
:key="fields.value"
:value="fields.value"
:disabled="fields.value === 'disabled'"
@click="insertFields(fields)"
>{{ fields.label }}</a-menu-item
>{{ fields.label }}</el-menu-item
>
</a-menu>
</el-menu>
</template>
<a-button size="small" type="primary" style="float: right; margin-top: -35px; margin-right: 10px">
<el-button size="small" type="primary" style="float: right; margin-top: -35px; margin-right: 10px">
置入字段
<DownOutlined />
</a-button>
</a-dropdown>
<!-- <DownOutlined /> -->
</el-button>
</el-dropdown>
</div>
</template>

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

@@ -23,7 +23,7 @@
<label v-if="!isEditTitle" @click="editTitle"
>{{ form.title }}<edit-outlined class="node-wrap-drawer-title-edit" />
</label>
<a-input
<el-input
v-if="isEditTitle"
ref="nodeTitle"
v-model:value="form.title"
@@ -33,43 +33,43 @@
/>
</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">
<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">
<a-alert message="请选择抄送人员！" type="error" />
<el-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)">
<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 }}
</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">
</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>
选择
</a-button>
</el-button>
<p />
<prop-tag :tag-list="getTagList('USER')" />
</a-form-item>
<a-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
</el-form-item>
<el-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
<div class="mt-2">
<a-button type="primary" @click="openSelector" size="small">
<el-button type="primary" @click="openSelector" size="small">
<template #icon>
<search-outlined />
</template>
选择
</a-button>
</el-button>
</div>
<div class="mt-2">
<prop-tag
@@ -77,21 +77,21 @@
:tag-list="form.properties.participateInfo[0]"
/>
</div>
</a-form-item>
<a-form-item
</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>
<a-tooltip>
<el-tooltip>
<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template>
<question-circle-outlined />
人员变量：
</a-tooltip>
</el-tooltip>
</template>
<a-input
<el-input
style="width: 50%"
v-model:value="userTypeForm.formUser"
allow-clear
@@ -99,22 +99,23 @@
@keyup.enter="customFormUser"
placeholder="请输入人员变量"
/>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="2" tab="执行监听" force-render>
</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"
/>
</a-tab-pane>
</a-tabs>
</a-layout-content>
</el-tab-pane>
</el-tabs>
</el-container>
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
<a-button @click="drawer = false">取消</a-button>
<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" />
@@ -123,7 +124,7 @@
:org-tree-api="selectorApiFunction.orgTreeApi"
:user-page-api="selectorApiFunction.userPageApi"
:checked-user-list-api="selectorApiFunction.checkedUserListApi"
:data-is-converter-flw="true"
:datel-is-converter-flw="true"
@onBack="userCallBack"
/>
</div>

476
src/components/XnWorkflow/nodes/startTask.vue
View File

@@ -1,241 +1,251 @@
<template>
<div class="node-wrap">
<div class="node-wrap-box start-node" @click="show">
<div class="title" style="background: #576a95">
<user-outlined class="icon" />
<span>{{ childNode.title }}</span>
</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" />
<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>
<prop-button-info
ref="propButtonInfo"
:button-info="selectedButtonInfo"
:show-button="startTaskDefaultButtonkey"
:no-checked="startTaskNoCheckedButtonkey"
/>
</a-tab-pane>
<a-tab-pane key="2" tab="字段配置" force-render v-if="recordData.formType === 'DESIGN'">
<prop-field-info ref="propFieldInfo" :field-info="fieldInfo" :form-field-list-value="formFieldListValue" />
</a-tab-pane>
<a-tab-pane key="3" tab="表单配置" force-render v-else>
<div class="mb-2">
<span class="left-span-label">参与者可以填写的表单</span>
</div>
<a-form ref="startTaskFormRef" :model="formData" layout="vertical">
<a-form-item
label="节点表单"
name="FORM_URL"
:rules="[{ required: true, message: '请输入节点表单组件地址' }]"
>
<a-input
v-model:value="formData.FORM_URL"
addon-before="src/views/flw/customform/"
addon-after=".vue"
placeholder="请输入节点表单组件地址"
allow-clear
>
<template #suffix>
<a-button
v-if="formData.FORM_URL"
type="primary"
size="small"
@click="$refs.previewCustomFormRef.onOpen(formData.FORM_URL)"
>
预览
</a-button>
</template>
</a-input>
</a-form-item>
<a-form-item
label="移动端节点表单"
name="MOBILE_FORM_URL"
:rules="[{ required: true, message: '请输入移动端节点表单组件地址' }]"
>
<a-input
v-model:value="formData.MOBILE_FORM_URL"
addon-before="pages/flw/customform/"
addon-after=".vue"
placeholder="请输入移动端节点表单组件地址"
allow-clear
/>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="4" 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-tab-pane key="5" tab="节点监听" force-render>
<prop-listener-info
ref="propTaskListenerInfoRef"
:listener-value="form.properties.taskListenerInfo"
:default-listener-list="taskListenerInfo"
:listener-value-array="taskListenerArray"
/>
</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>
<preview-custom-form ref="previewCustomFormRef" />
</div>
<div class="node-wrap">
<div class="node-wrap-box start-node" @click="show">
<div class="title" style="background: #576a95">
<!-- <user-outlined class="icon" /> -->
<span>{{ childNode.title }}777111</span>
</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" />
<form_container v-model="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="activeKey">
<el-tab-pane name="1" label="按钮配置" lazy>
<prop-button-info
ref="propButtonInfo"
:button-info="selectedButtonInfo"
:show-button="startTaskDefaultButtonkey"
:no-checked="startTaskNoCheckedButtonkey"
/>
</el-tab-pane>
<el-tab-pane name="2" label="字段配置" lazy v-if="recordData.formType === 'DESIGN'">
<prop-field-info
ref="propFieldInfo"
:field-info="fieldInfo"
:form-field-list-value="formFieldListValue"
/>
</el-tab-pane>
<el-tab-pane name="3" label="表单配置" lazy v-else>
<div class="mb-2">
<span class="left-span-label">参与者可以填写的表单</span>
</div>
<el-form ref="startTaskFormRef" :model="formData" layout="vertical">
<el-form-item
label="节点表单"
name="FORM_URL"
:rules="[{ required: true, message: '请输入节点表单组件地址' }]"
>
<el-input
v-model:value="formData.FORM_URL"
addon-before="src/views/flw/customform/"
addon-after=".vue"
placeholder="请输入节点表单组件地址"
allow-clear
>
<template #suffix>
<el-button
v-if="formData.FORM_URL"
type="primary"
size="small"
@click="$refs.previewCustomFormRef.onOpen(formData.FORM_URL)"
>
预览
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item
label="移动端节点表单"
name="MOBILE_FORM_URL"
:rules="[{ required: true, message: '请输入移动端节点表单组件地址' }]"
>
<el-input
v-model:value="formData.MOBILE_FORM_URL"
addon-before="pages/flw/customform/"
addon-after=".vue"
placeholder="请输入移动端节点表单组件地址"
allow-clear
/>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane name="4" label="执行监听" lazy>
<prop-listener-info
v-if="form.properties && form.properties.executionListenerInfo"
ref="propExecutionListenerInfoRef"
:listener-value="form.properties.executionListenerInfo"
:default-listener-list="executionListenerInfo"
:listener-value-array="executionListenerArray"
/>
</el-tab-pane>
<el-tab-pane name="5" label="节点监听" lazy>
<prop-listener-info
ref="propTaskListenerInfoRef"
v-if="form.properties && form.properties.taskListenerInfo"
:listener-value="form.properties.taskListenerInfo"
:default-listener-list="taskListenerInfo"
:listener-value-array="taskListenerArray"
/>
</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">取消111</el-button>
</template>
</form_container>
<preview-custom-form ref="previewCustomFormRef" />
</div>
</template>
<script>
import { cloneDeep } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config'
import addNode from './addNode.vue'
import propButtonInfo from './prop/propButtonInfo.vue'
import propFieldInfo from './prop/propFieldInfo.vue'
import propListenerInfo from './prop/propListenerInfo.vue'
import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
export default {
components: {
addNode,
propButtonInfo,
propFieldInfo,
propListenerInfo,
PreviewCustomForm
},
props: {
modelValue: { type: Object, default: () => {} },
formFieldListValue: { type: Array, default: () => [] },
recordData: { type: Object, default: () => {} },
processConfigInfo: { type: Object, default: () => {} },
executionListenerArray: { type: Array, default: () => [] },
taskListenerArray: { type: Array, default: () => [] }
},
data() {
return {
childNode: {},
drawer: false,
isEditTitle: false,
form: {},
activeKey: '1',
selectedButtonInfo: [],
executionListenerInfo: cloneDeep(config.listener.startTaskExecutionListenerInfo),
taskListenerInfo: cloneDeep(config.listener.userTaskTaskListenerInfo),
startTaskDefaultButtonkey: cloneDeep(config.button.startTaskDefaultButtonkey),
startTaskNoCheckedButtonkey: cloneDeep(config.button.startTaskNoCheckedButtonkey),
fieldInfo: [],
formData: {}
}
},
watch: {
modelValue() {
this.childNode = this.modelValue
}
},
mounted() {
this.childNode = this.modelValue
},
methods: {
show() {
this.form = cloneDeep(this.childNode)
this.isEditTitle = false
this.drawer = true
this.selectedButtonInfo = this.form.properties.buttonInfo
this.fieldInfo = this.form.properties.fieldInfo
// 初始化自定义表单字段值
this.initFormInfo()
},
initFormInfo() {
const processConfigInfo = cloneDeep(this.processConfigInfo)
if (!this.form.properties.formInfo.find((f) => f.key === 'FORM_URL')) {
this.formData.FORM_URL = processConfigInfo.processStartTaskFormUrl
} else {
this.formData.FORM_URL = this.form.properties.formInfo.find((f) => f.key === 'FORM_URL').value
}
if (!this.form.properties.formInfo.find((f) => f.key === 'MOBILE_FORM_URL')) {
this.formData.MOBILE_FORM_URL = processConfigInfo.processStartTaskMobileFormUrl
} else {
this.formData.MOBILE_FORM_URL = this.form.properties.formInfo.find((f) => f.key === 'MOBILE_FORM_URL').value
}
},
editTitle() {
this.isEditTitle = true
this.$nextTick(() => {
this.$refs.nodeTitle.focus()
})
},
saveTitle() {
this.isEditTitle = false
},
save() {
this.form.id = this.$TOOL.snowyUuid()
this.form.properties.buttonInfo = this.$refs.propButtonInfo.selectedButtonKeyList()
this.form.properties.executionListenerInfo = this.$refs.propExecutionListenerInfoRef.selectedListenerList()
this.form.properties.taskListenerInfo = this.$refs.propTaskListenerInfoRef.selectedListenerList()
if (this.recordData.formType === 'DESIGN') {
this.form.properties.fieldInfo = this.$refs.propFieldInfo.selectedFieldList()
this.form.dataLegal = true
this.$emit('update:modelValue', this.form)
this.drawer = false
} else {
this.$refs.startTaskFormRef
.validate()
.then((values) => {
this.form.dataLegal = true
this.form.properties.formInfo = cloneDeep(config.nodeModel.formInfo)
this.form.properties.formInfo.find((f) => f.key === 'FORM_URL').value = values.FORM_URL
this.form.properties.formInfo.find((f) => f.key === 'MOBILE_FORM_URL').value = values.MOBILE_FORM_URL
this.$emit('update:modelValue', this.form)
this.drawer = false
})
.catch((err) => {})
}
},
// eslint-disable-next-line no-unused-vars
toText(childNode) {
if (childNode.dataLegal) {
return '系统自动配置参与人'
} else {
return false
}
}
}
}
import { cloneDeep } from 'lodash-es'
import config from '@/components/XnWorkflow/nodes/config/config'
import form_container from '../../../components/formContainer/index.vue'
import addNode from './addNode.vue'
import propButtonInfo from './prop/propButtonInfo.vue'
import propFieldInfo from './prop/propFieldInfo.vue'
import propListenerInfo from './prop/propListenerInfo.vue'
import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
import { add } from 'xe-utils'
export default {
components: {
addNode,
propButtonInfo,
propFieldInfo,
propListenerInfo,
PreviewCustomForm,
form_container
},
props: {
modelValue: { type: Object, default: () => {} },
formFieldListValue: { type: Array, default: () => [] },
recordData: { type: Object, default: () => {} },
processConfigInfo: { type: Object, default: () => {} },
executionListenerArray: { type: Array, default: () => [] },
taskListenerArray: { type: Array, default: () => [] }
},
data() {
return {
childNode: {},
drawer: false,
isEditTitle: false,
form: {},
activeKey: '1',
selectedButtonInfo: [],
executionListenerInfo: cloneDeep(config.listener.startTaskExecutionListenerInfo),
taskListenerInfo: cloneDeep(config.listener.userTaskTaskListenerInfo),
startTaskDefaultButtonkey: cloneDeep(config.button.startTaskDefaultButtonkey),
startTaskNoCheckedButtonkey: cloneDeep(config.button.startTaskNoCheckedButtonkey),
fieldInfo: [],
formData: {}
}
},
watch: {
modelValue() {
this.childNode = this.modelValue
}
},
mounted() {
this.childNode = this.modelValue
},
methods: {
show() {
this.form = cloneDeep(this.childNode)
this.isEditTitle = false
this.drawer = true
this.selectedButtonInfo =
this.form && this.form.propertie && this.form.properties.buttonInfo
? this.form.properties.buttonInfo
: {}
this.fieldInfo = this.form.properties.fieldInfo
// 初始化自定义表单字段值
this.initFormInfo()
},
initFormInfo() {
const processConfigInfo = cloneDeep(this.processConfigInfo)
if (!this.form.properties.formInfo.find(f => f.key === 'FORM_URL')) {
this.formData.FORM_URL = processConfigInfo.processStartTaskFormUrl
} else {
this.formData.FORM_URL = this.form.properties.formInfo.find(f => f.key === 'FORM_URL').value
}
if (!this.form.properties.formInfo.find(f => f.key === 'MOBILE_FORM_URL')) {
this.formData.MOBILE_FORM_URL = processConfigInfo.processStartTaskMobileFormUrl
} else {
this.formData.MOBILE_FORM_URL = this.form.properties.formInfo.find(
f => f.key === 'MOBILE_FORM_URL'
).value
}
},
editTitle() {
this.isEditTitle = true
this.$nextTick(() => {
this.$refs.nodeTitle.focus()
})
},
saveTitle() {
this.isEditTitle = false
},
save() {
this.form.id = this.$TOOL.snowyUuid()
this.form.properties.buttonInfo = this.$refs.propButtonInfo.selectedButtonKeyList()
this.form.properties.executionListenerInfo = this.$refs.propExecutionListenerInfoRef.selectedListenerList()
this.form.properties.taskListenerInfo = this.$refs.propTaskListenerInfoRef.selectedListenerList()
if (this.recordData.formType === 'DESIGN') {
this.form.properties.fieldInfo = this.$refs.propFieldInfo.selectedFieldList()
this.form.dataLegal = true
this.$emit('update:modelValue', this.form)
this.drawer = false
} else {
this.$refs.startTaskFormRef
.validate()
.then(values => {
this.form.dataLegal = true
this.form.properties.formInfo = cloneDeep(config.nodeModel.formInfo)
this.form.properties.formInfo.find(f => f.key === 'FORM_URL').value = values.FORM_URL
this.form.properties.formInfo.find(f => f.key === 'MOBILE_FORM_URL').value =
values.MOBILE_FORM_URL
this.$emit('update:modelValue', this.form)
this.drawer = false
})
.catch(err => {})
}
},
// eslint-disable-next-line no-unused-vars
toText(childNode) {
if (childNode.dataLegal) {
return '系统自动配置参与人'
} else {
return false
}
}
}
}
</script>
<style scoped>
.font-span {
padding-bottom: 8px;
}
.font-span {
padding-bottom: 8px;
}
</style>

272
src/components/XnWorkflow/nodes/userTask.vue
View File

@@ -11,10 +11,10 @@
<span v-else class="placeholder">请选择</span>
</div>
</div>
<add-node v-model="childNode.childNode" />
<addNode v-model="childNode.childNode" />
<!-- 抽屉 -->
<xn-form-container
<formContainer
v-model:visible="drawer"
:destroy-on-close="true"
:width="700"
@@ -25,79 +25,80 @@
<label v-if="!isEditTitle" @click="editTitle"
>{{ form.title }}<edit-outlined class="node-wrap-drawer-title-edit"
/></label>
<a-input
<el-input
v-if="isEditTitle"
ref="nodeTitle"
v-model:value="form.title"
v-model="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>
<el-container>
{{ activeKey }}
<el-tabs v-model="activeKey">
<el-tab-pane name="1" label="人员配置" lazy>
<div v-show="!nodeLegal" style="margin-bottom: 10px">
<a-alert message="请配置节点相关人员！" type="error" />
<el-alert message="请配置节点相关人员！" type="error" />
</div>
<a-form layout="vertical" :model="userTypeForm" ref="userTypeFormRef">
<el-form layout="vertical" :model="userTypeForm" ref="userTypeFormRef">
<div class="mb-3">
<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">
<a-radio value="ORG" @click="selectionClick('ORG')">机构</a-radio>
</a-col>
<a-col :span="8">
<a-radio value="ROLE" @click="selectionClick('ROLE')">角色</a-radio>
</a-col>
<a-col :span="8">
<a-radio value="POSITION" @click="selectionClick('POSITION')">职位</a-radio>
</a-col>
</a-row>
<a-row style="padding-bottom: 10px">
<a-col :span="8">
<a-radio value="ORG_LEADER" @click="selectionClick('ORG_LEADER')">部门主管</a-radio>
</a-col>
<a-col :span="8">
<a-radio value="SUPERVISOR" @click="selectionClick('SUPERVISOR')">上级主管</a-radio>
</a-col>
<a-col :span="8">
<a-radio value="MUL_LEVEL_SUPERVISOR" @click="selectionClick('MUL_LEVEL_SUPERVISOR')"
>连续多级主管</a-radio
<el-radio-group v-model:value="userSelectionType" style="width: 100%">
<el-row style="padding-bottom: 10px">
<el-col :span="8">
<el-radio value="ORG" @click="selectionClick('ORG')">机构</el-radio>
</el-col>
<el-col :span="8">
<el-radio value="ROLE" @click="selectionClick('ROLE')">角色</el-radio>
</el-col>
<el-col :span="8">
<el-radio value="POSITION" @click="selectionClick('POSITION')">职位</el-radio>
</el-col>
</el-row>
<el-row style="padding-bottom: 10px">
<el-col :span="8">
<el-radio value="ORG_LEADER" @click="selectionClick('ORG_LEADER')">部门主管</el-radio>
</el-col>
<el-col :span="8">
<el-radio value="SUPERVISOR" @click="selectionClick('SUPERVISOR')">上级主管</el-radio>
</el-col>
<el-col :span="8">
<el-radio value="MUL_LEVEL_SUPERVISOR" @click="selectionClick('MUL_LEVEL_SUPERVISOR')"
>连续多级主管</el-radio
>
</a-col>
</a-row>
<a-row style="padding-bottom: 10px">
<a-col :span="8">
<a-radio value="USER" @click="selectionClick('USER')">用户</a-radio>
</a-col>
<a-col :span="8">
<a-radio value="FORM_USER" @click="selectionClick('FORM_USER')">表单内的人</a-radio>
</a-col>
<a-col :span="8">
<a-radio value="FORM_USER_SUPERVISOR" @click="selectionClick('FORM_USER_SUPERVISOR')"
>表单内的人上级主管</a-radio
</el-col>
</el-row>
<el-row style="padding-bottom: 10px">
<el-col :span="8">
<el-radio value="USER" @click="selectionClick('USER')">用户</el-radio>
</el-col>
<el-col :span="8">
<el-radio value="FORM_USER" @click="selectionClick('FORM_USER')">表单内的人</el-radio>
</el-col>
<el-col :span="8">
<el-radio value="FORM_USER_SUPERVISOR" @click="selectionClick('FORM_USER_SUPERVISOR')"
>表单内的人上级主管</el-radio
>
</a-col>
</a-row>
<a-row style="padding-bottom: 10px">
<a-col :span="8">
<a-radio
</el-col>
</el-row>
<el-row style="padding-bottom: 10px">
<el-col :span="8">
<el-radio
value="FORM_USER_MUL_LEVEL_SUPERVISOR"
@click="selectionClick('FORM_USER_MUL_LEVEL_SUPERVISOR')"
>表单内的人连续多级主管</a-radio
>表单内的人连续多级主管</el-radio
>
</a-col>
<a-col :span="8">
<a-radio value="INITIATOR" @click="selectionClick('INITIATOR')">发起人</a-radio>
</a-col>
<a-col :span="8" />
</a-row>
</a-radio-group>
<a-form-item
</el-col>
<el-col :span="8">
<el-radio value="INITIATOR" @click="selectionClick('INITIATOR')">发起人</el-radio>
</el-col>
<el-col :span="8" />
</el-row>
</el-radio-group>
<el-form-item
class="mt-2"
v-if="
recordData.formType === 'DEFINE' &&
@@ -109,13 +110,13 @@
:rules="[{ required: true, message: '请输入人员变量' }]"
>
<template #label>
<a-tooltip>
<el-tooltip>
<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template>
<question-circle-outlined />
人员变量：
</a-tooltip>
</el-tooltip>
</template>
<a-input
<el-input
style="width: 50%"
v-model:value="userTypeForm.formUser"
allow-clear
@@ -123,22 +124,22 @@
@keyup.enter="customFormUser"
placeholder="请输入人员变量"
/>
</a-form-item>
</el-form-item>
<div v-if="seleType" class="mt-2">
<a-button type="primary" @click="openSelector" size="small">
<el-button type="primary" @click="openSelector" size="small">
<template #icon>
<search-outlined />
</template>
选择
</a-button>
</el-button>
</div>
<div class="mt-2">
<prop-tag
v-if="form.properties.participateInfo.length > 0 && form.properties.participateInfo[0].value !== ''"
v-if="form.properties&&form.properties.participateInfo&&form.properties.participateInfo.length > 0 && form.properties.participateInfo[0].value !== ''"
:tag-list="form.properties.participateInfo[0]"
/>
</div>
<a-form-item
<el-form-item
class="mt-2"
v-if="
userSelectionType === 'SUPERVISOR' ||
@@ -154,108 +155,108 @@
name="levelSupervisor"
:rules="[{ required: true, message: '请选择主管级别' }]"
>
<a-select
<el-select
style="width: 50%"
v-model:value="userTypeForm.levelSupervisor"
placeholder="请选择主管级别"
@change="levelSupervisorChange"
:options="levelSupervisorList"
/>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="2" tab="审批配置" force-render>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane name="2" label="审批配置" lazy>
<span class="left-span-label">配置审批方式</span>
<a-form label-position="top" layout="vertical" class="mt-2">
<el-form label-position="top" layout="vertical" class="mt-2">
<div v-show="!nodeLegal" style="margin-bottom: 10px">
<a-alert message="请配置节点相关人员！" type="error" />
<el-alert message="请配置节点相关人员！" type="error" />
</div>
<a-form-item label="任务节点类型">
<a-radio-group v-model:value="form.properties.configInfo.userTaskType">
<a-radio
<el-form-item label="任务节点类型">
<el-radio-group v-model:value="form.properties.configInfo.userTaskType">
<el-radio
v-for="userTaskType in userTaskTypeList"
:key="userTaskType.value"
:value="userTaskType.value"
>{{ userTaskType.label }}</a-radio
>{{ userTaskType.label }}</el-radio
>
</a-radio-group>
</a-form-item>
<a-form-item label="审批退回类型">
<a-radio-group v-model:value="form.properties.configInfo.userTaskRejectType">
<a-radio
</el-radio-group>
</el-form-item>
<el-form-item label="审批退回类型">
<el-radio-group v-model:value="form.properties.configInfo.userTaskRejectType">
<el-radio
v-for="userTaskRejectType in userTaskRejectTypeList"
:key="userTaskRejectType.value"
:value="userTaskRejectType.value"
>{{ userTaskRejectType.label }}
</a-radio>
</el-radio>
<br />
</a-radio-group>
</a-form-item>
<a-form-item label="多人审批类型">
<a-radio-group v-model:value="form.properties.configInfo.userTaskMulApproveType">
<a-radio
</el-radio-group>
</el-form-item>
<el-form-item label="多人审批类型">
<el-radio-group v-model:value="form.properties.configInfo.userTaskMulApproveType">
<el-radio
v-for="userTaskMulApproveType in userTaskMulApproveTypeList"
:key="userTaskMulApproveType.value"
:value="userTaskMulApproveType.value"
>{{ userTaskMulApproveType.label }}
</a-radio>
</el-radio>
<br />
</a-radio-group>
</a-form-item>
<a-form-item label="审批人员为空时">
<a-radio-group v-model:value="form.properties.configInfo.userTaskEmptyApproveType">
<a-radio
</el-radio-group>
</el-form-item>
<el-form-item label="审批人员为空时">
<el-radio-group v-model:value="form.properties.configInfo.userTaskEmptyApproveType">
<el-radio
v-for="userTaskEmptyApproveType in userTaskEmptyApproveTypeList"
:key="userTaskEmptyApproveType.value"
:value="userTaskEmptyApproveType.value"
@change="userTaskEmptyApproveTypeChange"
>{{ userTaskEmptyApproveType.label }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="form.properties.configInfo.userTaskEmptyApproveType === 'AUTO_TURN'"
label="审批人为空时转交人"
>
<p><a-button type="primary" size="small" @click="seleApproveUser">选择人员</a-button></p>
<a-tag
<p><el-button type="primary" size="small" @click="seleApproveUser">选择人员</el-button></p>
<el-tag
v-if="form.properties.configInfo.userTaskEmptyApproveUserArray.length > 0"
color="orange"
closable
@close="closeApproveUserTag"
>
{{ form.properties.configInfo.userTaskEmptyApproveUserArray[0].name }}</a-tag
{{ form.properties.configInfo.userTaskEmptyApproveUserArray[0].name }}</el-tag
>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="3" tab="按钮配置" force-render>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane name="3" label="按钮配置" lazy>
<prop-button-info
ref="propButtonInfo"
:button-info="selectedButtonInfo"
:show-button="defaultButtonkey"
:no-checked="userTaskNoCheckedButtonkey"
/>
</a-tab-pane>
<a-tab-pane key="4" tab="字段配置" force-render v-if="recordData.formType === 'DESIGN'">
</el-tab-pane>
<el-tab-pane name="4" label="字段配置" lazy v-if="recordData.formType === 'DESIGN'">
<prop-field-info
ref="propFieldInfo"
:field-info="fieldInfo"
:default-field-model="defaultFieldModel"
:form-field-list-value="formFieldListValue"
/>
</a-tab-pane>
<a-tab-pane key="5" tab="表单配置" force-render v-else>
</el-tab-pane>
<el-tab-pane name="5" label="表单配置" lazy v-else>
<div class="mb-2">
<span class="left-span-label">参与者可以使用的表单</span>
</div>
<a-form ref="userTaskFormRef" :model="formData" layout="vertical">
<a-form-item
<el-form ref="userTaskFormRef" :model="formData" layout="vertical">
<el-form-item
label="节点表单"
name="FORM_URL"
:rules="[{ required: true, message: '请输入节点表单组件地址' }]"
>
<a-input
<el-input
v-model:value="formData.FORM_URL"
addon-before="src/views/flw/customform/"
addon-after=".vue"
@@ -263,61 +264,61 @@
allow-clear
>
<template #suffix>
<a-button
<el-button
v-if="formData.FORM_URL"
type="primary"
size="small"
@click="$refs.previewCustomFormRef.onOpen(formData.FORM_URL)"
>
预览
</a-button>
</el-button>
</template>
</a-input>
</a-form-item>
<a-form-item
</el-input>
</el-form-item>
<el-form-item
label="移动端节点表单"
name="MOBILE_FORM_URL"
:rules="[{ required: true, message: '请输入移动端节点表单组件地址' }]"
>
<a-input
<el-input
v-model:value="formData.MOBILE_FORM_URL"
addon-before="pages/flw/customform/"
addon-after=".vue"
placeholder="请输入移动端节点表单组件地址"
allow-clear
/>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="6" tab="执行监听" force-render>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane name="6" label="执行监听" lazy>
<prop-listener-info
ref="propExecutionListenerInfoRef"
:listener-value="form.properties.executionListenerInfo"
:default-listener-list="executionListenerInfo"
:listener-value-array="executionListenerArray"
/>
</a-tab-pane>
<a-tab-pane key="7" tab="节点监听" force-render>
</el-tab-pane>
<el-tab-pane name="7" label="节点监听" lazy>
<prop-listener-info
ref="propTaskListenerInfoRef"
:listener-value="form.properties.taskListenerInfo"
:default-listener-list="taskListenerInfo"
:listener-value-array="taskListenerArray"
/>
</a-tab-pane>
</a-tabs>
</a-layout-content>
</el-tab-pane>
</el-tabs>
</el-container>
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
<a-button @click="drawer = false">取消</a-button>
<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
<el-button @click="drawer = false">取消</el-button>
</template>
</xn-form-container>
</formContainer>
<role-selector-plus
ref="roleselectorPlus"
:org-tree-api="selectorApiFunction.orgTreeApi"
:role-page-api="selectorApiFunction.rolePageApi"
:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
:data-is-converter-flw="true"
:datel-is-converter-flw="true"
@onBack="callBack"
/>
<user-selector-plus
@@ -325,7 +326,7 @@
:org-tree-api="selectorApiFunction.orgTreeApi"
:user-page-api="selectorApiFunction.userPageApi"
:checked-user-list-api="selectorApiFunction.checkedUserListApi"
:data-is-converter-flw="true"
:datel-is-converter-flw="true"
@onBack="callBack"
/>
<pos-selector-plus
@@ -333,7 +334,7 @@
:org-tree-api="selectorApiFunction.orgTreeApi"
:pos-page-api="selectorApiFunction.posPageApi"
:checked-pos-list-api="selectorApiFunction.checkedPosListApi"
:data-is-converter-flw="true"
:datel-is-converter-flw="true"
@onBack="callBack"
/>
<org-selector-plus
@@ -341,7 +342,7 @@
:org-tree-api="selectorApiFunction.orgTreeApi"
:org-page-api="selectorApiFunction.orgPageApi"
:checked-org-list-api="selectorApiFunction.checkedOrgListApi"
:data-is-converter-flw="true"
:datel-is-converter-flw="true"
@onBack="callBack"
/>
<form-user-selector ref="formuserselector" :form-field-list="formFieldListValue" @click="formuserClick" />
@@ -371,7 +372,7 @@
import orgSelectorPlus from '@/components/Selector/orgSelectorPlus.vue'
import propTag from './prop/propTag.vue'
import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
import formContainer from '@/components/formContainer/index.vue';
export default {
components: {
addNode,
@@ -384,7 +385,8 @@
posSelectorPlus,
orgSelectorPlus,
propTag,
PreviewCustomForm
PreviewCustomForm,
formContainer
},
// inject: ['select'],
props: {

95
src/components/XnWorkflow/process.vue
View File

@@ -1,5 +1,5 @@
<template>
<xn-form-container
<formContainer
v-model:visible="drawer"
:destroy-on-close="true"
:title="modelTitle"
@@ -18,29 +18,28 @@
<div class="mb-2">
<span class="left-span-label">配置使用该流程的人员</span>
</div>
<el-button type="primary" round @click="selectionParticipants('ORG')" size="small">
<Plus/>
<el-button type="primary" :icon="Plus" round @click="selectionParticipants('ORG')" size="small">
选择机构
</el-button>
<p />
<prop-tag :tagList="getTagList('ORG')" />
<el-divider />
<el-button type="primary" round @click="selectionParticipants('ROLE')" size="small">
<plus-outlined />
<!-- <plus-outlined /> -->
选择角色
</el-button>
<p />
<prop-tag :tagList="getTagList('ROLE')" />
<el-divider />
<el-button type="primary" round @click="selectionParticipants('POSITION')" size="small">
<plus-outlined />
<!-- <plus-outlined /> -->
选择职位
</el-button>
<p />
<prop-tag :tagList="getTagList('POSITION')" />
<el-divider />
<el-button type="primary" round @click="selectionParticipants('USER')" size="small">
<plus-outlined />
<!-- <plus-outlined /> -->
选择用户
</el-button>
<p />
@@ -59,7 +58,7 @@
:rules="[{ required: true, message: '请选择流水号' }]"
>
<el-select
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processSnTemplateId"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processSnTemplateId"
v-model:value="form.properties.configInfo.processSnTemplateId"
placeholder="请选择流水号"
:options="snTemplateArray"
@@ -75,6 +74,7 @@
:rules="[{ required: true, message: '请选择打印模板' }]"
>
<el-select
v-if="form&&form.properties&&form.properties.configInfo.processPrintTemplateId"
v-model:value="form.properties.configInfo.processPrintTemplateId"
placeholder="请选择打印模板"
:options="printTemplateArray"
@@ -93,7 +93,7 @@
>
<template-generator
ref="processTitleGenerator"
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processTitleTemplate"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processTitleTemplate"
v-model:inputValue="form.properties.configInfo.processTitleTemplate"
:fieldInfoLis="fieldInfoLis"
/>
@@ -105,16 +105,16 @@
>
<template-generator
ref="processAbstractGenerator"
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processAbstractTemplate"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processAbstractTemplate"
v-model:inputValue="form.properties.configInfo.processAbstractTemplate"
:fieldInfoLis="fieldInfoLis"
/>
</el-form-item>
<el-form-item label="开启自动去重" name="processEnableAutoDistinct">
<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" v-model:checked="form.properties.configInfo.processEnableAutoDistinct" />
<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" v-model:checked="form.properties.configInfo.processEnableAutoDistinct" />
</el-form-item>
<el-form-item v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" name="processAutoDistinctType">
<el-form-item v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" name="processAutoDistinctType">
<el-radio-group v-model:value="form.properties.configInfo.processAutoDistinctType">
<el-radio
v-for="autoDistinctType in processAutoDistinctTypeList"
@@ -127,12 +127,12 @@
<el-row :gutter="[10, 0]">
<el-col :span="12">
<el-form-item label="开启审批撤销" name="processEnableRevoke">
<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableRevoke" v-model:checked="form.properties.configInfo.processEnableRevoke" />
<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableRevoke" v-model:checked="form.properties.configInfo.processEnableRevoke" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开启意见必填" name="processEnableCommentRequired">
<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCommentRequired" v-model:checked="form.properties.configInfo.processEnableCommentRequired" />
<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCommentRequired" v-model:checked="form.properties.configInfo.processEnableCommentRequired" />
</el-form-item>
</el-col>
</el-row>
@@ -166,88 +166,88 @@
</el-form-item>
<el-form-item label="开启待办通知" name="processEnableTodoNotice">
<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice" v-model:checked="form.properties.configInfo.processEnableTodoNotice" />
<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice" v-model:checked="form.properties.configInfo.processEnableTodoNotice" />
</el-form-item>
<el-form-item
label="待办通知方式"
v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
name="processTodoNoticeChannel"
:rules="[{ required: formData.processEnableTodoNotice, message: '请选择通知方式' }]"
>
<el-checkbox-group
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeChannel"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeChannel"
v-model:value="form.properties.configInfo.processTodoNoticeChannel"
:options="noticeInfoList"
/>
</el-form-item>
<el-form-item
label="待办通知模板"
v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
name="processTodoNoticeTemplate"
:rules="[{ required: formData.processEnableTodoNotice, message: '请创造通知模板' }]"
>
<template-generator
ref="todoNoticeChannelRef"
:fieldInfoLis="fieldInfoLis"
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeTemplate"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeTemplate"
v-model:inputValue="form.properties.configInfo.processTodoNoticeTemplate"
/>
</el-form-item>
<el-form-item label="开启抄送通知" name="processEnableCopyNotice">
<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice" v-model:checked="form.properties.configInfo.processEnableCopyNotice" />
<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice" v-model:checked="form.properties.configInfo.processEnableCopyNotice" />
</el-form-item>
<el-form-item
label="抄送通知方式"
v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
name="processCopyNoticeChannel"
:rules="[{ required: formData.processEnableCopyNotice, message: '请选择通知方式' }]"
>
<el-checkbox-group
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeChannel"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeChannel"
v-model:value="form.properties.configInfo.processCopyNoticeChannel"
:options="noticeInfoList"
/>
</el-form-item>
<el-form-item
label="抄送通知模板"
v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
name="processCopyNoticeTemplate"
:rules="[{ required: formData.processEnableCopyNotice, message: '请创造通知模板' }]"
>
<template-generator
ref="enableCopyNoticeRef"
:fieldInfoLis="fieldInfoLis"
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeTemplate"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeTemplate"
v-model:inputValue="form.properties.configInfo.processCopyNoticeTemplate"
/>
</el-form-item>
<el-form-item label="开启完成通知" name="processEnableCompleteNotice">
<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice" v-model:checked="form.properties.configInfo.processEnableCompleteNotice" />
<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice" v-model:checked="form.properties.configInfo.processEnableCompleteNotice" />
</el-form-item>
<el-form-item
label="完成通知方式"
v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
name="processCompleteNoticeChannel"
:rules="[{ required: formData.processEnableCompleteNotice, message: '请选择通知方式' }]"
>
<el-checkbox-group
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeChannel"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeChannel"
v-model:value="form.properties.configInfo.processCompleteNoticeChannel"
:options="noticeInfoList"
/>
</el-form-item>
<el-form-item
label="完成通知模板"
v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
name="processCompleteNoticeTemplate"
:rules="[{ required: formData.processEnableCompleteNotice, message: '请创造通知模板' }]"
>
<template-generator
ref="enableCompleteNoticeRef"
:fieldInfoLis="fieldInfoLis"
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeTemplate"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeTemplate"
v-model:inputValue="form.properties.configInfo.processCompleteNoticeTemplate"
/>
</el-form-item>
@@ -262,7 +262,7 @@
:rules="[{ required: true, message: '请输入开始节点表单' }]"
>
<el-input
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
v-model:value="form.properties.configInfo.processStartTaskFormUrl"
addon-before="src/views/flw/customform/"
addon-after=".vue"
@@ -271,7 +271,7 @@
>
<template #suffix>
<el-button
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
type="primary"
size="small"
@click="$refs.previewCustomFormRef.onOpen(form.properties.configInfo.processStartTaskFormUrl)"
@@ -287,7 +287,7 @@
:rules="[{ required: true, message: '请输入移动端开始节点表单' }]"
>
<el-input
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskMobileFormUrl"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskMobileFormUrl"
v-model:value="form.properties.configInfo.processStartTaskMobileFormUrl"
addon-before="pages/flw/customform/"
addon-after=".vue"
@@ -301,7 +301,7 @@
:rules="[{ required: true, message: '请输入人员节点表单' }]"
>
<el-input
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskFormUrl"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskFormUrl"
v-model:value="form.properties.configInfo.processUserTaskFormUrl"
addon-before="src/views/flw/customform/"
addon-after=".vue"
@@ -310,7 +310,7 @@
>
<template #suffix>
<el-button
v-if="form.properties.configInfo.processUserTaskFormUrl"
v-if="form&&form.properties.configInfo.processUserTaskFormUrl"
type="primary"
size="small"
@click="$refs.previewCustomFormRef.onOpen(form.properties.configInfo.processUserTaskFormUrl)"
@@ -326,7 +326,7 @@
:rules="[{ required: true, message: '请输入移动端人员节点表单' }]"
>
<el-input
v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskMobileFormUrl"
v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskMobileFormUrl"
v-model:value="form.properties.configInfo.processUserTaskMobileFormUrl"
addon-before="pages/flw/customform/"
addon-after=".vue"
@@ -338,7 +338,7 @@
<el-tab-pane key="5" tab="执行监听" force-render>
<prop-listener-info
ref="propListenerInfoRef"
:listenerValue="form.properties?.executionListenerInfo"
:listenerValue="form&&form.properties?.executionListenerInfo"
:defaultListenerList="executionListenerInfo"
:listener-value-array="executionListenerArray"
listener-type="global"
@@ -386,7 +386,7 @@
@onBack="callBack"
/>
<preview-custom-form ref="previewCustomFormRef" />
</xn-form-container>
</formContainer>
</template>
<script>
@@ -400,7 +400,8 @@
import propTag from './nodes/prop/propTag.vue'
import PropListenerInfo from '@/components/XnWorkflow/nodes/prop/propListenerInfo.vue'
import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
import { Plus } from '@element-plus/icons-vue'
import formContainer from '@/components/formContainer/index.vue'
export default {
components: {
PropListenerInfo,
@@ -410,7 +411,9 @@
posSelectorPlus,
orgSelectorPlus,
propTag,
PreviewCustomForm
PreviewCustomForm,
formContainer,
Plus
},
props: {
modelValue: { type: Object, default: () => {} },
@@ -453,7 +456,7 @@
computed: {
// 监听内部数组，选了人员相关，我们就不提示
alertShow() {
if(this.form.properties&&this.form.properties.participateInfo){
if(this.form&&this.form.properties&&this.form.properties.participateInfo){
return this.form.properties.participateInfo.length <= 0
}
}
@@ -493,15 +496,16 @@
methods: {
showDrawer() {
this.form = {}
console.log(this.childNode,"hahhahahahah28992392399293");
this.form = cloneDeep(this.childNode)
this.formData = this.form.properties.configInfo
this.formData = this.form&&this.form.properties&&this.form.properties.configInfo?this.form.properties.configInfo:{}
this.drawer = true
// 制作默认的摘要字段
this.makeAbstractTemp()
},
// 制作默认显示的摘要信息
makeAbstractTemp() {
let temp = this.form.properties.configInfo.processAbstractTemplate
let temp = this.form&&this.form.properties&&this.form.properties.configInfo.processAbstractTemplate?this.form.properties.configInfo.processAbstractTemplate:''
if (temp === '') {
if (this.fieldInfoLis.length > 0) {
let fieldInfoTemp = ''
@@ -544,8 +548,10 @@
},
// 选择参与人
selectionParticipants(type) {
let participateInfo = this.form.properties.participateInfo
console.log(type,"type=====----2--1-2-2-12-");
let participateInfo = this.form&&this.form.properties&&this.form.properties.participateInfo?this.form.properties.participateInfo:[]
let data = []
console.log(this.form,"999992929232");
if (participateInfo.length > 0) {
participateInfo.forEach((item) => {
if (item.key === type) {
@@ -590,7 +596,7 @@
},
// 获取tag标签的内容
getTagList(type) {
const participateInfo = this.form.properties&&this.form.properties.participateInfo?this.form.properties.participateInfo:[]
const participateInfo = this.form&&this.form.properties&&this.form.properties.participateInfo?this.form.properties.participateInfo:[]
if (participateInfo.length < 0) {
return undefined
} else {
@@ -635,6 +641,9 @@
traverse(data)
return result
}
},
mounted(){
this.showDrawer()
}
}
</script>

54
src/components/formContainer/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<el-dialog v-if="isModal" v-model="visibles" @cancel="cancel" v-bind="$attrs">
<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' }">
<template v-for="slotKey in slotKeys" #[slotKey]>
<slot :name="slotKey" />
</template>
</el-drawer>
</template>
<script>
import { mapState } from 'pinia'
import { globalStore } from '@/store'
const FormContainerTypeEnum = {
DRAWER: 'drawer',
MODAL: 'modal'
}
export default {
inheritAttrs: false,
props: {
visible: {
type: Boolean,
default: false,
required: true
}
},
computed: {
...mapState(globalStore, ['formStyle']),
slotKeys() {
return Object.keys(this.$slots)
},
isModal() {
return FormContainerTypeEnum.MODAL === this.formStyle
}
},
data() {
return {
visibles: ''
}
},
methods: {
cancel() {
this.$emit('close')
}
},
mounted() {
this.visibles = this.visible
}
}
</script>