pbl-teacher-table/src/components/pages/data.vue

<template>
  <div
    class="pb_content"
    style="
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 640px;
      min-width: unset;
      margin: 0;
    "
  >
    <div
      class="pb_content_body"
      style="position: relative; width: 100%; height: 100%"
    >
      <div style="width: 100%; margin: 0px auto">
        <div class="formTop">
          <div class="tx">
            <img
              :src="ruleForm.headportrait ? ruleForm.headportrait : tx"
              alt
            />
          </div>
          <!-- <div class="right">
            <div class="name">{{ ruleForm.name }}</div>
            <div class="rightBottom">
              <div class="emailImg">
                <img src="../../assets/email.png" alt />
              </div>
              <div class="email">{{ ruleForm.mail }}</div>
            </div>
          </div> -->
        </div>
        <div class="data_nav">
          <span @click="type = 1" :class="{ active: type == 1 }">我的资料</span>
          <span @click="type = 2" v-if="ruleForm.type !== '学生'" :class="{ active: type == 2 }">修改密码</span>
        </div>
        <el-form
          v-if="type == 1"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- <el-form-item label="姓名" prop="teacherName">
            <el-input
              v-model="ruleForm.name"
              style="width: 250px"
              placeholder="请输入名字"
            ></el-input>
          </el-form-item>-->
          <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="教研室" v-if="ruleForm.type == '老师'">
            <el-select
              v-model="ccName"
              clearable
              placeholder="暂无教研室"
              disabled
            >
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="ruleForm.name"
              style="width: 300px"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="邮箱" prop="mail">
            <el-input
              v-if="ruleForm.mail == ''"
              v-model="ruleForm.mail"
              style="width: 300px"
              placeholder="请输入邮箱"
            ></el-input>
            <el-input
              v-else
              disabled
              v-model="ruleForm.mail"
              style="width: 300px"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              style="width: 300px"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="组织" prop="org">
            <el-select
              v-model="ruleForm.org"
              clearable
              placeholder="暂无组织"
              disabled
            >
              <el-option
                v-for="item in orgJuri"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学校" prop="sBySchool">
            <el-select
              v-model="ruleForm.sBySchool"
              clearable
              placeholder="请选择学校"
              disabled
            >
              <!-- <el-option
                v-for="item in schoolJuri"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option> -->
              <el-option :value="ruleForm.sBySchool"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份" prop="type">
            <el-select
              v-model="ruleForm.type"
              clearable
              placeholder="请选择身份"
              disabled
            >
              <el-option :value="ruleForm.type"> </el-option>
              <!-- <el-option >学生 </el-option> -->
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="个人简介" prop="intro">
            <el-input
              v-model="ruleForm.intro"
              type="textarea"
              :rows="5"
              resize="none"
              placeholder="想说点什么..."
              style="width: 300px"
            ></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary"  v-if="ruleForm.type !== '学生'" @click="submitForm('ruleForm')"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
        <div class="password" v-if="type == 2">
          <div class="input_box">
            <span>原密码</span>
            <el-input
              class="input"
              v-model="opassword"
              placeholder="请输入原密码"
            ></el-input>
          </div>
          <div class="input_box">
            <span>输入新密码</span>
            <div style="position: relative">
              <el-input
                :type="isLook ? 'type' : 'password'"
                class="input"
                v-model="password"
                placeholder="请输入修改密码，长度为6-16位"
              ></el-input>
              <div class="eye" @click="changeEye">
                <img :src="isLook ? eye : eyeOff" alt="" />
              </div>
            </div>
          </div>
          <div class="input_box">
            <span>再次输入新密码</span>
            <div style="position: relative">
              <el-input
                :type="isLook ? 'type' : 'password'"
                class="input"
                v-model="password1"
                placeholder="请再次输入修改密码，长度为6-16位"
              ></el-input>
              <div class="eye" @click="changeEye">
                <img :src="isLook ? eye : eyeOff" alt="" />
              </div>
            </div>
          </div>
          <div class="input_box">
            <span></span>
            <div class="input">
              <el-button type="primary" @click="updatePassword">保存</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") {
        return;
      }
      var reg =
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      var reg = /^1\d{10}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      type: 1,
      ruleForm: {
        name: "",
        type: "",
        sex: "男",
        intro: "",
        // mail: "",
        phone: "",
        sBySchool: "",
        org: "",
        headportrait: "",
      },
      ccName: "",
      opassword: "",
      password: "",
      password1: "",
      isLook: false,
      eyeOff: require("../../assets/icon/eyeOff.png"),
      eye: require("../../assets/icon/eye.png"),
      tx: require("../../assets/avatar.png"),
      userinfo: "",
      schoolJuri: [],
      orgJuri: [],
      userid: this.$route.query.userid,
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        name: [{ required: true, message: "请输入你的名字", trigger: "blur" }],
        mail: [
          {
            required: true,
            message: "请输入你的邮箱",
            trigger: "blur",
          },
        ],
        phone: [
          // { required: true, message: "请输入你的手机号码", trigger: "blur" },

          {
            validator: validatePass1,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getSchool() {
      this.isLoading = true;
      let params = {
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectOrg", params)
        .then((res) => {
          this.isLoading = false;
          this.schoolJuri = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    changeEye() {
      this.isLook = !this.isLook;
    },
    getOrg() {
      this.isLoading = true;
      this.ajax
        .get(this.$store.state.api + "selectorg2", "")
        .then((res) => {
          this.isLoading = false;
          this.orgJuri = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    submitForm(formName) {
      this.$refs[formName];
      let params = [
        {
          userid: this.userid,
          username: this.ruleForm.name,
          type: this.ruleForm.type == "老师" ? 1 : 2,
          oid: this.ruleForm.sBySchool,
          phone: this.ruleForm.phone,
          // intro: this.ruleForm.intro,
          intro: "",
          sex: this.ruleForm.sex == "男" ? "0" : "1",
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePblMessage2", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          window.parent.postMessage({ close: "1" }, "*");
          this.getUser();
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    getUser() {
      let params = { uid: this.userid };
      this.ajax
        .get(this.$store.state.api + "getUser", params)
        .then((res) => {
          this.userinfo = res.data[0][0];
          // this.$cookies.set("userInfo", this.userinfo, -1);
          this.$cookies.set("teacherInfo", res.data[0][0], -1);
          this.$store.commit("update", ["userInfo", this.userinfo]);
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getDetail() {
      let params = { uid: this.userid };
      this.ajax
        .get(this.$store.state.api + "getUser", params)
        .then((res) => {
          if (res.data[0][0]) {
            res.data[0][0].sex = res.data[0][0].sex ? "女" : "男";
            this.ruleForm = res.data[0][0];
            this.ruleForm.org = res.data[0][0].org
              ? res.data[0][0].org.split(",")[0]
              : "";
            this.ruleForm.type =
              res.data[0][0].type == 1
                ? "老师"
                : res.data[0][0].type == 2
                ? "学生"
                : "管理员";
            this.getCcName(res.data[0][0].organizeid);
            console.log(res.data[0][0]);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getCcName(oid) {
      let params = { oid: oid };
      this.ajax
        .get(this.$store.state.api + "selectTeacherOfficeBySchool", params)
        .then((res) => {
          var cBox = res.data[0];
          var str = this.ruleForm.cclassid;
          var arr = str.split(",");
          for (var k = 0; k < cBox.length; k++) {
            for (var i = 0; i < arr.length; i++) {
              if (cBox[k].id == arr[i]) {
                if (this.ccName == "") {
                  this.ccName = cBox[k].name;
                } else {
                  this.ccName += "," + cBox[k].name;
                }
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    updatePassword() {
      if (this.password.length < 6) {
        this.$message.error("密码长度不少于6位");
        return;
      } else if (this.password.length > 16) {
        this.$message.error("密码长度不能大于16位");
        return;
      } else if (this.password != this.password1) {
        this.$message.error("两次新密码不相同");
        return;
      }
      let params = [
        {
          userid: this.userid,
          opassword: this.opassword,
          password: this.password,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePassword", params)
        .then((res) => {
          if (res.data[0] && res.data[0].success == 1) {
            this.$message.success("修改成功");
            this.opassword = "";
            this.password = "";
          } else {
            this.$message.error("修改失败,原密码不正确");
          }
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
  },
  created() {
    this.getSchool();
    this.getOrg();
    this.getDetail();
  },
};
</script>

<style scoped>
.formTop {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.formTop >>> .el-form {
  margin: 0 auto;
}
.tx {
  width: 100px;
  /* margin-right: 15px; */
  min-width: 50px;
  min-height: 50px;
}
.emailImg {
  width: 30px;
  margin-right: 5px;
}
.tx > img,
.emailImg > img {
  width: 100%;
  height: 100%;
}
.right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.name {
  color: #3c88dd;
  font-size: 20px;
  margin-bottom: 10px;
}

.email {
  color: #acacac;
  font-size: 18px;
}
.rightBottom {
  display: flex;
  align-items: center;
}
.demo-ruleForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
}
/* .demo-ruleForm >>> .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.demo-ruleForm >>> .el-form-item__label:nth-child(3) {
  content: "";
} */
.demo-ruleForm >>> .el-form-item__content {
  width: 300px;
}

.data_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
}

.data_nav span {
  box-sizing: border-box;
  padding: 8px 5px;
  cursor: pointer;
  color: #444444;
  height: 35px;
}

.data_nav span + span {
  margin-left: 10px;
}

.data_nav .active {
  color: #4aa3ff;
  border-bottom: 2px solid #409eff;
}

.password {
  height: 511px;
  padding: 50px 0 0 0;
  box-sizing: border-box;
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
}
.input_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.input_box span {
  width: 100px;
  font-size: 14px;
  text-align: right;
  padding: 0 12px 0 0;
}
.input_box .input {
  width: 300px;
}
.input_box + .input_box {
  margin-top: 20px;
}

.eye {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.eye > img {
  width: 100%;
  height: 100%;
}

.el-form-item >>> .el-select {
  width: 300px;
}
</style>