feat: 流程定义回显 40%

README.md

@@ -44,4 +44,7 @@
 1 流程组 - ui调整 菜单
 	a. 关键词搜索 无效 [后端排查]
 	b. 流程组里面的流程实例排序 还未做 
-	c
+	c. 创建流程时,基本信息中的说明字段没有在详情接口中返回
+```angular2html
+
+```

src/components/FormCreateDesigner/FcDesigner.vue

@@ -1,151 +1,3 @@
-<style>
-._fc-designer {
-	height: 100%;
-	min-height: 500px;
-	overflow: hidden;
-	cursor: default;
-	position: relative;
-}
-
-._fc-designer > .el-main {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	padding: 0px;
-}
-
-._fc-m .form-create ._fc-l-item {
-	background: #2e73ff;
-	width: 100%;
-	height: 10px;
-	overflow: hidden;
-	transition: all 0.3s ease;
-}
-
-._fc-l,
-._fc-m,
-._fc-r {
-	border-top: 1px solid #ececec;
-	box-sizing: border-box;
-}
-
-._fc-l-group {
-	padding: 0 12px;
-}
-
-._fc-l-title {
-	font-weight: 600;
-	font-size: 14px;
-	margin: 18px 0px 5px;
-}
-
-._fc-l-item {
-	display: inline-block;
-	background: #fff;
-	color: #000;
-	min-width: 70px;
-	width: 33.33%;
-	height: 70px;
-	line-height: 1;
-	text-align: center;
-	transition: all 0.2s ease;
-	cursor: pointer;
-}
-
-._fc-l-item i {
-	font-size: 21px;
-	display: inline-block;
-}
-
-._fc-l-item ._fc-l-name {
-	font-size: 12px;
-}
-
-._fc-l-item ._fc-l-icon {
-	padding: 10px 5px 12px;
-}
-
-._fc-l-item:hover {
-	background: #2e73ff;
-	color: #fff;
-}
-
-._fc-m-tools {
-	height: 40px;
-	align-items: center;
-	display: flex;
-	justify-content: flex-end;
-	border: 1px solid #ececec;
-	border-top: 0 none;
-}
-
-._fc-m-tools button.el-button {
-	padding: 5px 14px;
-	display: flex;
-	align-items: center;
-}
-
-._fc-m-tools .fc-icon {
-	font-size: 14px;
-	margin-right: 2px;
-}
-
-._fc-r .el-tabs__nav-wrap::after {
-	height: 1px;
-	background-color: #ececec;
-}
-
-._fc-r ._fc-r-tabs {
-	display: flex;
-	padding: 0;
-	border-bottom: 1px solid #ececec;
-}
-
-._fc-r ._fc-r-tab {
-	height: 40px;
-	box-sizing: border-box;
-	line-height: 40px;
-	display: inline-block;
-	list-style: none;
-	font-size: 14px;
-	font-weight: 600;
-	color: #303133;
-	position: relative;
-	flex: 1;
-	text-align: center;
-}
-
-._fc-r ._fc-r-tab.active {
-	color: #409eff;
-	border-bottom: 2px solid #409eff;
-}
-
-.drag-box {
-	min-height: 60px;
-	width: 100%;
-}
-
-._fc-m-drag {
-	overflow: auto;
-	padding: 2px;
-	box-sizing: border-box;
-}
-
-._fc-m-drag,
-.draggable-drag {
-	background: #fff;
-	height: 100%;
-	position: relative;
-}
-
-._fc-m-drag > form,
-._fc-m-drag > form > .el-row {
-	height: 100%;
-}
-</style>
-
 <template>
 	<ElContainer class="_fc-designer" :style="'height:' + dragHeight">
 		<ElMain>
@@ -154,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">
@@ -171,7 +23,7 @@
 					<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" v-if="false">生成JSON</el-button>
+						<el-button v-if="false" 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') }}
@@ -190,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'"
 							>
@@ -215,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
@@ -225,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>
@@ -233,7 +85,7 @@
 									v-model:api="propsForm.api"
 									:rule="propsForm.rule"
 									:option="propsForm.options"
-									:modelValue="propsForm.value"
+									:model-value="propsForm.value"
 									@change="propChange"
 									@removeField="propRemoveField"
 								></DragForm>
@@ -243,7 +95,7 @@
 									v-model:api="validateForm.api"
 									:rule="validateForm.rule"
 									:option="validateForm.options"
-									:modelValue="validateForm.value"
+									:model-value="validateForm.value"
 									@update:modelValue="validateChange"
 								></DragForm>
 							</div>
@@ -252,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>
@@ -269,6 +121,7 @@
 		</ElMain>
 	</ElContainer>
 </template>
+
 <script>
 // 代码样式
 import 'codemirror/lib/codemirror.css'
@@ -544,7 +397,7 @@ export default defineComponent({
 				}
 			},
 			removeMenu(name) {
-				;[...data.menuList].forEach((v, i) => {
+				[...data.menuList].forEach((v, i) => {
 					if (v.name === name) {
 						data.menuList.splice(i, 1)
 					}
@@ -568,7 +421,7 @@ export default defineComponent({
 				data.menuList.forEach(v => {
 					let idx
 					if (is.String(item)) {
-						;[...v.list].forEach((menu, idx) => {
+						[...v.list].forEach((menu, idx) => {
 							if (menu.name === item) {
 								v.list.splice(idx, 1)
 							}
@@ -889,7 +742,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)
 				})
 			},
@@ -950,7 +803,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)
 					})
 				}
@@ -1170,9 +1023,17 @@ export default defineComponent({
 				data.value = methods.getRule()
 				let val = JSON.parse(JSON.stringify(data.value))
 				vm.emit('export-json', val)
+			},
+			// form回显
+			initForm(json) {
+				methods.setRule(formCreate.parseJson(json))
 			}
 		}
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))
+
+    defineExpose({
+      initForm
+    })
 		return {
 			editorRef,
 			...toRefs(data),
@@ -1189,3 +1050,150 @@ export default defineComponent({
 	}
 })
 </script>
+<style>
+._fc-designer {
+	height: 100%;
+	min-height: 500px;
+	overflow: hidden;
+	cursor: default;
+	position: relative;
+}
+
+._fc-designer > .el-main {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 0px;
+}
+
+._fc-m .form-create ._fc-l-item {
+	background: #2e73ff;
+	width: 100%;
+	height: 10px;
+	overflow: hidden;
+	transition: all 0.3s ease;
+}
+
+._fc-l,
+._fc-m,
+._fc-r {
+	border-top: 1px solid #ececec;
+	box-sizing: border-box;
+}
+
+._fc-l-group {
+	padding: 0 12px;
+}
+
+._fc-l-title {
+	font-weight: 600;
+	font-size: 14px;
+	margin: 18px 0px 5px;
+}
+
+._fc-l-item {
+	display: inline-block;
+	background: #fff;
+	color: #000;
+	min-width: 70px;
+	width: 33.33%;
+	height: 70px;
+	line-height: 1;
+	text-align: center;
+	transition: all 0.2s ease;
+	cursor: pointer;
+}
+
+._fc-l-item i {
+	font-size: 21px;
+	display: inline-block;
+}
+
+._fc-l-item ._fc-l-name {
+	font-size: 12px;
+}
+
+._fc-l-item ._fc-l-icon {
+	padding: 10px 5px 12px;
+}
+
+._fc-l-item:hover {
+	background: #2e73ff;
+	color: #fff;
+}
+
+._fc-m-tools {
+	height: 40px;
+	align-items: center;
+	display: flex;
+	justify-content: flex-end;
+	border: 1px solid #ececec;
+	border-top: 0 none;
+}
+
+._fc-m-tools button.el-button {
+	padding: 5px 14px;
+	display: flex;
+	align-items: center;
+}
+
+._fc-m-tools .fc-icon {
+	font-size: 14px;
+	margin-right: 2px;
+}
+
+._fc-r .el-tabs__nav-wrap::after {
+	height: 1px;
+	background-color: #ececec;
+}
+
+._fc-r ._fc-r-tabs {
+	display: flex;
+	padding: 0;
+	border-bottom: 1px solid #ececec;
+}
+
+._fc-r ._fc-r-tab {
+	height: 40px;
+	box-sizing: border-box;
+	line-height: 40px;
+	display: inline-block;
+	list-style: none;
+	font-size: 14px;
+	font-weight: 600;
+	color: #303133;
+	position: relative;
+	flex: 1;
+	text-align: center;
+}
+
+._fc-r ._fc-r-tab.active {
+	color: #409eff;
+	border-bottom: 2px solid #409eff;
+}
+
+.drag-box {
+	min-height: 60px;
+	width: 100%;
+}
+
+._fc-m-drag {
+	overflow: auto;
+	padding: 2px;
+	box-sizing: border-box;
+}
+
+._fc-m-drag,
+.draggable-drag {
+	background: #fff;
+	height: 100%;
+	position: relative;
+}
+
+._fc-m-drag > form,
+._fc-m-drag > form > .el-row {
+	height: 100%;
+}
+</style>

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

@@ -148,7 +148,29 @@ const getGroupList = async () => {
 
 const initBaseicInfEv = item => {
 	flowInfo.value = item
-	updateRemoteCache()
+	// updateRemoteCache()
+	flowProcessId.value = queryObj.value.id // 赋值流程id
+	if (item.useScope === 1) {
+		nodeRoleList.value = item.processActorList.map(item => {
+			return {
+				id: item.actorId,
+				name: item.actorName,
+				actorType: 0
+			}
+		})
+	}
+
+	if (item.processPermissionList && item.processPermissionList.length) {
+		nodeRoleManageList.value = item.processPermissionList.map(item => {
+			return {
+				id: item.userId,
+				name: item.userName,
+				operateApproval: 0,
+				operateOwner: 0,
+				operateData: 0
+			}
+		})
+	}
 }
 
 // 更新申请信息缓存
@@ -201,6 +223,15 @@ const bindCacheEvt = () => {
 	})
 }
 
+// 根据id获取详情
+const getCurrentProcessDetailEv = id => {
+	process.processDetailApi(id).then(res => {
+		const { processForm, ...rest } = res
+		initBaseicInfEv(rest)
+		flowStore.setProcessForm(processForm)
+	})
+}
+
 // ----- 缓存相关 start ------
 const flowBaseInfoWatcher = computed(() => {
 	const { processKey, processName, processIcon, categoryId, remark, useScope, processActorList, processPermissionList } = flowInfo.value
@@ -244,7 +275,11 @@ watch(
 onMounted(() => {
 	getGroupList()
 	handleCacheLoading()
-	flowStore.$reset()
+	flowStore.$reset() // 重置缓存
+
+	if (queryObj.value.id) {
+		getCurrentProcessDetailEv(queryObj.value.id)
+	}
 })
 
 onBeforeUnmount(() => {
@@ -253,8 +288,7 @@ onBeforeUnmount(() => {
 
 defineExpose({
 	formRef,
-	validate,
-	setBaseicInfo: initBaseicInfEv
+	validate
 })
 </script>
 

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

@@ -3,9 +3,10 @@ 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'
 const flowStore = useFlowStore()
 const { flowProcessId, basicInfo } = storeToRefs(flowStore)
-
+const designer = ref()
 const exportJsonEv = async json => {
 	console.log(json)
 	try {
@@ -22,6 +23,15 @@ const exportJsonEv = async json => {
 		console.log(e)
 	}
 }
+
+// 当前是否是编辑
+const queryObj = computed(() => route.query)
+
+onMounted(() => {
+	if (queryObj.value.id) {
+		designer.value.initData(flowStore.processForm.value)
+	}
+})
 </script>
 
 <template>

src/views/flow/create/index.vue

@@ -40,7 +40,6 @@ import ExtendSetTab from './components/ExtendSet.vue'
 import FlowDesignTab from './components/FlowDesign.vue'
 import FormDesignTab from './components/FormDesign.vue'
 import { ElMessage } from 'element-plus'
-import process from '@/api/flow/process'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 const flowStore = useFlowStore()
@@ -97,25 +96,6 @@ 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 => {
-		const { processForm, ...rest } = res
-		dyncComponent.value.setBaseicInfo(rest)
-		flowStore.setProcessForm(processForm)
-	})
-}
-
-watch(
-	() => queryObj.value,
-	(newPath, oldPath) => {
-		if (JSON.stringify(newPath) !== '{}') {
-			nextTick(() => {
-				getCurrentProcessDetailEv()
-			})
-		}
-	},
-	{ immediate: true }
-)
 </script>
 
 <style scoped lang="scss">