机构管理、用户管理完成；火灾管理详情页显示，添加地图

guoshilong

2023-03-06 85cec9a000cae214496feaea25f71c66f5663c2a

 src/views/fire/fireSupplement.vue

@@ -1,57 +1,64 @@
<template>
  <basic-container>
    <el-card>
      <div slot="header" class="clearfix">
        <span>一、火灾基本信息</span>
      </div>
      <el-row>
        <el-col :span="12">
          <avue-form ref="form" v-model="form" :option="option"></avue-form>
        </el-col>
        <el-col :span="12">

        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>二、火灾调查信息</span>
      </div>
      <avue-form ref="formSupplement" v-model="formSupplement" :option="optionSupplement" @submit="submit">
        <!--经济损失-->
        <template slot="economicLoss">
          <avue-crud :option="economicOption" :data="economicData" v-model="economicForm"
                     @row-save="economicSave"
                     @row-update="economicUpdate"
                     @row-del="economicDel"
          ></avue-crud>
        </template>
        <!--受灾面积-->
        <template slot="damageArea">
          <avue-crud :option="damageAreaOption" :data="damageAreaData" v-model="damageAreaForm"
                     @row-save="damageAreaSave"
                     @row-update="damageAreaUpdate"
                     @row-del="damageAreaDel"></avue-crud>
        </template>
        <!--出动警力-->
        <template slot="policeResources">
          <avue-crud :option="policeResourcesOption" :data="policeResourcesData" v-model="policeResourcesForm"
                     @row-save="policeResourcesSave"
                     @row-update="policeResourcesUpdate"
                     @row-del="policeResourcesDel"
          ></avue-crud>
        </template>
      </avue-form>
    </el-card>
    <div style="margin-bottom: 1%">
      <el-card>
        <div slot="header" class="clearfix">
          <span>一、火灾基本信息</span>
          <el-button v-if="isDetail" size="small" @click="goToList">返回</el-button>
        </div>
        <el-row>
          <el-col :span="12">
            <avue-form ref="form" v-model="form" :option="option"></avue-form>
          </el-col>
          <el-col :span="12">
            <OpenLayersMap></OpenLayersMap>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div>
      <el-card>
        <div slot="header" class="clearfix">
          <span>二、火灾调查信息</span>
        </div>
        <avue-form ref="formSupplement" v-model="formSupplement" :option="optionSupplement" @submit="submit">
          <!--经济损失-->
          <template slot="economicLoss">
            <avue-crud :option="economicOption" :data="economicData" v-model="economicForm"
                       @row-save="economicSave"
                       @row-update="economicUpdate"
                       @row-del="economicDel"
            ></avue-crud>
          </template>
          <!--受灾面积-->
          <template slot="damageArea">
            <avue-crud :option="damageAreaOption" :data="damageAreaData" v-model="damageAreaForm"
                       @row-save="damageAreaSave"
                       @row-update="damageAreaUpdate"
                       @row-del="damageAreaDel"></avue-crud>
          </template>
          <!--出动警力-->
          <template slot="policeResources">
            <avue-crud :option="policeResourcesOption" :data="policeResourcesData" v-model="policeResourcesForm"
                       @row-save="policeResourcesSave"
                       @row-update="policeResourcesUpdate"
                       @row-del="policeResourcesDel"
            ></avue-crud>
          </template>
        </avue-form>
      </el-card>
    </div>
  </basic-container>
</template>

<script>
import axios from "@/router/axios";
import {add} from "@/views/fireSupplement/fireSupplement";
import {add} from "@/api/fireSupplement/fireSupplement";
import OpenLayersMap from "@/components/OpenLayersMap/index";

export default {
  name: "fireSupplieMent",
  components: {OpenLayersMap},
  props: ['info'],
  data() {
    let baseUrl = '/api/blade-system/region/lazy-tree?parentCode='
    return {
@@ -64,7 +71,8 @@
            label: '火灾编号',
            prop: 'no',
            span: 24,
            type: 'input'
            type: 'input',
            disabled: true,
          },
          {
            label: "行政区域",
@@ -224,6 +232,7 @@
          },
          {
            label: '刑事处罚人数',
            labelWidth: 120,
            prop: 'punishPerson',
            span: 12,
            type: 'input',
@@ -244,7 +253,7 @@
          },
          {
            label: '重伤人数',
            prop: 'SeriouslyInjuredPerson',
            prop: 'seriousInjuredPerson',
            span: 8,
            type: 'input',
            append: '人'
@@ -279,7 +288,7 @@
        column: [
          {
            label: '损失林木',
            prop:'lossForest',
            prop: 'lossForest',
            display: false,
            children: [
              {
@@ -601,10 +610,15 @@
      },
      policeResourcesData: [],
      policeResourcesForm: {},
      isDetail: false,
    }
  },
  created() {
    this.form = this.$route.params
    if (this.info) {
      this.initDetail()
    } else {
      this.form = this.$route.params
    }
  },
  methods: {
    submit(form, done) {
@@ -612,16 +626,19 @@
      form.economicLoss = this.economicData
      form.damageArea = this.damageAreaData
      form.policeResources = this.policeResourcesData
      add(form).then(res=>{
        if (res.data.code == 200){
      add(form).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.form.resetForm()
          this.$refs.formSupplement.resetForm()
          this.economicData = []
          this.damageAreaData = []
          this.policeResourcesData = []
          done();
        }else {
        } else {
          this.$message({
            type: "error",
            message: "操作失败!"
@@ -632,16 +649,16 @@
    },
    //经济损失表格增删改方法
    economicSave(form, done, loading) {
      let id = this.economicData.length +1
      let id = this.economicData.length + 1
      this.economicForm.id = id
      this.economicData.push(this.deepClone(this.economicForm))
      loading()
      done()
    },
    economicUpdate(row, index,done, loading) {
    economicUpdate(row, index, done, loading) {
      loading()
      this.economicData.forEach(e=>{
        if (e.id == row.id ){
      this.economicData.forEach(e => {
        if (e.id == row.id) {
          e.adultCommercialForest = row.adultCommercialForest
          e.adultEcologicalForest = row.adultEcologicalForest
          e.juvenileCommercialForest = row.juvenileCommercialForest
@@ -652,23 +669,23 @@
      done()
    },
    economicDel(row) {
      this.economicData = this.economicData.filter(e=>{
      this.economicData = this.economicData.filter(e => {
        return e.id != row.id
      })
    },

    //受灾面积表格增删改方法
    damageAreaSave(form, done, loading) {
      let id = this.damageAreaData.length +1
      let id = this.damageAreaData.length + 1
      this.damageAreaForm.id = id
      this.damageAreaData.push(this.deepClone(this.damageAreaForm))
      loading()
      done()
    },
    damageAreaUpdate(row, index,done, loading) {
    damageAreaUpdate(row, index, done, loading) {
      loading()
      this.damageAreaData.forEach(e=>{
        if (e.id == row.id ){
      this.damageAreaData.forEach(e => {
        if (e.id == row.id) {
          e.fireAreaSum = row.fireAreaSum

          e.fireCommercialForest = row.fireCommercialForest
@@ -686,23 +703,23 @@
      done()
    },
    damageAreaDel(row) {
      this.damageAreaData = this.damageAreaData.filter(e=>{
      this.damageAreaData = this.damageAreaData.filter(e => {
        return e.id != row.id
      })
    },

    //出动警力表格增删改方法
    policeResourcesSave(form, done, loading) {
      let id = this.policeResourcesData.length +1
      let id = this.policeResourcesData.length + 1
      this.policeResourcesForm.id = id
      this.policeResourcesData.push(this.deepClone(this.policeResourcesForm))
      loading()
      done()
    },
    policeResourcesUpdate(row, index,done, loading) {
    policeResourcesUpdate(row, index, done, loading) {
      loading()
      this.policeResourcesData.forEach(e=>{
        if (e.id == row.id ){
      this.policeResourcesData.forEach(e => {
        if (e.id == row.id) {
          e.peopleNumber = row.peopleNumber
          e.vehicleSum = row.vehicleSum
          e.carNumber = row.carNumber
@@ -713,14 +730,39 @@
      done()
    },
    policeResourcesDel(row) {
      this.policeResourcesData = this.policeResourcesData.filter(e=>{
      this.policeResourcesData = this.policeResourcesData.filter(e => {
        return e.id != row.id
      })
    },

    //初始化详情
    initDetail() {
      this.isDetail = this.info.isDetail

      this.form = this.info.formData
      this.formSupplement = this.info.formSupplementData
      this.option.detail = true
      this.optionSupplement.detail = true

      this.economicData = this.info.formSupplementData.economicLoss
      this.damageAreaData = this.info.formSupplementData.damageArea
      this.policeResourcesData = this.info.formSupplementData.policeResources

      this.economicOption.menu = false
      this.damageAreaOption.menu = false
      this.policeResourcesOption.menu = false
    },
    goToList() {
      this.isDetail = false
      this.$emit('goToList')
    }
  }
}
</script>

<style scoped>

.clearfix {
  display: flex;
  justify-content: space-between;
}
</style>