514 lines
15 KiB
Vue
514 lines
15 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-container>
|
||
<el-aside width="50%">
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
v-auth="'area.create'"
|
||
@click="handleForm('add')"
|
||
></el-button>
|
||
</div>
|
||
<div class="right-panel">
|
||
<div class="right-panel-search">
|
||
<el-input
|
||
v-model="query.search"
|
||
placeholder="编号/名称"
|
||
clearable
|
||
></el-input>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="handleQuery"
|
||
></el-button>
|
||
</div>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<scTable
|
||
ref="table"
|
||
:apiObj="apiObj"
|
||
row-key="id"
|
||
stripe
|
||
@resetQuery="resetQuery"
|
||
@row-click="rowClick"
|
||
|
||
hideDo
|
||
>
|
||
<el-table-column
|
||
label="序号"
|
||
type="index"
|
||
fixed="left"
|
||
width="50"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="区域编号"
|
||
fixed="left"
|
||
prop="number"
|
||
min-width="100"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="区域名称"
|
||
prop="name"
|
||
min-width="150"
|
||
></el-table-column>
|
||
<el-table-column label="区域类型" min-width="100">
|
||
<template #default="scope">{{
|
||
cates[scope.row.cate]
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="区域负责人"
|
||
prop="manager_name"
|
||
min-width="100"
|
||
></el-table-column>
|
||
<el-table-column label="风险等级" min-width="100">
|
||
<template #default="scope">{{
|
||
levels[scope.row.level]
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="访客人员" min-width="100">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.visitor_yes">允许进入</span>
|
||
<span v-else>禁止进入</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="相关方人员" min-width="100">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.remployee_yes">允许进入</span>
|
||
<span v-else>禁止进入</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="全部员工" min-width="100">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.employee_yes">允许进入</span>
|
||
<span v-else>审批进入</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="最小人员数"
|
||
prop="count_people_min"
|
||
min-width="90"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="最大人员数"
|
||
prop="count_people_max"
|
||
min-width="90"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="当前人数"
|
||
prop="count_people"
|
||
min-width="90"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="所属部门"
|
||
prop="belong_dept_name"
|
||
min-width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="创建时间"
|
||
prop="create_time"
|
||
width="160"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
fixed="right"
|
||
align="center"
|
||
width="160"
|
||
>
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
type="primary"
|
||
size="small"
|
||
v-auth="'area.bind_rail'"
|
||
@click="handleRail(scope.row)"
|
||
>围栏</el-button
|
||
>
|
||
<el-button
|
||
link
|
||
type="warning"
|
||
size="small"
|
||
v-auth="'area.update'"
|
||
@click="handleForm('edit', scope.row)"
|
||
>编辑</el-button
|
||
>
|
||
<el-popconfirm
|
||
title="确定删除吗？"
|
||
@confirm="handleDel(scope.row, scope.$index)"
|
||
>
|
||
<template #reference>
|
||
<el-button link type="danger" size="small" v-auth="'area.delete'"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
</el-aside>
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
v-auth="'access.create'"
|
||
@click="handleFormaccess('add')"
|
||
></el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<scTable
|
||
ref="accesstable"
|
||
:apiObj="apiObj2"
|
||
row-key="id"
|
||
stripe
|
||
@resetQuery="resetQuery"
|
||
hidePagination
|
||
hideDo
|
||
>
|
||
<el-table-column
|
||
label="排序"
|
||
prop="sort"
|
||
fixed="left"
|
||
width="50"
|
||
></el-table-column>
|
||
|
||
<el-table-column label="准入类型" fixed="left" min-width="100">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.type == 10">准入</span>
|
||
<span v-else>禁入</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="对象类型"
|
||
fixed="left"
|
||
prop="obj_cate"
|
||
min-width="100"
|
||
>
|
||
<template #default="scope">{{
|
||
cate_[scope.row.obj_cate]
|
||
}}</template></el-table-column
|
||
>
|
||
<el-table-column
|
||
label="对象"
|
||
prop="post_name"
|
||
width="160"
|
||
>
|
||
<template #default="scope">
|
||
{{scope.row.post_name}}
|
||
{{scope.row.dept_name}}
|
||
{{scope.row.employee_name}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="最短停留时间(分)"
|
||
prop="stay_minute_min"
|
||
min-width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="最长停留时间(分)"
|
||
prop="stay_minute_max"
|
||
width="160"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
fixed="right"
|
||
align="center"
|
||
width="160"
|
||
>
|
||
<template #default="scope">
|
||
<el-button-group>
|
||
<el-popconfirm
|
||
title="确定删除吗？"
|
||
@confirm="handleDelaccess(scope.row, scope.$index)"
|
||
>
|
||
<template #reference>
|
||
<el-button text type="danger" size="small" v-auth="'access.delete'"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-popconfirm>
|
||
</el-button-group>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</el-container>
|
||
<!--区域，添加，编辑-->
|
||
<save-dialog
|
||
v-if="dialog.save"
|
||
ref="saveDialog"
|
||
@success="handleSaveSuccess"
|
||
@closed="dialog.save = false"
|
||
></save-dialog>
|
||
<!--围栏-->
|
||
<save-rail-dialog
|
||
v-if="dialog.saveRail"
|
||
ref="saveRailDialog"
|
||
:areaId="areaId"
|
||
:areaName="areaName"
|
||
:areaPoints="areaPoints"
|
||
:areaFloorId="areaFloorId"
|
||
@success="handleSaveSuccess"
|
||
@closed="dialog.saveRail = false"
|
||
></save-rail-dialog>
|
||
<!--出入权限，添加，编辑-->
|
||
<save-access-dialog
|
||
v-if="dialog.saveAccesss"
|
||
ref="saveAccessDialog"
|
||
@success="handleSaveSuccessAccess"
|
||
@closed="dialog.saveAccesss = false"
|
||
></save-access-dialog>
|
||
</template>
|
||
<script>
|
||
import saveDialog from "./area_form.vue";
|
||
import saveRailDialog from "./area_rail_form.vue";
|
||
import saveAccessDialog from "./access_form.vue";
|
||
export default {
|
||
name: "amArea",
|
||
components: {
|
||
saveDialog,
|
||
saveRailDialog,
|
||
saveAccessDialog,
|
||
},
|
||
data() {
|
||
return {
|
||
dialog: {
|
||
save: false,
|
||
saveRail: false,
|
||
saveAccesss: false,
|
||
permission: false,
|
||
},
|
||
apiObj: this.$API.am.area.list,
|
||
query: {},
|
||
selection: [],
|
||
levels: {
|
||
10: "低风险",
|
||
20: "一般风险",
|
||
30: "较大风险",
|
||
40: "重大风险",
|
||
},
|
||
cates: {
|
||
10: "生活区域",
|
||
20: "一般区域",
|
||
30: "重点区域",
|
||
},
|
||
apiObj2: null,
|
||
query2: {},
|
||
areaId: null,
|
||
areaName: "",
|
||
areaPoints:[],
|
||
areaFloorId:1,
|
||
cate_: { post: "岗位", org: "单位", people: "人员" },
|
||
canUseMap:false,
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
let host = window.location.host;
|
||
let jsUrl = '/jsmap/jsmap.js';
|
||
that.loadScript('mapId',jsUrl, () => {
|
||
that.canUseMap = true;
|
||
})
|
||
// this.getAccessList();
|
||
},
|
||
methods: {
|
||
loadScript(id, url, callback) {
|
||
debugger;
|
||
//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
|
||
if (document.querySelector(`#${id}`)) {
|
||
callback && callback()
|
||
return;
|
||
}
|
||
//第一次加载，先创建 script 标签
|
||
const script = document.createElement('script');
|
||
script.src = url;
|
||
//创建id属性
|
||
script.setAttribute('id', id);
|
||
//获取第一个script标签
|
||
const firstScript = document.getElementsByTagName('script')[0];
|
||
//获取第一个script标签的父节点 BODY,在body的第一个script引用之前插入，即把这个动态的js文件放在第一个调用
|
||
firstScript.parentNode.insertBefore(script, firstScript);
|
||
//script 一加载就执行
|
||
script.onload = script.onreadystatechange = function() {
|
||
// 加载完成
|
||
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
|
||
callback && callback()
|
||
}
|
||
};
|
||
},
|
||
//添加/编辑区域
|
||
handleForm(type, row) {
|
||
this.dialog.save = true;
|
||
this.$nextTick(() => {
|
||
if (type === "add") {
|
||
this.$refs.saveDialog.open(type);
|
||
} else {
|
||
this.$refs.saveDialog.open(type).setData(row);
|
||
}
|
||
});
|
||
},
|
||
//出入权限添加，编辑
|
||
handleFormaccess(type, row) {
|
||
this.dialog.saveAccesss = true;
|
||
this.$nextTick(() => {
|
||
if (type === "add") {
|
||
this.$refs.saveAccessDialog.open(type);
|
||
} else {
|
||
this.$refs.saveAccessDialog.open(type).setData(row);
|
||
}
|
||
});
|
||
},
|
||
//点击区域显示进入权限
|
||
rowClick(row) {
|
||
this.area = row.id;
|
||
if(this.apiObj2 == null){
|
||
this.apiObj2 = this.$API.am.access.list
|
||
}
|
||
this.$refs.accesstable.queryData({area: row.id})
|
||
},
|
||
//围栏，添加
|
||
handleRail(row) {
|
||
debugger;
|
||
// console.log(row.third_info.xx_rail.detail.polygon.points);
|
||
if(row.third_info.xx_rail){
|
||
this.areaPoints = row.third_info.xx_rail.detail.polygon.points;
|
||
this.areaFloorId = row.third_info.xx_rail.detail.floorId;
|
||
}else{
|
||
|
||
}
|
||
this.areaId = row.id;
|
||
this.areaName = row.name;
|
||
if(this.canUseMap){
|
||
this.dialog.saveRail = true;
|
||
}else{
|
||
this.$message("地图组件加载中，请稍后")
|
||
}
|
||
|
||
},
|
||
//删除区域
|
||
handleDel(row) {
|
||
this.$API.am.area.delete.req(row.id).then((res) => {
|
||
this.$refs.table.refresh();
|
||
this.refreshArea();
|
||
this.$message.success("删除成功");
|
||
});
|
||
},
|
||
handleDelaccess(row) {
|
||
this.$API.am.access.delete.req(row.id).then(() => {
|
||
this.$refs.accesstable.refresh();
|
||
this.$message.success("删除成功");
|
||
});
|
||
},
|
||
//出入权限列表
|
||
getAccessList() {
|
||
this.$API.am.access.list.req({ page: 0 }).then((res) => {
|
||
this.apiaccessObj = res;
|
||
});
|
||
},
|
||
|
||
//批量删除区域
|
||
async batch_del() {
|
||
this.$confirm(
|
||
`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
|
||
"提示",
|
||
{
|
||
type: "warning",
|
||
}
|
||
)
|
||
.then(() => {
|
||
const loading = this.$loading();
|
||
let params = { pk: { pks: this.selection } };
|
||
this.$API.am.area.deletes.req(params).then((res) => {
|
||
loading.close();
|
||
if (res.err_msg) {
|
||
this.$message.error(res.err_msg);
|
||
} else {
|
||
this.$refs.table.refresh();
|
||
this.$message.success("删除成功");
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
//表格选择后回调事件
|
||
selectionChange(selection) {
|
||
this.selection = selection;
|
||
},
|
||
|
||
//表格内开关
|
||
changeSwitch(val, row) {
|
||
row.status = row.status == "1" ? "0" : "1";
|
||
row.$switch_status = true;
|
||
setTimeout(() => {
|
||
delete row.$switch_status;
|
||
row.status = val;
|
||
this.$message.success("操作成功");
|
||
}, 500);
|
||
},
|
||
|
||
//搜索
|
||
handleQuery() {
|
||
this.$refs.table.queryData(this.query)
|
||
},
|
||
|
||
//根据ID获取树结构
|
||
filterTree(id) {
|
||
var target = null;
|
||
function filter(tree) {
|
||
tree.forEach((item) => {
|
||
if (item.id == id) {
|
||
target = item;
|
||
}
|
||
if (item.children) {
|
||
filter(item.children);
|
||
}
|
||
});
|
||
}
|
||
filter(this.$refs.table.tableData);
|
||
return target;
|
||
},
|
||
|
||
//本地更新数据
|
||
handleSaveSuccess(data, mode) {
|
||
if (mode == "add") {
|
||
this.$refs.table.refresh();
|
||
} else if (mode == "edit") {
|
||
this.$refs.table.refresh();
|
||
}
|
||
this.refreshArea();
|
||
},
|
||
//更新区域缓存
|
||
refreshArea(){
|
||
let that = this;
|
||
that.$API.am.area.list.req({page_size:999}).then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
let areaList = res.results;
|
||
that.$TOOL.data.remove("qyjyAreaList");
|
||
that.$TOOL.data.set("qyjyAreaList", areaList);
|
||
}
|
||
})
|
||
},
|
||
//本地更新数据
|
||
handleSaveSuccessAccess(data, mode) {
|
||
this.$refs.accesstable.refresh()
|
||
},
|
||
|
||
resetQuery() {
|
||
this.query = {};
|
||
},
|
||
},
|
||
};
|
||
</script>
|