Merge branch 'wuyanfu'

.env.development

@@ -5,12 +5,12 @@ VUE_APP_TITLE = 汉邦唐全真数字服务平台
 # 网关地址
 VUE_APP_GATEWAY_URL="/dev-api"
 # 服务地址
-VUE_APP_BASE_API_URL="http://119.45.158.12:8081"
+VUE_APP_BASE_API_URL="http://192.168.2.3:8081/"
 # 服务前-- 请严格遵守格式  不允许换行
-VUE_APP_SERVICE_PREFIX= '{"knowledge":"/knowledge","system":"/system"}'
+VUE_APP_SERVICE_PREFIX= '{"system":"/system","prevention":"/prevention-yx"}'
 # 是否显示全部菜单
 VUE_APP_ALL_MENU = false
 # 微前端地址
 VUE_APP_REMOTES_URL="http://192.168.1.20:8090"
 # 当前应用部署地址
-VUE_APP_EXPOSES_URL=""
+VUE_APP_EXPOSES_URL="http://192.168.1.20:8090"

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mapbox/mapbox-gl-draw": "^1.4.1",
+    "@riophae/vue-treeselect": "^0.4.0",
     "@turf/turf": "^6.5.0",
     "@types/webpack-env": "^1.18.0",
     "axios": "^1.3.4",

src/App.vue

@@ -24,6 +24,9 @@ body{
     height: 100%;
   }
 }
+.v-modal{
+        z-index: 98 !important;
+    }
 ul,li{
   list-style: none;
 }

src/components/draw.component.vue

@@ -53,81 +53,7 @@ import * as turf from '@turf/turf'
     }
 })
 export default class DrawComponent extends Vue {
-    @PropSync("model")
-    public viewModel:string;
-    @PropSync("show",{
-        required:true,
-        default:true
-    })
-    public visible:boolean;
-    @PropSync("data",{
-        required:true,
-    })
-    public params!:any;
 
-    public fromList = false;
-
-    @Watch("params",{immediate:true,deep:true})
-    onChanges(newVal,odlVal){
-        console.log(this.draw)
-        this.updateParams = JSON.parse(JSON.stringify(newVal))
-        if(newVal.geoJson){
-            this.positions = JSON.parse(newVal.geoJson);
-            this.positions.forEach(feature=>{
-                this.draw.add(feature)
-            })
-            const center = turf.centerOfMass(turf.featureCollection(this.positions));
-            this.map.flyTo({center:center.geometry.coordinates,zoom:17})
-        }
-    }
-
-    @Watch("viewModel",{immediate:true,deep:true})
-    onModelChanges(newVal){
-        if(newVal==="list"){
-            this.fromList = true;
-        }
-       this.buildUpdate()
-    }
-
-    public modelMap = {
-        list:"批量绘制",
-        area:"区域绘制",
-        unit:"单元绘制"
-    }
-
-    public listForm = [{
-        name:"关键词",
-        key:"keyword",
-        width:"100%",
-        type:"text",
-        placeholder:"请输入名称关键词",
-    }];
-    public listParams = {
-        keyword:""
-    }
-
-    public map:any;
-    public center = [-91.874, 42.76];
-
-    public updateParams = {} as any;
-
-    public positions = [] as any;
-
-    public hasInitDraw = false;
-    
-    public draw = new MapboxDraw({
-        displayControlsDefault: false,
-        // Select which mapbox-gl-draw control buttons to add to the map.
-        controls: {
-            polygon: true,
-            trash: true
-        },
-        // Set mapbox-gl-draw to draw by default.
-        // The user does not have to click the polygon control button first.
-        defaultMode: 'draw_polygon'
-    })
-    public options = [];
-    public actions = [];
     public treeData = [{
           label: '一级 1',
           value: '123',
@@ -165,8 +91,97 @@ export default class DrawComponent extends Vue {
           }]
      }];
 
+    public modelMap = {
+        list:"批量绘制",
+        area:"区域绘制",
+        unit:"单元绘制"
+    }
+
+    public listForm = [{
+        name:"关键词",
+        key:"keyword",
+        width:"100%",
+        type:"text",
+        placeholder:"请输入名称关键词",
+    }];
+    public listParams = {
+        keyword:""
+    }
+
+    public map:any;
+    public center = [-91.874, 42.76];
+
+    public updateParams = {} as any;
+
+    public positions = [] as any;
+
+    public hasInitDraw = false;
+    public options = [];
+    public actions = [];
+    
+    public draw = new MapboxDraw({
+        displayControlsDefault: false,
+        // Select which mapbox-gl-draw control buttons to add to the map.
+        controls: {
+            polygon: true,
+            trash: true
+        },
+        // Set mapbox-gl-draw to draw by default.
+        // The user does not have to click the polygon control button first.
+        defaultMode: 'draw_polygon'
+    })
+    @PropSync("model")
+    public viewModel:string;
+    @PropSync("show",{
+        required:true,
+        default:true
+    })
+    public visible:boolean;
+    @PropSync("data",{
+        required:true,
+    })
+    public params!:any;
+
+    public fromList = false;
+
+    @Watch("params",{immediate:true,deep:true})
+    onChanges(newVal,odlVal){
+        this.updateParams = JSON.parse(JSON.stringify(newVal))
+        if(newVal.geoJson){
+            this.positions = JSON.parse(newVal.geoJson);
+
+            if(this.positions.length){
+                this.flyToCenter(16)
+            }
+        }
+    }
+
+    @Watch("viewModel",{immediate:true,deep:true})
+    onModelChanges(newVal){
+        if(newVal==="list"){
+            this.fromList = true;
+            this.positions = this.getAllFeatures(this.treeData);
+            if(this.positions.length){
+                this.addAllPolygon();
+            }
+        }
+       this.buildUpdate()
+    }
+
     created(){
-        this.positions = [] as any;
+        // this.positions = [] as any;
+    }
+
+    public flyToCenter(zoom){
+        if(!this.map ){
+            setTimeout(()=>{
+                this.flyToCenter(zoom)
+            })
+            return
+        }
+        const center = turf.centerOfMass(turf.featureCollection(this.positions));
+        this.map.flyTo({center: center.geometry.coordinates, zoom: zoom});
+        this.addAllPolygon();
     }
 
     public getMap(map){
@@ -192,10 +207,7 @@ export default class DrawComponent extends Vue {
     }
 
     public addAllPolygon(){
-        const features = this.getAllFeatures(this.treeData);
+        const featureCollection = turf.featureCollection(this.positions);
-        const featureCollection = turf.featureCollection(features);
-        const center = turf.centerOfMass(featureCollection);
-        this.map.flyTo({center:center.geometry.coordinates,zoom:12})
         if(!this.map.getSource('allDataSource')){
             this.map.addSource("allDataSource", {
                 type: "geojson",
@@ -215,16 +227,27 @@ export default class DrawComponent extends Vue {
             this.map.addLayer({
                 "id": "textLayer",
                 "type": "symbol",
-                "source": "polygonSource",
+                "source": "allDataSource",
                 "layout": {
-                    "text-field": ["get", "text"],
+                    "text-field": ["get", "name"],
-                    "text-size": 24,
+                    "text-size": [
-                    "text-allow-overlap": true
+                    'interpolate',
+                    // Set the exponential rate of change to 0.5
+                    ['exponential', 0.5],
+                    ['zoom'],
+                    // When zoom is 15, buildings will be beige.
+                    15,
+                    12,
+                    // When zoom is 18 or higher, buildings will be yellow.
+                    18,
+                    24,
+                    ],
+                    // "text-allow-overlap": true
                 },
                 "paint": {
                     "text-color": "#FFF",
                     "text-halo-color": "#000",
-                    "text-halo-width": 5
+                    "text-halo-width": 10
                 }
             })
         }else{
@@ -233,6 +256,15 @@ export default class DrawComponent extends Vue {
         
     }
 
+    public removeLayer(){
+        if(!this.map){
+            return
+        }
+        this.map.removeLayer("allDataLayer")
+        this.map.removeLayer("textLayer")
+        this.map.removeSource("allDataSource")
+    }
+
     public drawCallback(e){
         if(e.type ==="draw.create"){
             this.positions = this.positions.concat(e.features)
@@ -272,11 +304,8 @@ export default class DrawComponent extends Vue {
             this.viewModel = "area"
         }
     }
-
+    // 点击绘制
-    
+    public drawCallBack(){
-
-    public callback(action){
-        if(action.value==="draw"){
         if(!this.map){
             this.$message.error("地图未初始化完成，请稍后再试")
             return
@@ -286,8 +315,22 @@ export default class DrawComponent extends Vue {
             return
         }
         this.map.addControl(this.draw);
+        if(this.positions.length){
+            this.removeLayer()
+            this.positions.forEach(feature=>{
+                this.draw.add(feature)
+            })
+        }
         this.hasInitDraw = true;
-        }else if(action.value==="save"){
+    }
+
+    public destoryDraw(){
+        this.map.removeControl(this.draw);
+        this.hasInitDraw = false;
+    }
+
+    // 点击保存
+    public doSave(){
         if(this.updateParams.topHeight<this.updateParams.bottomHeight){
             this.$message.error("顶部高度不能小于底部高度")
             return
@@ -300,11 +343,22 @@ export default class DrawComponent extends Vue {
             feature.properties = this.updateParams
         })
         this.updateParams.geoJson = JSON.stringify(this.positions);
+        this.params = this.updateParams;
         if(this.fromList){
-                this.viewModel = "list"
+            this.viewModel = "list";
+            this.destoryDraw();
+            
         }else{
             this.visible = false;
         }
+    }
+
+    
+
+    public callback(action){
+        if(action.value==="draw"){
+            this.drawCallBack();
+        }else if(action.value==="save"){
         }else {
             if(this.fromList){
                 this.viewModel = "list";
@@ -329,7 +383,7 @@ export default class DrawComponent extends Vue {
             placeholder:"请输入区域名称",
         },{
             name:"单元名称",
-            key:"unitName",
+            key:"name",
             hide:this.viewModel === "area",
             width:"100%",
             disable:true,
@@ -402,7 +456,7 @@ export default class DrawComponent extends Vue {
     display: flex;
     flex-direction: column;
     position: relative;
-    z-index: 99;
+    z-index: 1000;
     .title{
         height: 68px;
         display: flex;

src/service/area.service.ts

@@ -7,23 +7,18 @@ export default class AreaService extends BaseService<any>{
     }
     // 查询列表
     public selectByPage(params: any):Promise<AxiosResponse<ActionResult<any>>>{
-        const url = this.prefix.system+'/user/list';
+        const url = this.prefix.prevention+'/risk/area/list';
         return this.get(url,params,true)
     }
     // 批量删除
     public deleteByIds(params):Promise<AxiosResponse<ActionResult<any>>>{
-        const url = this.prefix.system+'/user/list';
+        const url = this.prefix.prevention+'/user/list';
         return this.deleteBatch(url,params,{},true)
     }
-    // 查询详情
-    public selectById(id:any,showLoading?:boolean): Promise<AxiosResponse<ActionResult<any>>> {
-        const url = this.prefix.system+'/user/list/'+id;
-        return this.get(url,null,showLoading)
-    }
 
     // 新增或更新
     public addOrUpdate(params: any, add: boolean,showLoading?:boolean): Promise<AxiosResponse<ActionResult<any>>>{
-        const url = this.prefix.system+'/user/list';
+        const url = this.prefix.prevention+'/risk/area';
         if(add){
             return this.post(url,params,{},showLoading)
         }else{

src/service/unit.service.ts

@@ -6,11 +6,22 @@ export default class UnitService extends BaseService<any>{
         super()
     }
     public selectByPage(params: any):Promise<AxiosResponse<ActionResult<any>>>{
-        const url = this.prefix.system+'/user/list';
+        const url = this.prefix.prevention+'/risk/unit/list';
         return this.get(url,params,true)
     }
     public deleteByIds(params):Promise<AxiosResponse<ActionResult<any>>>{
         const url = this.prefix.system+'/user/list';
         return this.deleteBatch(url,params,{},true)
     }
+
+
+    // 新增或更新
+    public addOrUpdate(params: any, add: boolean,showLoading?:boolean): Promise<AxiosResponse<ActionResult<any>>>{
+        const url = this.prefix.prevention+'/risk/unit';
+        if(add){
+            return this.post(url,params,{},showLoading)
+        }else{
+            return this.put(url,params,{},showLoading)
+        }
+    }
 }

src/store/index.ts

@@ -5,10 +5,31 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    deptList:[],
+    deptTreeList:[],
+    userList:[],
+    common_yes_no:[],
+    yesNoMap:{
+      0:"否",
+      1:"是"
+    }
   },
   getters: {
   },
   mutations: {
+
+    setDeptList(state,data){
+      state.deptList = data;
+    },
+    setUserList(state,data){
+      state.userList = data;
+    },
+    setDeptTreeList(state,data){
+      state.deptTreeList = data;
+    },
+    set_common_yes_no(state,data){
+      state.common_yes_no = data;
+    }
   },
   actions: {
   },

src/views/blank.component.vue

@@ -2,8 +2,41 @@
     <router-view></router-view>
 </template>
 <script lang="ts">
+import SystemService from 'hbt-common/service/system.service';
 import { Component,Vue } from 'vue-property-decorator';
 @Component
 export default class BlankComponent extends Vue {
+
+    public systemService = new SystemService()
+    created(){
+        Promise.all([
+            this.systemService.getDeptTree(),
+            this.systemService.getDeptList(),
+            this.systemService.getUserList({pageSize:0}),
+            this.systemService.getDictData("common_yes_no")
+        ]).then(((results:any)=>{
+            this.$store.commit("setDeptTreeList",results[0].data);
+
+            this.$store.commit("setDeptList",results[1].data.map((item)=>{
+                return {
+                    name:item.deptName,
+                    value:item.deptId
+                }
+            }))
+
+            this.$store.commit("setUserList",results[2].data.datas.map((item)=>{
+                return {
+                    name:item.nickName,
+                    value:item.userId
+                }
+            }))
+            this.$store.commit("set_common_yes_no",results[3].data.map(item=>{
+                return {
+                    name:item.dictLabel,
+                    value:isNaN(+item.dictValue)?item.dictValue:+item.dictValue
+                }
+            }))
+        }))
+    }
 }
 </script>

src/views/common.component.scss

@@ -28,6 +28,9 @@
             text-decoration: underline;
         }
     }
+    .el-dialog__wrapper,.v-modal{
+        z-index: 99 !important;
+    }
 
     .el-tree-node__content {
         height: 39px;
@@ -73,7 +76,7 @@
     .model-box {
         position: fixed;
         inset: 40px 40px 40px 240px;
-        z-index: 2006;
+        z-index: 999;
 
         .mask {
             position: fixed;

src/views/risk/area/area.component.vue

@@ -1,6 +1,6 @@
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
+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"
@@ -70,39 +70,38 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
         value:"reverse"
     }];
     // 搜索条件表单
-    public formOptions:FormOption<BtnOption>[] = [{
+    public formOptions:FormOption<BtnOption>[] = [];
-        name:"区域名称",
-        key:"name",
-        type:"text"
-    },{
-        name:"责任部门",
-        key:"chargeDeptId",
-        type:"select",
-        datas:[{
-            name:"部门1",
-            value:0
-        },{
-            name:"部门2",
-            value:1
-        }]
-    },{
-        name:"是否重大危险源",
-        key:"majorHazardFlag",
-        type:"select",
-        datas:[{
-            name:"否",
-            value:0
-        },{
-            name:"是",
-            value:1
-        }]
-    }];
 
     public showUpdate = false;
     public currentId = -1;
     public updateParams = {}  as any;
     // 新增/更新表单
-    public updateOptions:FormOption<BtnOption>[] = [{
+    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 buildFormOptions(){
+        this.updateOptions = [{
             name:"区域编号",
             key:"number",
             type:"text",
@@ -120,17 +119,12 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
             name:"责任部门",
             key:"chargeDeptId",
             format:"chargeDeptName",
-        type:"select",
+            type:"treeSelect",
             width:"calc(50% - 20px)",
             require:true,
+            expandLevel:Infinity,
             showError:false,
-        datas:[{
+            datas:this.$store.state.deptTreeList
-            name:"部门1",
-            value:0
-        },{
-            name:"部门2",
-            value:1
-        }]
         },{
             name:"责任人",
             key:"chargeUserId",
@@ -139,13 +133,7 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
             width:"calc(50% - 20px)",
             require:true,
             showError:false,
-        datas:[{
+            datas:this.$store.state.userList
-            name:"人员1",
-            value:0
-        },{
-            name:"人员2",
-            value:1
-        }]
         },{
             name:"属于重大危险源",
             key:"majorHazardFlag",
@@ -153,17 +141,11 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
             width:"calc(50% - 20px)",
             require:true,
             showError:false,
-        datas:[{
+            datas:this.$store.state.common_yes_no
-            name:"否",
-            value:0
-        },{
-            name:"是",
-            value:1
-        }]
         },{
             name:"重大危险源名称",
             key:"majorHazardName",
-        hide:this.updateParams.majorHazardFlag,
+            hide:!this.updateParams.majorHazardFlag,
             type:"text",
             width:"calc(50% - 20px)",
             require:true,
@@ -172,7 +154,7 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
             name:"重大危险源等级",
             key:"majorHazardLevel",
             type:"select",
-        hide:this.updateParams.majorHazardFlag,
+            hide:!this.updateParams.majorHazardFlag,
             width:"calc(50% - 20px)",
             require:true,
             showError:false,
@@ -199,47 +181,53 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
             btn:[{
                 name:"开始绘制",
                 value:"draw",
+                height:"36px",
+                hide:this.isReadonly,
+                size:"small",
+                icon:"el-icon-edit-outline",
                 type:"primary"
             }]
         }];
 
-
+        this.updateActions = [{
-    public showDraw = false;
-
-    public drawModel = "list";
-
-
-    public updateActions = [{
             name:"取消",
             value:"cancel"
         },{
             name:"保存并继续添加",
             value:"saveAndContinue",
+            hide:this.currentId!=-1,
             type:"primary"
         },{
             name:"保存",
             value:"submit",
             type:"primary"
         }];
-
+        this.formOptions=[{
-    public selectData = [];
+            name:"区域名称",
-    
+            key:"name",
-
+            type:"text"
-    created(){
+        },{
-
+            name:"责任部门",
-    }
+            key:"chargeDeptId",
-
+            type:"select",
-    public getDeptList(){
+            datas:this.$store.state.deptList
-
+        },{
+            name:"是否重大危险源",
+            key:"majorHazardFlag",
+            type:"select",
+            datas:this.$store.state.common_yes_no
+        }]
     }
 
     public buildTable(){
-        this.tableColumn.push({name:'区域名称',key:"areaName"});
+        this.tableColumn.push({name:'区域名称',key:"name"});
-        this.tableColumn.push({name:'责任部门',key:"deptName"});
+        this.tableColumn.push({name:'责任部门',key:"chargeDeptName"});
-        this.tableColumn.push({name:'责任人',key:"person"});
+        this.tableColumn.push({name:'责任人',key:"chargeUserName"});
-        this.tableColumn.push({name:'是否属于重大危险源',key:"isDangrous"});
+        this.tableColumn.push({name:'是否属于重大危险源',key:"majorHazardFlag",render:(data)=>{
-        this.tableColumn.push({name:'绘制情况',key:"status",render:(data)=>{
+            return this.$store.state.yesNoMap[data.majorHazardFlag]
-            if(data.status==0){
+        }});
+        this.tableColumn.push({name:'绘制情况',render:(data)=>{
+            if(data.geoJson==='[]' || !data.geoJson){
                 return "<span class='noDraw'>未绘制</span>"
             }else{
                 return "<span>已绘制</span>"
@@ -248,9 +236,10 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
     }
 
     public callback(data,item?){
+        // 新增编辑选择是否重大危险源
         if(item && item.key === "majorHazardFlag"){
-            this.updateOptions[5].hide = data;
+            this.updateOptions[5].hide = !data;
-            this.updateOptions[6].hide = data;
+            this.updateOptions[6].hide = !data;
         }
         // 查询
         if(data.value==="search"){
@@ -265,23 +254,39 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
         }else if(data.value === "selectAll"){
             this.selectAll()
         }else if(data.value === "add"){
-            this.showUpdateModel(-1)
+            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 = "area";
             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"){
-            console.log(this.updateOptions)
+            this.updateParams = {} as any;
+            this.handleClose();
         }
     }
     // 重置数据
     public reset(){
         this.params = {
-            name:"",
+            name:null,
             chargeDeptId:null,
             majorHazardFlag:null,
             pageNum:1,
@@ -291,17 +296,23 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
 
 
 
-    public showUpdateModel(id){
+    public showUpdateModel(data?,isRead?){
-        if(id==-1){
+        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.buildFormOptions();
+            this.isReadonly = !!isRead
         }
-        this.currentId = id;
         this.showUpdate = true
     }
 
     public handleClose(){
         this.showUpdate = false;
-        this.updateOptions.forEach(item=>item.showError = false)
+        this.currentId = -1;
+        this.isReadonly = false;
     }
 
 
@@ -324,6 +335,10 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
     public handleSelectionChange(data){
         this.selectData = data;
     }
+
+
+    mounted(){
+    }
 }
 </script>
 <style lang="scss" scoped src="../../common.component.scss"></style>

src/views/risk/areaUnit.component.html

@@ -22,8 +22,8 @@
                     </template>
                     <el-table-column label="操作" width="200">
                         <template slot-scope="scope">
-                            <el-button type="text" @click="showUpdateModel(scope.row.userId)">查看</el-button>
+                            <el-button type="text" @click="showUpdateModel(scope.row,true)">查看</el-button>
-                            <el-button type="text"  @click="showUpdateModel(0)">修改</el-button>
+                            <el-button type="text"  @click="showUpdateModel(scope.row)">修改</el-button>
                             <el-button type="text" @click="deleteData([scope.row])">删除</el-button>
                             <el-button type="text">二维码</el-button>
                         </template>
@@ -38,9 +38,9 @@
         <DrawComponent :model.sync="drawModel" :data.sync="updateParams" :show.sync="showDraw"></DrawComponent>
     </div>
 
-    <el-dialog  :close-on-click-modal="false" :title="currentId>0?'详情':currentId===-1?'新增':'编辑'" :visible.sync="showUpdate" width="952px"
+    <el-dialog  :close-on-click-modal="false" :title="isReadonly?'详情':currentId===-1?'新增':'编辑'" :visible.sync="showUpdate" width="952px"
         :before-close="handleClose">
-        <FormComponent :options="updateOptions" :isReadonly="currentId>0" labelWidth="110px" labelAlign="right" :data.sync="updateParams"
+        <FormComponent :options="updateOptions" :isReadonly="isReadonly" labelWidth="110px" labelAlign="right" :data.sync="updateParams"
             @actionCallback="callback" :actions="updateActions" :full-btn="true" @change="callback"
             btn-position="center"></FormComponent>
     </el-dialog>

src/views/risk/unit/unit.component.vue

@@ -9,6 +9,7 @@ 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:{
@@ -20,8 +21,12 @@ import DrawComponent from '@/components/draw.component.vue';
 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",
@@ -58,84 +63,73 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
         name:"反向选择",
         value:"reverse"
     }];
-    public formOptions:FormOption<BtnOption>[] = [{
+    public formOptions:FormOption<BtnOption>[] = [];
-        name:"单元名称",
-        key:"unitId",
-        type:"text",
-    },{
-        name:"责任部门",
-        key:"deptId",
-        type:"select",
-        datas:[{
-            name:"部门1",
-            value:0
-        },{
-            name:"部门2",
-            value:1
-        }]
-    }];
 
     public showUpdate = false;
     public currentId = -1;
     public updateParams = {}  as any;
-    public updateOptions:FormOption<BtnOption>[] = [{
+    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:[{
+        datas:this.areaList
-            name:"区域1",
-            value:0
-        },{
-            name:"区域2",
-            value:1
-        }]
     },{
         name:"区域编号",
-        key:"no",
+        key:"areaNo",
         type:"text",
+        disable:true,
         width:"calc(50% - 20px)",
-        require:true
     },{
         name:"单元编号",
-        key:"no",
+        key:"number",
         type:"text",
         width:"calc(50% - 20px)",
         require:true
     },{
         name:"单元名称",
-        key:"unitName",
+        key:"name",
         type:"text",
         width:"calc(50% - 20px)",
         require:true
     },{
         name:"责任部门",
-        key:"deptId",
+        key:"chargeDeptId",
-        type:"select",
+        format:"chargeDeptName",
+        type:"treeSelect",
         width:"calc(50% - 20px)",
         require:true,
-        datas:[{
+        expandLevel:Infinity,
-            name:"部门1",
+        showError:false,
-            value:0
+        datas:this.$store.state.deptTreeList
-        },{
-            name:"部门2",
-            value:1
-        }]
     },{
         name:"责任人",
-        key:"person",
+        key:"chargeUserId",
         type:"select",
         width:"calc(50% - 20px)",
         require:true,
-        datas:[{
+        datas:this.$store.state.userList
-            name:"人员1",
-            value:0
-        },{
-            name:"人员2",
-            value:1
-        }]
     },{
         type:"btn",
         name:"单元绘制",
@@ -143,42 +137,45 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
         btn:[{
             name:"开始绘制",
             value:"draw",
+            height:"36px",
+            hide:this.isReadonly,
+            size:"small",
+            icon:"el-icon-edit-outline",
             type:"primary"
         }]
     }];
 
-
+        this.updateActions = [{
-    public showDraw = false;
-
-    public drawModel = "list";
-
-
-    public updateActions = [{
             name:"取消",
             value:"cancel"
         },{
             name:"保存并继续添加",
             value:"saveAndContinue",
+            hide:this.currentId!=-1,
             type:"primary"
         },{
             name:"保存",
-        value:"save",
+            value:"submit",
             type:"primary"
         }];
-
+        this.formOptions=[{
-    public selectData = [];
+            name:"单元名称",
-
+            key:"name",
-    created(){
+            type:"text"
-
+        },{
+            name:"责任部门",
+            key:"chargeDeptId",
+            type:"select",
+            datas:this.$store.state.deptList
+        }]
     }
 
     public buildTable(){
-        this.tableColumn.push({name:'序号',key:"index"});
+        this.tableColumn.push({name:'风险分析单元',key:"name"});
-        this.tableColumn.push({name:'风险分析单元',key:"deptName"});
+        this.tableColumn.push({name:'责任部门',key:"chargeDeptName"});
-        this.tableColumn.push({name:'责任部门',key:"deptName"});
+        this.tableColumn.push({name:'责任人',key:"chargeUserName"});
-        this.tableColumn.push({name:'责任人',key:"person"});
+        this.tableColumn.push({name:'绘制情况',render:(data)=>{
-        this.tableColumn.push({name:'绘制情况',key:"status",render:(data)=>{
+            if(data.geoJson==='[]' || !data.geoJson){
-            if(data.status==0){
                 return "<span class='noDraw'>未绘制</span>"
             }else{
                 return "<span>已绘制</span>"
@@ -186,7 +183,34 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
         }});
     }
 
-    public callback(data){
+    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()
@@ -200,21 +224,41 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
         }else if(data.value === "selectAll"){
             this.selectAll()
         }else if(data.value === "add"){
-            this.showUpdateModel(-1)
+            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;
@@ -222,15 +266,23 @@ export default class UnitManagerComponent extends BaseRecordComponent<any> {
 
 
 
-    public showUpdateModel(id){
+    public showUpdateModel(data?,isRead?){
-        if(id!==-1){
+        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.currentId = id;
         this.showUpdate = true
     }
 
     public handleClose(){
         this.showUpdate = false;
+        this.currentId = -1;
+        this.isReadonly = false;
     }