| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <ContentWrap> |
| 3e359e | 3 | <div class="flex justify-between pl-20px items-center"> |
| H | 4 | <h3 class="font-extrabold">流程模型</h3> |
| 5 | <!-- 搜索工作栏 --> | |
| 6 | <el-form | |
| 7 | v-if="!isCategorySorting" | |
| 8 | class="-mb-15px flex mr-10px" | |
| 9 | :model="queryParams" | |
| 10 | ref="queryFormRef" | |
| 11 | :inline="true" | |
| 12 | label-width="68px" | |
| 13 | @submit.prevent | |
| 14 | > | |
| 15 | <el-form-item prop="name" class="ml-auto"> | |
| 16 | <el-input | |
| 17 | v-model="queryParams.name" | |
| 18 | placeholder="搜索流程" | |
| 19 | clearable | |
| 20 | @keyup.enter="handleQuery" | |
| 21 | class="!w-240px" | |
| 22 | > | |
| 23 | <template #prefix> | |
| 24 | <Icon icon="ep:search" class="mx-10px" /> | |
| 25 | </template> | |
| 26 | </el-input> | |
| 27 | </el-form-item> | |
| 28 | <!-- 右上角：新建模型、更多操作 --> | |
| 29 | <el-form-item> | |
| 30 | <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']"> | |
| 31 | <Icon icon="ep:plus" class="mr-5px" /> 新建模型 | |
| 32 | </el-button> | |
| 33 | </el-form-item> | |
| 34 | <el-form-item> | |
| 35 | <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end"> | |
| 36 | <el-button class="w-30px" plain> | |
| 37 | <Icon icon="ep:setting" /> | |
| 38 | </el-button> | |
| 39 | <template #dropdown> | |
| 40 | <el-dropdown-menu> | |
| 41 | <el-dropdown-item command="handleCategoryAdd"> | |
| 42 | <Icon icon="ep:circle-plus" :size="13" class="mr-5px" /> | |
| 43 | 新建分类 | |
| 44 | </el-dropdown-item> | |
| 45 | <el-dropdown-item command="handleCategorySort"> | |
| 46 | <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" /> | |
| 47 | 分类排序 | |
| 48 | </el-dropdown-item> | |
| 49 | </el-dropdown-menu> | |
| 50 | </template> | |
| 51 | </el-dropdown> | |
| 52 | </el-form-item> | |
| 53 | </el-form> | |
| 54 | <div class="mr-20px" v-else> | |
| 55 | <el-button @click="handleCategorySortCancel"> 取 消 </el-button> | |
| 56 | <el-button type="primary" @click="handleCategorySortSubmit"> 保存排序 </el-button> | |
| 57 | </div> | |
| 58 | </div> | |
| 820397 | 59 | |
| 3e359e | 60 | <el-divider /> |
| H | 61 | |
| 62 | <!-- 按照分类，展示其所属的模型列表 --> | |
| 63 | <div class="px-15px"> | |
| 64 | <draggable | |
| 65 | :disabled="!isCategorySorting" | |
| 66 | v-model="categoryGroup" | |
| 67 | item-key="id" | |
| 68 | :animation="400" | |
| 69 | > | |
| 70 | <template #item="{ element }"> | |
| 71 | <ContentWrap | |
| 72 | class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl" | |
| 73 | v-loading="loading" | |
| 74 | :body-style="{ padding: 0 }" | |
| 75 | :key="element.id" | |
| 820397 | 76 | > |
| 3e359e | 77 | <CategoryDraggableModel |
| H | 78 | :isCategorySorting="isCategorySorting" |
| 79 | :categoryInfo="element" | |
| 80 | @success="getList" | |
| 820397 | 81 | /> |
| 3e359e | 82 | </ContentWrap> |
| 820397 | 83 | </template> |
| 3e359e | 84 | </draggable> |
| H | 85 | </div> |
| 820397 | 86 | </ContentWrap> |
| H | 87 | |
| 88 | <!-- 表单弹窗：添加/修改流程 --> | |
| 89 | <ModelForm ref="formRef" @success="getList" /> | |
| 3e359e | 90 | <!-- 表单弹窗：添加分类 --> |
| H | 91 | <CategoryForm ref="categoryFormRef" @success="getList" /> |
| 820397 | 92 | <!-- 弹窗：表单详情 --> |
| H | 93 | <Dialog title="表单详情" v-model="formDetailVisible" width="800"> |
| 94 | <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" /> | |
| 95 | </Dialog> | |
| 96 | </template> | |
| 97 | ||
| 98 | <script lang="ts" setup> | |
| 3e359e | 99 | import draggable from 'vuedraggable' |
| 820397 | 100 | import { CategoryApi } from '@/api/bpm/category' |
| 3e359e | 101 | import * as ModelApi from '@/api/bpm/model' |
| H | 102 | import ModelForm from './ModelForm.vue' |
| 103 | import CategoryForm from '../category/CategoryForm.vue' | |
| 104 | import { cloneDeep } from 'lodash-es' | |
| 105 | import CategoryDraggableModel from './CategoryDraggableModel.vue' | |
| 820397 | 106 | |
| H | 107 | defineOptions({ name: 'BpmModel' }) |
| 108 | ||
| 109 | const message = useMessage() // 消息弹窗 | |
| 110 | const loading = ref(true) // 列表的加载中 | |
| 3e359e | 111 | const isCategorySorting = ref(false) // 是否 category 正处于排序状态 |
| 820397 | 112 | const queryParams = reactive({ |
| 3e359e | 113 | name: undefined |
| 820397 | 114 | }) |
| H | 115 | const queryFormRef = ref() // 搜索的表单 |
| 3e359e | 116 | const categoryGroup: any = ref([]) // 按照 category 分组的数据 |
| H | 117 | const originalData: any = ref([]) // 原始数据 |
| 820397 | 118 | |
| H | 119 | /** 搜索按钮操作 */ |
| 120 | const handleQuery = () => { | |
| 121 | getList() | |
| 122 | } | |
| 123 | ||
| 124 | /** 添加/修改操作 */ | |
| 125 | const formRef = ref() | |
| 126 | const openForm = (type: string, id?: number) => { | |
| 127 | formRef.value.open(type, id) | |
| 128 | } | |
| 129 | ||
| 130 | /** 流程表单的详情按钮操作 */ | |
| 131 | const formDetailVisible = ref(false) | |
| 132 | const formDetailPreview = ref({ | |
| 133 | rule: [], | |
| 134 | option: {} | |
| 135 | }) | |
| 3e359e | 136 | |
| H | 137 | /** 右上角设置按钮 */ |
| 138 | const handleCommand = (command: string) => { | |
| 139 | switch (command) { | |
| 140 | case 'handleCategoryAdd': | |
| 141 | handleCategoryAdd() | |
| 142 | break | |
| 143 | case 'handleCategorySort': | |
| 144 | handleCategorySort() | |
| 145 | break | |
| 146 | default: | |
| 147 | break | |
| 820397 | 148 | } |
| H | 149 | } |
| 150 | ||
| 3e359e | 151 | /** 新建分类 */ |
| H | 152 | const categoryFormRef = ref() |
| 153 | const handleCategoryAdd = () => { | |
| 154 | categoryFormRef.value.open('create') | |
| 155 | } | |
| 156 | ||
| 157 | /** 分类排序的提交 */ | |
| 158 | const handleCategorySort = () => { | |
| 159 | // 保存初始数据 | |
| 160 | originalData.value = cloneDeep(categoryGroup.value) | |
| 161 | isCategorySorting.value = true | |
| 162 | } | |
| 163 | ||
| 164 | /** 分类排序的取消 */ | |
| 165 | const handleCategorySortCancel = () => { | |
| 166 | // 恢复初始数据 | |
| 167 | categoryGroup.value = cloneDeep(originalData.value) | |
| 168 | isCategorySorting.value = false | |
| 169 | } | |
| 170 | ||
| 171 | /** 分类排序的保存 */ | |
| 172 | const handleCategorySortSubmit = async () => { | |
| 173 | // 保存排序 | |
| 174 | const ids = categoryGroup.value.map((item: any) => item.id) | |
| 175 | await CategoryApi.updateCategorySortBatch(ids) | |
| 176 | // 刷新列表 | |
| 177 | isCategorySorting.value = false | |
| 178 | message.success('排序分类成功') | |
| 179 | await getList() | |
| 180 | } | |
| 181 | ||
| 182 | /** 加载数据 */ | |
| 183 | const getList = async () => { | |
| 184 | loading.value = true | |
| 185 | try { | |
| 186 | // 查询模型 + 分裂的列表 | |
| 187 | const modelList = await ModelApi.getModelList(queryParams.name) | |
| 188 | const categoryList = await CategoryApi.getCategorySimpleList() | |
| 189 | // 按照 category 聚合 | |
| 190 | // 注意：必须一次性赋值给 categoryGroup，否则每次操作后，列表会重新渲染，滚动条的位置会偏离！！！ | |
| 191 | categoryGroup.value = categoryList.map((category: any) => ({ | |
| 192 | ...category, | |
| 193 | modelList: modelList.filter((model: any) => model.categoryName == category.name) | |
| 194 | })) | |
| 195 | } finally { | |
| 196 | loading.value = false | |
| 197 | } | |
| 820397 | 198 | } |
| H | 199 | |
| 200 | /** 初始化 **/ | |
| 3e359e | 201 | onMounted(() => { |
| H | 202 | getList() |
| 820397 | 203 | }) |
| H | 204 | </script> |
| 3e359e | 205 | |
| H | 206 | <style lang="scss" scoped> |
| 207 | :deep() { | |
| 208 | .el-table--fit .el-table__inner-wrapper:before { | |
| 209 | height: 0; | |
| 210 | } | |
| 211 | .el-card { | |
| 212 | border-radius: 8px; | |
| 213 | } | |
| 214 | .el-form--inline .el-form-item { | |
| 215 | margin-right: 10px; | |
| 216 | } | |
| 217 | .el-divider--horizontal { | |
| 218 | margin-top: 6px; | |
| 219 | } | |
| 220 | } | |
| 221 | </style> | |
