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

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

src/views/workflow/process/ProcessEdit.vue

@@ -1,16 +1,20 @@
 <template>
   <div style="margin-top: 15px">
-  <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 === 'processDesign'">
-      <process-design ref="processDesign"/>
+    <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'">
+        <form-design ref="formDesign"/>
+      </div>
     </div>
-    <div v-show="activeSelect === 'formDesign'" >
-      <form-design ref="formDesign"/>
-    </div>
-  </div>
 
   </div>
   <el-dialog v-model="validVisible" title="设置项检查">
@@ -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: ''},
+  {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 {
@@ -203,10 +213,10 @@ const getDefaultValidErr = () => {
       return '请检查基础设置项';
     case 1:
       return '请检查审批表单相关设置'
-    // case 2:
-    //   return '请检查审批流程，查看对应标注节点错误信息'
-    // case 3:
-    //   return '请检查扩展设置'
+      // case 2:
+      //   return '请检查审批流程，查看对应标注节点错误信息'
+      // case 3:
+      //   return '请检查扩展设置'
     default:
       return '未知错误'
   }
@@ -271,17 +281,17 @@ const doPublish = () => {
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
-    let design =  processStore.getDesign()
+    let design = processStore.getDesign()
     console.log(design)
     let template = {
       ...design
     }
     console.log(template)
     addProcessDefinition(template).then(res => {
-      if (res.code === 1000){
-          ElMessage.success(res.msg)
+      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>