epmet-work-pc-chengyang/src/views/modules/communityParty/partyOrg/create.vue

<template>
  <el-dialog :visible.sync="visible"
             :title="'新增党组织'"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
              :close="handleDlgClose">
    <el-form class="form"
             :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native=""
             :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">

      <el-form-item prop="partyOrgLevel"
                    label="党组织类型">
        <el-select v-model="dataForm.partyOrgLevel"
                   @change="handlePartyOrgLevelSelected" 
                   placeholder="请选择">
          <el-option
              v-for="level in partyOrgLevels"
              :key="level.levelCode"
              :label="level.levelName"
              :value="level.levelCode">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item prop="partyOrgPid"
                    label="上级党组织">
        <el-select v-model="dataForm.partyOrgPid"
                   @change="handleParentPartyOrgSelected"
                   placeholder="请选择">
          <el-option
              v-for="org in parentPartyOrgs"
              :key="org.id"
              :label="org.partyOrgName"
              :value="org.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="orgId"
                    label="行政组织" v-if="orgSelectorShow">
        <el-select v-model="dataForm.orgId"
                   @change=""
                   placeholder="请选择">
          <el-option
              v-for="org in xingzhengOrgs"
              :key="org.orgId"
              :label="org.orgName"
              :value="org.orgId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="partyOrgName"
                    label="党组织名称">
        <el-input v-model="dataForm.partyOrgName"
                  placeholder="请输入党组织名称"
                  style="width: 300px"></el-input>
      </el-form-item>
      
      <el-form-item prop="description" label="党组织介绍">
        <el-input
            type="textarea"
            :rows="2"
            placeholder=""
            v-model="this.dataForm.description">
        </el-input>
      </el-form-item>

      <el-form-item label="地图位置"
                    prop="longitude"
                    style="display: block">
        <div style="width: 500px">
          <el-select v-model="searchValue"
                     filterable
                     style="width: 500px"
                     remote
                     :reserve-keyword="true"
                     placeholder="请输入位置关键词"
                     :remote-method="searchOnMap"
                     :loading="mapLoading">
            <el-option v-for="(item,index) in searchOptions"
                       @click.native="handleMapSearchResultSelected(index)"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <div id="partyOrgMap"
               class="div_map"></div>
        </div>
      </el-form-item>

    </el-form>
    <template slot="footer">
      <el-button @click="">取消</el-button>
      <el-button type="primary" @click="handleSubmitCreate">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
import debounce from 'lodash/debounce'
import { requestGet, requestPost } from "@/js/dai/request";
import EpmetResultResolver from '@/js/epmet-result-resolver'
import { number } from 'echarts'
import daiMap from "@/utils/dai-map";

export default {
  data () {
    return {
      dataForm: {
        partyOrgPid: null,
        partyOrgName: null,
        partyOrgLevel: null,
        orgId: null, // 行政组织id
        description: null,
        longitude: null,
        latitude: null,
        address: null
      },
      // 党组织类型下拉框
      partyOrgLevels: [],
      // 父级党组织
      parentPartyOrgs: [],
      
      // 行政组织列表
      xingzhengOrgs: [],
      orgSelectorShow: true, // 行政组织是否显示
      
      // 地图
      searchOptions: [], //用于展示的地图搜索结果列表
      searchValue: '',
      mapLoading: false, // 地图加载
      mapSearchResultList: [], // 地图搜索结果列表 
      epmetResultResolver: null, // epmet请求结果解析器
    }
  },
  mounted () {
    
  },
  methods: {
    // 初始化
    init () {
      this.epmetResultResolver = new EpmetResultResolver(this);
      
      // 加载党组织级别下拉框
      this.loadPartyOrgLevels();
      
      // 初始化地图
      let { latitude, longitude } = this.$store.state.user;

      setTimeout(() => {
        this.$nextTick(() => {
          if (!map) {
            this.initMap(latitude, longitude);
          } else {
            map.setCenter(latitude, longitude);
            map.setMarker(latitude, longitude);
          }
        })  
      }, 50)
    },

    // 初始化地图
    initMap (latitude, longitude) {
      map = new daiMap(
          document.getElementById("partyOrgMap"),
          { latitude, longitude },
          {
            zoom: 16.2, // 设置地图缩放级别
            pitch: 43.5, // 设置俯仰角
            rotation: 45, // 设置地图旋转角度
          }
      );

      // 监听地图平移结束事件
      map.on("dragend", (e) => {
        this.handleMoveCenter(e);
      });

      // 设置地图默认经纬度中心店和标记
      map.setCenter(latitude, longitude);
      map.setMarker(latitude, longitude);
    },
    
    // 加载党组织类型下拉框
    async loadPartyOrgLevels() {
      let url = "/actual/base/party/org/listPartyOrgLevels";
      let rst = await requestGet(url, {});
      
      this.epmetResultResolver
          .success((data) => { 
            this.partyOrgLevels = data; 
          })
          .parse(rst);
      
      // processEpmetResult((data) => {
      //   this.partyOrgLevels = data;
      // }, null, rst);
    },

    /**
     * 党组织级别选中事件
     * @returns {Promise<void>}
     */
    async handlePartyOrgLevelSelected() {
      // 加载上级党组织
      let url = "/actual/base/party/org/listParentPartyOrg";
      let rst = await requestGet(url, {
        partyOrgLevel: this.dataForm.partyOrgLevel
      })

      this.epmetResultResolver.success((data) => {
              this.parentPartyOrgs = data;
              this.dataForm.partyOrgPid = null;

              // 控制行政组织组件是否显示
              // orgSelectorShows
              if (this.dataForm.partyOrgLevel >= 6) {
                this.orgSelectorShow = false;
              }
      })
      .parse(rst);
      
      // processEpmetResult((data) => {
      //   this.parentPartyOrgs = data;
      //   this.dataForm.partyOrgPid = null;
      //  
      //   // 控制行政组织组件是否显示
      //   // orgSelectorShows
      //   if (this.dataForm.partyOrgLevel >= 6) {
      //     this.orgSelectorShow = false;
      //   }
      // }, null, rst);
    },

    /**
     * 上级党组织选中事件，
     * 加载下级行政组织
     * @returns {Promise<void>}
     */
    async handleParentPartyOrgSelected() {
      let url = "/actual/base/party/org/listXingZhengOrgs";
      let rst = await requestGet(url, {
        partyOrgPid: this.dataForm.partyOrgPid
      });
      
      this.epmetResultResolver
          .success((data) => {
            this.xingzhengOrgs = data;
          })
          .parse(rst);

      // processEpmetResult((data) => {
      //   this.xingzhengOrgs = data;
      //   console.log(this.xingzhengOrgs)
      // }, null, rst);
    },

    /**
     * 对话框关闭事件
     * @returns {Promise<void>}
     */
    async handleDlgClose() {
      this.visible = false;
    },

    /**
     * 提交表单
     * @returns {Promise<void>}
     */
    async handleSubmitCreate() {
      let url = "/actual/base/party/org/create";
      
      let params = {
        ...this.dataForm
      }
      
      let rst = await requestPost(url, params)
      
      this.epmetResultResolver
          .success((data) => {
            this.$message.success("提交成功");
          })
          .parse(rst);
      
      // processEpmetResult((data) => {
      //     this.$message.success("提交成功");
      // }, null, rst)
    },

    // 地图搜索
    async searchOnMap (query) {

      if (query !== '') {
        this.mapLoading = true;

        const { msg, data } = await map.searchNearby(query);
        this.mapLoading = false;
        this.mapSearchResultList = []

        if (msg == "success" && data.resultList && data.resultList.length > 0) {

          if (data.resultList && data.resultList.length > 0) {
            this.mapSearchResultList = data.resultList
            this.searchOptions = this.mapSearchResultList.map(item => {
              return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
            });
          }
        } else {
          this.searchOptions = [
            {
              value: '0',
              label: '未检索到结果'
            }
          ]
        }
      } else {
        this.searchOptions = [];
      }
    },

    // 地图中心点移动
    async handleMoveCenter () {
      //修改地图中心点
      const { lat, lng } = map.getCenter();
      this.dataForm.latitude = lat;
      this.dataForm.longitude = lng;
      map.setMarker(lat, lng);

      let { msg, data } = await map.getAddress(lat, lng);
      if (msg == "success") {
        this.dataForm.address = data.address
        this.searchValue = data.address
        this.searchOptions = []

      }
    },

    /**
     * 地图文本搜索，选中
     * @param index
     */
    handleMapSearchResultSelected (index) {
      let selPosition = this.resultList[index]
      let lonlat = selPosition.lonlat.split(" ")
      map.setCenter(lonlat[1], lonlat[0]);
      map.setMarker(lonlat[1], lonlat[0]);
      this.dataForm.latitude = lonlat[1];
      this.dataForm.longitude = lonlat[0];
      this.dataForm.address = selPosition.address + selPosition.name
    },
    
  },
  computed: {
    dataRule () {
      return {
        partyOrgLevel: [
          { required: true, message: '请选择党组织类型', trigger: 'blur' },
        ],
        partyOrgPid: [
          { required: true, message: '请选择上级党组织', trigger: 'blur' },
        ],
        partyOrgName: [
          { required: true, message: '党组织名称不能为空', trigger: 'blur' },
        ],
        orgId: [
          { required: true, message: '行政组织不能为空', trigger: 'blur' },
        ],
        mySelectOrg: [
          { required: true, message: '上级党组织不能为空', trigger: 'blur' },
        ],
        partyOrgType: [
          { required: true, message: '党组织类型不能为空', trigger: 'blur' },
        ],
        agencyId: [
          { required: true, message: '行政组织不能为空', trigger: 'blur' },
        ],
      }
    },
  },
  props: {
    visible: {
      defult: false,
      type: Boolean
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/visual/communityManageForm.scss";
</style>
<style lang="scss" scoped>
.item_width_1 {
  width: 560px;

  /deep/ .tox .tox-dialog {
    z-index: 20000;
  }
}

.div_map {
  position: relative;
}

.div_searchmap {
  z-index: 5000;
  position: absolute;
  top: 5px;
  left: 5px;
}

.tinymce_view {
  height: 400px;
  overflow: auto;
}

.text_p {
  margin: 0;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;

  > p {
    margin: 0;
  }
}
</style>