forked from xxhjsb/hbt-prevention-ui
528 lines
16 KiB
Vue
528 lines
16 KiB
Vue
|
|
<script lang="ts">
|
|
import { Component, Watch } from 'vue-property-decorator';
|
|
import template from "../areaUnit.component.html"
|
|
import BaseRecordComponent from "hbt-common/components/common/baseRecord.component.vue"
|
|
import FormComponent from "hbt-common/components/common/form.component.vue"
|
|
import TableComponent from "hbt-common/components/common/table.component.vue"
|
|
import AreaService from "@/service/area.service"
|
|
import FormOption from "hbt-common/models/formOptions"
|
|
import BtnOption from "hbt-common/models/btnOptions"
|
|
import DrawComponent from '@/components/draw.component.vue';
|
|
import SystemService from "hbt-common/service/system.service"
|
|
@Component({
|
|
template,
|
|
components: {
|
|
FormComponent,
|
|
TableComponent,
|
|
DrawComponent,
|
|
},
|
|
})
|
|
export default class AreaManagerComponent extends BaseRecordComponent<any> {
|
|
public tableService = new AreaService();
|
|
|
|
public systemService = new SystemService();
|
|
// 列表参数
|
|
public params = {
|
|
name: "",
|
|
chargeDeptId: null,
|
|
majorHazardFlag: null
|
|
} as any;
|
|
|
|
public filters = [{
|
|
text: "未绘制",
|
|
value: 0
|
|
}, {
|
|
text: "已绘制",
|
|
value: 1
|
|
}]
|
|
|
|
public isArea = true;
|
|
public showQrCode = false;
|
|
public qrUrl = "";
|
|
|
|
|
|
|
|
|
|
// 列表搜索条件按钮
|
|
public formActions = [{
|
|
name: "查询",
|
|
value: "search",
|
|
icon: "el-icon-search",
|
|
type: "primary"
|
|
}, {
|
|
name: "清空",
|
|
icon: "el-icon-tickets",
|
|
value: "reset"
|
|
}];
|
|
// 列表头部按钮
|
|
public tableActions = [{
|
|
name: "添加",
|
|
value: "add",
|
|
icon: "el-icon-plus",
|
|
type: "primary"
|
|
}, {
|
|
name: "批量绘制",
|
|
value: "drawList",
|
|
plain: true,
|
|
icon: "el-icon-plus",
|
|
type: "primary"
|
|
}, {
|
|
name: "批量删除",
|
|
value: "delete",
|
|
plain: true,
|
|
icon: "el-icon-delete",
|
|
type: "danger"
|
|
}];
|
|
// 列表底部按钮
|
|
public footerActions = [{
|
|
name: "选择全部",
|
|
value: "selectAll",
|
|
type: "primary"
|
|
}, {
|
|
name: "反向选择",
|
|
value: "reverse"
|
|
}];
|
|
// 搜索条件表单
|
|
public formOptions: FormOption<BtnOption>[] = [];
|
|
|
|
public showUpdate = false;
|
|
public currentId = -1;
|
|
public updateParams = {} as any;
|
|
// 新增/更新表单
|
|
public updateOptions: FormOption<BtnOption>[] = [];
|
|
|
|
|
|
public showDraw = false;
|
|
|
|
public drawModel = "list";
|
|
|
|
public isReadonly = false;
|
|
|
|
|
|
public updateActions: BtnOption[] = [];
|
|
|
|
public selectData = [];
|
|
|
|
@Watch("$store.state.deptList", { immediate: true, deep: true })
|
|
onChanges() {
|
|
this.buildFormOptions()
|
|
}
|
|
|
|
|
|
created() {
|
|
//
|
|
}
|
|
|
|
public getTableData() {
|
|
this.tableService.selectByPageList(this.params).then((res: any) => {
|
|
this.tableData = res.data
|
|
if (this.getTableCallback) {
|
|
this.getTableCallback(res.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
public buildFormOptions() {
|
|
this.updateOptions = [{
|
|
name: "区域编号",
|
|
key: "number",
|
|
type: "text",
|
|
disable: true,
|
|
showError: false,
|
|
width: "calc(50% - 20px)",
|
|
require: true
|
|
}, {
|
|
name: "区域名称",
|
|
key: "name",
|
|
type: "text",
|
|
showError: false,
|
|
width: "calc(50% - 20px)",
|
|
require: true
|
|
}, {
|
|
name: "责任部门",
|
|
key: "chargeDeptId",
|
|
format: "chargeDeptName",
|
|
type: "treeSelect",
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
expandLevel: Infinity,
|
|
showError: false,
|
|
datas: this.$store.state.deptTreeList
|
|
}, {
|
|
name: "责任人",
|
|
key: "chargeUserId",
|
|
format: "chargeUserName",
|
|
type: "select",
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
showError: false,
|
|
datas: this.$store.state.userList
|
|
}, {
|
|
name: "属于重大危险源",
|
|
key: "majorHazardFlag",
|
|
format: "majorHazardFlagName",
|
|
type: "radio",
|
|
width: "calc(50% - 20px)",
|
|
labelWidth: "auto",
|
|
require: true,
|
|
showError: false,
|
|
datas: this.$store.state.common_yes_no
|
|
}, {
|
|
name: "重大危险源名称",
|
|
key: "majorHazardName",
|
|
hide: !this.updateParams.majorHazardFlag,
|
|
type: "text",
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
showError: false,
|
|
}, {
|
|
name: "重大危险源等级",
|
|
key: "majorHazardLevel",
|
|
format: "majorHazardLevelName",
|
|
type: "select",
|
|
hide: !this.updateParams.majorHazardFlag,
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
showError: false,
|
|
datas: [{
|
|
name: "一级",
|
|
value: 1
|
|
}, {
|
|
name: "二级",
|
|
value: 2
|
|
}, {
|
|
name: "三级",
|
|
value: 3
|
|
}, {
|
|
name: "四级",
|
|
value: 4
|
|
}, {
|
|
name: "不涉及",
|
|
value: 5
|
|
}]
|
|
}, {
|
|
type: "btn",
|
|
name: "区域绘制",
|
|
width: "calc(50% - 20px)",
|
|
btn: [{
|
|
name: "开始绘制",
|
|
value: "draw",
|
|
height: "36px",
|
|
hide: this.isReadonly,
|
|
size: "small",
|
|
icon: "el-icon-edit-outline",
|
|
type: "primary"
|
|
}, {
|
|
name: "查看绘制",
|
|
value: "readDraw",
|
|
hide: !this.isReadonly,
|
|
height: "36px",
|
|
size: "small",
|
|
icon: "el-icon-edit-outline",
|
|
type: "primary"
|
|
}]
|
|
}, {
|
|
name: "分析对象编号",
|
|
key: "analTargetNum",
|
|
type: "text",
|
|
showError: false,
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
}];
|
|
|
|
this.updateActions = [{
|
|
name: "取消",
|
|
value: "cancel"
|
|
}, {
|
|
name: "保存并继续添加",
|
|
value: "saveAndContinue",
|
|
hide: this.currentId != -1,
|
|
type: "primary"
|
|
}, {
|
|
name: "保存",
|
|
value: "submit",
|
|
type: "primary"
|
|
}];
|
|
this.formOptions = [{
|
|
name: "区域名称",
|
|
key: "name",
|
|
type: "text"
|
|
}, {
|
|
name: "责任部门",
|
|
key: "chargeDeptId",
|
|
type: "treeSelect",
|
|
expandLevel: Infinity,
|
|
width:"280px",
|
|
datas: this.$store.state.deptTreeList
|
|
}, {
|
|
name: "是否重大危险源",
|
|
key: "majorHazardFlag",
|
|
type: "select",
|
|
datas: this.$store.state.common_yes_no
|
|
}]
|
|
}
|
|
|
|
public getQrCode(row) {
|
|
this.tableService.getQrCode({
|
|
url: "/",
|
|
id: row.id,
|
|
system: "prevention",
|
|
type: 0,
|
|
data: "",
|
|
params: {
|
|
"区域名称": row.name,
|
|
"区域编号": row.number,
|
|
"责任人": row.chargeUserName,
|
|
"责任部门": row.chargeDeptName,
|
|
"重大危险源名称": row.majorHazardName
|
|
}
|
|
}).then((res: any) => {
|
|
this.showQrCode = true;
|
|
this.qrUrl = res.data.url;
|
|
})
|
|
}
|
|
|
|
public buildTable() {
|
|
this.tableColumn.push({ name: '区域名称', key: "name" });
|
|
this.tableColumn.push({ name: '责任部门', key: "chargeDeptName" });
|
|
this.tableColumn.push({ name: '责任人', key: "chargeUserName" });
|
|
this.tableColumn.push({
|
|
name: '是否属于重大危险源', key: "majorHazardFlag", render: (data) => {
|
|
return this.$store.getters.common_yes_no_map[data.majorHazardFlag]
|
|
}
|
|
});
|
|
this.tableColumn.push({
|
|
name: '区域风险等级', key: "riskLevel", width: "150px", render: (data) => {
|
|
return "<span class='color_level_" + data.riskLevel + "'>" + (data.riskLevel ? (this.$store.getters.prevention_risk_level_map[data.riskLevel]) : '待评估') + "</span>"
|
|
},
|
|
filters: this.$store.state.prevention_risk_level.map(item => {
|
|
return {
|
|
text: item.name,
|
|
value: item.value,
|
|
}
|
|
}), filterMethod: (data, row) => {
|
|
return row.riskLevel === data;
|
|
}
|
|
});
|
|
this.tableColumn.push({
|
|
name: '绘制情况', filters: this.filters, filterMethod: (data, row) => {
|
|
if (data) {
|
|
return row.geoJson && row.geoJson !== "[]"
|
|
} else {
|
|
return !row.geoJson || row.geoJson === "[]"
|
|
}
|
|
}, render: (data) => {
|
|
if (data.geoJson === '[]' || !data.geoJson) {
|
|
return "<span class='noDraw'>未绘制</span>"
|
|
} else {
|
|
return "<span class='color_1'>已绘制</span>"
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
public doDraw() {
|
|
if (!this.updateParams.name) {
|
|
this.$message.error("请先输入区域名称");
|
|
return
|
|
}
|
|
this.drawModel = "area";
|
|
this.showDraw = true;
|
|
}
|
|
|
|
public getCreateNumber() {
|
|
this.tableService.getAreaNumber().then((res) => {
|
|
this.updateParams = { bottomHeight: 0, topHeight: 0, geoJson: "[]", number: res.data } as any;
|
|
this.buildFormOptions();
|
|
this.showUpdate = true
|
|
})
|
|
}
|
|
|
|
public doSave(goOn?) {
|
|
this.tableService.addOrUpdate(this.updateParams, this.currentId === -1).then((res) => {
|
|
this.$message.success(this.currentId === -1 ? "新增成功！" : "修改成功！");
|
|
if (goOn) {
|
|
this.getCreateNumber();
|
|
} else {
|
|
this.handleClose();
|
|
}
|
|
this.getTableData();
|
|
})
|
|
}
|
|
|
|
public change(data, item?) {
|
|
// 新增编辑选择部门
|
|
if (item && item.key === "chargeDeptId") {
|
|
this.updateParams.chargeDeptName = this.$store.getters.dept_map[data];
|
|
}
|
|
// 新增编辑选择人员
|
|
if (item && item.key === "chargeUserId") {
|
|
this.updateParams.chargeUserName = this.$store.getters.user_map[data];
|
|
}
|
|
// 新增编辑选择是否重大危险源
|
|
if (item && item.key === "majorHazardFlag") {
|
|
this.updateOptions[5].hide = !data;
|
|
this.updateOptions[6].hide = !data;
|
|
if(!data){
|
|
this.updateParams.majorHazardName = '';
|
|
this.updateParams.majorHazardLevel = '';
|
|
}
|
|
}
|
|
//区域名称
|
|
if (item && item.key === 'name') {
|
|
if (this.updateParams.geoJson !== '[]') {
|
|
let tmpGeoJson = JSON.parse(this.updateParams.geoJson);
|
|
tmpGeoJson[0]['properties']['name'] = this.updateParams.name;
|
|
this.$set(this.updateParams, 'geoJson', JSON.stringify(tmpGeoJson))
|
|
}
|
|
}
|
|
}
|
|
|
|
public callback(data, type?) {
|
|
if (type) {
|
|
if (type === 'pageSize' || type === 'pageNum') {
|
|
this.params[type] = data;
|
|
}
|
|
this.getTableData();
|
|
return
|
|
}
|
|
// 查询
|
|
if (data && data.value === "search") {
|
|
this.getTableData()
|
|
// 重置
|
|
} else if (data && data.value === "reset") {
|
|
this.reset()
|
|
// 反选
|
|
} else if (data && data.value === "reverse") {
|
|
this.toggleAll()
|
|
// 全选
|
|
} else if (data && data.value === "selectAll") {
|
|
this.selectAll()
|
|
} else if (data && data.value === "add") {
|
|
this.showUpdateModel()
|
|
} else if (data && data.value === "delete") {
|
|
this.deleteData(this.selectData.map((item: any) => item.id))
|
|
} else if (data && (data.value === "draw" || data.value === "readDraw")) {
|
|
this.doDraw()
|
|
} else if (data && data.value === "drawList") {
|
|
this.drawModel = "list";
|
|
this.showDraw = true;
|
|
} else if (data && data.value === "submit") {
|
|
this.doSave()
|
|
} else if (data && data.value === "saveAndContinue") {
|
|
this.doSave(true)
|
|
} else if (data && data.value === "cancel") {
|
|
this.updateParams = {} as any;
|
|
this.handleClose();
|
|
}
|
|
}
|
|
// 重置数据
|
|
public reset() {
|
|
this.params = {
|
|
name: null,
|
|
chargeDeptId: null,
|
|
majorHazardFlag: null,
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
} as any;
|
|
this.getTableData()
|
|
}
|
|
|
|
public showUpdateModel(data?, isRead?) {
|
|
if (!data) {
|
|
this.currentId = -1;
|
|
this.getCreateNumber();
|
|
} else {
|
|
this.currentId = data.id;
|
|
this.updateParams = Object.assign({ bottomHeight: 0, topHeight: 0, geoJson: "[]", majorHazardFlagName: this.$store.getters.common_yes_no_map[data.majorHazardFlag], majorHazardLevelName: this.levelName(data.majorHazardLevel) }, data);
|
|
this.isReadonly = !!isRead;
|
|
this.buildFormOptions();
|
|
this.showUpdate = true
|
|
}
|
|
}
|
|
|
|
public levelName(type) {
|
|
switch (type) {
|
|
case 1:
|
|
return "一级"
|
|
case 2:
|
|
return "二级"
|
|
case 3:
|
|
return "三级"
|
|
case 4:
|
|
return "四级"
|
|
case 5:
|
|
return "不涉及级"
|
|
}
|
|
}
|
|
|
|
public handleClose() {
|
|
this.showUpdate = false;
|
|
this.currentId = -1;
|
|
this.isReadonly = false;
|
|
}
|
|
|
|
|
|
public toggleAll() {
|
|
this.tableData.datas.forEach((item, index) => {
|
|
(this.$refs.multipleTable as any).toggleRowSelection(item);
|
|
})
|
|
}
|
|
|
|
public selectAll() {
|
|
if (!this.selectData.length) {
|
|
this.toggleAll()
|
|
} else {
|
|
this.tableData.datas.forEach((item, index) => {
|
|
const find = this.selectData.find((data: any) => data.id === item.id);
|
|
if (!find) {
|
|
(this.$refs.multipleTable as any).toggleRowSelection(item);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
public handleSelectionChange(data) {
|
|
this.selectData = data;
|
|
}
|
|
|
|
//删除
|
|
public deleteData(ids: any) {
|
|
if (!ids.length) {
|
|
return
|
|
} else {
|
|
this.$confirm("确认删除所选数据？", "确认数据", {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.tableService.deleteByIds(ids).then((res: any) => {
|
|
if (res.data.type === 0) {
|
|
this.$message.success("删除成功！");
|
|
this.getTableData()
|
|
} else {
|
|
let title = '';
|
|
if (res.data.names.length > 3) {
|
|
title = '“' + res.data.names.slice(0, 3).join('”，“') + '” 等'
|
|
} else {
|
|
title = '“' + res.data.names.join('”，“') + '”'
|
|
}
|
|
this.$confirm(`${title}区域下存在单元划分数据，请先删除对应单元`, "", {
|
|
type: 'warning',
|
|
showConfirmButton: false
|
|
}).then(() => {
|
|
//
|
|
}).catch(() => {
|
|
//
|
|
})
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
//
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped src="../../common.component.scss"></style>
|