优化创建流程

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

@@ -1,5 +1,4 @@
 <script setup name="BasicInfo">
-import { storeToRefs } from 'pinia'
 import useFlowStore from '@/store/modules/flow'
 import { ref, nextTick, onMounted, computed, watch } from 'vue'
 import UseSelect from '@/components/scWorkflow/select'
@@ -7,9 +6,8 @@ import group from '@/api/flow/group'
 import { useRoute } from 'vue-router'
 import { flowIconPrefix } from '@/utils/index'
 const route = useRoute()
-const flowStore = useFlowStore()
-const { flowName, flowProcessId, processIcon, processKey, processName, remark, categoryId } = storeToRefs(flowStore)
-// 缓存 end
+const flowInfo = useFlowStore()
+
 const visiblePopover = ref(false)
 const selectVisible = ref(false)
 const useSelectRef = ref(null)
@@ -18,29 +16,7 @@ const nodeRoleManageList = ref([])
 const currentNode = ref('nodeRoleList')
 const formRef = ref()
 const options = ref([])
-const flowInfo = ref({
-	processKey: '', // 流程唯一标识 key
-	processName: '', // 流程定义名称
-	processIcon: 'approval', // 流程图标
-	categoryId: '', // 流程组分类ID
-	// 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，是
-		}
-	] // 流程定义权限
-})
+
 const rules = {
 	processIcon: [
 		{
@@ -151,7 +127,7 @@ const selectContentEv = item => {
 			})
 		}
 		nodeRoleManageList.value = item
-		flowInfo.value.processPermissionList = processPermissionList
+		flowInfo.processPermissionList = processPermissionList
 	}
 }
 
@@ -198,12 +174,12 @@ const chooseIconEv = item => {
 const queryObj = computed(() => route.query)
 
 // 流程名称变化
-watch(
-	() => flowInfo.value.processName,
-	newVal => {
-		flowName.value = newVal
-	}
-)
+// watch(
+// 	() => flowInfo.value.processName,
+// 	newVal => {
+// 		flowName.value = newVal
+// 	}
+// )
 
 // ----- 缓存相关 end ------
 
@@ -222,9 +198,9 @@ defineExpose({
 	<div class="base-info">
 		<div class="base-info-panel" style="position: relative">
 			<el-form ref="formRef" :rules="rules" label-position="top">
-				<el-form-item label="图标" prop="processIcon">
+				<el-form-item label="图标" prop="flowInfo.processIcon">
 					<el-space>
-						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${processIcon}`" />
+						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${flowInfo.processIcon}`" />
 					</el-space>
 
 					<el-popover placement="right-end" :width="450" trigger="focus" class="base-popover" :visible="visiblePopover">
@@ -240,17 +216,17 @@ defineExpose({
 						</template>
 					</el-popover>
 				</el-form-item>
-				<el-form-item label="唯一标识 key" prop="processKey">
-					<el-input v-model="processKey" clearable></el-input>
+				<el-form-item label="唯一标识 key" prop="flowInfo.processKey">
+					<el-input v-model="flowInfo.processKey" clearable></el-input>
 				</el-form-item>
-				<el-form-item label="名称" prop="processName">
-					<el-input v-model="processName" clearable></el-input>
+				<el-form-item label="名称" prop="flowInfo.processName">
+					<el-input v-model="flowInfo.processName" clearable></el-input>
 				</el-form-item>
-				<el-form-item label="说明" prop="remark">
-					<el-input v-model="remark" type="textarea" clearable></el-input>
+				<el-form-item label="说明" prop="flowInfo.remark">
+					<el-input v-model="flowInfo.remark" type="textarea" clearable></el-input>
 				</el-form-item>
-				<el-form-item label="分组" prop="categoryId">
-					<el-select v-model="categoryId">
+				<el-form-item label="分组" prop="flowInfo.categoryId">
+					<el-select v-model="flowInfo.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/index.vue

@@ -45,7 +45,7 @@ import process from '@/api/flow/process'
 
 const route = useRoute()
 const flowStore = useFlowStore()
-const { flowProcessId, processKey, processName, modelContent, processForm, processSetting } = storeToRefs(flowStore)
+const { categoryId, flowProcessId, processKey, processName, remark, modelContent, processForm, processSetting } = storeToRefs(flowStore)
 
 const dyncComponent = ref() // 实例化子组件
 const componentsArr = [
@@ -83,13 +83,16 @@ const submitHandler = async () => {
 	// 扩展设置
 	changeTab()
 	const params = {
-		...basicInfo.value,
+		categoryId: categoryId.value,
+		processKey: processKey.value,
+		processName: processName.value,
+		remark: remark.value,
 		processId: flowProcessId.value,
 		processForm: processForm.value,
 		modelContent: modelContent.value,
 		processSetting: processSetting.value
 	}
-	// console.log('---r-e-s----', params)
+	console.log('---r-e-s--params--', params)
 	const res = await process.progressCreateApi(params)
 	console.log('---r-e-s----', res)
 }
@@ -116,8 +119,10 @@ const queryObj = computed(() => route.query)
 const getCurrentProcessDetailEv = () => {
 	process.processDetailApi(queryObj.value.id).then(res => {
 		console.log('===res===res====res==', res)
+		categoryId.value = res.categoryId
 		processKey.value = res.processKey
 		processName.value = res.processName
+		remark.value = res.remark
 		modelContent.value = res.modelContent
 		processForm.value = res.processForm
 		flowStore.setProcessForm(processForm)