设备类型管理界面

snowy-admin-web/src/views/basicset/devicetype/category.vue

@@ -0,0 +1,136 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<div class="table-head">
+					<a-button type="primary">
+						<template #icon><plus-outlined /></template>新增
+					</a-button>
+				</div>
+			</template>
+			<template #bodyCell="{ column }">
+				<template v-if="column.dataIndex === 'action'">
+					<a-button type="link" size="small">编辑</a-button>
+					<a-button type="link" size="small">删除</a-button>
+				</template>
+			</template>
+		</s-table>
+	</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '类别编号',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '类别名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '描述',
+			dataIndex: 'describe',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '创立日期',
+			dataIndex: 'date',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '创建人',
+			dataIndex: 'creator',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 150
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						code: 'Y6578945621',
+						name: '20241105123456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 07:03:24',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945622',
+						name: '20241105223456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 09:21:51',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945623',
+						name: '202411051323456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 11:06:20',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945624',
+						name: '202411051423456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 11:54:19',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945625',
+						name: '202411051523456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+
+						date: '2024-09-28 16:17:36',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945626',
+						name: '202411051463456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 19:35:58',
+						creator: 'ADMIN'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+
+		.table-head {
+			text-align: right;
+		}
+
+		:deep(.ant-table-pagination-right) {
+			justify-content: center !important;
+		}
+	}
+</style>

snowy-admin-web/src/views/basicset/devicetype/index.vue

@@ -1,12 +1,84 @@
 <template>
-	<div>设备类型管理</div>
+	<div class="query-box">
+		<div class="query-head">
+			<div class="query-tbas">
+				<div class="tbas-title" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">对象类别管理</div>
+				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
+				<div class="tbas-title" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">对象型号管理</div>
+			</div>
+		</div>
+
+		<div class="query-body">
+			<Category ref="categoryRef" v-if="activeKey == '1'" />
+			<Model ref="modelRef" v-if="activeKey == '2'" />
+		</div>
+	</div>
 </template>
 <script setup>
+	import Category from './category.vue'
+	import Model from './model.vue'
+
+	const activeKey = ref('1')
+	const categoryRef = ref(null)
+	const modelRef = ref(null)
+
 	onMounted(() => {})
 
 	onBeforeMount(() => {})
 
+	// 点击标签
+	const activeclick = (v) => {
+		activeKey.value = v
+	}
+
 	// 监听
-	watch()
+	watch(
+		() => activeKey.value,
+		(newValue) => {
+			if (newValue === '1' && categoryRef.value) {
+				categoryRef.value.loadData()
+			} else if (newValue === '2' && modelRef.value) {
+				modelRef.value.loadData()
+			}
+		},
+		{
+			immediate: true // 立即执行
+		}
+	)
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+	.query-box {
+		width: 100%;
+		height: 100vh;
+		overflow: hidden;
+		background-color: #fff;
+
+		// 顶部
+		.query-head {
+			width: 100%;
+			height: 50px;
+			display: flex;
+			justify-content: space-between;
+			padding: 15px;
+			border-bottom: 1px solid #e7e7e7;
+
+			.query-tbas {
+				width: 95%;
+				display: flex;
+
+				.tbas-title {
+					height: 35px;
+					line-height: 25px;
+					color: #a7a7a7;
+					font-size: 16px;
+					cursor: pointer;
+				}
+
+				.active {
+					color: #1b8fff;
+					border-bottom: 2px solid #1b8fff;
+				}
+			}
+		}
+	}
+</style>

snowy-admin-web/src/views/basicset/devicetype/model.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<div class="table-head">
+					<a-button type="primary">
+						<template #icon><plus-outlined /></template>新增
+					</a-button>
+				</div>
+			</template>
+			<template #bodyCell="{ column }">
+				<template v-if="column.dataIndex === 'action'">
+					<a-button type="link" size="small">编辑</a-button>
+					<a-button type="link" size="small">删除</a-button>
+				</template>
+			</template>
+		</s-table>
+	</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '型号编号',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '型号名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '描述',
+			dataIndex: 'describe',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '创立日期',
+			dataIndex: 'date',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '创建人',
+			dataIndex: 'creator',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 150
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						code: 'Y6578945621',
+						name: '20241105123456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 07:03:24',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945622',
+						name: '20241105223456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 09:21:51',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945623',
+						name: '202411051323456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 11:06:20',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945624',
+						name: '202411051423456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 11:54:19',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945625',
+						name: '202411051523456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+
+						date: '2024-09-28 16:17:36',
+						creator: 'ADMIN'
+					},
+					{
+						code: 'Y6578945626',
+						name: '202411051463456',
+						describe: '对象类型管理描述描述描述描述描述描述描述描述描述',
+						date: '2024-09-28 19:35:58',
+						creator: 'ADMIN'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+		.table-head {
+			text-align: right;
+		}
+	}
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
+</style>