学校-白名单

src/views/schoolSection/networkManage/whitelist.vue

@@ -1,14 +1,492 @@
 <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>
+      <Button type="primary" class="primary_btn" @click="toAdd()">新建</Button>
+    </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="whiteAddressSlot">
+          <div class="white_address" :title="row.whiteAddress">
+            {{ row.whiteAddress }}
+          </div>
+        </template>
+        <template slot-scope="{ row }" slot="actionSlot">
+          <div class="action_list">
+            <div @click="toView(row)">查看</div>
+            <div @click="toEdit(row)">编辑</div>
+            <div class="action_del" @click="toDel(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>
+    <!-- 新建/编辑 -->
+    <Modal
+      class="modal1"
+      :mask-closable="false"
+      v-model="whiteLibraryInfo.show"
+      :title="whiteLibraryInfo.wlid ? '编辑' : '新建'"
+    >
+      <Form
+        v-if="whiteLibraryInfo.show"
+        ref="addForm"
+        :model="whiteLibraryInfo"
+        :rules="rules"
+        :label-width="90"
+        inline
+      >
+        <FormItem label="名称" prop="name" style="width: 100%">
+          <Input
+            v-model="whiteLibraryInfo.name"
+            placeholder="请输入名称"
+          ></Input>
+        </FormItem>
+        <FormItem label="类型" prop="wltype" style="width: 100%">
+          <RadioGroup v-model="whiteLibraryInfo.wltype">
+            <Radio :label="1">APP</Radio>
+            <Radio :label="2">网址</Radio>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="whiteLibraryInfo.wltype === 1">
+          <FormItem
+            label="版本名称"
+            prop="versionName"
+            style="width: calc(50% - 10px)"
+          >
+            <Input
+              v-model="whiteLibraryInfo.versionName"
+              placeholder="请输入版本名称"
+            ></Input>
+          </FormItem>
+          <FormItem label="包名" prop="website" style="width: calc(50% - 10px)">
+            <Input
+              v-model="whiteLibraryInfo.website"
+              placeholder="请输入包名"
+            ></Input>
+          </FormItem>
+        </template>
+        <FormItem label="简介" prop="comm" style="width: 100%">
+          <Input
+            v-model="whiteLibraryInfo.comm"
+            placeholder="请输入简介"
+          ></Input>
+        </FormItem>
+        <FormItem label="网址" prop="whiteAddress" style="width: 100%">
+          <Input
+            type="textarea"
+            v-model="whiteLibraryInfo.whiteAddress"
+            placeholder="请填写正确的IP地址或者域名，多个IP或域名之间用英文分号隔开"
+          ></Input>
+          <div style="color: #7c8db5">
+            说明：IP例如：192.168.1.200或者192.168.1.200/24，域名例如：new.iflytek.com
+          </div>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button @click="whiteLibraryInfo.show = false">取消</Button>
+        <Button @click="saveAddInfo()" type="primary">保存</Button>
+      </div>
+    </Modal>
+    <!-- 查看 -->
+    <Modal
+      class="modal1"
+      :mask-closable="false"
+      v-model="viewInfo.show"
+      title="查看"
+    >
+      <div class="view_title">
+        <div>{{ viewInfo.name }}</div>
+        <div v-if="viewInfo.wltype === 1" class="wltype_1">APP</div>
+        <div v-if="viewInfo.wltype === 2" class="wltype_2">网址</div>
+      </div>
+      <Form :label-width="80" inline>
+        <template v-if="viewInfo.wltype === 1">
+          <FormItem
+            label="版本名称"
+            style="margin-bottom: 0; width: calc(50% - 10px)"
+            >{{ viewInfo.versionName }}</FormItem
+          >
+          <FormItem
+            label="包名"
+            style="margin-bottom: 0; width: calc(50% - 10px)"
+            >{{ viewInfo.website }}</FormItem
+          >
+        </template>
+        <FormItem label="简介" style="margin-bottom: 0; width: 100%">{{
+          viewInfo.comm
+        }}</FormItem>
+        <FormItem label="网址" style="margin-bottom: 0; width: 100%">{{
+          viewInfo.whiteAddress
+        }}</FormItem>
+      </Form>
+      <div slot="footer" style="text-align: center">
+        <Button @click="viewInfo.show = false">关闭</Button>
+      </div>
+    </Modal>
+  </div>
 </template>
 
 <script>
+import {
+  whiteLibrary_list,
+  whiteLibrary_add,
+  whiteLibrary_edit,
+  whiteLibrary_delete
+} from "@/api/whiteLibrary";
 export default {
   data() {
-    return {};
+    return {
+      searchForm: {
+        name: "",
+        page: 1,
+        size: 10,
+        list: [],
+        total: 0
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入名称",
+            trigger: "change"
+          }
+        ],
+        wltype: [
+          {
+            required: true,
+            type: "number",
+            message: "请选择状态",
+            trigger: "change"
+          }
+        ],
+        versionName: [
+          {
+            required: true,
+            message: "请输入版本名称",
+            trigger: "change"
+          }
+        ]
+      },
+      // 新建/编辑
+      whiteLibraryInfo: {
+        show: false,
+        wlid: null,
+        rversion: null,
+        name: "",
+        // 1app 2网页
+        wltype: 1,
+        website: "",
+        versionName: "",
+        comm: "",
+        whiteAddress: ""
+      },
+      // 查看
+      viewInfo: {
+        show: false,
+        name: "",
+        // 1app 2网页
+        wltype: 1,
+        website: "",
+        versionName: "",
+        comm: "",
+        whiteAddress: ""
+      },
+      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: "网址",
+          slot: "whiteAddressSlot",
+          align: "center"
+        },
+        {
+          title: "操作人",
+          key: "updatename",
+          width: 140,
+          align: "center"
+        },
+        {
+          title: "操作时间",
+          key: "updatetime",
+          width: 190,
+          align: "center"
+        },
+        {
+          title: "操作",
+          slot: "actionSlot",
+          width: 180,
+          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);
+        }
+      });
+    },
+    // 新建
+    toAdd() {
+      this.whiteLibraryInfo = {
+        show: true,
+        wlid: null,
+        rversion: null,
+        name: "",
+        // 1app 2网页
+        wltype: 1,
+        website: "",
+        versionName: "",
+        comm: "",
+        whiteAddress: ""
+      };
+    },
+    // 保存新建
+    saveAddInfo() {
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          this.whiteLibraryInfo.show = false;
+          let api =
+            this.whiteLibraryInfo.wlid && this.whiteLibraryInfo.rversion
+              ? whiteLibrary_edit
+              : whiteLibrary_add;
+          let form = {
+            name: this.whiteLibraryInfo.name,
+            wltype: this.whiteLibraryInfo.wltype,
+            comm: this.whiteLibraryInfo.comm,
+            whiteAddress: this.whiteLibraryInfo.whiteAddress
+          };
+          if (this.whiteLibraryInfo.wltype === 1) {
+            form.website = this.whiteLibraryInfo.website;
+            form.versionName = this.whiteLibraryInfo.versionName;
+          }
+          if (this.whiteLibraryInfo.wlid && this.whiteLibraryInfo.rversion) {
+            form.wlid = this.whiteLibraryInfo.wlid;
+            form.rversion = this.whiteLibraryInfo.rversion;
+          }
+          api(form).then((data) => {
+            if (data.code === 0) {
+              this.searchList();
+              this.$Message.success(data.msg);
+            } else {
+              this.$Message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 查看
+    toView(row) {
+      this.viewInfo = {
+        show: true,
+        name: row.name,
+        // 1app 2网页
+        wltype: row.wltype,
+        website: row.website,
+        versionName: row.versionName,
+        comm: row.comm,
+        whiteAddress: row.whiteAddress
+      };
+    },
+    // 编辑
+    toEdit(row) {
+      this.whiteLibraryInfo = {
+        show: true,
+        wlid: row.wlid,
+        rversion: row.rversion,
+        name: row.name,
+        // 1app 2网页
+        wltype: row.wltype,
+        website: row.website,
+        versionName: row.versionName,
+        comm: row.comm,
+        whiteAddress: row.whiteAddress
+      };
+    },
+    // 删除
+    toDel(row) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "您确定删除选中数据吗？",
+        onOk: () => {
+          whiteLibrary_delete({
+            wlid: row.wlid,
+            rversion: row.rversion
+          }).then((data) => {
+            if (data.code === 0) {
+              this.searchList();
+              this.$Message.success(data.msg);
+            } else {
+              this.$Message.error(data.msg);
+            }
+          });
+        },
+        onCancel: () => {}
+      });
+    }
+  }
 };
 </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;
+  }
+}
+.view_title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  .wltype_1 {
+    margin-left: 10px;
+    padding: 0 10px;
+    line-height: 20px;
+    color: #fff;
+    font-weight: normal;
+    font-size: 12px;
+    border-radius: 4px;
+    background: #7854f6;
+  }
+  .wltype_2 {
+    margin-left: 10px;
+    padding: 0 10px;
+    line-height: 20px;
+    color: #fff;
+    font-weight: normal;
+    font-size: 12px;
+    border-radius: 4px;
+    background: #52c41a;
+  }
+}
+.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;
+  }
+}
+.white_address {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>