You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
360 lines
8.6 KiB
360 lines
8.6 KiB
<template> |
|
<view class="detail"> |
|
<view class="addDiver_card"> |
|
<view class="card_title"> |
|
<view class="tiao"></view> |
|
<view class="card_title_text">基础信息</view> |
|
</view> |
|
<uni-list> |
|
<uni-list-item> |
|
<view class="list_header" slot="header"> |
|
<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;" |
|
mode="widthFix"></image> |
|
用户手机号 |
|
</view> |
|
<view slot="body" class="list_right"> |
|
<input v-model="postData.phone" :disabled="!isAdd" placeholder="请输入用户手机号" |
|
class="list_right_input" /> |
|
</view> |
|
</uni-list-item> |
|
<uni-list-item> |
|
<view class="list_header" slot="header"> |
|
<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;" |
|
mode="widthFix"></image> |
|
用户姓名 |
|
</view> |
|
<view slot="body" class="list_right"> |
|
<input v-model="postData.userName" :disabled="!wantUpdate" placeholder="请输入用户姓名" |
|
class="list_right_input" /> |
|
</view> |
|
</uni-list-item> |
|
<uni-list-item> |
|
<view class="list_header" slot="header"> |
|
<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;" |
|
mode="widthFix"></image> |
|
用户密码 |
|
</view> |
|
<view slot="body" class="list_right"> |
|
<input v-model="postData.password" password :disabled="!wantUpdate" placeholder="请输入密码" |
|
class="list_right_input" /> |
|
</view> |
|
</uni-list-item> |
|
</uni-list> |
|
<view class="card_title"> |
|
<view class="tiao"></view> |
|
<view class="card_title_text">用户权限信息</view> |
|
</view> |
|
<uni-list> |
|
<uni-list-item direction="column" |
|
@tap="jump('/userManagement/customer/components/company',postData.oilCompanyInfoList)"> |
|
<view class="list_header" slot="header"> |
|
所属公司 |
|
</view> |
|
<view slot="body" class="list-frame"> |
|
<view> |
|
<text class="label" v-for="(item,index) in postData.oilCompanyInfoList" |
|
:key="index">{{item.name}}</text> |
|
</view> |
|
<view v-if="!postData.oilCompanyInfoList.length" class="tips">选择所属公司</view> |
|
<uni-icons v-show="wantUpdate" color="#999" type="right" size="15"></uni-icons> |
|
</view> |
|
</uni-list-item> |
|
<uni-list-item direction="column" |
|
@tap="jump('/userManagement/customer/components/auth',postData.sysUserRoleList)"> |
|
<view class="list_header" slot="header"> |
|
<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;" |
|
mode="widthFix"></image> |
|
所属权限 |
|
</view> |
|
<view slot="body" class="list-frame"> |
|
<view> |
|
<text class="label" v-for="(item,index) in postData.sysUserRoleList" |
|
:key="index">{{item.roleName}}</text> |
|
</view> |
|
<view v-if="!postData.sysUserRoleList.length" class="tips">选择所属权限</view> |
|
<uni-icons v-show="wantUpdate || !postData.sysUserRoleList.length" color="#999" type="right" |
|
size="15"></uni-icons> |
|
</view> |
|
</uni-list-item> |
|
</uni-list> |
|
</view> |
|
<view class="button-group"> |
|
<view v-if="!wantUpdate" class="button red" @tap="update">修改</view> |
|
<view v-else class="button blue" @tap="submit">保存</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import tool from '@/utils/tool' |
|
|
|
import serve from '@/api/userManagement/customer.js' |
|
|
|
export default { |
|
data() { |
|
return { |
|
isAdd: false, |
|
wantUpdate: false, |
|
postData: { |
|
phone: '', |
|
userName: '', |
|
password:'', |
|
sysUserRoleList: [], |
|
oilCompanyInfoList: [], |
|
}, |
|
} |
|
}, |
|
onLoad(options) { |
|
if (options.item) { |
|
this.postData = JSON.parse(decodeURI(options.item)) |
|
this.getByUserId() |
|
} else this.isAdd = this.wantUpdate = true |
|
|
|
uni.$on('customerCompany', (item) => { |
|
if (!item.isChecked) { |
|
let index = this.postData.oilCompanyInfoList.findIndex(secItem => secItem.id == item.id) |
|
if (index !== -1) { |
|
this.postData.oilCompanyInfoList.splice(index, 1) |
|
} |
|
return |
|
} |
|
this.postData.oilCompanyInfoList.push(item) |
|
}) |
|
|
|
uni.$on('customerAuth', (item) => { |
|
if (!item.isChecked) { |
|
let index = this.postData.sysUserRoleList.findIndex(secItem => secItem.id == item.id) |
|
if (index !== -1) { |
|
this.postData.sysUserRoleList.splice(index, 1) |
|
} |
|
return |
|
} |
|
this.postData.sysUserRoleList.push(item) |
|
console.log('this.postData.sysUserRoleList', this.postData.sysUserRoleList) |
|
}) |
|
}, |
|
methods: { |
|
getByUserId() { |
|
serve.getByUserId(this.postData.id).then(res => { |
|
this.$set(this.postData, 'sysUserRoleList', res.data.sysUserRoleList) |
|
this.$set(this.postData, 'oilCompanyInfoList', res.data.oilCompanyInfoList) |
|
}) |
|
}, |
|
submit() { |
|
let needCheckMap = { |
|
userName: { |
|
tacitly: '', |
|
WrongText: '请输入用户姓名' |
|
}, |
|
phone: { |
|
custom: /^[1][3,4,5,7,8,9][0-9]{9}$/, |
|
WrongText: '请输入正确手机号码' |
|
}, |
|
oilCompanyInfoList: { |
|
minLength: 1, |
|
WrongText: '请选择所属公司' |
|
}, |
|
sysUserRoleList: { |
|
minLength: 1, |
|
WrongText: '请选择所属权限' |
|
} |
|
} |
|
if(this.isAdd) { |
|
needCheckMap['password'] = { |
|
tacitly: '', |
|
WrongText: '请输入用户密码' |
|
} |
|
} |
|
|
|
let check = tool.checkFn(this.postData, [], needCheckMap) |
|
|
|
if (!check.result) { |
|
uni.showToast({ |
|
title: check.WrongText, |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
|
|
let roleIds = this.postData.sysUserRoleList.reduce((pre, cur) => { |
|
pre.push(cur.id) |
|
return pre |
|
}, []) |
|
this.postData.roleIds = roleIds |
|
|
|
let companyIds = this.postData.oilCompanyInfoList.reduce((pre, cur) => { |
|
pre.push(cur.id) |
|
return pre |
|
}, []) |
|
this.postData.companyIds = companyIds |
|
this.postData.userId = this.postData.id |
|
|
|
this.judgeQuery().then(res => { |
|
if (res.code === 20000) { |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
setTimeout(() => { |
|
uni.navigateBack() |
|
}, 1500) |
|
} |
|
}) |
|
}, |
|
judgeQuery() { |
|
if (this.isAdd) return serve.enterpriseUserSave(this.postData) |
|
else return serve.userPermissionUpdate(this.postData) |
|
}, |
|
update() { |
|
this.wantUpdate = true |
|
}, |
|
jump(path, item, banJump = true) { |
|
if (!banJump) return |
|
if (!this.wantUpdate) return |
|
let url = item ? `${path}?item=${encodeURI(JSON.stringify(item))}` : path |
|
uni.navigateTo({ |
|
url |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.detail { |
|
padding: 0 40rpx; |
|
|
|
.addDiver_card { |
|
|
|
background: #FFFFFF; |
|
box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2); |
|
border-radius: 20rpx; |
|
margin-top: 38rpx; |
|
overflow: hidden; |
|
padding: 20rpx; |
|
box-sizing: border-box; |
|
|
|
.card_title { |
|
display: flex; |
|
// border-bottom: 1px solid #F0F0F0; |
|
align-items: center; |
|
padding-bottom: 17rpx; |
|
height: 86rpx; |
|
} |
|
|
|
.card_title_text { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #333333; |
|
margin-left: 10rpx; |
|
} |
|
|
|
.tiao { |
|
width: 8rpx; |
|
height: 34rpx; |
|
background: #2866FF; |
|
} |
|
|
|
.list_header { |
|
font-size: 28rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #333333; |
|
display: flex; |
|
align-items: center; |
|
// padding-left: 16px; |
|
position: relative; |
|
height: fit-content; |
|
} |
|
|
|
|
|
.list_right { |
|
flex: 1; |
|
display: flex; |
|
justify-content: flex-end; |
|
} |
|
|
|
.list_right_input { |
|
width: 100%; |
|
color: #333333; |
|
text-align: end !important; |
|
font-size: 28rpx; |
|
text-align: right !important; |
|
padding-left: 90rpx; |
|
box-sizing: border-box; |
|
} |
|
|
|
.list-frame { |
|
margin-top: 25rpx; |
|
position: relative; |
|
|
|
&.site { |
|
margin: 0; |
|
flex: 1 |
|
} |
|
|
|
uni-icons { |
|
position: absolute; |
|
top: 50%; |
|
transform: translateY(-51%); |
|
right: -30rpx; |
|
} |
|
|
|
.tips { |
|
font-size: 24rpx; |
|
color: #999; |
|
text-align: right; |
|
|
|
&.rel2rpx { |
|
position: 'relative'; |
|
top: 2rpx |
|
} |
|
} |
|
} |
|
|
|
.single-label { |
|
color: #999; |
|
font-size: 24rpx; |
|
} |
|
|
|
.label { |
|
margin: 3rpx 1rpx; |
|
display: inline-block; |
|
padding: 10rpx 15rpx; |
|
color: #999; |
|
font-size: 24rpx; |
|
border: 1px solid #F0F0F0; |
|
border-radius: 5rpx; |
|
} |
|
} |
|
|
|
.button-group { |
|
position: absolute; |
|
left: 50%; |
|
bottom: 70rpx; |
|
transform: translateX(-50%); |
|
} |
|
|
|
.button { |
|
width: 670rpx; |
|
height: 100rpx; |
|
text-align: center; |
|
line-height: 100rpx; |
|
color: #fff; |
|
border-radius: 10rpx; |
|
|
|
// &:nth-of-type(2) { |
|
// margin-top: 50rpx; |
|
// } |
|
|
|
&.red { |
|
background: #EA0000; |
|
} |
|
|
|
&.blue { |
|
background: #2866FF; |
|
} |
|
} |
|
} |
|
</style>
|
|
|