hbt-prevention-ui/src/views/hiddenDanger/files.component.vue

812 lines
26 KiB
Vue

<script lang="ts">
import { Component } from 'vue-property-decorator';
import template from "./common.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 ManagerService from "@/service/manager.service"
import FormOption from "hbt-common/models/formOptions"
import BtnOption from "hbt-common/models/btnOptions"
import MapComponent from "@/components/map.component.vue"
import mapboxgl from "mapbox-gl";
@Component({
template,
components: {
FormComponent,
TableComponent,
MapComponent
},
} as any)
export default class HiddenDangerFilesComponent extends BaseRecordComponent<any> {
public tableService = new ManagerService();
public params = {} as any;
public isFile = true;
public isAction = false;
public isPlan = false;
// 显示治理列表按钮
public isManager = false;
// 是否显示删改查按钮
public isBase = false;
public tableActionWidth = "150";
public formActions = [{
name: "查询",
value: "search",
icon: "el-icon-search",
type: "primary"
}, {
name: "清空",
icon: "el-icon-tickets",
value: "reset"
}];
public tableActions = [{
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 updateParams = {} as any;
public updateOptions: FormOption<BtnOption>[] = [];
public updateOptions2: FormOption<BtnOption>[] = [];
public updateOptions3: FormOption<BtnOption>[] = [];
public updateOptions4: FormOption<BtnOption>[] = [];
public updateActions = [];
public selectData = [];
public levelMap = ["", "一般隐患", "重大隐患"]
public reformModeMap = ["", "即查即改", "限期整改"];
public executeResultMap = ["", "完成", "降低标准完成", "未完成", "延期完成", "延期未完成"];
public isReadonly = true
public isSureMap = ["未确认", "确认"];
public isPassMap = ["不通过", "通过"];
public isAcceptMap = ["不接受", "接受"];
public fileList = [] as any;
public photoList = [] as any;
public fileList2 = [] as any;
public photoList2 = [] as any;
public showFile = false;
public currentUrl = null;
public center = [118.751353, 31.969568];
public marker: any = null;
public map: any = null;
public showMap = false;
public riskSource = [] as any;
public executeResultList = [{
text: "完成",
value: 1
}, {
text: "降低标准完成",
value: 2
}, {
text: "未完成",
value: 3
}, {
text: "延期完成",
value: 4,
}, {
text: "延期未完成",
value: 5
}];
created() {
//重大危险源
this.initRiskSource()
}
public getTableData() {
this.tableService.selectByPage2(this.params).then(res => {
this.tableData = res.data as any;
this.getTableCallback();
})
}
public getMap(map) {
this.map = map;
this.addMarker();
}
public addMarker() {
this.marker = new mapboxgl.Marker({ draggable: !this.isReadonly && this.updateParams.status < 2 })
.setLngLat(this.center)
.addTo(this.map);
this.map.flyTo({ center: this.center })
}
public onDragEnd() {
const lngLat = this.marker.getLngLat();
this.updateParams.locationLng = lngLat.lng;
this.updateParams.locationLat = lngLat.lat;
this.center = [lngLat.lng, lngLat.lat]
// this.updateParams.locationName = lngLat.lng+","+lngLat.lat;
this.handleClose()
}
public getTableCallback() {
this.formOptions = [{
name: "隐患等级",
key: "level",
type: "select",
datas: [{
name: "一般隐患",
value: 1
}, {
name: "重大隐患",
value: 2
}]
}, {
name: "隐患分类",
key: "classify",
type: "select",
datas: this.$store.state.prevention_dangrous_type
}, {
name: "整改方式",
key: "reformMode",
type: "select",
datas: [{
name: "即查即改",
value: 1
}, {
name: "限期整改",
value: 2
}]
}]
this.updateOptions = [{
name: "隐患编号",
key: "number",
disable: true,
width: "calc(50% - 20px)",
require: true,
showError: false,
type: "text"
}, {
name: "隐患来源",
key: "source",
format: "sourceName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: this.$store.state.prevention_danger_resource
}, {
name: "隐患标题",
key: "title",
width: "100%",
require: true,
showError: false,
type: "text"
}, {
name: "隐患描述",
width: "100%",
key: "description",
require: true,
showError: false,
type: "text"
}, {
name: "隐患级别",
key: "level",
format: "levelName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: [{
name: "一般隐患",
value: 1
}, {
name: "重大隐患",
value: 2
}]
}, {
name: "整改方式",
key: "reformMode",
format: "reformModeName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: [{
name: "即查即改",
value: 1
}, {
name: "限期整改",
value: 2
}]
}, {
name: "隐患位置",
key: "locationName",
type: "text",
width: "calc(50% - 20px)",
require: true,
showError: false,
unit: {
type: "btn",
name: (this.updateParams.status > 1 || this.isReadonly) ? "查看定位" : "点击定位",
value: "fixed",
btnType: "primary"
}
}, {
name: "隐患分类",
key: "classify",
format: "classifyName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: this.$store.state.prevention_dangrous_type
}, {
name: "整改部门",
key: "reformDeptId",
format: "reformDeptName",
type: "treeSelect",
width: "calc(50% - 20px)",
require: true,
expandLevel: Infinity,
showError: false,
datas: this.$store.state.deptTreeList
}, {
name: "整改责任人",
key: "reformUserId",
format: "reformUserName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: this.$store.state.userList,
}, {
name: "验证人",
key: "verifyUserId",
format: "verifyUserName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: this.$store.state.userList,
}, {
name: "整改时限",
key: "reformDeadline",
type: "date",
subType: "datetime",
format: "yyyy-MM-dd HH",
width: "calc(50% - 20px)",
require: true,
showError: false,
}, {
name: "隐患照片",
key: "photo",
ref: "photo",
type: "upload",
width: "calc(50% - 20px)",
require: true,
showError: false,
autoUpload: true,
onPreview: this.onPreview,
accept: "image/png, image/jpeg",
listType: "picture-card",
fileList: this.photoList,
icon: "el-icon-plus",
}, {
name: "相关附件",
key: "file",
ref: "file",
type: "upload",
width: "calc(50% - 20px)",
showError: false,
onPreview: this.onPreview,
autoUpload: true,
accept: "image/png, image/jpeg,.doc,.docx,.xls,.xlsx,.pdf",
listType: "text",
tip: this.isReadonly ? "" : "请上传.pdf,.png,.jpg,.doc.docx,.xls,.xlsx格式文件",
fileList: this.fileList,
btn: [{
name: "上传",
value: "upload",
hide: this.isReadonly,
size: "small",
type: "primary"
}]
}, {
name: "隐患类别",
key: "dangerType",
format: "dangerTypeName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: this.$store.state.prevention_danger_type,
}, {
name: "检查类型",
key: "inspectType",
format: "inspectTypeName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: this.$store.state.prevention_danger_check_type,
}, {
name: "违章人数",
key: "violateNumber",
type: "number",
width: "calc(50% - 20px)",
showError: false,
}, {
name: "专业分类",
key: "professionClassify",
format: "professionClassifyName",
type: "select",
width: "calc(50% - 20px)",
showError: false,
datas: this.$store.state.prevention_major_type,
}, {
name: "属性分类",
key: "attributeClassify",
format: "attributeClassifyName",
type: "select",
width: "calc(50% - 20px)",
showError: false,
datas: this.$store.state.prevention_safe_reason,
}, {
name: "发生环节",
key: "occurNode",
format: "occurNodeName",
type: "select",
width: "calc(50% - 20px)",
showError: false,
datas: this.$store.state.prevention_occur_step,
}, {
name: "违反规定条款",
key: "violateTerm",
type: "textarea",
width: "100%",
showError: false,
}, {
name: "隐患整改要求",
key: "reformDemand",
type: "textarea",
width: "100%",
showError: false,
}, {
name: "重大危险源名称",
key: "majorHazard",
format: "majorHazardName",
type: "select",
width: "calc(50% - 20px)",
require: true,
showError: false,
datas: this.riskSource
},]
this.updateOptions2 = [{
name: "隐患确认",
key: "reformConfirmFlag",
format: "reformConfirmFlagName",
type: "radio",
width: "100%",
require: true,
showError: false,
}, {
name: "原因说明",
type: "textarea",
width: "100%",
key: "reformReasonDescription",
require: true,
hide: this.updateParams.reformConfirmFlag,
showError: false,
placeholder: "请输入未确认原因"
}, {
name: "治理人",
type: "select",
width: "calc(50% - 20px)",
require: true,
key: "executeUserId",
format: "executeUserName",
showError: false,
hide: this.updateParams.reformConfirmFlag === 0,
datas: this.$store.state.userList
}, {
name: "治理时限",
type: "date",
subType: "datetime",
width: "calc(50% - 20px)",
require: true,
key: "executeDeadline",
format: "yyyy-MM-dd HH:mm",
showError: false,
hide: this.updateParams.reformConfirmFlag === 0,
}, {
name: "治理措施及要求",
type: "textarea",
width: "100%",
key: "executeMeasure",
require: true,
hide: this.updateParams.reformConfirmFlag === 0,
showError: false,
placeholder: "请输入治理措施与要求"
}, {
name: "治理资金",
type: "number",
width: "35%",
key: "executeMoney",
require: true,
hide: this.updateParams.reformConfirmFlag === 0,
showError: false,
unit: {
name: "¥",
type: "text"
}
}, {
name: "",
type: "textarea",
width: "calc(65% - 40px)",
key: "executeMoneySource",
hide: this.updateParams.reformConfirmFlag === 0,
placeholder: "请输入资金来源"
}, {
name: "确认人",
type: "text",
width: "calc(50% - 20px)",
key: "realConfirmUserName",
require: true,
disable: true,
}, {
name: "确认时间",
type: "date",
subType: "datetime",
width: "calc(50% - 20px)",
require: true,
key: "realConfirmTime",
format: "yyyy-MM-dd HH:mm",
showError: false,
}]
this.updateOptions3 = [{
name: "接受确认",
key: "executeConfirmFlag",
format: "executeConfirmFlagName",
type: "radio",
width: "100%",
require: true,
showError: false,
}, {
name: "整改结果",
key: "executeResult",
format: "executeResultName",
type: "radio",
hide: this.updateParams.executeConfirmFlag === 0,
width: "100%",
require: true,
showError: false,
datas: this.executeResultList
}, {
name: "治理情况汇报",
type: "textarea",
width: "100%",
key: "executeSituation",
require: true,
hide: this.updateParams.executeConfirmFlag === 0,
showError: false,
placeholder: "请输入治理措施与要求"
}, {
name: "原因说明",
type: "textarea",
width: "100%",
key: "executeReasonDescription",
require: true,
hide: this.updateParams.executeConfirmFlag,
showError: false,
placeholder: "请输入未确认原因"
}, {
name: "照片及相关附件",
key: "file2",
type: "upload",
hide: this.updateParams.executeConfirmFlag === 0,
width: "100%",
showError: false,
onPreview: this.onPreview,
autoUpload: true,
accept: "image/png, image/jpeg,.doc,.docx,.xls,.xlsx,.pdf",
listType: "text",
tip: this.isReadonly ? "" : "请上传.pdf,.png,.jpg,.doc.docx,.xls,.xlsx格式文件",
fileList: this.fileList2,
btn: [{
name: "点击上传附件",
value: "upload",
hide: this.isReadonly,
size: "small",
type: "primary"
}]
}, {
name: "整改人",
type: "text",
width: "calc(50% - 20px)",
key: "realExecuteUserName",
require: true,
disable: true,
}, {
name: "整改时间",
type: "date",
subType: "datetime",
width: "calc(50% - 20px)",
require: true,
key: "realExecuteTime",
format: "yyyy-MM-dd HH:mm",
showError: false,
}]
this.updateOptions4 = [{
name: "验证结果",
key: "verifyConfirmFlag",
format: "verifyConfirmFlagName",
type: "radio",
width: "100%",
require: true,
showError: false,
}, {
name: "验证情况",
type: "textarea",
width: "100%",
key: "verifySituation",
placeholder: "请输入验证情况"
}, {
name: "照片",
key: "photo2",
type: "upload",
width: "100%",
autoUpload: true,
onPreview: this.onPreview,
accept: "image/png, image/jpeg",
listType: "picture-card",
fileList: this.photoList2,
icon: "el-icon-plus",
}, {
name: "验证人",
type: "text",
width: "calc(50% - 20px)",
key: "realVerifyUserName",
require: true,
disable: true,
}, {
name: "验证时间",
type: "date",
subType: "datetime",
width: "calc(50% - 20px)",
require: true,
key: "realVerifyTime",
format: "yyyy-MM-dd HH:mm",
showError: false,
}]
}
public buildTable() {
this.tableColumn.push({
name: '隐患整改状态', width: "120", filters: [{ text: "已整改", value: 5 }, { text: "已作废", value: 7 }, { text: "整改中", value: 0 }], filterMethod: (data, row) => {
return row.status == data;
}, render: (data) => {
if (data.status === 5) {
return "<span class='color_1'>已整改</span>"
} else if (data.status === 7) {
return "已作废"
} else {
return "<span class='color_2'>整改中</span>"
}
}
});
this.tableColumn.push({ name: '隐患来源', width: "150", render: (data) => this.$store.getters.prevention_danger_resource_map[data.source] });
this.tableColumn.push({ name: '隐患标题', width: "150", key: "title" });
this.tableColumn.push({ name: '隐患描述', width: "300", key: "description" });
this.tableColumn.push({ name: '隐患等级', render: (data) => this.levelMap[data.level] });
this.tableColumn.push({ name: '隐患分类', render: (data) => this.$store.getters.prevention_dangrous_type_map[data.dangerType] });
this.tableColumn.push({ name: '整改方式', render: (data) => this.reformModeMap[data.reformMode] });
this.tableColumn.push({ name: '隐患位置', width: "150", key: "locationName" });
this.tableColumn.push({ name: '治理责任人', width: "100", key: "executeUserName" });
this.tableColumn.push({
name: '整改结果', width: "100", filters: this.executeResultList, filterMethod: (data, row) => {
return row.executeResult == data;
}, render: (data) => this.executeResultMap[data.executeResult]
});
this.tableColumn.push({ name: '整改时限', width: "120", key: "reformDeadline" });
}
public callback(data, type?) {
if (type) {
this.params[type] = data;
this.getTableData();
return
}
// 查询
if (data.value === "search") {
this.getTableData()
// 重置
} else if (data.value === "reset") {
this.reset()
// 反选
} else if (data.value === "reverse") {
this.toggleAll()
// 全选
} else if (data.value === "selectAll") {
this.selectAll()
} else if (data.value === "delete") {
this.deleteData(this.selectData.map((item: any) => item.id))
} else if (data.value === "cancel") {
this.handleClose()
} else if (data.value === "fixed") {
this.showMap = true
}
}
// 重置数据
public reset() {
this.params = {
pageNum: 1,
pageSize: 20,
} as any;
this.getTableData()
}
//重大危险源
public initRiskSource() {
this.riskSource = [] as any;
this.riskSource = JSON.parse(JSON.stringify(this.$store.state.prevention_risk_source));
this.riskSource.unshift({
name: '不涉及',
value: 0,
})
this.getTableCallback()
}
public showUpdateModel(row) {
this.initRiskSource()
Object.assign(this.updateParams, {
verifyConfirmFlagName: this.isPassMap[row.verifyConfirmFlag],
executeConfirmFlagName: this.isAcceptMap[row.executeConfirmFlag],
reformConfirmFlagName: this.isSureMap[row.reformConfirmFlag],
executeResultName: this.executeResultMap[row.executeResult],
sourceName: this.$store.getters.prevention_danger_resource_map[row.source],
attributeClassifyName: this.$store.getters.prevention_safe_reason_map[row.attributeClassify],
classifyName: this.$store.getters.prevention_dangrous_type_map[row.classify],
dangerTypeName: this.$store.getters.prevention_danger_type_map[row.dangerType],
inspectTypeName: this.$store.getters.prevention_danger_check_type_map[row.inspectType],
levelName: this.levelMap[row.level],
occurNodeName: this.$store.getters.prevention_occur_step_map[row.occurNode],
professionClassifyName: this.$store.getters.prevention_major_type_map[row.professionClassify],
reformModeName: this.reformModeMap[row.reformMode],
}, row);
this.updateParams.majorHazard = +this.updateParams.majorHazard
this.updateParams.majorHazardName = !this.updateParams.majorHazard? '不涉及' : this.$store.getters.prevention_risk_source_map[this.updateParams.majorHazard]
this.getTableCallback()
// 获取url
if (row.resourceId) {
this.tableService.getFileUrls({ ids: row.resourceId.split(",") }).then((photos: any) => {
this.photoList = photos.data.map(item => {
return {
name: item.originalName,
url: item.url,
type: item.type,
id: item.id
}
})
this.getTableCallback()
})
}
if (row.resourceOtherId) {
this.tableService.getFileUrls({ ids: row.resourceOtherId.split(",") }).then((files: any) => {
this.fileList = files.data.map(item => {
return {
name: item.originalName,
url: item.url,
type: item.type,
id: item.id
}
})
this.getTableCallback()
})
}
if (row.executeResourceId) {
this.tableService.getFileUrls({ ids: row.executeResourceId.split(",") }).then((files: any) => {
this.fileList2 = files.data.map(item => {
return {
name: item.originalName,
url: item.url,
type: item.type,
id: item.id
}
})
this.getTableCallback()
})
}
if (row.verifyResourceId) {
this.tableService.getFileUrls({ ids: row.verifyResourceId.split(",") }).then((files: any) => {
this.photoList2 = files.data.map(item => {
return {
name: item.originalName,
url: item.url,
type: item.type,
id: item.id
}
})
this.getTableCallback()
})
}
this.showUpdate = true
}
public onPreview(file) {
if (file.type.indexOf("png") >= 0 || file.type.indexOf("jp") >= 0) {
this.currentUrl = file.url;
this.showFile = true;
} else {
window.open(file.url, "_blank")
}
}
public handleClose() {
if (this.showMap) {
this.showMap = false;
this.marker.remove();
this.marker = null;
return
}
this.updateParams = {} as any
this.showUpdate = false;
}
public selectable(row) {
return row.status === 5
}
public toggleAll() {
this.tableData.datas.filter(item => item.status === 5).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 && item.status == 5) {
(this.$refs.multipleTable as any).toggleRowSelection(item);
}
})
}
}
public handleSelectionChange(data) {
this.selectData = data;
}
public change(data, item) {
//
}
}
</script>
<style lang="scss" scoped src="../common.component.scss"></style>