dy-admin-manager/src/views/liveClassManager/studentBlacklist.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header
        @back="onCancel"
        :content="$route.query.name + '黑名单'"
      ></el-page-header>
    </h2>

    <div class="m-core">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
            @keyup.enter.native="search"
            placeholder="学员名/编号/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
          <el-button @click="onReSet" type="danger">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="btnWrap">
        <auth auths="imLiveRoomBlack/add">
          <el-button
            @click="addBlack"
            type="primary"
            style="margin-bottom: 10px"
            :disabled="liveState == 2"
            >添加黑名单</el-button
          >
        </auth>
        <auth auths="imLiveRoomBlack/delete">
          <el-button
            @click="removes"
            type="primary"
            style="margin-bottom: 10px"
            :disabled="liveState == 2"
            >移除黑名单</el-button
          >
        </auth>
      </div>

      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
          @selection-change="handleSelectionChange"
          @select="onTableSelect"
          ref="multipleSelection"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            prop="userId"
            label="学员编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="学员姓名"
          ></el-table-column>

          <el-table-column
            align="center"
            prop="phone"
            label="手机号"
          ></el-table-column>
          <el-table-column align="center" prop="studentId" label="操作">
            <template slot-scope="scope">
              <div>
                <auth auths="imLiveRoomBlack/delete">
                  <el-button
                    type="text"
                    @click="deteleBlack(scope.row)"
                    :disabled="liveState == 2"
                    >删除</el-button
                  >
                </auth>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <setBlack @getList="getList" ref="setBlack" />
  </div>
</template>
<script>
import { addLiveGoodsMapper, getBlackList, deteleBlackList } from "./api";
import { getLiveGoodsMapperList } from "@/views/liveShopManger/api";
import pagination from "@/components/Pagination/index";
import setBlack from "./modals/setBlack";
export default {
  name: "eidtPostMsg",
  components: { pagination, setBlack },
  data() {
    return {
      liveState: "0",
      searchForm: {
        search: ""
      },
      tableList: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      addMuiscVisible: false,
      multipleSelection: [],
      chioseIdList: [],
      isNewPage: false,
      lookVisible: false,
      activeRow: { sendFlag: false }
    };
  },

  mounted() {
    this.liveState = this.$route.query.liveState;
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await getBlackList({
          ...this.searchForm,
          page: this.rules.page,
          rows: this.rules.limit,
          roomUid: this.$route.query.roomUid
        });
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
        let idList = this.chioseIdList.map(group => {
          return group.userId;
        });
        this.isNewPage = true;
        this.$nextTick(() => {
          this.tableList.forEach(course => {
            if (idList.indexOf(course.userId) != -1) {
              this.$refs.multipleSelection.toggleRowSelection(course, true);
            }
          });
          this.isNewPage = false;
        });
      } catch (e) {
        console.log(e);
      }
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm.search = "";
      this.clearCom();
      this.search();
    },
    async submit() {
      if (!this.chioseIdList || this.chioseIdList.length <= 0) {
        this.$message.error("请至少选择一名学员");
        return;
      }
      try {
        let idList = this.chioseIdList
          .map(group => {
            return group.userId;
          })
          .join(",");
        const res = await addLiveGoodsMapper({
          liveGoodsIds: idList,
          liveId: this.activeRow.roomUid
        });
        this.$message.success("添加成功");
        this.$emit("getList");
        // this.onClose();
        this.clearCom();
      } catch (e) {
        console.log(e);
      }

      // 开始  addGroupMessageList
      /**
       *

       */
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.chioseIdList = this.chioseIdList.concat(val);
        this.chioseIdList = this.$helpers.lodash.uniqBy(
          this.chioseIdList,
          "userId"
        );
      } else {
        if (this.isNewPage) return;
        let idList = this.chioseIdList.map(group => {
          return group.userId;
        });
        this.$nextTick(() => {
          let tableIdList = [];
          this.tableList.forEach(group => {
            tableIdList.push(group.userId);
            if (idList.indexOf(group.userId) != -1) {
              this.$refs.multipleSelection.toggleRowSelection(group, false);
            }
          });
          this.chioseIdList = this.$helpers.lodash.remove(
            this.chioseIdList,
            function(item) {
              return tableIdList.indexOf(item.userId) == -1;
            }
          );
          if (this.chioseIdList.length <= 0) {
            this.clearCom();
          }
        });
      }
    },
    clearCom() {
      this.chioseIdList = [];
      this.$refs.multipleSelection.clearSelection();
    },
    onTableSelect(rows, row) {
      let idList = this.chioseIdList.map(group => {
        return group.userId;
      });
      if (idList.indexOf(row.userId) != -1) {
        this.chioseIdList.splice(idList.indexOf(row.userId), 1);
        if (this.chioseIdList.length <= 0) {
          this.clearCom();
        }
      }
    },
    onCancel() {
      this.$router.push("/liveClassManager");
      this.$store.dispatch("delVisitedViews", this.$route);
    },
    async deteleBlack(row) {
      this.$confirm(`你确定将${row.username}移除黑名单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            const res = await deteleBlackList({
              roomUid: this.$route.query.roomUid,
              userIdList: row.userId + ""
            });
            this.getList();
            this.clearCom();
          } catch (e) {
            console.log(e);
          }
        })
        .catch();
    },
    addBlack() {
      this.$refs.setBlack.openDioag({ roomUid: this.$route.query.roomUid });
    },
    removes() {
      if (!this.chioseIdList || this.chioseIdList.length <= 0) {
        this.$message.error("请至少选择一名学员");
        return;
      }
      let str = this.chioseIdList
        .map(group => {
          return group.username;
        })
        .join(",");
      this.$confirm(`你确定将${str}移除黑名单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let idList = this.chioseIdList
            .map(group => {
              return group.userId;
            })
            .join(",");
          try {
            const res = await deteleBlackList({
              roomUid: this.$route.query.roomUid,
              userIdList: idList
            });
            this.$message.success("移除成功");
            this.getList();
            this.clearCom();
          } catch (e) {
            console.log(e);
          }
        })
        .catch();
    }
  }
};
</script>
<style lang="scss" scoped>
.w100 {
  width: 100%;
}
.btnWrap {
  justify-content: flex-start;
}
</style>