学校-白名单库

src/api/whiteLibrary.js

@@ -9,6 +9,11 @@ export const whiteLibrary_list = (data) =>
  * 4.1.2白名单库--添加
  */
 export const whiteLibrary_add = (data) => setRequest("whiteLibrary/add", data);
+/**
+ * 4.1.2白名单库--添加到白名单
+ */
+export const whiteLibrary_add_white = (data) =>
+  setRequest("whiteLibrary/add_white", data);
 /**
  * 4.1.3白名单库--更新
  */

src/views/schoolSection/networkManage/whitelistLibrary.vue

@@ -1,14 +1,203 @@
 <template>
-  <div class="main_root"></div>
+  <div class="main_root">
+    <div class="search_header">
+      <div class="search_left">
+        <Input
+          v-model="searchForm.aname"
+          placeholder="请输入名称"
+          search
+          @on-search="searchList()"
+          style="width: 150px"
+        />
+      </div>
+    </div>
+    <div class="table_wrap">
+      <Table :columns="columns" :data="searchForm.list">
+        <template slot-scope="{ row }" slot="nameSlot">
+          <div class="name_slot">
+            <div class="name_content" :title="row.name">{{ row.name }}</div>
+            <div v-if="row.wltype === 1" class="app_tag">APP</div>
+            <div v-else-if="row.wltype === 2" class="web_tag">网址</div>
+          </div>
+        </template>
+        <template slot-scope="{ row }" slot="actionSlot">
+          <div class="action_list">
+            <div @click="addToWhitelist(row)">添加到白名单</div>
+          </div>
+        </template>
+      </Table>
+    </div>
+    <div class="page_wrap">
+      <Page
+        :transfer="true"
+        :total="searchForm.total"
+        :current="searchForm.page"
+        :page-size="searchForm.size"
+        :page-size-opts="[10, 20, 40, 60]"
+        @on-change="pageChange"
+        @on-page-size-change="pageSizeChange"
+        show-total
+        show-sizer
+      ></Page>
+    </div>
+  </div>
 </template>
 
 <script>
+import { whiteLibrary_list, whiteLibrary_add_white } from "@/api/whiteLibrary";
 export default {
   data() {
-    return {};
+    return {
+      searchForm: {
+        name: "",
+        page: 1,
+        size: 10,
+        list: [],
+        total: 0
+      },
+      columns: [
+        {
+          title: "序号",
+          align: "center",
+          width: 70,
+          render: (h, params) => {
+            return h(
+              "span",
+              params.index +
+                (this.searchForm.page - 1) * this.searchForm.size +
+                1
+            );
+          }
+        },
+        {
+          title: "应用名称",
+          slot: "nameSlot",
+          align: "center"
+        },
+        {
+          title: "版本名称",
+          key: "versionName",
+          align: "center"
+        },
+        {
+          title: "包名",
+          key: "website",
+          align: "center"
+        },
+        {
+          title: "操作人",
+          key: "updatename",
+          width: 140,
+          align: "center"
+        },
+        {
+          title: "操作时间",
+          key: "updatetime",
+          width: 190,
+          align: "center"
+        },
+        {
+          title: "操作",
+          slot: "actionSlot",
+          width: 140,
+          align: "center"
+        }
+      ]
+    };
   },
-  methods: {}
+  created() {
+    this.searchList();
+  },
+  methods: {
+    // 搜索
+    searchList() {
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    // 页码改变
+    pageChange(page) {
+      this.searchForm.page = page;
+      this.getList();
+    },
+    // 每页显示数量改变
+    pageSizeChange(size) {
+      this.searchForm.size = size;
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    // 获取列表
+    getList() {
+      whiteLibrary_list({
+        page: this.searchForm.page,
+        size: this.searchForm.size,
+        name: this.searchForm.name
+      }).then((data) => {
+        if (data.code === 0) {
+          this.searchForm.list = data.obj.data;
+          this.searchForm.total = data.obj.total;
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    // 添加到白名单
+    addToWhitelist(row) {
+      whiteLibrary_add_white({
+        wlid: row.wlid,
+        regionid: row.regionid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.searchList();
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    }
+  }
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.search_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 16px 16px;
+  .search_left {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+.name_slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .name_content {
+    max-width: calc(100% - 38px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .app_tag {
+    margin-left: 4px;
+    width: 32px;
+    text-align: center;
+    color: #fff;
+    line-height: 1.6;
+    font-size: 12px;
+    border-radius: 5px;
+    background-color: #7854f6;
+  }
+  .web_tag {
+    margin-left: 4px;
+    width: 32px;
+    text-align: center;
+    color: #fff;
+    line-height: 1.6;
+    font-size: 12px;
+    border-radius: 5px;
+    background-color: #52c41a;
+  }
+}
+</style>