流程一对多表单选择

src/views/bpm/processInstance/create/index.vue

@@ -98,6 +98,40 @@
     </el-tabs>
 
   </ContentWrap>
+  <!-- 多表单选择弹窗 -->
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 600px;background-color: #f5f7f9">
+    <el-row style="height: 435px;" :gutter="10">
+      <el-col :span="10">
+        <ContentWrap class="height100" >
+          <span style="font-size: 18px">业务分类:</span>
+          <el-divider style="margin: 8px 0" />
+          <el-col
+            :span="24"
+            v-for="form in formMappingList"
+            :key="form.id"
+          >
+            <el-button
+              class="mb-20px cursor-pointer"
+              :class="{'clicked-button': form.color,'clicked-button2': !form.color}"
+              @click="changeRemark(form)"
+            >
+              {{ form.name }}
+            </el-button>
+          </el-col>
+        </ContentWrap>
+      </el-col>
+      <el-col :span="14">
+        <ContentWrap class="height100" >
+          <span style="font-size: 18px">说明:</span>
+          <el-divider style="margin: 8px 0" />
+          <span style="font-size: 16px;">{{formInfo.remark}}</span>
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button type="primary" @click="pushCreatePath">确认</el-button>
+    </template>
+  </Dialog>
 </template>
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
@@ -180,6 +214,46 @@ const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表
 const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
 const userList = ref<any[]>([]) // 用户列表
 
+//控制弹窗是否显示,和标题
+const dialogVisible = ref(false)
+const dialogTitle = ref('流程表单选择')
+//表单信息模型
+const formInfo = ref({
+  remark:'无说明',
+  createPath:''
+})
+//数据结构
+interface formModel {
+  color:boolean,
+  createTime: number,
+  formCustomCreatePath: string,
+  formCustomViewPath: string,
+  id: number,
+  name: string,
+  processKey: string,
+  remark: string,
+  status: number,
+}
+//定义formMappingList变量
+const formMappingList = ref<formModel[]>([])
+/** 处理选择表单后备注展示  */
+const changeRemark = async (form:any)=>{
+  // 先将所有表单的 color 设置为 false
+  formMappingList.value.forEach(f => {
+    f.color = false;
+  });
+  //当前按钮为主题色
+  form.color = true
+  //设置表单备注信息,路由信息
+  formInfo.value.remark=form.remark
+  formInfo.value.createPath=form.formCustomCreatePath
+}
+/** 处理选择表单后push到对应路由 */
+const pushCreatePath = async ()=>{
+  await push({
+    path:formInfo.value.createPath
+  })
+}
 /** 处理选择流程的按钮操作 **/
 const handleSelect = async (row, formVariables) => {
   // 设置选择的流程
@@ -227,18 +301,21 @@ const handleSelect = async (row, formVariables) => {
       })
       // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
   } else {
-    console.log(row.key,"row.key")
     const process_key = row.key
     const formCustomCreatePath = await FormProcessMappingApi.getFormCreatePath(process_key)
-    console.log(formCustomCreatePath.length,"formCustomCreatePath.length")
     if (formCustomCreatePath.length == 1) {
       await push({
         path: formCustomCreatePath[0]
       })
     }else {
-      console.log("else..............")
-      const formMappingList  = await FormProcessMappingApi.getListByProcessKey(process_key)
-      console.log(formMappingList,"formMappingList")
+      //这个值为空就展示模型页面
+      selectProcessDefinition.value=null
+      //进这个判断就打开弹窗
+      dialogVisible.value=true
+      //拿到映射的表单模型
+      formMappingList.value = await FormProcessMappingApi.getListByProcessKey(process_key)
+      //每个表单模型加一个color对象值为false
+      formMappingList.value = formMappingList.value.map(item =>({ ...item, color:false }))
     }
   }
 }
@@ -278,3 +355,17 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style scoped lang="scss">
+.height100 {
+  height: 100%;
+}
+.clicked-button {
+  background-color: var(--el-color-primary);
+  color: white;
+}
+.clicked-button2 {
+  background-color: #d9f2ff;
+  border: none
+}
+</style>