web
2025-07-03 a02a7acbcebc5ed668114087ea4256a44361a0c0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 <script setup>
 import  userArchive from "@/api/user/userArchive.js";
 import setPostParams from "../../../utils/searchParams.js";
 const { proxy } = getCurrentInstance();
 
/**
 * 搜索相关
 */
 /** 搜索按钮操作 */
 function handleQuery() {
   getList({keywords:searchParams.value.keywords})
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
 
 /**
  *  Table表格权限数据列表相关
  */
const pageParam = ref({
    total:0,
    limit:0,
    page:1,
})
const tableData = ref([]);
let  tableHeader = ref({
      userCode: '用户编号',
      nickName: '用户名称',
      phone: '电话',
      headImg: '头像',
      comment: '备注',
      createTimeView: '创建时间',
})
 /** 获取列表 */
 const loading = ref(false)
 async function getList(val) {
      loading.value = true;
 
 let postParam = setPostParams(val)
      await userArchive().search(postParam).then((res) =>{
         res.data.list.forEach((item) =>{
            item.userTypeLabel = item.userType == 1 ? '会员' : (item.userType == 0 ? '游客' : '')
         })
        tableData.value = res.data.list
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
        pageParam.value.page = res.data.page
    })
    loading.value = false;
 }
 
const searchParams = ref({
    keywords: '',
});
 getList();
 </script>
 <template>
    <div class="app-container">
       <el-form :model="searchParams" ref="queryRef" :inline="true">
          <el-form-item label="" prop="">
             <el-input
                v-model="searchParams.keywords"
                placeholder="请输入搜索信息"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
             />
          </el-form-item>
          <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
       <!--表格及分页-->
       <el-table v-loading="loading" :data="tableData">
          <el-table-column
            v-for="(item, key, index) of tableHeader"
            :prop="key.toString()"
            :label="item"
            :key="index"
            align="center"
          >
          
          <template #default="scope">
                <div v-if="key.toString() == 'headImg'" style="width: 50px;height: 50px;margin: 0 auto">
                    <img :src="scope.row.headImg" class="table-headImg"/>
                </div>
            </template>
        </el-table-column>
        </el-table>
        <pagination
          :total="pageParam.total"
          v-model:page="pageParam.page"
          v-model:limit="pageParam.limit"
          :page-sizes="[10,20,30]"
          @pagination="getList"
        />
    </div>
 </template>
 
 <style lang="scss" scoped>
 
</style>