665 lines
19 KiB
Vue
665 lines
19 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="searchBox whiteBlock">
|
||
<el-form :inline="true" size="medium">
|
||
<el-form-item label="组织名称">
|
||
<el-input
|
||
v-model="queryInfo.name"
|
||
placeholder="请输入"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="状态">
|
||
<el-select v-model="queryInfo.status" placeholder="请选择" clearable>
|
||
<el-option
|
||
v-for="item in statusList"
|
||
:key="item.value"
|
||
:label="item.name"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<!-- 查询-->
|
||
<el-button type="primary" plain @click="query">{{
|
||
$t("message.alarmWarning.query")
|
||
}}</el-button>
|
||
<!-- //刷新-->
|
||
<el-button type="warning" plain @click="refresh">{{
|
||
$t("message.alarmValueSet.refresh")
|
||
}}</el-button>
|
||
<!-- 新增-->
|
||
<el-button type="primary" @click="add">{{
|
||
$t("message.videoManage.add")
|
||
}}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="table_wrap whiteBlock">
|
||
<el-table
|
||
class="tables"
|
||
:data="tabelList"
|
||
row-key="id"
|
||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||
>
|
||
<el-table-column
|
||
prop="deptName"
|
||
label="组织名称"
|
||
align="left"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="orderNum"
|
||
label="排序"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column label="状态" align="center">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.status === 0">正常</el-tag>
|
||
<el-tag type="danger" v-else>停用</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="createTime"
|
||
label="创建时间"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
width="600px"
|
||
:label="$t('message.alarmValueSet.operation')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="tableBtns">
|
||
<div @click="addChildrenGroup(scope.row)" class="operationText">
|
||
<i
|
||
class="el-icon-plus"
|
||
style="width: 15px;height: 15px;color: #3F93FF;margin-right: 2px;"
|
||
></i>
|
||
<span>新增</span>
|
||
</div>
|
||
<div @click="edit(scope.row)" class="operationText">
|
||
<img
|
||
src="@/assets/images/icon-edit.png"
|
||
width="15px"
|
||
height="15px"
|
||
/>
|
||
<span>{{ $t("message.alarmValueSet.edit") }}</span>
|
||
</div>
|
||
<div @click="deleteDev(scope.row)" class="operationText">
|
||
<img
|
||
src="@/assets/images/icon-delete.png"
|
||
width="15px"
|
||
height="15px"
|
||
/>
|
||
<span>{{ $t("message.alarmValueSet.delete") }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
style="margin-top: 40px;"
|
||
class="pagerBox"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pagInfo.pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pagInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="pagInfo.total"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="title"
|
||
:visible.sync="groupDialogVisible"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="addEditForm"
|
||
ref="addEditForm"
|
||
label-width="80px"
|
||
class="dialogFormBox"
|
||
:rules="formRules"
|
||
>
|
||
<el-form-item
|
||
v-if="title == '添加子组织' || (addEditForm.parentId && addEditForm.parentId !='0')"
|
||
label="选择父级"
|
||
prop="parentId"
|
||
>
|
||
<el-select
|
||
v-model="selectVal"
|
||
placeholder="请选择"
|
||
clearable
|
||
@change="selectChange"
|
||
>
|
||
<el-option style="height:auto" :value="[]">
|
||
<el-tree
|
||
:data="List"
|
||
node-key="id"
|
||
ref="groupTree"
|
||
highlight-current
|
||
:props="defaultProps"
|
||
:default-expand-all="false"
|
||
@node-click="treeClick"
|
||
>
|
||
</el-tree>
|
||
<!-- :default-expanded-keys="defaultExpandArr" -->
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<div class="row-flex">
|
||
<el-form-item label="组织名称" prop="deptName">
|
||
<el-input
|
||
v-model="addEditForm.deptName"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="显示排序" prop="orderNum">
|
||
<el-input-number
|
||
v-model="addEditForm.orderNum"
|
||
controls-position="right"
|
||
:max="100"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row-flex">
|
||
<!-- <el-form-item label="负责人" prop="leader" v-show="title === '编辑组织' || title === '编辑子组织'"> -->
|
||
<el-form-item label="负责人" prop="leader">
|
||
|
||
<el-select v-model="addEditForm.leader" placeholder="请选择" clearable>
|
||
<el-option
|
||
v-for="item in projectChildUesrList"
|
||
:key="item.userId"
|
||
:label="item.workerName"
|
||
:value="item.userId">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
<!-- <el-input
|
||
v-model="addEditForm.leader"
|
||
placeholder="请输入"
|
||
></el-input> -->
|
||
</el-form-item>
|
||
<el-form-item label="联系电话" prop="phone">
|
||
<el-input
|
||
v-model="addEditForm.phone"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row-flex">
|
||
<el-form-item label="邮箱" prop="email">
|
||
<el-input
|
||
v-model="addEditForm.email"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="组织状态" prop="status">
|
||
<el-radio-group v-model="addEditForm.status">
|
||
<el-radio :label="0">正常</el-radio>
|
||
<el-radio :label="1">停用</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="groupDialogVisible = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{ $t("message.alarmValueSet.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="submitAdd"
|
||
size="medium"
|
||
>{{ $t("message.alarmValueSet.save") }}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
addProjectUserApi,
|
||
editProjectUserApi,
|
||
getProjectChilderSystemUserListApi,
|
||
getTreeGroupApi,
|
||
getTreeGroupPageApi,
|
||
addTreeGroupApi,
|
||
editTreeGroupApi,
|
||
deleteTreeGroupApi,
|
||
} from "@/assets/js/api/configManage";
|
||
import {
|
||
getEnterpriseInfoList,
|
||
ufaceDevList,
|
||
} from "@/assets/js/api/laborPerson";
|
||
import { deleteSystemUserApi } from "@/assets/js/api/account";
|
||
export default {
|
||
data() {
|
||
return {
|
||
defaultExpandArr: [],
|
||
selectVal: "",
|
||
selectTreeData: {},
|
||
dateList: [], // 遍历用
|
||
value1: [], // select绑定的值
|
||
// 对应的字段
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "deptName",
|
||
},
|
||
groupDialogVisible: false,
|
||
title: "添加组织",
|
||
statusList: [
|
||
{ name: "正常", value: 0 },
|
||
{ name: "停用", value: 1 },
|
||
],
|
||
addEditForm: {
|
||
deptName: "",
|
||
orderNum: 0,
|
||
leader: "",
|
||
phone: "",
|
||
email: "",
|
||
status: 0,
|
||
parentId: "",
|
||
},
|
||
formRules: {
|
||
// parentId: [
|
||
// {
|
||
// required: true,
|
||
// message: "请选择",
|
||
// trigger: "change",
|
||
// },
|
||
// ],
|
||
deptName: [
|
||
{
|
||
required: true,
|
||
message: "请输入",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
orderNum: [
|
||
{
|
||
required: true,
|
||
message: "请输入",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
phone: [
|
||
{
|
||
message: "请输入正确的手机号码",
|
||
trigger: "blur",
|
||
pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
|
||
},
|
||
],
|
||
email: [
|
||
{
|
||
type: "email",
|
||
message: "请输入正确的邮箱格式",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
tabelList: [],
|
||
List: [],
|
||
Popup: {
|
||
type: "add",
|
||
show: false,
|
||
},
|
||
queryInfo: {
|
||
name: "",
|
||
status: null,
|
||
},
|
||
pagInfo: {
|
||
pageNo: 1, //页数
|
||
pageSize: 10, //条数
|
||
total: 0, //总条数
|
||
},
|
||
personList: [],
|
||
roleList: [],
|
||
enterpriseListData: [],
|
||
selectCompanyData: [],
|
||
companyDialog: false,
|
||
checkAll: false,
|
||
isIndeterminate: false,
|
||
editComapnyDataId: "",
|
||
//配置可查看或管理的设备相关参数
|
||
allUfaceDev: [],
|
||
allVideoDev: [],
|
||
configDevDialog: false,
|
||
configDevType: 1, //1人脸设备，2视频监控
|
||
|
||
projectChildUesrList: []
|
||
};
|
||
},
|
||
created() {
|
||
this.getTableList();
|
||
this.getList();
|
||
},
|
||
watch:{
|
||
groupDialogVisible(newVal,oldVal){
|
||
if(newVal !== oldVal){
|
||
this.projectChildUesrList = []
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 选择父级组件框值修改
|
||
selectChange(e){
|
||
if(!e){
|
||
this.selectVal = "";
|
||
this.selectTreeData = {};
|
||
this.addEditForm.parentId = "";
|
||
this.$refs.groupTree.setCurrentKey(null);
|
||
}
|
||
},
|
||
getProjectChilderSystemUserList(item){
|
||
let data = {
|
||
xzProjectOrgId: item.id,
|
||
projectSn: this.$store.state.projectSn,
|
||
}
|
||
getProjectChilderSystemUserListApi(data).then((res) => {
|
||
console.log("==========查询项目子账号=========",res)
|
||
this.projectChildUesrList = res.result
|
||
})
|
||
},
|
||
// 树形控件点击
|
||
treeClick(data) {
|
||
console.log(data);
|
||
this.selectVal = data.deptName;
|
||
this.selectTreeData = data;
|
||
this.addEditForm.parentId = data.id;
|
||
this.$refs.addEditForm.validateField("parentId");
|
||
},
|
||
//获取企业 || 劳务公司 列表
|
||
getProjectList() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
// enterpriseName: this.enterpriseName,
|
||
};
|
||
getEnterpriseInfoList(data).then((res) => {
|
||
this.enterpriseListData = res.result;
|
||
// console.log(res.result);
|
||
});
|
||
},
|
||
//获取所有的闸机设备
|
||
getMachineList() {
|
||
ufaceDevList({ projectSn: this.$store.state.projectSn }).then((list) => {
|
||
this.allUfaceDev = list.result;
|
||
});
|
||
},
|
||
handle(type, show) {
|
||
//打开弹窗前的统一处理
|
||
this.Popup = {
|
||
type: type,
|
||
show: show,
|
||
};
|
||
},
|
||
query() {
|
||
console.log("查询的参数", this.queryInfo);
|
||
this.getTableList();
|
||
},
|
||
add() {
|
||
this.title = "添加组织";
|
||
this.selectVal = "";
|
||
this.selectTreeData = {};
|
||
this.addEditForm = {
|
||
deptName: "",
|
||
orderNum: 0,
|
||
leader: "",
|
||
phone: "",
|
||
email: "",
|
||
status: 0,
|
||
parentId: "",
|
||
}
|
||
this.groupDialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.addEditForm.clearValidate();
|
||
});
|
||
},
|
||
// 添加子组织
|
||
addChildrenGroup(obj) {
|
||
this.title = "添加子组织";
|
||
this.selectVal = "";
|
||
this.selectTreeData = {};
|
||
this.addEditForm = {
|
||
deptName: "",
|
||
orderNum: 0,
|
||
leader: "",
|
||
phone: "",
|
||
email: "",
|
||
status: 0,
|
||
parentId: obj.id,
|
||
}
|
||
this.selectVal = obj.deptName;
|
||
this.groupDialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.addEditForm.clearValidate();
|
||
this.$refs.groupTree.setCurrentKey(this.addEditForm.parentId);
|
||
});
|
||
},
|
||
edit(obj) {
|
||
console.log("编辑", obj);
|
||
this.getProjectChilderSystemUserList(obj)
|
||
this.title = "编辑组织";
|
||
|
||
this.addEditForm = JSON.parse(JSON.stringify(obj));
|
||
this.selectVal = obj.deptName;
|
||
// if (this.addEditForm.parentObj) {
|
||
// this.selectTreeData = JSON.parse(this.addEditForm.parentObj);
|
||
// this.selectVal = this.selectTreeData.deptName;
|
||
// // this.defaultExpandArr = [this.selectTreeData.id];
|
||
// } else {
|
||
// this.selectTreeData = {};
|
||
// this.selectVal = "";
|
||
// // this.defaultExpandArr = [];
|
||
// }
|
||
this.groupDialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.addEditForm.clearValidate();
|
||
if (this.addEditForm.parentObj) {
|
||
this.$refs.groupTree.setCurrentKey(this.addEditForm.parentId);
|
||
}
|
||
});
|
||
},
|
||
deleteDev(obj) {
|
||
console.log("删除", obj);
|
||
this.$confirm(
|
||
this.$t("message.personnelPosition.beaconManage.table.confirmText") +
|
||
"【" +
|
||
obj.deptName +
|
||
"】?",
|
||
this.$t("message.personnelPosition.beaconManage.table.Tips"),
|
||
{
|
||
confirmButtonText: this.$t(
|
||
"message.personnelPosition.confirmButtonText"
|
||
),
|
||
cancelButtonText: this.$t(
|
||
"message.personnelPosition.cancelButtonText"
|
||
),
|
||
type: "warning",
|
||
}
|
||
)
|
||
.then(() => {
|
||
deleteTreeGroupApi({ id: obj.id }).then((result) => {
|
||
if (result.success) {
|
||
this.$message.success(result.message);
|
||
this.getTableList();
|
||
this.getList();
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
submitAdd() {
|
||
this.$refs["addEditForm"].validate((valid) => {
|
||
if (valid) {
|
||
let params = this.addEditForm;
|
||
// params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(',');
|
||
params.projectSn = this.$store.state.projectSn;
|
||
if (this.title == "添加子组织") {
|
||
params.parentObj = JSON.stringify(this.selectTreeData);
|
||
}
|
||
if (this.title == "添加组织" || this.title == "添加子组织") {
|
||
addTreeGroupApi(params).then((result) => {
|
||
if (result.success) {
|
||
this.$message.success(result.message);
|
||
this.getTableList();
|
||
this.getList();
|
||
this.groupDialogVisible = false;
|
||
}
|
||
});
|
||
} else if (this.title == "编辑组织" || this.title == "编辑子组织") {
|
||
console.log("编辑信息", this.addEditForm);
|
||
editTreeGroupApi(params).then((result) => {
|
||
if (result.success) {
|
||
this.$message.success(result.message);
|
||
this.getTableList();
|
||
this.getList();
|
||
this.groupDialogVisible = false;
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
refresh() {
|
||
this.queryInfo = {
|
||
name: "",
|
||
status: null,
|
||
};
|
||
this.getTableList();
|
||
},
|
||
getTableList(){
|
||
let requestData = {
|
||
projectSn: this.$store.state.projectSn,
|
||
deptName: this.queryInfo.name,
|
||
status: this.queryInfo.status,
|
||
pageNo: this.pagInfo.pageNo,
|
||
pageSize: this.pagInfo.pageSize
|
||
}
|
||
getTreeGroupPageApi(requestData).then((res) => {
|
||
if (res.success) {
|
||
this.tabelList = res.result.records;
|
||
this.pagInfo.total = +res.result.total;
|
||
}
|
||
});
|
||
},
|
||
getList() {
|
||
getTreeGroupApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
deptName: this.queryInfo.name,
|
||
status: this.queryInfo.status,
|
||
}).then((result) => {
|
||
if (result.success) {
|
||
this.List = result.result;
|
||
console.log("列表", result);
|
||
}
|
||
});
|
||
},
|
||
close() {
|
||
this.addEditForm = {};
|
||
this.$nextTick(() => {
|
||
this.$refs.addEditForm.clearValidate();
|
||
});
|
||
},
|
||
SizeChange(val) {
|
||
this.pagInfo.pageSize = val;
|
||
this.getTableList();
|
||
},
|
||
CurrentChange(val) {
|
||
this.pagInfo.pageNo = val;
|
||
this.getTableList();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex() {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
// 添加/编辑组织弹框样式
|
||
.dialog_content {
|
||
padding: 0px;
|
||
.dialogFormBox {
|
||
width: 100%;
|
||
.el-input {
|
||
width: 100% !important;
|
||
}
|
||
.el-input-number {
|
||
/deep/.el-input {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
.el-select {
|
||
width: 100% !important;
|
||
/deep/.el-input {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
.row-flex {
|
||
.flex();
|
||
justify-content: space-between;
|
||
.el-form-item {
|
||
width: 49%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
overflow: auto;
|
||
}
|
||
.el-checkbox-widthOne {
|
||
width: 260px;
|
||
height: 50px;
|
||
white-space: pre-wrap;
|
||
}
|
||
.el-checkbox-width {
|
||
width: 250px;
|
||
white-space: pre-wrap;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.el-checkbox-widthTwo {
|
||
width: 260px;
|
||
height: 50px;
|
||
white-space: pre-wrap;
|
||
}
|
||
.searchBox > div {
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.tableBtns {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
::v-deep .el-checkbox__label {
|
||
width: 260px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
padding-left: 22px;
|
||
line-height: 15px;
|
||
}
|
||
// 下拉框样式修改
|
||
/deep/.el-select-dropdown__item.hover,.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
|
||
background-color: transparent;
|
||
}
|
||
</style>
|