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

768 lines
24 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 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 executeResultList= [{
text:"完成",
value:1
},{
text:"降低标准完成",
value:2
},{
text:"未完成",
value:3
},{
text:"延期完成",
value:4,
},{
text:"延期未完成",
value:5
}];
created(){
}
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,
}]
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;
}
public showUpdateModel(row){
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.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;
}
}
</script>
<style lang="scss" scoped src="../common.component.scss"></style>