yos_web/src/views/message/index.vue

<template >
  <div class="message">
    <el-row>
      <el-col :span="12">
        <div class="left">
          <div class="select">
            <div>
              <el-button-group>
                <el-button
                  size="small"
                  :type="currentItem == 1 ? 'primary' : ''"
                  @click="selectFun('应用')"
                  >{{ $t("应用消息") }}</el-button
                >
                <el-button
                  size="small"
                  :type="currentItem == 0 ? 'primary' : ''"
                  @click="selectFun('系统')"
                  >{{ $t("系统消息") }}</el-button
                >
              </el-button-group>
              <!--              <div @click="selectFun('应用')"
                   :style="currentItem==1 ? 'background:#3874F6;color:#ffffff;vertical-align: middle;line-height: 30px;height: 30px' : 'border:1px solid #cccccc;vertical-align: middle;line-height: 30px;height: 30px'">应用消息</div>
              <div @click="selectFun('系统')"
                   :style="currentItem==0 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">系统消息</div>-->
            </div>
            <div class="select_right">
              <el-button @click="allRead" size="small">{{
                $t("全部标为已读")
              }}</el-button>
            </div>
          </div>
          <el-row style="margin-top: 10px">
            <el-col :span="14">
              <div style="margin-left: 16px; font-size: 14px">
                {{ $t("总计") }}：{{ total }}
              </div>
            </el-col>
            <el-col :span="10">
              <div style="float: right; margin-right: 16px">
                <el-switch
                  style="z-index: 9999"
                  v-model="isRead"
                  :active-text="$t('只看未读')"
                  active-value="1"
                  inactive-value="0"
                  @change="readChange"
                >
                </el-switch>
              </div>
            </el-col>
          </el-row>

          <list
            class="list"
            :list="list"
            @messageItemClick="messageItemClick"
            ref="list"
          ></list>

          <pagination
            :total="total"
            :pageSize="param.content.pageSize"
            :currentPage="param.content.pageNumber"
            @pageChange="pageChange"
          >
          </pagination>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right" v-if="message">
          <p class="title">{{ message.title }}</p>
          <p class="info">
            <span
              >{{ $t("发布于") }}:{{ message.createdate }} |
              {{ message.name || message.type }}</span
            >
          </p>
          <div class="content-txt">
            <!--            <p class="txt">{{message.message}}</p>-->
            <p class="txt">
              <span v-for="(item, index) in message.message">
                <span v-if="index === message.message.length - 1">{{
                  $t(item)
                }}</span>
                <span v-else>{{ item + ";" }}<br /></span>
              </span>
            </p>
            <p
              class="link"
              @click="goDetail"
              v-if="currentItem == 1 && message.link"
            >
              {{ $t("请前往") }} {{ message.title }}>>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import list from "@/views/message/components/list";

import pagination from "@/components/pagination/Pagination1";
export default {
  name: "",
  data() {
    return {
      currentItem: 1,
      isRead: "0",
      param: {
        classname: "system.message.Message",
        method: "queryMessage",
        content: {
          nocache: true,
          pageNumber: 1,
          pageSize: 15,
          isread: "",
          type: "",
          where: {
            isread: "",
          },
        },
      },
      list: [],
      total: 0,
      message: "",
      isAllClick: true,
    };
  },
  components: { list, pagination },
  computed: {},
  watch: {},
  created() {
    this.getMessageList();
  },
  methods: {
    async getMessageList() {
      this.param.content.type = this.currentItem == 0 ? "系统" : "应用";
      let res = await this.$api.requested(this.param);
      if (res.code == 1) {
        res.data.forEach((item) => {
          this.isCategory(item);
        });
        this.list = res.data;

        this.list.forEach((item) => {
          item.message = item.message.split("；");
        });
        this.message = "";
        if (this.list[0]) this.messageItemClick(this.list[0]);
        this.total = res.total;
      }
    },
    selectFun(data) {
      this.message = "";
      this.param.content.pageNumber = 1;
      this.currentItem = data == "系统" ? 0 : 1;
      this.getMessageList();
    },
    pageChange(n) {
      this.$refs.list.$refs.listScroll.scrollTop = 0;
      this.param.content.pageNumber = n;
      this.getMessageList();
    },
    async messageItemClick(data) {
      let res = await this.$api.requested({
        classname: "system.message.Message",
        method: "readMessage",
        content: {
          nocache: true,
          messageid: data.messageid,
        },
      });
      data.isread = 1;
      res.data.name = data.name;
      res.data.link = data.link;
      res.data.modules = data.modules;
      this.message = res.data;
      this.message.message = this.message.message.split("；");
    },
    async allRead() {
      if (!this.isAllClick) return;
      let res = await this.$api.requested({
        classname: "system.message.Message",
        method: "readAllMessage",
        content: {
          nocache: true,
        },
      });
      this.tool.showMessage(res, () => {
        this.list.forEach((item) => {
          item.isread = 1;
        });
        this.isAllClick = false;
        setTimeout(() => {
          this.isAllClick = true;
        }, 5000);
      });
    },
    //跳转到消息具体页面
    goDetail() {
      sessionStorage.setItem(
        "active_modules",
        JSON.stringify(this.message.modules)
      );
      console.log(this.message.link, "link");
      console.log(this.message, "message");
      /* this.$router.push(this.message.link.listPath)*/
      if (this.message.objectname === "sat_orderclueuploadbill") {
        setTimeout(() => {
          this.$store.dispatch("changeDetailDrawer", false);
          let route = this.$route;

          this.oldRoute = { path: route.path, query: route.query };
          this.$store.dispatch("setHistoryRouter", this.oldRoute);

          this.$router.push({
            path: "/clue_public",
            query: {
              id: this.message.objectid,
              portrait: "",
            },
          });
        });
      } else {
        if (this.message.link.detail) {
          setTimeout(() => {
            this.$store.dispatch("changeDetailDrawer", true);
            let route = this.$route;
            if (route.path !== this.message.link.detail.slice(0)) {
              this.oldRoute = { path: route.path, query: route.query };
              this.$store.dispatch("setHistoryRouter", this.oldRoute);
            }
            this.$router.push({
              path: this.message.link.detail,
              query: {
                id: this.message.objectid,
                portrait: "",
              },
            });
          });
        } else {
          switch (this.message.link.listPath) {
            case "/workreport":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/notice_list":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/notice_mag_list":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/submitedit_one":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/submitedit_more":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/submit_mag":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/archives_list":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/archvies_mag":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/archives_admag":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/archives_adlist":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/archives_adclass":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/archives_sc_list":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
            case "/archives_scmag":
              this.$router.push({
                path: this.message.link.listPath,
              });
              break;
          }
        }
      }
    },
    readChange() {
      this.isRead == "1"
        ? (this.param.content.isread = 0)
        : (this.param.content.isread = "");
      this.getMessageList();
    },

    isCategory(data) {
      JSON.parse(sessionStorage.getItem("module_info")).forEach((item1) => {
        item1.modules.forEach((item2) => {
          item2.apps.forEach((item3) => {
            if (item3.systemappid == data.systemappid) {
              data.modules = item3;
              data.link = { listPath: item3.path, detail: item3.path_index };
              return;
            }
          });
        });
      });

      //       switch (data.objectname) {
      //         case 'sat_courseware':
      //             data.name = '商学院'
      //             JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
      //               item1.modules.forEach(item2 => {
      //                 if(item2.systemmodulename == data.name) {
      //                   data.modules = item2
      //                   data.link = item2.apps[0].path
      //                   return
      //                 }
      //               })
      //             })
      //             break;
      //         case 'sat_sharematerial':
      //             data.name = '推广素材'
      //             JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
      //               item1.modules.forEach(item2 => {
      //                 if(item2.systemmodulename == data.name) {
      //                   data.modules = item2
      //                   data.link = item2.apps[0].path
      //                   return
      //                 }
      //               })
      //             })
      //             break;
      //         case 'sat_notice':
      //             data.name = '通告'
      //             JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
      //               item1.modules.forEach(item2 => {
      //                 if(item2.systemmodulename == data.name) {
      //                   data.modules = item2
      //                   data.link = item2.apps[0].path
      //                   return
      //                 }
      //               })
      //             })
      //             break;
      //         case 'sat_submitedit':
      //             data.name = '提报'
      //             JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
      //               item1.modules.forEach(item2 => {
      //                 if(item2.systemmodulename == data.name) {
      //                   data.modules = item2
      //                   data.link = item2.apps[0].path
      //                   return
      //                 }
      //               })
      //             })
      //             break;
      //         case 'sat_orderclue':
      //             data.name = '销售线索'
      //             JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
      //               item1.modules.forEach(item2 => {
      //                 if(item2.systemmodulename == data.name) {
      //                   data.modules = item2
      //                   data.link = item2.apps[0].path
      //                   return
      //                 }
      //               })
      //             })
      //             break;
      //         case 'sys_attachment':
      //             data.name = '营销物料'
      //             JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
      //               item1.modules.forEach(item2 => {
      //                 if(item2.systemmodulename == data.name) {
      //                   data.modules = item2
      //                   data.link = item2.apps[0].path
      //                   return
      //                 }
      //               })
      //             })
      //             break;
      //       }
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.message {
  width: 100%;
  margin: 0 auto;
  position: relative;
  /*min-height: calc(100vh - 199px);
  max-height: calc(100vh - 199px);*/
  height: calc(100vh - 120px);
}
.message .left {
  position: relative;
  padding: 20px 0 60px 0;
  box-shadow: 1px 0px 0px 1px #dddddd;
  background: #ffffff;
  height: calc(100vh - 120px);
  /*min-height: calc(100vh - 199px);
  max-height: calc(100vh - 199px);*/
}
.message .list {
  max-height: calc(100vh - 260px);
  min-height: calc(100vh - 260px);
  overflow: auto;
}
.message .select {
  width: 100%;
  height: 36px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}
.message .select .select_left {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-left: 16px;
}
.message .select .select_left div {
  height: 34px;
  text-align: center;
  cursor: pointer;
  padding: 8px 22px;
  transition: background 0.2s ease-in-out;
}
.message .select .select_left div:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.message .select .select_left div:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.message .right {
  padding: 20px 16px;
}
.message .right .title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.message .right .info {
  font-size: 12px;
  font-weight: 400;
  color: #333333;
  margin: 16px 0;
}
.message .right .content-txt {
  width: 100%;
  padding: 20px 16px;
  font-size: 14px;
  font-weight: 400;
  background: #ffffff;
}
.message .right .content-txt .txt {
  color: #666666;
}
.message .right .content-txt .link {
  margin-top: 16px;
  color: #3874f6;
  font-size: 14px;
  cursor: pointer;
}
/* .message .right .content-txt p:last-child {
  color: #3874F6;
} */
/deep/.el-pagination {
  position: absolute;
  right: 16px;
  bottom: 0;
}
/deep/.el-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>