Foshan4A4.0/src/components/loginpolicy/index.vue

<template>
  <div class="bf-loginpolicys">
    <!-- 登录策略 -->
    <div class="cont">
      <div class="paren_header">
        <p>登录策略</p>
      </div>
      <div class="paren_cont">
        <template v-if="dataList.length">
          <el-scrollbar style="height: 100%">
            <el-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" :gutter="24">
              <el-col :span="8" v-for="(item, index) in dataList" :key="index">
                <div class="cide">
                  <div class="cide_header">
                    <el-tooltip effect="dark" :content="item.TacName" placement="bottom">
                      <span v-if="item.TacName.length>11">{{ item.TacName }}</span>
                    </el-tooltip>
                    <span v-if="item.TacName.length<12">{{ item.TacName }}</span>
                  </div>
                  <div class="cide_foot">
                    <span @click="upStart(item.TacId)">查看</span>
                    <el-checkbox v-model="item.checked" @change="checkedChange(item)" :disabled="isEdit"></el-checkbox>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-scrollbar>
          <template v-if="total > 1">
            <p class="center" v-if="loading">加载中...</p>
            <!-- <p class="center" v-if="noMore">没有更多数据了~</p> -->
          </template>
        </template>
        <template v-else>
          <el-empty :image-size="imageSize" description="暂无数据"></el-empty>
        </template>
      </div>
    </div>
    <Loginpolicypop :dialogVisiblestart="dialogVisiblestart" :itemData="itemData" @handleClose="handleClose" />
  </div>
</template>
<script>
import { GetTacList, GetTacDetails } from "@/api/systemConfiguration";
import Loginpolicypop from "@/components/loginpolicypop/index.vue";
// props: checkedList  已选中列表数组  isEdit 是否可以编辑  true 为是  false 为否
//emit： getCheckedList  获取已选中的列表
export default {
  data () {
    return {
      dialogVisiblestart: false,
      dataList: [],
      listArray: [],
      itemData: [],
      pageNum: 1,
      pageSize: 20,
      total: null,
      arrList: [],
      loading: false
    };
  },
  props: {
    //选中列表
    checkedList: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      required: false,
    },
    imageSize: {
      type: Number,
      default: 160
    }
  },
  watch: {
    checkedList: {
      handler (nv, ov) {
        // 特别注意，不能用箭头函数，箭头函数，this指向全局
        nv.forEach((item1) => {
          this.dataList.forEach((item2) => {
            if (item1.TacId == item2.TacId && item1.IsSelected == 1) {
              item2.checked = true;
            }
          });
        });
        this.listArray = JSON.parse(JSON.stringify(nv));
      },
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  computed: {
    noMore () {
      return this.pageNum >= this.total
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  created: function () {
    this.getTacList();
  },
  components: {
    Loginpolicypop,
  },
  methods: {
    //打开弹窗
    upStart (id) {
      return new Promise((resolve, reject) => {
        GetTacDetails({ TacId: id })
          .then((response) => {
            if (response.code === 0) {
              const { returnData } = response;
              this.itemData = returnData;
              this.dialogVisiblestart = true;
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //关闭弹窗
    handleClose () {
      this.dialogVisiblestart = false;
    },
    getTacList () {
      return new Promise((resolve, reject) => {
        this.loading = true;
        GetTacList({
          QueryName: "",
          PageSize: this.pageSize,
          PageIndex: this.pageNum
        })
          .then((response) => {
            if (response.code === 0) {
              const { returnData } = response;
              const datas = returnData.records;
              datas.forEach((element) => {
                // element["checked"] = false;
                if (this.checkedList.findIndex(element1 => element.TacId === element1.TacId) !== -1) {
                  element['checked'] = true
                } else {
                  element['checked'] = false
                }
              });
              this.total = returnData.pages;
              this.arrList.push(datas);
              const arrs = this.arrList.flat();
              this.dataList = arrs;
              this.loading = false;
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
            this.loading = false;
          });
      });
    },
    checkedChange (data) {
      if (data.checked == true) {
        this.listArray.push(data);
        this.$emit("getCheckedList", this.listArray);
      } else {
        this.listArray.splice(
          this.listArray.findIndex((item) => item.TacId === data.TacId),
          1
        );
        this.$emit("getCheckedList", this.listArray);
      }
    },
    //滚动加载数据
    load () {
      this.pageNum += 1;
      this.getTacList({
        QueryName: '',
        PageSize: this.PageSize,
        PageIndex: this.pageNum
      });
    }
  },
  mounted: function () { },
};
</script>
<style lang="scss">
@import "./loginpolicy.scss";
</style>