员工编辑

This commit is contained in:
duan
2024-09-24 15:35:01 +08:00
parent f5d5aca77e
commit 7d904db9ed
9 changed files with 626 additions and 107 deletions

261
pageStaff/addstaff.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<view class="h7">基本信息设置</view>
<view class="content">
<view>
<view>
员工姓名
</view>
<input type="text" v-model="datas.formData.name" placeholder="请填写员工名称" />
<hr />
</view>
<view>
<view>
手机号
</view>
<input type="text" v-model="datas.formData.phone" placeholder="请填写手机号" />
<hr />
</view>
<view>
<view>
员工编号
</view>
<input type="text" v-model="datas.formData.code" placeholder="请填写员工编号" />
<hr />
</view>
<view>
<view>
员工账号
</view>
<input type="text" v-model="datas.formData.account" placeholder="请填写员工账号,建议使用手机号" />
<hr />
</view>
<view>
<view>
登录密码
</view>
<input type="text" v-model="datas.formData.password" placeholder="请输入登录密码不填写默认123456" />
<hr />
</view>
<view>
<view>
优惠类型
</view>
<up-radio-group v-model="datas.formData.discountType" placement="row">
<up-radio label="折扣" name="1"></up-radio>
<up-radio style="margin: 18px 10px;" label="金额" name="0"></up-radio>
</up-radio-group>
<hr />
</view>
<view>
<view>
最低优惠折扣
</view>
<input type="text" v-model="datas.formData.maxDiscountAmount" placeholder="0" />
<hr />
</view>
<view>
<view>
角色
</view>
<view @tap="show=true" style="height: 50rpx;font-size: 28rpx;color: #999999;">{{datas.rolesdata }}</view>
<hr />
</view>
</view>
<view class="h7">员工权限设置</view>
<view class="contentBottom" v-for="item in datas.formData.permissions" :key="item.id">
<view>
{{item.label}}
</view>
<view class="">
<up-checkbox shape='circle' :customStyle="{marginBottom: '8px'}" v-model:checked="ele.hasPermission"
usedAlone v-for="(ele, index) in item.children" :key="index" :label="ele.label"
style="margin-right: 40rpx;font-size: 28rpx;">
</up-checkbox>
</view>
</view>
<view class="bottomBotton" @tap="sumbitEvent">
保存
</view>
<view class="bottomBotton2" @tap="toUrl">
取消
</view>
<!-- 角色选择器 -->
<up-picker :show="show" @confirm="confirm" @cancel="show = false" :columns="columns"></up-picker>
<!-- 弹窗 -->
<uni-popup ref="message" type="message">
<uni-popup-message type="warn" message="请选择角色" :duration="2000"></uni-popup-message>
</uni-popup>
</template>
<script setup>
import {
getCurrentInstance,
onMounted,
reactive,
ref
} from 'vue';
import go from '@/commons/utils/go.js';
import {
tbShopPermissionList,
getroles,
tbPlussShopStaff,
tbPlussShopStaffDetail
} from "@/http/yskApi/requestAll.js"
const currentInstance = getCurrentInstance()
const props = defineProps({
type: {
type: String
},
id: {
type: Number
}
})
let datas = reactive({
formData: {
permissions: []
},
rolesList: [],
columns: [],
rolesdata: '请选择角色'
})
const columns = reactive([
[]
]);
const show = ref(false)
onMounted(() => {
// 获取角色信息
getrolesEvent()
if (props.type == 'add') {
getList()
} else {
// 调用id查询接口和编辑接口
gettbPlussShopStaffDetail(props.id)
}
})
function gettbPlussShopStaffDetail(id) {
tbPlussShopStaffDetail(id).then(res => {
datas.formData = res
datas.rolesdata = datas.rolesList.filter(ele => ele.id == res.roleId)[0].name
})
}
function sumbitEvent() {
let rolesId = datas.rolesList.filter(ele => ele.name == datas.rolesdata)
if (rolesId.length == 0) {
currentInstance.ctx.$refs.message.open()
return
}
datas.formData.roleId = rolesId[0].id
datas.formData.permissions.forEach(ele => {
ele.children.forEach(res => {
if (res.hasPermission) {
res.hasPermission = 1
}
})
})
tbPlussShopStaff({
shopId: uni.getStorageSync("shopId"),
...datas.formData
}).then(res => {
toUrl()
})
}
function getList() {
tbShopPermissionList().then((res) => {
datas.formData.permissions = res
})
}
function getrolesEvent() {
getroles().then((res) => {
datas.rolesList = res.content
res.content.forEach(ele => {
columns[0].push(ele.name)
})
})
}
function confirm(e) {
// console.log(e.value, '调试1')
datas.rolesdata = e.value[0]
show.value = false
}
function toUrl() {
go.to('PAGES_STAFF')
}
</script>
<style scoped lang="less">
page {
background-color: #f9f9f9;
padding: 32rpx 28rpx;
}
.h7 {
margin: 32rpx 0;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.content {
width: 694rpx;
// height: 1256rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
>view {
padding: 32rpx 24rpx;
background-color: #fff;
font-weight: bold;
font-size: 28rpx;
color: #333333;
>input {
padding: 24rpx 0;
}
}
}
.contentBottom {
width: 694rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 32rpx 24rpx;
margin-top: 24rpx;
}
.bottomBotton {
width: 530rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #318AFE;
border-radius: 56rpx 56rpx 56rpx 56rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
margin-top: 50rpx;
margin-left: 50%;
transform: translateX(-50%);
}
.bottomBotton2 {
width: 530rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
font-weight: 400;
color: #999999;
margin-left: 50%;
transform: translateX(-50%);
}
</style>

166
pageStaff/index.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<ul class="liststyle">
<li v-for="item in datas.list " :key="item.id">
<view class="">
<view class="">
<span style="font-size: 28rpx;color: #333333; ">{{item.name}}</span>
<span style="font-size: 24rpx;color: #999; ">{{item.code}}</span>
</view>
<view class="" style="font-size: 24rpx;color: #666666;">
{{item.account}}
</view>
</view>
<view class="">
<view class="">
<span style="font-size: 28rpx;color: #999999;">是否启用用</span>
<up-switch :activeValue="1" :inactiveValue="0" v-model="item.status" size="18"
@change="switch2Change($event,item)"></up-switch>
</view>
<view class="df">
<up-button size="small" style="border-radius: 28rpx 28rpx 28rpx 28rpx;"
@tap="datas.show = true;datas.rolesId=item.id" text="删除"></up-button>
<up-button type="primary" plain size="small"
style="border-radius: 28rpx 28rpx 28rpx 28rpx;margin-left: 16rpx;" @tap="toUrl(item)"
text="编辑"></up-button>
</view>
</view>
</li>
</ul>
<view class="bottomBotton" @tap="toUrl">
添加员工
</view>
<!-- 删除确认框 -->
<up-modal :show="datas.show" contentTextAlign="center" showCancelButton @confirm='delTableHandle'
@cancel='datas.show=false' content='是否确认删除?'></up-modal>
</template>
<script setup>
import {
reactive,
ref,
watch,
onMounted
} from 'vue';
import go from '@/commons/utils/go.js';
import {
rolesGet,
shopStaffDelete,
updateStatus
} from "@/http/yskApi/requestAll.js"
let datas = reactive({
list: [],
show: false,
// 删除员工id
rolesId: ""
})
onMounted(() => {
getList()
})
function delTableHandle() {
shopStaffDelete(
[datas.rolesId]
)
datas.show = false
setTimeout(() => {
getList()
}, 500)
}
function toUrl(d) {
if (d.id) {
go.to('PAGES_ADD_STAFF', {
type: '',
id: d.id
})
} else {
go.to('PAGES_ADD_STAFF', {
type: 'add',
})
}
}
function switch2Change(e, d) {
updateStatus({
id: d.id,
status: e
}).then(res => {
setTimeout(() => {
getList()
}, 500)
})
}
function getList() {
rolesGet({
shopId: uni.getStorageSync("shopId"),
page: 1,
size: 100
}).then((res) => {
datas.list = res.content
})
}
</script>
<style lang="less" scoped>
* {
padding: 0;
margin: 0;
text-decoration: none;
outline: none;
}
page {
background-color: #f9f9f9;
}
ul,
li {
list-style: none;
}
.liststyle {
>li {
width: 694rpx;
height: 192rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 0 16rpx;
margin: 32rpx auto;
>view {
display: flex;
align-items: center;
justify-content: space-between;
height: 96rpx;
}
>view:first-child {
border-bottom: 2rpx solid #E5E5E5;
}
}
}
.bottomBotton {
width: 530rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #318AFE;
border-radius: 56rpx 56rpx 56rpx 56rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
position: fixed;
bottom: 20rpx;
left: 50%;
transform: translateX(-50%);
}
.df {
display: flex;
justify-content: center;
}
</style>