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

<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="1"
          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: 3% auto 7%;
  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: 7%;
}
.consult-item-textarea {
  display: flex;
}
.consult-item-textarea > span {
  display: block;
  width: 25px;
  margin-left: 5%;
}
.consult-item-textarea > textarea {
  border: none;
  margin-left: 7%;
  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>