Foshan4A4.0/src/views/systemManagement/LoginPolicy/index.vue

<template>
  <div class="Box">
    <div class="centerBox">
      <div class="searchBox">
        <Search
          :isAdd="false"
          @getSearchData="getSearchData"
          @clearSearchData="clearSearchData"
          :isSlot="true"
        >
          <el-button v-is="['logintac_btn_add']" class="btnAdd" @click="gotoAdd"
            >新增策略</el-button
          >
        </Search>
      </div>
      <div class="content-box">
        <div v-if="tacList.length" class="contentBox">
          <div
            v-infinite-scroll="load"
            :infinite-scroll-distance="20"
            infinite-scroll-disabled="disabled"
            class="center-box"
          >
            <el-row :gutter="16">
              <el-col :span="4" v-for="(item, index) in tacList" :key="index">
                <el-card class="box-card">
                  <button
                    v-is="['logintac_btn_delete']"
                    type="text"
                    @click="open(item, index)"
                    style="
                      position: absolute;
                      padding: 3px 0;
                      border: none;
                      color: #303133;
                      width: 20px;
                      background: #fff;
                      right: 15px;
                      top: 31px;
                    "
                  >
                    ×
                  </button>
                  <div>
                    <div class="header-top">
                      <div class="header-mid">
                        <span class="title">{{ item.TacName }} </span>
                      </div>
                      <div
                        class="loger"
                        v-is="['logintac_btn_edit']"
                        @click="EditStystem(item.TacId)"
                      ></div>
                    </div>
                    <div class="cont-top">
                      <div class="cont_chid">
                        <p>开始时间：</p>
                        <span>{{
                          item.LoginDateBegins ? item.LoginDateBegins : "--"
                        }}</span>
                      </div>
                      <div class="cont_chid">
                        <p>截止时间：</p>
                        <span>{{
                          item.LoginDateEnds ? item.LoginDateEnds : "--"
                        }}</span>
                      </div>
                      <div class="cont_chid">
                        <p>登录时段：</p>
                        <span>{{
                          item.LoginTimeBegins ? item.LoginTimeBegins : "--"
                        }}</span>
                        <span style="margin-left: 5px; margin-right: 5px"
                          >至</span
                        >
                        <span>{{
                          item.LoginTimeEnds ? item.LoginTimeEnds : "--"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <template v-if="total > 1">
            <p class="center" v-if="loading">加载中...</p>
            <p class="center" v-if="noMore">没有更多数据了~</p>
          </template>
        </div>
        <el-empty
          v-else
          description="没有内容"
          style="margin: 0 auto"
        ></el-empty>
      </div>
    </div>

    <div class="asideBox">
      <el-button @click="gotoSystem">系统基础设置</el-button>
      <el-button type="primary">登陆策略</el-button>
    </div>
    <!--删除弹框-->
    <Dialog :flag="flag">
      <div class="airportInfoDialog">
        <div class="title1">删除策略</div>
        <div class="content">是否确认删除该策略？</div>
        <div class="foot right t30">
          <el-button
            size="medium"
            @click="remove(item, index)"
            type="danger"
            class="r24"
            >删除</el-button
          >
          <el-button size="medium" @click="flag = false">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from "@/layout/components/Search";
import Dialog from "@/layout/components/Dialog";
import { GetTacList, DeleteTac } from "@/api/systemConfiguration";
export default {
  components: { Search, Dialog },
  data() {
    return {
      flag: false, //弹框开关
      tacList: [],
      delItem: null,
      delIndex: null,
      keyWord: "",
      pageNum: 1,
      PageSize: 40,
      loading: false,
      total: null,
      dataList: [],
      num: null,
    };
  },
  created() {
    if (this.$route.query.keyWords) {
      this.keyWord = this.$route.query.keyWords;
    }
    this.getTacList({
      QueryName: this.keyWord,
      PageSize: this.PageSize,
      PageIndex: this.pageNum,
    });
  },
  computed: {
    noMore() {
      return this.pageNum >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    getSearchData(data) {
      this.keyWord = data.replace(/\s+/g, "");
      this.dataList = [];
      this.tacList = [];
      this.pageNum = 1;
      this.getTacList({
        QueryName: this.keyWord,
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
    clearSearchData() {
      this.keyWord = "";
      this.dataList = [];
      this.tacList = [];
      this.pageNum = 1;
      this.getTacList({
        QueryName: this.keyWord,
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
    getTacList(obj) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        GetTacList(obj)
          .then((response) => {
            if (response.code === 0) {
              const { returnData } = response;
              const datas = returnData.records;
              this.total = returnData.pages;
              this.dataList.push(datas);
              const arrs = this.dataList.flat();
              this.tacList = arrs;
              this.tacList.forEach((element) => {
                if (element.LoginDateBegin) {
                  element.LoginDateBegins =
                    element.LoginDateBegin.split("T")[0];
                }
                if (element.LoginDateEnd) {
                  element.LoginDateEnds = element.LoginDateEnd.split("T")[0];
                }
                if (element.LoginTimeBegin) {
                  element.LoginTimeBegins =
                    element.LoginTimeBegin.split(":")[0] +
                    ":" +
                    element.LoginTimeBegin.split(":")[1];
                }
                if (element.LoginTimeEnd) {
                  element.LoginTimeEnds =
                    element.LoginTimeEnd.split(":")[0] +
                    ":" +
                    element.LoginTimeEnd.split(":")[1];
                }
              });
              this.loading = false;
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
            this.loading = false;
          });
      });
    },
    gotoSystem() {
      this.$router.push("/systemManagement");
    },
    // 新增页面
    gotoAdd() {
      this.$router.push("/addSystem");
    },
    //编辑页面
    EditStystem(id) {
      this.$router.push({ path: "/EditSystem", query: { TacId: id } });
    },
    //删除
    remove() {
      return new Promise((resolve, reject) => {
        DeleteTac({ TacId: this.delItem.TacId })
          .then((response) => {
            if (response.code === 0) {
              this.delItem = null;
              this.$message.success("删除成功");
              this.tacList.splice(this.delIndex, 1);
              this.delIndex = null;
              this.flag = false;
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
            this.flag = false;
          });
      });
    },
    open(data, index) {
      this.delItem = data;
      this.delIndex = index;
      this.flag = true;
    },
    //滚动加载数据
    load() {
      this.pageNum += 1;
      this.getTacList({
        QueryName: this.keyWord,
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.loger {
  width: 24px;
  height: 24px;
  background: url("../../../assets/status/ic_edit.png") no-repeat;
  background-size: 100% 100%;
  border: 1px solid #e4e7ec;
  border-radius: 50%;
  margin-right: 24px;
  display: inline-block;
}
.cont-top {
  width: 100%;
  > .cont_chid {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    > p {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #303133;
      margin: 0 0 0 0;
    }
    > span {
      font-size: 14px;
      font-family: DIN;
      font-weight: 500;
      color: #909399;
    }
  }
}
::v-deep .el-card__body {
  padding: 24px;
}
::v-deep .el-row {
  width: 100%;
}
.header-mid {
  display: flex;
  align-items: center;
}
.loger:hover {
  cursor: pointer;
  background: url("../../../assets/status/ic_edit_hovar.png") no-repeat;
  background-size: 100% 100%;
}
.Box {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  padding-top: 32px;
}
.centerBox {
  width: calc(100% - 400px);
  height: 100%;
  margin-right: 52px;
  border-radius: 16px;
}
.content-box {
  height: 100%;
  width: 100%;
  display: flex;
}
.contentBox {
  width: 100%;
  height: 76vh;
}
.center-box {
  margin-top: 50px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 64px;
  width: calc(100% - 95px);
  height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 20px;
}
.colorTitle {
  margin-top: 20px;
  width: 195px;
  height: 20px;
  display: flex;
  justify-content: space-between;
  float: left;
}
.box-card {
  width: 100%;
  height: 144px;
  margin-right: 10px;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  margin-bottom: 16px;
  position: relative;
  button {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -12px;
    cursor: pointer;
  }
}

// .center-box :hover {
//   box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
//   transform: translate(0, -5px);
//   transition-delay: 0s !important;
// }
.header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.item {
  padding: 10px;
}
.title {
  // width: 120px;
  max-width: 80px;
  height: 18px;
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.title1 {
  width: 150px;
  height: 26px;
  font-size: 26px;
  margin-bottom: 30px;
  font-weight: bold;
  color: #303133;
}
.box-card :hover {
  box-shadow: none;
  transform: none;
}
.searchBox {
  float: right;
  margin-right: 50px;
}
.asideBox {
  margin-top: -35px;
  width: 400px;
  background: #fff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  //   border-radius: 16px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  right: 0;
  // top: 0;
  // padding-top: 147px;
}
::v-deep .asideBox {
  .el-button--primary {
    width: 280px;
    height: 48px;
    background: linear-gradient(0deg, #6983be, #777dba);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    color: #fff;
    border: none;
    margin-left: 60px;
  }
  .el-button--default {
    width: 280px;
    height: 48px;
    background: #f5f7fa;
    border: 1px solid #b4b7cb;
    border-radius: 6px;
    color: #6f81bc;

    margin: 35px 0 24px 60px;
  }
}
</style>