报警接收人界面调整

snowy-admin-web/src/views/biz/alarmuser/index.vue

@@ -1,44 +1,61 @@
 <template>
-	<a-card :bordered="false">
-		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
-			<a-row :gutter="24">
-				<a-col :span="6">
-					<a-form-item label="微信昵称" name="nickname">
-						<a-input v-model:value="searchFormState.nickname" placeholder="请输入微信昵称" />
-					</a-form-item>
-				</a-col>
-				<a-col :span="6">
-					<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
-					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
-				</a-col>
-			</a-row>
-		</a-form>
+	<div class="table_item">
 		<s-table
 			ref="tableRef"
 			:columns="columns"
 			:data="loadData"
 			:alert="options.alert.show"
-			bordered
 			:row-key="(record) => record.id"
-			:tool-config="toolConfig"
+			bordered
+			@resizeColumn="handleResizeColumn"
 			:row-selection="options.rowSelection"
 		>
 			<template #operator>
-				<a-space>
-					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('alarmUserAdd')">
-						<template #icon><plus-outlined /></template>
-						新增
-					</a-button>
-					<xn-batch-button
-						v-if="hasPerm('alarmUserBatchDelete')"
-						buttonName="批量删除"
-						icon="DeleteOutlined"
-						:selectedRowKeys="selectedRowKeys"
-						@batchCallBack="deleteBatchAlarmUser"
-					/>
-				</a-space>
+				<!-- 搜索区域 -->
+				<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: '70px', 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="nickname">
+										<a-input v-model:value="searchFormState.nickname" 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" style="display: flex">
+						<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('alarmUserAdd')">
+							<template #icon><plus-outlined /></template>新增
+						</a-button>
+						<xn-batch-button
+							class="xn-mg08"
+							v-if="hasPerm('alarmUserBatchDelete')"
+							buttonName="批量删除"
+							icon="DeleteOutlined"
+							:selectedRowKeys="selectedRowKeys"
+							@batchCallBack="deleteBatchAlarmUser"
+						/>
+					</div>
+				</div>
 			</template>
-			<template #bodyCell="{ column, record }">
+			<template #bodyCell="{ column, record, index }">
+				<template v-if="column.dataIndex === 'index'">{{ index + 1 }} </template>
+
 				<template v-if="column.dataIndex === 'action'">
 					<a-space>
 						<a @click="formRef.onOpen(record)" v-if="hasPerm('alarmUserEdit')">编辑</a>
@@ -50,8 +67,9 @@
 				</template>
 			</template>
 		</s-table>
-	</a-card>
-	<Form ref="formRef" @successful="tableRef.refresh()" />
+
+		<Form ref="formRef" @successful="tableRef.refresh()" />
+	</div>
 </template>
 
 <script setup name="alarmuser">
@@ -62,59 +80,103 @@
 	const searchFormRef = ref()
 	const tableRef = ref()
 	const formRef = ref()
-	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
 	const columns = [
+		{
+			title: '序号',
+			dataIndex: 'index',
+			align: 'center',
+			width: 50
+		},
 		{
 			title: '系统用户id',
-			dataIndex: 'userId'
+			dataIndex: 'userId',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '用户唯一标识',
-			dataIndex: 'openid'
+			dataIndex: 'openid',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: 'AccessToken',
-			dataIndex: 'accessToken'
+			dataIndex: 'accessToken',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: 'RefreshToken',
-			dataIndex: 'refreshToken'
+			dataIndex: 'refreshToken',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '微信昵称',
-			dataIndex: 'nickname'
+			dataIndex: 'nickname',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '性别',
-			dataIndex: 'sex'
+			dataIndex: 'sex',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '省份',
-			dataIndex: 'province'
+			dataIndex: 'province',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '用户城市',
-			dataIndex: 'city'
+			dataIndex: 'city',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '国家',
-			dataIndex: 'country'
+			dataIndex: 'country',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '用户头像',
-			dataIndex: 'avatar'
+			dataIndex: 'avatar',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '特权信息',
-			dataIndex: 'privilege'
+			dataIndex: 'privilege',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: 'unionid',
-			dataIndex: 'unionid'
+			dataIndex: 'unionid',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		},
 		{
 			title: '扩展信息',
-			dataIndex: 'extJson'
+			dataIndex: 'extJson',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
 		}
 	]
 	// 操作栏通过权限判断是否显示
@@ -142,6 +204,10 @@
 			}
 		}
 	}
+	// 可伸缩列
+	const handleResizeColumn = (w, col) => {
+		col.width = w
+	}
 	const loadData = (parameter) => {
 		const searchFormParam = cloneDeep(searchFormState.value)
 		return alarmUserApi.alarmUserPage(Object.assign(parameter, searchFormParam)).then((data) => {
@@ -171,3 +237,13 @@
 		})
 	}
 </script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+		background-color: #ffffff;
+		:deep(.ant-table-pagination-right) {
+			justify-content: center !important;
+		}
+	}
+</style>