forked from xxhjsb/hbt-prevention-ui
633 lines
20 KiB
Vue
633 lines
20 KiB
Vue
<script lang="ts">
|
|
import { Component } 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 UnitService from "@/service/unit.service"
|
|
import FormOption from "hbt-common/models/formOptions"
|
|
import BtnOption from "hbt-common/models/btnOptions"
|
|
import DrawComponent from '@/components/draw.component.vue';
|
|
import AreaService from '@/service/area.service';
|
|
import moment from "moment"
|
|
@Component({
|
|
template,
|
|
components: {
|
|
FormComponent,
|
|
TableComponent,
|
|
DrawComponent,
|
|
},
|
|
})
|
|
export default class UnitManagerComponent extends BaseRecordComponent<any> {
|
|
public tableService = new UnitService();
|
|
|
|
public areaService = new AreaService();
|
|
|
|
public params = {} as any;
|
|
|
|
public isArea = false;
|
|
|
|
public repairTableData = { datas: [] };
|
|
|
|
public repairTableColumn = [] as any;
|
|
|
|
|
|
public filters = [{
|
|
text: "未绘制",
|
|
value: 0
|
|
}, {
|
|
text: "已绘制",
|
|
value: 1
|
|
}]
|
|
public showQrCode = false;
|
|
|
|
public qrUrl = "";
|
|
|
|
public isReadonly = false;
|
|
|
|
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 areaList = [] as any;
|
|
public areaNoMap = {} as any;
|
|
|
|
|
|
public updateActions: BtnOption[] = [];
|
|
|
|
public selectData = [];
|
|
|
|
|
|
public showTurnOff = false;
|
|
|
|
public account = JSON.parse(localStorage.getItem("account") as any);
|
|
|
|
public turnOffParams = {} as any;
|
|
|
|
public turnOffForm = [] as any;
|
|
|
|
public turnOffAction = [{
|
|
name: "取消",
|
|
value: "cancelStatus"
|
|
}, {
|
|
name: "保存",
|
|
value: "saveStatus",
|
|
type: "primary"
|
|
}]
|
|
|
|
created() {
|
|
this.getAreaList();
|
|
}
|
|
|
|
public getTableData() {
|
|
this.tableService.selectByPageList(this.params, true).then((res: any) => {
|
|
this.tableData = res.data
|
|
if (this.getTableCallback) {
|
|
this.getTableCallback(res.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
public buildTurnOffForm() {
|
|
this.turnOffForm = [{
|
|
name: "停用/恢复",
|
|
type: "radio",
|
|
key: "status",
|
|
require: true,
|
|
disable: true,
|
|
width: "100%",
|
|
showError: false,
|
|
datas: [{
|
|
name: "停用",
|
|
value: 0
|
|
}, {
|
|
name: "恢复",
|
|
value: 1
|
|
}]
|
|
}, {
|
|
name: "停用开始时间",
|
|
type: "date",
|
|
subType: "datetime",
|
|
hide: this.turnOffParams.status === 1,
|
|
format: "yyyy-MM-dd HH:mm",
|
|
key: "startTime",
|
|
width: "100%",
|
|
require: true,
|
|
showError: false,
|
|
}, {
|
|
name: "停用结束时间",
|
|
type: "date",
|
|
subType: "datetime",
|
|
format: "yyyy-MM-dd HH:mm",
|
|
hide: this.turnOffParams.status === 1,
|
|
key: "endTime",
|
|
width: "100%",
|
|
require: true,
|
|
showError: false,
|
|
}, {
|
|
name: "原因",
|
|
type: "textarea",
|
|
key: "reason",
|
|
width: "100%",
|
|
require: true,
|
|
showError: false,
|
|
}, {
|
|
name: "登记人",
|
|
type: "text",
|
|
key: "registerUserName",
|
|
disable: true,
|
|
require: true,
|
|
width: "100%",
|
|
showError: false,
|
|
}, {
|
|
name: "登记时间",
|
|
type: "text",
|
|
key: "registerTime",
|
|
disable: true,
|
|
width: "100%",
|
|
require: true,
|
|
showError: false,
|
|
}]
|
|
}
|
|
|
|
public doTurnOff(data, status) {
|
|
this.turnOffParams = {
|
|
status: status,
|
|
unitId: data.id,
|
|
startTime: "",
|
|
endTime: "",
|
|
riskUnitStatus: status,
|
|
registerUserId: this.account.userId,
|
|
registerUserName: this.account.nickName,
|
|
registerTime: moment().format("YYYY-MM-DD HH:mm"),
|
|
|
|
}
|
|
this.showTurnOff = true;
|
|
this.buildTurnOffForm();
|
|
}
|
|
|
|
public doTurnOffAction(data) {
|
|
this.turnOffParams.registerTime = moment().format("YYYY-MM-DD HH:mm");
|
|
if (data && data.value === "saveStatus") {
|
|
this.tableService.updateStatus(this.turnOffParams, true).then((res) => {
|
|
this.$message.success(this.turnOffParams.status ? "启用成功" : "停用成功");
|
|
this.getTableData();
|
|
this.showTurnOff = false;
|
|
})
|
|
} else {
|
|
this.showTurnOff = false;
|
|
}
|
|
}
|
|
|
|
public buildFormOptions() {
|
|
this.updateOptions = [{
|
|
name: "区域名称",
|
|
key: "areaId",
|
|
placeholder: "请选择区域名称",
|
|
width: "calc(50% - 20px)",
|
|
format: "areaName",
|
|
type: "select",
|
|
require: true,
|
|
datas: this.areaList,
|
|
showError: false,
|
|
}, {
|
|
name: "区域编号",
|
|
key: "areaNo",
|
|
type: "text",
|
|
disable: true,
|
|
width: "calc(50% - 20px)",
|
|
showError: false,
|
|
}, {
|
|
name: "单元编号",
|
|
key: "number",
|
|
type: "text",
|
|
disable: true,
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
showError: false,
|
|
}, {
|
|
name: "单元名称",
|
|
key: "name",
|
|
type: "text",
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
showError: false,
|
|
}, {
|
|
name: "责任部门",
|
|
key: "chargeDeptId",
|
|
format: "chargeDeptName",
|
|
type: "treeSelect",
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
expandLevel: Infinity,
|
|
showError: false,
|
|
datas: this.$store.state.prevention.deptTreeList
|
|
}, {
|
|
name: "责任人",
|
|
key: "chargeUserId",
|
|
format: "chargeUserName",
|
|
type: "select",
|
|
width: "calc(50% - 20px)",
|
|
require: true,
|
|
datas: this.$store.state.prevention.userList,
|
|
showError: false,
|
|
}, {
|
|
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: "status",
|
|
width: "calc(50% - 20px)",
|
|
labelWidth: "130px",
|
|
format: "statusName",
|
|
type: "select",
|
|
disable: this.currentId != -1,
|
|
require: true,
|
|
showError: false,
|
|
datas: [{
|
|
name: "启用",
|
|
value: 1,
|
|
}, {
|
|
name: "停用",
|
|
value: 0,
|
|
}]
|
|
}];
|
|
|
|
this.updateActions = [{
|
|
name: "取消",
|
|
value: "cancel"
|
|
}, {
|
|
name: "保存并继续添加",
|
|
value: "saveAndContinue",
|
|
hide: this.currentId != -1,
|
|
type: "primary"
|
|
}, {
|
|
name: "保存",
|
|
value: "submit",
|
|
type: "primary"
|
|
}];
|
|
this.formOptions = [{
|
|
name: "区域名称",
|
|
key: "areaName",
|
|
type: "text"
|
|
}, {
|
|
name: "单元名称",
|
|
key: "name",
|
|
type: "text"
|
|
}, {
|
|
name: "责任部门",
|
|
key: "chargeDeptId",
|
|
type: "select",
|
|
datas: this.$store.state.prevention.deptList
|
|
}]
|
|
}
|
|
|
|
public getQrCode(row) {
|
|
this.areaService.getQrCode({
|
|
url: "/",
|
|
id: row.id,
|
|
system: "prevention",
|
|
type: 0,
|
|
data: "",
|
|
params: {
|
|
"区域名称": row.areaName,
|
|
"单元名称": 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: "areaName" });
|
|
this.tableColumn.push({ name: '单元名称', key: "name" });
|
|
this.tableColumn.push({ name: '责任部门', key: "chargeDeptName" });
|
|
this.tableColumn.push({ name: '责任人', key: "chargeUserName" });
|
|
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.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>"
|
|
}
|
|
}
|
|
});
|
|
this.repairTableColumn.push({ name: "序号", key: "index" });
|
|
this.repairTableColumn.push({ name: "停用开始时间", key: "startTime" });
|
|
this.repairTableColumn.push({ name: "停用结束时间", key: "endTime" });
|
|
this.repairTableColumn.push({ name: "原因", key: "reason" });
|
|
this.repairTableColumn.push({ name: "登记人", key: "registerUserName" });
|
|
this.repairTableColumn.push({ name: "登记时间", key: "registerTime" });
|
|
}
|
|
|
|
|
|
public getAreaList() {
|
|
this.areaService.selectByPage({ pageSize: 1000 }).then((res: any) => {
|
|
this.areaList = res.data.datas.map(item => {
|
|
this.areaNoMap[item.id] = item;
|
|
return {
|
|
name: item.name,
|
|
value: item.id
|
|
}
|
|
});
|
|
this.buildFormOptions()
|
|
})
|
|
}
|
|
|
|
|
|
public doDraw() {
|
|
if (!this.updateParams.name) {
|
|
this.$message.error("请先输入单元名称");
|
|
return
|
|
}
|
|
this.drawModel = "unit";
|
|
this.showDraw = true;
|
|
}
|
|
public getCreateNumber(params) {
|
|
this.tableService.getUnitNumber(params).then((res) => {
|
|
this.updateParams.number = res.data;
|
|
})
|
|
}
|
|
public doSave(goOn?) {
|
|
this.tableService.addOrUpdate(this.updateParams, this.currentId === -1).then((res) => {
|
|
this.$message.success(this.currentId === -1 ? "新增成功！" : "修改成功！");
|
|
if (goOn) {
|
|
this.updateParams = { bottomHeight: 0, topHeight: 0, geoJson: "[]", status: 1, number: null } as any;
|
|
} 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 === "areaId") {
|
|
this.updateParams.areaNo = this.areaNoMap[data].number;
|
|
this.updateParams.chargeDeptId = this.areaNoMap[data].chargeDeptId;
|
|
this.updateParams.chargeDeptName = this.areaNoMap[data].chargeDeptName;
|
|
this.getCreateNumber({ areaNo: this.updateParams.areaNo })
|
|
}
|
|
//停用开始时间
|
|
if (item && item.key === 'startTime') {
|
|
if (this.turnOffParams.endTime) {
|
|
if (data > this.turnOffParams.endTime) {
|
|
this.turnOffParams.endTime = null
|
|
}
|
|
}
|
|
}
|
|
//停用结束时间
|
|
if (item && item.key === 'endTime') {
|
|
if (data < this.turnOffParams.startTime) {
|
|
this.$message.warning('停用结束时间应大于停用开始时间');
|
|
this.turnOffParams.endTime = null
|
|
}
|
|
}
|
|
//单元名称
|
|
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,
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
} as any;
|
|
this.getTableData()
|
|
}
|
|
|
|
|
|
|
|
public showUpdateModel(data?, isRead?) {
|
|
if (!data) {
|
|
this.currentId = -1;
|
|
this.updateParams = { bottomHeight: 0, topHeight: 0, geoJson: "[]", status: 1, number: null } as any;
|
|
this.showUpdate = true
|
|
} else {
|
|
this.currentId = data.id;
|
|
|
|
this.updateParams = Object.assign({ areaName: this.areaList.find(item => item.value === data.areaId)?.name, bottomHeight: 0, topHeight: 0, status: 1, geoJson: "[]", number: null, statusName: ["停用", "启用"][data.status] }, data);
|
|
this.tableService.getUnitDetail({ unitId: data.id }).then((res: any) => {
|
|
this.updateParams.repairs = res.data;
|
|
if (isRead) {
|
|
this.repairTableData.datas = this.updateParams.repairs.map((item, i) => {
|
|
item.index = i + 1;
|
|
return item
|
|
}) || []
|
|
}
|
|
})
|
|
this.isReadonly = !!isRead;
|
|
}
|
|
this.showUpdate = true;
|
|
this.buildFormOptions();
|
|
}
|
|
|
|
public handleClose() {
|
|
this.updateParams = {} as any;
|
|
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>
|