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%">
      <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>
        <el-form
          :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="昵称" 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="sBySchool">
            <el-select
              v-model="ruleForm.sBySchool"
              clearable
              placeholder="请选择学校"
            >
              <el-option
                v-for="item in schoolJuri"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份" prop="type">
            <el-select
              v-model="ruleForm.type"
              clearable
              placeholder="请选择身份"
            >
              <el-option value="老师">老师 </el-option>
              <el-option value="学生">学生 </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" @click="submitForm('ruleForm')"
              >修改</el-button
            >
          </el-form-item>
        </el-form>
      </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 {
      ruleForm: {
        name: "",
        type: [],
        sex: "男",
        intro: "",
        // mail: "",
        phone: "",
        sBySchool: "",
        headportrait: "",
      },
      tx: require("../../assets/portal.png"),
      userinfo: "",
      schoolJuri: [],
      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);
        });
    },

    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,
          sex: this.ruleForm.sex == "男" ? "0" : "1",
        },
      ];
      this.ajax
        // .post(this.$store.state.api + "updateUser", params)
        .post(this.$store.state.api + "updateUserByEdu", 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.type = res.data[0][0].type == 1 ? "老师" : "学生";
            console.log(res.data[0][0]);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.getSchool();
    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__content{
  width: 300px;
}
</style>