<template>
|
<div class="sub-account" v-if="!isShowAdd">
|
<div class="btns">
|
<div class="button add" @click="addPoint">
|
<span class="iconfont"></span>
|
<span>添加点位</span>
|
</div>
|
</div>
|
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
>
|
<el-table-column prop="a" label="点位名称" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="b" label="报警通道编码" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="c" label="企业编码" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="d" label="推送场景" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="e" label="推动时间" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" align="center" width="100px">
|
<template slot-scope="scope">
|
<span class="iconfont option" style="color:red" @click="delUser(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> -->
|
<div class="head-name" style="margin-bottom:20px">编辑点位</div>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
:label-position="'left'"
|
ref="ruleForm"
|
label-width="100px"
|
class="add-ruleForm"
|
>
|
<el-form-item label="点位名称" prop="a">
|
<el-input v-model="ruleForm.a" placeholder="请输入点位名称" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="报警通道编码" prop="b">
|
<el-input v-model="ruleForm.b" placeholder="请输入报警通道编码" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="企业编码" prop="c">
|
<el-input v-model="ruleForm.c" placeholder="请输入企业编码" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="推送场景" prop="d">
|
<el-input v-model="ruleForm.d" placeholder="请输入推送场景" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="推动时间" prop="e">
|
<el-input v-model="ruleForm.e" placeholder="请输入推动时间" style="width: 350px"></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="right">
|
<div class="button searchBtn" @click="saveUser">保存</div>
|
<div class="button resetBtn" @click="resetUser">重置</div>
|
<div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { findUserList, saveSubUser, getMenu, getDataTree, deleteUser } from "@/api/user"
|
import { findTaskById, updateTask } from "@/api/report"
|
import { getAreas, getDic } from "@/api/login"
|
|
export default {
|
computed: {
|
taskOptions() {
|
return this.VideoPhotoData.tasks.filter((item) => !item.isDelete)
|
}
|
},
|
data() {
|
const validateTree = (rule, value, callback) => {
|
if (
|
this.ruleForm.menuIds &&
|
this.ruleForm.dataIds &&
|
this.ruleForm.menuIds.length > 0 &&
|
this.ruleForm.dataIds.length > 0
|
) {
|
callback()
|
} else {
|
callback(new Error("请选菜单权限和数据权限"))
|
}
|
}
|
return {
|
searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")], //搜索时间
|
page: 1,
|
size: 10, //分页相关
|
total: 0, //总数,
|
inputText: "", //输入框内容
|
activeStep: 0,
|
activeIndex: 0,
|
industrys: [],
|
treeHeight: 750,
|
treeData: [],
|
treeSettings: {
|
check: {
|
enable: true
|
}
|
},
|
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: "1年"
|
},
|
{
|
value: 2,
|
label: "2年"
|
},
|
{
|
value: 3,
|
label: "3年"
|
}
|
], //所属集群下拉框
|
timeLength: null, //选中的授权时长
|
showQuit: false, //展示退出集群的弹窗
|
showJoin: false, //展示加入集群的弹窗
|
activeEquipment: null, //处理中的设备
|
checkedData: [],
|
checkedMenu: [],
|
ruleForm: {
|
//y
|
a: "",
|
b: "",
|
c: "",
|
d: "",
|
e: "",
|
id: "",
|
username: "",
|
userType: "",
|
password: "",
|
trueName: "",
|
companyName: "",
|
phoneNum: "",
|
email: "basic",
|
isChangePwd: false,
|
industryId: "",
|
address: [],
|
authDuration: 3,
|
areaId: "",
|
provinceId: "",
|
menuIds: [],
|
dataIds: []
|
},
|
rules: {
|
//y
|
a: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
|
b: [{ required: true, message: "请输入报警通道编码", trigger: "blur" }],
|
c: [{ required: true, message: "请输入企业编码", trigger: "blur" }],
|
d: [{ required: true, message: "请输入推送场景", trigger: "blur" }],
|
e: [{ required: true, message: "请输入推动时间", trigger: "blur" }]
|
},
|
sysMenus: [],
|
DataTree: [],
|
smsSceneConfig: [],
|
smsLevelConfig: [],
|
smsEnable: false,
|
userInfo: {},
|
curEditId: "",
|
defaultProp: {
|
children: "children",
|
label: "name"
|
},
|
levelOptions: [
|
{ value: "一级", label: "一级" },
|
{ value: "二级", label: "二级" },
|
{ value: "三级", label: "三级" },
|
{ value: "四级", label: "四级" },
|
{ value: "五级", label: "五级" }
|
]
|
}
|
},
|
// created() {
|
// this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
|
// this.findUserList()
|
// this.getIndustrys()
|
// this.fetchSysMenus()
|
// this.fetchDataTree()
|
// },
|
// mounted() {
|
// this.TreeDataPool.reset()
|
// this.TreeDataPool.multiple = true
|
// this.VideoPhotoData.queryTaskList()
|
// },
|
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 = [];
|
}
|
})
|
},
|
selectDevice(node, checked, hasChildren) {
|
if (checked) {
|
sessionStorage.setItem("clusterId", node.id)
|
this.TreeDataPool.fetchTreeData()
|
this.treeData = this.TreeDataPool.treeData
|
} else {
|
this.treeData = []
|
this.TreeDataPool.reset()
|
}
|
},
|
addPoint() {
|
this.isShowAdd = true
|
this.resetUser()
|
},
|
async 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.companyName = row.companyName
|
this.ruleForm.phoneNum = row.phoneNum
|
this.ruleForm.email = row.email
|
this.ruleForm.isChangePwd = false
|
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
|
|
this.smsSceneConfig = []
|
this.smsLevelConfig = []
|
this.smsEnable = false
|
findTaskById({ id: row.id }).then((rsp) => {
|
if (rsp && rsp.success && rsp.data != "") {
|
if (rsp.data.taskName != "") {
|
this.smsSceneConfig = rsp.data.taskName.split(",")
|
}
|
if (rsp.data.level != "") {
|
this.smsLevelConfig = rsp.data.level.split(",")
|
}
|
this.smsEnable = rsp.data.enable
|
}
|
})
|
|
// 查询当前用户权限下所有可管理的摄像机
|
if (row.dataIds) {
|
sessionStorage.setItem("clusterId", row.dataIds[0])
|
await this.TreeDataPool.fetchTreeData()
|
}
|
|
// 用email字段暂时代替摄像机集合字段
|
let checkedCameras = row.email
|
|
// basic 为子账户默认的空字段,表示可管理的摄像机目录为空
|
if (checkedCameras == "basic") {
|
return
|
}
|
|
// 反选摄像机
|
if (checkedCameras.length) {
|
let cameraIds = checkedCameras.split(",")
|
this.$refs.ztreeMenus.updateNodes(cameraIds)
|
}
|
},
|
delUser(row) {
|
this.$confirm("确认要删除该用户吗, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(async () => {
|
let rsp = await deleteUser({ id: row.id })
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
message: "删除成功!"
|
})
|
}
|
|
this.findUserList()
|
})
|
},
|
resetUser() {
|
this.ruleForm = {
|
id: "",
|
username: "",
|
userType: "",
|
password: "",
|
trueName: "",
|
companyName: "",
|
phoneNum: "",
|
email: "",
|
isChangePwd: false,
|
address: [],
|
industryId: "",
|
areaId: "",
|
provinceId: "",
|
authDuration: 1
|
}
|
this.smsSceneConfig = []
|
this.smsLevelConfig = []
|
this.smsEnable = false
|
this.$nextTick(() => {
|
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("查询行业列表失败！")
|
}
|
},
|
saveUser() {
|
let _this = this
|
this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys()
|
this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys()
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
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,
|
companyName: this.ruleForm.companyName,
|
phoneNum: this.ruleForm.phoneNum,
|
industryId: this.ruleForm.industryId,
|
areaId: this.ruleForm.address.length == 2 ? this.ruleForm.address[1] : "",
|
authDuration: this.ruleForm.authDuration,
|
menuIds: this.ruleForm.menuIds,
|
dataIds: this.ruleForm.dataIds
|
}
|
|
// 获取子账户选中的摄像机列表
|
let cameraIds = this.TreeDataPool.selectedNodes
|
if (cameraIds.length == 0) {
|
json.email = "basic"
|
} else {
|
json.email = cameraIds.join(",")
|
}
|
|
// 编辑不提交密码
|
if (this.isEditing) {
|
delete json.password
|
json.isChangePwd = false
|
}
|
|
if (typeof json.areaId === "string") {
|
delete json.areaId
|
}
|
|
if (typeof json.authDuration === "string") {
|
delete json.authDuration
|
}
|
|
// return
|
saveSubUser(json)
|
.then((res) => {
|
if (res.success) {
|
// 保存消息推送
|
if (_this.isEditing) {
|
let smsTaskInfo = {
|
id: _this.ruleForm.id,
|
taskName: _this.smsSceneConfig.join(","),
|
level: _this.smsLevelConfig.join(","),
|
cameras: json.email,
|
person: json.trueName,
|
tel: json.phoneNum,
|
enable: _this.smsEnable,
|
IsDel: "0"
|
}
|
|
updateTask(smsTaskInfo).then((rsp) => {
|
// console.log(rsp)
|
})
|
}
|
|
_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.data.msg)
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
findUserList() {
|
findUserList({
|
inputText: this.inputText,
|
page: this.page,
|
size: this.size,
|
authDuration: this.timeLength
|
})
|
.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
|
},
|
|
//分页功能
|
handleSizeChange(size) {
|
this.size = size
|
this.findUserList()
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page
|
this.findUserList()
|
},
|
|
// 生成uuid
|
getUuid() {
|
let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
let originChar = "0123456789abcdef"
|
let len = originChar.length
|
return originStr.replace(/x/g, function(match) {
|
return originChar.charAt(Math.floor(Math.random() * len))
|
})
|
}
|
}
|
}
|
</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;
|
}
|
}
|
.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__label:before {
|
content: "*";
|
color: #f52323;
|
margin-right: 4px;
|
}
|
.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: 50px;
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
margin-right: 20px;
|
}
|
.right {
|
display: flex;
|
}
|
.resetBtn {
|
width: 50px;
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
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;
|
}
|
}
|
}
|
|
.el-select ::v-deep {
|
.el-select__tags-text {
|
color: #3d3d3d;
|
}
|
}
|
}
|
</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>
|
