428 lines
8.8 KiB
Vue
428 lines
8.8 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :title="tit" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000"
|
|
title-size='36' height='50'></u-navbar>
|
|
<view class="box">
|
|
<view class="title">
|
|
基本信息
|
|
</view>
|
|
<view class="list">
|
|
<view class="list_val" style="position: relative;">
|
|
<view class="" style="padding-top:12rpx;width: 176rpx;">身份类型</view> <input type="text" disabled="false" v-model="sheng" :placeholder="sheng" />
|
|
<!-- <u-select v-model="show" :list="arr" @confirm="confirm"></u-select> -->
|
|
</view>
|
|
<view class="list_val">
|
|
<view class="" style="padding-top:12rpx">手机号码</view> <input type="text" v-model="tel"
|
|
placeholder="请输入手机号码" />
|
|
</view>
|
|
<!-- <view class="list_val">
|
|
<view class="" style="padding-top:12rpx">分成比例</view> <input type="text" v-model="bili"
|
|
placeholder="请输入分成比例%" />
|
|
</view> -->
|
|
<view class="list_val">
|
|
<view class="" style="padding-top:12rpx">备注</view> <input type="text" v-model="beizhu"
|
|
placeholder="请输入备注" />
|
|
</view>
|
|
</view>
|
|
<view class="title">
|
|
权限
|
|
</view>
|
|
<view class="swlist">
|
|
<view class="swlist_val" v-for="(item,index) in list" :key="index">
|
|
<view class="lt">
|
|
<view class="one">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="two">
|
|
{{item.tit}}
|
|
</view>
|
|
</view>
|
|
<view class="rt">
|
|
<u-switch v-model="item.checked" active-color="#4C97E7" size="36"
|
|
inactive-color="#eee"></u-switch>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="baocun" @click="btncj">
|
|
{{tit}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
bgc: {
|
|
backgroundColor: "#fff"
|
|
},
|
|
level: '',
|
|
tel: '',
|
|
sheng: '运维',
|
|
arr: [{
|
|
label: '加盟商',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '合伙人',
|
|
value: 2
|
|
}
|
|
],
|
|
tit: '创建运维人员',
|
|
userId: '',
|
|
bili: '',
|
|
beizhu: '',
|
|
jiamtype: '',
|
|
areaId: '',
|
|
jiamid: '',
|
|
// 权限映射配置
|
|
permissionConfig: {
|
|
'查看运营区': 'area:view',
|
|
'操作运营区': 'area:edit',
|
|
'查看故障': 'fault:view',
|
|
'故障审核': 'fault:edit',
|
|
'查看订单': 'order:view',
|
|
'操作订单': 'order:edit',
|
|
'查看车辆': 'device:view',
|
|
'操作车辆': 'device:edit',
|
|
'查看订单金额': 'order:view:amount',
|
|
'查看客服': 'customerService:view',
|
|
'操作客服': 'customerService:edit'
|
|
},
|
|
list: [{
|
|
name: '查看运营区',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 1
|
|
},
|
|
{
|
|
name: '操作运营区',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 2
|
|
},
|
|
{
|
|
name: '查看故障',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 3
|
|
},
|
|
{
|
|
name: '故障审核',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 4
|
|
},
|
|
{
|
|
name: '查看订单',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 5
|
|
},
|
|
{
|
|
name: '操作订单',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 6
|
|
},
|
|
{
|
|
name: '查看车辆',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 7
|
|
},
|
|
{
|
|
name: '操作车辆',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 8
|
|
},
|
|
{
|
|
name: '查看客服',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 10
|
|
},
|
|
{
|
|
name: '操作客服',
|
|
tit: '是否允许',
|
|
checked: false,
|
|
txt: 11
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
onLoad(option) {
|
|
this.areaId = uni.getStorageSync('adminAreaid')
|
|
|
|
if (option.item) {
|
|
this.tit = '编辑运维人员'
|
|
const obj = JSON.parse(option.item)
|
|
this.initFormData(obj)
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 初始化表单数据
|
|
initFormData(obj) {
|
|
this.tel = obj.userPhone
|
|
this.areaId = obj.areaId
|
|
this.bili = obj.point
|
|
this.jiamid = obj.id
|
|
this.beizhu = obj.remark
|
|
this.jiamtype = obj.type
|
|
|
|
// 设置权限选中状态
|
|
this.setPermissionStatus(obj.permissions)
|
|
|
|
// 设置身份类型显示
|
|
},
|
|
|
|
// 设置权限选中状态
|
|
setPermissionStatus(permissions) {
|
|
const permissionMap = {
|
|
'area:view': 0,
|
|
'area:edit': 1,
|
|
'fault:view': 2,
|
|
'fault:edit': 3,
|
|
'order:view': 4,
|
|
'order:edit': 5,
|
|
'device:view': 6,
|
|
'device:edit': 7,
|
|
'customerService:view': 8,
|
|
'customerService:edit': 9
|
|
}
|
|
|
|
permissions.forEach(permission => {
|
|
const index = permissionMap[permission]
|
|
if (index !== undefined) {
|
|
this.list[index].checked = true
|
|
}
|
|
})
|
|
},
|
|
|
|
// 身份选择确认
|
|
confirm(e) {
|
|
this.sheng = e[0].label
|
|
this.jiamtype = e[0].value
|
|
},
|
|
|
|
// 收集选中的权限
|
|
collectPermissions() {
|
|
return this.list
|
|
.filter(item => item.checked)
|
|
.map(item => this.permissionConfig[item.name])
|
|
.filter(Boolean) // 过滤掉undefined
|
|
},
|
|
|
|
// 构建请求数据
|
|
buildRequestData() {
|
|
return {
|
|
id: this.jiamid,
|
|
userPhone: this.tel,
|
|
areaId: this.areaId,
|
|
point: this.bili,
|
|
type: 3,
|
|
remark: this.beizhu,
|
|
permissions: this.collectPermissions()
|
|
}
|
|
},
|
|
|
|
// 处理API响应
|
|
handleApiResponse(res, successMessage) {
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: successMessage,
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 2000)
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
},
|
|
|
|
// 点击创建/编辑
|
|
async btncj() {
|
|
const data = this.buildRequestData()
|
|
const isEdit = this.tit === '编辑运维人员'
|
|
const apiMethod = isEdit ? 'put' : 'post'
|
|
const apiUrl = '/bst/areaJoin'
|
|
const successMessage = isEdit ? '编辑成功' : '创建成功'
|
|
|
|
try {
|
|
const res = await this.$u[apiMethod](apiUrl, data)
|
|
this.handleApiResponse(res, successMessage)
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '请求失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/ .u-title,
|
|
/deep/ .uicon-nav-back {
|
|
padding-bottom: 22rpx;
|
|
}
|
|
|
|
.swlist {
|
|
margin-top: 34rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.swlist_val {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 324rpx;
|
|
height: 144rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
padding-top: 28rpx;
|
|
padding-left: 38rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
.lt {
|
|
.one {
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.two {
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
|
|
.rt {
|
|
margin-top: 24rpx;
|
|
padding-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.page {
|
|
width: 750rpx;
|
|
|
|
.box {
|
|
width: 750rpx;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
background: #F4F5F7;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
padding: 32rpx 36rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 100rpx;
|
|
|
|
.baocun {
|
|
width: 584rpx;
|
|
height: 90rpx;
|
|
margin: auto;
|
|
background: linear-gradient(270deg, #4C97E7 0%, #4C97E7 100%);
|
|
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
|
margin-top: 110rpx;
|
|
margin-bottom: 78rpx;
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
}
|
|
|
|
.swlist {
|
|
margin-top: 34rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.swlist_val {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 324rpx;
|
|
height: 144rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
padding-top: 28rpx;
|
|
padding-left: 38rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
.lt {
|
|
.one {
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.two {
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
|
|
.rt {
|
|
margin-top: 24rpx;
|
|
padding-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.list {
|
|
width: 680rpx;
|
|
max-height: 578rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
padding: 46rpx 36rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 34rpx;
|
|
margin-bottom: 47rpx;
|
|
|
|
.list_val {
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
justify-content: space-between;
|
|
margin-bottom: 32rpx;
|
|
|
|
input {
|
|
width: 430rpx;
|
|
height: 70rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
padding-left: 32rpx;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |