Merge pull request 'feat : 添加表单设置页面' (#12) from master into prod

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/12

src/views/workflow/process/ProcessEdit.vue

@@ -1,13 +1,17 @@
 <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>
-    <div v-show="activeSelect === 'formDesign'" >
+      <div v-show="activeSelect === 'formDesign'">
         <form-design ref="formDesign"/>
       </div>
     </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,35 +55,39 @@
 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'
+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: ''}
-    ])
+])
 
 
-const errTitle = computed(()=>{
+const errTitle = computed(() => {
   if (validResult.finished && !validResult.success) {
     return validResult.title + ` (${validResult.errs.length}项错误) 😥`
   }
@@ -85,7 +95,7 @@ const errTitle = computed(()=>{
 })
 
 
-const validIcon = computed(()=>{
+const validIcon = computed(() => {
   if (!validResult.finished) {
     return Loading
   } else if (validResult.success) {
@@ -97,9 +107,9 @@ const validIcon = computed(()=>{
 
 const init = () => {
   let deploymentId = params.deploymentId
-  if (deploymentId === undefined){
+  if (deploymentId === undefined) {
     loadInitFrom()
-  }else {
+  } else {
     getProcessInfo()
   }
 }
@@ -145,7 +155,7 @@ const loadInitFrom = () => {
   }
   processStore.setDesign(design)
   visible.value = true
-  nextTick(()=>{
+  nextTick(() => {
     processDesign.value.initRender()
   })
 }
@@ -166,7 +176,7 @@ const getProcessInfo = async () => {
     if (res.code === 1000) {
       processStore.setDesign(res.data)
       visible.value = true
-      nextTick(()=>{
+      nextTick(() => {
         processDesign.value.initRender()
       })
     } else {
@@ -278,10 +288,10 @@ const doPublish = () => {
     }
     console.log(template)
     addProcessDefinition(template).then(res => {
-      if (res.code === 1000){
+      if (res.code === 1000) {
         ElMessage.success(res.msg)
         // this.$router.push("/formsPanel")
-      }else {
+      } else {
         ElMessage.error(res.msg)
       }
     }).catch(err => {

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>