feat(banner管理页面、banner编辑组件): 搜索条件、编辑弹窗新增“平台”选项

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

@@ -97,6 +97,24 @@
               </el-select>
             </el-form-item>
 
+            <!-- 平台 -->
+            <el-form-item label="平台" prop="platform">
+              <el-select
+                v-model="form.platform"
+                placeholder="状态"
+                clearable
+                style="width:100%;"
+                class="filter-item"
+              >
+                <el-option
+                  v-for="(item, index) in appPlatforms"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+
             <!-- 类型 -->
             <el-form-item label="类型" prop="type">
               <el-select
@@ -252,9 +270,11 @@
   </div>
 </template>
 <script>
-import { updateBanner, addBanner } from "@/api/banner";
-import { getElementUiUploadFile } from "@/utils";
 import { mapGetters } from "vuex";
+import { appPlatforms } from "@/constant/origin";
+import { getElementUiUploadFile } from "@/utils";
+
+import { updateBanner, addBanner } from "@/api/banner";
 import { regionConfigTable } from "@/api/sys";
 export default {
   props: {
@@ -280,6 +300,7 @@ export default {
         { name: "钱包", value: "WALLET" },
         { name: "游戏", value: "GAME" }
       ],
+      appPlatforms,
       searchDisabled: false,
       alertCoverUploadLoading: false,
       alertCoverFileList: [],
@@ -296,6 +317,7 @@ export default {
         cover: "",
         smallCover: "",
         showcase: "",
+        platform: "",
         type: "",
         sysOrigin: "",
         content: "",
@@ -313,6 +335,7 @@ export default {
       rules: {
         cover: commonRules,
         showcase: commonRules,
+        platform: commonRules,
         type: commonRules,
         sysOrigin: commonRules,
         expiredTime: commonRules

src/views/sys/banner/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-
     <div class="filter-container">
       <el-select
         v-model="listQuery.sysOrigin"
@@ -15,11 +14,27 @@
           :label="item.label"
           :value="item.value"
         >
-          <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
+          <span style="float: left;">
+            <sys-origin-icon :icon="item.value" :desc="item.value"
+          /></span>
           <span style="float: left;margin-left:10px">{{ item.label }}</span>
         </el-option>
       </el-select>
 
+      <el-select
+        v-model="listQuery.platform"
+        style="width: 120px"
+        class="filter-item"
+        placeholder="平台"
+      >
+        <el-option
+          v-for="(item, index) in appPlatforms"
+          :key="index"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+
       <el-select
         v-model="listQuery.showcase"
         placeholder="状态"
@@ -111,20 +126,24 @@
         </template>
       </el-table-column>
       <el-table-column prop="type" label="类型" align="center" />
-      <el-table-column prop="displayPositionNames" label="展示位" align="center" />
+      <el-table-column
+        prop="displayPositionNames"
+        label="展示位"
+        align="center"
+      />
       <el-table-column label="归属系统" align="center">
         <template slot-scope="scope">
-          <sys-origin-icon :icon="scope.row.sysOrigin" :desc="scope.row.sysOrigin" />
+          <sys-origin-icon
+            :icon="scope.row.sysOrigin"
+            :desc="scope.row.sysOrigin"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="regionNameStr" label="区域" align="center" />
       <el-table-column prop="sort" label="排序" align="center" />
       <el-table-column prop="content" label="内容" align="center">
         <template slot-scope="scope">
-          <el-popover
+          <el-popover placement="top-start" trigger="hover">
-            placement="top-start"
-            trigger="hover"
-          >
             <div class="popover-content">
               <div><strong>内容：</strong>{{ scope.row.content }}</div>
               <div><strong>参数：</strong>{{ scope.row.params }}</div>
@@ -139,10 +158,24 @@
       <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <div>
-            <el-tag v-if="scope.row.expired === true && scope.row.showcase === false" type="warning">下架+过期</el-tag>
+            <el-tag
-            <el-tag v-else-if="scope.row.expired === true && scope.row.showcase === true" type="warning">上架+过期</el-tag>
+              v-if="scope.row.expired === true && scope.row.showcase === false"
-            <el-tag v-else-if="scope.row.expired === true" type="warning">过期</el-tag>
+              type="warning"
-            <el-tag v-else-if="scope.row.showcase === false" type="danger">下架</el-tag>
+              >下架+过期</el-tag
+            >
+            <el-tag
+              v-else-if="
+                scope.row.expired === true && scope.row.showcase === true
+              "
+              type="warning"
+              >上架+过期</el-tag
+            >
+            <el-tag v-else-if="scope.row.expired === true" type="warning"
+              >过期</el-tag
+            >
+            <el-tag v-else-if="scope.row.showcase === false" type="danger"
+              >下架</el-tag
+            >
             <el-tag v-else-if="scope.row.showcase === true">上架</el-tag>
           </div>
         </template>
@@ -150,7 +183,9 @@
       <el-table-column fixed="right" label="操作" align="center" width="200">
         <template slot-scope="scope">
           <el-button type="text" @click.native="handleUpdate()">修改</el-button>
-          <el-button type="text" @click.native="handlDel(scope.row)">删除</el-button>
+          <el-button type="text" @click.native="handlDel(scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -174,23 +209,24 @@
 </template>
 
 <script>
-import { bannerTable, deleteBanner } from '@/api/banner'
+import { bannerTable, deleteBanner } from "@/api/banner";
-import Pagination from '@/components/Pagination'
+import Pagination from "@/components/Pagination";
-import { sysOriginPlatforms } from '@/constant/origin'
+import { appPlatforms, sysOriginPlatforms } from "@/constant/origin";
-import FormEdit from './form-edit.vue'
+import FormEdit from "./form-edit.vue";
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
-import { regionConfigTable } from '@/api/sys'
+import { regionConfigTable } from "@/api/sys";
 
 export default {
   components: { Pagination, FormEdit },
   data() {
     return {
       thatRow: {},
+      appPlatforms,
       sysOriginPlatforms,
       txtVal: 0,
       loading: false,
       regions: [],
-      activeGiftId: '',
+      activeGiftId: "",
       pushTextHistoryLoading: false,
       pushTextHistoryVisible: false,
       pushTextHistory: [],
@@ -201,104 +237,107 @@ export default {
         cursor: 1,
         limit: 20,
         showcase: 1,
-        sysOrigin: 'HALAR',
+        sysOrigin: "HALAR",
-        region: ''
+        platform: "Android",
+        region: ""
       },
       formEditVisible: false,
-      textOptTitle: '',
+      textOptTitle: "",
       listLoading: true
-    }
+    };
   },
   computed: {
-    ...mapGetters(['permissionsSysOriginPlatforms'])
+    ...mapGetters(["permissionsSysOriginPlatforms"])
   },
   created() {
-    const that = this
+    const that = this;
-    const querySystem = this.permissionsSysOriginPlatforms[0]
+    const querySystem = this.permissionsSysOriginPlatforms[0];
     if (!querySystem) {
-      return
+      return;
     }
-    that.listQuery.sysOrigin = querySystem.value
+    that.listQuery.sysOrigin = querySystem.value;
-    this.listRegion()
+    this.listRegion();
-    that.renderData()
+    that.renderData();
   },
   methods: {
     renderData(isClean) {
-      const that = this
+      const that = this;
       if (isClean === true) {
-        this.listQuery.cursor = 1
+        this.listQuery.cursor = 1;
-        this.listQuery.list = []
+        this.listQuery.list = [];
       }
-      that.listLoading = true
+      that.listLoading = true;
       bannerTable(that.listQuery).then(res => {
-        const { body } = res
+        const { body } = res;
-        that.total = body.total || 0
+        that.total = body.total || 0;
-        that.list = body.records
+        that.list = body.records;
-        that.listLoading = false
+        that.listLoading = false;
-      })
+      });
     },
     listRegion() {
-      const that = this
+      const that = this;
-      that.loading = true
+      that.loading = true;
-      regionConfigTable({ 'sysOrigin': that.listQuery.sysOrigin }).then(res => {
+      regionConfigTable({ sysOrigin: that.listQuery.sysOrigin })
-        that.regions = res.body || []
+        .then(res => {
-        that.loading = false
+          that.regions = res.body || [];
-      }).catch(er => {
+          that.loading = false;
-        that.loading = false
+        })
-      })
+        .catch(er => {
+          that.loading = false;
+        });
     },
     handleSearch() {
-      this.renderData(true)
+      this.renderData(true);
     },
     renderDataSuccess() {
       this.$message({
-        message: 'Successful',
+        message: "Successful",
-        type: 'success'
+        type: "success"
-      })
+      });
-      this.renderData()
+      this.renderData();
     },
     changeSysOrigin() {
-      this.listRegion()
+      this.listRegion();
-      this.handleSearch()
+      this.handleSearch();
     },
     queryUserDetails(row) {
-      this.userDeatilsDrawer = true
+      this.userDeatilsDrawer = true;
-      this.thatSelectedUserId = row.id
+      this.thatSelectedUserId = row.id;
     },
     // 删除
     handlDel(row) {
-      this.$confirm('确认删除吗？', '提示', {
+      this.$confirm("确认删除吗？", "提示", {
-        type: 'warning'
+        type: "warning"
-      }).then(() => {
-        this.listLoading = true
-        deleteBanner(row.id, row.sysOrigin).then((res) => {
-          this.listLoading = false
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.renderData()
-        })
-      }).catch(() => {
-
       })
+        .then(() => {
+          this.listLoading = true;
+          deleteBanner(row.id, row.sysOrigin).then(res => {
+            this.listLoading = false;
+            this.$message({
+              message: "删除成功",
+              type: "success"
+            });
+            this.renderData();
+          });
+        })
+        .catch(() => {});
     },
     handleCreate() {
-      this.thatRow = null
+      this.thatRow = null;
-      this.formEditVisible = true
+      this.formEditVisible = true;
     },
     handleUpdate() {
-      this.formEditVisible = true
+      this.formEditVisible = true;
     },
     handleMouseEnter(row) {
-      this.thatRow = row
+      this.thatRow = row;
     },
     formEditSuccess() {
-      this.formEditVisible = false
+      this.formEditVisible = false;
-      this.renderData()
+      this.renderData();
     }
   }
-}
+};
 </script>
 <style scoped lang="scss">
 .popover-content {