领导信箱二次改版

dist/css/chunk-eae64f44.a779ca3c.css

@@ -0,0 +1 @@
+.leader-home[data-v-f3eb5d5c]{width:90%;margin:15% auto;display:flex;justify-content:space-around}.leader-home li[data-v-f3eb5d5c]{width:33%;text-align:center}.leader-home li img[data-v-f3eb5d5c]{width:100%}.van-nav-bar[data-v-f3eb5d5c]{background:#39f}[data-v-f3eb5d5c] .van-nav-bar .van-icon,[data-v-f3eb5d5c] .van-nav-bar__title{color:#fff}[class*=van-hairline][data-v-f3eb5d5c]:after{border:none}

src/App.vue

@@ -2,10 +2,34 @@
   <div id="app">
     <!-- App页作为公共组件 -->
     <!-- 我们可以使用router-view组件来实现点击导航不刷新页面的效果，只在当前页面打开内容 -->
-    <router-view/>
+    <router-view v-if="isRouterAlive"></router-view>
   </div>
 </template>
 
+<script>
+export default {
+  provide(){
+    return{
+      reload:this.reload
+    }
+  },
+  data(){
+    return{
+      isRouterAlive:true
+    }
+  },
+  methods:{
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true
+      })
+    }
+  }
+}
+</script>
+
+
 <style>
 *{
   /* 当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素 */

src/router/index.js

@@ -5,6 +5,12 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
+  //洗选中心领导信箱首页
+  {
+    path:'/xixuanzhongxin/leader-mailbox/leader-home',
+    name:'leader-home',
+    component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-home.vue'),
+  },
   //洗选中心领导信箱提交
   {
     path:'/xixuanzhongxin/leader-mailbox/leader-mailbox',
@@ -23,10 +29,22 @@ const routes = [
     name:'leader-mailbox-list',
     component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-list.vue')
   },
+  //洗选中心领导信箱列表2
+  {
+    path:'/xixuanzhongxin/leader-mailbox/leader-mailbox-list2',
+    name:'leader-mailbox-list2',
+    component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-list2.vue')
+  },
+  //洗选中心领导信箱领导回复
+  {
+    path:'/xixuanzhongxin/leader-mailbox/leader-mailbox-reply',
+    name:'leader-mailbox-reply',
+    component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-reply.vue')
+  },
   //路由重定向
   {
     path:'/',
-    redirect:{"name":"leader-mailbox"}
+    redirect:{"name":"leader-home"}
   }
 ]
 

src/views/xixuanzhongxin/leader-mailbox/leader-home.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <!-- tabber -->
+    <div v-if="show">
+      <van-nav-bar title="领导信箱" left-arrow @click-left="onClickLeft" />
+    </div>
+    <!-- 列表 -->
+    <ul class="leader-home">
+      <!-- 提交信件 -->
+      <li @click="leader_home_list1">
+        <img
+          src="../../../assets/images/leader-mailbox/领导信箱图标1.png"
+          alt=""
+        />
+        <p>提交信件</p>
+      </li>
+      <!-- 查看信箱 -->
+      <li @click="leader_home_list2">
+        <img
+          src="../../../assets/images/leader-mailbox/领导信箱图标2.png"
+          alt=""
+        />
+        <p>查看信箱</p>
+      </li>
+      <!-- 我的提交 -->
+      <li @click="leader_home_list3">
+        <img
+          src="../../../assets/images/leader-mailbox/领导信箱图标3.png"
+          alt=""
+        />
+        <p>我的提交</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../plugins/admin/url-encapsulation.js";//获取url上的token和tabber
+export default {
+  data() {
+    return {
+      token: sessionStorage.getItem("mytoken")
+        ? sessionStorage.getItem("mytoken")
+        : "", //token值保存在本地，有的话取值，没有为空
+      show: false, //tabber是否显示
+      gettoken: "", //从url获取到token值
+    };
+  },
+  methods: {
+    //提交信件
+    leader_home_list1() {
+      this.$router.push(
+        `/xixuanzhongxin/leader-mailbox/leader-mailbox?token=${this.token}`
+      );
+    },
+    //查看信箱
+    leader_home_list2() {
+      this.$http
+        .post(
+          "http://xixuan.nxjiewei.com:8011/api/workbench/leader_mailbox/check"
+        )
+        .then((res) => {
+          //获取是否为领导
+          this.leader = res.data.data;
+          if (this.leader == true) {
+            this.$router.push(
+              `/xixuanzhongxin/leader-mailbox/leader-mailbox-list2?token=${this.token}`
+            );
+          } else {
+            this.$dialog.alert({
+              message: "暂无权限",
+              theme: 'round-button',
+            });
+          }
+        });
+    },
+    //我的提交
+    leader_home_list3() {
+      this.$router.push(
+              `/xixuanzhongxin/leader-mailbox/leader-mailbox-reply?token=${this.token}`
+            );
+    },
+    //tabber返回按钮
+    onClickLeft() {
+      window.history.back();
+    },
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#fff";//背景色
+    this.gettoken =getAllUrlParams(window.location.href).token;
+    this.token = `Bearer ${this.gettoken}`;//获取token值
+    sessionStorage.setItem("mytoken", this.token);//存入token值
+    this.show = Boolean(getAllUrlParams(window.location.href).tabber);//获取tabber
+  },
+};
+</script>
+
+<style scoped>
+.leader-home {
+  width: 90%;
+  margin: 15% auto;
+  display: flex;
+  justify-content: space-around;
+}
+.leader-home li {
+  width: 33%;
+  text-align: center;
+}
+.leader-home li img {
+  width: 100%;
+}
+.van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+</style>

src/views/xixuanzhongxin/leader-mailbox/leader-mailbox-list2.vue

@@ -0,0 +1,288 @@
+<template>
+  <div>
+    <!-- 循环体 -->
+    <!-- 通过ref找到循环体中的当前项 -->
+    <div
+      class="consult"
+      v-for="(item, index) in value"
+      :key="index"
+      ref="dialog"
+    >
+      <!-- 渲染员工姓名 -->
+      <div class="consult-item">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/renwu.png" alt="" />
+        </span>
+        <input type="text" placeholder="姓名" readonly :value="item.name" />
+        <!-- 这里进行判断是否是已回复还是未回复 -->
+        <div>
+          <van-button
+            type="primary"
+            disabled
+            size="mini"
+            v-if="(status = item.reply_status)"
+            >已回复</van-button
+          >
+          <van-button type="danger" disabled size="mini" v-else
+            >未回复</van-button
+          >
+        </div>
+      </div>
+      <!-- 渲染员工留言时间 -->
+      <div class="consult-item-time">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/shijian.png" alt="" />
+        </span>
+        <input
+          type="text"
+          placeholder="时间"
+          readonly
+          :value="item.created_at"
+        />
+      </div>
+      <!-- 渲染员工留言内容 -->
+      <div class="consult-item-textarea">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/neirong.png" alt="" />
+        </span>
+        <textarea
+          name=""
+          id=""
+          cols="30"
+          rows="5"
+          readonly
+          :value="item.content"
+        ></textarea>
+      </div>
+      <!-- 渲染领导回复 -->
+      <div class="consult-item-textarea" v-if="(status1 = item.reply_status)">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/huifu.png" alt="" />
+        </span>
+        <!-- 渲染领导回复时间 -->
+        <div>
+          <input
+            type="text"
+            placeholder="暂无回复"
+            readonly
+            :value="item.reply_time"
+          />
+          <!-- 渲染领导回复内容 -->
+          <p>{{ item.reply }}</p>
+        </div>
+      </div>
+      <!-- 回复按钮 -->
+      <!-- 点击回复按钮时进行判断当领导已回复隐藏回复按钮，加载领导回复模块 -->
+      <!-- 这里用接口中的 reply_status 进行判断当 ==0时表示未回复，此时隐藏领导回复模块  ==1时反之加载，并隐藏回复按钮 -->
+      <div @click="reply(index, item.id)" v-else class="consult-item-button">
+        <div class="input-button">
+          <input type="button" value="回复" />
+        </div>
+      </div>
+
+      <!-- 弹出框 -->
+      <!-- 这里需要用vant提供的自定义事件来触发 -->
+      <div>
+        <van-dialog
+          v-model="correlate"
+          @confirm="confirm(indexlist, indexid)"
+          show-cancel-button
+        >
+          <textarea
+            name=""
+            id=""
+            cols="30"
+            rows="10"
+            v-model="textareas"
+          ></textarea>
+        </van-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ["reload"], //无痕刷新
+  data() {
+    return {
+      value: [], //获取到员工姓名和留言组成对象，放入数组中
+      token: sessionStorage.getItem("mytoken")
+        ? sessionStorage.getItem("mytoken")
+        : "", //token值保存在本地，有的话取值，没有为空
+      show: true, //tabber是否显示
+      gettoken: "", //从url获取到token值
+      correlate: false, //弹出层
+      textareas: "", //弹出层中的多行文本域
+      indexlist: "", //获取当前循环体中的下标
+      indexid: "", //获取当前循环体中的id
+      status: 1, //判断已回复，未回复
+      status1: 0, //是否显示或隐藏回复按钮和领导回复
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#3399ff"; //背景色
+    // this.gettoken =getAllUrlParams(window.location.href).token;
+    // this.token = `Bearer ${this.gettoken}`;
+    this.token = this.$route.query.token; //获取token值
+    sessionStorage.setItem("mytoken", this.token); //存入token值
+    this.getleaderBox(); //挂载接口信息
+  },
+  methods: {
+    getleaderBox() {
+      this.$http.post("/api/workbench/leader_mailbox/list", {}).then((res) => {
+        this.value = res.data.data.data;
+      });
+    },
+    //回复按钮功能
+    reply(index, id) {
+      this.indexlist = index;//获取到当前项的下标
+      this.indexid = id;//获取到档期项的id
+      if (this.value[index].reply_status == 1) {
+        this.$toast("已回复");
+      } else {
+        this.correlate = true;
+      }
+    },
+    //弹出框的确认按钮
+    confirm(list, id) {
+      console.log(this.value[list].reply_status);
+      if (this.textareas == "") {
+        this.$toast("内容不能为空");
+      } else {
+        this.$http
+          .post("/api/workbench/leader_mailbox/reply", {
+            id: id,
+            reply: this.textareas,
+          })
+          .then((res) => {
+            // if (this.value[list].reply_status == 1) {
+            //   let _el = this.$refs.dialog[list].children[4];
+            //   if (_el.getAttribute("class") === "active") {
+            //     _el.setAttribute("class", "");
+            //   } else {
+            //     _el.setAttribute("class", "active");
+            //   }
+            // }
+            this.reload(); //使用无痕刷新重新渲染页面
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.consult {
+  width: 90%;
+  margin: 5% auto;
+  background: #fff;
+  border-radius: 10px;
+}
+.consult-item {
+  display: flex;
+  justify-content: space-between;
+  line-height: 34px;
+}
+.consult-item > span {
+  display: block;
+  width: 25px;
+  margin-left: 5%;
+}
+.consult-item img {
+  width: 100%;
+  padding-top: 23%;
+}
+.consult-item > input {
+  border: none;
+}
+.consult-item > div {
+  margin-right: 5%;
+}
+.consult-item-time {
+  line-height: 36px;
+  display: flex;
+}
+.consult-item-time > span {
+  display: flex;
+  width: 25px;
+  margin-left: 5%;
+}
+.consult-item-time img {
+  width: 25px;
+  height: 25px;
+  padding-top: 23%;
+}
+.consult-item-time > input {
+  border: none;
+  margin-left: 6%;
+}
+.consult-item-textarea {
+  display: flex;
+}
+.consult-item-textarea > span {
+  display: block;
+  width: 25px;
+  margin-left: 5%;
+}
+.consult-item-textarea > textarea {
+  border: none;
+  margin-left: 6%;
+  margin-top: 2%;
+}
+.consult-item-textarea img {
+  width: 100%;
+  padding-top: 23%;
+}
+.consult-item-textarea {
+  display: flex;
+}
+.consult-item-textarea > div > input {
+  margin-top: 6%;
+  margin-left: 8%;
+  border: none;
+}
+.consult-item-textarea > div p {
+  margin-top: 3%;
+  margin-left: 8%;
+  margin-bottom: 4%;
+}
+.van-cell {
+  border-radius: 10px;
+}
+.van-cell-group {
+  border-radius: 10px;
+}
+.input-button {
+  width: 85%;
+  background: #39f;
+  height: 30px;
+  text-align: center;
+  margin: auto;
+  margin-bottom: 10px;
+  line-height: 30px;
+  border-radius: 10px;
+  margin-top: 5%;
+}
+.input-button > input {
+  background: #39f;
+  border: none;
+  color: #fff;
+}
+.active {
+  visibility: hidden;
+}
+>>> .van-dialog__content {
+  text-align: center;
+}
+>>> .van-dialog__content > textarea {
+  margin-top: 5%;
+  resize: none;
+}
+>>> .van-overlay {
+  background-color: rgba(52, 52, 52, 0.2);
+}
+.consult-item-button {
+  padding-bottom: 1%;
+}
+</style>

src/views/xixuanzhongxin/leader-mailbox/leader-mailbox-reply.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <!-- 当员工未留言时加载 -->
+    <div class="headers" v-if="showH1">
+      <h1>暂无数据</h1>
+    </div>
+    <!-- 循环体 -->
+    <div
+      class="consult"
+      v-for="(item, index) in value"
+      :key="index"
+      ref="dialog"
+    >
+    <!-- 渲染员工姓名 -->
+      <div class="consult-item">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/renwu.png" alt="" />
+        </span>
+        <input type="text" placeholder="姓名" readonly :value="item.name" />
+        <!-- 这里进行判断是否是已回复还是未回复 -->
+        <div>
+          <van-button type="primary" disabled size="mini" v-if="status=item.reply_status">已回复</van-button>
+          <van-button type="danger" disabled size="mini" v-else>未回复</van-button>
+        </div>
+      </div>
+      <!-- 渲染员工留言时间 -->
+      <div class="consult-item-time">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/shijian.png" alt="" />
+        </span>
+        <input
+          type="text"
+          placeholder="时间"
+          readonly
+          :value="item.created_at"
+        />
+      </div>
+      <!-- 渲染员工留言内容 -->
+      <div class="consult-item-textarea">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/neirong.png" alt="" />
+        </span>
+        <textarea
+          name=""
+          id=""
+          cols="30"
+          rows="5"
+          readonly
+          :value="item.content"
+        ></textarea>
+      </div>
+      <!-- 渲染领导回复 -->
+      <div class="consult-item-textarea" v-if="status1=item.reply_status">
+        <span>
+          <img src="../../../assets/images/leader-mailbox/huifu.png" alt="" />
+        </span>
+        <!-- 渲染领导回复时间 -->
+        <div>
+          <input
+            type="text"
+            placeholder="暂无回复"
+            readonly
+            :value="item.reply_time"
+          />
+        <!-- 渲染领导回复内容 -->  
+          <p>{{ item.reply }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: [], //获取到员工姓名和留言组成对象，放入数组中
+      token: sessionStorage.getItem("mytoken")
+        ? sessionStorage.getItem("mytoken")
+        : "", //token值保存在本地，有的话取值，没有为空
+      show: true, //tabber是否显示
+      gettoken: "", //从url获取到token值
+      correlate: false,//弹出层
+      textareas: "",//弹出层中的多行文本域
+      indexlist: "",//获取当前循环体中的下标
+      indexid: "",//获取当前循环体中的id
+      showH1:false
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#3399ff";//背景色
+    // this.gettoken =getAllUrlParams(window.location.href).token;
+    // this.token = `Bearer ${this.gettoken}`;
+    this.token=this.$route.query.token;//获取token值
+    sessionStorage.setItem("mytoken", this.token);//存入token值
+    this.getleaderBox();//挂载接口信息
+  },
+  methods: {
+    getleaderBox() {
+      this.$http.post("/api/workbench/leader_mailbox/list", {}).then((res) => {
+        if(res.data.data.data.length==""){
+          this.showH1=true
+        }else{
+          this.showH1=false
+        }
+        this.value = res.data.data.data;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.headers{
+  text-align: center;
+  width: 90%;
+  height: 150px;
+  line-height: 150px;
+  border-radius: 10px;
+  margin: 15% auto;
+  background: #fff;
+}
+.consult {
+  width: 90%;
+  margin: 4% auto;
+  background: #fff;
+  border-radius: 10px;
+}
+.consult-item {
+  display: flex;
+  justify-content: space-between;
+  line-height: 34px;
+}
+.consult-item > span {
+  display: block;
+  width: 25px;
+  margin-left: 5%;
+}
+.consult-item img {
+  width: 100%;
+  padding-top: 23%;
+}
+.consult-item > input {
+  border: none;
+}
+.consult-item > div {
+  margin-right: 5%;
+}
+.consult-item-time {
+  line-height: 36px;
+  display: flex;
+}
+.consult-item-time > span {
+  display: flex;
+  width: 25px;
+  margin-left: 5%;
+}
+.consult-item-time img {
+  width: 25px;
+  height: 25px;
+  padding-top: 23%;
+}
+.consult-item-time > input {
+  border: none;
+  margin-left: 6%;
+}
+.consult-item-textarea {
+  display: flex;
+}
+.consult-item-textarea > span {
+  display: block;
+  width: 25px;
+  margin-left: 5%;
+}
+.consult-item-textarea > textarea {
+  border: none;
+  margin-left: 6%;
+  margin-top: 2%;
+}
+.consult-item-textarea img {
+  width: 100%;
+  padding-top: 23%;
+}
+.consult-item-textarea {
+  display: flex;
+}
+.consult-item-textarea > div > input {
+  margin-top: 6%;
+  margin-left: 8%;
+  border: none;
+}
+.consult-item-textarea > div p {
+  margin-top: 3%;
+  margin-left: 8%;
+  margin-bottom: 3%
+}
+.van-cell {
+  border-radius: 10px;
+}
+.van-cell-group {
+  border-radius: 10px;
+}
+.input-button {
+  width: 85%;
+  background: #39f;
+  height: 30px;
+  text-align: center;
+  margin: auto;
+  margin-bottom: 10px;
+  line-height: 30px;
+  border-radius: 10px;
+  margin-top: 5%;
+}
+.input-button > input {
+  background: #39f;
+  border: none;
+  color: #fff;
+}
+.active {
+  visibility: hidden;
+}
+>>> .van-dialog__content {
+  text-align: center;
+}
+</style>

src/views/xixuanzhongxin/leader-mailbox/leader-mailbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div v-if="show">
+    <div v-show="show">
       <van-nav-bar title="领导信箱" left-arrow @click-left="onClickLeft" />
     </div>
     <!-- 输入姓名，留言点击上传数据库 -->
@@ -59,7 +59,8 @@ export default {
       token: sessionStorage.getItem("mytoken")
         ? sessionStorage.getItem("mytoken")
         : "", //token值保存在本地，有的话取值，没有为空
-      show: true, //tabber是否显示
+      show: false, //tabber是否显示
+      myshow:false,
       gettoken: "", //从url获取到token值
       name: "", //员工姓名赋值
       leader: true, //是否为领导
@@ -69,7 +70,7 @@ export default {
     //点击事件提交到领导信箱的数据库
     submit(num) {
       if (this.username == "" || this.content == "") {
-        this.$toast("请填写内容");
+        this.$toast("请填写留言内容");
       } else {
         this.$http
           .post("/api/workbench/leader_mailbox/add", {
@@ -78,13 +79,9 @@ export default {
             content: this.content,
             name: this.username,
           })
-          .then((res) => {
-
-          });
+          .then((res) => {});
         //获得提示表明已提交意见
-        this.$router.push(
-          `/xixuanzhongxin/leader-mailbox/leader-success`
-        );
+        this.$router.push(`/xixuanzhongxin/leader-mailbox/leader-success`);
       }
     },
     //获取checked的属性值
@@ -133,8 +130,7 @@ export default {
           //获取是否为领导
           this.leader = res.data.data;
           if (this.leader == true) {
-            window.location.href =
-              "#/xixuanzhongxin/leader-mailbox/leader-mailbox-list";
+            this.$router.push(`/xixuanzhongxin/leader-mailbox/leader-mailbox-list2?token=${this.token}`)
           }
         });
     },
@@ -142,14 +138,17 @@ export default {
   //这里挂载的是获取token
   mounted() {
     document.body.style.backgroundColor = "#3399ff";
-    this.gettoken =getAllUrlParams(window.location.href).token;
-    this.token = `Bearer ${this.gettoken}`;
-    sessionStorage.setItem("mytoken", this.token);
-    this.show = Boolean(getAllUrlParams(window.location.href).tabber);
+    this.token=this.$route.query.token;
+    this.show=this.myshow
+    // this.gettoken =getAllUrlParams(window.location.href).token;
+    // this.token = `Bearer ${this.gettoken}`;
+    // sessionStorage.setItem("mytoken", this.token);
+    // this.show = Boolean(getAllUrlParams(window.location.href).tabber);
     this.getxinxi();
   },
   created() {
-    this.Jumpleader();
+    // this.Jumpleader();
+    this.myshow =Boolean(getAllUrlParams(window.location.href).tabber);
   },
 };
 </script>
@@ -184,7 +183,7 @@ export default {
 .span-name {
   font-size: 14px;
   color: #97a3b4;
-  margin-left: 3%;
+  margin-left: 10px;
 }
 .input-border {
   border: none;