forked from xxhjsb/hbt-prevention-ui
311 lines
8.8 KiB
Vue
311 lines
8.8 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';
|
|
@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 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 = [];
|
|
|
|
created(){
|
|
this.getAreaList();
|
|
}
|
|
|
|
public buildFormOptions(){
|
|
this.updateOptions = [{
|
|
name:"选择区域",
|
|
key:"areaId",
|
|
placeholder:"请选择区域名称",
|
|
width:"calc(50% - 20px)",
|
|
type:"select",
|
|
require:true,
|
|
datas:this.areaList
|
|
},{
|
|
name:"区域编号",
|
|
key:"areaNo",
|
|
type:"text",
|
|
disable:true,
|
|
width:"calc(50% - 20px)",
|
|
},{
|
|
name:"单元编号",
|
|
key:"number",
|
|
type:"text",
|
|
width:"calc(50% - 20px)",
|
|
require:true
|
|
},{
|
|
name:"单元名称",
|
|
key:"name",
|
|
type:"text",
|
|
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",
|
|
type:"select",
|
|
width:"calc(50% - 20px)",
|
|
require:true,
|
|
datas:this.$store.state.userList
|
|
},{
|
|
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"
|
|
}]
|
|
}];
|
|
|
|
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:"select",
|
|
datas:this.$store.state.deptList
|
|
}]
|
|
}
|
|
|
|
public buildTable(){
|
|
this.tableColumn.push({name:'风险分析单元',key:"name"});
|
|
this.tableColumn.push({name:'责任部门',key:"chargeDeptName"});
|
|
this.tableColumn.push({name:'责任人',key:"chargeUserName"});
|
|
this.tableColumn.push({name:'绘制情况',render:(data)=>{
|
|
if(data.geoJson==='[]' || !data.geoJson){
|
|
return "<span class='noDraw'>未绘制</span>"
|
|
}else{
|
|
return "<span>已绘制</span>"
|
|
}
|
|
}});
|
|
}
|
|
|
|
public getAreaList(){
|
|
this.areaService.selectByPage({pageSize:10}).then((res:any)=>{
|
|
this.areaList = res.data.datas.map(item=>{
|
|
this.areaNoMap[item.id] = item.number;
|
|
return {
|
|
name:item.name,
|
|
value:item.id
|
|
}
|
|
});
|
|
this.buildFormOptions()
|
|
})
|
|
}
|
|
|
|
public callback(data,item?){
|
|
// 新增编辑选择部门
|
|
if(item && item.key === "chargeDeptId"){
|
|
this.updateParams.chargeDeptName = this.$store.state.deptList.find(item=>item.value === data)?.name;
|
|
}
|
|
// 新增编辑选择人员
|
|
if(item && item.key === "chargeUserId"){
|
|
this.updateParams.chargeUserName = this.$store.state.userList.find(item=>item.value === data)?.name;
|
|
}
|
|
// 新增编辑选择区域
|
|
if(item && item.key === "areaId"){
|
|
console.log(item)
|
|
this.updateParams.areaNo = this.areaNoMap[data];
|
|
console.log(this.updateParams)
|
|
}
|
|
// 查询
|
|
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 === "add"){
|
|
this.showUpdateModel()
|
|
}else if(data.value === "delete"){
|
|
this.deleteData(this.selectData.map((item:any)=>item.id))
|
|
}else if(data.value === "draw"){
|
|
if(!this.updateParams.name){
|
|
this.$message.error("请先输入单元名称");
|
|
return
|
|
}
|
|
this.drawModel = "unit";
|
|
this.showDraw = true;
|
|
}else if(data.value === "drawList"){
|
|
this.drawModel = "list";
|
|
this.showDraw = true;
|
|
}else if(data.value === "submit"){
|
|
this.tableService.addOrUpdate(this.updateParams,this.currentId===-1).then((res)=>{
|
|
this.$message.success(this.currentId===-1?"新增成功！":"修改成功！");
|
|
this.handleClose();
|
|
this.getTableData();
|
|
})
|
|
}else if(data.value === "saveAndContinue"){
|
|
this.tableService.addOrUpdate(this.updateParams,this.currentId===-1).then((res)=>{
|
|
this.$message.success("新增成功！");
|
|
this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]"} as any
|
|
})
|
|
}else if(data.value === "cancel"){
|
|
this.updateParams = {} as any;
|
|
this.handleClose();
|
|
}
|
|
}
|
|
|
|
// 重置数据
|
|
public reset(){
|
|
this.params = {
|
|
name:null,
|
|
chargeDeptId:null,
|
|
pageNum:1,
|
|
pageSize:20,
|
|
} as any;
|
|
}
|
|
|
|
|
|
|
|
public showUpdateModel(data?,isRead?){
|
|
if(!data){
|
|
this.currentId = -1;
|
|
this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]"} as any
|
|
}else{
|
|
this.currentId = data.id;
|
|
this.updateParams = Object.assign({bottomHeight:0,topHeight:0,geoJson:"[]"},data);
|
|
this.isReadonly = !!isRead;
|
|
this.buildFormOptions();
|
|
}
|
|
this.showUpdate = true
|
|
}
|
|
|
|
public handleClose(){
|
|
this.showUpdate = false;
|
|
this.currentId = -1;
|
|
this.isReadonly = false;
|
|
}
|
|
|
|
|
|
public toggleAll() {
|
|
(this.$refs.multipleTable as any).toggleAllSelection();
|
|
}
|
|
public selectAll(){
|
|
if(!this.selectData.length){
|
|
this.toggleAll()
|
|
}else{
|
|
this.tableData.datas.forEach((item,index)=>{
|
|
const find = this.selectData.find((data:any)=>data.userId === item.userId);
|
|
if(!find){
|
|
(this.$refs.multipleTable as any).toggleRowSelection(item);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
public handleSelectionChange(data){
|
|
this.selectData = data;
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped src="../../common.component.scss"></style>
|