loser/lckt-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(user): 优化用户列表展示和搜索功能

Browse Source 
- 修改用户列表的表格配置，增加头像和更新时间列
- 实现用户状态切换功能
- 优化搜索表单样式
- 调整内容区域样式
- 修复日期选择器禁用问题
This commit is contained in:
zhangpeng 2025-05-09 16:41:57 +08:00
parent e0868a10af
commit c948b4a3d7
7 changed files with 74 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/user/index.js
View File

@ -7,8 +7,17 @@ import service from '@/utils/request'
// @router get /user/list
export const list = (params) => {
return service({
url: '/user/list',
url: '/app_user/list',
method: 'get',
params
})
}
// /app_user/status/:id
export const status = (data) => {
return service({
url: '/app_user/status/'+ data.ID,
method: 'put',
data
})
}

12
src/components/content/index.vue
View File

@ -8,7 +8,7 @@
v-bind="computedStyle"
:show-overflow-tooltip="config.tooltip"
:header-row-style="headerRowStyle"
:highlight-current-row="!!config.radio ? true : false"
:highlight-current-row="!!config.radio"
:span-method="config?.spanMethod"
:tooltip-options="config?.tooltipOptions"
@current-change="handleTableCurrentChange"
@ -18,7 +18,7 @@
<!-- <template #default="{ row, column }"> -->
<!-- <span v-show="false">{{ row[column.property] }}</span> -->
<div class="move" style="width: 100%; height: 100%">
<svg-icon style="cursor: move" icon-class="move" />
<svg-icon style="cursor: move" icon-class="move" name=""/>
</div>
<!-- </template> -->
</el-table-column>
@ -65,8 +65,9 @@
</template>
<script setup>
import { computed, onBeforeMount, onMounted, watch, ref } from 'vue'
import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
import Sortable from 'sortablejs'
import SvgIcon from '@/components/svgIcon/svgIcon.vue'
// import { nanoid } from '@/utils/jsencrypt'
const props = defineProps({
@ -209,8 +210,7 @@
}
function indexMethod(index) {
const cur = size.value * (current.value - 1) + index + 1
return cur
return size.value * (current.value - 1) + index + 1
}
function rowDrag() {
@ -256,7 +256,7 @@
<style lang="scss" scoped>
.content {
background: #fff;
//background: #fff;
border-radius: 4px;
//padding: 20px 20px 0 20px;
box-sizing: border-box;

2
src/components/searchForm/index.vue
View File

@ -164,7 +164,7 @@
<style lang="scss" scoped>
.search-form{
background: white;
//background: white;
padding: 1rem;
//padding-bottom: 0;
margin-top: 0.5rem;

14
src/config.js
View File

@ -135,14 +135,22 @@ export const USER_TABLE_CONFIG = {
{
attrs: {
label: 'ID',
prop: 'order_no',
prop: 'ID',
align: 'center'
}
},
{
attrs: {
label: '头像',
prop: 'avatar',
align: 'center'
},
slot: 'avatar'
},
{
attrs: {
label: '名称',
prop: 'name',
prop: 'nick_name',
align: 'center'
}
},
@ -159,12 +167,14 @@ export const USER_TABLE_CONFIG = {
prop: 'CreatedAt',
align: 'center'
},
slot: 'CreatedAt'
},{
attrs: {
label: '更新时间',
prop: 'UpdatedAt',
align: 'center'
},
slot: 'UpdatedAt'
},
{
attrs: {

4
src/style/main.scss
View File

@ -34,7 +34,9 @@
.gva-search-box {
@apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
}
.search-form{
@apply p-4 bg-white dark:text-slate-400 dark:bg-slate-900
}
.gva-form-box {
@apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
}

8
src/view/bot/bot/bot.vue
View File

@ -16,7 +16,7 @@
—
<el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
</el-form-item>
<template v-if="showAllQuery">
<!-- 将需要控制显示状态的查询条件添加到此范围内 -->
@ -34,7 +34,7 @@
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="openDialog()">新增</el-button>
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
</div>
<el-table
ref="multipleTable"
@ -45,11 +45,11 @@
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column align="left" label="日期" prop="createdAt"width="180">
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column>
<el-table-column align="left" label="关键词" prop="keyword" width="120" />
<el-table-column label="内容" prop="content" width="200">
<template #default="scope">

57
src/view/user/user/index.vue
View File

@ -18,15 +18,34 @@
:data="tableData"
:config="USER_TABLE_CONFIG"
>
<template #avatar="{ row }">
<el-image
style="width: 100px; height: 100px"
:src="row.avatar"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[row.avatar]"
show-progress
:initial-index="4"
fit="cover"
/>
</template>
<template #status="{ row }">
<!-- <el-tag :type="tag(row.status).extend">{{ tag(row.status).label }}</el-tag>-->
<el-switch v-model="row.status"
active-value="1"
inactive-value="0"
:loading="statusChangeLoading"
:active-value="1"
:inactive-value="0"
:loading="row.loading"
:before-change="() => statusChangeBefore(row)" />
</template>
<template #CreatedAt="{ row }">
{{ formatDate(row.CreatedAt) }}
</template>
<template #UpdatedAt="{ row }">
{{ formatDate(row.UpdatedAt) }}
</template>
<template #operate="{ row }">
<el-button type="text" @click="handleDetail(row)">详情</el-button>
<!-- <el-button type="text" @click="handleDelete(row)">删除</el-button>-->
@ -39,10 +58,11 @@
<script setup>
import searchForm from '@/components/searchForm/index.vue'
import Content from '@/components/content/index.vue'
import {list} from '@/api/user/index.js'
import {list, status} from '@/api/user/index.js'
import { ref, onMounted } from 'vue'
import {formatDate} from '@/utils/format'
import { USER_SEARCH_CONFIG, USER_TABLE_CONFIG } from '@/config'
const tableLoading = ref(true), tableData = ref([{status:1}])
const tableLoading = ref(true), tableData = ref([])
const queryParams = ref({
page: 1,
pageSize: 10,
@ -50,11 +70,7 @@
startTime: '',
endTime: ''
}), total = ref(0)
const statusChangeLoading = ref(false)
// const EMPTY_STR = '- -'
// const tag = (status) => {
// return userStatus.find((item) => item.value === status+'') || { type: '', label: EMPTY_STR }
// }
const searchData = (data) => {
if (data.times) {
data.startTime = data.times[0]
@ -79,6 +95,9 @@
const res = await list(queryParams.value)
if(res.code === 0) {
tableData.value = res.data.list
for(let item of tableData.value) {
item.loading = false
}
total.value = res.data.total
}
}
@ -91,15 +110,15 @@
queryParams.value.pageNum = data
getList()
}
function statusChangeBefore(row) {
console.log(row)
statusChangeLoading.value = true
return new Promise(resolve => {
setTimeout(() => {
statusChangeLoading.value = false
return resolve(true)
},500)
})
async function statusChangeBefore(row) {
row.loading = true
let params = JSON.parse(JSON.stringify(row))
params.status = row.status === 1 ? 0 : 0
const res = await status(params)
row.loading = false
if(res.code === 0) {
row.status = row.status === 1? 0 :1
}
}
</script>
<style lang="scss" scoped>