src/App.vue

@@ -117,8 +117,10 @@
 
             <el-submenu index="2">
               <template slot="title">招聘管理</template>
-              <el-menu-item index="recruitmentPlan" >招聘计划管理</el-menu-item>
-              <el-menu-item index="RecruitmentPeople">招聘人员管理</el-menu-item>
+              <el-menu-item index="recruitmentPlan">招聘计划管理</el-menu-item>
+              <el-menu-item index="RecruitmentPeople"
+                >招聘人员管理</el-menu-item
+              >
             </el-submenu>
             <el-submenu index="3">
               <template slot="title">奖惩合同管理</template>
@@ -185,16 +187,28 @@
               <el-menu-item index="10-4">系统接口</el-menu-item>
             </el-submenu>
 
+            <el-menu-item index="index" class="noAddition"
+              ><i class="el-icon-s-home"></i><span>首页</span></el-menu-item
+            >
+            <el-menu-item class="noAddition" @click="showHelp">
+              <i class="el-icon-umbrella"></i><span>帮助</span></el-menu-item
+            >
+            <el-menu-item class="noAddition" @click="showContactUs">
+              <i class="el-icon-phone-outline"></i> <span>联系我们</span>
+            </el-menu-item>
+
             <el-submenu index="11">
               <template slot="title">
                 <el-avatar size="small" :src="userAvatarUrl"></el-avatar>
                 管理员</template
               >
               <el-menu-item index="personalCenter">个人中心</el-menu-item>
-              <el-menu-item index="11-2">修改密码</el-menu-item>
-              <el-menu-item index="11-3">退出</el-menu-item>
+              <el-menu-item
+                ><div @click="showChangePass">修改密码</div></el-menu-item
+              >
+              <el-menu-item><div @click="userQuit">退出</div></el-menu-item>
               <div class="navChangeUser">
-                <el-menu-item index="11-4">...切换用户</el-menu-item>
+                <el-menu-item>...切换用户</el-menu-item>
                 <div class="navChangeUser2">
                   <el-menu-item index="11-5">终审领导一</el-menu-item>
                   <el-menu-item index="11-6">初审领导一</el-menu-item>
@@ -216,6 +230,15 @@
         </el-header>
         <el-main style="background: #ebeffa">
           <router-view></router-view>
+          <change-pass
+            :isShowChangePass="isShowChangePass"
+            @closeChangePass="closeChangePass"
+          ></change-pass>
+          <contact-us
+            :isshowContactUs="isshowContactUs"
+            @closeContactUs="closeContactUs"
+          ></contact-us>
+          <help-us :isshowHelp="isshowHelp" @closeHelp="closeHelp"></help-us>
         </el-main>
       </el-container>
     </el-container>
@@ -224,10 +247,21 @@
 </template>
 
 <script>
+import changePass from "./views/user/changePass/changePass.vue";
+import contactUs from "./views/addition/contact.vue";
+import helpUs from "./views/addition/help.vue";
 export default {
   name: "App",
+  components: {
+    changePass,
+    contactUs,
+    helpUs,
+  },
   data() {
     return {
+      isShowChangePass: false,
+      isshowContactUs: false,
+      isshowHelp: false,
       userAvatarUrl:
         "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
       activeIndex: "1",
@@ -349,6 +383,32 @@ export default {
         this.isShow = false;
       }
     },
+    // 重置密码dialog
+    showChangePass() {
+      this.isShowChangePass = true;
+    },
+    closeChangePass() {
+      this.isShowChangePass = false;
+    },
+    // 联系我们dialog
+    showContactUs() {
+      this.isshowContactUs = true;
+    },
+    closeContactUs() {
+      this.isshowContactUs = false;
+    },
+    // 帮助
+    showHelp() {
+      this.isshowHelp = true;
+    },
+    closeHelp() {
+      this.isshowHelp = false;
+    },
+    //退出登录
+    userQuit() {
+      // 清除用户信息,跳转到登录页
+      this.$router.push({ name: "loginTest" });
+    },
   },
   watch: {
     filterText(val) {
@@ -379,6 +439,10 @@ body,
   height: 50px;
   line-height: 50px;
 }
+.el-menu-item.noAddition {
+  height: 50px;
+  line-height: 50px;
+}
 .showOrHideDiv {
   position: absolute;
   display: block;

src/views/addition/contact.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="contactBox">
+    <el-dialog
+      title="联系我们"
+      :visible.sync="isshowContactUs"
+      width="50%"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="contactCon">
+        <p style="font-size: 16px; font-weight: bolder; color: #000">
+          工作时间:
+        </p>
+
+        <p style="text-indent: 2em; margin-top: 10px; color: #000">
+          法定工作日
+          <span><i class="el-icon-time"></i>上午: 08:30-11:30</span>
+
+          <span><i class="el-icon-time"></i>下午:14:30-17:30</span>
+        </p>
+        <p
+          style="
+            font-size: 16px;
+            font-weight: bolder;
+            color: #000;
+            margin-top: 20px;
+          "
+        >
+          联系人:
+        </p>
+
+        <p
+          style="text-indent: 2em; margin-top: 10px; color: #000"
+          v-for="(item, index) in contactPeople"
+        >
+          {{ item.name }}
+          <span><i class="el-icon-chat-dot-round"></i>{{ item.qq }}</span>
+
+          <span><i class="el-icon-phone-outline"></i>{{ item.phone }}</span>
+        </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "contact",
+  props: ["isshowContactUs"],
+  data() {
+    return {
+      contactPeople: [
+        { name: "钟工", qq: "2748772353", phone: "17681126856" },
+        { name: "张工", qq: "1219695258", phone: "18734022548" },
+      ],
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$emit("closeContactUs");
+    },
+    cancel() {
+      this.handleClose();
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.contactCon {
+  font: 14px Helvetica, Tahoma, Arial, sans-serif;
+}
+::v-deep .el-dialog__header {
+  padding: 30px 0;
+  text-align: center;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 36px;
+}
+::v-deep .el-dialog__title {
+  font-size: 26px;
+}
+::v-deep .el-dialog__body {
+  background: #f8fafb;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+}
+</style>

src/views/addition/help.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="contactBox">
+    <el-dialog
+      title="帮助指南"
+      :visible.sync="isshowHelp"
+      width="50%"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="contactCon">
+        contents
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "help",
+  props: ["isshowHelp"],
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$emit("closeHelp");
+    },
+    cancel() {
+      this.handleClose();
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.contactCon {
+  font: 14px Helvetica, Tahoma, Arial, sans-serif;
+}
+::v-deep .el-dialog__header {
+  padding: 30px 0;
+  text-align: center;
+}
+::v-deep .el-dialog__headerbtn{
+  top: 36px;
+}
+::v-deep .el-dialog__title {
+  font-size: 26px;
+}
+::v-deep .el-dialog__body {
+  background: #f8fafb;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+}
+</style>

src/views/recruitmentManagement/recruitmentPlan/recruitmentPlan.vue

@@ -208,6 +208,11 @@ export default {
       };
     }
   },
+  beforeUpdate() {
+    this.$nextTick(() => { //在数据加载完，重新渲染表格
+      this.$refs['multipleTable'].doLayout();
+    })
+  },
   methods: {
     toggleSelection(rows) {
       if (rows) {

src/views/user/changePass/changePass.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="changePassBox">
+    <el-dialog
+      title="重置密码"
+      :visible.sync="isShowChangePass"
+      width="50%"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+    >
+      <div class="dialogCon">
+        <el-form
+          :model="ruleForm"
+          status-icon
+          :rules="rules"
+          ref="formName"
+          label-width="100px"
+        >
+          <el-form-item label="登录名称:" prop="userName">
+            <el-input
+              v-model="ruleForm.userName"
+              autocomplete="off"
+              disabled
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="旧密码:" prop="oldPass">
+            <el-input
+              type="password"
+              v-model="ruleForm.oldPass"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="新密码:" prop="newPass">
+            <el-input
+              type="password"
+              v-model="ruleForm.newPass"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="确认密码:" prop="ackNewPass">
+            <el-input
+              type="password"
+              v-model="ruleForm.ackNewPass"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div style="margin-left: 100px">
+          <i class="el-icon-edit"></i>
+          <span>请再次输入您的密码</span>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "changePass",
+  props: ["isShowChangePass"],
+  data() {
+    return {
+      ruleForm: {
+        userName: "admin",
+        oldPass: "",
+        newPass: "",
+        ackNewPass: "",
+      },
+      rules: {
+        oldPass: [{ required: true, message: "请输入原密码" }],
+        newPass: [
+          { required: true, message: "请输入新密码" },
+          {
+            pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
+            message: "必须包含字母、数字",
+          },
+          { validator: this.validatePass, trigger: "blur" },
+          { min: 9, message: "密码不能小于9个字符", trigger: "blur" },
+        ],
+        ackNewPass: [
+          { required: true, message: "请再次输入新密码" },
+          { validator: this.validateNewPass, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$emit("closeChangePass");
+      this.empty();
+    },
+    cancel() {
+      this.handleClose();
+    },
+    empty() {
+      this.ruleForm.oldPass = "";
+      this.ruleForm.newPass = "";
+      this.ruleForm.ackNewPass = "";
+    },
+    validatePass(rule, value, callback) {
+      if (this.ruleForm.ackNewPass !== "") {
+        this.$refs.formName.validateField("ackNewPass");
+      }
+      callback();
+    },
+    validateNewPass(rule, value, callback) {
+      if (value !== this.ruleForm.newPass) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    },
+    confirm() {
+      this.$refs.formName.validate((valid) => {
+        if (valid) {
+          alert("submit!");
+          this.handleClose();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+::v-deep .el-dialog__header {
+  padding: 10px 20px 10px;
+  background: #6f63dd !important;
+  color: #ffffff;
+}
+::v-deep .el-dialog__title {
+  color: #ffffff !important;
+  font-size: 14px;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 15px;
+}
+</style>