feat: 系统用户部分功能完成

This commit is contained in:
duan 2025-03-19 16:29:32 +08:00
parent eb93ad889a
commit bc75b5f5dd
23 changed files with 427 additions and 181 deletions

View File

@ -18,9 +18,8 @@ const API = {
},
delete(data: any) {
return request({
url: `${baseURL}`,
url: `${baseURL}?id=${data}`,
method: "delete",
data: data,
});
},
add(data: any) {
@ -42,7 +41,8 @@ const API = {
return request({
url: `${baseURL}/download`,
method: "get",
params
params,
responseType: "blob",
});
},
pwd(data: any) {
@ -52,6 +52,7 @@ const API = {
data
});
}
,
}
export default API;

View File

@ -1 +1,12 @@
<template></template>
<template>
<div style="padding: 15px;">
<!-- 搜索 -->
<Search></Search>
<!-- 表格 -->
<Content></Content>
</div>
</template>
<script setup>
import Search from './indexconfig/Search.vue'
import Content from './indexconfig/Content.vue'
</script>

View File

@ -0,0 +1,283 @@
<template>
<div class="Table">
<!-- 按钮 -->
<AddButton @add="add" @exportsAction="exportsAction"></AddButton>
<!-- 表格 -->
<Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"></Table>
<!-- 分页 -->
<Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
<!-- 其他模板 -->
<!-- 新增/编辑 -->
<myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
<el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
<!-- <el-form-item label="商品图片" required prop="images">
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in datas.DialogForm.images" :key="index" style="position: relative"
class="showStyle">
<el-icon class="buttonstyle" @click="deleteEvent(item)">
<DeleteFilled />
</el-icon>
<img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
</div>
<div class="upImgStyle" @click="addimgEvent">+</div>
</div>
</el-form-item> -->
<el-row>
<el-col :span="12">
<el-form-item label="用户名" prop="account">
<el-input v-model="datas.DialogForm.account" placeholder="请输入用户名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电话" prop="phone">
<el-input v-model="datas.DialogForm.phone" placeholder="请输入联系电话" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="昵称" prop="nickName">
<el-input v-model="datas.DialogForm.nickName" placeholder="请输入昵称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="datas.DialogForm.email" placeholder="请输入邮箱" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="性别">
<el-radio-group v-model="datas.DialogForm.gender">
<el-radio label="男" value="男" />
<el-radio label="女" value="女" />
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-switch v-model="datas.DialogForm.status" :active-value="1" :inactive-value="0" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="角色">
<el-select v-model="datas.DialogForm.roleId" placeholder="请选择角色" clearable>
<el-option :label="item.name" v-for="(item, index) in datas.roleData" :key="index" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="admin账号">
<el-switch v-model="datas.DialogForm.isAdmin" :active-value="1" :inactive-value="0" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="密码">
<el-input v-model="datas.DialogForm.password" placeholder="请输入密码" />
</el-form-item>
</el-form>
</myDialog>
<!-- 选择图片 -->
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
</div>
</template>
<script setup>
import AddButton from './component/AddButton.vue'
import Table from './component/Table.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from '@/api/account/sysUser'
import API2 from '@/api/account/role'
import { downloadFile } from "@/utils/index";
const datas = reactive({
tableData: [], //
title: '新增数据',
pagingConfig: {
total: 0, //
pageSize: 10, //
pageNumber: 1, //
},
DialogForm: { //
gender: "男",
status: 1,
isAdmin: 0,
avatar: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/5208d608c94d4a889c53f4fe28097199.png"
},
roleData: [],
rules: {
account: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
],
nickName: [
{ required: true, message: '请输入昵称', trigger: 'blur' },
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
],
},
searchData: null
})
const myDialogRef = ref(null)
const ruleFormRef = ref(null)
onMounted(() => {
getList()
getrolelist()
eventBus.on('search', (res) => {
datas.searchData = res
getList(res)
})
})
async function exportsAction() {
const file = await API.download({
...datas.searchData
});
downloadFile(file, "数据", "xlsx");
}
onBeforeUnmount(() => {
eventBus.off('search')
})
async function getList(data = {}) {
const res = await API.getList({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
datas.tableData = res.records
datas.pagingConfig.total = res.totalRow
datas.pagingConfig.pageSize = res.pageSize
datas.pagingConfig.pageNumber = res.pageNumber
}
async function getrolelist(data = {}) {
const res = await API2.getList({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
datas.roleData = res.records
}
function add() {
if (datas.DialogForm.id) {
rest()
}
datas.title = '新增数据'
myDialogRef.value.open()
}
async function handleEdit(row) {
datas.title = '编辑数据'
// const res = await API.getinfo(row.id)
datas.DialogForm = row
//
// datas.DialogForm.goodsImageUrl = res.goodsImageUrl.split(',')
myDialogRef.value.open()
}
async function confirm() {
ruleFormRef.value.validate(async valid => {
if (valid) {
let res = null
if (datas.title == '新增数据') {
//
// datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
res = await API.add(datas.DialogForm)
} else {
// datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
res = await API.edit(datas.DialogForm)
}
if (res) {
ElMessage({
message: '成功',
type: 'success',
})
rest()
getList()
myDialogRef.value.close()
}
}
})
}
//
function rest() {
datas.DialogForm = {
gender: "男",
status: 1,
isAdmin: 0,
avatar: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/5208d608c94d4a889c53f4fe28097199.png"
}
}
async function handleDelete(id) {
ElMessageBox.confirm("是否删除数据项?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
async () => {
let res = await API.delete(id)
ElMessage({
message: '删除成功',
type: 'success',
})
getList()
}
);
}
//
const addImg = ref(null)
function addimgEvent() {
(addImg.value)?.show()
}
function successEvent(d) {
datas.DialogForm['images'].push(d[0].url);
}
function deleteEvent(d) {
let index = datas.DialogForm.images.findIndex((ele) => ele == d);
datas.DialogForm.images.splice(index, 1);
}
//
function sizeChange(val) {
datas.pagingConfig.pageSize = val
getList()
}
function currentChange(val) {
datas.pagingConfig.pageNumber = val
getList()
}
</script>
<style scoped lang="scss">
.Table {
padding: 20px;
background-color: #fff;
border: 1px solid #e4e7ed;
margin-top: 20px;
border-radius: 4px;
}
//
.showStyle:hover>.buttonstyle {
display: block;
}
.upImgStyle {
cursor: pointer;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
border: 1px dashed #ccc;
border-radius: 1%;
font-size: 30px;
color: #ccc;
}
.buttonstyle {
border-radius: 50%;
color: #db1616;
background-color: #fff;
font-size: 20px;
display: none;
position: absolute;
right: 0px;
top: -10px;
z-index: 10;
}
</style>

View File

@ -0,0 +1,63 @@
<template>
<div class="Search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="名称或者邮箱">
<el-input v-model="formInline.key" placeholder="请输入名称或者邮箱" clearable />
</el-form-item>
<el-form-item label="日期">
<el-date-picker v-model="formInline.value1" type="daterange" range-separator="-" start-placeholder="开始日期"
value-format="YYYY-MM-DD" @change="dateChange" end-placeholder="结束日期" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="formInline.region" placeholder="请选择排列方式" clearable>
<el-option label="启用" value="1" />
<el-option label="禁用" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
<el-button icon="Refresh" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import eventBus from '@/utils/eventBus'
const formInline = reactive({
user: '',
region: '',
date: '',
value1: ""
})
const onSubmit = () => {
eventBus.emit('search', formInline)
}
const reset = () => {
for (let key in formInline) {
formInline[key] = ''
}
eventBus.emit('search', formInline)
}
function dateChange(d) {
formInline.endTime = d[1]
formInline.startTime = d[0]
}
</script>
<style scoped lang="scss">
.Search {
padding: 20px;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
}
.demo-form-inline .el-input {
--el-input-width: 220px;
}
.demo-form-inline .el-select {
--el-select-width: 220px;
}
</style>

View File

@ -0,0 +1,13 @@
<template>
<el-button type="primary" icon="Plus" @click="addEvent">新增</el-button>
<el-button @click="toUrl()">导出</el-button>
</template>
<script setup>
const emit = defineEmits(['add', 'exportsAction']);
function toUrl() {
emit('exportsAction')
}
function addEvent() {
emit('add');
}
</script>

View File

@ -0,0 +1,43 @@
<template>
<div style="margin-top: 10px;">
<el-table :data="props.list" border style="width: 100%">
<el-table-column prop="account" align="center" label="用户名" />
<el-table-column prop="nickName" align="center" label="昵称" />
<el-table-column prop="gender" align="center" label="性别" />
<el-table-column prop="phone" align="center" label="电话" />
<el-table-column prop="email" align="center" label="邮箱" />
<!-- <el-table-column prop="date" align="center" label="部门" /> -->
<el-table-column prop="status" align="center" label="状态">
<template #default="scope">
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" />
</template>
</el-table-column>
<el-table-column prop="createTime" align="center" label="创建日期" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="small" type="danger" link icon="Delete" style="color: #f89797;"
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
const emit = defineEmits(['handleDelete', 'handleEdit'])
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
function handleEdit(row) {
emit('handleEdit', row)
}
function handleDelete(index, row) {
emit('handleDelete', row.id)
}
</script>

View File

@ -58,7 +58,7 @@
<script setup>
import AddButton from './component/AddButton.vue'
import Table from './component/Table.vue'
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -76,7 +76,7 @@
import AddButton from './component/AddButton.vue'
import Table from './component/Table.vue'
import shopList from "@/components/mycomponents/shopList.vue";
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -1,24 +0,0 @@
<template>
<div style="margin-top: 10px;">
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script setup>
const props = defineProps({
pagingConfig: {
type: Object,
default: () => { }
}
})
const emit = defineEmits(['sizeChange', 'currentChange'])
//
function handleSizeChange(val) {
emit('sizeChange', val)
}
//
function handleCurrentChange(val) {
emit('currentChange', val)
}
</script>

View File

@ -51,7 +51,7 @@
<script setup>
import AddButton from './component/AddButton.vue'
import Table from './component/Table.vue'
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -1,24 +0,0 @@
<template>
<div style="margin-top: 10px;">
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script setup>
const props = defineProps({
pagingConfig: {
type: Object,
default: () => { }
}
})
const emit = defineEmits(['sizeChange', 'currentChange'])
//
function handleSizeChange(val) {
emit('sizeChange', val)
}
//
function handleCurrentChange(val) {
emit('currentChange', val)
}
</script>

View File

@ -9,7 +9,7 @@
</template>
<script setup>
import Table from './component/Table.vue'
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -1,24 +0,0 @@
<template>
<div style="margin-top: 10px;">
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script setup>
const props = defineProps({
pagingConfig: {
type: Object,
default: () => { }
}
})
const emit = defineEmits(['sizeChange', 'currentChange'])
//
function handleSizeChange(val) {
emit('sizeChange', val)
}
//
function handleCurrentChange(val) {
emit('currentChange', val)
}
</script>

View File

@ -63,7 +63,7 @@
<script setup>
import AddButton from './component/AddButton.vue'
import Table from './component/Table.vue'
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -1,24 +0,0 @@
<template>
<div style="margin-top: 10px;">
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script setup>
const props = defineProps({
pagingConfig: {
type: Object,
default: () => { }
}
})
const emit = defineEmits(['sizeChange', 'currentChange'])
//
function handleSizeChange(val) {
emit('sizeChange', val)
}
//
function handleCurrentChange(val) {
emit('currentChange', val)
}
</script>

View File

@ -26,7 +26,7 @@
</template>
<script setup>
import Table from './component/Table.vue'
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -1,24 +0,0 @@
<template>
<div style="margin-top: 10px;">
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script setup>
const props = defineProps({
pagingConfig: {
type: Object,
default: () => { }
}
})
const emit = defineEmits(['sizeChange', 'currentChange'])
//
function handleSizeChange(val) {
emit('sizeChange', val)
}
//
function handleCurrentChange(val) {
emit('currentChange', val)
}
</script>

View File

@ -53,7 +53,7 @@
<script setup>
import AddButton from './component/AddButton.vue'
import Table from './component/Table.vue'
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -1,24 +0,0 @@
<template>
<div style="margin-top: 10px;">
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script setup>
const props = defineProps({
pagingConfig: {
type: Object,
default: () => { }
}
})
const emit = defineEmits(['sizeChange', 'currentChange'])
//
function handleSizeChange(val) {
emit('sizeChange', val)
}
//
function handleCurrentChange(val) {
emit('currentChange', val)
}
</script>

View File

@ -236,7 +236,7 @@ function createItem(val: IObject) {
//
function handleSwitchChange(data: any) {
let obj = {
type: data.isGrounding ? "sku" : "product",
type: data.productId ? "sku" : "product",
id: data.id,
isSale: data.isSale,
};

View File

@ -58,7 +58,7 @@
<script setup>
import AddButton from './component/AddButton.vue'
import Table from './component/Table.vue'
import Paging from './component/Paging.vue'
import Paging from '@/components/mycomponents/myPaging.vue'
import myDialog from '@/components/mycomponents/myDialog.vue'
import eventBus from '@/utils/eventBus'
import API from './api'

View File

@ -1,24 +0,0 @@
<template>
<div style="margin-top: 10px;">
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script setup>
const props = defineProps({
pagingConfig: {
type: Object,
default: () => { }
}
})
const emit = defineEmits(['sizeChange', 'currentChange'])
//
function handleSizeChange(val) {
emit('sizeChange', val)
}
//
function handleCurrentChange(val) {
emit('currentChange', val)
}
</script>