提交

VUECODE/smart-operate-manage/src/views/community/communityTable.vue

@@ -104,16 +104,17 @@
           </el-select>
         </el-form-item>
         <el-form-item label="高德坐标*">
-          <el-input v-model="detail.longitude" placeholder="经度" />
-          <el-input v-model="detail.latitude" placeholder="纬度" />
+          <el-input v-model="detail.longitude" placeholder="经度" style="width: 150px;" />
+          <el-input v-model="detail.latitude" placeholder="纬度" style="width: 150px;" />
         </el-form-item>
         <!-- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box> -->
-        <div style="width:100%;height:200px;">
+        <div style="width:100%;height:200px;" class="amap-page-container">
+          <el-amap-search-box :search-option="searchOption" :on-search-result="onSearchResult" class="search-box"/>
           <el-amap ref="map" :events="events" :center="mapCenter" :zoom="12" class="amap-demo" vid="amapDemo">
             <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" />
           </el-amap>
         </div>
-        <el-form-item label="管理员姓名*">
+        <el-form-item label="管理员姓名*" style="margin-top: 40px;">
           <el-input v-model="detail.userName" placeholder="建议先填写运营人员姓名" />
         </el-form-item>
         <el-form-item label="管理员账号*">
@@ -143,6 +144,7 @@
         </el-form-item>
         <!-- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box> -->
         <div style="width:100%;height:200px;">
+          <el-amap-search-box :search-option="searchOption" :on-search-result="onSearchResult" class="search-box"/>
           <el-amap ref="map" :events="events" :center="mapCenter" :zoom="12" class="amap-demo" vid="amapDemo">
             <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" />
           </el-amap>
@@ -174,54 +176,54 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from "vuex";
-import waves from "@/directive/waves"; // Waves directive
-import { parseTime } from "@/utils";
-import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
+import { mapState, mapActions, mapMutations } from 'vuex'
+import waves from '@/directive/waves' // Waves directive
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 const calendarTypeOptions = [
-  { key: "CN", display_name: "China" },
-  { key: "US", display_name: "USA" },
-  { key: "JP", display_name: "Japan" },
-  { key: "EU", display_name: "Eurozone" }
-];
+  { key: 'CN', display_name: 'China' },
+  { key: 'US', display_name: 'USA' },
+  { key: 'JP', display_name: 'Japan' },
+  { key: 'EU', display_name: 'Eurozone' }
+]
 
 // arr to obj ,such as { CN : "China", US : "USA" }
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
-  acc[cur.key] = cur.display_name;
-  return acc;
-}, {});
+  acc[cur.key] = cur.display_name
+  return acc
+}, {})
 
 export default {
-  name: "ComplexTable",
+  name: 'ComplexTable',
   components: { Pagination },
   directives: { waves },
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: "success",
-        draft: "info",
-        deleted: "danger"
-      };
-      return statusMap[status];
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
     },
     typeFilter(type) {
-      return calendarTypeKeyValue[type];
+      return calendarTypeKeyValue[type]
     }
   },
   data() {
-    var _self = this;
+    var _self = this
     return {
       events: {
         click: e => {
           // _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
-          _self.detail.longitude = e.lnglat.lng;
-          _self.detail.latitude = e.lnglat.lat;
+          _self.detail.longitude = e.lnglat.lng
+          _self.detail.latitude = e.lnglat.lat
         }
       },
       markers: [],
       searchOption: {
-        city: "南京",
+        city: '南京',
         citylimit: false
       },
       mapCenter: [118.789509, 32.019989],
@@ -239,41 +241,41 @@ export default {
       importanceOptions: [1, 2, 3],
       calendarTypeOptions,
       sortOptions: [
-        { label: "ID Ascending", key: "+id" },
-        { label: "ID Descending", key: "-id" }
+        { label: 'ID Ascending', key: '+id' },
+        { label: 'ID Descending', key: '-id' }
       ],
-      statusOptions: ["published", "draft", "deleted"],
+      statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
       dialogFormVisible: false,
       dialogLookFormVisible: false,
-      dialogStatus: "",
+      dialogStatus: '',
       textMap: {
-        update: "编辑",
-        create: "新增"
+        update: '编辑',
+        create: '新增'
       },
       dialogPvVisible: false,
       pvData: [],
       rules: {
         type: [
-          { required: true, message: "type is required", trigger: "change" }
+          { required: true, message: 'type is required', trigger: 'change' }
         ],
         createData: [
           {
-            type: "date",
+            type: 'date',
             required: true,
-            message: "createData is required",
-            trigger: "change"
+            message: 'createData is required',
+            trigger: 'change'
           }
         ],
         title: [
-          { required: true, message: "title is required", trigger: "blur" }
+          { required: true, message: 'title is required', trigger: 'blur' }
         ]
       },
       downloadLoading: false
-    };
+    }
   },
   computed: {
-    ...mapState("community", {
+    ...mapState('community', {
       list: s => s.list,
       detail: s => s.detail,
       total: s => s.total,
@@ -299,310 +301,327 @@ export default {
   //   }
   // },
   created() {
-    this.getList();
-    this.getProvinceList();
+    this.getList()
+    this.getProvinceList()
   },
   methods: {
-    ...mapMutations("community", {
-      resetDetail: "resetDetail",
-      setDetail: "setDetail"
+    ...mapMutations('community', {
+      resetDetail: 'resetDetail',
+      setDetail: 'setDetail'
     }),
-    ...mapActions("community", [
-      "FetchCommunityList",
-      "CreateCommunity",
-      "UpdateCommunity",
-      "FetchProvinceList",
-      "FetchCityList",
-      "FetchDistrictList",
-      "FetchEditCityList",
-      "FetchEditDistrictList"
+    ...mapActions('community', [
+      'FetchCommunityList',
+      'CreateCommunity',
+      'UpdateCommunity',
+      'FetchProvinceList',
+      'FetchCityList',
+      'FetchDistrictList',
+      'FetchEditCityList',
+      'FetchEditDistrictList'
     ]),
+    addMarker() {
+      const lng = 121.5 + Math.round(Math.random() * 1000) / 10000
+      const lat = 31.197646 + Math.round(Math.random() * 500) / 10000
+      this.markers.push([lng, lat])
+    },
     onSearchResult(pois) {
       // 搜索地图
-      let latSum = 0;
-      let lngSum = 0;
+      let latSum = 0
+      let lngSum = 0
       if (pois.length > 0) {
         pois.forEach(poi => {
-          const { lng, lat } = poi;
-          lngSum += lng;
-          latSum += lat;
-          this.markers.push([poi.lng, poi.lat]);
-        });
+          const { lng, lat } = poi
+          lngSum += lng
+          latSum += lat
+          this.markers.push([poi.lng, poi.lat])
+        })
         const center = {
           lng: lngSum / pois.length,
           lat: latSum / pois.length
-        };
-        this.mapCenter = [center.lng, center.lat];
+        }
+        this.mapCenter = [center.lng, center.lat]
       }
     },
     setCurrent(item) {
-      this.setDetail({ ...item });
+      this.setDetail({ ...item })
     },
     getList() {
-      this.listLoading = true;
+      this.listLoading = true
       this.FetchCommunityList(this.listQuery)
         .then(() => {
-          this.listLoading = false;
+          this.listLoading = false
         })
         .catch(() => {
-          this.loading = false;
-          console.log("get list error");
-        });
+          this.loading = false
+          console.log('get list error')
+        })
     },
     getProvinceList() {
       this.FetchProvinceList()
         .then(() => {})
         .catch(() => {
-          console.log("get list error");
-        });
+          console.log('get list error')
+        })
     },
     getCityList() {
-      this.listQuery.cityId = undefined;
-      this.listQuery.districtId = undefined;
+      this.listQuery.cityId = undefined
+      this.listQuery.districtId = undefined
       this.FetchCityList(this.listQuery.provinceId)
         .then(() => {})
         .catch(() => {
-          console.log("get list error");
-        });
+          console.log('get list error')
+        })
     },
     getDistrictList() {
-      this.listQuery.districtId = undefined;
+      this.listQuery.districtId = undefined
       this.FetchDistrictList(this.listQuery.cityId)
         .then(() => {})
         .catch(() => {
-          console.log("get list error");
-        });
+          console.log('get list error')
+        })
     },
     getEditCityList() {
       this.FetchEditCityList(this.detail.provinceId)
         .then(() => {})
         .catch(() => {
-          console.log("get list error");
-        });
+          console.log('get list error')
+        })
     },
     changeCity() {
-      console.log(1);
+      console.log(1)
       // this.detail.cityId = undefined;
       // this.detail.districtId = undefined;
-      this.$set(this.detail,"cityId", undefined)
-      this.$set(this.detail,"districtId", undefined)
-      this.setDetail(this.detail);
+      this.$set(this.detail, 'cityId', undefined)
+      this.$set(this.detail, 'districtId', undefined)
+      this.setDetail(this.detail)
     },
     changeDistrictList() {
-      console.log(2);
+      console.log(2)
       // this.detail.districtId = undefined;
-      this.$set(this.detail,"districtId", undefined)
-      this.setDetail(this.detail);
+      this.$set(this.detail, 'districtId', undefined)
+      this.setDetail(this.detail)
     },
     getEditDistrictList() {
       this.FetchEditDistrictList(this.detail.cityId)
         .then(() => {})
         .catch(() => {
-          console.log("get list error");
-        });
+          console.log('get list error')
+        })
     },
     clearListQuery() {
-      this.listQuery.pageNum = 1;
-      this.listQuery.pageSize = 20;
-      this.listQuery.communityId = undefined;
-      this.listQuery.communityName = undefined;
-      this.listQuery.provinceId = undefined;
-      this.listQuery.cityId = undefined;
-      this.listQuery.districtId = undefined;
-      this.getList();
+      this.listQuery.pageNum = 1
+      this.listQuery.pageSize = 20
+      this.listQuery.communityId = undefined
+      this.listQuery.communityName = undefined
+      this.listQuery.provinceId = undefined
+      this.listQuery.cityId = undefined
+      this.listQuery.districtId = undefined
+      this.getList()
     },
     handleFilter() {
-      this.listQuery.pageNum = 1;
-      this.getList();
+      this.listQuery.pageNum = 1
+      this.getList()
     },
     handleModifyStatus(row, status) {
       this.$message({
-        message: "操作成功",
-        type: "success"
-      });
-      row.status = status;
+        message: '操作成功',
+        type: 'success'
+      })
+      row.status = status
     },
     sortChange(data) {
-      const { prop, order } = data;
-      if (prop === "id") {
-        this.sortByID(order);
+      const { prop, order } = data
+      if (prop === 'id') {
+        this.sortByID(order)
       }
     },
     handleSizeChange(val) {
       // console.log(`每页 ${val} 条`);
-      this.listQuery.pageSize = val;
-      this.getList();
+      this.listQuery.pageSize = val
+      this.getList()
     },
     handleCurrentChange(val) {
       // console.log(`当前页: ${val}`);
-      this.listQuery.pageNum = val;
-      this.getList();
+      this.listQuery.pageNum = val
+      this.getList()
     },
     sortByID(order) {
-      if (order === "ascending") {
-        this.listQuery.sort = "+id";
+      if (order === 'ascending') {
+        this.listQuery.sort = '+id'
       } else {
-        this.listQuery.sort = "-id";
+        this.listQuery.sort = '-id'
       }
-      this.handleFilter();
+      this.handleFilter()
     },
     createData() {
-      this.$refs["dataForm"].validate(valid => {
+      this.$refs['dataForm'].validate(valid => {
         if (valid) {
           this.CreateCommunity(this.detail).then(res => {
-            this.dialogFormVisible = false;
+            this.dialogFormVisible = false
             if (res.code === '0') {
               this.$message({
-                message: "创建成功",
-                type: "success"
-              });
-              this.getList();
+                message: '创建成功',
+                type: 'success'
+              })
+              this.getList()
             } else if (res.code === '1') {
               this.$message({
                 message: res.message,
-                type: "warning"
-              });
+                type: 'warning'
+              })
             }
-          });
+          })
         }
-      });
+      })
     },
     handleUpdate(row) {
-      this.setCurrent(row);
-      this.dialogStatus = "update";
-      this.dialogFormVisible = true;
+      this.setCurrent(row)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       this.$nextTick(() => {
-        this.$refs["dataForm"].clearValidate();
-      });
-      this.getEditCityList();
-      this.getEditDistrictList();
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.getEditCityList()
+      this.getEditDistrictList()
     },
     handleLook(row) {
-      this.setCurrent(row);
-      this.dialogLookFormVisible = true;
+      this.setCurrent(row)
+      this.dialogLookFormVisible = true
       this.$nextTick(() => {
-        this.$refs["dataForm"].clearValidate();
-      });
-      this.getEditCityList();
-      this.getEditDistrictList();
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.getEditCityList()
+      this.getEditDistrictList()
     },
     handleCreate() {
-      this.resetDetail();
-      this.dialogStatus = "create";
-      this.dialogFormVisible = true;
+      this.resetDetail()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
       this.$nextTick(() => {
-        this.$refs["dataForm"].clearValidate();
-      });
+        this.$refs['dataForm'].clearValidate()
+      })
     },
     updateData() {
-      this.$refs["dataForm"].validate(valid => {
+      this.$refs['dataForm'].validate(valid => {
         if (valid) {
           this.UpdateCommunity(this.detail).then(res => {
-            this.dialogFormVisible = false;
+            this.dialogFormVisible = false
             if (res.code === '0') {
               this.$message({
-                message: "更新成功",
-                type: "success"
-              });
-              this.getList();
+                message: '更新成功',
+                type: 'success'
+              })
+              this.getList()
             } else if (res.code === '1') {
-              this.$message.error(res.message);
+              this.$message.error(res.message)
             }
-          });
+          })
         }
-      });
+      })
     },
     handleDelete(row) {
       this.$notify({
-        title: "成功",
-        message: "删除成功",
-        type: "success",
+        title: '成功',
+        message: '删除成功',
+        type: 'success',
         duration: 2000
-      });
-      const index = this.list.indexOf(row);
-      this.list.splice(index, 1);
+      })
+      const index = this.list.indexOf(row)
+      this.list.splice(index, 1)
     },
     handleDownload() {
-      this.downloadLoading = true;
-      import("@/vendor/Export2Excel").then(excel => {
-        const tHeader = ["timestamp", "title", "type", "importance", "status"];
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
         const filterVal = [
-          "timestamp",
-          "title",
-          "type",
-          "importance",
-          "status"
-        ];
-        const data = this.formatJson(filterVal, this.list);
+          'timestamp',
+          'title',
+          'type',
+          'importance',
+          'status'
+        ]
+        const data = this.formatJson(filterVal, this.list)
         excel.export_json_to_excel({
           header: tHeader,
           data,
-          filename: "table-list"
-        });
-        this.downloadLoading = false;
-      });
+          filename: 'table-list'
+        })
+        this.downloadLoading = false
+      })
     },
     padDate(value) {
-      value = value < 10 ? "0" + value : value;
-      return value;
+      value = value < 10 ? '0' + value : value
+      return value
     },
     formatDate(val) {
-      var value = new Date(val);
-      var year = value.getFullYear();
-      var month = this.padDate(value.getMonth() + 1);
-      var day = this.padDate(value.getDate());
-      var hour = this.padDate(value.getHours());
-      var minutes = this.padDate(value.getMinutes());
-      var seconds = this.padDate(value.getSeconds());
+      var value = new Date(val)
+      var year = value.getFullYear()
+      var month = this.padDate(value.getMonth() + 1)
+      var day = this.padDate(value.getDate())
+      var hour = this.padDate(value.getHours())
+      var minutes = this.padDate(value.getMinutes())
+      var seconds = this.padDate(value.getSeconds())
       return (
         year +
-        "-" +
+        '-' +
         month +
-        "-" +
+        '-' +
         day +
-        " " +
+        ' ' +
         hour +
-        ":" +
+        ':' +
         minutes +
-        ":" +
+        ':' +
         seconds
-      );
+      )
     },
     formatJson(filterVal, jsonData) {
       return jsonData.map(v =>
         filterVal.map(j => {
-          if (j === "timestamp") {
-            return parseTime(v[j]);
+          if (j === 'timestamp') {
+            return parseTime(v[j])
           } else {
-            return v[j];
+            return v[j]
           }
         })
-      );
+      )
     },
     getProvinceName(provinceId) {
-      const tempProvince = this.provinceList;
+      const tempProvince = this.provinceList
       for (const i in tempProvince) {
         if (tempProvince[i].id === provinceId) {
-          return tempProvince[i].province;
+          return tempProvince[i].province
         }
       }
     },
     getCityName(cityId) {
-      const tempCity = this.editCityList;
+      const tempCity = this.editCityList
       for (const i in tempCity) {
         if (tempCity[i].id === cityId) {
-          return tempCity[i].city;
+          return tempCity[i].city
         }
       }
     },
     getDistrictName(districtId) {
-      const tempDistrict = this.editDistrictList;
+      const tempDistrict = this.editDistrictList
       for (const i in tempDistrict) {
         if (tempDistrict[i].id === districtId) {
-          return tempDistrict[i].district;
+          return tempDistrict[i].district
         }
       }
     }
   }
-};
+}
 </script>
+<style scoped>
+
+  .search-box {
+    position: absolute;
+    top: 25px;
+    left: 20px;
+  }
+
+  .amap-page-container {
+    position: relative;
+  }
+</style>