<template>
|
<div class="sub-account" v-if="!isShowAdd && !isShowRelate">
|
<div class="head-name">子账户管理</div>
|
<div class="search">
|
<div class="left">
|
<div class="id">
|
姓名/手机号
|
<el-input v-model="inputText" placeholder="请输入"></el-input>
|
</div>
|
|
<div class="cluster">
|
授权时长
|
<el-select v-model="timeLength" placeholder="请选择">
|
<el-option
|
v-for="item in durationArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
|
<div class="right">
|
<div class="button searchBtn" @click="findUserList">搜索</div>
|
<div class="button resetBtn" @click="reset">重置</div>
|
</div>
|
</div>
|
|
<div class="btns">
|
<div class="button add" @click="isShowAdd = true">
|
<span class="iconfont"></span>
|
<span>添加子账号</span>
|
</div>
|
<div class="button export" @click="isShowRelate = true">
|
<span class="iconfont"></span>
|
<span>关联子账号</span>
|
</div>
|
</div>
|
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
tooltip-effect="dark"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
:stripe="true"
|
>
|
<el-table-column label="序号" width="55" class-name="index">
|
<template slot-scope="scope">{{
|
scope.$index + 1 + (page - 1) * size
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
prop="trueName"
|
label="姓名"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
prop="username"
|
label="用户名"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column prop="userType" label="用户类型">
|
<template slot-scope="scope">
|
<span>{{ scope.row.userType == 1 ? "个人" : "公司" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="authDuration" label="授权时长">
|
</el-table-column>
|
<el-table-column prop="dataNames" label="权限"> </el-table-column>
|
|
<el-table-column label="状态">
|
<template slot-scope="scope">
|
<div v-if="scope.row.isBind == 1" class="status green">已绑定</div>
|
<div v-else class="status">未绑定</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<span class="iconfont option" @click="editUser(scope.row)"
|
>编辑</span
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
:total="total"
|
background
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
<div class="sub-account" v-else-if="isShowAdd">
|
<div class="add-title" @click="isShowAdd = false">
|
<span class="iconfont"></span>
|
<span>添加子账户</span>
|
</div>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
:label-position="'left'"
|
ref="ruleForm"
|
label-width="100px"
|
class="add-ruleForm"
|
>
|
<el-form-item label="用户名" prop="username">
|
<el-input v-model="ruleForm.username" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input v-model="ruleForm.password" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="重置密码" prop="isChangePwd">
|
<el-checkbox v-model="ruleForm.isChangePwd"
|
>首次登陆修改密码</el-checkbox
|
>
|
</el-form-item>
|
<el-form-item label="用户类型" prop="userType">
|
<el-radio v-model="ruleForm.userType" :label="1">个人</el-radio>
|
<el-radio v-model="ruleForm.userType" :label="2">公司</el-radio>
|
</el-form-item>
|
<el-form-item label="姓名" prop="trueName">
|
<el-input v-model="ruleForm.trueName" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱" prop="email">
|
<el-input v-model="ruleForm.email" style="width: 350px"></el-input>
|
</el-form-item>
|
|
<el-form-item label="行业" prop="industryId">
|
<el-select
|
v-model="ruleForm.industryId"
|
placeholder="请选择行业"
|
style="width: 350px"
|
>
|
<el-option
|
v-for="(item, index) in industrys"
|
:label="item.name"
|
:value="item.id"
|
:key="index"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="地区" prop="address">
|
<el-cascader
|
v-model="ruleForm.address"
|
:props="options"
|
style="width: 350px"
|
@change="handleChange"
|
></el-cascader>
|
</el-form-item>
|
<el-form-item label="授权时长" prop="authDuration">
|
<el-select
|
v-model="ruleForm.authDuration"
|
style="width: 350px"
|
placeholder="请选择授权时长"
|
>
|
<el-option label="一年" :value="1"></el-option>
|
<el-option label="两年" :value="2"></el-option>
|
<el-option label="三年" :value="3"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="用户权限" prop="menuIds" class="user-tree">
|
<!-- <TreeBox :defaultProp="defaultProp" :treeData="sysMenus"></TreeBox> -->
|
<!-- <TreeBox :defaultProp="defaultProp2" :treeData="data2"></TreeBox> -->
|
<div class="tree-box">
|
<div class="t">菜单权限</div>
|
<el-tree
|
ref="treeMenus"
|
:data="sysMenus"
|
show-checkbox
|
default-expand-all
|
node-key="id"
|
:props="defaultProp"
|
:default-checked-keys="checkedMenu"
|
check-on-click-node
|
>
|
</el-tree>
|
</div>
|
<div class="tree-box">
|
<div class="t">数据权限</div>
|
<el-tree
|
ref="treeData"
|
:data="DataTree"
|
show-checkbox
|
default-expand-all
|
node-key="id"
|
:props="defaultProp"
|
:default-checked-keys="checkedData"
|
check-on-click-node
|
>
|
</el-tree>
|
</div>
|
</el-form-item>
|
</el-form>
|
<div class="right">
|
<div class="button searchBtn" @click="saveSubUser">保存</div>
|
<div class="button resetBtn" @click="resetUser">重置</div>
|
</div>
|
</div>
|
<div class="sub-account" v-else-if="isShowRelate">
|
<div class="add-title" @click="goback">
|
<span class="iconfont"></span>
|
<span>关联子账户</span>
|
</div>
|
<Steps
|
:titleList="['关联子账号信息', '权限设置', '完成']"
|
:activeIndex="activeIndex"
|
></Steps>
|
<StepsCard @goback="goback" @goto="goto"></StepsCard>
|
</div>
|
</template>
|
|
<script>
|
import { findUserList, saveSubUser, getMenu, getDataTree } from "@/api/user";
|
import { getAreas, getDic } from "@/api/login";
|
|
import Steps from "./Steps";
|
import StepsCard from "./StepCard";
|
export default {
|
components: {
|
Steps,
|
StepsCard,
|
},
|
data() {
|
return {
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
], //搜索时间
|
page: 1,
|
size: 10, //分页相关
|
inputText: "", //输入框内容
|
activeStep: 0,
|
activeIndex: 0,
|
industrys: [],
|
total: 0, //总数
|
options: {
|
lazy: true,
|
lazyLoad(node, resolve) {
|
// 懒加载节点省市数据
|
const { level } = node;
|
let nodes;
|
getAreas({ parentId: level == 0 ? 0 : node.value })
|
.then((json) => {
|
nodes = json.data.list;
|
nodes = nodes.map((item) => ({
|
value: item.id,
|
label: item.name,
|
level: item.level,
|
leaf: level >= 1,
|
}));
|
resolve(nodes);
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
},
|
dataList: [],
|
isShowAdd: false, //是否展示新增弹窗
|
isShowUnbind: false, //是否展示解绑弹窗
|
isShowRelate: false,
|
isEditing: false,
|
unbindId: "",
|
durationArr: [
|
{
|
value: 1,
|
label: "一年",
|
},
|
{
|
value: 2,
|
label: "两年",
|
},
|
{
|
value: 3,
|
label: "三年",
|
},
|
], //所属集群下拉框
|
timeLength: null, //选中的授权时长
|
showQuit: false, //展示退出集群的弹窗
|
showJoin: false, //展示加入集群的弹窗
|
activeEquipment: null, //处理中的设备
|
checkedData: [],
|
checkedMenu: [],
|
ruleForm: {
|
id: "",
|
username: "",
|
userType: "",
|
password: "",
|
trueName: "",
|
email: "",
|
isChangePwd: false,
|
industryId: "",
|
address: [],
|
authDuration: "",
|
areaId: "",
|
provinceId: "",
|
menuIds: [],
|
dataIds: [],
|
},
|
rules: {
|
name: [
|
{ required: true, message: "请输入活动名称", trigger: "blur" },
|
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
],
|
region: [
|
{ required: true, message: "请选择活动区域", trigger: "change" },
|
],
|
resource: [
|
{ required: true, message: "请选择活动资源", trigger: "change" },
|
],
|
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
|
},
|
sysMenus: [],
|
DataTree: [],
|
userInfo: {},
|
curEditId: "",
|
defaultProp: {
|
children: "children",
|
label: "name",
|
},
|
};
|
},
|
created() {
|
this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
|
this.findUserList();
|
this.getIndustrys();
|
this.fetchSysMenus();
|
this.fetchDataTree();
|
},
|
methods: {
|
fetchDataTree() {
|
getDataTree({ userId: this.userInfo.id }).then((res) => {
|
this.DataTree = res.data.dataTree;
|
});
|
},
|
fetchSysMenus() {
|
getMenu().then((rsp) => {
|
if (rsp && rsp.success) {
|
this.sysMenus = rsp.data.menus;
|
// this.userMenus = [];
|
}
|
});
|
},
|
editUser(row) {
|
this.isShowAdd = true;
|
this.isEditing = true;
|
this.ruleForm.id = row.id;
|
this.ruleForm.username = row.username;
|
this.ruleForm.userType = row.userType;
|
this.ruleForm.password = row.password;
|
this.ruleForm.trueName = row.trueName;
|
this.ruleForm.email = row.email;
|
this.ruleForm.isChangePwd = row.isChangePwd;
|
this.ruleForm.industryId = row.industryId;
|
this.ruleForm.areaId = row.areaId;
|
this.ruleForm.address = [row.provinceId, row.areaId];
|
this.ruleForm.provinceId = row.provinceId;
|
this.ruleForm.authDuration = row.authDuration;
|
this.checkedMenu = row.menuIds;
|
this.checkedData = row.dataIds;
|
},
|
resetUser() {
|
this.ruleForm = {
|
id: "",
|
username: "",
|
userType: "",
|
password: "",
|
trueName: "",
|
email: "",
|
isChangePwd: false,
|
industryId: "",
|
areaId: "",
|
provinceId: "",
|
authDuration: "",
|
};
|
this.$refs.treeMenus.setCheckedKeys([]);
|
this.$refs.treeData.setCheckedKeys([]);
|
},
|
async getIndustrys() {
|
let res = await getDic();
|
if (res.success) {
|
this.industrys = res.data.dics;
|
} else {
|
console.log("查询行业列表失败！");
|
}
|
},
|
saveSubUser() {
|
this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys();
|
this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys();
|
let json = {
|
id: this.isEditing ? this.ruleForm.id : "",
|
username: this.ruleForm.username,
|
password: this.ruleForm.password,
|
isChangePwd: this.ruleForm.isChangePwd,
|
userType: this.ruleForm.userType,
|
trueName: this.ruleForm.trueName,
|
email: this.ruleForm.email,
|
industryId: this.ruleForm.industryId,
|
areaId: this.ruleForm.address[1],
|
authDuration: this.ruleForm.authDuration,
|
menuIds: this.ruleForm.menuIds,
|
dataIds: this.ruleForm.dataIds,
|
};
|
saveSubUser(json)
|
.then((res) => {
|
if (res.success) {
|
this.$notify.success(res.data)
|
this.isShowAdd = false;
|
this.isEditing = false;
|
this.findUserList();
|
} else {
|
this.$notify.error(res.msg);
|
}
|
})
|
.catch((err) => {
|
this.$notify.error(err.message);
|
});
|
},
|
findUserList() {
|
findUserList({
|
inputText: this.inputText,
|
page: this.page,
|
size: this.size,
|
})
|
.then((res) => {
|
if (res.success) {
|
this.dataList = res.data.dataList;
|
this.total = res.data.total;
|
} else {
|
this.$notify.error("加载子账户列表失败");
|
}
|
})
|
.catch((e) => {
|
this.$notify.error(e.msg);
|
});
|
},
|
goback() {
|
this.isShowAdd = false;
|
this.isEditing = false;
|
this.isShowRelate = false;
|
this.activeIndex = 0;
|
},
|
goto(i) {
|
this.activeIndex = i;
|
},
|
reset() {
|
this.inputText = "";
|
this.timeLength = null;
|
},
|
// 跳到设备详情
|
checkDetail(row) {
|
this.$router.push({
|
path: "/equipmentDetail",
|
query: {
|
id: row.devId,
|
ip: row.devIp,
|
port: row.serverPort,
|
ndid: row.id,
|
},
|
});
|
},
|
|
// 跳到算法详情
|
algorithmDetail(row) {
|
this.$router.push({
|
path: "/algorithmDetail",
|
query: {
|
id: row.devId,
|
ip: row.devIp,
|
port: row.serverPort,
|
},
|
});
|
},
|
|
// 查询列表
|
|
save() {},
|
//分页功能
|
handleSizeChange(size) {
|
this.size = size;
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page;
|
},
|
|
//解绑按钮
|
Untying(row) {
|
console.log(row);
|
this.unbindId = row.id;
|
this.isShowUnbind = true;
|
},
|
|
//获得默认时间
|
getDateInit() {
|
// 要求 默认一个月
|
const end = new Date();
|
const start = new Date();
|
const nowDate = new Date();
|
nowDate.setHours(0);
|
nowDate.setMinutes(0);
|
nowDate.setSeconds(0);
|
nowDate.setMilliseconds(0);
|
start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
|
end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
|
return [
|
this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
|
this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
|
];
|
},
|
|
// 关闭解绑弹窗
|
closeUnbindBox() {
|
this.isShowUnbind = false;
|
},
|
|
//解绑成功回调
|
reflash() {
|
this.isShowUnbind = false;
|
},
|
|
clearSearch() {
|
this.searchTime = this.getDateInit();
|
this.inputText = "";
|
},
|
|
//退出集群
|
quitCluster(equipment) {
|
this.activeEquipment = equipment;
|
this.showQuit = true;
|
},
|
|
//加入集群
|
joinCluster(equipment) {
|
this.activeEquipment = equipment;
|
this.showJoin = true;
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.sub-account {
|
padding: 20px;
|
.head-name {
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 22px;
|
color: #3d3d3d;
|
border-left: 4px solid #0065ff;
|
padding-left: 10px;
|
}
|
.add-title {
|
font-weight: 700;
|
font-size: 16px;
|
cursor: pointer;
|
line-height: 22px;
|
color: #3d3d3d;
|
margin-bottom: 30px;
|
.iconfont {
|
margin-right: 10px;
|
}
|
}
|
.steps {
|
}
|
.add-ruleForm::v-deep {
|
.el-input__inner {
|
color: #3d3d3d;
|
border-radius: 4px;
|
border-color: #c0c5cc;
|
height: 32px;
|
line-height: 32px;
|
border-color: #c0c5cc;
|
}
|
.user-tree {
|
.el-form-item__content {
|
display: flex;
|
.tree-box {
|
.t {
|
height: 32px;
|
background: #f0f5fa;
|
border-radius: 3px 3px 0px 0px;
|
line-height: 32px;
|
text-align: center;
|
border-bottom: 1px solid #c0c5cc;
|
}
|
width: 336px;
|
height: 480px;
|
border: 1px solid #c0c5cc;
|
margin-right: 20px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
.searchBtn {
|
width: 60px;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
margin-right: 20px;
|
}
|
.right {
|
display: flex;
|
}
|
.resetBtn {
|
width: 60px;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
color: #0065ff;
|
box-sizing: border-box;
|
border: 1px solid #0065ff;
|
}
|
.search {
|
display: flex;
|
font-size: 14px;
|
border-bottom: 1px solid #e9ebee;
|
margin-top: 30px;
|
padding-bottom: 20px;
|
.left,
|
.right,
|
.id,
|
.time,
|
.cluster {
|
display: flex;
|
align-items: center;
|
.el-select {
|
width: auto;
|
}
|
}
|
|
.id .el-input ::v-deep {
|
width: 200px;
|
}
|
|
.cluster::v-deep .el-input {
|
width: 300px;
|
|
margin-left: 10px;
|
margin-right: 20px;
|
.el-input__icon {
|
line-height: 32px;
|
}
|
input {
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 200px;
|
margin-left: 10px;
|
margin-right: 20px;
|
height: 32px;
|
line-height: 32px;
|
input {
|
border-radius: 0;
|
height: 32px;
|
line-height: 32px;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor {
|
width: 318px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&.is-active {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.btns {
|
display: flex;
|
margin: 20px 0;
|
text-align: center;
|
.add {
|
margin-right: 20px;
|
width: 126px;
|
height: 32px;
|
background: #0065ff;
|
color: #fff;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
|
.export {
|
width: 126px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
box-sizing: border-box;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.el-table ::v-deep {
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::after {
|
display: none;
|
}
|
|
td.index .cell {
|
padding-left: 16px;
|
padding-right: 4px;
|
}
|
|
.has-gutter tr th {
|
background: #f0f3f5;
|
font-size: 16px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
td .cell {
|
color: #3d3d3d;
|
}
|
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 14px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: center;
|
height: 24px;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: #fff;
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: #fff;
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
}
|
</style>
|
|
<style >
|
.el-date-table td.start-date span,
|
.el-date-table td.end-date span {
|
background-color: #0065ff;
|
}
|
|
.el-button--text span {
|
color: #0065ff;
|
}
|
|
.el-button.is-plain:hover,
|
.el-button.is-plain:focus {
|
color: #0065ff;
|
border-color: #0065ff;
|
}
|
</style>
|
