优化调整创建流程逻辑

src/components/FormCreateDesigner/FcDesigner.vue

@@ -6,7 +6,7 @@
 					<template v-for="(item, index) in menuList" :key="index">
 						<div class="_fc-l-group">
 							<h4 class="_fc-l-title">{{ item.title }}</h4>
-							<draggable :group="{ name: 'default', pull: 'clone', put: false }" :sort="false" itemKey="name" :list="item.list">
+							<draggable :group="{ name: 'default', pull: 'clone', put: false }" :sort="false" item-key="name" :list="item.list">
 								<template #item="{ element }">
 									<div class="_fc-l-item">
 										<div class="_fc-l-icon">
@@ -25,8 +25,8 @@
 						<el-button size="small" @click="setJson">导入JSON</el-button>
 						<el-button size="small" type="primary" @click="showJson">生成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 type="primary" plain round size="small" @click="previewFc">
+							<i class="fc-icon icon-preview"></i> {{ t('designer.preview') }}
 						</el-button>
 						<el-popconfirm
 							:title="t('designer.clearConfirmTitle')"
@@ -42,24 +42,24 @@
 					</el-header>
 					<ElMain style="background: #f5f5f5; padding: 20px">
 						<div class="_fc-m-drag">
-							<DragForm :rule="dragForm.rule" :option="form.value" v-model:api="dragForm.api"></DragForm>
+							<DragForm v-model:api="dragForm.api" :rule="dragForm.rule" :option="form.value"></DragForm>
 						</div>
 					</ElMain>
 				</ElContainer>
-				<ElAside class="_fc-r" width="320px" v-if="!config || config.showConfig !== false">
+				<ElAside v-if="!config || config.showConfig !== false" class="_fc-r" width="320px">
 					<ElContainer style="height: 100%">
 						<el-header height="40px" class="_fc-r-tabs">
 							<div
+								v-if="!!activeRule || (config && config.showFormConfig === false)"
 								class="_fc-r-tab"
 								:class="{ active: activeTab === 'props' }"
-								v-if="!!activeRule || (config && config.showFormConfig === false)"
 								@click="activeTab = 'props'"
 							>
 								{{ t('designer.config.component') }}
 							</div>
 							<div
-								class="_fc-r-tab"
 								v-if="!config || config.showFormConfig !== false"
+								class="_fc-r-tab"
 								:class="{ active: activeTab === 'form' && !!activeRule }"
 								@click="activeTab = 'form'"
 							>
@@ -67,9 +67,9 @@
 							</div>
 						</el-header>
 						<ElMain v-show="activeTab === 'form'" v-if="!config || config.showFormConfig !== false">
-							<DragForm :rule="form.rule" :option="form.option" v-model="form.value.form" v-model:api="form.api"></DragForm>
+							<DragForm v-model="form.value.form" v-model:api="form.api" :rule="form.rule" :option="form.option"></DragForm>
 						</ElMain>
-						<ElMain v-show="activeTab === 'props'" style="padding: 0 20px" :key="activeRule ? activeRule._id : ''">
+						<ElMain v-show="activeTab === 'props'" :key="activeRule ? activeRule._id : ''" style="padding: 0 20px">
 							<div>
 								<ElDivider v-if="showBaseRule">{{ t('designer.config.rule') }}</ElDivider>
 								<DragForm
@@ -77,7 +77,7 @@
 									v-model:api="baseForm.api"
 									:rule="baseForm.rule"
 									:option="baseForm.options"
-									:modelValue="baseForm.value"
+									:model-value="baseForm.value"
 									@change="baseChange"
 								></DragForm>
 								<ElDivider>{{ t('designer.config.props') }}</ElDivider>
@@ -85,9 +85,9 @@
 									v-model:api="propsForm.api"
 									:rule="propsForm.rule"
 									:option="propsForm.options"
-									:modelValue="propsForm.value"
+									:model-value="propsForm.value"
 									@change="propChange"
-									@removeField="propRemoveField"
+									@remove-field="propRemoveField"
 								></DragForm>
 								<ElDivider v-if="showBaseRule">{{ t('designer.config.validate') }}</ElDivider>
 								<DragForm
@@ -95,8 +95,8 @@
 									v-model:api="validateForm.api"
 									:rule="validateForm.rule"
 									:option="validateForm.options"
-									:modelValue="validateForm.value"
-									@update:modelValue="validateChange"
+									:model-value="validateForm.value"
+									@update:model-value="validateChange"
 								></DragForm>
 							</div>
 						</ElMain>
@@ -104,16 +104,16 @@
 				</ElAside>
 				<!-- 预览表单 -->
 				<ElDialog v-model="preview.state" width="800px" append-to-body>
-					<ViewForm :rule="preview.rule" :option="preview.option" v-if="preview.state"></ViewForm>
+					<ViewForm v-if="preview.state" :rule="preview.rule" :option="preview.option"></ViewForm>
 				</ElDialog>
 				<!-- 生成JSON / 导入JSON -->
-				<el-dialog :title="title[type]" v-model="state" class="_fc-t-dialog">
-					<div ref="editorRef" id="editor" v-if="state"></div>
-					<span style="color: red" v-if="err">输入内容格式有误!</span>
-					<template #footer v-if="type > 2">
+				<el-dialog v-model="state" :title="title[type]" class="_fc-t-dialog">
+					<div v-if="state" id="editor" ref="editorRef"></div>
+					<span v-if="err" style="color: red">输入内容格式有误!</span>
+					<template v-if="type > 2" #footer>
 						<span slot="footer" class="dialog-footer">
-							<el-button @click="state = false" size="small">取 消</el-button>
-							<el-button type="primary" @click="onOk" size="small">确 定</el-button>
+							<el-button size="small" @click="state = false">取 消</el-button>
+							<el-button type="primary" size="small" @click="onOk">确 定</el-button>
 						</span>
 					</template>
 				</el-dialog>
@@ -741,7 +741,7 @@ export default defineComponent({
 				if (!data.activeRule || data.validateForm.api[data.activeRule._id] !== data.activeRule) return
 				data.activeRule.validate = formData.validate || []
 				data.dragForm.api.refreshValidate()
-				data.dragForm.api.nextTick(() => {
+				data.dragForm.api.nextTick()()()()()()()()()()(() => {
 					data.dragForm.api.clearValidateState(data.activeRule.__fc__.id)
 				})
 			},
@@ -785,9 +785,9 @@ export default defineComponent({
 				})
 				;['props', 'effect', 'attrs'].forEach(name => {
 					rule[name] &&
-					Object.keys(rule[name]).forEach(k => {
-						formData['formCreate' + upper(name) + '>' + k] = deepCopy(rule[name][k])
-					})
+						Object.keys(rule[name]).forEach(k => {
+							formData['formCreate' + upper(name) + '>' + k] = deepCopy(rule[name][k])
+						})
 				})
 				data.propsForm.value = formData
 
@@ -802,7 +802,7 @@ export default defineComponent({
 					}
 					data.validateForm.value = { validate: rule.validate ? [...rule.validate] : [] }
 					data.dragForm.api.refreshValidate()
-					data.dragForm.api.nextTick(() => {
+					data.dragForm.api.nextTick()()()()()()()()()()(() => {
 						data.dragForm.api.clearValidateState(rule.__fc__.id)
 					})
 				}
@@ -904,7 +904,7 @@ export default defineComponent({
 									const config = top.parent.config.config
 									const item = ruleList[config.children]
 									if (!item) return
-										;(!config.drag ? top.parent : top.parent.children[0]).children[0].children.push(methods.makeRule(item))
+									;(!config.drag ? top.parent : top.parent.children[0]).children[0].children.push(methods.makeRule(item))
 								},
 								copy: ({ self }) => {
 									const top = methods.getParent(self)
@@ -948,7 +948,7 @@ export default defineComponent({
 								const config = self.children[0].config.config
 								const item = ruleList[config.children]
 								if (!item) return
-									;(!config.drag ? self : self.children[0]).children[0].children.push(methods.makeRule(item))
+								;(!config.drag ? self : self.children[0]).children[0].children.push(methods.makeRule(item))
 							},
 							copy: ({ self }) => {
 								vm.emit('copy', self.children[0])
@@ -1001,8 +1001,8 @@ export default defineComponent({
 			onOk() {
 				if (data.err) return
 				const json = data.editor.getValue()
-        let val = JSON.parse(json)
-        if (data.type === 3) {
+				let val = JSON.parse(json)
+				if (data.type === 3) {
 					if (!Array.isArray(val)) {
 						data.err = true
 						return
@@ -1021,23 +1021,24 @@ export default defineComponent({
 			saveAsForm() {
 				data.value = methods.getRule()
 				let val = JSON.parse(JSON.stringify(data.value))
+				console.log('--------saveAsForm------', val)
 				vm.emit('export-json', val)
 			},
-      // 初始化
-      initForm(json) {
-        // todo 这里需要针对json为空做处理
-        try {
-          methods.setRule(formCreate.parseJson(json))
-        } catch (e) {
-          console.log(e);
-        }
-      }
+			// 初始化
+			initForm(json) {
+				// todo 这里需要针对json为空做处理
+				try {
+					methods.setRule(formCreate.parseJson(json))
+				} catch (e) {
+					console.log(e)
+				}
+			}
 		}
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))
 
 		defineExpose({
 			initForm: methods.initForm,
-      saveFormJson: methods.showJson
+			saveFormJson: methods.showJson
 		})
 		return {
 			editorRef,

src/components/scWorkflow/index.vue

@@ -1,12 +1,3 @@
-<!--
- * @Descripttion: 仿钉钉流程设计器
- * @version: 1.3
- * @Author: sakuya
- * @Date: 2021年9月14日08:38:35
- * @LastEditors: sakuya
- * @LastEditTime: 2022年5月14日19:43:46
--->
-
 <template>
 	<div class="sc-workflow-design">
 		<div class="box-scale">

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

@@ -4,7 +4,6 @@ import useFlowStore from '@/store/modules/flow'
 import { ref, nextTick, onMounted, computed, watch } from 'vue'
 import UseSelect from '@/components/scWorkflow/select'
 import flowDefinition from '@/api/flow/definition'
-import process from '@/api/flow/process'
 import { useRoute } from 'vue-router'
 import { flowIconPrefix } from '@/utils/index'
 const route = useRoute()
@@ -189,32 +188,9 @@ const initBaseicInfEv = item => {
 	}
 }
 
-// 更新申请信息缓存
-const updateRemoteCache = async () => {
-	try {
-		const params = flowProcessId.value ? { ...flowInfo.value, processId: flowProcessId.value } : flowInfo.value
-		const data = await process.progressCreateApi(params)
-		flowProcessId.value = data
-		Object.keys(flowInfo.value).forEach(key => {
-			flowStore.setKeysBasicInfo(key, flowInfo.value[key])
-		})
-		console.log('updateRemoteCache 实际调用接口, params = ', params, new Date().getTime())
-	} catch (e) {
-		console.log(e)
-	}
-}
-
-// 根据id获取详情
-const getCurrentProcessDetailEv = id => {
-	process.processDetailApi(id).then(res => {
-		initBaseicInfEv(res)
-	})
-}
-
 // icon图标点击保存
 const chooseIconEv = item => {
-	// flowStore.setKeysBasicInfo('processIcon', item)
-	flowInfo.value.processIcon = item
+	basicInfo.value.processIcon = item
 	visiblePopover.value = !visiblePopover.value
 }
 
@@ -233,11 +209,7 @@ watch(
 
 onMounted(() => {
 	getGroupList()
-	flowStore.$reset() // 重置缓存
-
-	if (queryObj.value.id) {
-		getCurrentProcessDetailEv(queryObj.value.id)
-	}
+	// flowStore.$reset() // 重置缓存
 })
 
 defineExpose({
@@ -249,13 +221,10 @@ defineExpose({
 <template>
 	<div class="base-info">
 		<div class="base-info-panel" style="position: relative">
-			<div style="font-size: 18px; position: absolute; right: 10px; top: 20px; z-index: 9999">
-				<el-button type="primary" @click="updateRemoteCache">下一步</el-button>
-			</div>
-			<el-form ref="formRef" :model="flowInfo" :rules="rules" label-position="top">
+			<el-form ref="formRef" :model="basicInfo" :rules="rules" label-position="top">
 				<el-form-item label="图标" prop="processIcon">
 					<el-space>
-						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${flowInfo.processIcon}`" />
+						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${basicInfo.processIcon}`" />
 					</el-space>
 
 					<el-popover placement="right-end" :width="450" trigger="focus" class="base-popover" :visible="visiblePopover">
@@ -275,13 +244,13 @@ defineExpose({
 					<el-input v-model="basicInfo.processKey" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="名称" prop="processName">
-					<el-input v-model="flowInfo.processName" clearable></el-input>
+					<el-input v-model="basicInfo.processName" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="说明" prop="remark">
-					<el-input v-model="flowInfo.remark" type="textarea" clearable></el-input>
+					<el-input v-model="basicInfo.remark" type="textarea" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="分组" prop="categoryId">
-					<el-select v-model="flowInfo.categoryId">
+					<el-select v-model="basicInfo.categoryId">
 						<el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
 					</el-select>
 				</el-form-item>

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

@@ -1,7 +1,6 @@
 <script setup name="FlowDesign">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import ScWorkflow from '@/components/scWorkflow'
-import process from '@/api/flow/process'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
 import { useRoute } from 'vue-router'
@@ -17,7 +16,7 @@ defineProps({
 })
 
 const flowStore = useFlowStore()
-const { flowProcessId, basicInfo, processForm, modelContent } = storeToRefs(flowStore)
+const { modelContent } = storeToRefs(flowStore)
 const formRef = ref()
 let form = ref({
 	// "name": "请假审批",
@@ -27,53 +26,21 @@ let form = ref({
 		nodeRoleList: []
 	}
 })
-const validate = () => {
-	return new Promise(resolve => {
-		// return new Promise((resolve, reject) => {
-		resolve(form.value)
-		/*formRef.value.validate((valid, errObj) => {
-			if (valid) {
-				console.error('valid 成功')
-				// cb?.(form.value)
-				resolve(form.value)
-				// return form.value
-				return
-			}
-			return reject([props.name, errObj])
-		})*/
-	})
-}
 
 // 接口保存审批流程
-const saveDesign = async jsonStr => {
-	try {
-		const params = {
-			...basicInfo.value,
-			processId: flowProcessId.value,
-			processForm: processForm.value,
-			modelContent: JSON.stringify(jsonStr.processConfig)
-		}
-		const res = await process.progressCreateApi(params)
-		flowProcessId.value = res
-		await process.releaseProcessApi({ id: flowProcessId.value })
-	} catch (e) {
-		console.log(e)
-	}
+const saveDesign = json => {
+	modelContent.value = JSON.stringify(form.value.processConfig)
 }
 
-// 当前是否是编辑
-const queryObj = computed(() => route.query)
-
 onMounted(() => {
-	if (queryObj.value.id) {
-		const _val = JSON.parse(modelContent.value || '{}')
+	if (modelContent.value) {
+		const _val = JSON.parse(modelContent.value)
 		form.value = Object.assign({ processConfig: _val }, {})
 	}
 })
 
 defineExpose({
 	formRef,
-	validate,
 	saveDesign
 })
 </script>

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

@@ -2,43 +2,33 @@
 import FcDesigner from '@/components/FormCreateDesigner/FcDesigner.vue'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
-import process from '@/api/flow/process'
-import { onMounted, computed, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 
 const flowStore = useFlowStore()
-const { flowProcessId, basicInfo, processForm } = storeToRefs(flowStore)
+const { processForm } = storeToRefs(flowStore)
 const designer = ref()
 const exportJsonEv = async json => {
-	console.log(json)
-	try {
-		const _json = JSON.stringify(json)
-		const params = {
-			...basicInfo.value,
-			processId: flowProcessId.value,
-			processForm: JSON.stringify(json),
-		}
-		const res = await process.progressCreateApi(params)
-		flowStore.setProcessForm(_json)
-		flowProcessId.value = res
-	} catch (e) {
-		console.log(e)
-	}
+	designer.value.saveAsForm()
+}
+const exportJson = async json => {
+	processForm.value = JSON.stringify(json)
 }
-
-// 当前是否是编辑
-const queryObj = computed(() => route.query)
 
 onMounted(() => {
-	if (queryObj.value.id) {
+	if (processForm.value) {
 		designer.value.initForm(processForm.value || [])
 	}
 })
+
+defineExpose({
+	exportJsonEv
+})
 </script>
 
 <template>
-	<fc-designer ref="designer" @export-json="exportJsonEv" />
+	<fc-designer ref="designer" @export-json="exportJson" />
 </template>
 
 <style scoped lang="scss"></style>

src/views/flow/create/index.vue

@@ -1,12 +1,14 @@
 <template>
 	<div class="create-approval">
 		<div class="create-approval-header flex flex_align-center">
-			<div class="create-approval-header-back" v-if="false">
-				<el-icon :size="18"><ArrowLeft /></el-icon>
+			<div v-if="false" class="create-approval-header-back">
+				<el-icon :size="18">
+					<ArrowLeft />
+				</el-icon>
 			</div>
 			<div class="create-approval-header-left-zh">
 				<div class="create-approval-header-name">{{ flowName }}</div>
-				<div class="create-approval-header-time" v-if="false">最近保存：6 分钟前</div>
+				<div v-if="false" class="create-approval-header-time">最近保存：6 分钟前</div>
 			</div>
 			<div class="create-approval-header-tab-list">
 				<div
@@ -39,6 +41,7 @@ import ExtendSetTab from './components/ExtendSet.vue'
 import FlowDesignTab from './components/FlowDesign.vue'
 import FormDesignTab from './components/FormDesign.vue'
 import { useRoute } from 'vue-router'
+
 const route = useRoute()
 const flowStore = useFlowStore()
 const { flowName, basicInfo } = storeToRefs(flowStore)
@@ -85,6 +88,11 @@ const submitHandler = () => {
 
 const activeComponent = item => {
 	console.log('====processKey====', basicInfo)
+	if (activeName.value === '表单设计') {
+		dyncComponent.value.exportJsonEv()
+	} else if (activeName.value === '流程设计') {
+		dyncComponent.value.saveDesign()
+	}
 	activeName.value = item.label
 }