feat:CN-1683 location map 增加关注列表

2024-08-06 17:14:23 +08:00
parent 60e3acecd7
commit 7b42d395a7
4 changed files with 374 additions and 5 deletions
--- a/src/components/rightBox/location/MyFollowBox.vue
+++ b/src/components/rightBox/location/MyFollowBox.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="right-box">
+    <div class="right-box__header">
+      <div class="header__title">{{ $t('location.myFollow')}}</div>
+      <div class="header__operation">
+        <span @click="esc"><i class="cn-icon cn-icon-close"></i></span>
+      </div>
+    </div>
+    <cn-data-list
+            ref="dataList"
+            :tableId="tableId"
+            v-model:custom-table-title="tools.customTableTitle"
+            :api="url"
+    >
+      <template #top-tool-left>
+        <button id="cancleFollows" class="business-button business-button--light margin-r-10" style="width:fit-content;"
+                :disabled="disableCancle" @click="cancleFollowBatch">
+          <span>{{ $t('location.cancleFollow') }}</span>
+        </button>
+      </template>
+      <template #default>
+        <loading :loading="loading"></loading>
+        <my-follow-table
+                ref="dataTable"
+                :api="url"
+                :isNoData="isNoData"
+                :custom-table-title="tools.customTableTitle"
+                :table-data="tableData"
+                @reload="getTableData"
+                @selectionChange="selectionChange"
+                @handleFollow="handleFollow"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { api } from '@/utils/api'
+import cnDataList from '@/components/table/CnDataList'
+import myFollowTable from '@/components/table/location/MyFollowTable'
+import dataListMixin from '@/mixins/data-list'
+
+export default {
+  name: 'MyFollowBox',
+  mixins: [dataListMixin],
+  props: {
+    timeFilter: {
+      type: Object
+    },
+    level: {
+      type: Number
+    }
+  },
+  components: {
+    cnDataList,
+    myFollowTable
+  },
+  data () {
+    return {
+      url:  api.location.followedSubscriber,
+      tableId: 'myFollowTable',
+      disableCancle: true
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    handleFollow(item) {
+      this.$emit('handleFollow', item)
+    },
+    getTableData () {
+      this.searchLabel = {
+        startTime: this.timeFilter.startTime,
+        endTime: this.timeFilter.endTime,
+        level: this.level,
+        ...this.pageObj
+      }
+      this.isNoData = false
+      this.toggleLoading(true)
+      delete this.searchLabel.total
+
+      axios.get(this.url, { params: this.searchLabel }).then(response => {
+        if (response.status === 200) {
+          for (let i = 0; i < response.data.data.list.length; i++) {
+            response.data.data.list[i].isFollowed = 1
+          }
+          this.tableData = response.data.data.list
+          this.pageObj.total = response.data.data.total
+        } else {
+          console.error(response.data)
+          this.isNoData = true
+          if (response.data.message) {
+            this.$message.error(response.data.message)
+          } else {
+            this.$message.error(this.$t('tip.somethingWentWrong'))
+          }
+        }
+      }).finally(() => {
+        this.toggleLoading(false)
+        this.isNoData = !this.tableData || this.tableData.length === 0
+      })
+    },
+    selectionChange (objs) {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.subscriberId === obj.subscriberId)
+        if (delObj === undefined) {// && obj.isFollowed === 1
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      this.disableCancle = this.batchDeleteObjs.length < 1
+    },
+    cancleFollowBatch() {
+      const ids = []
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
+        this.batchDeleteObjs.forEach(item => {
+          ids.push(item.subscriberId)
+        })
+      }
+      this.toggleLoading(true)
+      axios.delete(api.location.follow + '?subscriberIds=' + ids.join(',')).then(response => {
+        if (response.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+          this.batchDeleteObjs.forEach(item => {
+            item.isFollowed = 0
+          })
+        } else {
+          this.$message.error(response.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(e.response.data.message)
+      }).finally(() => {
+        this.toggleLoading(false)
+        this.$emit('handleCancleFollowBatch', this.batchDeleteObjs)
+      })
+    },
+    /* 关闭弹框 */
+    esc () {
+      this.$emit('close')
+    }
+  }
+}
+</script>