285 lines
8.1 KiB
Vue
285 lines
8.1 KiB
Vue
<template>
|
||
<page-meta>
|
||
<navigation-bar :title="$tt('share.userDetail')" title-align="center" background-color="#007AFF" />
|
||
</page-meta>
|
||
<view class="device-share-detail-wrap">
|
||
<view class="user-info-wrap">
|
||
<view class="title-wrap">
|
||
<u--text bold size="15" prefixIcon="account-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
|
||
:text="$tt('share.userMsg')"></u--text>
|
||
</view>
|
||
<view class="container-wrap">
|
||
<u--text :text="$tt('share.userId')+form.userId" lineHeight="28"></u--text>
|
||
<u--text :text="$tt('share.userName')+form.userName" lineHeight="28"></u--text>
|
||
<u--text :text="$tt('share.phoneNumber')+form.phonenumber" lineHeight="28"></u--text>
|
||
</view>
|
||
</view>
|
||
<view class="permission-wrap">
|
||
<view class="title-wrap">
|
||
<u--text bold 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">
|
||
<u-checkbox :customStyle="{marginBottom: '26rpx'}" :key="index"
|
||
:label="`${item.modelName} (${item.identifier})`" :name="item.modelName"
|
||
:checked="item.checked">
|
||
</u-checkbox>
|
||
<u--text type="info" :text="item.remark ? item.remark: $tt('share.notRemark')" size="14"
|
||
margin="-20rpx 0rpx 20rpx 48rpx"></u--text>
|
||
</view>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="remark-wrap">
|
||
<view class="title-wrap">
|
||
<u--text bold 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="bottom" confirmType="done"></u--textarea>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn-wrap">
|
||
<u-button v-if="type === 1" type="success" customStyle="margin: 20rpx; padding: 30rpx;" @tap="handleAddUser"
|
||
size="small">{{$tt('share.confirmShare')}}</u-button>
|
||
<u-button v-if="type === 2" type="error" @tap="handleDeleteUser" size="small"
|
||
customStyle="margin: 20rpx; padding: 30rpx;">{{$tt('common.delete')}}</u-button>
|
||
<u-button v-if="type === 2" type="primary" @tap="handleEditUser" size="small"
|
||
customStyle="margin: 20rpx; padding: 30rpx;">{{$tt('common.save')}}</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).then((response) => {
|
||
// 固定增加设备系统相关权限
|
||
this.permissionList = [{
|
||
identifier: "ota",
|
||
modelName: this.$tt('share.deviceUpgradation'),
|
||
remark: this.$tt('share.otaUpgradation')
|
||
}, {
|
||
identifier: "timer",
|
||
modelName: this.$tt('share.timing'),
|
||
remark: this.$tt('share.timedTaskExecution')
|
||
}, {
|
||
identifier: "log",
|
||
modelName: this.$tt('share.deviceLog'),
|
||
remark: this.$tt('share.contains')
|
||
}, {
|
||
identifier: "monitor",
|
||
modelName: this.$tt('share.monitior'),
|
||
remark: this.$tt('share.afterMonitior')
|
||
}, {
|
||
identifier: "statistic",
|
||
modelName:this.$tt('share.monitioringStatic'),
|
||
remark: this.$tt('share.chartDisplay')
|
||
}];
|
||
this.permissionList = this.permissionList.concat(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;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 复选框改变事件
|
||
checkboxChange (data) {
|
||
this.selectPerms = [];
|
||
console.log(data)
|
||
for (let i = 0; i < this.permissionList.length; i++) {
|
||
if (data.indexOf(this.permissionList[i].modelName) != -1) {
|
||
this.selectPerms.push(this.permissionList[i].identifier)
|
||
}
|
||
}
|
||
console.log(this.selectPerms)
|
||
},
|
||
// 添加设备用户
|
||
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 - 2];
|
||
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'),
|
||
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 - 2];
|
||
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: #eef3f7;
|
||
}
|
||
|
||
.device-share-detail-wrap {
|
||
|
||
padding: 40rpx 0;
|
||
|
||
.user-info-wrap,
|
||
.permission-wrap,
|
||
.remark-wrap {
|
||
.title-wrap {
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.container-wrap {
|
||
margin-top: 10rpx;
|
||
padding: 30rpx 40rpx;
|
||
background: #ffffff;
|
||
}
|
||
}
|
||
|
||
.permission-wrap,
|
||
.remark-wrap {
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.btn-wrap {
|
||
display: flex;
|
||
margin: 80rpx 0;
|
||
}
|
||
}
|
||
</style> |