reactor:413 【甄别列表】更多查询优化

src/views/auxiliary/specialNumber/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="auxiliary-special-number-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent  :disabled="state.loading">
 				<el-form-item label="电话号码" prop="PhoneNumber">
 					<el-input v-model="state.queryParams.PhoneNumber" placeholder="请填写电话号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
 				</el-form-item>

src/views/early/setting/index.vue

@@ -1,11 +1,191 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-
+	<div class="early-setting-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent :disabled="state.loading">
+				<el-form-item label="预警名称" prop="PhoneNumber">
+					<el-input v-model="state.queryParams.PhoneNumber" placeholder="请填写预警名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="预警级别" prop="PoliticalIdentityValue">
+					<el-select v-model="state.queryParams.PoliticalIdentityValue" placeholder="请选择预警级别" @change="handleQuery">
+						<el-option v-for="item in politicalIdentityOptions" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="状态" prop="PoliticalIdentityValue">
+					<el-select v-model="state.queryParams.PoliticalIdentityValue" placeholder="请选择状态" @change="handleQuery">
+						<el-option v-for="item in politicalIdentityOptions" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+				<template #buttons>
+					<el-button type="primary" @click="onAdd" v-auth="'auxiliary:specialNumber:add'">
+						<SvgIcon name="ele-Plus" class="mr5" />新增预警
+					</el-button>
+				</template>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true, useKey: true }"
+					:row-config="{ isCurrent: true, isHover: true, useKey: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 100 }"
+					id="earlySetting"
+					:custom-config="{ storage: true }"
+					:sort-config="{ remote: true }"
+					@sort-change="sortChange"
+				>
+					<vxe-column field="phoneNumber" title="预警名称"></vxe-column>
+					<vxe-column field="politicalIdentityName" title="预警级别"></vxe-column>
+					<vxe-column field="politicalIdentityName" title="预警类型"></vxe-column>
+					<vxe-column field="politicalIdentityName" title="频率"></vxe-column>
+					<vxe-column field="notes" title="预警原因" min-width="200"></vxe-column>>
+					<vxe-column field="politicalIdentityName" title="状态"></vxe-column>
+					<vxe-column field="creationTime" title="添加时间" width="160" sortable>
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="130" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onEdit(row)" v-auth="'auxiliary:specialNumber:edit'" title="编辑"> 编辑 </el-button>
+							<el-button link type="danger" @click="onDelete(row)" v-auth="'auxiliary:specialNumber:delete'" title="删除"> 删除 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
+		</div>
+		<!--  新增  -->
+		<special-number-add ref="specialNumberAddRef" @updateList="queryList" />
+		<!--  编辑  -->
+		<special-number-edit ref="specialNumberEditRef" @updateList="queryList" />
+	</div>
 </template>
 
-<style scoped lang="scss">
+<script lang="tsx" setup name="earlySetting">
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
+import { formatDate } from '@/utils/formatTime';
+import { deleteSpecialNumber, getSpecialNumberBaseInfo, getSpecialNumberList } from '@/api/auxiliary/specialNumber';
+// 引入组件
+const SpecialNumberAdd = defineAsyncComponent(() => import('@/views/auxiliary/specialNumber/components/Number-add.vue')); // 新增
+const SpecialNumberEdit = defineAsyncComponent(() => import('@/views/auxiliary/specialNumber/components/Number-edit.vue')); // 编辑
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-</style>
+// 定义变量内容
+const state = reactive({
+	loading: false, // 加载状态
+	queryParams: {
+		// 查询参数
+		PageIndex: 1,
+		PageSize: 20,
+		PhoneNumber: null, // 电话号码
+		SortField: null,
+		SortRule: null,
+		Notes: null, // 备注
+		PoliticalIdentityValue: null, // 政治面貌
+	},
+	total: 0, // 总条数
+	tableData: [], // 表格数据
+});
+const ruleFormRef = ref<any>(null); // 表单ref
+/** 搜索按钮操作 */
+const handleQuery = () => {
+	state.queryParams.PageIndex = 1;
+	queryList();
+};
+// 获取列表
+const queryList = () => {
+	state.loading = true;
+	getSpecialNumberList(state.queryParams)
+		.then((res) => {
+			state.loading = false;
+			state.tableData = res.result.items ?? [];
+			state.total = res.result.total ?? 0;
+		})
+		.finally(() => {
+			state.loading = false;
+		});
+};
+// 排序
+const sortChange = (val: any) => {
+	state.queryParams.SortField = val.order ? val.field : null;
+	// 0 升序 1 降序
+	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
+	queryList();
+};
+// 重置表单
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	queryList();
+};
+// 新增
+const specialNumberAddRef = ref<RefType>();
+const onAdd = () => {
+	specialNumberAddRef.value.openDialog();
+};
+// 修改
+const specialNumberEditRef = ref<RefType>();
+const onEdit = (row: any) => {
+	specialNumberEditRef.value.openDialog(row.id);
+};
+// 删除
+const onDelete = (row: any) => {
+	ElMessageBox.confirm(`您确定要删除特殊号码【${row.phoneNumber}】吗？`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {
+			deleteSpecialNumber({ id: row.id }).then(() => {
+				ElMessage.success('操作成功');
+				queryList();
+			});
+		})
+		.catch(() => {});
+};
+const tableRef = ref<RefType>();
+const toolbarRef = ref<RefType>();
+// 获取基础信息
+const politicalIdentityOptions = ref<EmptyArrayType>([]);
+const queryBaseInfo = () => {
+	getSpecialNumberBaseInfo().then((res) => {
+		politicalIdentityOptions.value = res.result.PoliticalIdentity ?? [];
+	});
+};
+// 页面加载时
+onMounted(() => {
+	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	queryBaseInfo();
+});
+</script>