iailab-plat-ui-vue3.git

houzhongjian

2024-11-27 bc910a95b8584460b56a3162a9e636e0b5124823

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