zc_saas_admin/src/views/education/notificationManageMent/notificationList/checkUser.vue

<template>
  <div id="checkUser">
    <el-dialog
      :visible.sync="diavos"
      width="640px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">收件人</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="clears" />
        </div>
      </div>
      <div v-if="diavos">
        <div>
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio :label="1">按学员</el-radio>
            <el-radio :label="2">按商品</el-radio>
            <el-radio :label="3">按班级</el-radio>
          </el-radio-group>
          <span style="color: #999; float: right; font-size: 14px"
            >注:切换选择类型将清空已选收件人</span
          >
        </div>
        <div class="max_height" v-if="radio === 1">
          <el-tree
            :key="1"
            ref="tree1"
            default-expand-all
            :props="props1"
            :load="loadNode1"
            lazy
            node-key="userId"
            show-checkbox
          >
          </el-tree>
        </div>
        <div class="max_height" v-if="radio === 2">
          <el-select
            v-model="educationId"
            placeholder="请选择教育类型"
            size="small"
            @change="changeEducationType"
          >
            <el-option
              v-for="(items, indexs) in educationType"
              :key="indexs"
              :label="items.educationName"
              :value="items.id"
            ></el-option>
          </el-select>
          <el-select
            v-if="educationId"
            v-model="businessId"
            placeholder="请选择业务层次"
            size="small"
            @change="changeBusinessId"
          >
            <el-option
              v-for="(items, indexs) in newBusinessLevel"
              :key="indexs"
              :label="items.projectName + '-' + items.businessName"
              :value="items.id"
            ></el-option>
          </el-select>
          <el-tree
            :key="2"
            v-if="businessId && showBox"
            ref="tree2"
            :props="props2"
            :load="loadNode2"
            default-expand-all
            lazy
            node-key="costId"
            show-checkbox
            @check-change="activeChange"
          >
          </el-tree>
        </div>
        <div class="max_height" v-if="radio === 3">
          <el-select
            v-model="educationId"
            placeholder="请选择教育类型"
            size="small"
            @change="changeEducationType"
          >
            <el-option
              v-for="(items, indexs) in educationType"
              :key="indexs"
              :label="items.educationName"
              :value="items.id"
            ></el-option>
          </el-select>
          <el-select
            v-if="educationId"
            v-model="businessId"
            placeholder="请选择业务层次"
            size="small"
            @change="changeBusinessId"
          >
            <el-option
              v-for="(items, indexs) in newBusinessLevel"
              :key="indexs"
              :label="items.projectName + '-' + items.businessName"
              :value="items.id"
            ></el-option>
          </el-select>
          <el-tree
            :key="3"
            v-if="businessId && showBox"
            ref="tree3"
            :props="props2"
            :load="loadNode3"
            default-expand-all
            lazy
            node-key="costId"
            show-checkbox
            @check-change="activeChangeClass"
          >
          </el-tree>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clears">取 消</el-button>
        <el-button @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      diavos: false,
      showBox: false,
      educationId: "",
      businessId: "",
      newBusinessLevel: [],
      radio: "",
      props1: {
        label: "realname",
        children: "children",
        isLeaf: "leaf",
      },
      props2: {
        label: "costomize",
        children: "children",
        isLeaf: "leaf",
      },
      setKey: [],
    };
  },
  computed: { ...mapGetters(["educationType"]) },
  methods: {
    changeEducationType(id) {
      this.businessId = "";
      this.$api
        .inquirebusinessList({ status: 1, educationId: id })
        .then((res) => {
          this.newBusinessLevel = res.rows;
        });
    },
    changeBusinessId() {
      this.showBox = false;
      setTimeout(() => {
        this.showBox = true;
      }, 100);
    },
    submit() {
      if (this.radio == 1) {
        let ary = this.$refs.tree1.getCheckedNodes(true);
        let arrays = ary.map((item) => {
          return item.userId;
        });
        this.$parent.backUserList(this.radio, arrays);
      }
      if (this.radio == 2) {
        this.$parent.backUserList(this.radio, this.setKey);
      }
      if (this.radio == 3) {
        this.$parent.backUserList(this.radio, this.setKey);
      }
      this.diavos = false;
    },
    changeRadio() {
      this.setKey = [];
      this.educationId = "";
      this.businessId = "";
    },
    /**
     * 按学员
     */
    loadNode1(node, resolve) {
      if (node.level === 0) {
        return resolve([{ realname: "所有人" }]);
      }
      if (node.level === 1) {
        this.$api.inquiregradestudentlistStudent({ status: 1 }).then((res) => {
          res.rows.forEach((item) => {
            item.leaf = true;
          });
          this.$refs.tree1.setCheckedKeys(this.setKey);
          resolve(res.rows);
        });
      }
      if (node.level >= 2) {
        resolve([]);
      }
    },
    /**
     * 按商品
     */
    loadNode2(node, resolve) {
      if (node.level === 0) {
        return resolve([
          { costomize: "视频商品", type: 1, costId: -1 },
          { costomize: "题库商品", type: 2, costId: -2 },
        ]);
      }
      if (node.level === 1) {
        if (node.data.type === 1) {
          let arrays = [];
          this.$api
            .inquireGoods({
              goodsType: 1,
              status: 1,
              businessId: this.businessId,
            })
            .then((res) => {
              arrays = res.rows.map((item) => {
                item.costomize = item.goodsName;
                item.costId = item.goodsId;
                return item;
              });
            })
            .finally(() => {
              resolve(arrays);
            });
        }
        if (node.data.type === 2) {
          let arrays = [];
          this.$api
            .inquireGoods({
              goodsType: 2,
              status: 1,
              businessId: this.businessId,
            })
            .then((res) => {
              arrays = res.rows.map((item) => {
                item.costomize = item.goodsName;
                item.costId = item.goodsId;
                return item;
              });
            })
            .finally(() => {
              resolve(arrays);
            });
        }
      }
      if (node.level === 2) {
        let arrays = [];
        this.$api
          .inquireOrderGoodsBuyGoodsUserList({ goodsId: node.data.goodsId })
          .then((res) => {
            console.log(res.rows);
            arrays = res.rows.map((item) => {
              console.log(item);
              return {
                userId: item.userId,
                costomize: item.realname,
                costId: `${node.data.goodsId}-${item.userId}`,
                leaf: true,
                getStatus: true,
              };
            });
          })
          .finally(() => {
            arrays.forEach((item) => {
              if (this.setKey.includes(item.userId)) {
                this.$nextTick(() => {
                  this.$refs.tree2.setChecked(item.costId, true);
                });
              }
            });
            resolve(arrays);
          });
      }
      if (node.level > 2) {
        resolve([]);
      }
    },
    /**
     * 按班级
     */
    loadNode3(node, resolve) {
      if (node.level === 0) {
        this.$api
          .inquireGradegradeList({ status: 1, businessId: this.businessId })
          .then((res) => {
            let arrays = res.rows.map((item) => {
              item.costomize = item.className;
              item.costId = item.gradeId;
              return item;
            });
            resolve(arrays);
          });
      }
      if (node.level === 1) {
        let arrays = [];
        this.$api
          .inquireGradegradelistGrade({ gradeId: node.data.gradeId })
          .then((res) => {
            arrays = res.rows.map((item) => {
              return {
                userId: item.userId,
                costomize: item.realname,
                costId: `${node.data.gradeId}-${item.userId}`,
                leaf: true,
                getStatus: true,
              };
            });
          })
          .finally(() => {
            arrays.forEach((item) => {
              if (this.setKey.includes(item.userId)) {
                this.$nextTick(() => {
                  this.$refs.tree3.setChecked(item.costId, true);
                });
              }
            });
            resolve(arrays);
          });
      }
      if (node.level > 1) {
        resolve([]);
      }
    },
    /**
     * 商品学员发生勾选变化触发
     */
    activeChange(data, status, bool) {
      if (data.getStatus) {
        this.changeDataList(data.userId, status);
      }
    },
    changeDataList(userId, status) {
      let newArrays = this.$refs.tree2.root.childNodes;
      newArrays.forEach((item) => {
        item.childNodes.forEach((items) => {
          items.childNodes.forEach((it) => {
            if (status && it.data.userId === userId) {
              this.$refs.tree2.setChecked(it.data.costId, true);
              if (!this.setKey.includes(it.data.userId)) {
                this.setKey.push(it.data.userId);
              }
            }
            if (!status && it.data.userId === userId) {
              this.$refs.tree2.setChecked(it.data.costId, false);
              this.setKey = this.setKey.filter((its) => {
                return its !== it.data.userId;
              });
            }
          });
        });
      });
    },
    /**
     * 班级学员发生勾选变化触发
     */
    activeChangeClass(data, status, bool) {
      if (data.getStatus) {
        this.changeDataListClass(data.userId, status);
      }
    },
    changeDataListClass(userId, status) {
      let newArrays = this.$refs.tree3.root.childNodes;
      newArrays.forEach((item) => {
        item.childNodes.forEach((it) => {
          if (status && it.data.userId === userId) {
            this.$refs.tree3.setChecked(it.data.costId, true);
            if (!this.setKey.includes(it.data.userId)) {
              this.setKey.push(it.data.userId);
            }
          }
          if (!status && it.data.userId === userId) {
            this.$refs.tree3.setChecked(it.data.costId, false);
            this.setKey = this.setKey.filter((its) => {
              return its !== it.data.userId;
            });
          }
        });
      });
    },
    diavosFun(int, item) {
      this.radio = int;
      this.setKey = JSON.parse(JSON.stringify(item));
      this.diavos = true;
    },
    clears() {
      this.diavos = false;
    },
  },
};
</script>

<style lang="less" scoped>
.max_height {
  margin-top: 14px;
  min-height: 100px;
  max-height: 650px;
  overflow: auto;
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>