feat: 流程定义回显 20%

README.md

@@ -26,25 +26,22 @@
 - 流程表单
   - 列表 ✅
   - 新增 编辑 ✅
-  - 预览
-  - 字段
-  - 设计
+  - 预览 ✅
+  - 字段 ✅
+  - 设计 ✅
 
 - 流程模型
   - 列表 ✅
   - 创建审批
-  - 设计
-  - 修改
-  - 复制
-  - 移动
-  - 停用
-
-- 搜索折叠效果优化  暂时不调整
-- 流程创建接口调整【后台】
-- 创建流程、指定人员选择
-- 表单设计权限设置设计
-
-1、产品确认上线通知,有时候需要开发提醒或者是下午时候才通知上线  半天
-2、小程序上线需要提审，提审通过时间不确定，提审通过时间根据腾讯那边的审核时长而定  几小时或者半天到1天不等
-3、代码合并+禅道单备注+禅道流程扭转需要  半小时
-4、测试预发测试时间  未知
+  - 修改 
+  - 复制 ✅
+  - 移动 ✅
+  - 停用 ✅
+	- 删除 ✅
+
+
+11.25进度 欠缺功能
+1 流程组 - ui调整 菜单
+	a. 关键词搜索 无效 [后端排查]
+	b. 流程组里面的流程实例排序 还未做 
+	c

src/api/flow/process.ts

@@ -7,7 +7,8 @@ const api = {
 	delete: '/v1/process/delete', // 删除流程
 	listCategory: '/v1/process/list-category', // 流程分类定义列表列表
 	clone: '/v1/process/clone', // 复制流程
-	updateProcessState: 'v1/process/update-state' // 更新流程状态
+	updateProcessState: 'v1/process/update-state', // 更新流程状态
+	detailProcess: '/v1/process/get' // 流程详情
 }
 
 function progressCreateApi(data: any): AxiosPromise {
@@ -45,10 +46,18 @@ function processUpdateStateApi(data: any): AxiosPromise {
 	})
 }
 
+function processDetailApi(id: any): AxiosPromise {
+	return request({
+		url: `${api.detailProcess}?id=${id}`,
+		method: 'get'
+	})
+}
+
 export default {
 	progressCreateApi,
 	progressDeleteApi,
 	progressListCategoryApi,
 	progressCloneApi,
-	processUpdateStateApi
+	processUpdateStateApi,
+	processDetailApi
 }

src/store/modules/flow.ts

@@ -59,6 +59,10 @@ export const useFlowStore = defineStore({
 		},
 		// 基本信息
 		setKeysBasicInfo(key: string, value: any) {
+			if (key === null) {
+				this.basicInfo = value
+				return
+			}
 			this.basicInfo[key] = value
 		},
 		// 表单信息

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

@@ -5,6 +5,9 @@ import { ref, nextTick, onMounted, computed, watch, onBeforeUnmount } 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'
+const route = useRoute()
+
 // 缓存 start
 import { EVENT_ENUM, EVENT_BUS, cacheTriggerFunc } from '@/utils/cacheHelper'
 const flowStore = useFlowStore()
@@ -143,6 +146,11 @@ const getGroupList = async () => {
 	options.value = data || []
 }
 
+const initBaseicInfEv = item => {
+	flowInfo.value = item
+	updateRemoteCache()
+}
+
 // 更新申请信息缓存
 const updateRemoteCache = async () => {
 	try {
@@ -211,6 +219,9 @@ const flowBaseInfoWatcher = computed(() => {
 	return _s
 })
 
+// 当前是否是编辑
+const queryObj = computed(() => route.query)
+
 watch(
 	flowBaseInfoWatcher,
 	(newVal, oldVal) => {
@@ -242,7 +253,8 @@ onBeforeUnmount(() => {
 
 defineExpose({
 	formRef,
-	validate
+	validate,
+	setBaseicInfo: initBaseicInfEv
 })
 </script>
 

src/views/flow/create/index.vue

@@ -21,28 +21,31 @@
 				</div>
 			</div>
 			<div class="create-approval-header-right">
-				<el-button @click="saveHandler" v-if="false">暂存</el-button>
+				<el-button v-if="false" @click="saveHandler">暂存</el-button>
 				<el-button type="primary" @click="submitHandler">发布</el-button>
 			</div>
 		</div>
 		<div class="create-approval-main">
-			<component :is="currentComponent" />
+			<component :is="currentComponent" ref="dyncComponent" />
 		</div>
 	</div>
 </template>
 
 <script setup name="flow_create">
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import useFlowStore from '@/store/modules/flow'
 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";
-
+import { ElMessage } from 'element-plus'
+import process from '@/api/flow/process'
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const flowStore = useFlowStore()
 const { flowName, flowProcessId } = storeToRefs(flowStore)
+const dyncComponent = ref() // 实例化子组件
 const componentsArr = [
 	{
 		component: BasicInfoTab,
@@ -81,7 +84,7 @@ const saveHandler = () => {
 }
 
 const activeComponent = item => {
-	if (!flowProcessId.value) {
+	if (!flowProcessId.value && JSON.stringify(queryObj.value) === '{}') {
 		return ElMessage({
 			message: '请先保存基础信息',
 			type: 'error'
@@ -93,6 +96,26 @@ 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 => {
+		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">

src/views/flow/group/components/listGroup.vue

@@ -67,9 +67,11 @@
 											</el-tooltip>
 										</el-space>
 										<el-space wrap>
-											<el-tooltip effect="dark" content="删除" placement="top">
-												<el-icon :size="16" @click="stopEv(element.processId)"><Delete /></el-icon>
-											</el-tooltip>
+											<el-popconfirm title="确定删除当前数据?" @confirm="stopEv(element.processId)">
+												<template #reference>
+													<el-icon :size="16"><Delete /></el-icon>
+												</template>
+											</el-popconfirm>
 										</el-space>
 									</div>
 								</li>
@@ -90,9 +92,10 @@ import flowGroup from '@/api/flow/group'
 import flowDefinition from '@/api/flow/definition'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import process from '@/api/flow/process'
+import router from '@/router'
+
 const myArray = ref([])
 const hideAddInput = ref(true)
-
 const listGroupName = ref('')
 
 // 显示隐藏添加流程组元素
@@ -120,9 +123,9 @@ const addFlowGroup = async () => {
 }
 
 // 流程组列表
-const flowGroupListAll = async () => {
+const flowGroupListAll = async (item = {}) => {
 	try {
-		const data = await flowDefinition.flowDefinitionListCategoryApi({})
+		const data = await flowDefinition.flowDefinitionListCategoryApi(item)
 		myArray.value = data || []
 		console.log(data)
 	} catch (e) {
@@ -197,8 +200,9 @@ const copyEv = async (id: any) => {
 }
 
 // 修改
-const updateEv = async () => {
+const updateEv = async (id: any) => {
 	console.log('修改')
+	router.push('/flow/create?id=' + id)
 }
 
 onMounted(() => {
@@ -208,7 +212,8 @@ onMounted(() => {
 })
 // 父组件使用的话需要导出
 defineExpose({
-	showAddInput
+	showAddInput,
+	searchProcessEv: flowGroupListAll
 })
 </script>
 
@@ -305,6 +310,7 @@ defineExpose({
 				max-width: 350px;
 				flex-shrink: 0;
 				display: flex;
+				cursor: pointer;
 			}
 			.group_itemIntro {
 				font-size: 14px;

src/views/flow/group/components/sortGroup.vue

@@ -75,9 +75,9 @@ const deleteFlowGroup = async item => {
 }
 
 // 流程组列表
-const flowGroupListAll = async () => {
+const flowGroupListAll = async (item = {}) => {
 	try {
-		const data = await flowDefinition.flowDefinitionListCategoryApi({})
+		const data = await flowDefinition.flowDefinitionListCategoryApi(item)
 		myArray.value = data || []
 		console.log(data)
 	} catch (e) {
@@ -96,7 +96,8 @@ const exportSortData = () => {
 }
 
 defineExpose({
-	exportSortData
+	exportSortData,
+	searchProcessEv: flowGroupListAll
 })
 </script>
 

src/views/flow/group/index.vue

@@ -4,7 +4,7 @@
 			<el-header class="flex flex-align-center" style="width: 100%; padding: 0px">
 				<div style="width: 100%">
 					<el-row style="width: 100%" justify="space-between">
-						<el-col :span="4"><el-input placeholder="搜索" clearable /></el-col>
+						<el-col :span="4"><el-input v-model="keyword" placeholder="搜索" clearable @blur="searchProcess" /></el-col>
 						<el-col :span="8">
 							<template v-if="!sortFlag">
 								<el-space wrap><el-button @click="addNewGroupEv">新建分组</el-button></el-space>
@@ -14,7 +14,11 @@
 								<el-space wrap><el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button></el-space>
 								<el-space wrap><el-button type="info" plain @click="changeComponent">取 消</el-button></el-space>
 							</template>
-							<el-space wrap><el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag">创建审批</el-button></el-space>
+							<el-space wrap
+								><el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag" @click="createProcessEv"
+									>创建审批</el-button
+								></el-space
+							>
 						</el-col>
 					</el-row>
 				</div>
@@ -31,6 +35,7 @@ import { Plus, CircleCheck } from '@element-plus/icons-vue'
 import SortGroup from './components/sortGroup'
 import ListGroup from './components/listGroup'
 import flowGroup from '@/api/flow/group'
+import router from '@/router'
 
 const sortFlag = ref(false)
 const dyncComponent = ref() // 实例化子组件
@@ -39,6 +44,7 @@ const typeComponentMap = {
 	2: SortGroup
 }
 const pageType = ref(1)
+const keyword = ref('')
 
 const changeComponent: (sort) => void = async sort => {
 	sortFlag.value = !sortFlag.value
@@ -58,6 +64,16 @@ const changeComponent: (sort) => void = async sort => {
 const addNewGroupEv = () => {
 	dyncComponent.value.showAddInput()
 }
+
+// 调用子组件的方法
+const searchProcess = async () => {
+	if (!keyword.value) return
+	await dyncComponent.value.searchProcessEv({ keyword: keyword.value })
+}
+
+const createProcessEv = () => {
+	router.push('/flow/create')
+}
 </script>
 <style scoped lang="scss">
 .group-container {