|
@@ -4,17 +4,17 @@
|
|
<!-- 表格头部 操作按钮 -->
|
|
<!-- 表格头部 操作按钮 -->
|
|
<div class="table-header">
|
|
<div class="table-header">
|
|
<div class="header-button-lf">
|
|
<div class="header-button-lf">
|
|
- <el-form :model="queryParams" label-width="auto" :inline="true">
|
|
|
|
|
|
+ <el-form :model="pageable" label-width="auto" :inline="true">
|
|
<el-form-item label="账号:">
|
|
<el-form-item label="账号:">
|
|
- <el-input v-model="queryParams.account" style="width: 200px" placeholder="请输入账号" clearable />
|
|
|
|
|
|
+ <el-input v-model="pageable.user_account" style="width: 200px" placeholder="请输入账号" clearable />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="姓名:">
|
|
<el-form-item label="姓名:">
|
|
- <el-input v-model="queryParams.name" style="width: 200px" placeholder="请输入姓名" clearable />
|
|
|
|
|
|
+ <el-input v-model="pageable.user_name" style="width: 200px" placeholder="请输入姓名" clearable />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleQuery"> 查询 </el-button>
|
|
<el-button type="primary" @click="handleQuery"> 查询 </el-button>
|
|
<el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
|
|
<el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
|
|
- <el-button style="margin-left: 10px" type="primary" plain @click="handleAdd"> 新增 </el-button>
|
|
|
|
|
|
+<!-- <el-button style="margin-left: 10px" type="primary" plain @click="handleAdd"> 新增 </el-button>-->
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
@@ -23,7 +23,7 @@
|
|
<el-table stripe ref="tableRef" :border="true" :data="processTableData" size="small">
|
|
<el-table stripe ref="tableRef" :border="true" :data="processTableData" size="small">
|
|
<el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
|
|
<el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
- {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
|
|
|
|
|
|
+ {{ scope.$index + 1 }}
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<template v-for="item in columns" :key="item">
|
|
<template v-for="item in columns" :key="item">
|
|
@@ -81,7 +81,7 @@
|
|
</template>
|
|
</template>
|
|
</el-table>
|
|
</el-table>
|
|
<!-- 分页组件 -->
|
|
<!-- 分页组件 -->
|
|
- <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
|
|
|
|
|
|
+<!-- <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />-->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 添加或修改对话框 -->
|
|
<!-- 添加或修改对话框 -->
|
|
@@ -155,31 +155,41 @@
|
|
|
|
|
|
<script setup lang="ts" name="useProTable">
|
|
<script setup lang="ts" name="useProTable">
|
|
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
|
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
|
-import { ref, reactive } from "vue";
|
|
|
|
|
|
+import {ref, reactive, onMounted} from "vue";
|
|
import { ColumnProps } from "@/components/ProTable/interface";
|
|
import { ColumnProps } from "@/components/ProTable/interface";
|
|
import { ElMessageBox } from 'element-plus'
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
|
+import {getQueryAllSysItem, getUserList} from "@/api/modules/allData";
|
|
const pageable = ref<any>({
|
|
const pageable = ref<any>({
|
|
|
|
+ user_account:'',
|
|
|
|
+ user_name: '',
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
pageSize: 20,
|
|
total: 1
|
|
total: 1
|
|
});
|
|
});
|
|
|
|
|
|
-const queryParams = ref({
|
|
|
|
- account:'',
|
|
|
|
- name: '',
|
|
|
|
- pageNum: 1,
|
|
|
|
- pageSize: 20,
|
|
|
|
- total: 2
|
|
|
|
-});
|
|
|
|
|
|
+
|
|
|
|
|
|
// 查询功能
|
|
// 查询功能
|
|
const handleQuery = () => {
|
|
const handleQuery = () => {
|
|
- queryParams.value.pageNum = 1;
|
|
|
|
|
|
+ processTableData.value = [...originalData.value]
|
|
|
|
+ const filteredData = processTableData.value.filter(item => {
|
|
|
|
+ return (
|
|
|
|
+ (item.user_account && item.user_account.includes(pageable.value.user_account)) && (item.user_name && item.user_name.includes(pageable.value.user_name))
|
|
|
|
+ );
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ processTableData.value = filteredData;
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+const originalData = ref([]);
|
|
|
|
+
|
|
//搜索功能
|
|
//搜索功能
|
|
const resetQuery = () => {
|
|
const resetQuery = () => {
|
|
- queryParams.value.pageNum = 1;
|
|
|
|
|
|
+ // 清空查询条件
|
|
|
|
+ pageable.value.user_account = '';
|
|
|
|
+ pageable.value.user_name = '';
|
|
|
|
+ processTableData.value = []
|
|
|
|
+ processTableData.value = [...originalData.value]; // 假设 originalData 存储了原始数据列表
|
|
};
|
|
};
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -201,28 +211,18 @@ const handleCurrentChange = (val: number) => {
|
|
};
|
|
};
|
|
|
|
|
|
const processTableData = ref([
|
|
const processTableData = ref([
|
|
- {
|
|
|
|
- id: "681913747276782417",
|
|
|
|
- a: "www",
|
|
|
|
- b: "王武",
|
|
|
|
- c: "装备保障人员",
|
|
|
|
- d: "装备保障人员",
|
|
|
|
- e: "某个气象局",
|
|
|
|
- f: "13312341234",
|
|
|
|
- g: "便携站1,固定站1",
|
|
|
|
- }
|
|
|
|
]);
|
|
]);
|
|
|
|
|
|
// 表格配置项
|
|
// 表格配置项
|
|
const columns = reactive<ColumnProps[]>([
|
|
const columns = reactive<ColumnProps[]>([
|
|
- { prop: "a", label: "用户账号" },
|
|
|
|
- { prop: "b", label: "用户姓名" },
|
|
|
|
- { prop: "c", label: "角色" },
|
|
|
|
- { prop: "d", label: "职务" },
|
|
|
|
- { prop: "e", label: "所属单位" },
|
|
|
|
- { prop: "f", label: "联系电话" },
|
|
|
|
- { prop: "g", label: "台站",width:250 },
|
|
|
|
- { prop: "operation", label: "操作", width:150,align: 'center' }
|
|
|
|
|
|
+ { prop: "user_account", label: "用户账号" },
|
|
|
|
+ { prop: "user_name", label: "用户姓名" },
|
|
|
|
+ { prop: "user_job", label: "角色" },
|
|
|
|
+ { prop: "user_job", label: "职务" },
|
|
|
|
+ { prop: "user_unit", label: "所属单位" },
|
|
|
|
+ { prop: "user_phone", label: "联系电话" },
|
|
|
|
+ { prop: "asInfo", label: "台站",width:250 },
|
|
|
|
+ // { prop: "operation", label: "操作", width:150,align: 'center' }
|
|
]);
|
|
]);
|
|
|
|
|
|
const dialog = reactive<any>({
|
|
const dialog = reactive<any>({
|
|
@@ -352,4 +352,36 @@ const handleDelete = async (row?: any) => {
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const getList= async ()=>{
|
|
|
|
+ const { data } = await getUserList();
|
|
|
|
+ processTableData.value = data.list
|
|
|
|
+ processTableData.value = transformData(data.list)
|
|
|
|
+ originalData.value = [...transformData(data.list)]
|
|
|
|
+ // pageable.value.total = data.total
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function transformData(originalData) {
|
|
|
|
+ return originalData.map(item => {
|
|
|
|
+ // 判空处理,如果 asInfo 不存在或者长度为 0,返回 null 或空字符串
|
|
|
|
+ const asInfoString = item.asInfo && item.asInfo.length > 0
|
|
|
|
+ ? item.asInfo.map(as => `${as.as_name}(${as.as_code})`).join('、')
|
|
|
|
+ : null; // 或者使用 '' 如果你希望返回空字符串
|
|
|
|
+
|
|
|
|
+ // 判空处理,如果 user 对象不存在,返回一个空对象
|
|
|
|
+ const user = item.user || {};
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ ...user,
|
|
|
|
+ asInfo: asInfoString // 这里 asInfoString 可能是 null 或字符串
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ getList()
|
|
|
|
+})
|
|
|
|
+
|
|
</script>
|
|
</script>
|