guangyin
/
hbt-prevention-ui
forked from xxhjsb/hbt-prevention-ui
1
0
Fork 0
Code Pull Requests Activity

feat:新增风险区域逻辑

master^2
吴延福 2023-06-09 11:01:35 +08:00
parent 9d7c8d661c
commit 043bac22f2
12 changed files with 555 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.env.development
View File

@ -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"

1
package.json
View File

@ -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",

3
src/App.vue
View File

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

280
src/components/draw.component.vue
View File

@ -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(features);
const center = turf.centerOfMass(featureCollection);
this.map.flyTo({center:center.geometry.coordinates,zoom:12})
const featureCollection = turf.featureCollection(this.positions);
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-size": 24,
"text-allow-overlap": true
"text-field": ["get", "name"],
"text-size": [
'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,39 +304,61 @@ export default class DrawComponent extends Vue {
this.viewModel = "area"
}
}
// 点击绘制
public drawCallBack(){
if(!this.map){
this.$message.error("地图未初始化完成，请稍后再试")
return
}
if(this.hasInitDraw){
this.$message.error("绘制工具已打开请点击地图右上角进行绘制")
return
}
this.map.addControl(this.draw);
if(this.positions.length){
this.removeLayer()
this.positions.forEach(feature=>{
this.draw.add(feature)
})
}
this.hasInitDraw = true;
}
public destoryDraw(){
this.map.removeControl(this.draw);
this.hasInitDraw = false;
}
// 点击保存
public doSave(){
if(this.updateParams.topHeight<this.updateParams.bottomHeight){
this.$message.error("顶部高度不能小于底部高度")
return
}
if(!this.positions.length){
this.$message.error("请绘制地图位置信息");
return
}
this.positions.forEach(feature=>{
feature.properties = this.updateParams
})
this.updateParams.geoJson = JSON.stringify(this.positions);
this.params = this.updateParams;
if(this.fromList){
this.viewModel = "list";
this.destoryDraw();
}else{
this.visible = false;
}
}
public callback(action){
if(action.value==="draw"){
if(!this.map){
this.$message.error("地图未初始化完成，请稍后再试")
return
}
if(this.hasInitDraw){
this.$message.error("绘制工具已打开请点击地图右上角进行绘制")
return
}
this.map.addControl(this.draw);
this.hasInitDraw = true;
this.drawCallBack();
}else if(action.value==="save"){
if(this.updateParams.topHeight<this.updateParams.bottomHeight){
this.$message.error("顶部高度不能小于底部高度")
return
}
if(!this.positions.length){
this.$message.error("请绘制地图位置信息");
return
}
this.positions.forEach(feature=>{
feature.properties = this.updateParams
})
this.updateParams.geoJson = JSON.stringify(this.positions);
if(this.fromList){
this.viewModel = "list"
}else{
this.visible = false;
}
}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;

11
src/service/area.service.ts
View File

@ -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{

13
src/service/unit.service.ts
View File

@ -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)
}
}
}

21
src/store/index.ts
View File

@ -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: {
},

33
src/views/blank.component.vue
View File

@ -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>

9
src/views/common.component.scss
View File

@ -28,6 +28,9 @@
text-decoration: underline;
}
}
.el-dialog__wrapper,.v-modal{
z-index: 99 !important;
}
.el-tree-node__content {
height: 39px;
@ -39,9 +42,9 @@
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background: #409EFF ;
background: #409EFF;
border-radius: 4px;
color: #FFF ;
color: #FFF;
}
.td-content {
@ -73,7 +76,7 @@
.model-box {
position: fixed;
inset: 40px 40px 40px 240px;
z-index: 2006;
z-index: 999;
.mask {
position: fixed;

327
src/views/risk/area/area.component.vue
View File

@ -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,176 +70,164 @@ export default class AreaManagerComponent extends BaseRecordComponent<any> {
value:"reverse"
}];
// 搜索条件表单
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 formOptions:FormOption<BtnOption>[] = [];
public showUpdate = false;
public currentId = -1;
public updateParams = {} as any;
// 新增/更新表单
public updateOptions:FormOption<BtnOption>[] = [{
name:"区域编号",
key:"number",
type:"text",
showError:false,
width:"calc(50% - 20px)",
require:true
},{
name:"区域名称",
key:"name",
type:"text",
showError:false,
width:"calc(50% - 20px)",
require:true
},{
name:"责任部门",
key:"chargeDeptId",
format:"chargeDeptName",
type:"select",
width:"calc(50% - 20px)",
require:true,
showError:false,
datas:[{
name:"部门1",
value:0
},{
name:"部门2",
value:1
}]
},{
name:"责任人",
key:"chargeUserId",
format:"chargeUserName",
type:"select",
width:"calc(50% - 20px)",
require:true,
showError:false,
datas:[{
name:"人员1",
value:0
},{
name:"人员2",
value:1
}]
},{
name:"属于重大危险源",
key:"majorHazardFlag",
type:"radio",
width:"calc(50% - 20px)",
require:true,
showError:false,
datas:[{
name:"否",
value:0
},{
name:"是",
value:1
}]
},{
name:"重大危险源名称",
key:"majorHazardName",
hide:this.updateParams.majorHazardFlag,
type:"text",
width:"calc(50% - 20px)",
require:true,
showError:false,
},{
name:"重大危险源等级",
key:"majorHazardLevel",
type:"select",
hide:this.updateParams.majorHazardFlag,
width:"calc(50% - 20px)",
require:true,
showError:false,
datas:[{
name:"一级",
value:1
},{
name:"二级",
value:2
},{
name:"三级",
value:3
},{
name:"四级",
value:4
},{
name:"不涉及",
value:5
}]
},{
type:"btn",
name:"区域绘制",
width:"calc(50% - 20px)",
btn:[{
name:"开始绘制",
value:"draw",
type:"primary"
}]
}];
public updateOptions:FormOption<BtnOption>[] = [];
public showDraw = false;
public drawModel = "list";
public isReadonly = false;
public updateActions = [{
name:"取消",
value:"cancel"
},{
name:"保存并继续添加",
value:"saveAndContinue",
type:"primary"
},{
name:"保存",
value:"submit",
type:"primary"
}];
public updateActions:BtnOption[] = [];
public selectData = [];
@Watch("$store.state.deptList",{immediate:true,deep:true})
onChanges(){
this.buildFormOptions()
}
created(){
}
public getDeptList(){
public buildFormOptions(){
this.updateOptions = [{
name:"区域编号",
key:"number",
type:"text",
showError:false,
width:"calc(50% - 20px)",
require:true
},{
name:"区域名称",
key:"name",
type:"text",
showError:false,
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",
format:"chargeUserName",
type:"select",
width:"calc(50% - 20px)",
require:true,
showError:false,
datas:this.$store.state.userList
},{
name:"属于重大危险源",
key:"majorHazardFlag",
type:"radio",
width:"calc(50% - 20px)",
require:true,
showError:false,
datas:this.$store.state.common_yes_no
},{
name:"重大危险源名称",
key:"majorHazardName",
hide:!this.updateParams.majorHazardFlag,
type:"text",
width:"calc(50% - 20px)",
require:true,
showError:false,
},{
name:"重大危险源等级",
key:"majorHazardLevel",
type:"select",
hide:!this.updateParams.majorHazardFlag,
width:"calc(50% - 20px)",
require:true,
showError:false,
datas:[{
name:"一级",
value:1
},{
name:"二级",
value:2
},{
name:"三级",
value:3
},{
name:"四级",
value:4
},{
name:"不涉及",
value:5
}]
},{
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
},{
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:"deptName"});
this.tableColumn.push({name:'责任人',key:"person"});
this.tableColumn.push({name:'是否属于重大危险源',key:"isDangrous"});
this.tableColumn.push({name:'绘制情况',key:"status",render:(data)=>{
if(data.status==0){
this.tableColumn.push({name:'区域名称',key:"name"});
this.tableColumn.push({name:'责任部门',key:"chargeDeptName"});
this.tableColumn.push({name:'责任人',key:"chargeUserName"});
this.tableColumn.push({name:'是否属于重大危险源',key:"majorHazardFlag",render:(data)=>{
return this.$store.state.yesNoMap[data.majorHazardFlag]
}});
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[6].hide = data;
this.updateOptions[5].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){
if(id==-1){
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.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>

8
src/views/risk/areaUnit.component.html
View File

@ -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(0)">修改</el-button>
<el-button type="text" @click="showUpdateModel(scope.row,true)">查看</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>

210
src/views/risk/unit/unit.component.vue
View File

@ -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>[] = [{
name:"单元名称",
key:"unitId",
type:"text",
},{
name:"责任部门",
key:"deptId",
type:"select",
datas:[{
name:"部门1",
value:0
},{
name:"部门2",
value:1
}]
}];
public formOptions:FormOption<BtnOption>[] = [];
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:[{
name:"区域1",
value:0
},{
name:"区域2",
value:1
}]
datas:this.areaList
},{
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",
type:"select",
key:"chargeDeptId",
format:"chargeDeptName",
type:"treeSelect",
width:"calc(50% - 20px)",
require:true,
datas:[{
name:"部门1",
value:0
},{
name:"部门2",
value:1
}]
expandLevel:Infinity,
showError:false,
datas:this.$store.state.deptTreeList
},{
name:"责任人",
key:"person",
key:"chargeUserId",
type:"select",
width:"calc(50% - 20px)",
require:true,
datas:[{
name:"人员1",
value:0
},{
name:"人员2",
value:1
}]
datas:this.$store.state.userList
},{
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"
}]
}];
public showDraw = false;
public drawModel = "list";
public updateActions = [{
name:"取消",
value:"cancel"
},{
name:"保存并继续添加",
value:"saveAndContinue",
type:"primary"
},{
name:"保存",
value:"save",
type:"primary"
}];
public selectData = [];
created(){
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:"index"});
this.tableColumn.push({name:'风险分析单元',key:"deptName"});
this.tableColumn.push({name:'责任部门',key:"deptName"});
this.tableColumn.push({name:'责任人',key:"person"});
this.tableColumn.push({name:'绘制情况',key:"status",render:(data)=>{
if(data.status==0){
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>"
@ -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){
if(id!==-1){
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.currentId = id;
this.showUpdate = true
}
public handleClose(){
this.showUpdate = false;
this.currentId = -1;
this.isReadonly = false;
}