| 提交 | 用户 | 时间 | ||
| 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 | ||
| c9a6f7 | 109 | const { push } = useRouter() |
| 820397 | 110 | const message = useMessage() // 消息弹窗 |
| H | 111 | const loading = ref(true) // 列表的加载中 |
| 3e359e | 112 | const isCategorySorting = ref(false) // 是否 category 正处于排序状态 |
| 820397 | 113 | const queryParams = reactive({ |
| 3e359e | 114 | name: undefined |
| 820397 | 115 | }) |
| H | 116 | const queryFormRef = ref() // 搜索的表单 |
| 3e359e | 117 | const categoryGroup: any = ref([]) // 按照 category 分组的数据 |
| H | 118 | const originalData: any = ref([]) // 原始数据 |
| 820397 | 119 | |
| H | 120 | /** 搜索按钮操作 */ |
| 121 | const handleQuery = () => { | |
| 122 | getList() | |
| 123 | } | |
| 124 | ||
| 125 | /** 添加/修改操作 */ | |
| 126 | const formRef = ref() | |
| 127 | const openForm = (type: string, id?: number) => { | |
| c9a6f7 | 128 | if (type === 'create') { |
| H | 129 | push({ name: 'BpmModelCreate' }) |
| 130 | } else { | |
| 131 | push({ | |
| 132 | name: 'BpmModelUpdate', | |
| 133 | params: { id } | |
| 134 | }) | |
| 135 | } | |
| 820397 | 136 | } |
| H | 137 | |
| 138 | /** 流程表单的详情按钮操作 */ | |
| 139 | const formDetailVisible = ref(false) | |
| 140 | const formDetailPreview = ref({ | |
| 141 | rule: [], | |
| 142 | option: {} | |
| 143 | }) | |
| 3e359e | 144 | |
| H | 145 | /** 右上角设置按钮 */ |
| 146 | const handleCommand = (command: string) => { | |
| 147 | switch (command) { | |
| 148 | case 'handleCategoryAdd': | |
| 149 | handleCategoryAdd() | |
| 150 | break | |
| 151 | case 'handleCategorySort': | |
| 152 | handleCategorySort() | |
| 153 | break | |
| 154 | default: | |
| 155 | break | |
| 820397 | 156 | } |
| H | 157 | } |
| 158 | ||
| 3e359e | 159 | /** 新建分类 */ |
| H | 160 | const categoryFormRef = ref() |
| 161 | const handleCategoryAdd = () => { | |
| 162 | categoryFormRef.value.open('create') | |
| 163 | } | |
| 164 | ||
| 165 | /** 分类排序的提交 */ | |
| 166 | const handleCategorySort = () => { | |
| 167 | // 保存初始数据 | |
| 168 | originalData.value = cloneDeep(categoryGroup.value) | |
| 169 | isCategorySorting.value = true | |
| 170 | } | |
| 171 | ||
| 172 | /** 分类排序的取消 */ | |
| 173 | const handleCategorySortCancel = () => { | |
| 174 | // 恢复初始数据 | |
| 175 | categoryGroup.value = cloneDeep(originalData.value) | |
| 176 | isCategorySorting.value = false | |
| 177 | } | |
| 178 | ||
| 179 | /** 分类排序的保存 */ | |
| 180 | const handleCategorySortSubmit = async () => { | |
| 181 | // 保存排序 | |
| 182 | const ids = categoryGroup.value.map((item: any) => item.id) | |
| 183 | await CategoryApi.updateCategorySortBatch(ids) | |
| 184 | // 刷新列表 | |
| 185 | isCategorySorting.value = false | |
| 186 | message.success('排序分类成功') | |
| 187 | await getList() | |
| 188 | } | |
| 189 | ||
| 190 | /** 加载数据 */ | |
| 191 | const getList = async () => { | |
| 192 | loading.value = true | |
| 193 | try { | |
| 194 | // 查询模型 + 分裂的列表 | |
| 195 | const modelList = await ModelApi.getModelList(queryParams.name) | |
| 196 | const categoryList = await CategoryApi.getCategorySimpleList() | |
| 197 | // 按照 category 聚合 | |
| 198 | // 注意：必须一次性赋值给 categoryGroup，否则每次操作后，列表会重新渲染，滚动条的位置会偏离！！！ | |
| 199 | categoryGroup.value = categoryList.map((category: any) => ({ | |
| 200 | ...category, | |
| 201 | modelList: modelList.filter((model: any) => model.categoryName == category.name) | |
| 202 | })) | |
| 203 | } finally { | |
| 204 | loading.value = false | |
| 205 | } | |
| 820397 | 206 | } |
| H | 207 | |
| 208 | /** 初始化 **/ | |
| 3e359e | 209 | onMounted(() => { |
| H | 210 | getList() |
| 820397 | 211 | }) |
| H | 212 | </script> |
| 3e359e | 213 | |
| H | 214 | <style lang="scss" scoped> |
| 215 | :deep() { | |
| 216 | .el-table--fit .el-table__inner-wrapper:before { | |
| 217 | height: 0; | |
| 218 | } | |
| 219 | .el-card { | |
| 220 | border-radius: 8px; | |
| 221 | } | |
| 222 | .el-form--inline .el-form-item { | |
| 223 | margin-right: 10px; | |
| 224 | } | |
| 225 | .el-divider--horizontal { | |
| 226 | margin-top: 6px; | |
| 227 | } | |
| 228 | } | |
| 229 | </style> | |
