流程模型选择

src/views/bpm/formprocessmapping/FormProcessMappingForm.vue

@@ -7,6 +7,9 @@
       label-width="100px"
       v-loading="formLoading"
     >
+      <el-form-item label="选择模型" >
+        <el-button style="width: 100%;" type="warning" @click="openForm()" >选择映射模型</el-button>
+      </el-form-item>
       <el-form-item label="映射名" prop="name">
         <el-input v-model="formData.name" placeholder="请输入映射名" />
       </el-form-item>
@@ -36,10 +39,17 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <SelectModelForm
+    ref="formRef2"
+    :select="select"
+    v-model:sData="sData"
+    @change="taskData()"
+  />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { FormProcessMappingApi, FormProcessMappingVO } from '@/api/bpm/formprocessmapping'
+import SelectModelForm from "@/views/bpm/formprocessmapping/SelectModelForm.vue";
 
 /** BPM 表单工作流对应 表单 */
 defineOptions({ name: 'FormProcessMappingForm' })
@@ -65,6 +75,22 @@ const formRules = reactive({
   formCustomCreatePath: [{ required: true, message: '表单的提交路径不能为空', trigger: 'blur' }],
   formCustomViewPath: [{ required: true, message: '表单的查看路径不能为空', trigger: 'blur' }]
 })
+const select = ref(true)// 单选true多选false
+const sData = ref()// 接收单选值
+const formRef2 = ref() // 表单 Ref 绑定后可以使用子组件内部定义的方法
+/*打开流程模型选择*/
+const openForm = async ()=>{
+  await formRef2.value.openSelect()
+}
+/*内部判断一下单选还是多选,单选走单选的逻辑多选走多选的逻辑*/
+const taskData = ()=>{
+  if (select.value){
+    formData.value.name = sData.value.name
+    formData.value.processKey = sData.value.info
+    formData.value.formCustomCreatePath = sData.value.createPath
+    formData.value.formCustomViewPath = sData.value.detailPath
+  }
+}
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */

src/views/bpm/formprocessmapping/SelectModelForm.vue

@@ -0,0 +1,239 @@
+<template>
+<Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 80%">
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+<!--    :highlight-current-row="props.select" 单选时或有个颜色显示在你选中的行上-->
+<!--    @current-change="handleCurrentChange" 单选绑定的函数-->
+<!--    @selection-change="handleSelectionChange" 多选绑定的函数-->
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :highlight-current-row="props.select"
+      @current-change="handleCurrentChange"
+      @selection-change="handleSelectionChange"
+    >
+<!--      v-if="!props.select" 判断为false时显示多选框-->
+      <el-table-column v-if="!props.select" type="selection" width="50"/>
+      <el-table-column label="流程标识" align="center" prop="key" />
+      <el-table-column label="流程名称" align="center" prop="name" />
+      <el-table-column label="流程图标" align="center" prop="icon" >
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="w-32px h-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="流程版本"
+        align="center"
+        prop="processDefinition.version"
+      >
+        <template #default="scope">
+          <el-tag v-if="scope.row.processDefinition">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="部署时间" align="center" prop="deploymentTime" >
+        <template #default="scope">
+            <span v-if="scope.row.processDefinition">
+              {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+            </span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+  <template #footer>
+    <el-button type="primary" @click="submit()">确定</el-button>
+    <el-button @click="dialogVisible=false">取消</el-button>
+  </template>
+</Dialog>
+</template>
+
+<script setup lang="ts">
+
+import * as ModelApi from "@/api/bpm/model";
+import {dateFormatter, formatDate} from "@/utils/formatTime";
+import {CategoryApi} from "@/api/bpm/category";
+
+defineOptions({ name: 'SelectModelForm' })
+/*定义事件*/
+const emit = defineEmits(['update:sData','update:mData','change']);
+//接受父组件参数
+const props = defineProps({
+  // 单选true多选false
+  select: {
+    required: true,
+    type: Boolean,
+    default: true
+  },
+})
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const categoryList = ref([]) // 流程分类列表
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const queryFormRef = ref() // 搜索的表单
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+//定义数据模型
+interface Da {
+  name: string,
+  info: string,
+  createPath: string,
+  detailPath: string,
+}
+//定义单选数据模型
+const sData = ref<Da>({
+  name: '',
+  info: '',
+  createPath: '',
+  detailPath: '',
+})
+//定义多选数据模型
+const mData = ref<Da[]>([])
+//拿到单选值,然后赋值给要返回的数据模型
+const handleCurrentChange = (val: any | undefined) => {
+  restForm()
+  sData.value.name=val.categoryName
+  sData.value.info=val.key
+  sData.value.createPath=val.formCustomCreatePath
+  sData.value.detailPath=val.formCustomViewPath
+}
+//拿到选值,然后赋值给要返回的数据模型,因为是数组所以需要循环处理啊
+const handleSelectionChange = (val: any | undefined) => {
+  restForm()
+  for (let item of val){
+    mData.value.push({
+      name:item.categoryName,
+      info:item.key,
+      createPath:item.formCustomCreatePath,
+      detailPath:item.formCustomViewPath
+    })
+  }
+}
+//确定时,判断一下select参数,单选就传递单选,多选就传递多选,最后change
+const submit = ()=>{
+  if (props.select){
+    emit('update:sData',sData.value)
+  }else if (!props.select){
+    emit('update:mData',mData.value)
+  }
+  emit('change')
+  dialogVisible.value = false
+}
+//清空数据避免重复传递
+const restForm = ()=>{
+  sData.value={
+    name: '',
+    info: '',
+    createPath: '',
+    detailPath: '',
+  }
+  mData.value=[]
+}
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+/** 打开弹窗 */
+const openSelect = async () => {
+  dialogVisible.value = true
+  dialogTitle.value = '模型选择'
+  restForm()
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+}
+defineExpose({ openSelect }) // 提供 open 方法，用于打开弹窗
+
+</script>