平面图展示

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

@@ -1,12 +1,138 @@
 <template>
-	<div>平面图展示</div>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<!-- 搜索区域 -->
+				<div class="table-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '80px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
+									><a-form-item label="平面图名称" name="name">
+										<a-input v-model:value="searchFormState.name" placeholder="请输入平面图名称" /> </a-form-item
+								></a-col>
+							</a-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+				</div>
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-left">
+						<a-button type="primary">
+							<template #icon><plus-outlined /></template>新增
+						</a-button>
+					</div>
+				</div>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'action'">
+					<a-button type="link" size="small">编辑</a-button>
+					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
+						<a-button type="link" danger size="small">删除</a-button>
+					</a-popconfirm>
+					<a-button type="link" size="small">记录</a-button>
+				</template>
+			</template>
+		</s-table>
+	</div>
 </template>
-<script setup>
-	onMounted(() => {})
 
-	onBeforeMount(() => {})
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormRef = ref()
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '图片名称',
+			dataIndex: 'imgname',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '所属部门',
+			dataIndex: 'ssbm',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '上传时间',
+			dataIndex: 'ssbm',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 150
+		}
+	]
 
-	// 监听
-	watch()
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [],
+				size: 10,
+				total: 0
+			}
+			return obj
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+	// 删除
+	const deleteData = (record) => {
+		console.log(record, '删除')
+	}
 </script>
-<style lang="less" scoped></style>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+
+		:deep(.ant-table-pagination-right) {
+			justify-content: center !important;
+		}
+	}
+	.list {
+		width: 60%;
+		padding: 10px 20px;
+		border-radius: 10px;
+		background-color: #ffffff;
+
+		:deep(.ant-descriptions) {
+			margin-bottom: 10px;
+		}
+		:deep(.ant-descriptions-header) {
+			margin: 0;
+			padding: 10px;
+			border: 1px solid #f0f0f0;
+			border-bottom: none;
+		}
+	}
+</style>