<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="cluster" 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="searchingBtn">搜索</div>
|
<div class="button resetBtn" @click="clearSearch">重置</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="name"
|
label="姓名"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
prop="phone"
|
label="手机号"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column prop="userType" label="用户类型"></el-table-column>
|
<el-table-column prop="duration" label="授权时长"></el-table-column>
|
<el-table-column prop="authList" label="权限"></el-table-column>
|
<!-- <el-table-column label="安装时间" >
|
<template slot-scope="scope">
|
<div v-if="scope.row.installTime.length > 1">
|
<div>{{ scope.row.installTime[0] }}</div>
|
<div>{{ scope.row.installTime[1] }}</div>
|
</div>
|
<div v-else>--</div>
|
</template>
|
</el-table-column> -->
|
<!-- <el-table-column label="首次使用时间" >
|
<template slot-scope="scope">
|
<div v-if="scope.row.firstUseTime.length > 1">
|
<div>{{ scope.row.firstUseTime[0] }}</div>
|
<div>{{ scope.row.firstUseTime[1] }}</div>
|
</div>
|
<div v-else>--</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="所属集群" show-overflow-tooltip >
|
<template> -- </template>
|
</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="joinCluster(scope.row)"
|
></span
|
>
|
|
<!-- 解绑 -->
|
<span class="iconfont option" @click="Untying(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>
|
|
<!-- 解绑弹窗 -->
|
<UnbindBox
|
@close="closeUnbindBox"
|
v-if="isShowUnbind"
|
:id="unbindId"
|
@reflash="reflash"
|
></UnbindBox>
|
|
<!-- 添加设备弹窗 -->
|
<!-- <AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox> -->
|
|
<!-- 退出集群弹窗 -->
|
<QuitClusterBox
|
:equipment="activeEquipment"
|
v-if="showQuit"
|
@close="showQuit = false"
|
></QuitClusterBox>
|
|
<!-- 加入集群弹窗 -->
|
<JoinClusterBox
|
:equipment="activeEquipment"
|
v-if="showJoin"
|
@close="showJoin = false"
|
></JoinClusterBox>
|
</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="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="name">
|
<el-input v-model="ruleForm.password"></el-input>
|
</el-form-item>
|
<el-form-item label="重置密码" prop="delivery">
|
<el-checkbox v-model="ruleForm.delivery">首次登陆修改密码</el-checkbox>
|
</el-form-item>
|
<el-form-item label="用户类型" prop="type">
|
<el-radio v-model="ruleForm.type" label="1">个人</el-radio>
|
<el-radio v-model="ruleForm.type" label="2">公司</el-radio>
|
</el-form-item>
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱" prop="name">
|
<el-input v-model="ruleForm.password"></el-input>
|
</el-form-item>
|
|
<el-form-item label="行业" prop="region">
|
<el-select v-model="ruleForm.region" placeholder="请选择行业">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="地区" prop="region">
|
<el-select v-model="ruleForm.region" placeholder="请选择行业">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="授权时长" prop="region">
|
<el-select v-model="ruleForm.region" placeholder="请选择行业">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="用户权限" prop="authList" class="user-tree">
|
|
<TreeBox :defaultProp="defaultProp1" :treeData="data1"></TreeBox>
|
|
|
<TreeBox :defaultProp="defaultProp2" :treeData="data2"></TreeBox>
|
</el-form-item>
|
|
</el-form>
|
<div class="right">
|
<div class="button searchBtn" @click="searchingBtn">搜索</div>
|
<div class="button resetBtn" @click="clearSearch">重置</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 { findDevList } from "@/api/device";
|
// import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox";
|
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
|
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
|
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";
|
import Steps from "./Steps";
|
import StepsCard from "./StepCard";
|
import TreeBox from "./TreeBox";
|
export default {
|
components: {
|
// AddBox,
|
UnbindBox,
|
QuitClusterBox,
|
JoinClusterBox,
|
Steps,
|
StepsCard,
|
TreeBox,
|
},
|
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,
|
total: 0, //总数
|
dataList: [
|
{
|
name: "basic",
|
phone: "1121313232",
|
userType: "个人",
|
duration: "永久",
|
authList: "集群1，集群2",
|
isBind: 1,
|
},
|
],
|
isShowAdd: false, //是否展示新增弹窗
|
isShowUnbind: false, //是否展示解绑弹窗
|
isShowRelate: false,
|
unbindId: "",
|
durationArr: [
|
{
|
value: 0,
|
label: "一年",
|
},
|
{
|
value: 1,
|
label: "两年",
|
},
|
], //所属集群下拉框
|
cluster: null, //选中的集群类型
|
showQuit: false, //展示退出集群的弹窗
|
showJoin: false, //展示加入集群的弹窗
|
activeEquipment: null, //处理中的设备
|
ruleForm: {
|
name: "",
|
region: "",
|
password: "",
|
date1: "",
|
date2: "",
|
delivery: false,
|
type: [],
|
resource: "",
|
desc: "",
|
authList: {
|
menuAuth: [],
|
dataAuth: [],
|
},
|
},
|
rules: {
|
name: [
|
{ required: true, message: "请输入活动名称", trigger: "blur" },
|
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
],
|
region: [
|
{ required: true, message: "请选择活动区域", trigger: "change" },
|
],
|
date1: [
|
{
|
type: "date",
|
required: true,
|
message: "请选择日期",
|
trigger: "change",
|
},
|
],
|
date2: [
|
{
|
type: "date",
|
required: true,
|
message: "请选择时间",
|
trigger: "change",
|
},
|
],
|
type: [
|
{
|
type: "array",
|
required: true,
|
message: "请至少选择一个活动性质",
|
trigger: "change",
|
},
|
],
|
resource: [
|
{ required: true, message: "请选择活动资源", trigger: "change" },
|
],
|
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
|
},
|
data1: [
|
{
|
id: 1,
|
label: "一级 1",
|
children: [
|
{
|
id: 4,
|
label: "二级 1-1",
|
children: [
|
{
|
id: 9,
|
label: "三级 1-1-1",
|
},
|
{
|
id: 10,
|
label: "三级 1-1-2",
|
},
|
],
|
},
|
],
|
},
|
{
|
id: 2,
|
label: "一级 2",
|
children: [
|
{
|
id: 5,
|
label: "二级 2-1",
|
},
|
{
|
id: 6,
|
label: "二级 2-2",
|
},
|
],
|
},
|
{
|
id: 3,
|
label: "一级 3",
|
children: [
|
{
|
id: 7,
|
label: "二级 3-1",
|
},
|
{
|
id: 8,
|
label: "二级 3-2",
|
},
|
],
|
},
|
],
|
defaultProps1: {
|
children: "children",
|
label: "label",
|
},
|
data2: [
|
{
|
id: 1,
|
label: "一级 1",
|
children: [
|
{
|
id: 4,
|
label: "二级 1-1",
|
children: [
|
{
|
id: 9,
|
label: "三级 1-1-1",
|
},
|
{
|
id: 10,
|
label: "三级 1-1-2",
|
},
|
],
|
},
|
],
|
},
|
{
|
id: 2,
|
label: "一级 2",
|
children: [
|
{
|
id: 5,
|
label: "二级 2-1",
|
},
|
{
|
id: 6,
|
label: "二级 2-2",
|
},
|
],
|
},
|
{
|
id: 3,
|
label: "一级 3",
|
children: [
|
{
|
id: 7,
|
label: "二级 3-1",
|
},
|
{
|
id: 8,
|
label: "二级 3-2",
|
},
|
],
|
},
|
],
|
defaultProps2: {
|
children: "children",
|
label: "label",
|
},
|
};
|
},
|
methods: {
|
goback() {
|
this.isShowRelate = false;
|
this.activeIndex = 0;
|
},
|
goto(i) {
|
this.activeIndex = i;
|
},
|
// 跳到设备详情
|
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,
|
},
|
});
|
},
|
|
// 查询列表
|
searchingBtn() {
|
let param = {
|
page: this.page,
|
size: this.size,
|
// startTime: this.searchTime[0],
|
// endTime: this.searchTime[1],
|
inputText: this.inputText,
|
};
|
findDevList(param)
|
.then((res) => {
|
this.dataList = res.data.list;
|
//时间分行显示
|
|
this.dataList.forEach((item) => {
|
item.installTime = item.installTime.split(" ");
|
item.firstUseTime = item.firstUseTime.split(" ");
|
});
|
this.total = res.data.total;
|
if (res.data.total <= this.size) {
|
this.page = 1;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
|
//分页功能
|
handleSizeChange(size) {
|
this.size = size;
|
this.searchingBtn();
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page;
|
this.searchingBtn();
|
},
|
|
//解绑按钮
|
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"),
|
];
|
},
|
|
//关闭新增弹窗
|
closeAddBox() {
|
this.isShowAdd = false;
|
},
|
// 关闭解绑弹窗
|
closeUnbindBox() {
|
this.isShowUnbind = false;
|
},
|
|
//解绑成功回调
|
reflash() {
|
this.isShowUnbind = false;
|
this.searchingBtn();
|
},
|
|
clearSearch() {
|
this.searchTime = this.getDateInit();
|
this.inputText = "";
|
this.searchingBtn();
|
},
|
|
//退出集群
|
quitCluster(equipment) {
|
this.activeEquipment = equipment;
|
this.showQuit = true;
|
},
|
|
//加入集群
|
joinCluster(equipment) {
|
this.activeEquipment = equipment;
|
this.showJoin = true;
|
},
|
},
|
mounted() {
|
this.searchTime = this.getDateInit();
|
this.searchingBtn();
|
},
|
};
|
</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 {
|
width: 350px;
|
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: 24px;
|
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>
|
