排序、状态等

src/views/admin/ad-list.vue

@@ -48,6 +48,7 @@
         <el-select
           v-model="filterForm.gameid"
           placeholder="请选择游戏"
+          @change="changeGame"
         >
           <el-option
             label="所有"
@@ -61,6 +62,26 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item
+        label="广告位"
+        prop="locationid"
+      >
+        <el-select
+          v-model="filterForm.locationid"
+          placeholder="请选择广告位"
+        >
+          <el-option
+            label="所有"
+            :value="''"
+          />
+          <el-option
+            :label="item.label"
+            :value="item.id"
+            v-for="(item, index) in locationList"
+            :key="index"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
@@ -75,6 +96,10 @@
     <!-- toolbar -->
     <div class="toolbar clearfix">
       <div class="l fl">
+        <el-button
+          type="primary"
+          @click="addAd"
+        >新增</el-button>
         <el-button
           type="success"
           v-if="batch.show"
@@ -107,6 +132,7 @@
       class="table mgt-20 mgb-20"
       @row-click="rowClick"
       @selection-change="tableSelectionChange"
+      @sort-change="changeSort"
     >
       <el-table-column
         v-if="batch.show"
@@ -173,11 +199,14 @@
         prop="ad_sort"
         label="优先级"
         show-overflow-tooltip
-        width="75"
+        sortable
+        width="100"
       />
       <el-table-column
         prop="status"
         label="审核状态"
+        sortable
+        width="120"
       >
         <template slot-scope="scope">
           <el-tag
@@ -259,7 +288,7 @@
 </template>
 
 <script>
-import {getAd, updateAd, delAd, getAdPos, getAdAreaList} from '@/api/ad'
+import {getAd, updateAd, delAd, getAdPos} from '@/api/ad'
 import {getGameList} from '@/api/game'
 import {typeList, modeList} from '@/utils/ad-data'
 import {Promise, reject} from 'q'
@@ -285,6 +314,7 @@ export default {
       filterForm: {
         status: '',
         gameid: '',
+        locationid: '',
       },
       //  toolbar
       batch: {
@@ -318,7 +348,8 @@ export default {
       this.platformList[platformKey] = `${item.platform_name}`
     })
 
-    this.getData()
+    await this.getData()
+    await this.changeGame()
   },
   methods: {
     // common
@@ -416,10 +447,42 @@ export default {
     // filter
     filter() {
       this.currentPage = 1
+      this.$router.push({
+        query: {
+          status: this.filterForm.status,
+          gameid: this.filterForm.gameid,
+          locationid: this.filterForm.locationid,
+          pageSize: this.pageSize,
+          currentPage: this.currentPage,
+        },
+      })
       this.getData()
     },
+    async changeGame() {
+      if (this.filterForm.gameid !== '') {
+        this.filterForm.locationid = ''
+        const location = await this.getAdPos({
+          channelid: 6001,
+          gameid: this.filterForm.gameid,
+        })
+        if (!location.message || location.message.length === 0) {
+          this.locationList = []
+          return
+        }
 
+        this.locationList = location.message.map(item => {
+          const area = item.area.split(',')
+          return {
+            id: item.id,
+            label: `${JSON.parse(item.ld_property).title}`,
+          }
+        })
+      }
+    },
     // toolbar
+    addAd() {
+      this.$router.push('/ad/edit')
+    },
     refreshData() {
       this.currentPage = 1
       this.getData()
@@ -523,15 +586,47 @@ export default {
     },
     // table
     async getData() {
+      console.log(this.$route.query)
+      const history = {
+        status: this.$route.query.status,
+        gameid: this.$route.query.gameid || '',
+        locationid: parseInt(this.$route.query.locationid) || '',
+      }
+
+      if(history.status === '0') {
+        history.status = 0
+      } else if(history.status) {
+        history.status = parseInt(history.status)
+      } else {
+        history.status = ''
+      }
+
+      console.log(history)
+
+      this.filterForm.status = history.status
+      this.filterForm.gameid = history.gameid
+      this.filterForm.locationid = history.locationid
+
       this.isLoaded = true
       const params = {}
       if (this.filterForm.status !== '') params.status = this.filterForm.status
-      if (this.filterForm.gameid !== '') params.gameid = parseInt(this.filterForm.gameid)
+      if (this.filterForm.gameid !== '')
+        params.gameid = parseInt(this.filterForm.gameid)
       try {
-        const data = await this.getAd(params)
+        const dataRes = await this.getAd(params)
-        this.tableData = data.message.sort((a, b) => {
+        let data = dataRes.message
+
+        if (this.filterForm.locationid !== '') {
+          data = data.filter(item => {
+            const locs = JSON.parse(item.locationid)
+            return locs.includes(this.filterForm.locationid)
+          })
+        }
+
+        this.tableData = data.sort((a, b) => {
           return b.id - a.id
         })
+
         this.total = this.tableData.length
         this.sliceData()
         this.isLoaded = false
@@ -658,10 +753,56 @@ export default {
           this.$message.info('操作已取消！')
         })
     },
+    changeSort({column, prop, order}) {
+      if (prop === 'status') {
+        this.sortStatus(order)
+      }
+    },
+    sortStatus(order) {
+      if (order === 'ascending') {
+        this.tableData = this.tableData.sort(function(a, b) {
+          if (a.status >= b.status) {
+            return 1
+          } else {
+            return -1
+          }
+        })
+      } else if (order === 'descending') {
+        this.tableData = this.tableData.sort(function(a, b) {
+          if (a.status >= b.status) {
+            return -1
+          } else {
+            return 1
+          }
+        })
+      }
+      this.pageChange(1)
+    },
+    sortAdSort(order) {
+      if (order === 'ascending') {
+        this.tableData = this.tableData.sort(function(a, b) {
+          if (a.ad_sort >= b.ad_sort) {
+            return 1
+          } else {
+            return -1
+          }
+        })
+      } else if (order === 'descending') {
+        this.tableData = this.tableData.sort(function(a, b) {
+          if (a.ad_sort >= b.ad_sort) {
+            return -1
+          } else {
+            return 1
+          }
+        })
+      }
+      this.pageChange(1)
+    },
     // pagination
     sizeChange(val) {
       this.pageSize = val
       this.sliceData()
+      console.log(this.$route)
     },
     pageChange(val) {
       this.currentPage = val