feat(banner管理页面-->编辑组件): 新增多选“国家”选项

src/views/sys/banner/form-edit.vue

@@ -248,6 +248,34 @@
               </el-select>
             </el-form-item>
 
+            <!-- 国家 -->
+            <el-form-item label="国家" prop="countryCode">
+              <el-select
+                v-model="selectCountryCode"
+                v-loading="loadingCountry"
+                multiple
+                clearable
+                placeholder="请选择"
+                style="width:100%;"
+                class="filter-item"
+                @change="changeCountry"
+              >
+                <el-option
+                  v-for="item in countryList"
+                  :key="item.id"
+                  :label="item.country.aliasName || item.country.enName"
+                  :value="item.country.alphaTwo"
+                >
+                  <span style="float: left;">
+                    <img :src="item.country.nationalFlag" width="30"
+                  /></span>
+                  <span style="float: left;margin-left:10px">{{
+                    item.country.aliasName || item.country.enName
+                  }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+
             <!-- 描述 -->
             <el-form-item label="描述" prop="depict">
               <el-input
@@ -276,6 +304,7 @@ import { getElementUiUploadFile } from "@/utils";
 
 import { updateBanner, addBanner } from "@/api/banner";
 import { regionConfigTable } from "@/api/sys";
+import { listPayOpenCountry } from "@/api/sys-pay";
 export default {
   props: {
     row: {
@@ -328,7 +357,8 @@ export default {
         sort: "",
         displayPosition: "",
         alertCover: "",
-        regionList: []
+        regionList: [],
+        countryCode: ""
       },
       submitLoading: false,
       uploadLoading: false,
@@ -346,7 +376,11 @@ export default {
         { value: "RECHARGE_IN_APP", label: "充值-站内" },
         { value: "RECHARGE_H5", label: "充值-H5(站外)" },
         { value: "PROP_STORE", label: "道具商店" }
-      ]
+      ],
+
+      selectCountryCode: [],
+      countryList: [],
+      loadingCountry: false
     };
   },
   computed: {
@@ -369,6 +403,7 @@ export default {
       handler(val) {
         if (!val) {
           this.listRegion();
+          this.loadOpenCountry();
           return;
         }
         const form = Object.assign({}, val);
@@ -384,11 +419,16 @@ export default {
         if (form.regions) {
           form.regionList = form.regions.split(",");
         }
+        if (form.countryCode) {
+          form.countryCode = form.countryCode;
+          this.selectCountryCode = form.countryCode.split(",");
+        }
         this.coverFileList = getElementUiUploadFile(form.cover);
         this.smallCoverFileList = getElementUiUploadFile(form.smallCover);
         this.alertCoverFileList = getElementUiUploadFile(form.alertCover);
         this.form = Object.assign(this.form, form);
         this.listRegion();
+        this.loadOpenCountry();
       },
       immediate: true
     }
@@ -470,6 +510,28 @@ export default {
           that.loading = false;
         });
     },
+
+    // 获取国家列表
+    loadOpenCountry() {
+      const that = this;
+
+      that.loadingCountry = true;
+      listPayOpenCountry()
+        .then(res => {
+          that.loadingCountry = false;
+          that.countryList = res.body || [];
+        })
+        .catch(er => {
+          that.loadingCountry = false;
+          console.error(er);
+        });
+    },
+
+    // 选择国家
+    changeCountry(val) {
+      const that = this;
+      that.form.countryCode = that.selectCountryCode.join(",");
+    },
     handleClose() {
       this.$emit("close");
     },

src/views/sys/banner/index.vue

@@ -76,6 +76,7 @@
         placeholder="国家"
         style="width: 200px"
         class="filter-item"
+        clearable
         collapse-tags
         @change="changeCountry"
       >