czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

店铺管理新增员工列表

This commit is contained in:
gyq 2024-07-26 09:46:25 +08:00
parent dbe8167822
commit 617dd317d3
3 changed files with 374 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/api/shop.js
View File

@ -458,7 +458,6 @@ export function queryAllShopInfo(params) {
});
}
/**
* 修改商品排序
* @returns
@ -495,7 +494,6 @@ export function upCategorySort(data) {
});
}
/**
* 查询店铺充值记录
* @returns
@ -526,3 +524,79 @@ export function downloadTableRecharge(data) {
responseType: "blob"
});
}
/**
* 员工列表
* @returns
*/
export function tbPlussShopStaffGet(params) {
return request({
url: `/api/tbPlussShopStaff`,
method: "get",
params: {
shopId: localStorage.getItem("shopId"),
...params
}
});
}
/**
* 角色列表
* @returns
*/
export function rolesGet() {
return request({
url: `/api/roles`,
method: "get"
});
}
/**
* 增加员工
* @returns
*/
export function tbPlussShopStaff(data) {
return request({
url: `/api/tbPlussShopStaff`,
method: data.id ? "put" : "post",
data: {
shopId: localStorage.getItem("shopId"),
...data
}
});
}
/**
* 通过id获取员工信息
* @returns
*/
export function tbPlussShopStaffDetail(id) {
return request({
url: `/api/tbPlussShopStaff/${id}`,
method: "get"
});
}
/**
* 更改员工状态
* @returns
*/
export function updateStatus(data) {
return request({
url: `/api/tbPlussShopStaff/updateStatus`,
method: "put",
data
});
}
/**
* 员工删除
* @returns
*/
export function shopStaffDelete(data) {
return request({
url: `/api/tbPlussShopStaff`,
method: "delete",
data
});
}

174
src/views/shop/components/addStaff.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<el-dialog :title="title" :visible.sync="dialogVisible">
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
<el-form-item label="员工姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入员工姓名" />
</el-form-item>
<el-form-item label="员工编号" prop="code">
<el-input v-model="form.code" placeholder="请输入员工编号" />
</el-form-item>
<el-form-item label="员工账号" prop="account">
<el-input v-model="form.account" placeholder="请输入员工账号，建议使用手机号" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="最大优惠金额">
<el-input-number v-model="form.maxDiscountAmount" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.roleId" placeholder="请选择角色">
<el-option :label="item.name" :value="item.id" v-for="item in roles" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="允许登录PC桌面端">
<el-switch v-model="form.isPc" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="允许登录管理端">
<el-switch v-model="form.isManage" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="是否启用">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { tbPlussShopStaff, rolesGet, tbPlussShopStaffDetail } from '@/api/shop.js'
export default {
data() {
return {
dialogVisible: false,
loading: false,
form: {
id: '',
name: '',
code: '',
account: '',
maxDiscountAmount: '',
status: 1,
isPc: 1,
isManage: 1,
roleId: '',
phone: ''
},
resetForm: '',
rules: {
name: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
code: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
account: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
maxDiscountAmount: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
roleId: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
phone: [
{
required: true,
message: ' ',
trigger: 'blur'
}
]
},
roles: []
}
},
computed: {
title() {
return this.form.id ? '编辑员工' : '添加员工'
}
},
mounted() {
this.resetForm = { ...this.form }
this.rolesGet()
},
methods: {
// 添加或编辑员工
onSubmitHandle() {
this.$refs.form.validate(async valid => {
if (valid) {
try {
this.loading = true
await tbPlussShopStaff(this.form)
this.loading = false
this.$emit('success')
this.close()
this.$notify({
title: '成功',
message: `${this.title}成功`,
type: 'success'
});
} catch (error) {
console.log(error);
}
}
})
},
// 获取角色列表
async rolesGet() {
try {
const { content } = await rolesGet()
this.roles = content
} catch (error) {
console.log(error);
}
},
reset() {
this.form = { ...this.resetForm }
},
close() {
this.dialogVisible = false
},
show(row) {
this.dialogVisible = true
if (row && row.id) {
// this.form = { ...row }
this.tbPlussShopStaffDetail(row.id)
} else {
this.reset()
}
},
// 通过id获取员工信息
async tbPlussShopStaffDetail(id) {
try {
const res = await tbPlussShopStaffDetail(id)
this.form = res
} catch (error) {
console.log(error);
}
}
}
}
</script>

123
src/views/shop/staff_list.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<div class="app-container">
<div class="head-container">
<el-button type="primary" icon="el-icon-plus" @click="$refs.addStaff.show()">
添加员工
</el-button>
</div>
<div class="head-container">
<el-table :data="tableData.list" v-loading="tableData.loading">
<el-table-column label="员工名称" prop="name"></el-table-column>
<el-table-column label="员工编号" prop="code"></el-table-column>
<el-table-column label="员工账号" prop="account"></el-table-column>
<el-table-column label="是否启用" prop="status">
<template v-slot="scope">
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
@change="statusChange($event, scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="120">
<template v-slot="scope">
<div class="btn_rows" style="display: flex;gap: 10px;">
<el-button type="text" icon="el-icon-edit"
@click="$refs.addStaff.show(scope.row)">编辑</el-button>
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
<el-button type="text" icon="el-icon-delete" slot="reference">删除</el-button>
</el-popconfirm>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<el-pagination @size-change="paginationSizeChange" :total="tableData.total"
:current-page="tableData.page + 1" :page-size="tableData.size" @current-change="paginationChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<addStaff ref="addStaff" @success="resetHandle" />
</div>
</template>
<script>
import addStaff from './components/addStaff.vue'
import { tbPlussShopStaffGet, updateStatus, shopStaffDelete } from '@/api/shop.js'
export default {
components: {
addStaff
},
data() {
return {
query: {},
tableData: {
page: 0,
size: 30,
total: 0,
loading: false,
list: []
}
}
},
mounted() {
this.getTableData()
},
methods: {
// 删除
async delTableHandle(ids) {
try {
const res = await shopStaffDelete(ids)
this.$notify({
title: '成功',
message: `已删除`,
type: 'success'
});
this.getTableData()
} catch (error) {
console.log(error);
}
},
// 修改员工状态
async statusChange(e, row) {
try {
const res = await updateStatus({
id: row.id,
status: e
})
this.getTableData()
} catch (error) {
console.log(error);
}
},
// 重置查询
resetHandle() {
this.tableData.page = 0
this.getTableData()
},
// 每页条数改变是回调
paginationSizeChange(e) {
this.tableData.size = e
this.tableData.page = 0
this.getTableData()
},
// 分页回调
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
// 获取员工列表
async getTableData() {
try {
this.tableData.loading = true
const res = await tbPlussShopStaffGet({
page: this.tableData.page,
size: this.tableData.size
})
this.tableData.loading = false
this.tableData.list = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
}
}
}
</script>