337 lines
7.7 KiB
Vue
337 lines
7.7 KiB
Vue
<template>
|
||
<view class="h7">基本信息设置</view>
|
||
<view class="content">
|
||
<view>
|
||
<view>
|
||
<text style="color: red;">*</text>员工姓名
|
||
</view>
|
||
<input type="text" v-model="datas.formData.name" placeholder="请填写员工名称" />
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<text style="color: red;">*</text>手机号
|
||
</view>
|
||
<input type="text" v-model="datas.formData.phone" placeholder="请填写手机号" />
|
||
</view>
|
||
|
||
<view>
|
||
<view>
|
||
<text style="color: red;">*</text>员工编号
|
||
</view>
|
||
<input type="text" v-model="datas.formData.code" placeholder="请填写员工编号" />
|
||
</view>
|
||
|
||
<view>
|
||
<view>
|
||
<text style="color: red;">*</text>员工账号
|
||
</view>
|
||
<input type="text" v-model="datas.formData.accountName" placeholder="请填写员工账号，建议使用手机号" />
|
||
</view>
|
||
<view>
|
||
<view>
|
||
登录密码
|
||
</view>
|
||
<view style="margin: 24rpx 0;display: flex;justify-content: space-between;align-items: center;">
|
||
<input type="text" v-model="datas.formData.accountPwd" @change="datas.isPassword = true" placeholder="请输入登录密码，不填写默认123456" />
|
||
<view style="color: #2979ff;" @click="datas.isPassword = true">重置密码</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view>
|
||
<view style="margin-bottom: 24rpx;">
|
||
优惠类型
|
||
</view>
|
||
<up-radio-group v-model="datas.formData.discountType" placement="row" >
|
||
<up-radio label="折扣" name="1"></up-radio>
|
||
<up-radio label="金额" name="0"></up-radio>
|
||
</up-radio-group>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
最低优惠折扣
|
||
</view>
|
||
<input v-if="datas.formData.discountType==1" @blur="maxdisinput" type="number"
|
||
v-model="datas.formData.maxDiscountAmount" placeholder="请输入最低优惠折扣" />
|
||
<input v-if="datas.formData.discountType==0" type="number" v-model="datas.formData.maxDiscountAmount"
|
||
placeholder="请输入最低优惠折扣" />
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<text style="color: red;">*</text> 角色
|
||
</view>
|
||
<view @tap="show=true" style="height: 50rpx;font-size: 28rpx;color: #999999;margin-top: 24rpx;">{{datas.rolesdata }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="h7">员工权限设置</view>
|
||
<view class="contentBottom" v-for="item in datas.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"
|
||
:labelColor="ele.isImportant==1?'#e66c6d':''" style="margin-right: 40rpx;font-size: 28rpx;">
|
||
</up-checkbox>
|
||
</view>
|
||
</view>
|
||
<view class="bottomBotton" @tap="sumbitEvent">
|
||
保存
|
||
</view>
|
||
|
||
<!-- 消息提示 -->
|
||
<up-toast ref="uToastRef"></up-toast>
|
||
<!-- 角色选择器 -->
|
||
<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,
|
||
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
import {
|
||
onShow,
|
||
} from '@dcloudio/uni-app';
|
||
import go from '@/commons/utils/go.js';
|
||
|
||
import { shopStaffDetail,getShopStaffPermission,shopStaffAdd,shopStaffPut } from "@/api/staff.js"
|
||
import { getShopPermission } from "@/api/index.js"
|
||
import { getRoleList } from "@/api/role.js"
|
||
const currentInstance = getCurrentInstance()
|
||
const props = defineProps({
|
||
type: {
|
||
type: String
|
||
},
|
||
id: {
|
||
type: Number
|
||
}
|
||
})
|
||
let datas = reactive({
|
||
formData: {
|
||
shopPermissionIds: [],
|
||
maxDiscountAmount: 0,
|
||
discountType: 0
|
||
},
|
||
isPassword: false,
|
||
rolesList: [],
|
||
permissions: [],
|
||
columns: [],
|
||
rolesdata: '请选择角色'
|
||
})
|
||
const columns = reactive([
|
||
[]
|
||
]);
|
||
const show = ref(false)
|
||
onShow(() => {
|
||
|
||
|
||
init()
|
||
})
|
||
|
||
async function init () {
|
||
// 获取角色信息
|
||
getrolesEvent()
|
||
//获取权限列表
|
||
let res = await getShopPermission()
|
||
datas.permissions = res
|
||
if (props.type == 'edit') {
|
||
uni.setNavigationBarTitle({
|
||
title: '编辑员工'
|
||
})
|
||
// 调用id查询接口和编辑接口
|
||
getShopStaffDetail(props.id)
|
||
getStaffPermission(props.id)
|
||
} else {
|
||
datas.isPassword = true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取角色列表
|
||
*/
|
||
function getrolesEvent() {
|
||
getRoleList({page: 1,size: 999}).then((res) => {
|
||
datas.rolesList = res.records
|
||
res.records.forEach(ele => {
|
||
columns[0].push(ele.name)
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取角色列表
|
||
*/
|
||
function getStaffPermission(id) {
|
||
getShopStaffPermission({id: id}).then((res2) => {
|
||
|
||
datas.permissions.forEach(ele => {
|
||
ele.children.forEach(res => {
|
||
console.log(res)
|
||
res2.forEach(v => {
|
||
if (res.id == v ) {
|
||
res.hasPermission = 1
|
||
}
|
||
})
|
||
})
|
||
})
|
||
console.log(datas.permissions)
|
||
})
|
||
}
|
||
|
||
|
||
/**
|
||
* 获取用户详情
|
||
* @param {Object} id
|
||
*/
|
||
function getShopStaffDetail(id) {
|
||
shopStaffDetail({id:id}).then(res => {
|
||
datas.formData = res
|
||
if (datas.rolesList) {
|
||
let rolefilter = datas.rolesList.filter(ele => ele.id == res.roleId)
|
||
datas.rolesdata = rolefilter[0].name
|
||
}
|
||
})
|
||
}
|
||
|
||
async function sumbitEvent() {
|
||
// 效验
|
||
if (!datas.formData.name || !datas.formData.phone || !datas.formData.code || !datas.formData.accountPwd) {
|
||
currentInstance.ctx.$refs.uToastRef.show({
|
||
message: "请填写必填项",
|
||
type: 'default',
|
||
})
|
||
return
|
||
}
|
||
|
||
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
|
||
if(datas.permissions){
|
||
datas.permissions.forEach(ele => {
|
||
ele.children.forEach(res => {
|
||
if (res.hasPermission) {
|
||
res.hasPermission = 1
|
||
datas.formData.shopPermissionIds.push(res.id)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
if ( !datas.isPassword ) {
|
||
delete datas.formData.accountPwd;
|
||
}
|
||
let res;
|
||
if( props.type == 'add'){
|
||
res = await shopStaffAdd({...datas.formData})
|
||
} else {
|
||
res = await shopStaffPut({...datas.formData})
|
||
}
|
||
go.back()
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 优惠金额限制
|
||
* @param {Object} d
|
||
*/
|
||
function maxdisinput(d) {
|
||
let num = d.detail.value * 1
|
||
if (num >= 1) {
|
||
datas.formData.maxDiscountAmount = 0.99
|
||
} else {
|
||
datas.formData.maxDiscountAmount = d.detail.value.substring(0, 4)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 角色选择
|
||
* @param {Object} e
|
||
*/
|
||
function confirm(e) {
|
||
datas.rolesdata = e.value[0]
|
||
show.value = false
|
||
}
|
||
|
||
</script>
|
||
<style>
|
||
page {
|
||
background-color: #f9f9f9;
|
||
padding: 32rpx 28rpx;
|
||
}
|
||
</style>
|
||
<style scoped lang="less">
|
||
.h7 {
|
||
margin: 32rpx 0;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
width: 400rpx;
|
||
}
|
||
|
||
.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;
|
||
border-bottom: 1px solid #999999;
|
||
|
||
>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: 0 auto;
|
||
// 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> |