集团管理员

阿宝
1 parent aed43d3a
Showing 9 changed files with 540 additions and 6 deletions
src/assets/images/E/photo_cache/98d71c21c679eccd804eab61885fe378713eb851.dat
src/assets/images/banji.png
src/assets/images/jianpan.png
src/assets/images/jizhan.png
src/assets/images/laoshi.png
src/assets/images/xuesheng.png
src/router/index.js
src/views/login/index.vue
src/views/setUp/conglomerate.vue
@@ -69,6 +69,22 @@ let defaultRouter = [
     ]
   },
   {
+    path: "/setUpConglomerate",
+    iconCls: "fa fa-building", // 图标样式class
+    name: "学校管理",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/setUpConglomerate",
+        iconCls: "fa fa-building",
+        name: '集团管理',
+        component: SetUpConglomerate,
+        children: []
+      },
+    ]
+  },
+  {
     path: "/404",
     component: NotFound,
     name: "404",
@@ -90,12 +90,12 @@ export default {
       disableClick: true,
       passwordType: "password",
       loginForm: {
-        // username: "13610050254",
-        // password: "Pw050254#",
+        username: "13610050254",
+        password: "Pw050254#",
         // username: "18946034886",
         // password: "Pw034886#",
-        username: "18332123505",
-        password: "Pw123505#",
+        // username: "18332123505",
+        // password: "Pw123505#",
       },
       loginRules: {
         username: [
@@ -5,12 +5,530 @@
         <span>学校管理</span>
       </template>
     </back-box>
+    <div class="page-content">
+      <el-empty
+        :image-size="100"
+        v-if="!tableList.length && loading == false"
+        description="没有更多数据"
+      ></el-empty>
+      <div v-else class="content-box" v-loading="loading">
+        <div class="left-box">
+          <p class="h-title">
+            <span class="tog-type" @click="setType">{{
+              `${type == 1 ? "集团列表" : "区域列表"}`
+            }}</span>
+            <i class="icon el-icon-circle-plus-outline" @click="edit"></i>
+          </p>
+          <ul class="school-ul">
+            <li
+              class="school-item"
+              v-for="item in tableList"
+              :key="item.id"
+              :class="showId == item.id ? 'active' : ''"
+              @click="showSchool(item)"
+            >
+              {{ item.name }}（{{ item.num }}）
+              <!-- <i class="el-icon-edit-outline" @click.stop="setSchool(item)"></i> -->
+            </li>
+          </ul>
+        </div>
+        <div class="content-detail">
+          <div class="title-box">
+            <span>管辖的学校（5）</span>
+            <i class="icon el-icon-circle-plus-outline" @click="addSchool"></i>
+          </div>
+          <ul class="detail-list">
+            <li
+              class="detail-item"
+              v-for="item in schoolData.list"
+              :key="item.id"
+            >
+              <p class="item-tit">
+                <span class="name" :class="type == 1 ? 'active' : ''">{{
+                  item.name
+                }}</span>
+                <i
+                  @click="addAdmin(item)"
+                  v-if="type == 1"
+                  class="icon el-icon-user-solid"
+                ></i>
+                <el-popconfirm
+                  v-if="type == 2"
+                  title="确定删除吗？"
+                  @confirm="removeSchool(item)"
+                >
+                  <i slot="reference" class="icon el-icon-delete"></i>
+                </el-popconfirm>
+              </p>
+              <div class="info">
+                <p class="info-item">
+                  <span class="txt">基站</span>
+                  <img class="pic" src="../../assets/images/jizhan.png" />
+                  <span>49</span>
+                </p>
+                <p class="info-item">
+                  <span class="txt">键盘</span>
+                  <img class="pic" src="../../assets/images/jianpan.png" />
+                  <span>49</span>
+                </p>
+                <p class="info-item">
+                  <span class="txt">班级</span>
+                  <img class="pic" src="../../assets/images/banji.png" />
+                  <span>49</span>
+                </p>
+                <p class="info-item">
+                  <span class="txt">学生</span>
+                  <img class="pic" src="../../assets/images/xuesheng.png" />
+                  <span>49</span>
+                </p>
+                <p class="info-item">
+                  <span class="txt">老师</span>
+                  <img class="pic" src="../../assets/images/laoshi.png" />
+                  <span>49</span>
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="添加区域/集团" :visible.sync="diaCL" width="400">
+      <el-form
+        class="form-box"
+        ref="formCL"
+        :model="formCL"
+        :rules="rulesCL"
+        label-width="160px"
+      >
+        <el-form-item label="区域/集团名称：" prop="name">
+          <el-col :span="10">
+            <el-input
+              maxlength="30"
+              v-model.trim="formCL.name"
+              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>{{ schoolData.name + formAdmin.name }}</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.phone"
+              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="name">
+          <el-col :span="10">
+            <el-input
+              maxlength="11"
+              v-model.trim="formSchool.name"
+              placeholder="请输入学校名称"
+            />
+          </el-col>
+        </el-form-item>
+        <el-form-item label="所属区域/集团：">
+          <el-select
+            class="sel"
+            v-model="formSchool.quyu"
+            placeholder="选择所属区域/集团"
+          >
+            <el-option
+              v-for="item in tableList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="学段：" prop="grade">
+          <el-checkbox-group v-model="formSchool.grade">
+            <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-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>
   </div>
 </template>
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      diaCL: false,
+      diaAdmin: false,
+      diaSchool: false,
+      loading: false,
+      type: 1, //集团列表-1 区域列表-2
+      showId: 1, //显示学校Id
+      tableList: [
+        // 集团列表/区域列表
+        {
+          id: 1,
+          name: "云南衡水实验中学",
+          num: 5,
+        },
+      ],
+      schoolData: {
+        //学校信息
+        num: 5,
+        name: "云南衡水实验中学",
+        list: [
+          { id: 1, name: "曲靖校区" },
+          { id: 2, name: "玉溪校区" },
+        ],
+      },
+      formCL: {
+        name: "",
+      },
+      rulesCL: {
+        name: [
+          { required: true, message: "请输入区域/集团名称", trigger: "blur" },
+        ],
+      },
+      formAdmin: {
+        id: "",
+        name: "",
+        phone: "",
+        password: "",
+        realName: "",
+      },
+      rulesAdmin: {
+        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+      },
+      formSchool: {
+        name: "",
+        grade: [],
+        quyu: "",
+      },
+      rulesSchool: {
+        name: [{ required: true, message: "请输入学校名称", trigger: "blur" }],
+        grade: [{ required: true, message: "请选择学段", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    edit() {
+      //添加区域/集团
+      this.formCL.name = "";
+      this.diaCL = true;
+    },
+    addAdmin(obj) {
+      //添加管理员
+      this.formAdmin = { ...obj };
+      this.diaAdmin = true;
+    },
+    addSchool(obj) {
+      //添加学校
+      this.formSchool = {
+        name: "",
+        grade: [],
+        quyu: "",
+      };
+      this.diaSchool = true;
+    },
+    setSchool() {
+      //
+    },
+    setType() {
+      //集团列表、区域列表切换
+      this.type = this.type == 1 ? 2 : 1;
+      this._QueryData();
+    },
+    removeSchool(obj) {
+      // const { data, status, info } = await this.$request.xxx({
+      //   id: obj.id,
+      // });
+      // if (status === 0) {
+      //   this.$message.success(info);
+      // } else {
+      //   this.$message.error(info);
+      // }
+    },
+    saveFormCL() {
+      //保存添加区域/集团
+      // this.$refs["formCL"].validate(async (valid) => {
+      //   // 验证通过：保存
+      //   if (valid) {
+      //     const { data, status, info } = await this.$request.xxx({
+      //       name: this.formCL.name,
+      //     });
+      //     if (status === 0) {
+      //       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) {
+      //     const { data, status, info } = await this.$request.xxx({...formAdmin});
+      //     if (status === 0) {
+      //       this.$message.success(info);
+      this.diaAdmin = false;
+      //     } else {
+      //       this.$message.error(info);
+      //     }
+      //   } else {
+      //     this.$message.error("区域/集团名称数据有误，请检查！");
+      //     return false;
+      //   }
+      // });
+    },
+    saveFormSchool() {
+      //保存学校
+      // this.$refs["formAdmin"].validate(async (valid) => {
+      //   // 验证通过：保存
+      //   if (valid) {
+      //     const { data, status, info } = await this.$request.xxx({...formAdmin});
+      //     if (status === 0) {
+      //       this.$message.success(info);
+      this.diaSchool = false;
+      //     } else {
+      //       this.$message.error(info);
+      //     }
+      //   } else {
+      //     this.$message.error("区域/集团名称数据有误，请检查！");
+      //     return false;
+      //   }
+      // });
+    },
+    async showSchool(obj) {
+      // const { data, status, info } = await this.$request.xxx();
+      // if (status === 0) {
+      //   this.$message.success(info);
+      // } else {
+      //   this.$message.error(info);
+      // }
+    },
+    async _QueryData() {
+      // const { data, status, info } = await this.$request.xxx();
+      // if (status === 0) {
+      //   this.$message.success(info);
+      // } else {
+      //   this.$message.error(info);
+      // }
+    },
+  },
+};
 </script>
-<style>
+<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>
 \ No newline at end of file