feat : 添加表单设置页面

src/views/workflow/process/ProcessEdit.vue

@@ -1,9 +1,13 @@
 <template>
   <div style="margin-top: 15px">
+    <el-button @click="changPan('processSetting')">流程设置</el-button>
     <el-button @click="changPan('formDesign')">表单</el-button>
     <el-button @click="changPan('processDesign')">流程</el-button>
     <el-button @click="publishProcess">发布</el-button>
     <div class="layout-body" v-if="visible">
+      <div v-show="activeSelect === 'processSetting'">
+        <process-setting ref="processSetting"/>
+      </div>
       <div v-show="activeSelect === 'processDesign'">
         <process-design ref="processDesign"/>
       </div>
@@ -33,7 +37,9 @@
           </ellipsis>
         </div>
         <div v-if="validResult.finished && validResult.success">
-          <el-icon color="#67c23a" size="70"><CircleCheckFilled /></el-icon>
+          <el-icon color="#67c23a" size="70">
+            <CircleCheckFilled/>
+          </el-icon>
         </div>
       </template>
       <template #extra>
@@ -49,30 +55,34 @@
 import {getProcessDefinitionInfo, addProcessDefinition} from "@/api/workflow/process-definition.js";
 import ProcessDesign from './ProcessDesign.vue'
 import FormDesign from '../form/FormDesign.vue'
+import ProcessSetting from "./ProcessSetting.vue";
 import Ellipsis from './common/Ellipsis.vue'
 import {getCurrentInstance} from '@vue/runtime-core';
+
 let {proxy} = getCurrentInstance();
 import {Loading, WarningFilled, CircleCheckFilled} from '@element-plus/icons-vue'
 import {ref, computed} from 'vue'
+
 const router = useRouter()
 const params = reactive(router.currentRoute.value.params)
 import {useProcessStore} from '@/stores/processStore.js'
+
 const processStore = useProcessStore()
 import {ElMessage, ElMessageBox} from "element-plus";
 
 const processDesign = ref()
 const visible = ref(false)
 const timer = ref(null)
-const validComponents = ref(['formDesign','processDesign'])
+const validComponents = ref(['processSetting', 'formDesign', 'processDesign'])
 // const activeSelect = ref('formDesign')
-const activeSelect = ref('processDesign')
+const activeSelect = ref('processSetting')
 const validVisible = ref(false)
 const validStep = ref(0)
 const validResult = ref({})
 const validOptions = ref([
   {title: '基础信息', description: '', icon: '', status: ''},
   {title: '审批表单', description: '', icon: '', status: ''},
-      // {title: '审批流程', description: '', icon: '', status: ''},
+  {title: '审批流程', description: '', icon: '', status: ''},
   // {title: '扩展设置', description: '', icon: '', status: ''}
 ])
 

src/views/workflow/process/ProcessSetting.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-input v-model="processData.deploymentName" placeholder="请输入流程名称" />
+流程设置{{ processData.deploymentName }}
+</template>
+
+<script setup>
+import {useProcessStore} from '@/stores/processStore.js'
+import {computed, defineExpose} from "vue";
+const processStore = useProcessStore()
+console.log(processStore.getDesign)
+
+const processData = computed(() => {
+  return processStore.getDesign()
+})
+
+
+const validate = () => {
+  console.log("validate")
+  return []
+}
+
+defineExpose({
+  validate
+})
+
+</script>
+
+<style scoped>
+
+</style>