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

171
src/views/system/workflow/model/configSteps.vue
View File

@@ -1,43 +1,47 @@
<template>
<div>
<el-card class='steps-card' :bordered='false'>
<el-row class='xn-row'>
<el-col :span='6'></el-col>
<el-col :span='12'>
<el-steps :current='current'>
<el-step v-for='item in steps' :key='item.title' :title='item.title'>
<el-card class="steps-card" :bordered="false">
<el-row class="xn-row">
<!-- <el-col :span="6"></el-col> -->
<el-col :span="16">
<el-steps :current="current">
<el-step v-for="item in steps" :key="item.title" :title="item.title">
<template #icon>
<el-icon color='#409efc' class='no-inherit' v-if="item.title === '表单设计'">
<el-icon color="#409efc" class="no-inherit" v-if="item.title === '表单设计'">
<SetUp />
</el-icon>
<el-icon color='#409efc' class='no-inherit' v-if="item.title === '模型设计'">
<el-icon color="#409efc" class="no-inherit" v-if="item.title === '模型设计'">
<PieChart />
</el-icon>
<el-icon color='#409efc' class='no-inherit' v-if="item.title === '完成'">
<el-icon color="#409efc" class="no-inherit" v-if="item.title === '完成'">
<Select />
</el-icon>
</template>
</el-step>
</el-steps>
</el-col>
<el-col :span='6'>
<div style='float: right'>
<el-button :disabled='current !== 1' style='margin-left: 8px' @click='prev'>
<el-col :span="8">
<div style="float: right; padding-top: 10px">
<el-button :disabled="current !== 1" style="margin-left: 8px" @click="prev">
<template #icon>
<Back />
</template>
后退
</el-button>
<el-button :disabled="recordData.formType === 'DESIGN' ? current === 2 : current === 1"
type='primary' style='margin-left: 8px' @click='next'>
<el-button
:disabled="recordData.formType === 'DESIGN' ? current === 2 : current === 1"
type="primary"
style="margin-left: 8px"
@click="next"
>
<template #icon>
<Right />
</template>
继续
</el-button>
<el-button type='primary' danger ghost style='margin-left: 8px' @click="emit('previousPage')">
<el-button type="primary" danger ghost style="margin-left: 8px" @click="emit('previousPage')">
<template #icon>
<Close />
</template>
@@ -47,28 +51,32 @@
</el-row>
</el-card>
<div v-if='current === 0'>
<!-- <form-design ref="formDesign" v-if="recordData.formType === 'DESIGN'" :form-value="workFlowParame.formValue" />-->
<div v-if="current === 0">
<form-design
ref="formDesign"
v-if="recordData.formType === 'DESIGN'"
:form-value="workFlowParame.formValue"
/>
<!-- <model-design ref="modelDesign" v-else />-->
<model-design ref='modelDesign' />
<model-design ref="modelDesign" />
</div>
<div v-if='current === 1'>
<model-design ref='modelDesign' v-if="recordData.formType === 'DESIGN'" />
<div v-if="current === 1">
<model-design ref="modelDesign" v-if="recordData.formType === 'DESIGN'" />
<el-card v-else>
<el-result status='success' title='操作成功' sub-title='此时您可以一键部署此流程啦'>
<el-result status="success" title="操作成功" sub-title="此时您可以一键部署此流程啦">
<template #extra>
<el-space size='middle'>
<el-button v-if='current > 0' style='margin-left: 8px' @click='prev'>
<el-space size="middle">
<el-button v-if="current > 0" style="margin-left: 8px" @click="prev">
<template #icon>
<Back />
</template>
后退
</el-button>
<el-button
v-if='current == steps.length - 1'
type='primary'
:loading='submitLoading'
@click='seveDeployment'
v-if="current == steps.length - 1"
type="primary"
:loading="submitLoading"
@click="seveDeployment"
>
<template #icon>
<Tools />
@@ -80,22 +88,22 @@
</el-result>
</el-card>
</div>
<div v-if='current === 2'>
<div v-if="current === 2">
<el-card>
<el-result status='success' title='操作成功' sub-title='此时您可以一键部署此流程啦'>
<el-result status="success" title="操作成功" sub-title="此时您可以一键部署此流程啦">
<template #extra>
<el-space size='middle'>
<el-button v-if='current > 0' style='margin-left: 8px' @click='prev'>
<el-space size="middle">
<el-button v-if="current > 0" style="margin-left: 8px" @click="prev">
<template #icon>
<Back />
</template>
后退
</el-button>
<el-button
v-if='current == steps.length - 1'
type='primary'
:loading='submitLoading'
@click='seveDeployment'
v-if="current == steps.length - 1"
type="primary"
:loading="submitLoading"
@click="seveDeployment"
>
<template #icon>
<Tools />
@@ -114,14 +122,16 @@ import { ElMessage } from 'element-plus'
import { Plus, SetUp, Select, PieChart, Back, Right, Close, Tools } from '@element-plus/icons-vue'
import { defineComponent, nextTick, ref } from 'vue'
import ModelDesign from './modelDesign.vue'
// import FormDesign from './formDesign.vue'
import tool from '@/utils/tool'
import modelApi from '@/api/flw/modelApi'
import FormDesign from './formDesign.vue'
import config from '@/components/XnWorkflow/nodes/config/config'
import { cloneDeep } from 'lodash-es'
const emit = defineEmits({ previousPage: null })
const current = ref(0)
// const formDesign = ref(null)
const formDesign = ref(null)
const modelDesign = ref(null)
const recordData = ref({})
@@ -144,9 +154,10 @@ const workFlowParame = {
modelValue: cloneDeep(config.nodeModel.node)
}
// 打开这个界面
const configSteps = (record) => {
const configSteps = record => {
// 全局赋值
recordData.value = record
console.log(record, '------')
workFlowParame.formValue = record.formJson == null ? false : JSON.parse(record.formJson)
if (record.processJson == null) {
// 给模型设计器基础外壳给值
@@ -174,26 +185,34 @@ const configSteps = (record) => {
// 装回全局模型中
workFlowParame.modelValue.childNode = startEventNode
//这里是流程需要的数据
console.log(workFlowParame.modelValue.childNode.childNode, '打印组装数据')
} else {
workFlowParame.modelValue = JSON.parse(record.processJson)
}
console.log('给流程设计器给值' + 22222)
// 判断表单类型
if (record.formType === 'DESIGN') {
// 判断如果是设计表单，那么第一步加入表单设计器
steps.value.unshift({
title: '表单设计',
content: '表单设计'
})
nextTick(() => {
// 给表单设计器给值，表单value，table数据结构
// formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
})
} else {
// 给流程设计器给值
nextTick(() => {
modelDesign.value.setValue(workFlowParame, recordData.value)
})
}
console.log(record.formType, '打印表单类型')
// if (record.formType === 'DESIGN') {
// // 判断如果是设计表单，那么第一步加入表单设计器
// steps.value.unshift({
// title: '表单设计',
// content: '表单设计'
// })
// console.log('给流程设计器给值'+333333);
// nextTick(() => {
// // 给表单设计器给值，表单value，table数据结构
// formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
// })
// } else {
// 给流程设计器给值
console.log('给流程设计器给值' + 22222)
nextTick(() => {
// modelDesign.value.setValue(workFlowParame, recordData.value)
console.log( recordData.value,"9999999999打印recordData");
modelDesign.value.setValue(workFlowParame, recordData.value)
})
// }
}
// 下一步
const next = () => {
@@ -201,7 +220,7 @@ const next = () => {
// 判断是哪一步
if (current.value === 1) {
if (recordData.value.formType === 'DESIGN') {
// formDesignNext()
formDesignNext()
} else {
modelDesignNext()
}
@@ -210,19 +229,19 @@ const next = () => {
modelDesignNext()
}
}
// const formDesignNext = () => {
// const formValue = formDesign.value.getValue()
// if (!formDataVerification(formValue)) {
// current.value--
// return
// }
// workFlowParame.formValue = formValue
// nextTick(() => {
// modelDesign.value.setValue(workFlowParame, recordData.value)
// // 给流程设计器表单的字段
// modelDesign.value.setFormFieldListValue(workFlowParame.formValue.list)
// })
// }
const formDesignNext = () => {
const formValue = formDesign.value.getValue()
if (!formDataVerification(formValue)) {
current.value--
return
}
workFlowParame.formValue = formValue
nextTick(() => {
modelDesign.value.setValue(workFlowParame, recordData.value)
// 给流程设计器表单的字段
modelDesign.value.setFormFieldListValue(workFlowParame.formValue.list)
})
}
const modelDesignNext = () => {
workFlowParame.modelValue = modelDesign.value.getValue()
// 这里完成之后，需要调用保存接口，传给后端
@@ -234,8 +253,7 @@ const modelDesignNext = () => {
}
recordData.value.processJson = JSON.stringify(workFlowParame.modelValue)
// 保存进去
modelApi.submitForm(recordData.value, recordData.value.id).then(() => {
})
modelApi.submitForm(recordData.value, recordData.value.id).then(() => {})
}
// 上一步
const prev = () => {
@@ -243,7 +261,7 @@ const prev = () => {
if (current.value === 0) {
nextTick(() => {
if (recordData.value.formType === 'DESIGN') {
// formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
} else {
modelDesign.value.setValue(workFlowParame, recordData.value)
modelDesign.value.setFormFieldListValue(workFlowParame.formValue.list)
@@ -278,10 +296,10 @@ const seveDeployment = () => {
})
}
// 表单设计器选择好的内容校验
const formDataVerification = (formValue) => {
const formDataVerification = formValue => {
let error = 0
// 判断是否包含动态表格batch
if (formValue.list.length > 0) {
if (formValue && formValue.list && formValue.list.length > 0) {
for (let i = 0; i < formValue.list.length; i++) {
const items = formValue.list[i]
// 处理判断动态表格中
@@ -328,7 +346,7 @@ const formDataVerification = (formValue) => {
return error === 0
}
// 模型整体校验
const modelDataVerification = (modelValue) => {
const modelDataVerification = modelValue => {
if (JSON.stringify(modelValue).indexOf('dataLegal":false') !== -1) {
ElMessage.warning('流程未配置完成')
return false
@@ -345,11 +363,12 @@ defineComponent({
</script>
<style scoped>
.steps-card {
margin-top: -12px;
/* margin-top: -12px;
margin-left: -12px;
margin-right: -12px;
margin-bottom: 10px;
padding-top: -10px;
padding-top: -10px; */
/* width: 100%; */
}
.steps-action {

92
src/views/system/workflow/model/formDesign.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<el-card :bordered="false">
<SnowyFormDesign
ref="formDesign"
:show-head="false"
:toolbars="['preview', 'reset', 'importJson', 'exportJson']"
show-toolbars-text
:database-config="formTableValue"
:fields="formDesignFields"
:dictData="dictData"
/>
</el-card>
</template>
<script setup>
import tool from '@/utils/tool'
// import { nextTick } from 'process'
// import modelApi from '@/api/flw/modelApi'
import { nextTick } from 'vue'
import SnowyFormDesignCom from 'snowy-form-design'
const dictData = tool.data.get('DICT_TYPE_TREE_DATA')
import { ref } from 'vue'
const token = tool.data.get('TOKEN')
// const apiUrl = tool.data.get('SNOWY_SYS_BASE_CONFIG').SNOWY_SYS_API_URL + '/api/webapp/dev/file/uploadDynamicReturnUrl'
const formDesign = ref()
const formTableValue = ref([])
// 表单设计器可以拖的组件
const formDesignFields = [
'input',
'textarea',
'number',
'select',
'checkbox',
'radio',
'date',
'time',
'rate',
'slider',
'uploadFile',
'uploadImg',
'treeSelect',
'batch',
'editor',
'switch',
'alert',
'text',
'html',
'divider',
'card',
'grid',
'table',
'xnUserSelector',
'xnInput'
]
// SnowyFormDesignCom.setConfig({
// uploadFile: apiUrl, // 上传文件地址
// uploadImage: apiUrl, //apiUrl, // 上传图片地址
// uploadFileName: 'file', // 上传文件name
// uploadImageName: 'file', // 上传图片name
// uploadFileData: { data: 'snowy' }, // 上传文件额外参数
// uploadImageData: { data: 'snowy' }, // 上传图片额外参数
// uploadFileHeaders: { data: 'snowy' }, // 上传文件请求头部
// getOrgTree: (param) => {
// return modelApi.modelOrgTreeSelector(param).then((data) => {
// return Promise.resolve(data)
// })
// },
// getUserPage: (param) => {
// return modelApi.modelUserSelector(param).then((data) => {
// return Promise.resolve(data)
// })
// }
// })
const setValue = (value, tableValue) => {
formTableValue.value = tableValue
console.log(formTableValue.value,"888777783288382382");
// formDesign.value.handleSetData(value)
}
const getValue = () => {
console.log(formDesign.value);
if(formDesign.value){
nextTick(()=>{
return formDesign.value.getValue()
})
}
}
defineExpose({
getValue,
setValue
})
</script>

329
src/views/system/workflow/model/index.vue
View File

@@ -1,36 +1,28 @@
<!--流程模型表单页面-->
<template>
<div class='default-main'>
<TableHeader>
<template v-slot:select>
<el-form-item label='模型名称'>
<el-input
v-model='tableStore.table.params.searchKey'
clearable
/>
</el-form-item>
<el-form-item label='流程类别'>
<el-select v-model='tableStore.table.params.category' clearable>
<el-option
v-for='item in categoryList'
:key='item.id'
:label='item.name'
:value='item.code'
/>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type='primary' class='ml10' :icon='Plus' @click='add'>新增</el-button>
</template>
</TableHeader>
<!--表格-->
<Table ref='tableRef' isGroup></Table>
<model-popup ref='modelPopup' />
</div>
<div class="default-main">
<TableHeader v-if="showTable">
<template v-slot:select>
<el-form-item label="模型名称">
<el-input v-model="tableStore.table.params.searchKey" clearable />
</el-form-item>
<el-form-item label="流程类别">
<el-select v-model="tableStore.table.params.category" clearable>
<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" class="ml10" :icon="Plus" @click="add">新增</el-button>
</template>
</TableHeader>
<!--表格-->
<Table v-if="showTable" ref="tableRef" isGroup></Table>
<model-popup ref="modelPopup" />
<ConfigSteps v-if="!showTable" ref="configStepsRef" @previousPage="previousPage" />
</div>
</template>
<script lang='ts' setup>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import TableHeader from '@/components/table/header/index.vue'
import Table from '@/components/table/index.vue'
@@ -41,151 +33,170 @@ import { ElMessage } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import { useRouter } from 'vue-router'
import ModelPopup from '@/views/system/workflow/model/modelPopup.vue'
import ConfigSteps from './configSteps.vue'
const configStepsRef = ref(null)
const showTable = ref(true)
const { push } = useRouter()
const dictData = useDictData()
const categoryList = dictData.getBasicData('flow_category')
const modelPopup = ref()
const tableStore = new TableStore({
url: '/workflow-boot/flw/model/page',
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 80 },
{ title: '流程名称', minWidth: '160', field: 'name' },
{
title: '流程分类', minWidth: '160', field: 'category',
formatter: (row: any) => {
return categoryList.filter(item => item.code === row.cellValue)[0].name
}
},
{
title: '模型版本', minWidth: '120', field: 'versionCode', type: 'html',
formatter: (obj: any) => {
const val = obj.row.versionCode
if (val) {
return `<a href='javascript:void(0);' style='color: #409EFF;text-decoration: none'>V${val}</a>`
} else {
return ''
url: '/workflow-boot/flw/model/page',
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 80 },
{ title: '流程名称', minWidth: '160', field: 'name' },
{
title: '流程分类',
minWidth: '160',
field: 'category',
formatter: (row: any) => {
return categoryList.filter(item => item.code === row.cellValue)[0].name
}
},
{
title: '模型版本',
minWidth: '120',
field: 'versionCode',
type: 'html',
formatter: (obj: any) => {
const val = obj.row.versionCode
if (val) {
return `<a href='javascript:void(0);' style='color: #409EFF;text-decoration: none'>V${val}</a>`
} else {
return ''
}
}
},
{
title: '表单类型',
minWidth: '160',
field: 'formType',
formatter: (obj: any) => {
const val = obj.row.formType
if (val == 'DESIGN') {
return '系统表单'
} else {
return ''
}
}
},
{ title: '排序码', minWidth: '160', field: 'sortCode' },
{ title: '状态', minWidth: '160', field: 'modelStatus' },
{
title: '操作',
align: 'center',
render: 'buttons',
minWidth: '230',
fixed: 'right',
buttons: [
{
name: 'view',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
modelPopup.value.open('修改模型', row)
}
},
{
name: 'update',
title: '设计',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
go(row)
}
},
{
name: 'deploy',
title: '部署',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
push(`/admin/form/formDesigner?id=${row.id}`)
}
},
{
name: 'deploy',
title: '预览流程',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
push(`/admin/form/formDesigner?id=${row.id}`)
}
},
{
name: 'deploy',
title: '历史版本',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
push(`/admin/form/formDesigner?id=${row.id}`)
}
},
{
name: 'update',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗？'
},
click: row => {
deleteWFForm(row.id).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
}
},
{
title: '表单类型', minWidth: '160', field: 'formType',
formatter: (obj: any) => {
const val = obj.row.formType
if (val == 'DESIGN') {
return '系统表单'
} else {
return ''
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
},
{ title: '排序码', minWidth: '160', field: 'sortCode' },
{ title: '状态', minWidth: '160', field: 'modelStatus' },
{
title: '操作',
align: 'center',
render: 'buttons',
minWidth: '230',
fixed: 'right',
buttons: [
{
name: 'view',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
modelPopup.value.open('修改模型', row)
}
},
{
name: 'update',
title: '设计',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
push(`/admin/model/configSteps?id=${row.id}`)
}
},
{
name: 'deploy',
title: '部署',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
push(`/admin/form/formDesigner?id=${row.id}`)
}
},
{
name: 'deploy',
title: '预览流程',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
push(`/admin/form/formDesigner?id=${row.id}`)
}
},
{
name: 'deploy',
title: '历史版本',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
push(`/admin/form/formDesigner?id=${row.id}`)
}
},
{
name: 'update',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗？'
},
click: row => {
deleteWFForm(row.id).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
//新增表单
const add = () => {
modelPopup.value.open('新增模型')
modelPopup.value.open('新增模型')
}
const tableRef = ref(null)
// config配置界面回调
const previousPage = () => {
showTable.value = true
// nextTick(() => {
// tableRef.value.refresh()
// })
}
const go = (row: TableRow) => {
showTable.value = false
nextTick(() => {
configStepsRef.value.configSteps(row)
console.log(row, '90999999')
})
// push(`/admin/model/configSteps?id=${row.id}`)
}
tableStore.table.params.searchKey = ''
tableStore.table.params.category = ''
provide('tableStore', tableStore)
onMounted(() => {
// 加载数据
tableStore.index()
// 加载数据
tableStore.index()
})
</script>
<style scoped>
</style>
<style scoped></style>

14
src/views/system/workflow/model/modelDesign.vue
View File

@@ -1,5 +1,7 @@
<template>
<el-card>
<!-- 引入workflow组件的位置{{ modelDesignData }}222 -->
<!-- {{ modelDesignData.modelValue }} -->
<Workflow
v-model="modelDesignData.modelValue"
:form-field-list-value="formFieldListValue"
@@ -16,6 +18,7 @@
<script setup name="modelDesign">
import Workflow from '@/components/XnWorkflow/index.vue'
import { ref } from 'vue'
//选择机构角色职位用户
// import modelApi from '@/api/flw/modelApi'
// import userCenterApi from '@/api/sys/userCenterApi'
// import templatePrintApi from '@/api/flw/templatePrintApi'
@@ -53,7 +56,8 @@
// 回显值
const setValue = (value, record) => {
modelDesignData.value = value
console.log('获取回显值'+value,record,"+++++++++++--------");
modelDesignData.value = JSON.parse(JSON.stringify(value))?JSON.parse(JSON.stringify(value)):{};
recordData.value = record
// 获取序列号列表
flwTemplateSnSelector().then((data) => {
@@ -76,7 +80,7 @@
})
// 获取执行监听器数据
executionListenerSelector().then((data) => {
executionListenerArray.value = data.map((item) => {
executionListenerArray.value = data.data.map((item) => {
return {
label: item,
value: item
@@ -85,7 +89,8 @@
})
// 获取自定义事件执行监听器选择器
executionListenerSelectorForCustomEvent().then((data) => {
executionListenerSelectorForCustomEventArray.value = data.map((item) => {
console.log(data,"00000000000");
executionListenerSelectorForCustomEventArray.value = data.data.map((item) => {
return {
label: item,
value: item
@@ -94,7 +99,7 @@
})
// 获取任务监听器数据
taskListenerSelector().then((data) => {
taskListenerArray.value = data.map((item) => {
taskListenerArray.value = data.data.map((item) => {
return {
label: item,
value: item
@@ -156,6 +161,7 @@
})
}
}
// 抛出钩子
defineExpose({
getValue,