优化创建流程

src/components/scWorkflow/nodes/approver.vue

@@ -125,7 +125,7 @@
 
 						<!-- 表单设置 -->
 						<div v-show="radio1 == '2'">
-							<el-table ref="multipleTableRef" :data="form.tableData" style="width: 100%">
+							<el-table ref="multipleTableRef" :data="form.extendConfig.formConfig" style="width: 100%">
 								<el-table-column property="title" label="表单字段" align="center" />
 								<el-table-column align="center">
 									<template #header>操作权限</template>
@@ -207,11 +207,13 @@ export default {
 		show() {
 			const _initOperateTable = JSON.parse(this.processForm)
 			const initOperateTable = _initOperateTable.map(item => {
-				item.opera = '0'
-				return item
+				return { title: item.title, opera: '0' }
 			})
 			this.form = JSON.parse(JSON.stringify(this.nodeConfig))
-			this.form.tableData = initOperateTable
+			console.log('===this.form===', this.form)
+			if (!this.form.extendConfig) {
+				this.form.extendConfig = { formConfig: initOperateTable }
+			}
 			this.drawer = true
 		},
 		editTitle() {

src/store/modules/flow.ts

@@ -1,34 +1,5 @@
 import { defineStore } from 'pinia'
 
-interface BasicInfoIndex {
-	[key: string]: any
-}
-
-const basicInfo: BasicInfoIndex = {
-	processKey: '', // 唯一标识
-	processName: '', // 流程定义名称
-	processIcon: 'approval', // 流程图标
-	categoryId: '', // 流程组分类ID
-	remark: '', // 备注说明
-	createTime: '', // 创建时间
-	useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
-	// processActorList: [
-	// 	{
-	// 		actorId: 0, // 参与者ID
-	// 		actorName: '', // 参与者
-	// 		actorType: 0 // 参与者类型 0，用户 1，部门 2，用户组
-	// 	}
-	// ], // 流程参与者，当使用范围为指定人员时候设置
-	processPermissionList: [
-		{
-			userId: 0, // 用户ID
-			userName: '', // 用户名
-			operateApproval: 0, // 允许编辑/停用/删除审批 0，否 1，
-			operateOwner: 0, // 允许添加/移除审批负责人 0，否 1，是
-			operateData: 0 // 允许审批数据查询与操作 0，否 1，是
-		}
-	] // 流程定义权限
-}
 // 审核条目
 export const useFlowStore = defineStore({
 	id: 'flow',
@@ -36,8 +7,31 @@ export const useFlowStore = defineStore({
 		return {
 			storeInfoName: '',
 			flowProcessId: '',
-			flowName: '', //头部展示的流程名称
-			basicInfo,
+
+			processKey: '', // 唯一标识
+			processName: '', // 流程定义名称
+			processIcon: 'approval', // 流程图标
+			categoryId: '', // 流程组分类ID
+			remark: '', // 备注说明
+			createTime: '', // 创建时间
+			useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
+			// processActorList: [
+			// 	{
+			// 		actorId: 0, // 参与者ID
+			// 		actorName: '', // 参与者
+			// 		actorType: 0 // 参与者类型 0，用户 1，部门 2，用户组
+			// 	}
+			// ], // 流程参与者，当使用范围为指定人员时候设置
+			processPermissionList: [
+				{
+					userId: 0, // 用户ID
+					userName: '', // 用户名
+					operateApproval: 0, // 允许编辑/停用/删除审批 0，否 1，
+					operateOwner: 0, // 允许添加/移除审批负责人 0，否 1，是
+					operateData: 0 // 允许审批数据查询与操作 0，否 1，是
+				}
+			], // 流程定义权限
+
 			cacheSwitch: false, // 缓存开关
 			modelContent: '', // 流程模型定义JSON内容
 			processForm: '', // 流程定义表单
@@ -58,14 +52,6 @@ export const useFlowStore = defineStore({
 			console.log('init materialInfoStore')
 			this.storeInfoName = title || '流程审核'
 		},
-		// 基本信息
-		setKeysBasicInfo(key: string, value: any) {
-			if (key === null) {
-				this.basicInfo = value
-				return
-			}
-			this.basicInfo[key] = value
-		},
 		// 表单信息
 		setProcessForm(value: any) {
 			this.processForm = value

src/views/flow/create/components/BasicInfo.vue

@@ -8,7 +8,7 @@ import { useRoute } from 'vue-router'
 import { flowIconPrefix } from '@/utils/index'
 const route = useRoute()
 const flowStore = useFlowStore()
-const { flowName, flowProcessId, basicInfo } = storeToRefs(flowStore)
+const { flowName, flowProcessId, processIcon, processKey, processName, remark, categoryId } = storeToRefs(flowStore)
 // 缓存 end
 const visiblePopover = ref(false)
 const selectVisible = ref(false)
@@ -190,7 +190,7 @@ const initBaseicInfEv = item => {
 
 // icon图标点击保存
 const chooseIconEv = item => {
-	basicInfo.value.processIcon = item
+	value.processIcon = item
 	visiblePopover.value = !visiblePopover.value
 }
 
@@ -221,10 +221,10 @@ defineExpose({
 <template>
 	<div class="base-info">
 		<div class="base-info-panel" style="position: relative">
-			<el-form ref="formRef" :model="basicInfo" :rules="rules" label-position="top">
+			<el-form ref="formRef" :rules="rules" label-position="top">
 				<el-form-item label="图标" prop="processIcon">
 					<el-space>
-						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${basicInfo.processIcon}`" />
+						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${processIcon}`" />
 					</el-space>
 
 					<el-popover placement="right-end" :width="450" trigger="focus" class="base-popover" :visible="visiblePopover">
@@ -241,16 +241,16 @@ defineExpose({
 					</el-popover>
 				</el-form-item>
 				<el-form-item label="唯一标识 key" prop="processKey">
-					<el-input v-model="basicInfo.processKey" clearable></el-input>
+					<el-input v-model="processKey" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="名称" prop="processName">
-					<el-input v-model="basicInfo.processName" clearable></el-input>
+					<el-input v-model="processName" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="说明" prop="remark">
-					<el-input v-model="basicInfo.remark" type="textarea" clearable></el-input>
+					<el-input v-model="remark" type="textarea" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="分组" prop="categoryId">
-					<el-select v-model="basicInfo.categoryId">
+					<el-select v-model="categoryId">
 						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
 					</el-select>
 				</el-form-item>

src/views/flow/create/components/FlowDesign.vue

@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue'
 import ScWorkflow from '@/components/scWorkflow'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
-import { useRoute } from 'vue-router'
-const route = useRoute()
 
 defineProps({
 	label: {
@@ -48,10 +46,3 @@ defineExpose({
 <template>
 	<ScWorkflow v-model="form.processConfig"></ScWorkflow>
 </template>
-
-<style scoped>
-.flow-design-wrap {
-	background: #f6f8f9;
-	margin-bottom: 10px;
-}
-</style>

src/views/flow/create/components/FormDesign.vue

@@ -3,8 +3,6 @@ import FcDesigner from '@/components/FormCreateDesigner/FcDesigner.vue'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-const route = useRoute()
 
 const flowStore = useFlowStore()
 const { processForm } = storeToRefs(flowStore)

src/views/flow/create/index.vue

@@ -7,7 +7,7 @@
 				</el-icon>
 			</div>
 			<div class="create-approval-header-left-zh">
-				<div class="create-approval-header-name">{{ flowName }}</div>
+				<div class="create-approval-header-name">{{ processName }}</div>
 				<div v-if="false" class="create-approval-header-time">最近保存：6 分钟前</div>
 			</div>
 			<div class="create-approval-header-tab-list">
@@ -45,7 +45,7 @@ import process from '@/api/flow/process'
 
 const route = useRoute()
 const flowStore = useFlowStore()
-const { flowName, flowProcessId, basicInfo, modelContent, processForm, processSetting } = storeToRefs(flowStore)
+const { flowProcessId, processKey, processName, modelContent, processForm, processSetting } = storeToRefs(flowStore)
 
 const dyncComponent = ref() // 实例化子组件
 const componentsArr = [
@@ -89,9 +89,9 @@ const submitHandler = async () => {
 		modelContent: modelContent.value,
 		processSetting: processSetting.value
 	}
+	// console.log('---r-e-s----', params)
 	const res = await process.progressCreateApi(params)
 	console.log('---r-e-s----', res)
-	alert('保存成功')
 }
 
 // 切换选项卡
@@ -111,6 +111,20 @@ const activeComponent = item => {
 const currentComponent = computed(() => {
 	return componentsArr.find(item => item.label === activeName.value)?.component
 })
+
+const queryObj = computed(() => route.query)
+const getCurrentProcessDetailEv = () => {
+	process.processDetailApi(queryObj.value.id).then(res => {
+		console.log('===res===res====res==', res)
+		processKey.value = res.processKey
+		processName.value = res.processName
+		modelContent.value = res.modelContent
+		processForm.value = res.processForm
+		flowStore.setProcessForm(processForm)
+	})
+}
+
+getCurrentProcessDetailEv()
 </script>
 
 <style scoped lang="scss">