| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <!-- 搜索 --> |
| 3 | <ContentWrap> | |
| 4 | <el-form | |
| 5 | class="-mb-15px" | |
| 6 | :model="queryParams" | |
| 7 | ref="queryFormRef" | |
| 8 | :inline="true" | |
| 9 | label-width="68px" | |
| 10 | > | |
| 11 | <el-form-item label="套餐名" prop="name"> | |
| 12 | <el-input | |
| 13 | v-model="queryParams.name" | |
| 14 | placeholder="请输入套餐名" | |
| 15 | clearable | |
| 16 | @keyup.enter="handleQuery" | |
| 17 | class="!w-240px" | |
| 18 | /> | |
| 19 | </el-form-item> | |
| 20 | <el-form-item label="状态" prop="status"> | |
| 21 | <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px"> | |
| 22 | <el-option | |
| 23 | v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" | |
| 24 | :key="dict.value" | |
| 25 | :label="dict.label" | |
| 26 | :value="dict.value" | |
| 27 | /> | |
| 28 | </el-select> | |
| 29 | </el-form-item> | |
| 30 | <el-form-item label="创建时间" prop="createTime"> | |
| 31 | <el-date-picker | |
| 32 | v-model="queryParams.createTime" | |
| 33 | type="daterange" | |
| 34 | value-format="YYYY-MM-DD HH:mm:ss" | |
| 35 | start-placeholder="开始日期" | |
| 36 | end-placeholder="结束日期" | |
| 37 | class="!w-240px" | |
| 38 | /> | |
| 39 | </el-form-item> | |
| 40 | <el-form-item> | |
| 41 | <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> | |
| 42 | <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> | |
| 43 | <el-button | |
| 44 | type="primary" | |
| 45 | plain | |
| 46 | @click="openForm('create')" | |
| 47 | v-hasPermi="['system:tenant-package:create']" | |
| 48 | > | |
| 49 | <Icon icon="ep:plus" class="mr-5px" /> | |
| 50 | 新增 | |
| 51 | </el-button> | |
| 52 | </el-form-item> | |
| 53 | </el-form> | |
| 54 | </ContentWrap> | |
| 55 | ||
| 56 | <!-- 列表 --> | |
| 57 | <ContentWrap> | |
| 94d91d | 58 | <el-row :gutter="20"> |
| H | 59 | <div v-loading="loading" class="package-card" v-for="(item, index) in packages" :key="`dynamics-${index}`"> |
| 60 | <el-col :span="6"> | |
| 61 | <img class="card-icon" :src="item.icon" /> | |
| 62 | <div class="card-middle"> | |
| 63 | <div class="tenant-title">{{item.name}}</div> | |
| 64 | <div class="tenant-operation"> | |
| 65 | <el-dropdown @command="(command) => handleCommand(command, item)"> | |
| 66 | <el-button type="primary" link><Icon icon="ep:more-filled" /> </el-button> | |
| 67 | <template #dropdown> | |
| 68 | <el-dropdown-menu> | |
| 69 | <el-dropdown-item | |
| 70 | command="handleUpdate" | |
| 71 | v-if="checkPermi(['system:tenant-package:update'])" | |
| 72 | > | |
| 73 | <Icon icon="ep:edit" />修改 | |
| 74 | </el-dropdown-item> | |
| 75 | </el-dropdown-menu> | |
| 76 | <el-dropdown-menu> | |
| 77 | <el-dropdown-item | |
| 78 | command="handleDelete" | |
| 79 | v-if="checkPermi(['system:tenant-package:delete'])" | |
| 80 | > | |
| 81 | <Icon icon="ep:delete" />删除 | |
| 82 | </el-dropdown-item> | |
| 83 | </el-dropdown-menu> | |
| 84 | </template> | |
| 85 | </el-dropdown> | |
| 86 | </div> | |
| 87 | </div> | |
| 88 | <div class="description">{{item.description}}</div> | |
| 89 | <div class="label-areas"> | |
| 90 | <el-tag | |
| 91 | :disable-transitions="true" | |
| 92 | :key="index" | |
| 93 | v-for="(label, index) in item.labels" | |
| 94 | :index="index" | |
| 95 | class="label" | |
| 820397 | 96 | > |
| 94d91d | 97 | {{ label }} |
| H | 98 | </el-tag> |
| 99 | </div> | |
| 100 | </el-col> | |
| 101 | </div> | |
| 102 | </el-row> | |
| 820397 | 103 | <!-- 分页 --> |
| H | 104 | <Pagination |
| 105 | :total="total" | |
| 106 | v-model:page="queryParams.pageNo" | |
| 107 | v-model:limit="queryParams.pageSize" | |
| 108 | @pagination="getList" | |
| 109 | /> | |
| 110 | </ContentWrap> | |
| 111 | ||
| 112 | <!-- 表单弹窗：添加/修改 --> | |
| 113 | <TenantPackageForm ref="formRef" @success="getList" /> | |
| 114 | </template> | |
| 115 | <script lang="ts" setup> | |
| 116 | import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' | |
| 117 | import * as TenantPackageApi from '@/api/system/tenantPackage' | |
| 118 | import TenantPackageForm from './TenantPackageForm.vue' | |
| 94d91d | 119 | import {TenantPackageVO} from "@/api/system/tenantPackage"; |
| H | 120 | import {checkPermi} from "@/utils/permission"; |
| 820397 | 121 | |
| H | 122 | defineOptions({ name: 'SystemTenantPackage' }) |
| 123 | ||
| 124 | const message = useMessage() // 消息弹窗 | |
| 125 | const { t } = useI18n() // 国际化 | |
| 126 | ||
| 127 | const loading = ref(true) // 列表的加载中 | |
| 128 | const total = ref(0) // 列表的总页数 | |
| 94d91d | 129 | const packages = ref([]) // 列表的数据 |
| H | 130 | |
| 820397 | 131 | const queryParams = reactive({ |
| H | 132 | pageNo: 1, |
| 133 | pageSize: 10, | |
| 134 | name: undefined, | |
| 135 | status: undefined, | |
| 136 | remark: undefined, | |
| 137 | createTime: [] | |
| 138 | }) | |
| 139 | const queryFormRef = ref() // 搜索的表单 | |
| 140 | ||
| 141 | /** 查询列表 */ | |
| 142 | const getList = async () => { | |
| 143 | loading.value = true | |
| 144 | try { | |
| 145 | const data = await TenantPackageApi.getTenantPackagePage(queryParams) | |
| 94d91d | 146 | packages.value = data.list |
| 820397 | 147 | total.value = data.total |
| H | 148 | } finally { |
| 149 | loading.value = false | |
| 150 | } | |
| 151 | } | |
| 152 | ||
| 153 | /** 搜索按钮操作 */ | |
| 154 | const handleQuery = () => { | |
| 155 | queryParams.pageNo = 1 | |
| 156 | getList() | |
| 157 | } | |
| 158 | ||
| 159 | /** 重置按钮操作 */ | |
| 160 | const resetQuery = () => { | |
| 161 | queryFormRef.value?.resetFields() | |
| 162 | getList() | |
| 163 | } | |
| 164 | ||
| 165 | /** 添加/修改操作 */ | |
| 166 | const formRef = ref() | |
| 167 | const openForm = (type: string, id?: number) => { | |
| 168 | formRef.value.open(type, id) | |
| 169 | } | |
| 170 | ||
| 94d91d | 171 | /** 操作分发 */ |
| H | 172 | const handleCommand = (command: string, row: TenantPackageVO) => { |
| 173 | switch (command) { | |
| 174 | case 'handleUpdate': | |
| 175 | openForm('update', row.id) | |
| 176 | break | |
| 177 | case 'handleDelete': | |
| 178 | handleDelete(row.id) | |
| 179 | break | |
| 180 | default: | |
| 181 | break | |
| 182 | } | |
| 183 | } | |
| 184 | ||
| 820397 | 185 | /** 删除按钮操作 */ |
| H | 186 | const handleDelete = async (id: number) => { |
| 187 | try { | |
| 188 | // 删除的二次确认 | |
| 189 | await message.delConfirm() | |
| 190 | // 发起删除 | |
| 191 | await TenantPackageApi.deleteTenantPackage(id) | |
| 192 | message.success(t('common.delSuccess')) | |
| 193 | // 刷新列表 | |
| 194 | await getList() | |
| 195 | } catch {} | |
| 196 | } | |
| 197 | ||
| 198 | /** 初始化 **/ | |
| 199 | onMounted(() => { | |
| 200 | getList() | |
| 201 | }) | |
| 94d91d | 202 | |
| 820397 | 203 | </script> |
| 94d91d | 204 | <style lang="scss" scoped> |
| H | 205 | .package-card { |
| 206 | display: inline-block; | |
| 207 | width: 396px; | |
| 208 | height: 379px; | |
| 209 | background: #FFFFFF; | |
| 210 | border-radius: 4px 4px 4px 4px; | |
| 211 | border: 1px solid #EBEDF0; | |
| 212 | margin: 0px 8px 8px 0; | |
| 213 | } | |
| 214 | .card-icon { | |
| 215 | width: 372px; | |
| 216 | height: 200px; | |
| 217 | margin: 10px 0 10px 2px; | |
| 218 | } | |
| 219 | .card-middle { | |
| 220 | width: 396px; | |
| 221 | height: 25px; | |
| 222 | margin: 0 12px; | |
| 223 | display: flex; | |
| 224 | } | |
| 225 | .tenant-title { | |
| 226 | width: 340px; | |
| 227 | height: 25px; | |
| 228 | font-family: Microsoft YaHei UI, Microsoft YaHei UI; | |
| 229 | font-weight: bold; | |
| 230 | font-size: 20px; | |
| 231 | color: #282F3D; | |
| 232 | } | |
| 233 | .tenant-operation { | |
| 234 | margin-right: 12px; | |
| 235 | } | |
| 236 | .description { | |
| 237 | margin: 8px 12px; | |
| 238 | width: 372px; | |
| 239 | height: 36px; | |
| 240 | font-family: Microsoft YaHei, Microsoft YaHei; | |
| 241 | font-weight: 400; | |
| 242 | font-size: 14px; | |
| 243 | color: #6B7785; | |
| 244 | line-height: 18px; | |
| 245 | word-wrap: break-word; | |
| 246 | overflow: hidden; | |
| 247 | text-overflow: ellipsis; | |
| 248 | display: -webkit-box; | |
| 249 | -webkit-line-clamp: 2; | |
| 250 | -webkit-box-orient: vertical; | |
| 251 | } | |
| 252 | .label-areas { | |
| 253 | display: flex; | |
| 254 | flex-wrap: wrap; | |
| 255 | height: 54px; | |
| 256 | width: 396px; | |
| 257 | margin: 0 8px; | |
| 258 | } | |
| 259 | .label { | |
| 260 | width: 80px; | |
| 261 | height: 20px; | |
| 262 | margin: 4px; | |
| 263 | border-radius: 80px 80px 80px 80px; | |
| 264 | border: 1px solid #417CFF; | |
| 265 | } | |
| 266 | </style> | |
