fix:政府站点修改

quanyawei

2023-09-21 78044879ff5f5b5966d594b51e9568fd57ed0e8a

fix:政府站点修改

 src/views/device/govMonitorPoint.vue

@@ -3,265 +3,109 @@
    <div class="tableList">

      <div class="tableListForm">

        <a-form-model layout="horizontal">

          <a-row  :gutter="15">

          <a-row :gutter="15">

            <a-col :span="5">

              <a-button

                  icon="plus"

                  type="primary"

                  @click="() => this.handleModalVisible(true)"

                  style="margin-left: 25px;"

              >新建</a-button>

              <a-button icon="plus" type="primary" @click="() => this.handleModalVisible(true)"

                style="margin-left: 25px;">新建</a-button>

            </a-col>

            <a-col :span="5" style="margin-left: 37%">

              <a-form-model-item :wrapperCol="wrapperCol">

                <a-select

                    placeholder="选择站点类型"

                    style="width: 240px;margin-top:4px"

                    @change="handleChange"

                    allow-clear

                    show-search

                >

                  <a-select-option v-for="(item,index) in stationLevel" :key="index" :value="index">

                <a-select placeholder="选择站点类型" style="width: 240px;margin-top:4px" @change="handleChange" allow-clear

                  show-search>

                  <a-select-option v-for="(item, index) in stationLevel" :key="index" :value="index">

                    {{ item }}

                  </a-select-option>

                </a-select>

              </a-form-model-item>

            </a-col>

            <a-col :span="5" >

              <a-form-model-item

                  :wrapperCol="wrapperCol">

            <a-col :span="5">

              <a-form-model-item :wrapperCol="wrapperCol">

                <a-input v-model="searchName" placeholder="请输入站点名称" allow-clear />

              </a-form-model-item>

            </a-col>

          </a-row>

        </a-form-model

         >

        </a-form-model>

      </div>

      <av-standard-table

          :dataSource="dataSource"

          :columns="columns"

          :loading="tableLoading"

          :paginationProps="pagination"

          @tableChange="handlerTableChange"

      ></av-standard-table>

      <av-standard-table :dataSource="dataSource" :columns="columns" :loading="tableLoading" :paginationProps="pagination"

        @tableChange="handlerTableChange"></av-standard-table>

    </div>

    <a-modal

        title="政府站点添加"

        destroyOnClose

        :visible="addShowOrHiddenFlag"

        @ok="addOK"

        @cancel="addCancel"

        okText="保存"

    >

      <a-form-model

          style="margin-top: 8px"

          :model="addForm"

          :rules="rules"

          ref="addRulesForm"

      >

        <a-form-model-item has-feedback

                           :labelCol="{ span: 5 }"

                           :wrapperCol="{ span: 15 }"

                           label="站点编号"

                           prop="guid">

          <a-input

              placeholder="请输入站点编号"

              type="string"

              v-model="addForm.guid"

          />

    <a-modal title="政府站点添加" destroyOnClose :visible="addShowOrHiddenFlag" @ok="addOK" @cancel="addCancel" okText="保存">

      <a-form-model style="margin-top: 8px" :model="addForm" :rules="rules" ref="addRulesForm">

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="站点编号" prop="guid">

          <a-input placeholder="请输入站点编号" type="string" v-model="addForm.guid" />

        </a-form-model-item>

        <a-form-model-item has-feedback

                           :labelCol="{ span: 5 }"

                           :wrapperCol="{ span: 15 }"

                           label="名称"

                           prop="name">

          <a-input

              placeholder="设备名称"

              type="string"

              v-model="addForm.name"

          />

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" prop="name">

          <a-input placeholder="设备名称" type="string" v-model="addForm.name" />

        </a-form-model-item>



        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="经度"

            prop="longitude"

        >

          <a-input

              placeholder="请输入经度"

              type="string"

              v-model="addForm.longitude"

          />

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="经度" prop="longitude">

          <a-input placeholder="请输入经度" type="string" v-model="addForm.longitude" />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="纬度"

            prop="latitude"

        >

          <a-input

              placeholder="请输入纬度"

              type="string"

              v-model="addForm.latitude"

          />

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="纬度" prop="latitude">

          <a-input placeholder="请输入纬度" type="string" v-model="addForm.latitude" />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            :wrapperCol="{ span: 15 }"

            label="位置"

            has-feedback

            prop="position"

        >

<!--            v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空'  }] }]"-->

            <a-cascader :options="areaData" placeholder="选择城市" @change="positionLevel" labelInValue/>

        <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" has-feedback prop="position">

          <!--            v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空'  }] }]"-->

          <a-cascader :options="areaData" placeholder="选择城市" @change="positionLevel" labelInValue />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="站点类型"

            prop="stationLevel"

        >

          <a-select

              placeholder="选择站点类型"

              type="string"

              allow-clear

              show-search

              v-model="addForm.stationLevel"

          >

            <a-select-option v-for="(item,index) in stationLevel" :key="index" :value = 'index'>{{ item }}</a-select-option>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="站点类型"

          prop="stationLevel">

          <a-select placeholder="选择站点类型" type="string" allow-clear show-search v-model="addForm.stationLevel">

            <a-select-option v-for="(item, index) in stationLevel" :key="index" :value='index'>{{ item

            }}</a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="描述"

            prop="desc"

        >

          <a-input

              placeholder="描述"

              type="string"

              v-model="addForm.desc"

          />

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="描述" prop="desc">

          <a-input placeholder="描述" type="string" v-model="addForm.desc" />

        </a-form-model-item>

      </a-form-model>

    </a-modal>

    <a-modal

        title="政府站点编辑"

        destroyOnClose

        :visible="editShowOrHiddenFlag"

        @ok="editSave"

        @cancel="editCancel"

        okText="保存"

    >

      <a-form-model

          style="margin-top: 8px"

          :model="editForm"

          :rules="rules"

          ref="editRulesForm"

      >

        <a-form-model-item has-feedback

                           :labelCol="{ span: 5 }"

                           :wrapperCol="{ span: 15 }"

                           label="站点编号"

                           prop="guid">

          <a-input

              placeholder="请输入站点编号"

              type="string"

              v-model="editForm.guid"

          />

    <a-modal title="政府站点编辑" destroyOnClose :visible="editShowOrHiddenFlag" @ok="editSave" @cancel="editCancel"

      okText="保存">

      <a-form-model style="margin-top: 8px" :model="editForm" :rules="rules" ref="editRulesForm">

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="站点编号" prop="guid">

          <a-input placeholder="请输入站点编号" type="string" v-model="editForm.guid" />

        </a-form-model-item>

        <a-form-model-item has-feedback

                           :labelCol="{ span: 5 }"

                           :wrapperCol="{ span: 15 }"

                           label="名称"

                           prop="name">

          <a-input

              placeholder="设备名称"

              type="string"

              v-model="editForm.name"

          />

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" prop="name">

          <a-input placeholder="设备名称" type="string" v-model="editForm.name" />

        </a-form-model-item>



        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="经度"

            prop="longitude"

        >

          <a-input

              placeholder="请输入经度"

              type="string"

              v-model="editForm.longitude"

          />

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="经度" prop="longitude">

          <a-input placeholder="请输入经度" type="string" v-model="editForm.longitude" />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="纬度"

            prop="latitude"

        >

          <a-input

              placeholder="请输入纬度"

              type="string"

              v-model="editForm.latitude"

          />

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="纬度" prop="latitude">

          <a-input placeholder="请输入纬度" type="string" v-model="editForm.latitude" />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            :wrapperCol="{ span: 15 }"

            label="位置"

            has-feedback

            prop="position"

        >

        <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" has-feedback prop="position">

          <!--            v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空'  }] }]"-->

          <a-cascader v-model="editForm.position" :options="areaData" placeholder="双击选择城市"

                      @change="positionLevel" labelInValue/>

          <a-cascader v-model="editForm.position" :options="areaData" placeholder="双击选择城市" @change="positionLevel"

            labelInValue />

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="站点类型"

            prop="stationLevel"

        >

          <a-select

              placeholder="选择站点类型"

              type="string"

              allow-clear

              show-search

              v-model="editForm.stationLevel"

          >

            <a-select-option v-for="(item,index) in stationLevel" :key="index" :value = 'index'>{{ item }}</a-select-option>

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="站点类型"

          prop="stationLevel">

          <a-select placeholder="选择站点类型" type="string" allow-clear show-search v-model="editForm.stationLevel">

            <a-select-option v-for="(item, index) in stationLevel" :key="index" :value='index'>{{ item

            }}</a-select-option>

          </a-select>

        </a-form-model-item>

        <a-form-model-item

            :labelCol="{ span: 5 }"

            has-feedback

            :wrapperCol="{ span: 15 }"

            label="描述"

            prop="desc"

        >

          <a-input

              placeholder="描述"

              type="string"

              v-model="editForm.desc"

          />

        <a-form-model-item :labelCol="{ span: 5 }" has-feedback :wrapperCol="{ span: 15 }" label="描述" prop="desc">

          <a-input placeholder="描述" type="string" v-model="editForm.desc" />

        </a-form-model-item>

      </a-form-model>

    </a-modal>

    <a-modal title="政府站点编辑" destroyOnClose :visible="editSiteShowOrHiddenFlag" :rules="siteRules" @ok="editSiteSave"

      @cancel="editSiteCancel" okText="保存">

      <a-form-model style="margin-top: 8px" :model="editSiteForm" ref="editSiteRulesForm">

        <a-form-model-item has-feedback :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="站点编号" prop="guid">

          <a-input placeholder="请输入站点编号" type="string" v-model="editSiteForm.guid" />

        </a-form-model-item>

      </a-form-model>

    </a-modal>

  </a-card>



</template>



<script lang="tsx">

import {Component, Vue, Watch} from "vue-property-decorator";

import { Component, Vue, Watch } from "vue-property-decorator";

import org from '@/util/org'

import { get, post } from "@/util/request";

@Component({

@@ -271,7 +115,7 @@
export default class govMonitorPoint extends Vue {

  // 定义样式

  private wrapperCol: any = {

    sm: {span: 16}//控制文本框的长度

    sm: { span: 16 }//控制文本框的长度

  }

  // 站点id查询条件

  private stationLevelId: any = ''

@@ -316,38 +160,46 @@
  // 用于检验是否有数据

  private tableLoading: boolean = false

  // 数据

  private dataSource: any[] =[]

  private dataSource: any[] = []

  // 显示新增隐藏标识

  private addShowOrHiddenFlag: boolean = false

  // 显示编辑隐藏标识

  private editShowOrHiddenFlag: boolean = false



  private editSiteShowOrHiddenFlag: boolean = false

  // 存放地理位置信息

  private areaData: any = JSON.parse(JSON.stringify(org))

  // 指定新增和编辑规则

  private rules: any = {

    guid: [

      {required: true, message: '设备编号不能为空', trigger: ['change', 'blur']},

      { required: true, message: '设备编号不能为空', trigger: ['change', 'blur'] },

    ],

    name: [

      {required: true, message: '名称不能为空', trigger: ['change', 'blur']},

      { required: true, message: '名称不能为空', trigger: ['change', 'blur'] },

    ],

    longitude: [

      {required: true, message: '经度不能为空', trigger: ['change', 'blur']},

      { required: true, message: '经度不能为空', trigger: ['change', 'blur'] },

    ],

    latitude: [

      {required: true, message: '纬度不能为空', trigger: ['change', 'blur']},

      { required: true, message: '纬度不能为空', trigger: ['change', 'blur'] },

    ],

    position: [

      {required: true, message: '请选择定位级别', trigger: ['change', 'blur']},

      { required: true, message: '请选择定位级别', trigger: ['change', 'blur'] },

    ],

    stationLevel: [

      {required: true, message: '请选择站点类型', trigger: ['change', 'blur']},

      { required: true, message: '请选择站点类型', trigger: ['change', 'blur'] },

    ]

  }

  private siteRules: any = {

    guid: [

      { required: true, message: '设备编号不能为空', trigger: ['change', 'blur'] },

    ]

  }

  // 政府站点类型

  private stationLevel: any = {}

  // 存放编辑前的数据record

  private editBeforeRecord: any = null

  private editBeforeSiteRecord: any = null

  // 新增表单数据

  private addForm: any = {

    guid: '',

@@ -369,6 +221,11 @@
    stationLevel: undefined,

    desc: ''

  }

  // 编辑表单数据

  private editSiteForm: any = {

    id: -1,

    guid: ''

  }

  // 分页数据

  private pagination: any = {

    total: 0,

@@ -380,7 +237,7 @@
  // 监听站点名称变化

  @Watch('searchName', {

    deep: true,

    immediate:true

    immediate: true

  })

  private watchName(newVal: string, oldVal: string) {

    this.searchName = newVal

@@ -398,7 +255,7 @@
    this.queryGovDatas()

  }

  //下拉查询框方法

  private handleChange(selectedItems:any) {

  private handleChange(selectedItems: any) {

    if (selectedItems) {

      this.stationLevelId = selectedItems

    } else {

@@ -411,28 +268,28 @@
  private positionLevel(val: any, selectedOptions: any) {

    if (selectedOptions && selectedOptions.length > 0) {

      this.addForm.position = selectedOptions

    }else {

    } else {

      this.addForm.position = undefined

    }

  }

  // 获取下拉框数据

  private selectDatas() {

    get("dict/data/query?type=stationLevel ", {}).then(res => {

          if (res.data.code === 0) {

            this.stationLevel = res.data.data

          }

        })

        .catch(err => {

          console.log(err);

        });

      if (res.data.code === 0) {

        this.stationLevel = res.data.data

      }

    })

      .catch(err => {

        console.log(err);

      });

  }

  // 查询所有站点信息

  private queryGovDatas() {

    get('govMonitorPoint/getGovMonitorPointByCondition', {

        current: this.pagination.current,

        size: this.pagination.pageSize,

        name: this.searchName,

        stationLevel: this.stationLevelId

      current: this.pagination.current,

      size: this.pagination.pageSize,

      name: this.searchName,

      stationLevel: this.stationLevelId

    }).then((res: any) => {

      if (res.data.code === 0) {

        this.pagination.total = res.data.data.totalNumber;

@@ -440,7 +297,7 @@
        const govDatas = res.data.data.govMonitorPointList

        if (govDatas.length > 0) {

          for (let i = 0; i < govDatas.length; i++) {

            for (let j = 0; j <govDatas[i].position.length ; j++) {

            for (let j = 0; j < govDatas[i].position.length; j++) {

              govDatas[i].stationLevelName = this.stationLevel[govDatas[i].stationLevel]

            }

          }

@@ -451,7 +308,7 @@
  }

  // 新增显示

  private handleModalVisible(flag: boolean) {

     this.addShowOrHiddenFlag = flag

    this.addShowOrHiddenFlag = flag

  }

  // 新增成功

  private addOK() {

@@ -504,7 +361,7 @@
    this.addShowOrHiddenFlag = false

  }

  // 编辑显示

  private editShow(flag:boolean, record: any) {

  private editShow(flag: boolean, record: any) {

    this.editShowOrHiddenFlag = flag

    this.editBeforeRecord = record

    const positon = []

@@ -522,6 +379,54 @@
      desc: record.desc === undefined ? '' : record.desc

    }

  }

  // 编辑显示

  private editSiteShow(flag: boolean, record: any) {

    this.editSiteShowOrHiddenFlag = flag

    this.editBeforeSiteRecord = record

    const positon = []

    positon.push(record.provinceCode)

    positon.push(record.cityCode)

    positon.push(record.areaCode)

    this.editSiteForm = {

      id: record.id,

      guid: record.guid

    }

  }

  // 编辑站点保存

  private editSiteSave() {

    this.$refs.editSiteRulesForm.validate((valid: any) => {

      if (valid) {

        const guid = this.editSiteForm.guid === this.editBeforeSiteRecord.guid ? null : this.editSiteForm.guid

        if (!(guid)) {

          this.$message.warning('未修改！')

        } else {

          get('govMonitorPoint/updateGuid', {

            id: this.editSiteForm.id,

            guid

          }).then((res: any) => {

            if (res.data.code === 0) {

              this.$message.success(res.data.message)

              this.editSiteForm = {

                id: -1,

                guid: ''

              }

              this.editSiteShowOrHiddenFlag = false

              this.queryGovDatas()

            } else {

              this.$message.warning(res.data.message)

            }

          })

        }

      }

    })

  }

  private editSiteCancel() {

    this.editForm = {

      id: -1,

      guid: ''

    }

    this.editSiteShowOrHiddenFlag = false

  }

  // 编辑保存

  private editSave() {

    this.$refs.editRulesForm.validate((valid: any) => {

@@ -530,12 +435,12 @@
        const guid = this.editForm.guid === this.editBeforeRecord.guid ? null : this.editForm.guid

        const longitude = this.editForm.longitude === this.editBeforeRecord.longitude ? null : this.editForm.longitude

        const latitude = this.editForm.latitude === this.editBeforeRecord.latitude ? null : this.editForm.latitude

        const position = (this.editForm.position[0] ===this.editBeforeRecord.provinceCode &&

                          this.editForm.position[1] ===this.editBeforeRecord.cityCode &&

                          this.editForm.position[2] ===this.editBeforeRecord.areaCode) ? null : this.editForm.position

        const position = (this.editForm.position[0] === this.editBeforeRecord.provinceCode &&

          this.editForm.position[1] === this.editBeforeRecord.cityCode &&

          this.editForm.position[2] === this.editBeforeRecord.areaCode) ? null : this.editForm.position

        const stationLevel = this.editForm.stationLevel === this.editBeforeRecord.stationLevel ? null : this.editForm.stationLevel

        const desc = this.editBeforeRecord.desc === undefined ? (this.editForm.desc === '' ? null : this.editForm.desc) :

                      this.editForm.desc === this.editBeforeRecord.desc ? null : this.editForm.desc

          this.editForm.desc === this.editBeforeRecord.desc ? null : this.editForm.desc

        if (!(name || guid || longitude || latitude || position || stationLevel || desc)) {

          this.$message.warning('未修改！')

        } else {

@@ -546,8 +451,8 @@
            longitude,

            latitude,

            provinceCode: position === null ? null : position[0],

            cityCode:  position === null ? null : position[1],

            areaCode:  position === null ? null : position[2],

            cityCode: position === null ? null : position[1],

            areaCode: position === null ? null : position[2],

            stationLevel,

            desc

          }).then((res: any) => {

@@ -604,26 +509,29 @@
  // 数据操作方法

  private opRender(text: string, record: any, index: number) {

    return (

        <div>

          <a onClick={() => this.editShow(true, record)}>

            {" "}

            编辑{" "}

          </a>

          <a-divider type="vertical"/>

          <a-popconfirm

              title="确认删除吗？"

              ok-text="确定"

              cancel-text="取消"

              onConfirm={() => this.delete(record)}

          >

            <a href="#">删除</a>

          </a-popconfirm>

        </div>

      <div>

        <a onClick={() => this.editShow(true, record)}>

          {" "}

          编辑{" "}

        </a>

        <a-divider type="vertical" />

        <a-popconfirm

          title="确认删除吗？"

          ok-text="确定"

          cancel-text="取消"

          onConfirm={() => this.delete(record)}

        >

          <a href="#">删除</a>

        </a-popconfirm>

        <a-divider type="vertical" />

        <a onClick={() => this.editSiteShow(true, record)}>

          {" "}

          政府站点修改{" "}

        </a>

      </div>

    )

  }

}

</script>



<style scoped>



</style>

<style scoped></style>