src/api/ad.js

@@ -84,3 +84,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/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" /> <!-- 外链 -->
@@ -26,7 +31,7 @@
           <span class="note" /> <!-- 注:外链请明确输入 http://或https://，文章则不需要输入 -->
         </el-form-item>
         <el-form-item :label="$t('ad.article')">
-          <el-select v-model="article" placeholder="Select Article"> <!-- 请选择广告类型 -->
+          <el-select v-model="article" placeholder="Select A rticle"> <!-- 请选择广告类型 -->
             <el-option
               v-for="item in allArticle"
               :key="item.ID"
@@ -54,7 +59,7 @@
 </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'
@@ -77,7 +82,8 @@ export default {
       allArticle: '',
       loading: false,
       submitButtonStat: false,
-      defaultImageUrl: null
+      defaultImageUrl: null,
+      allCountry: []
     }
   },
   watch: {
@@ -101,10 +107,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 {
@@ -118,6 +126,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) => {
@@ -159,7 +168,16 @@ 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()
+      });
+
+    },
+    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"
@@ -19,7 +23,7 @@
         </el-table-column>
         <el-table-column :label="$t('ad.adTitle')" prop="id" align="center" :class-name="getSortClass('id')">
           <template slot-scope="{row}">
-            <span>{{ row.TITLE }}</span>
+            <span>{{ row.TITLE.value }}</span>
           </template>
         </el-table-column>
 <!--        <el-table-column :label="$t('ad.adLocation')" prop="id" align="center" :class-name="getSortClass('id')">-->
@@ -130,6 +134,7 @@ 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";
 
 const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
@@ -144,7 +149,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
 
 export default {
   name: 'ComplexTable',
-  components: { Pagination },
+  components: {FilterUser, Pagination },
   directives: { waves },
   filters: {
     statusFilter(status) {
@@ -211,7 +216,8 @@ export default {
       allArticle: [],
       allLocation: {
         LOCATION_NAME: null
-      }
+      },
+      filterTypes: null
     }
   },
   created() {
@@ -239,6 +245,8 @@ export default {
         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

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'
 
@@ -55,7 +66,8 @@ export default {
       allCategory: null,
       loading: true,
       submitButtonStat: false,
-      isEdit: false
+      isEdit: false,
+      allCountry: []
     }
   },
   mounted() {
@@ -67,12 +79,14 @@ export default {
         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
       })
     }
@@ -104,7 +118,16 @@ export default {
           ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
         })
       }
-    }
+    },
+    countryChange(row){
+      console.log('countryChange--->'+row)
+      this.$nextTick(() => {
+        this.$refs.countryId.blur()
+      });
+    },
+    countryVisibleChange(event){
+      console.log('countryVisibleChange--->'+event)
+    },
   }
 }
 </script>

src/views/article/index.vue

@@ -13,7 +13,7 @@
         <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><!--标题-->
@@ -89,9 +89,11 @@
 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";
 
 export default {
   name: 'ArticleIndex',
+  components: {FilterUser},
   data() {
     return {
       allData: null,