src/api/ad.js

@@ -11,10 +11,7 @@ export function fetchAdList(query) {
   return request({
     url: '/v1/ad/list/' + query.adId.ID,
     method: 'get',
-    params: {
-      page: query.page,
-      pageSize: query.pageSize
-    }
+    params: query
   })
 }
 
@@ -84,3 +81,12 @@ export function fetchAddSelectList() {
     params: {}
   })
 }
+export function fetchAdCountryList() {
+  return request({
+    url: '/v1/ad/country',
+    method: 'get',
+    params: {}
+  })
+}
+
+

src/api/article.js

@@ -91,3 +91,10 @@ export function fetchArticleOne(query) {
     method: 'get'
   })
 }
+export function fetchArticleCountryList() {
+  return request({
+    url: '/v1/article/country',
+    method: 'get',
+    params: {}
+  })
+}

src/lang/en.js

@@ -155,6 +155,7 @@ export default {
     slideshow: 'Slideshow',
     image: 'Image',
     adTitle: 'Ad Title',
+    country: "Country",
     content: 'Content',
     sort: 'Sort',
     modifiedBy: 'Modified By',
@@ -173,6 +174,7 @@ export default {
     upload: 'Upload',
     id: 'ID',
     title: 'Title',
+    country: "Country",
     category: 'Category',
     sort: 'Sort',
     creationTime: 'Creation Time',

src/lang/zh.js

@@ -154,6 +154,7 @@ export default {
     slideshow: '幻灯',
     image: '图片',
     adTitle: '标题',
+    country: "国家",
     content: '内容',
     sort: '排序',
     modifiedBy: '更新人',
@@ -172,6 +173,7 @@ export default {
     upload: '上传',
     id: '序号',
     title: '标题',
+    country: "国家",
     category: '分类',
     sort: '排序',
     creationTime: '创建时间',

src/views/ad/edit.vue

@@ -6,7 +6,7 @@
           <el-input v-model="form.title" />
         </el-form-item>
         <el-form-item :label="$t('ad.adLocation')">
-          <el-select v-model="form.lid" placeholder="Select Type"> <!-- 请选择广告类型 -->
+          <el-select v-model="form.lid" placeholder="Select Location"> <!-- 请选择广告类型 -->
             <el-option
               v-for="item in allLocation"
               :key="item.ID"
@@ -15,6 +15,11 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item :label="$t('transportationConfig.countryName')">
+          <el-select v-model="form.countryId" filterable ref="countryId" @change="countryChange" @blur="countryVisibleChange($event)" placeholder="Select Country">
+            <el-option v-for="(item,index) in allCountry" :key="index" :label="item.NAME" :value="item.ID"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('ad.type')"> <!-- 广告类型 -->
           <el-select v-model="form.type" placeholder="Select Type" style="width: 400px;"> <!-- 请选择广告类型 -->
             <el-option :key="1" label="External Link" value="1" /> <!-- 外链 -->
@@ -32,6 +37,7 @@
               :key="item.ID"
               :label="item.TITLE"
               :value="item.ID"
+              v-show="item.COUNTRY_ID === form.countryId"
             />
           </el-select>
         </el-form-item>
@@ -48,13 +54,13 @@
         <el-form-item>
           <el-button type="primary" :loading="submitButtonStat" @click="onSubmit">{{ $t('common.save') }}</el-button>
         </el-form-item>
-        </el-form-item></el-form>
+      </el-form>
     </div>
   </div>
 </template>
 
 <script>
-import { fetchDetail, fetchEdit, fetchAdd, fetchAddSelectList } from '@/api/ad'
+import {fetchDetail, fetchEdit, fetchAdd, fetchAddSelectList, fetchAdCountryList} from '@/api/ad'
 import tool from '@/utils/tool'
 import Upload from '@/components/Upload'
 import ElementUI from 'element-ui'
@@ -69,14 +75,16 @@ export default {
         image: '',
         lid: '',
         title: '',
-        type: ''
+        type: '',
+        countryId: '',
       },
       url: '',
       article: '',
       allArticle: '',
       loading: false,
       submitButtonStat: false,
-      defaultImageUrl: null
+      defaultImageUrl: null,
+      allCountry: []
     }
   },
   watch: {
@@ -100,9 +108,12 @@ export default {
         this.form.lid = response.data.oneData.LID
         this.form.type = response.data.oneData.TYPE
         this.allArticle = response.data.allArticle
+
         this.form.image = response.data.oneData.IMAGE
         this.form.content = response.data.oneData.CONTENT
+        this.form.countryId = response.data.oneData.COUNTRY_ID
         this.defaultImageUrl = response.data.oneData.IMAGE
+        this.allCountry = response.data.countries
         if (response.data.oneData.TYPE === '1') {
           this.url = response.data.oneData.CONTENT
         } else {
@@ -116,6 +127,7 @@ export default {
       fetchAddSelectList().then(response => {
         this.allLocation = response.data.allLocation
         this.allArticle = response.data.allArticle
+        this.allCountry = response.data.countries
 
         this.loading = false
       }).catch((error) => {
@@ -137,7 +149,12 @@ export default {
           })
           this.$router.go(-1)
        }).catch((error) => {
-           ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
+          this.$message({
+            message: error.message,
+            type: 'error',
+            showClose: true
+          })
+          this.submitButtonStat = false
        })
       } else {
         //console.log(this.form)
@@ -149,7 +166,12 @@ export default {
           })
           this.$router.go(-1)
         }).catch((error) => {
-            ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
+          this.$message({
+            message: error.message,
+            type: 'error',
+            showClose: true
+          })
+          this.submitButtonStat = false
         })
       }
     },
@@ -157,7 +179,17 @@ export default {
       this.imageAd = imageUrl
       this.form.image =imageUrl
       this.defaultImageUrl = tool.getArImage(imageUrl, '/files/')
-    }
+    },
+    countryChange(row){
+      console.log('countryChange--->'+row)
+      this.$nextTick(() => {
+        this.$refs.countryId.blur()
+        this.article = ''
+      });
+
+    },
+    countryVisibleChange(event){
+    },
   }
 }
 </script>

src/views/ad/list.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="white-box">
     <div class="filter-box">
+      <!-- 功能搜索 -->
+      <div class="filter-box">
+        <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
+      </div>
       <el-table
         :key="tableKey"
         v-loading="listLoading"
@@ -11,34 +15,41 @@
         style="width: 100%;"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55" />
-        <el-table-column :label="$t('ad.adTitle')" prop="id" align="center" :class-name="getSortClass('id')">
+<!--        <el-table-column type="selection" width="55" />-->
+        <el-table-column :label="$t('ad.country')" prop="id" align="center" :class-name="getSortClass('id')">
           <template slot-scope="{row}">
-            <span>{{ row.TITLE }}</span>
+            <span>{{ row.COUNTRY_NAME }}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('ad.adLocation')" prop="id" align="center" :class-name="getSortClass('id')">
-          <template :value="{allLocation}">
-            <span>{{ allLocation.LOCATION_NAME }}</span>
+        <el-table-column :label="$t('ad.adTitle')" prop="id" align="center" :class-name="getSortClass('id')">
+          <template slot-scope="{row}">
+            <span>{{ row.TITLE.value }}</span>
           </template>
         </el-table-column>
+<!--        <el-table-column :label="$t('ad.adLocation')" prop="id" align="center" :class-name="getSortClass('id')">-->
+<!--          <template :value="{allLocation}">-->
+<!--            <span>{{ allLocation.LOCATION_NAME }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
         <el-table-column :label="$t('ad.type')" align="center"> <!-- 类型 -->
           <template slot-scope="{row}">
-            <template v-if="row.TYPE === '1'">
-              <el-tag type="success">External Links</el-tag> <!-- 外链 -->
-            </template>
-            <template v-else-if="row.TYPE === '2'">
-              <el-tag>Article</el-tag> <!-- 文章 -->
+            <template>
+              <div v-if="row.TYPE === '1'">
+               {{ $t('ad.externalLinks') }}
+              </div><!-- 链接 -->
+              <div v-else-if="row.TYPE === '2'">
+                {{ $t('ad.article') }}
+              </div><!-- 文章 -->
             </template>
           </template>
         </el-table-column>
         <el-table-column :label="$t('ad.content')" prop="id" align="center" :class-name="getSortClass('id')">
           <template slot-scope="{row}">
             <div v-if="row.TYPE === '1'">
-              <el-link type="primary" target="_blank" :href="getHref(row.CONTENT)">{{ row.CONTENT }}</el-link>
+              <el-link type="primary" target="_blank" :href="getHref(row.CONTENT.value)">{{ row.CONTENT.value }}</el-link>
             </div><!-- 链接 -->
             <div v-else-if="row.TYPE === '2'">
-              <router-link :to="`/article/detail/${row.CONTENT}`" target="_blank" style="cursor: pointer;">{{ getContent(row.CONTENT) }}</router-link>
+              <router-link :to="`/article/detail/${row.CONTENT.value}`" target="_blank" style="cursor: pointer;">{{ getContent(row.CONTENT.value) }}</router-link>
             </div><!-- 文章 -->
           </template>
         </el-table-column>
@@ -53,39 +64,35 @@
             />
           </template>
         </el-table-column>
-        <el-table-column :label="$t('ad.creator')" prop="id" align="center" :class-name="getSortClass('id')">
-          <template slot-scope="{row}">
-            <span>{{ row.CREATE_ADMIN_NAME }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('ad.createTime')" align="center">
-          <template slot-scope="{row}">
-            <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('ad.modifiedBy')" prop="id" align="center" width="80" :class-name="getSortClass('id')">
-          <template slot-scope="{row}">
-            <span>{{ row.UPDATE_ADMIN_NAME }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('ad.modifiedTime')" align="center">
-          <template slot-scope="{row}">
-            <span>{{ tool.formatDate(row.UPDATED_AT) }}</span>
+<!--        <el-table-column :label="$t('ad.creator')" prop="id" align="center" :class-name="getSortClass('id')">-->
+<!--          <template slot-scope="{row}">-->
+<!--            <span>{{ row.CREATE_ADMIN_NAME }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--        <el-table-column :label="$t('ad.createTime')" align="center">-->
+<!--          <template slot-scope="{row}">-->
+<!--            <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--        <el-table-column :label="$t('ad.modifiedBy')" prop="id" align="center" width="80" :class-name="getSortClass('id')">-->
+<!--          <template slot-scope="{row}">-->
+<!--            <span>{{ row.UPDATE_ADMIN_NAME }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--        <el-table-column :label="$t('ad.modifiedTime')" align="center">-->
+<!--          <template slot-scope="{row}">-->
+<!--            <span>{{ tool.formatDate(row.UPDATED_AT) }}</span>-->
 
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('ad.status')" align="center"> <!-- 类型 -->
+<!--          </template>-->
+<!--        </el-table-column>-->
+        <el-table-column :label="$t('article.status')" align="center">
           <template slot-scope="{row}">
-            <template v-if="row.STATUS === '1'">
-              <el-tag type="success">show</el-tag> <!-- 外链 -->
-            </template>
-            <template v-else>
-              <el-tag>hide</el-tag> <!-- 文章 -->
-            </template>
+            <div v-if="row.STATUS.value === '1'">{{$t('article.show')}}</div>
+            <div v-else>{{$t('article.hide')}}</div>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('ad.action')" align="center">
 
+        <el-table-column :label="$t('ad.action')" align="center">
           <template slot-scope="{row}">
             <el-dropdown v-if="permission.hasPermission(`ad/ad-delete`) || permission.hasPermission(`ad/edit`)" size="small" trigger="click">
               <el-button type="primary" size="small" @click.stop="">
@@ -102,18 +109,18 @@
         </el-table-column>
       </el-table>
       <div class="white-box-footer">
-        <el-dropdown v-if="permission.hasPermission(`ad/ad-delete`)" size="small">
-          <el-button type="primary" size="small">
-            {{ $t('ad.selectData') }}<i class="el-icon-arrow-down el-icon--right" />
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="delete" @click.native="handleMuliDel()">{{ $t('table.delete') }}</el-dropdown-item>
-            <el-dropdown-item command="hide" @click.native="handleMultiHide()">{{ $t('ad.hide') }}</el-dropdown-item>
-            <el-dropdown-item command="un-hide" @click.native="handleMultiUnHide()">{{ $t('ad.unhide') }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+<!--        <el-dropdown v-if="permission.hasPermission(`ad/ad-delete`)" size="small">-->
+<!--          <el-button type="primary" size="small">-->
+<!--            {{ $t('ad.selectData') }}<i class="el-icon-arrow-down el-icon&#45;&#45;right" />-->
+<!--          </el-button>-->
+<!--          <el-dropdown-menu slot="dropdown">-->
+<!--            <el-dropdown-item command="delete" @click.native="handleMuliDel()">{{ $t('table.delete') }}</el-dropdown-item>-->
+<!--            <el-dropdown-item command="hide" @click.native="handleMultiHide()">{{ $t('ad.hide') }}</el-dropdown-item>-->
+<!--            <el-dropdown-item command="un-hide" @click.native="handleMultiUnHide()">{{ $t('ad.unhide') }}</el-dropdown-item>-->
+<!--          </el-dropdown-menu>-->
+<!--        </el-dropdown>-->
         <el-button v-if="permission.hasPermission(`ad/ad-delete`)" type="primary" size="small" icon="el-icon-plus" @click="handleAdd">{{ $t('ad.add') }}</el-button>
-        <pagination v-show="total>0" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+        <pagination v-show="total>0" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getData" />
       </div>
       </div>
   </div>
@@ -127,6 +134,8 @@ import tool from '@/utils/tool'
 import permission from '@/utils/permission'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import ElementUI from 'element-ui'
+import FilterUser from "@/components/FilterUser.vue";
+import filterHelper from "@/utils/filterHelper";
 
 const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
@@ -141,7 +150,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
 
 export default {
   name: 'ComplexTable',
-  components: { Pagination },
+  components: {FilterUser, Pagination },
   directives: { waves },
   filters: {
     statusFilter(status) {
@@ -208,34 +217,44 @@ export default {
       allArticle: [],
       allLocation: {
         LOCATION_NAME: null
-      }
+      },
+      filterTypes: null,
+      filterModel: {},
     }
   },
   created() {
-    this.getList()
+    this.getData()
   },
   methods: {
     handleSelectionChange(val) {
       this.multipleSelection = val
     },
     handleSizeChange (pageSize) {
-      this.getList(this.currentPage, pageSize)
+      this.getData(this.currentPage, pageSize)
     },
     handleCurrentChange (page) {
-      this.getList(page, this.pageSize)
+      this.getData(page, this.pageSize)
     },
-    getList(page, pageSize) {
+    getData(page, pageSize) {
       this.listLoading = true
       this.listQuery.adId = this.$route.params
       this.listQuery.page = (page === null || page == undefined) ? 1 : page
       this.listQuery.pageSize = (pageSize === null || pageSize == undefined) ? this.pageSize : pageSize
-      fetchAdList(this.listQuery).then(response => {
+      const paramsData = Object.assign({
+        adId: this.$route.params,
+        page: (page === null || page == undefined) ? 1 : page,
+        pageSize: (pageSize === null || pageSize == undefined) ? this.pageSize : pageSize
+      }, this.filterModel)
+      // const paramsData = Object.assign(this.listQuery, this.filterModel)
+      fetchAdList(paramsData).then(response => {
         this.list = response.data.list
         this.total = response.data.totalCount
         this.allArticle = response.data.allArticle
         const ad_id = this.listQuery.adId.ID
         this.allLocation = response.data.allLocation[ad_id]
         this.pageSize = pageSize
+        this.filterTypes = response.data.filterTypes
+
         // Just to simulate the time of the request
         setTimeout(() => {
           this.listLoading = false
@@ -244,7 +263,7 @@ export default {
     },
     handleFilter() {
       this.listQuery.page = 1
-      this.getList()
+      this.getData()
     },
     resetTemp() {
       this.temp = {
@@ -330,7 +349,7 @@ export default {
             message: response.data,
             type: 'success'
           })
-          obj.getList(obj.currentPage, obj.pageSize)
+          obj.getData(obj.currentPage, obj.pageSize)
         }).catch((error) => {
             ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         })
@@ -356,7 +375,7 @@ export default {
             message: response.data,
             type: 'success'
           })
-          obj.getList(obj.currentPage, obj.pageSize)
+          obj.getData(obj.currentPage, obj.pageSize)
         }).catch((error) => {
             ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         })
@@ -385,12 +404,16 @@ export default {
             message: response.data,
             type: 'success'
           })
-          obj.getList(obj.currentPage, obj.pageSize)
+          obj.getData(obj.currentPage, obj.pageSize)
        }).catch((error) => {
            ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
        })
       })
-    }
+    },
+    handleFilterUser(filterData) {
+      console.log(filterData)
+      filterHelper.handleFilterUser(this, filterData)
+    },
   }
 }
 </script>

src/views/article/edit.vue

@@ -10,6 +10,11 @@
             <el-option v-for="item in allCategory" :key="item.ID" :label="item.CATE_NAME" :value="item.ID" />
           </el-select>
         </el-form-item>
+        <el-form-item :label="$t('transportationConfig.countryName')">
+          <el-select v-model="form.countryId" filterable ref="countryId" @change="countryChange" @blur="countryVisibleChange($event)" placeholder="Select Country">
+            <el-option v-for="(item,index) in allCountry" :key="index" :label="item.NAME" :value="item.ID"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('article.order')" style="width: 500px;"><!--排序值-->
           <el-input v-model="form.sort" />
         </el-form-item>
@@ -35,7 +40,13 @@
 
 <script>
 import Tinymce from '@/components/Tinymce'
-import { fetchArticleDetail, fetchArticleAdd, fetchArticleAddList, fetchArticleEdit } from '@/api/article'
+import {
+  fetchArticleDetail,
+  fetchArticleAdd,
+  fetchArticleAddList,
+  fetchArticleEdit,
+  fetchArticleCountryList
+} from '@/api/article'
 import tool from '@/utils/tool'
 import ElementUI from 'element-ui'
 
@@ -48,13 +59,15 @@ export default {
         title: '',
         cid: null,
         content: '',
-        sort: 1
+        sort: 1,
+        countryId: '',
       },
       content: '',
       allCategory: null,
       loading: true,
       submitButtonStat: false,
-      isEdit: false
+      isEdit: false,
+      allCountry: []
     }
   },
   mounted() {
@@ -64,13 +77,16 @@ export default {
         this.form.cid = response.data.oneData.CID
         this.form.content = response.data.oneData.CONTENT
         this.form.sort = response.data.oneData.SORT
+        this.form.countryId = response.data.oneData.COUNTRY_ID
         this.allCategory = response.data.allCategory
+        this.allCountry = response.data.countries
         this.loading = false
         this.isEdit = true
       })
     } else {
       fetchArticleAddList().then(response => {
         this.allCategory = response.data.allCategory
+        this.allCountry = response.data.countries
         this.loading = false
       })
     }
@@ -88,7 +104,12 @@ export default {
           })
           this.$router.go(-1)
           }).catch((error) => {
-            ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
+          this.$message({
+            message: error.message,
+            type: 'error',
+            showClose: true
+          })
+          this.submitButtonStat = false
         })
       } else {
         fetchArticleAdd(this.form).then(response => {
@@ -99,10 +120,24 @@ export default {
           })
           this.$router.go(-1)
         }).catch((error) => {
-          ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
+          this.$message({
+            message: error.message,
+            type: 'error',
+            showClose: true
+          })
+          this.submitButtonStat = false
         })
       }
-    }
+    },
+    countryChange(row){
+      console.log('countryChange--->'+row)
+      this.$nextTick(() => {
+        this.$refs.countryId.blur()
+      });
+    },
+    countryVisibleChange(event){
+      console.log('countryVisibleChange--->'+event)
+    },
   }
 }
 </script>

src/views/article/index.vue

@@ -1,44 +1,52 @@
 <template>
   <div v-loading="loading">
     <div class="white-box">
+      <!-- 功能搜索 -->
+      <div class="filter-box">
+        <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
+      </div>
       <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column :label="$t('article.id')" prop="ID">
-          <template slot-scope="scope">
-            <router-link :to="`/article/detail/${scope.row.ID}`" target="_blank" class="islide">
-              <span>{{ scope.row.ID }}</span>
-            </router-link>
-          </template>
-        </el-table-column>
+<!--        <el-table-column type="selection" width="55" />-->
+<!--        <el-table-column :label="$t('article.id')" prop="ID">-->
+<!--          <template slot-scope="scope">-->
+<!--            <router-link :to="`/article/detail/${scope.row.ID}`" target="_blank" class="islide">-->
+<!--              <span>{{ scope.row.ID }}</span>-->
+<!--            </router-link>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
         <el-table-column :label="$t('article.title')" prop="TITLE">
           <template slot-scope="scope">
             <router-link :to="`/article/detail/${scope.row.ID}`" target="_blank" class="islide">
-              <span>{{ scope.row.TITLE }}</span>
+              <span>{{ scope.row.TITLE.value }}</span>
             </router-link>
           </template>
         </el-table-column><!--标题-->
-        <el-table-column :label="$t('article.category')"><!--分类-->
+        <el-table-column :label="$t('article.country')" prop="TITLE" width="220">
           <template slot-scope="scope">
-            {{ allData.allCategory[scope.row.CID].CATE_NAME }}
+            {{ scope.row.COUNTRY_NAME }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('article.sort')" width="100"> <!-- 排序 -->
+<!--        <el-table-column :label="$t('article.category')">&lt;!&ndash;分类&ndash;&gt;-->
+<!--          <template slot-scope="scope">-->
+<!--            {{ allData.allCategory[scope.row.CID].CATE_NAME }}-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+        <el-table-column :label="$t('article.sort')" width="80"> <!-- 排序 -->
           <template slot-scope="scope">
             <el-input v-model="scope.row.SORT" min="0" max="99" @change="handleChangeSort(scope.row, scope.row.SORT)" />
           </template>
         </el-table-column>
-        <el-table-column :label="$t('article.creationTime')"><!--创建时间-->
+        <el-table-column :label="$t('article.status')"> <!-- 状态 -->
           <template slot-scope="scope">
-            {{ tool.formatDate(scope.row.CREATED_AT) }}
+            <div v-if="scope.row.STATUS.value === '1'">{{$t('article.show')}}</div>
+            <div v-else>{{$t('article.hide')}}</div>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('article.status')"> <!-- 状态 -->
+        <el-table-column :label="$t('article.creationTime')"><!--创建时间-->
           <template slot-scope="scope">
-            <div v-if="scope.row.STATUS === '1'">{{$t('article.show')}}</div>
-            <div v-else>{{$t('article.hide')}}</div>
+            {{ scope.row.CREATED_AT.value }}
           </template>
         </el-table-column>
-
         <el-table-column fixed="right" :label="$t('article.action')" width="180"><!--操作-->
           <template slot-scope="scope">
             <el-dropdown size="small" trigger="click">
@@ -56,16 +64,16 @@
         </el-table-column>
       </el-table>
       <div class="white-box-footer">
-        <el-dropdown size="small" trigger="click">
-          <el-button type="primary" size="small">
-            {{$t('common.selectData')}}<!--所选数据--><i class="el-icon-arrow-down el-icon--right" />
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="delete" @click.native="handleMuliDel()">{{$t('common.delete')}}</el-dropdown-item>
-            <el-dropdown-item command="hide" @click.native="handleMultiHide()">{{$t('common.hide')}}</el-dropdown-item>
-            <el-dropdown-item command="un-hide" @click.native="handleMultiUnHide()">{{$t('common.unhide')}}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+<!--        <el-dropdown size="small" trigger="click">-->
+<!--          <el-button type="primary" size="small">-->
+<!--            {{$t('common.selectData')}}&lt;!&ndash;所选数据&ndash;&gt;<i class="el-icon-arrow-down el-icon&#45;&#45;right" />-->
+<!--          </el-button>-->
+<!--          <el-dropdown-menu slot="dropdown">-->
+<!--            <el-dropdown-item command="delete" @click.native="handleMuliDel()">{{$t('common.delete')}}</el-dropdown-item>-->
+<!--            <el-dropdown-item command="hide" @click.native="handleMultiHide()">{{$t('common.hide')}}</el-dropdown-item>-->
+<!--            <el-dropdown-item command="un-hide" @click.native="handleMultiUnHide()">{{$t('common.unhide')}}</el-dropdown-item>-->
+<!--          </el-dropdown-menu>-->
+<!--        </el-dropdown>-->
         <el-button type="primary" size="small" @click="handleAdd">{{$t('article.newArticle')}}</el-button><!--添加文章-->
         <el-pagination
           :current-page="currentPage"
@@ -85,9 +93,12 @@
 import { fetchArticleIndex, fetchChangeArticleSort, fetchArticleHide, fetchArticleUnhide, fetchArticleDel } from '@/api/article'
 import tool from '@/utils/tool'
 import ElementUI from 'element-ui'
+import FilterUser from "@/components/FilterUser.vue";
+import filterHelper from "@/utils/filterHelper";
 
 export default {
   name: 'ArticleIndex',
+  components: {FilterUser},
   data() {
     return {
       allData: null,
@@ -98,7 +109,9 @@ export default {
       totalPages: 1,
       totalCount: 1,
       pageSize: 20,
-      tool: tool
+      tool: tool,
+      filterTypes: null,
+      filterModel: {},
     }
   },
   mounted() {
@@ -146,11 +159,16 @@ export default {
     },
     getData(page, pageSize) {
       this.loading = true
-      if (page === undefined) page = 1
-      if (pageSize === undefined) pageSize = 20
-      fetchArticleIndex({ page: page, pageSize: pageSize }).then(response => {
+      const paramsData = Object.assign({
+        page: (page === null || page == undefined) ? 1 : page,
+        pageSize: (pageSize === null || pageSize == undefined) ? this.pageSize : pageSize
+      }, this.filterModel)
+      fetchArticleIndex(paramsData).then(response => {
         this.allData = response.data
         this.tableData = response.data.list
+        this.filterTypes = response.data.filterTypes
+        this.totalCount = response.data.totalCount
+        this.pageSize = response.data.pageSize
         // Just to simulate the time of the request
       })
       setTimeout(() => {
@@ -234,7 +252,11 @@ export default {
            ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
        })
       })
-    }
+    },
+    handleFilterUser(filterData) {
+      console.log(filterData)
+      filterHelper.handleFilterUser(this, filterData)
+    },
   }
 }
 

src/views/user/member-list.vue

@@ -356,6 +356,7 @@ export default {
 			this.getData(this.currentPage, pageSize)
 		},
 		handleFilterUser(filterData) {
+      console.log(filterData)
 			filterHelper.handleFilterUser(this, filterData)
 		},
 		handleFilter() {