Day5 龚嘉怡 “增加新用户界面”

vue/src/views/ManageView/AddRole.vue

+<template>
+  <div>
+    <el-card shadow="hover" class="back">
+      <el-card
+        shadow="hover"
+        style="width: 60%; margin-left: 230px; opacity: 0.94"
+      >
+        <h2
+          style="
+            width: 100%;
+            border-bottom: 1px solid #4988fd;
+            padding-bottom: 20px;
+          "
+        >
+          新增用户
+        </h2>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+        >
+          <el-form-item label="姓名" prop="title">
+            <el-input v-model="ruleForm.title"></el-input>
+          </el-form-item>
+          <el-form-item label="账号" prop="title">
+            <el-input v-model="ruleForm.title"></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="title">
+            <el-input v-model="ruleForm.title"></el-input>
+          </el-form-item>
+          <el-form-item label="身份" prop="title">
+          <el-checkbox-group v-model="checkList">
+            <el-checkbox label="管理员"></el-checkbox>
+            <el-checkbox label="教师"></el-checkbox>
+            <el-checkbox label="企业HR"></el-checkbox>
+            <el-checkbox label="法律顾问" ></el-checkbox>
+            <el-checkbox label="学生" ></el-checkbox>
+          </el-checkbox-group>
+          </el-form-item>
+                <el-form-item label="权限" prop="title">
+          <el-checkbox-group v-model="permitList">
+            <el-checkbox label="管理竞赛信息"></el-checkbox>
+            <el-checkbox label="管理招聘信息"></el-checkbox>
+            <el-checkbox label="管理管理员"></el-checkbox>
+          </el-checkbox-group>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button
+              style="
+                display: inline-block;
+                width: 150px;
+                height: 40px;
+                margin-right: 60px;
+              "
+              type="primary"
+              plain
+              round
+              size="medium"
+              @click="submitForm('ruleForm')"
+              >确认发布</el-button
+            >
+            <el-button
+              style="display: inline-block; width: 150px; height: 40px"
+              round
+              size="medium"
+              @click="resetForm('ruleForm')"
+              >返回</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    
+    const generateData2 = () => {
+      const data = [];
+      return data;
+    };
+    return {
+      checkList: ['管理员','教师'],
+      permitList: ['管理管理员'],
+      pickerOptions1: {
+        // 限制预约时间，只能选择今天和今天之后的时间
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
+        },
+      },
+      //比赛时间
+      pickerOptions2: {
+        // 限制预约时间
+        disabledDate(time) {
+          console.log("this.ruleForm.date1.getTime()");
+          console.log(this.ruleForm.date1.getTime());
+          return (
+            time.getTime() > this.ruleForm.date1.getTime() - 24 * 60 * 60 * 1000
+          );
+        },
+      },
+      ruleForm: {
+        title: "",
+        desc: "",
+        content: "",
+        hostUnit: "",
+        remark: "",
+        date1: "",
+        date2: "",
+        gamedate1: "",
+        gamedate2: "",
+      },
+      rules: {
+        title: [
+          { required: true, message: "请输入竞赛名称", trigger: "blur" },
+          {
+            min: 1,
+            max: 20,
+            message: "长度在 1 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+        content: [
+          { required: false, message: "请输入竞赛介绍", trigger: "blur" },
+          {
+            min: 1,
+            max: 200,
+            message: "长度在 1 到 200 个字符",
+            trigger: "blur",
+          },
+        ],
+        hostUnit: [
+          { required: true, message: "请输入竞赛举办地点", trigger: "blur" },
+          {
+            min: 1,
+            max: 50,
+            message: "长度在 1 到 50 个字符",
+            trigger: "blur",
+          },
+        ],
+        remark: [
+          { required: false, message: "请输入竞赛性质", trigger: "blur" },
+          {
+            min: 1,
+            max: 200,
+            message: "长度在 1 到 200 个字符",
+            trigger: "blur",
+          },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        gamedate1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        gamedate2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        desc: [{ required: false, message: "请填写备注", trigger: "blur" }],
+      },
+      fileList: [
+        {
+          name: "food.jpeg",
+          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+        {
+          name: "food2.jpeg",
+          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+      ],
+      data2: generateData2(),
+      value2: [],
+      filterMethod(query, item) {
+        return item.pinyin.indexOf(query) > -1;
+      },
+      tableData: [
+        {
+          id: "1",
+          no: "221900190",
+          name: "佩奇",
+          email: "1234567890@qq.com",
+          phone: "13822223333",
+          remarks: "...",
+        },
+        {
+          id: "1",
+          no: "221900190",
+          name: "佩奇",
+          email: "1234567890@qq.com",
+          phone: "13822223333",
+          remarks: "...",
+        },
+      ],
+      currentPage: 1,
+      pageSize: 10,
+      pageTotal: 2,
+    };
+  },
+  methods: {
+    //发布竞赛
+    submitForm(formName) {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          console.log("Date.now()");
+          console.log(this.ruleForm.gamedate1.getTime());
+          // var regTime = new Date(this.ruleForm.date1);
+          // var regsterTime = this.ruleForm.date1.getFullYear().toString
+          // +"-"+(this.ruleForm.date1.getMonth+1).toString
+          // +"-"+this.ruleForm.date1.getDate.toString
+          // +" "+this.ruleForm.date1.getDate.toString;; //获取完整的年份;
+          var date1 = new Date(this.ruleForm.date1);
+          var date2 = new Date(this.ruleForm.date2);
+          var gamedate1 = new Date(this.ruleForm.gamedate1);
+          var gamedate2 = new Date(this.ruleForm.gamedate2);
+          var registerTime =
+            date1.getFullYear() +
+            "-" +
+            (date1.getMonth() + 1) +
+            "-" +
+            date1.getDate() +
+            " " +
+            date2.getHours() +
+            ":" +
+            date2.getMinutes() +
+            ":" +
+            date2.getSeconds();
+          var competitionTime =
+            gamedate1.getFullYear() +
+            "-" +
+            (gamedate1.getMonth() + 1) +
+            "-" +
+            gamedate1.getDate() +
+            " " +
+            gamedate2.getHours() +
+            ":" +
+            gamedate2.getMinutes() +
+            ":" +
+            gamedate2.getSeconds();
+          console.log("111");
+          console.log(registerTime);
+          console.log("111");
+          console.log(competitionTime);
+          console.log(localStorage.getItem("userId").replace(/\"/g, ""));
+          console.log("222");
+          //   this.$refs[formName].validate((valid) => {
+          //     if (valid) {
+          //       alert("submit!");
+          //     } else {
+          //       console.log("error submit!!");
+          //       return false;
+          //     }
+          //   });
+          //   this.$axios
+          //     .post(
+          //       "http://47.113.195.148:8085/backend/teacher/addCompetition",
+          //       JSON.stringify(this.ruleForm)
+          //       //   {
+          //       //     teacherNo: this.userForm.teacherNo,
+          //       //     password: this.userForm.password,
+          //       //   }
+          //     )
+          this.$axios({
+            method: "post",
+            url: "http://124.220.174.249:8085/backend/teacher/addCompetition",
+            headers: { token: localStorage.token },
+            data: {
+              title: this.ruleForm.title,
+              content: this.ruleForm.content,
+              hostUnit: this.ruleForm.hostUnit,
+              remark: this.ruleForm.remark,
+              releaserId: localStorage.getItem("userId"), //去掉双引号,
+              registerTime: registerTime,
+              competitionTime: competitionTime,
+              scale: this.ruleForm.scale,
+            },
+          })
+            .then((res) => {
+              console.log(res);
+              if (res.data.code == "200") {
+                // 动态设置当前用户的路由
+                // setRoutes();
+                this.$notify({
+                  title: "发布成功",
+                  message: "111",
+                  type: "success",
+                });
+                console.log("发布成功");
+                // this.$message.success("登录成功");
+                // localStorage.setItem("user_id", id);
+                // if (res.data.role === "ROLE_STUDENT") {
+                this.$router.push("/PageTable");
+                // } else {
+                //   this.$router.push("/");
+                // }
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+              console.log("发布失败");
+            });
+        } else {
+          this.$notify({
+            title: "警告",
+            message: "请将信息填写完整！",
+            type: "warning",
+          });
+        }
+      });
+    },
+
+    resetForm(formName) {
+      //   this.$refs[formName].resetFields();
+      this.$router.push("/PageTable");
+    },
+
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    },
+  },
+};
+</script>
+
+<style scoped>
+#card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.back {
+  position: relative;
+  left: 22px;
+  top: 25px;
+  width: 90%;
+  height: 100%;
+  padding: 40px;
+  background: #e8f3fe;
+  background-image: url("../../assets/detail_back.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+</style>