319 lines
8.8 KiB
Vue
319 lines
8.8 KiB
Vue
|
<template>
|
|||
|
|
<page-meta>
|
|||
|
|
<navigation-bar :title="$tt('share.userDetail')" title-align="center" background-color="#F1F3F9"
|
|||
|
|
front-color="#000000" />
|
|||
|
|
</page-meta>
|
|||
|
|
<view class="device-share-detail-wrap">
|
|||
|
|
<view class="user-info-wrap">
|
|||
|
|
<view class="title-wrap">
|
|||
|
|
<u--text size="15" prefixIcon="account-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
|
|||
|
|
:text="$tt('share.userMsg')"></u--text>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-wrap">
|
|||
|
|
<view class="item">
|
|||
|
|
<u--text :text="$tt('share.userId')+form.userId" lineHeight="30" size="14"></u--text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<u--text :text="$tt('share.userName')+form.userName" lineHeight="30" size="14"></u--text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<u--text :text="$tt('share.phoneNumber')+form.phonenumber" lineHeight="30" size="14"></u--text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="permission-wrap">
|
|||
|
|
<view class="title-wrap">
|
|||
|
|
<u--text size="15" prefixIcon="integral-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
|
|||
|
|
:text="$tt('share.userPermissions')"></u--text>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-wrap">
|
|||
|
|
<u-checkbox-group placement="column" @change="checkboxChange">
|
|||
|
|
<view class="checkbox-item-wrap" v-for="(item, index) in permissionList">
|
|||
|
|
<view>
|
|||
|
|
<u--text :text="`${item.modelName} (${item.identifier})`" size="14" color="#000"></u--text>
|
|||
|
|
<u--text type="info" :text="item.remark ? item.remark: $tt('share.notRemark')"
|
|||
|
|
size="14"></u--text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-checkbox :customStyle="{marginBottom: '26rpx'}" :key="index" :name="item.modelName"
|
|||
|
|
:checked="item.checked">
|
|||
|
|
</u-checkbox>
|
|||
|
|
</view>
|
|||
|
|
</u-checkbox-group>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="remark-wrap">
|
|||
|
|
<view class="title-wrap">
|
|||
|
|
<u--text size="15" prefixIcon="file-text-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
|
|||
|
|
:text="$tt('share.remark')"></u--text>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-wrap">
|
|||
|
|
<u--textarea v-model="form.remark" :placeholder="$tt('deviceDetail.inputMsg')" border="none"
|
|||
|
|
confirmType="done"></u--textarea>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="btn-wrap">
|
|||
|
|
<u-button v-if="type === 1" type="primary" :plain="true" @tap="handleAddUser"
|
|||
|
|
customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-bottom: 20rpx">{{$tt('share.confirmShare')}}</u-button>
|
|||
|
|
<u-button v-if="type === 2" type="error" :plain="true" @tap="handleDeleteUser"
|
|||
|
|
customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-bottom: 20rpx">{{$tt('common.delete')}}</u-button>
|
|||
|
|
<u-button v-if="type === 2" type="primary" :plain="true" @tap="handleEditUser"
|
|||
|
|
customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-bottom: 20rpx">{{$tt('common.save')}}</u-button>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="footer">
|
|||
|
|
<u-button type="primary" :plain="true" @tap="handleSubmitForm"
|
|||
|
|
customStyle="border: none; border-radius: 5px; padding: 50rpx 0;">{{$tt('common.save')}}</u-button>
|
|||
|
|
<u-button v-if="isUpdate" type="error" :plain="true" @tap="handleDelete()"
|
|||
|
|
customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-top: 10px;">{{$tt('common.delete')}}</u-button>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
addDeviceUser,
|
|||
|
|
updateDeviceUser,
|
|||
|
|
delDeviceUser
|
|||
|
|
} from '@/apis/modules/deviceUser';
|
|||
|
|
import {
|
|||
|
|
getModelPermList
|
|||
|
|
} from "@/apis/modules/model";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
type: 1, // 类型: 1=新增，2=更新
|
|||
|
|
permissionList: [], // 权限列表
|
|||
|
|
selectPerms: [], // 选中的权限列表
|
|||
|
|
// 表单参数
|
|||
|
|
form: {
|
|||
|
|
deviceId: null,
|
|||
|
|
userId: null,
|
|||
|
|
deviceName: null,
|
|||
|
|
userName: null,
|
|||
|
|
perms: null,
|
|||
|
|
phonenumber: null,
|
|||
|
|
remark: null
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.form.phonenumber = option.phonenumber;
|
|||
|
|
this.form.remark = option.remark;
|
|||
|
|
this.form.userId = option.userId;
|
|||
|
|
this.form.userName = option.userName;
|
|||
|
|
this.form.deviceId = option.deviceId;
|
|||
|
|
this.form.deviceName = option.deviceName;
|
|||
|
|
this.form.productId = option.productId;
|
|||
|
|
this.form.perms = option.perms;
|
|||
|
|
this.type = Number(option.type);
|
|||
|
|
this.getPermissionList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 查询产品物模型设备权限列表
|
|||
|
|
async getPermissionList() {
|
|||
|
|
if (this.form.perms) {
|
|||
|
|
this.selectPerms = this.form.perms.split(',');
|
|||
|
|
}
|
|||
|
|
getModelPermList(this.form.productId, this.form.deviceId, this.profile.userId).then((response) => {
|
|||
|
|
// 固定增加设备系统相关权限
|
|||
|
|
this.permissionList = response.data;
|
|||
|
|
if (this.selectPerms.length > 0) {
|
|||
|
|
for (let i = 0; i < this.permissionList.length; i++) {
|
|||
|
|
for (let j = 0; j < this.selectPerms.length; j++) {
|
|||
|
|
if (this.permissionList[i].identifier == this.selectPerms[j]) {
|
|||
|
|
this.permissionList[i].checked = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 复选框改变事件
|
|||
|
|
checkboxChange(data) {
|
|||
|
|
this.selectPerms = [];
|
|||
|
|
for (let i = 0; i < this.permissionList.length; i++) {
|
|||
|
|
if (data.indexOf(this.permissionList[i].modelName) != -1) {
|
|||
|
|
this.selectPerms.push(this.permissionList[i].identifier)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 添加设备用户
|
|||
|
|
handleAddUser() {
|
|||
|
|
this.form.perms = this.selectPerms.join(',');
|
|||
|
|
addDeviceUser(this.form).then(response => {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'success',
|
|||
|
|
title: this.$tt('share.deviceShareSuccess')
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
success: (e) => {
|
|||
|
|
var pages = getCurrentPages();
|
|||
|
|
var page = pages[pages.length - 2];
|
|||
|
|
if (page === undefined || page === null)
|
|||
|
|
return;
|
|||
|
|
// 更新列表
|
|||
|
|
if (uni.getSystemInfoSync().platform ===
|
|||
|
|
'devtools') {
|
|||
|
|
page.$vm.dataList = [];
|
|||
|
|
page.$vm.getList();
|
|||
|
|
} else {
|
|||
|
|
page.dataList = [];
|
|||
|
|
page.getList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 编辑
|
|||
|
|
handleEditUser() {
|
|||
|
|
this.form.perms = this.selectPerms.join(',');
|
|||
|
|
updateDeviceUser(this.form).then(response => {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'success',
|
|||
|
|
title: this.$tt('common.updateSuccessful')
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
success: (e) => {
|
|||
|
|
var pages = getCurrentPages();
|
|||
|
|
var page = pages[pages.length - 1];
|
|||
|
|
if (page === undefined || page === null)
|
|||
|
|
return;
|
|||
|
|
// 更新列表
|
|||
|
|
if (uni.getSystemInfoSync().platform ===
|
|||
|
|
'devtools') {
|
|||
|
|
page.$vm.dataList = [];
|
|||
|
|
page.$vm.getList();
|
|||
|
|
} else {
|
|||
|
|
page.dataList = [];
|
|||
|
|
page.getList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 删除
|
|||
|
|
handleDeleteUser() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: this.$tt('share.title'),
|
|||
|
|
content: this.$tt('share.alert'),
|
|||
|
|
cancelText: this.$tt('common.cancel'),
|
|||
|
|
confirmText: this.$tt('common.confirm'),
|
|||
|
|
success: result => {
|
|||
|
|
if (result.confirm) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: this.$tt('share.delete')
|
|||
|
|
});
|
|||
|
|
delDeviceUser(this.form).then(res => {
|
|||
|
|
if (res) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'success',
|
|||
|
|
title: res.msg
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
success: (e) => {
|
|||
|
|
var pages =
|
|||
|
|
getCurrentPages();
|
|||
|
|
var page = pages[pages
|
|||
|
|
.length - 1];
|
|||
|
|
if (page ===
|
|||
|
|
undefined ||
|
|||
|
|
page ===
|
|||
|
|
null)
|
|||
|
|
return;
|
|||
|
|
// 更新列表
|
|||
|
|
if (uni
|
|||
|
|
.getSystemInfoSync()
|
|||
|
|
.platform ===
|
|||
|
|
'devtools') {
|
|||
|
|
page.$vm
|
|||
|
|
.dataList = [];
|
|||
|
|
page.$vm.getList();
|
|||
|
|
} else {
|
|||
|
|
page.dataList = [];
|
|||
|
|
page.getList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
}).finally(() => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: $uni-bg-color-grey;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-share-detail-wrap {
|
|||
|
|
|
|||
|
|
padding: 40rpx 0;
|
|||
|
|
|
|||
|
|
.user-info-wrap,
|
|||
|
|
.permission-wrap,
|
|||
|
|
.remark-wrap {
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
|
|||
|
|
.title-wrap {
|
|||
|
|
padding-top: 35rpx;
|
|||
|
|
padding-bottom: 35rpx;
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #e0e2e7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container-wrap {
|
|||
|
|
//margin-top: 10rpx;
|
|||
|
|
padding: 15rpx 35rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
//border-bottom: 4px solid #f1f3f9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkbox-item-wrap {
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
//border-bottom: 4px solid #f1f3f9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.permission-wrap,
|
|||
|
|
.remark-wrap {
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remark-wrap {
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-wrap {
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
//display: flex;
|
|||
|
|
//margin: 80rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|