From 9e876a11f6f0b384d4b1f0a60e066944dbcdeaa5 Mon Sep 17 00:00:00 2001 From: houzhongjian <houzhongyi@126.com> Date: 星期三, 27 十一月 2024 09:55:45 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/system/tenantPackage/index.vue | 166 ++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 127 insertions(+), 39 deletions(-) diff --git a/src/views/system/tenantPackage/index.vue b/src/views/system/tenantPackage/index.vue index fc68a4d..e135ec5 100644 --- a/src/views/system/tenantPackage/index.vue +++ b/src/views/system/tenantPackage/index.vue @@ -55,43 +55,51 @@ <!-- 列表 --> <ContentWrap> - <el-table v-loading="loading" :data="list"> - <el-table-column label="套餐编号" align="center" prop="id" width="120" /> - <el-table-column label="套餐名" align="center" prop="name" /> - <el-table-column label="状态" align="center" prop="status" width="100"> - <template #default="scope"> - <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> - </template> - </el-table-column> - <el-table-column label="备注" align="center" prop="remark" /> - <el-table-column - label="创建时间" - align="center" - prop="createTime" - width="180" - :formatter="dateFormatter" - /> - <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-button - link - type="primary" - @click="openForm('update', scope.row.id)" - v-hasPermi="['system:tenant-package:update']" + <el-row :gutter="20"> + <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" /> + <div class="card-middle"> + <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> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item + command="handleUpdate" + v-if="checkPermi(['system:tenant-package:update'])" + > + <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" />删除 + </el-dropdown-item> + </el-dropdown-menu> + </template> + </el-dropdown> + </div> + </div> + <div class="description">{{item.description}}</div> + <div class="label-areas"> + <el-tag + :disable-transitions="true" + :key="index" + v-for="(label, index) in item.labels" + :index="index" + class="label" > - 修改 - </el-button> - <el-button - link - type="danger" - @click="handleDelete(scope.row.id)" - v-hasPermi="['system:tenant-package:delete']" - > - 删除 - </el-button> - </template> - </el-table-column> - </el-table> + {{ label }} + </el-tag> + </div> + </el-col> + </div> + </el-row> <!-- 分页 --> <Pagination :total="total" @@ -106,9 +114,10 @@ </template> <script lang="ts" setup> import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' -import { dateFormatter } from '@/utils/formatTime' 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' }) @@ -117,7 +126,8 @@ const loading = ref(true) // 列表的加载中 const total = ref(0) // 列表的总页数 -const list = ref([]) // 列表的数据 +const packages = ref([]) // 列表的数据 + const queryParams = reactive({ pageNo: 1, pageSize: 10, @@ -133,7 +143,7 @@ loading.value = true try { const data = await TenantPackageApi.getTenantPackagePage(queryParams) - list.value = data.list + packages.value = data.list total.value = data.total } finally { loading.value = false @@ -158,6 +168,20 @@ formRef.value.open(type, id) } +/** 操作分发 */ +const handleCommand = (command: string, row: TenantPackageVO) => { + switch (command) { + case 'handleUpdate': + openForm('update', row.id) + break + case 'handleDelete': + handleDelete(row.id) + break + default: + break + } +} + /** 删除按钮操作 */ const handleDelete = async (id: number) => { try { @@ -175,4 +199,68 @@ onMounted(() => { getList() }) + </script> +<style lang="scss" scoped> +.package-card { + display: inline-block; + width: 396px; + height: 379px; + background: #FFFFFF; + border-radius: 4px 4px 4px 4px; + border: 1px solid #EBEDF0; + margin: 0px 8px 8px 0; +} +.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; + font-family: Microsoft YaHei UI, Microsoft YaHei UI; + font-weight: bold; + font-size: 20px; + color: #282F3D; +} +.tenant-operation { + margin-right: 12px; +} +.description { + margin: 8px 12px; + width: 372px; + height: 36px; + font-family: Microsoft YaHei, Microsoft YaHei; + font-weight: 400; + font-size: 14px; + color: #6B7785; + line-height: 18px; + word-wrap: break-word; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.label-areas { + display: flex; + flex-wrap: wrap; + height: 54px; + width: 396px; + margin: 0 8px; +} +.label { + width: 80px; + height: 20px; + margin: 4px; + border-radius: 80px 80px 80px 80px; + border: 1px solid #417CFF; +} +</style> -- Gitblit v1.9.3