feat: 创建流程 - 表单设计 50%

src/components/FormCreateDesigner/FcDesigner.vue

@@ -170,8 +170,9 @@
 				<ElContainer class="_fc-m">
 					<el-header class="_fc-m-tools" height="45">
 						<slot name="handle"></slot>
-						<el-button size="small" @click="setJson"> 导入JSON</el-button>
-						<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
+						<el-button size="small" @click="setJson">导入JSON</el-button>
+						<el-button size="small" type="primary" @click="showJson" v-if="false">生成JSON</el-button>
+						<el-button size="small" type="primary" @click="saveAsForm">暂存表单</el-button>
 						<el-button type="primary" plain round size="small" @click="previewFc"
 							><i class="fc-icon icon-preview"></i> {{ t('designer.preview') }}
 						</el-button>
@@ -1163,6 +1164,12 @@ export default defineComponent({
 					methods.setOption(val)
 				}
 				data.state = false
+			},
+			// 暂存
+			saveAsForm() {
+				data.value = methods.getRule()
+				let val = JSON.parse(JSON.stringify(data.value))
+				vm.emit('export-json', val)
 			}
 		}
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))

src/store/modules/flow.ts

@@ -6,6 +6,7 @@ export const useFlowStore = defineStore({
 	state: () => {
 		return {
 			storeInfoName: '',
+			flowProcessId: '', // 流程定义ID
 			flowName: '流程名称', // 流程名称
 			cacheSwitch: false, // 缓存开关
 			modelContent: '', // 流程模型定义JSON内容

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

@@ -8,7 +8,7 @@ import process from '@/api/flow/process'
 // 缓存 start
 import { EVENT_ENUM, EVENT_BUS, cacheTriggerFunc } from '@/utils/cacheHelper'
 const flowStore = useFlowStore()
-const { flowName } = storeToRefs(flowStore)
+const { flowName, flowProcessId } = storeToRefs(flowStore)
 const cacheLoading = ref(false)
 const cacheLoadingNum = ref(600)
 const cacheLoadingFr = 1000
@@ -143,7 +143,7 @@ const updateRemoteCache = async () => {
 	try {
 		const params = processId.value ? { ...flowInfo.value, processId: processId.value } : flowInfo.value
 		const res = await process.progressCreateApi(params)
-		processId.value = res
+		flowProcessId.value = processId.value = res
 		console.log('updateRemoteCache 实际调用接口, params = ', params, new Date().getTime())
 	} catch (e) {
 		console.log(e)

src/views/flow/create/index.vue

@@ -21,6 +21,7 @@
 				</div>
 			</div>
 			<div class="create-approval-header-right">
+				<el-button @click="saveHandler" v-if="false">暂存</el-button>
 				<el-button type="primary" @click="submitHandler">发布</el-button>
 			</div>
 		</div>
@@ -38,9 +39,10 @@ import BasicInfoTab from './components/BasicInfo.vue'
 import ExtendSetTab from './components/ExtendSet.vue'
 import FlowDesignTab from './components/FlowDesign.vue'
 import FormDesignTab from './components/FormDesign.vue'
+import {ElMessage} from "element-plus";
 
 const flowStore = useFlowStore()
-const { flowName } = storeToRefs(flowStore)
+const { flowName, flowProcessId } = storeToRefs(flowStore)
 const componentsArr = [
 	{
 		component: BasicInfoTab,
@@ -71,7 +73,20 @@ const activeName = ref('基础信息')
 
 const submitHandler = () => {}
 
+const saveHandler = () => {
+	// 基础信息
+	// 表单设计
+	// 流程设计
+	// 扩展设置
+}
+
 const activeComponent = item => {
+	if (!flowProcessId.value) {
+		return ElMessage({
+			message: '请先保存基础信息',
+			type: 'error'
+		})
+	}
 	activeName.value = item.label
 }