From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/bpm/model/index.vue | 228 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 228 insertions(+), 0 deletions(-)
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
new file mode 100644
index 0000000..d272dcd
--- /dev/null
+++ b/src/views/bpm/model/index.vue
@@ -0,0 +1,228 @@
+<template>
+ <ContentWrap>
+ <div class="flex justify-between pl-20px items-center">
+ <h3 class="font-extrabold">娴佺▼妯″瀷</h3>
+ <!-- 鎼滅储宸ヤ綔鏍� -->
+ <el-form
+ v-if="!isCategorySorting"
+ class="-mb-15px flex mr-10px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ @submit.prevent
+ >
+ <el-form-item prop="name" class="ml-auto">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="鎼滅储娴佺▼"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ >
+ <template #prefix>
+ <Icon icon="ep:search" class="mx-10px" />
+ </template>
+ </el-input>
+ </el-form-item>
+ <!-- 鍙充笂瑙掞細鏂板缓妯″瀷銆佹洿澶氭搷浣� -->
+ <el-form-item>
+ <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+ <Icon icon="ep:plus" class="mr-5px" /> 鏂板缓妯″瀷
+ </el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
+ <el-button class="w-30px" plain>
+ <Icon icon="ep:setting" />
+ </el-button>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item command="handleCategoryAdd">
+ <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
+ 鏂板缓鍒嗙被
+ </el-dropdown-item>
+ <el-dropdown-item command="handleCategorySort">
+ <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
+ 鍒嗙被鎺掑簭
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </el-form-item>
+ </el-form>
+ <div class="mr-20px" v-else>
+ <el-button @click="handleCategorySortCancel"> 鍙� 娑� </el-button>
+ <el-button type="primary" @click="handleCategorySortSubmit"> 淇濆瓨鎺掑簭 </el-button>
+ </div>
+ </div>
+
+ <el-divider />
+
+ <!-- 鎸夌収鍒嗙被锛屽睍绀哄叾鎵�灞炵殑妯″瀷鍒楄〃 -->
+ <div class="px-15px">
+ <draggable
+ :disabled="!isCategorySorting"
+ v-model="categoryGroup"
+ item-key="id"
+ :animation="400"
+ >
+ <template #item="{ element }">
+ <ContentWrap
+ class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
+ v-loading="loading"
+ :body-style="{ padding: 0 }"
+ :key="element.id"
+ >
+ <CategoryDraggableModel
+ :isCategorySorting="isCategorySorting"
+ :categoryInfo="element"
+ @success="getList"
+ />
+ </ContentWrap>
+ </template>
+ </draggable>
+ </div>
+ </ContentWrap>
+
+ <!-- 琛ㄥ崟寮圭獥锛氭坊鍔犲垎绫� -->
+ <CategoryForm ref="categoryFormRef" @success="getList" />
+ <!-- 寮圭獥锛氳〃鍗曡鎯� -->
+ <Dialog title="琛ㄥ崟璇︽儏" v-model="formDetailVisible" width="800">
+ <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+ </Dialog>
+</template>
+
+<script lang="ts" setup>
+import draggable from 'vuedraggable'
+import { CategoryApi } from '@/api/bpm/category'
+import * as ModelApi from '@/api/bpm/model'
+import CategoryForm from '../category/CategoryForm.vue'
+import { cloneDeep } from 'lodash-es'
+import CategoryDraggableModel from './CategoryDraggableModel.vue'
+
+defineOptions({ name: 'BpmModel' })
+
+const { push } = useRouter()
+const message = useMessage() // 娑堟伅寮圭獥
+const loading = ref(true) // 鍒楄〃鐨勫姞杞戒腑
+const isCategorySorting = ref(false) // 鏄惁 category 姝ｅ浜庢帓搴忕姸鎬�
+const queryParams = reactive({
+ name: undefined
+})
+const queryFormRef = ref() // 鎼滅储鐨勮〃鍗�
+const categoryGroup: any = ref([]) // 鎸夌収 category 鍒嗙粍鐨勬暟鎹�
+const originalData: any = ref([]) // 鍘熷鏁版嵁
+
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+ getList()
+}
+
+/** 娣诲姞/淇敼鎿嶄綔 */
+const openForm = (type: string, id?: number) => {
+ if (type === 'create') {
+ push({ name: 'BpmModelCreate' })
+ } else {
+ push({
+ name: 'BpmModelUpdate',
+ params: { id }
+ })
+ }
+}
+
+/** 娴佺▼琛ㄥ崟鐨勮鎯呮寜閽搷浣� */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+ rule: [],
+ option: {}
+})
+
+/** 鍙充笂瑙掕缃寜閽� */
+const handleCommand = (command: string) => {
+ switch (command) {
+ case 'handleCategoryAdd':
+ handleCategoryAdd()
+ break
+ case 'handleCategorySort':
+ handleCategorySort()
+ break
+ default:
+ break
+ }
+}
+
+/** 鏂板缓鍒嗙被 */
+const categoryFormRef = ref()
+const handleCategoryAdd = () => {
+ categoryFormRef.value.open('create')
+}
+
+/** 鍒嗙被鎺掑簭鐨勬彁浜� */
+const handleCategorySort = () => {
+ // 淇濆瓨鍒濆鏁版嵁
+ originalData.value = cloneDeep(categoryGroup.value)
+ isCategorySorting.value = true
+}
+
+/** 鍒嗙被鎺掑簭鐨勫彇娑� */
+const handleCategorySortCancel = () => {
+ // 鎭㈠鍒濆鏁版嵁
+ categoryGroup.value = cloneDeep(originalData.value)
+ isCategorySorting.value = false
+}
+
+/** 鍒嗙被鎺掑簭鐨勪繚瀛� */
+const handleCategorySortSubmit = async () => {
+ // 淇濆瓨鎺掑簭
+ const ids = categoryGroup.value.map((item: any) => item.id)
+ await CategoryApi.updateCategorySortBatch(ids)
+ // 鍒锋柊鍒楄〃
+ isCategorySorting.value = false
+ message.success('鎺掑簭鍒嗙被鎴愬姛')
+ await getList()
+}
+
+/** 鍔犺浇鏁版嵁 */
+const getList = async () => {
+ loading.value = true
+ try {
+ // 鏌ヨ妯″瀷 + 鍒嗚鐨勫垪琛�
+ const modelList = await ModelApi.getModelList(queryParams.name)
+ const categoryList = await CategoryApi.getCategorySimpleList()
+ // 鎸夌収 category 鑱氬悎
+ // 娉ㄦ剰锛氬繀椤讳竴娆℃�ц祴鍊肩粰 categoryGroup锛屽惁鍒欐瘡娆℃搷浣滃悗锛屽垪琛ㄤ細閲嶆柊娓叉煋锛屾粴鍔ㄦ潯鐨勪綅缃細鍋忕锛侊紒锛�
+ categoryGroup.value = categoryList.map((category: any) => ({
+ ...category,
+ modelList: modelList.filter((model: any) => model.categoryName == category.name)
+ }))
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 鍒濆鍖� **/
+onActivated(() => {
+ getList()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep() {
+ .el-table--fit .el-table__inner-wrapper::before {
+ height: 0;
+ }
+
+ .el-card {
+ border-radius: 8px;
+ }
+
+ .el-form--inline .el-form-item {
+ margin-right: 10px;
+ }
+
+ .el-divider--horizontal {
+ margin-top: 6px;
+ }
+}
+</style>
--
Gitblit v1.8.0