提交 5a9ead8d 编写于 作者: kadycui's avatar kadycui 💻

ADD: tab页

上级 f306468d
......@@ -3,7 +3,7 @@ import { queryParams } from '@/composables/util'
export function getGoodsList(page, query={}){
let r = queryParams(queryParams)
let r = queryParams(query)
return axios.get(`/admin/goods/${page}${r}`)
}
......
......@@ -24,7 +24,7 @@ export function updatepassword(data){
export function getManagerList(page, query={}){
let r = queryParams(queryParams)
let r = queryParams(query)
return axios.get(`/admin/manager/${page}${r}`)
}
......
<template>
<el-card shadow="never" class="border-0">
<el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
<el-row :gutter="20">
<el-col :span="8" :offset="0">
<el-form-item label="关键词">
<el-input v-model="searchForm.keyword" placeholder="管理员昵称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8" :offset="8">
<div class="flex items-center justify-end">
<el-button type="primary" @click="getData">搜索</el-button>
<el-button @click="resetSearchForm">重置</el-button>
</div>
</el-col>
</el-row>
</el-form>
<!-- 新增 | 刷新 -->
<ListHeader @create="handleCreate" @refresh="getData" />
<el-table v-loading="loading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading"
:data="tableData" stripe
style="width: 100%">
<el-table-column label="管理员" width="200">
<template #default="{ row }">
<div class="flex items-center">
<el-avatar :size="40" :src="row.avatar">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
</el-avatar>
<div class="ml-3">
<h6> {{ row.username }}</h6>
<small>ID:{{ row.id }}</small>
<div>
<el-tabs v-model="searchForm.tab" @tab-change="getData">
<el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in tabbars" :key="index">
</el-tab-pane>
</el-tabs>
<el-card shadow="never" class="border-0">
<el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
<el-row :gutter="20">
<el-col :span="8" :offset="0">
<el-form-item label="关键词">
<el-input v-model="searchForm.title" placeholder="商品名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8" :offset="8">
<div class="flex items-center justify-end">
<el-button type="primary" @click="getData">搜索</el-button>
<el-button @click="resetSearchForm">重置</el-button>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="所属角色" align="center">
<template #default="{ row }">
{{ row.role?.name || "_" }}
</template>
</el-table-column>
<el-table-column label="状态" width="120">
<template #default="{ row }">
<el-switch :modelValue="row.status" :active-value="1" :inactive-value="0" :loading="row.statusLoading"
:disabled="row.super == 1" @change="handleStatusChange($event, row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<small v-if="scope.row.super == 1" class="text-sm text-gray-500">暂无操作</small>
<div v-else>
<el-button type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
<el-popconfirm title="是否删除该管理员?" confirm-button-text="确认" cancel-button-text="取消"
@confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button text type="primary" size="small">删除</el-button>
</template>
</el-popconfirm>
</div>
</template>
</el-table-column>
</el-table>
<div class="flex items-center justify-center mt-5">
<el-pagination background layout="total, prev, pager, next, jumper" :total="total" :current-page="currentPage"
:page-size="limit" @current-change="getData" />
</div>
<FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
<el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item label="头像" prop="avatar">
<ChooseImage v-model="form.avatar" />
</el-form-item>
<el-form-item label="所属角色" prop="role_id">
<el-select v-model="form.role_id" placeholder="选择所属角色">
<el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="content">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
</el-row>
</el-form>
</FormDrawer>
</el-card>
<!-- 新增 | 刷新 -->
<ListHeader @create="handleCreate" @refresh="getData" />
<el-table v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
:data="tableData" stripe style="width: 100%">
<el-table-column label="管理员" width="200">
<template #default="{ row }">
<div class="flex items-center">
<el-avatar :size="40" :src="row.avatar">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
</el-avatar>
<div class="ml-3">
<h6> {{ row.username }}</h6>
<small>ID:{{ row.id }}</small>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="所属角色" align="center">
<template #default="{ row }">
{{ row.role?.name || "_" }}
</template>
</el-table-column>
<el-table-column label="状态" width="120">
<template #default="{ row }">
<el-switch :modelValue="row.status" :active-value="1" :inactive-value="0"
:loading="row.statusLoading" :disabled="row.super == 1"
@change="handleStatusChange($event, row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<small v-if="scope.row.super == 1" class="text-sm text-gray-500">暂无操作</small>
<div v-else>
<el-button type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
<el-popconfirm title="是否删除该管理员?" confirm-button-text="确认" cancel-button-text="取消"
@confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button text type="primary" size="small">删除</el-button>
</template>
</el-popconfirm>
</div>
</template>
</el-table-column>
</el-table>
<div class="flex items-center justify-center mt-5">
<el-pagination background layout="total, prev, pager, next, jumper" :total="total"
:current-page="currentPage" :page-size="limit" @current-change="getData" />
</div>
<FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
<el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item label="头像" prop="avatar">
<ChooseImage v-model="form.avatar" />
</el-form-item>
<el-form-item label="所属角色" prop="role_id">
<el-select v-model="form.role_id" placeholder="选择所属角色">
<el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="content">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0">
</el-switch>
</el-form-item>
</el-form>
</FormDrawer>
</el-card>
</div>
</template>
......@@ -107,12 +111,12 @@
<script setup>
import { ref } from "vue"
import {
getManagerList,
updateManagerStatus,
createManager,
updateManager,
deleteManager
} from "@/api/manager"
getGoodsList,
updateGoodsStatus,
createGoods,
updateGoods,
deleteGoods
} from "@/api/goods"
import FormDrawer from "@/components/FormDrawer.vue"
......@@ -134,12 +138,13 @@ const {
getData,
handleDelete,
handleStatusChange
} = useInitTable({
searchForm: {
keyword: ""
title: "",
tab: "all",
category_id: null
},
getList: getManagerList,
getList: getGoodsList,
onGetListSuccess: (res) => {
tableData.value = res.list.map(o => {
o.statusLoading = false
......@@ -148,8 +153,8 @@ const {
total.value = res.totalCount
roles.value = res.roles
},
delete:deleteManager,
updateStatus: updateManagerStatus
delete: deleteGoods,
updateStatus: updateGoodsStatus
})
......@@ -166,19 +171,40 @@ const {
handleEdit,
} = useInitForm(
{
form:{
username: "",
password: "",
role_id: null,
status: 1,
avatar: ""
},
getData,
update:updateManager,
create:createManager,
})
{
form: {
username: "",
password: "",
role_id: null,
status: 1,
avatar: ""
},
getData,
update: updateGoods,
create: createGoods,
})
const tabbars = [{
key:"all",
name:"全部"
},{
key:"checking",
name:"审核中"
},{
key:"saling",
name:"出售中"
},{
key:"off",
name:"已下架"
},{
key:"min_stock",
name:"库存预警"
},{
key:"delete",
name:"回收站"
}]
</script>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册