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> |