dy-admin-manager/src/views/liveClassManager/liveClassTwo/components/addShareStudentList.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 prop="organIdList">
          <select-all
            class="multiple"
            clearable
            filterable
            collapse-tags
            multiple
            v-model.trim="searchForm.organIdList"
            placeholder="请选择分部"
            @change="onBranchChange"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
        </el-form-item>
        <el-form-item>
          <el-select
            multiple
            collapse-tags
            v-model.trim="searchForm.cooperationOrganId"
            clearable
            filterable
            placeholder="请选择合作单位"
            :disabled="searchForm.organIdList.length <= 0"
          >
            <el-option
              v-for="(item, index) in cooperationList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            multiple
            collapse-tags
            :disabled="searchForm.organIdList.length <= 0"
            v-model.trim="searchForm.musicGroupId"
            clearable
            filterable
            placeholder="请选择乐团"
          >
            <el-option
              v-for="(item, index) in teamList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="subjectId">
          <el-select
            v-model="searchForm.subjectId"
            clearable
            filterable
            placeholder="请选择声部"
          >
            <el-option
              v-for="item in selects.subjects"
              :value="item.id"
              :label="item.name"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            multiple
            collapse-tags
            v-model.trim="searchForm.groupList"
            clearable
            filterable
            placeholder="请选择群聊"
          >
            <el-option
              v-for="(item, index) in groupList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </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="courseShare/saveCourseShare">
          <el-button @click="addBlack" type="primary" style="margin-bottom: 10px"
            >添加学员</el-button
          >
        </auth>
        <auth auths="courseShare/importStudent">
          <el-button type="primary" @click="() => (importVisible = true)">导入</el-button>
        </auth>

        <auth auths="courseShare/deleteShareStudent">
          <el-button @click="removes" type="danger" style="margin-bottom: 10px"
            >删除学员</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="organName" label="分部"></el-table-column>
          <el-table-column
            align="center"
            prop="subjectName"
            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="courseShare/deleteShareStudent">
                  <el-button type="text" @click="deteleBlack(scope.row)">删除</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>
    <addShareStudentModel @getList="getList" ref="addStudentModel" />
    <el-dialog title="导入" width="400px" :visible.sync="importVisible">
      <div class="importWrap">
        <el-button type="primary" @click="() => downImport()">下载模板</el-button>

        <el-upload
          v-permission="'courseShare/importStudent'"
          action="/api-web/courseShare/importStudent"
          :show-file-list="false"
          :before-upload="beforeUpload"
          accept=".xlsx,.xls"
          :data="{
            courseId: $route.query.courseId,
          }"
          :headers="headers"
          :on-error="handleError"
          :on-success="handleSuccess"
        >
          <el-button type="primary" style="margin-left: 20px"> 导入学员 </el-button>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="importVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getLiveGroupShareStudent, deleteShareStudent } from "../../api";

import pagination from "@/components/Pagination/index";
import addShareStudentModel from "../../modals/addShareStudentModel";
import { getGroupList } from "@/views/groupChatManager/api";
import { queryByOrganId } from "@/api/systemManage";
import { getTeamList } from "@/api/teamServer";
import { getToken, getTenantId } from "@/utils/auth";
import load from "@/utils/loading";
export default {
  name: "liveAddStudentList",
  //
  components: { pagination, addShareStudentModel },
  data() {
    return {
      headers: { Authorization: getToken(), tenantId: getTenantId() },
      searchForm: {
        search: "",
        organIdList: [],
        cooperationOrganId: [],
        musicGroupId: [],
        groupList: [],
      },
      tableList: [],
      organList: [],
      cooperationList: [],
      groupList: [],
      teamList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      addMuiscVisible: false,
      multipleSelection: [],
      chioseIdList: [],
      isNewPage: false,
      lookVisible: false,
      activeRow: { sendFlag: false },
      importVisible: false,
    };
  },

  mounted() {
    this.$store.dispatch("setSubjects");
    this.$store.dispatch("setBranchs");
    this.getGroupList();
    this.getList();
  },
  methods: {
    downImport() {
      window.location.href =
        "https://daya-docs.ks3-cn-beijing.ksyuncs.com/%E7%9B%B4%E6%92%AD%E8%AF%BE-%E5%88%86%E4%BA%AB%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
    },
    async getGroupList() {
      const res = await getGroupList({ page: 1, rows: 9999 });
      this.groupList = res.data.rows;
    },
    async getList() {
      try {
        const {
          organIdList,
          cooperationOrganId,
          musicGroupId,
          groupList,
          ...rest
        } = this.searchForm;
        const res = await getLiveGroupShareStudent({
          organIds: organIdList.join(","),
          schoolIds: cooperationOrganId.join(","),
          teamIds: musicGroupId.join(","),
          groupIds: groupList.join(","),
          ...rest,
          page: this.rules.page,
          rows: this.rules.limit,
          courseId: this.$route.query.courseId,
        });
        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: "",
        organIdList: [],
        cooperationOrganId: [],
        musicGroupId: [],
        groupList: [],
      }),
        this.clearCom();
      this.search();
    },
    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 deleteShareStudent({
              courseId: this.$route.query.courseId,
              userIds: [row.userId],
            });
            this.getList();
            this.clearCom();
          } catch (e) {
            console.log(e);
          }
        })
        .catch();
    },
    addBlack() {
      this.$refs.addStudentModel.openDioag({
        courseId: this.$route.query.courseId,
      });
    },
    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;
          });
          try {
            const res = await deleteShareStudent({
              courseId: this.$route.query.courseId,
              userIds: idList,
            });
            this.$message.success("删除成功");
            this.getList();
            this.clearCom();
          } catch (e) {
            console.log(e);
          }
        })
        .catch();
    },
    async onBranchChange(val) {
      // this.searchForm.cooperationOrganId = [];
      this.$set(this.searchForm, "cooperationOrganId", []);
      if (val && val.length > 0) {
        let organId = val.join(",");
        try {
          await queryByOrganId({ organId }).then((res) => {
            if (res.code == 200) {
              this.cooperationList = res.data;
            }
          });

          await getTeamList({ organId, page: 1, rows: 9999 }).then((res) => {
            if (res.code == 200) {
              this.teamList = res.data.rows;
            }
          });
        } catch (e) {
          console.log(e);
        }
      }
    },
    beforeUpload(file) {
      //  (file.type)
      // const isJPG = file.type === '.xlsx' || file.type === '.xls';
      // // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // return isJPG;
      // this.goodsLoading = true
      load.startLoading();
    },
    handleSuccess(response, file, fileList) {
      // 导入商品
      // 报表导出
      load.endLoading();
      if (response.code == 200) {
        this.$message.success("导入成功");
        this.importVisible = false;
        this.getList();
      } else {
        this.$message.error(response.msg);
      }
    },
    handleError(err, file, fileList) {
      load.endLoading();
    },
  },
};
</script>
<style lang="scss" scoped>
.w100 {
  width: 100%;
}
.btnWrap {
  justify-content: flex-start;
}
.importWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>