区域管理

src/api/base/regionInfo.js

@@ -41,6 +41,10 @@ function batchRemove(idList){
   });
 }
 
+function list(formData){
+  return request.post(constant.serverUrl + "/base/regionInfo/list", formData);
+}
+
 export default {
-  pageList,create,edit,add,update,remove,batchRemove
+  pageList,create,edit,add,update,remove,batchRemove,list
 }

src/views/base/regionInfo-detail.vue

@@ -34,12 +34,22 @@
             style="width: 300px"
           ></el-input>
         </el-form-item>
-        <el-form-item label="上级地区id" prop="parentId">
-          <el-input
+        <el-form-item label="上级" prop="parentId">
+          <el-select-tree
+            :props="props"
+            :options="regionData"
             v-model="formModel.parentId"
-            placeholder="请输入上级地区id"
+            size="mediumn"
+            width="300px"
+          ></el-select-tree>
+        </el-form-item>
+        <el-form-item label="经纬度" prop="location">
+          <el-input
+            v-model="formModel.location"
+            placeholder="请输入经纬度"
             style="width: 300px"
           ></el-input>
+          <i class="el-icon-map-location my-font" @click="handleLocation()"></i>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input
@@ -48,7 +58,59 @@
             style="width: 300px"
           ></el-input>
         </el-form-item>
+        <el-form-item label="排序" prop="sortNo">
+          <el-input-number
+            v-model="formModel.sortNo"
+            placeholder="请输入排序"
+            style="width: 200px"
+            :min="0"
+          ></el-input-number>
+        </el-form-item>
       </el-form>
+      <el-dialog
+        :visible.sync="showMapDialog"
+        title="地图选点"
+        :modal-append-to-body="true"
+        :append-to-body="true"
+        style="text-align: left"
+        :close-on-click-modal="false"
+      >
+        <el-amap
+          ref="stationMap"
+          vid="stationMap"
+          :amap-manager="amapManager"
+          :center="pointPosition"
+          :zoom="zoom"
+          :events="events"
+          class="amap-demo"
+        >
+          <el-amap-marker
+            vid="amapDemo"
+            :position="pointPosition"
+          ></el-amap-marker>
+        </el-amap>
+        <span slot="footer" class="dialog-footer">
+          <div style="position: absolute; left: 20px; bottom: 20px">
+            <el-input
+              placeholder="当前经纬度"
+              v-model="formModel.location"
+              style="width: 400px"
+            >
+              <template slot="prepend">经纬度</template>
+              <el-button
+                slot="append"
+                icon="el-icon-search"
+                @click="handleRegeo"
+                >定位</el-button
+              >
+            </el-input>
+          </div>
+          <el-button @click="showMapDialog = false">取 消</el-button>
+          <el-button type="primary" @click="handleSelectPoint()"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="closeDialog">取 消</el-button>
@@ -61,6 +123,10 @@
 <script>
 import Constant from "@/constant";
 import regionInfoApi from "@/api/base/regionInfo";
+import SelectTree from "@/components/SelectTree";
+
+import AMap from "vue-amap";
+let amapManager = new AMap.AMapManager();
 
 export default {
   props: ["businessKey", "title"],
@@ -68,47 +134,49 @@ export default {
     return {
       formModel: {},
       ruleValidate: {
-        id: [{ required: true, message: "不能为空", trigger: "blur" }],
         name: [
           { required: true, message: "地区名称不能为空", trigger: "blur" },
         ],
-        parentId: [
-          { required: true, message: "上级地区id不能为空", trigger: "blur" },
-        ],
-        remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],
-        createBy: [
-          { required: true, message: "创建人不能为空", trigger: "blur" },
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" },
-        ],
-        updateBy: [
-          { required: true, message: "更新人不能为空", trigger: "blur" },
-        ],
-        updateTime: [
-          { required: true, message: "更新时间不能为空", trigger: "blur" },
-        ],
-        delFlag: [
-          { required: true, message: "是否删除不能为空", trigger: "blur" },
-        ],
         fullName: [
           { required: true, message: "全称不能为空", trigger: "blur" },
         ],
-        longitude: [
-          { required: true, message: "经度不能为空", trigger: "blur" },
-        ],
-        latitude: [
-          { required: true, message: "纬度不能为空", trigger: "blur" },
-        ],
-        radius: [
-          { required: true, message: "半径(米)不能为空", trigger: "blur" },
-        ],
+        location:[
+          { required: true, message: "经纬度不能为空", trigger: "blur" },
+        ]
       },
       showDialog: true,
       loading: false,
       submitting: false,
+      regionData: [],
+      props: {
+        // 配置项（必选）
+        value: "id",
+        label: "name",
+        children: "children",
+      },
+      pointPosition: [112.240222, 30.337053],
+      showMapDialog: false,
+      amapManager,
+      zoom: 12,
+      events: {
+        click: (e) => {
+          var pt = e.lnglat; //点击选择新地址为中心点
+          console.log(pt);
+
+          this.pointPosition = [pt.lng, pt.lat];
+          this.formModel.location = pt.lng + "," + pt.lat;
+          this.formModel.longitude = pt.lng;
+          this.formModel.latitude = pt.lat;
+        },
+      },
     };
   },
+  created() {
+    regionInfoApi.list().then((response) => {
+      var jsonData = response.data;
+      this.regionData = jsonData.data;
+    });
+  },
   methods: {
     closeDialog() {
       this.$emit("close", false);
@@ -148,6 +216,27 @@ export default {
         }
       });
     },
+    handleLocation() {
+      this.showMapDialog = true;
+      if (this.formModel.longitude != null && this.formModel.latitude != null) {
+        var arr = [this.formModel.longitude, this.formModel.latitude];
+        this.pointPosition = arr;
+      }
+    },
+
+    handleRegeo() {
+      if (this.formModel.longitude != null && this.formModel.latitude != null) {
+        var arr = [this.formModel.longitude, this.formModel.latitude];
+        this.pointPosition = arr;
+      }
+    },
+    handleSelectPoint() {
+      this.formModel.location =
+        this.pointPosition[0] + "," + this.pointPosition[1];
+      this.formModel.longitude = this.pointPosition[0];
+      this.formModel.latitude = this.pointPosition[1];
+      this.showMapDialog = false;
+    },
   },
   mounted: function () {
     var self = this;
@@ -165,6 +254,16 @@ export default {
 
         if (jsonData.result) {
           self.formModel = jsonData.data;
+          if (self.formModel.sortNo == null) {
+            self.formModel.sortNo = 0;
+          }
+          if (
+            self.formModel.longitude != null &&
+            self.formModel.latitude != null
+          ) {
+            self.formModel.location =
+              self.formModel.longitude + "," + self.formModel.latitude;
+          }
         } else {
           self.$message.error(jsonData.message + "");
         }
@@ -173,5 +272,24 @@ export default {
         self.$message.error(error + "");
       });
   },
+  components: {
+    "el-select-tree": SelectTree,
+  },
 };
-</script>
+</script>
+<style scoped>
+.user-panel {
+  margin: 10px auto;
+}
+
+.amap-demo {
+  width: 100%;
+  height: 400px;
+}
+
+.my-font {
+  font-size: 20px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+</style>

src/views/base/regionInfo-list.vue

@@ -100,14 +100,12 @@
         label="纬度"
         width="180"
       ></el-table-column>
+      <el-table-column prop="sortNo" label="排序" width="80"></el-table-column>
       <el-table-column label="操作">
         <template slot-scope="{ row }">
-          <el-button size="mini" type="warning" @click="handleEdit(row)"
-            >编辑</el-button
-          >
-          <el-button size="mini" type="danger" @click="handleDelete(row)"
-            >删除</el-button
-          >
+          <el-link type="primary" @click="handleEdit(row)">编辑</el-link>
+-
+          <el-link type="danger" @click="handleDelete(row)">删除</el-link>
         </template>
       </el-table-column>
     </el-table>
@@ -289,6 +287,11 @@ export default {
         this.changePage(this.pageIndex);
       }
     },
+    handlePoint(record) {
+      this.modalTitle = "定位";
+      this.businessKey = record.id;
+      this.showMapModal = true;
+    },
   },
   mounted: function () {
     this.changePage(1);