From 291bf570b2106cb99b0e689af7d6ccaacc9e5c1c Mon Sep 17 00:00:00 2001 From: 潘志宝 <979469083@qq.com> Date: 星期三, 25 十二月 2024 18:10:42 +0800 Subject: [PATCH] Merge branch 'master' of http://dlindusit.com:53929/r/iailab-plat-ui-vue3 --- src/views/system/tenantPackage/index.vue | 95 +++++++++++++++++++++++++++++------------------ 1 files changed, 59 insertions(+), 36 deletions(-) diff --git a/src/views/system/tenantPackage/index.vue b/src/views/system/tenantPackage/index.vue index 254105b..56f8f3d 100644 --- a/src/views/system/tenantPackage/index.vue +++ b/src/views/system/tenantPackage/index.vue @@ -27,64 +27,66 @@ /> </el-select> </el-form-item> - <el-form-item label="创建时间" prop="createTime"> - <el-date-picker - v-model="queryParams.createTime" - type="daterange" - value-format="YYYY-MM-DD HH:mm:ss" - start-placeholder="开始日期" - end-placeholder="结束日期" - class="!w-240px" - /> - </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-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-button type="primary" plain @click="openForm('create')" v-hasPermi="['system:tenant-package:create']" > - <Icon icon="ep:plus" class="mr-5px" /> + <Icon icon="ep:plus" class="mr-5px"/> 新增 </el-button> </el-form-item> </el-form> </ContentWrap> - <!-- 列表 --> <ContentWrap> - <div v-loading="loading" class="package-card" v-for="(item, index) in packages" :key="`dynamics-${index}`"> - <el-col :span="6"> - <img class="card-icon" :src="item.icon" /> + <el-skeleton :loading="loading"> + <div class="package-card" v-for="(item, index) in packages" :key="`dynamics-${index}`"> + <div class="card-content"> + <img class="card-icon" :src="item.icon"/> <div class="card-middle"> - <div class="tenant-title">{{item.name}}</div> + <div class="tenant-title">{{ item.name }}</div> <div class="tenant-operation"> - <el-dropdown @command="(command) => handleCommand(command, item)"> - <el-button type="primary" link><Icon icon="ep:more-filled" /> </el-button> + <el-dropdown @command="(command) => handleCommand(command, item)" + v-hasPermi="[ + 'system:tenant-package:update', + 'system:tenant-package:delete' + ]"> + <el-button type="primary" link> + <Icon icon="ep:more-filled"/> + </el-button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="handleUpdate" v-if="checkPermi(['system:tenant-package:update'])" > - <Icon icon="ep:edit" />修改 + <Icon icon="ep:edit"/> + 修改 </el-dropdown-item> - </el-dropdown-menu> - <el-dropdown-menu> <el-dropdown-item command="handleDelete" v-if="checkPermi(['system:tenant-package:delete'])" > - <Icon icon="ep:delete" />删除 + <Icon icon="ep:delete"/> + 删除 </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </div> - <div class="description">{{item.description}}</div> + <div class="description">{{ item.description }}</div> <div class="label-areas"> <el-tag :disable-transitions="true" @@ -96,10 +98,12 @@ {{ label }} </el-tag> </div> - </el-col> + </div> </div> + </el-skeleton> <!-- 分页 --> <Pagination + class="pagination" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @@ -108,23 +112,23 @@ </ContentWrap> <!-- 表单弹窗:添加/修改 --> - <TenantPackageForm ref="formRef" @success="getList" /> + <TenantPackageForm ref="formRef" @success="getList"/> </template> <script lang="ts" setup> -import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' +import {DICT_TYPE, getIntDictOptions} from '@/utils/dict' import * as TenantPackageApi from '@/api/system/tenantPackage' import TenantPackageForm from './TenantPackageForm.vue' import {TenantPackageVO} from "@/api/system/tenantPackage"; import {checkPermi} from "@/utils/permission"; -defineOptions({ name: 'SystemTenantPackage' }) +defineOptions({name: 'SystemTenantPackage'}) const message = useMessage() // 消息弹窗 -const { t } = useI18n() // 国际化 +const {t} = useI18n() // 国际化 const loading = ref(true) // 列表的加载中 const total = ref(0) // 列表的总页数 -const packages = ref([]) // 列表的数据 +const packages = ref([]) const queryParams = reactive({ pageNo: 1, @@ -138,7 +142,6 @@ /** 查询列表 */ const getList = async () => { - loading.value = true try { const data = await TenantPackageApi.getTenantPackagePage(queryParams) packages.value = data.list @@ -190,13 +193,18 @@ message.success(t('common.delSuccess')) // 刷新列表 await getList() - } catch {} + } catch { + } +} + +const initData = async () => { + await Promise.all([ + getList() + ]) } /** 初始化 **/ -onMounted(() => { - getList() -}) +initData() </script> <style lang="scss" scoped> @@ -209,17 +217,24 @@ border: 1px solid #EBEDF0; margin: 0px 8px 8px 0; } + +.card-content { + margin-left: 10px; +} + .card-icon { width: 372px; height: 200px; margin: 10px 0 10px 2px; } + .card-middle { width: 396px; height: 25px; margin: 0 12px; display: flex; } + .tenant-title { width: 340px; height: 25px; @@ -228,9 +243,11 @@ font-size: 20px; color: #282F3D; } + .tenant-operation { margin-right: 12px; } + .description { margin: 8px 12px; width: 372px; @@ -247,6 +264,7 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; } + .label-areas { display: flex; flex-wrap: wrap; @@ -254,6 +272,7 @@ width: 396px; margin: 0 8px; } + .label { width: 80px; height: 20px; @@ -261,4 +280,8 @@ border-radius: 80px 80px 80px 80px; border: 1px solid #417CFF; } +.pagination { + margin-right: 30px; + margin-top: 400px; +} </style> -- Gitblit v1.9.3