新增资源管理

2022-10-08 15:31:25 +08:00
parent 4a0f4535d0
commit 575606766f
4 changed files with 270 additions and 10 deletions
--- a/project/pengliuyang/apps/AppCommunityResource/AppCommunityResource.vue
+++ b/project/pengliuyang/apps/AppCommunityResource/AppCommunityResource.vue
@@ -27,7 +27,7 @@ export default {
      return hash == "#resourceClassification" ? resourceClassification :
              hash == "#resourceManagement" ? resourceManagement :
               hash == "#resourceMap" ? resourceMap : 
-                hash == "#addResource" ? addResource:resourceList
+                hash == "#addResource" ? addResource : resourceList
    }
  },
  components: {
--- a/project/pengliuyang/apps/AppCommunityResource/components/addResource.vue
+++ b/project/pengliuyang/apps/AppCommunityResource/components/addResource.vue
@@ -1,15 +1,258 @@
 <template>
-  <div>新增资源</div>
+  <section class="addResource">
+    <ai-detail>
+      <template #title>
+        <ai-title title="添加社会资源" isShowBack isShowBottomBorder @onBackClick="cancel"></ai-title>
+      </template>
+
+      <template slot="content">
+        <ai-card>
+          <template #content>
+            <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
+
+              <el-form-item label="资源分类" style="width: 100%;" prop="categoryId" :rules="[{ required: true, message: '请选择资源分类', trigger: 'blur' }]">
+                <ai-select v-model="form.categoryId" :selectList="categoryList"/>
+              </el-form-item>
+
+              <el-form-item style="width: 100%" label="资源名称" prop="resourceName" :rules="[{ required: true, message: '请输入资源名称', trigger: 'blur' }]">
+                <el-input size="small" placeholder="请输入资源名称" show-word-limit v-model="form.resourceName" :maxlength="20"></el-input>
+              </el-form-item>
+
+              <el-form-item style="width: 100%" label="地区" prop="type" :rules="[{ required: true, message: '选择地区', trigger: 'change' }]">
+                <ai-area-get v-model="form.areaId" :instance="instance" @select="handleAreaSelect"/>
+              </el-form-item>
+
+              <el-form-item style="width: 100%" label="地址" prop="type" :rules="[{ required: true, message: '请输入地址', trigger: 'change' }]">
+                <el-input size="small" placeholder="请输入地址" v-model="form.address" show-word-limit maxlength="50"></el-input>
+              </el-form-item>
+
+              <el-form-item style="width: 100%" label="地理位置" prop="type" :rules="[{ required: true, message: '请标绘地理位置', trigger: 'change' }]">
+                <el-button @click="showMap = true">地图标绘</el-button>
+              </el-form-item>
+
+              <el-form-item style="width: 100%" label="资源信息" prop="name">
+                <el-input size="small" type="textarea" :rows="5" placeholder="请输入资源信息" show-word-limit v-model="form.information" :maxlength="500"></el-input>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+      </template>
+
+      <template #footer>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm()">提交</el-button>
+      </template>
+    </ai-detail >
+
+    <ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
+      <div id="map"></div>
+
+      <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+        <el-row type="flex" justify="space-between">
+          <el-form-item label="经度">
+            <el-input disabled size="small" v-model="placeDetail.lng"></el-input>
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input disabled size="small" v-model="placeDetail.lat"></el-input>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+        <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+      </el-input>
+      <div id="searchPlaceOutput" />
+    </ai-dialog>
+  </section>
 </template>

 <script>
+import AMapLoader from '@amap/amap-jsapi-loader'
 export default {
-  name: 'addResource'
+  name: 'addResource',
+  props: {
+    instance: Function,
+    dict: Object,
+    areaId: String,
+    permissions: Function,
+  },
+  data() {
+    return {
+      form: {
+        categoryName: '',
+        categoryId: '',
+        resourceName: '',
+        areaId: '',
+        areaName: '',
+        address: '',
+        lng: '123.123',  // 经度
+        lat: '123.123',  // 纬度
+        information: '',
+      },
+      categoryList: [],
+      showMap: false,
+      searchPlace: '',
+      placeDetail: {
+        lat: '123.123',
+        lng: '456.123',
+      }
+    }
+  },
+  created() {
+    this.getCategoryList()
+    console.log(this.$router,'111')
+  },
+  methods: {
+    cancel() {
+      // currentPage: resourceManagement 
+      this.$router.push({hash: "#AppCommunityResource", query: {}})
+    },
+    getCategoryList() {
+      this.instance.post(`/app/appresourcecategory/list`,null,{
+        params: {
+          current: 1,
+          size: 3000,
+        }
+      }).then(res=> {
+        if(res?.data) {
+          this.categoryList = res.data.records.map(item=> {
+            return {
+              dictName: item.categoryName,
+              dictValue: item.id
+            }
+          })
+        }
+      })
+    },
+    handleAreaSelect(v) {
+      if(v.length) {
+        this.form.areaName = v[0]?.label
+      }
+    },
+    selectMap() {
+      this.form.lng = this.placeDetail.lng
+      this.form.lat = this.placeDetail.lat
+      this.showMap = false
+    },
+    getCorpLocation() {
+      this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
+        if (res.code == 0) {
+          this.initMap(res.data)
+        }
+      })
+    },
+
+    initMap({ lng, lat }) {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap) => {
+        this.placeDetail.lng = this.form.lng
+        this.placeDetail.lat = this.form.lat
+        this.map = new AMap.Map('map', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          center: [lng, lat],
+          zoom: 11,
+        })
+        this.placeSearch = new AMap.PlaceSearch({ map: this.map })
+        new AMap.AutoComplete({
+          input: 'searchPlaceInput',
+          output: 'searchPlaceOutput',
+        }).on('select', (e) => {
+          if (e?.poi) {
+            this.placeSearch.setCity(e.poi.adcode)
+            this.movePosition(e.poi.location)
+          }
+        })
+        this.map.on('click', (e) => {
+          new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
+            if (res?.regeocode) {
+              this.placeDetail = {
+                lng: e.lnglat?.lng,
+                lat: e.lnglat?.lat,
+                address: res.regeocode.formattedAddress,
+              }
+            }
+          })
+          this.movePosition(e.lnglat)
+        })
+      })
+    },
+    movePosition(center) {
+      if (this.map) {
+        this.map.clearMap()
+        this.map.panTo(center)
+        this.map.add([
+          new AMap.Marker({
+            position: center,
+            clickable: true,
+          }),
+        ])
+        this.map.setFitView()
+      }
+    },
+    confirm() {
+      this.instance.post(`/app/appresourceinfo/addOrUpdate`, {
+        ...this.form
+      }).then(res => {
+        if (res.code == 0) {
+          this.$message.success('新增成功')
+          this.cancel()
+        }
+      })
+    },
+  },
 }
 </script>

 <style lang="scss" scope>
 .addResource {

+  ::v-deep .mapDialog {
+    .el-dialog__body {
+      padding: 0;
+
+      .ai-dialog__content {
+        padding: 0;
+      }
+
+      .ai-dialog__content--wrapper {
+        padding: 0 !important;
+        position: relative;
+      }
+
+      #map {
+        width: 100%;
+        height: 420px;
+      }
+
+      .searchPlaceInput {
+        position: absolute;
+        width: 250px;
+        top: 30px;
+        left: 25px;
+      }
+
+      #searchPlaceOutput {
+        position: absolute;
+        width: 250px;
+        left: 25px;
+        height: initial;
+        top: 80px;
+        background: white;
+        z-index: 250;
+        max-height: 300px;
+        overflow-y: auto;
+
+        .auto-item {
+          text-align: left;
+          font-size: 14px;
+          padding: 8px;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
 }
 </style>
--- a/project/pengliuyang/apps/AppCommunityResource/components/resourceList.vue
+++ b/project/pengliuyang/apps/AppCommunityResource/components/resourceList.vue
@@ -21,7 +21,7 @@
 import resourceMap from "./resourceMap.vue"
 import resourceManagement from "./resourceManagement.vue"
 import resourceClassification from './resourceClassification.vue'
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'

 export default {
  name: 'resourceList',
--- a/project/pengliuyang/apps/AppCommunityResource/components/resourceManagement.vue
+++ b/project/pengliuyang/apps/AppCommunityResource/components/resourceManagement.vue
@@ -5,7 +5,7 @@
        <ai-search-bar>
          <template #left>
            <el-button type="primary" size="small" icon="iconfont iconAdd" @click="addResource">&nbsp;添加资源</el-button>
-            <ai-select v-model="search.categoryId" @change="search.current = 1, getList()" placeholder="资源种类" :selectList="dict.getDict('cwpStatus')" />
+            <ai-select v-model="search.categoryId" @change="search.current = 1, getList()" placeholder="资源种类" :selectList="categoryList" />
          </template>
          <template #right>
            <el-input size="small" placeholder="资源姓名" v-model="search.resourceName" clearable
@@ -40,6 +40,7 @@ export default {
      },
      total: 0,
      tableData: [],
+      categoryList: [],
    }
  },
  computed: {
@@ -54,13 +55,14 @@ export default {
  },
  created() {
    this.getList()
+    this.getCategoryList()
  },
  methods: {
    getList() {
      this.instance.post(`/app/appresourceinfo/list`,null,{
        params: {
          ...this.search,
-          areaId: this.areaId,
+          // areaId: this.areaId,
        }
      }).then(res=> {
        if(res?.data) {
@@ -71,13 +73,28 @@ export default {
    },
    addResource() {
      this.$router.push({hash: "#addResource", query: {}})
-    }
+    },
+    getCategoryList() {
+      this.instance.post(`/app/appresourcecategory/list`,null,{
+        params: {
+          current: 1,
+          size: 3000,
+        }
+      }).then(res=> {
+        if(res?.data) {
+          this.categoryList = res.data.records.map(item=> {
+            return {
+              dictName: item.categoryName,
+              dictValue: item.id
+            }
+          })
+        }
+      })
+    },
  }
 }
 </script>

 <style lang="scss" scope>
-.resourceManagement {
-
-}
+.resourceManagement {}
 </style>