src/views/setUp/conglomerate.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>学校管理</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="content-box" v-loading="loading">
        <div class="left-box">
          <p class="h-title">
            <span class="tog-type">集团列表</span>
            <i class="icon el-icon-circle-plus-outline" @click="edit"></i>
          </p>
          <ul class="school-ul">
            <li
              class="school-item"
              :class="showId == '' ? 'active' : ''"
              @click="(showId = ''), showSchool(false)"
            >
              全部（{{ schoolTotal }}）
            </li>
            <li
              class="school-item"
              v-for="item in tableList"
              :key="item.id"
              :class="showId == item.id ? 'active' : ''"
              @click="(showId = item.id), showSchool()"
            >
              {{ item.regionName }}（{{ item.schoolCount }}）
              <i class="el-icon-edit-outline" @click.stop="setRegion(item)"></i>
            </li>
          </ul>
        </div>
        <div class="content-detail">
          <div class="title-box">
            <span>管辖的学校（{{schoolData.num}}）</span>
            <i class="icon el-icon-circle-plus-outline" @click="addSchool"></i>
          </div>
          <el-empty
            :image-size="100"
            v-if="!schoolData.list.length && loading == false"
            description="没有更多数据"
          ></el-empty>
          <ul v-else class="detail-list">
            <li
              class="detail-item"
              v-for="item in schoolData.list"
              :key="item.id"
            >
              <p class="item-tit">
                <span class="name active" @click="setSchool(item)">{{
                  item.schoolName
                }}</span>
                <i @click="addAdmin(item)" class="icon el-icon-user-solid"></i>
              </p>
              <div class="info">
                <p class="info-item">
                  <span class="txt">基站</span>
                  <img class="pic" src="../../assets/images/jizhan.png" />
                  <span>{{ item.stationCount }}</span>
                </p>
                <p class="info-item">
                  <span class="txt">键盘</span>
                  <img class="pic" src="../../assets/images/jianpan.png" />
                  <span>{{ item.keyboardCount }}</span>
                </p>
                <p class="info-item">
                  <span class="txt">班级</span>
                  <img class="pic" src="../../assets/images/banji.png" />
                  <span>{{ item.classCount }}</span>
                </p>
                <p class="info-item">
                  <span class="txt">学生</span>
                  <img class="pic" src="../../assets/images/xuesheng.png" />
                  <span>{{ item.studentCount }}</span>
                </p>
                <p class="info-item">
                  <span class="txt">老师</span>
                  <img class="pic" src="../../assets/images/laoshi.png" />
                  <span>{{ item.teacherCount }}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      :title="isAdd ? '添加区域/集团' : '修改区域/集团'"
      :visible.sync="diaCL"
      width="400"
    >
      <el-form
        class="form-box"
        ref="formCL"
        :model="formCL"
        :rules="rulesCL"
        label-width="160px"
      >
        <el-form-item label="区域/集团名称：" prop="regionName">
          <el-col :span="10">
            <el-input
              maxlength="30"
              v-model.trim="formCL.regionName"
              placeholder="请输入区域/集团名称"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" round @click="saveFormCL">确 定</el-button>
        <el-button round @click="diaCL = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加管理员" :visible.sync="diaAdmin" width="400">
      <el-form
        class="form-box"
        ref="formAdmin"
        :model="formAdmin"
        :rules="rulesAdmin"
        label-width="160px"
      >
        <el-form-item label="学校名称：">
          <span>{{ formAdmin.schoolName }}</span>
        </el-form-item>
        <el-form-item label="手机号码：" prop="phone">
          <el-col :span="10">
            <el-input
              maxlength="11"
              v-model.trim="formAdmin.phone"
              placeholder="请输入手机号码"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-col :span="10">
            <el-input
              maxlength="18"
              v-model.trim="formAdmin.password"
              show-password
              placeholder="请输入密码"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="姓名：" prop="realName">
          <el-col :span="10">
            <el-input
              maxlength="30"
              v-model.trim="formAdmin.realName"
              placeholder="请输入姓名"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" round @click="saveFormAdmin">确 定</el-button>
        <el-button round @click="diaAdmin = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加学校" :visible.sync="diaSchool" width="400">
      <el-form
        class="form-box"
        ref="formSchool"
        :model="formSchool"
        :rules="rulesSchool"
        label-width="160px"
      >
        <el-form-item label="学校名称：" prop="schoolName">
          <el-col :span="10">
            <el-input
              maxlength="30"
              v-model.trim="formSchool.schoolName"
              placeholder="请输入学校名称"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="所属区域/集团：">
          <el-select
            class="sel"
            v-model="formSchool.regionId"
            placeholder="选择所属区域/集团"
          >
            <el-option
              v-for="item in tableList"
              :key="item.id"
              :label="item.regionName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学段：">
          <el-checkbox-group v-model="formSchool.sections">
            <el-checkbox :label="1">小学</el-checkbox>
            <el-checkbox :label="2">初中</el-checkbox>
            <el-checkbox :label="3">高中</el-checkbox>
            <el-checkbox :label="4">本科</el-checkbox>
            <el-checkbox :label="7">高补</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" round @click="saveFormSchool"
          >确 定</el-button
        >
        <el-button round @click="diaSchool = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="学校信息修改" :visible.sync="diaSchool2" width="400">
      <el-form
        class="form-box"
        ref="formSchool2"
        :model="setFormSchool"
        :rules="rulesSchool"
        label-width="160px"
      >
        <el-form-item label="学校名称：" prop="schoolName">
          <el-col :span="10">
            <el-input
              maxlength="30"
              v-model.trim="setFormSchool.schoolName"
              placeholder="请输入学校名称"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" round @click="saveSetFormSchool"
          >确 定</el-button
        >
        <el-button round @click="diaSchool2 = false">取 消</el-button>
        <el-button round @click="removeSchool">删除学校</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { encryptLoginPassword } from "@/utils";
export default {
  data() {
    return {
      isAdd: true,
      diaCL: false,
      diaAdmin: false,
      diaSchool: false,
      diaSchool2: false,
      loading: false,
      showId: "", //显示学校Id
      schoolTotal: 0,
      tableList: [
        // 集团列表/区域列表
        {
          id: 1,
          regionName: "云南衡水实验中学",
          schoolCount: 5,
        },
      ],
      schoolData: {
        //学校信息
        num: 0,
        list: [{ id: 1, schoolName: "曲靖校区" }],
      },
      formCL: {
        regionId: "",
        regionName: "",
      },
      rulesCL: {
        regionName: [
          { required: true, message: "请输入区域/集团名称", trigger: "blur" },
        ],
      },
      formAdmin: {
        schoolId: "",
        schoolName: "",
        phone: "",
        password: "",
        realName: "",
      },
      rulesAdmin: {
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      },
      formSchool: {
        schoolName: "",
        regionId: "",
        sections: [],
      },
      rulesSchool: {
        schoolName: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
        // sections: [{ required: true, message: "请选择学段", trigger: "blur" }],
      },
      setFormSchool: {
        schoolId: "",
        schoolName: "",
      },
    };
  },
  created() {
    this._QueryData();
    this.showSchool();
  },
  methods: {
    edit() {
      //添加区域/集团
      this.isAdd = true;
      this.formCL.regionId = "";
      this.formCL.regionName = "";
      this.diaCL = true;
    },
    addAdmin(obj) {
      //添加管理员
      this.formAdmin.schoolId = obj.id;
      this.formAdmin.schoolName = obj.schoolName;
      this.formAdmin.phone = "";
      this.formAdmin.password = "";
      this.formAdmin.realName = "";
      this.diaAdmin = true;
    },
    addSchool() {
      //添加学校
      this.formSchool.name = "";
      this.formSchool.grade = [];
      this.formSchool.quyu = "";
      this.diaSchool = true;
    },
    setRegion(obj) {
      this.isAdd = false;
      this.formCL.regionId = obj.id;
      this.formCL.regionName = obj.regionName;
      this.diaCL = true;
    },
    setSchool(obj) {
      this.setFormSchool.schoolId = obj.id;
      this.setFormSchool.schoolName = obj.schoolName;
      this.diaSchool2 = true;
    },
    async removeSchool() {
      const { data, status, info } = await this.$request.removeSchool({
        schoolId: this.setFormSchool.schoolId,
      });
      if (status === 0) {
        this._QueryData()
        this.showSchool()
        this.$message.success(info);
        this.diaSchool2 = false
      } else {
        this.$message.error(info);
      }
    },
    saveFormCL() {
      //保存添加区域/集团
      this.$refs["formCL"].validate(async (valid) => {
        // 验证通过：保存
        if (valid) {
          const { data, status, info } = await this.$request.saveRegion({
            regionId: this.formCL.regionId,
            regionName: this.formCL.regionName,
          });
          if (status === 0) {
            this._QueryData()
            this.$message.success(info);
            this.diaCL = false;
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.error("区域/集团名称数据有误，请检查！");
          return false;
        }
      });
    },
    saveFormAdmin() {
      //保存管理员
      this.$refs["formAdmin"].validate(async (valid) => {
        // 验证通过：保存
        if (valid) {
          let params = { ...this.formAdmin };
          params.password = encryptLoginPassword(this.formAdmin.password);
          delete params.schoolName;
          const { data, status, info } = await this.$request.addSchoolManager({
            ...params,
          });
          if (status === 0) {
            this.$message.success(info);
            this.diaAdmin = false;
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.error("数据有误，请检查！");
          return false;
        }
      });
    },
    saveFormSchool() {
      //保存学校
      this.$refs["formSchool"].validate(async (valid) => {
        // 验证通过：保存
        if (valid) {
          const { data, status, info } = await this.$request.saveSchool({
            ...this.formSchool,
          });
          if (status === 0) {
            this.$message.success(info);
            this.diaSchool = false;
            this._QueryData();
            this.showSchool();
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.error("学校名称数据有误，请检查！");
          return false;
        }
      });
    },
    saveSetFormSchool() {
      //保存学校
      this.$refs["formSchool2"].validate(async (valid) => {
        // 验证通过：保存
        if (valid) {
          const { data, status, info } = await this.$request.saveSchool({
            ...this.setFormSchool,
          });
          if (status === 0) {
            this.$message.success(info);
            this.diaSchool2 = false;
            this.showSchool();
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.error("学校名称数据有误，请检查！");
          return false;
        }
      });
    },
    async showSchool() {
      this.loading = true
      const { data, status, info } = await this.$request.schoolList({
        regionId: this.showId,
      });
      this.loading = false
      if (status === 0) {
        this.schoolData.list = [...data.list] || [];
        this.schoolData.num = data.count;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      const { data, status, info } = await this.$request.regionList();
      if (status === 0) {
        this.tableList = [...data.list] || [];
        this.schoolTotal = data.schoolCount;
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 20px 30px;
}
.content-box {
  display: flex;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  min-height: 400px;
  .h-title {
    height: 40px;
    line-height: 40px;
    background: #eee;
    border-radius: 10px 10px 0 0;
  }
  .left-box {
    width: 240px;
    .h-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px;
      box-sizing: border-box;
      .tog-type {
        cursor: pointer;
      }
      .icon {
        font-size: 20px;
        color: #7f7f7f;
        cursor: pointer;
      }
    }
    .school-ul {
      max-height: 70vh;
      overflow-y: scroll;
    }
    .school-item {
      font-size: 16px;
      color: #7f7f7f;
      line-height: 36px;
      cursor: pointer;
      padding-left: 12px;
      position: relative;
      &:hover {
        background: #eee;
      }
      &.active {
        color: #667ffd;
      }
      .el-icon-edit-outline {
        position: absolute;
        top: 8px;
        right: 12px;
        font-size: 20px;
        display: none;
        &:hover {
          color: #667ffd;
        }
      }
      &:hover {
        background: #eee;
        .el-icon-edit-outline {
          display: block;
        }
      }
    }
  }
  .content-detail {
    flex: 1;
    position: relative;
    border-left: 0.5px solid #eee;
    .title-box {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      .icon {
        font-size: 24px;
        color: #7f7f7f;
        cursor: pointer;
      }
      .el-icon-circle-plus-outline {
        margin-left: 10px;
      }
    }
    .detail-list {
      padding-left: 20px;
      display: flex;
      flex-wrap: wrap;
    }
    .detail-item {
      width: 320px;
      padding: 12px 16px;
      border-radius: 10px;
      box-shadow: 1px 1px 3px #888;
      box-sizing: border-box;
      margin: 0 20px 20px 0;
      .item-tit {
        font-size: 16px;
        position: relative;
        padding-bottom: 10px;
        .name {
          cursor: pointer;
          &.active {
            color: #667ffd;
          }
        }
        &:hover {
          .icon {
            display: block;
          }
        }
        .icon {
          display: none;
          position: absolute;
          right: -5px;
          top: 0;
          color: #7f7f7f;
          cursor: pointer;
          padding: 2px;
          &:hover {
            color: #667ffd;
          }
        }
      }
      .info {
        width: 100%;
        display: flex;
        .info-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .txt {
          color: #7f7f7f;
        }
        .pic {
          height: 28px;
          margin: 2px 0 5px;
        }
      }
    }
  }
}
.dialog-footer {
  text-align: center;
}
</style>