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

<template>
  <div class="bf-rolelist">
    <!-- 角色列表 -->
    <div class="cont">
      <div v-if="title" class="paren_header">
        <p>{{ title }}</p>
      </div>
      <template v-if="dataList.length">
        <div
          :class="active ? 'bgActive' : 'bgActivecheckbox'"
          class="paren_content"
        >
          <template v-if="!type">
            <el-row
              v-infinite-scroll="load"
              :infinite-scroll-distance="20"
              infinite-scroll-disabled="disabled"
              class="scCont scrollbar"
              :gutter="16"
            >
              <el-checkbox-group @change="checkChange" v-model="checkList">
                <el-col
                  :span="number"
                  v-for="(item, index) in dataList"
                  :key="index"
                >
                  <div
                    @click="handleBg(item, index)"
                    :class="active && msg === index ? 'bgColor' : ''"
                    class="cide"
                  >
                    <div class="cide_header">
                      <p :title="item.name">{{ item.name }}</p>
                      <el-checkbox :label="index"></el-checkbox>
                    </div>
                  </div>
                </el-col>
              </el-checkbox-group>
            </el-row>
          </template>
          <p class="center" v-if="loading">加载中...</p>
          <p class="center" v-if="noMore">没有更多数据了~</p>
        </div>
      </template>
      <template v-else-if="mainData.length">
        <div
          :class="active ? 'bgActive' : 'bgActivecheckbox'"
          class="paren_content"
        >
          <template v-if="type">
            <el-row :gutter="16">
              <el-radio-group
                style="display: block"
                @change="radioChange"
                v-model="radio"
              >
                <el-col
                  :span="number"
                  v-for="(item, index) in mainData"
                  :key="index"
                >
                  <div
                    @click.stop="handleBg(index)"
                    :class="active && msg === index ? 'bgColor' : ''"
                    class="cide"
                  >
                    <div class="cide_header">
                      <p>{{ item.name }}</p>
                      <el-radio :label="index"></el-radio>
                    </div>
                  </div>
                </el-col>
              </el-radio-group>
            </el-row>
          </template>
        </div>
      </template>
      <template v-else>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </div>
  </div>
</template>
<script>
import { GetAccountList } from "@/api/Account";
import { GetRoleByGroup } from "@/api/AccountGroup";

export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    type: {
      type: Boolean,
      default: false,
    },
    number: {
      type: Number,
      default: 3,
    },
    active: {
      type: Boolean,
      default: false,
    },
    checkBoxList: {
      type: Array,
      default: () => [],
    },
    mainData: {
      type: Array,
      default: () => [],
    },
    radioCheck: {
      type: Number,
      default: 0,
    },
    roleType: {
      type: String,
      default: "",
    },
    GroupIds: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      radio: null,
      checkList: [],
      dataList: [],
      arrsList: [],
      msg: null,
      pageSize: 100,
      pageNum: 1,
      total: "",
      loading: false,
    };
  },
  watch: {
    radioCheck: {
      handler(num) {
        this.radio = num;
      },
      deep: true,
    },
    roleType: {
      handler (msg) {
        if (msg == 'account') {
          this.getRoleData('UserId', 'UserName');
        }
        if (msg == "roleByUpId") {
          this.getRoleDataByUpId("roleId");
        }
      },
      deep: true,
    },
    dataList: {
      handler(arr) {
        if (this.roleType == "account") {
          this.checkBoxs(arr, "UserId");
        }
      },
      deep: true,
    },
    checkBoxList: {
      handler(arr) {
        if (this.roleType == "roleByUpId") {
          const datas = [];
          console.log(arr);
          this.dataList.forEach((item, index) => {
            arr.forEach((p) => {
              if (item.RoleId == p.RoleId) {
                datas.push(index);
              }
            });
          });
          this.checkList = datas;
        }
      },
      deep: true,
    },
  },
  computed: {
    noMore() {
      return this.pageNum >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    // 选中
    handleBg(item, i) {
      this.msg = i;
      this.$emit("checkClick", item);
    },
    //多选框
    checkChange(arr) {
      const datas = this.formatChecks(arr);
      // if (this.roleType == 'account') {
      //   datas = this.formatChecks(arr, 'UserId');
      // }
      this.$emit("checkChange", datas);
    },
    //单选框
    radioChange(val) {
      this.$emit("radioChange", val);
    },
    //格式化选中回调
    formatChecks(arr, key) {
      const datas = [];
      // const ids = []
      this.dataList.forEach((item, index) => {
        arr.forEach((p) => {
          if (index == p) {
            datas.push(item);
          }
        });
      });
      // datas.forEach(item => {
      //   ids.push(item[key])
      // })
      return datas;
    },
    //多选框默认选中
    checkBoxs(arr, ids) {
      const datas = [];
      arr.forEach((item, index) => {
        this.checkBoxList.forEach((p) => {
          if (item[ids] == p) {
            datas.push(index);
          }
        });
      });
      this.checkList = datas;
    },
    //获取列表
    async getRoleData (ids, names) {
      try {
        this.loading = true;
        const obj = {
          QueryName: "",
          PageIndex: this.pageNum,
          PageSize: this.pageSize,
        };
        let result = null;
        if (this.roleType == "account") {
          result = await GetAccountList(obj);
        }
        if (result.code === 0) {
          const datas = result.returnData.records;
          const num = result.returnData.pages;
          this.arrsList.push(datas);
          const arrs = this.arrsList.flat();
          const msgs = _.unionBy(arrs, ids);
          msgs.forEach(item => {
            item.name = item[names]
          });
          this.dataList = msgs;
          this.total = num;
          this.loading = false;
        } else {
          this.$message.error(result.message);
          this.loading = false;
        }
      } catch (error) {
        console.log("出错了", error);
        this.loading = false;
      }
    },

    //获取列表2
    async getRoleDataByUpId(ids) {
      try {
        this.loading = true;
        const obj = {

          GroupIds: this.GroupIds
        };
        let result = null;
        if (this.roleType == 'roleByUpId') {
          result = await GetRoleByGroup(obj);
        }
        if (result.code === 0) {
          const datas = result.returnData;
          this.dataList = datas;
          this.dataList.forEach(item => {
            item.name = item.RoleName
          });
          this.checkBoxs(this.dataList, "RoleId");
          this.loading = false;
        } else {
          this.$message.error(result.message);
          this.loading = false;
        }
      } catch (error) {
        console.log("出错了", error);
        this.loading = false;
      }
    },

    //滚动加载数据
    load() {
      this.pageNum += 1;
      if (this.roleType == 'account') {
        this.getRoleData('UserId', 'UserName');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./rolelist.scss";
.paren_content {
  ::v-deep .el-radio__label {
    display: none;
  }
  ::v-deep .el-checkbox__label {
    display: none;
  }
  .scCont {
    height: 65vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>