saas_entrepot_admin/src/views/education/notificationManageMent/stationLetter/index.vue

<template>
  <div id="stationLetter">
    <div style="margin-bottom: 10px">
      <p>
        共{{ total }}封，其中<span style="color: red">{{ dontRead }}</span>
        个消息未读
      </p>
      <div>
        <el-button size="mini" type="primary" plain @click="haveRead"
          >标记为已读</el-button
        ><el-button v-if="false" size="mini" type="primary" plain @click="notHaveRead"
          >标记为未读</el-button
        ><span style="font-size: 14px; margin-left: 10px">状态：</span
        ><el-select
          size="mini"
          v-model="formData.receiptStatus"
          placeholder="请选择状态"
          @change="changeStatus"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      row-key="id"
      ref="tableData"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        reserve-selection
        :selectable="canSelect"
      >
      </el-table-column>

      <template v-for="(item, index) in tableSet">
        <el-table-column
          :width="item.width"
          :key="index"
          :label="item.label"
          align="center"
          :sortable="item.prop === 'sort'"
          :show-overflow-tooltip="true"
          header-align="center"
          :prop="item.prop"
          sort-by="sort"
        >
          <template slot-scope="scope">
            <i
              v-if="item.scope === 'icon'"
              :style="
                scope.row[item.prop] === 0
                  ? 'color:#409EFF;'
                  : scope.row[item.prop] === 1
                  ? 'color:#eee;'
                  : ''
              "
              style="font-size: 18px"
              class="el-icon-s-comment"
            ></i>
            <span v-else-if="item.scope === 'theme'">
              <strong style="margin-left: 10px">{{
                scope.row[item.prop1]
              }}</strong
              ><span>{{ scope.row[item.prop2] }}</span>
            </span>
            <span v-else-if="item.scope === 'aTimeList'">{{
              $methodsTools.onlyForma(scope.row[item.prop])
            }}</span>
            <span v-else>{{ scope.row[item.prop] }}</span></template
          ></el-table-column
        ></template
      ><el-table-column label="操作" align="center" fixed="right" width="180px">
        <template slot-scope="scope">
          <el-button size="mini" @click="newSee(scope.row)" type="text"
            >立即查看</el-button
          ><el-button
            size="mini"
            :disabled="scope.row.receiptStatus === 1"
            @click="haveReadID(scope.row.id)"
            type="text"
            >标记为已读</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog
      :visible.sync="dialogCG"
      width="760px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">查看消息</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogCG = false"
          />
        </div>
      </div>
      <h3 style="color: #333; font-weight: bold">{{ newData.remind }}</h3>
      <p>{{ newData.text }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCG = false">关闭</el-button>
        <el-button type="primary" @click="submitChecks">查看学员</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
export default {
  name: "StationLetter",
  components: { pagination },
  data() {
    return {
      newData: {}, //当前数据
      options: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "已读",
          value: 1,
        },
        {
          label: "未读",
          value: 0,
        },
      ],
      total: 0,
      dontRead: 0, //未读
      formData: {
        pageSize: 10,
        pageNum: 1,
        receiptStatus: "",
        systemStatus: 1,
      },
      tableSet: [
        {
          label: "状态",
          prop: "receiptStatus",
          scope: "icon",
          width: "80px",
        },
        {
          label: "主题",
          prop1: "remind",
          prop2: "text",
          scope: "theme",
        },
        {
          label: "发送时间",
          prop: "sendTime",
          scope: "aTimeList",
          width: "220px",
        },
      ],
      tableData: [],
      loading: false,
      dialogCG: false,
    };
  },
  mounted() {
    this.search();
    if (this.$route.params.id) {
      this.$api.informsys_user(this.$route.params.id).then((res) => {
        if (res.data) {
          this.newSee(res.data);
        }
      });
    }
  },
  methods: {
    /**
     * 查看消息
     */
    newSee(data) {
      this.newData = JSON.parse(JSON.stringify(data));
      this.dialogCG = true;
      if (data.receiptStatus !== 1) {
        this.haveReadID(data.id, false);
      }
    },
    /**
     * 单个标记已读
     */
    haveReadID(id, status = true) {
      this.$api
        .editupdateReadStatusBatch({ ids: [id], receiptStatus: 1 })
        .then((res) => {
          if (status) {
            this.$message.success("已读成功");
            this.$refs.tableData.clearSelection();
          }
          this.search();
        });
    },
    /**
     * 切换消息状态
     */
    changeStatus(val) {
      this.formData.pageSize = 10;
      this.formData.pageNum = 1;
      this.search();
    },
    search() {
      this.loading = true;
      this.$api
        .inquireinformsys_userlist(this.formData)
        .then((res) => {
          this.total = res.total;
          this.tableData = res.rows;
        })
        .finally(() => {
          this.loading = false;
        });
      this.$api
        .inquireinformsys_userinformUnReadSum({ systemStatus: 1 })
        .then((res) => {
          this.dontRead = res.data;
        });
    },
    /**
     * 查看学员
     */
    submitChecks() {
      this.dialogCG = false;
      const jump = () => {
        //学员详情
        this.$router.push({
          name: "StudentXQ",
          query: {
            id: this.newData.studentUserId,
          },
        });
      };
      const statusPage = this.$store.state.tagsView.visitedViews.some(
        (item) => {
          return item.name == "StudentXQ";
        }
      );
      if (statusPage) {
        this.$store
          .dispatch("tagsView/delCachedView", {
            name: "StudentXQ",
          })
          .then((res) => {
            jump();
          });
      } else {
        jump();
      }
    },
    /**
     * 已读
     */
    haveRead() {
      const idList = this.$refs.tableData.selection.map((item) => {
        return item.id;
      });
      if (idList.length == 0) {
        this.$message.warning("请选择需要标记已读的数据");
        return;
      }
      this.$api
        .editupdateReadStatusBatch({ ids: idList, receiptStatus: 1 })
        .then((res) => {
          this.$message.success("已读成功");
          this.$refs.tableData.clearSelection();
          this.search();
        });
      console.log(idList);
    },
    notHaveRead() {
      const idList = this.$refs.tableData.selection.map((item) => {
        return item.id;
      });
      if (idList.length == 0) {
        this.$message.warning("请选择需要标记已读的数据");
        return;
      }
      this.$api
        .editupdateReadStatusBatch({ ids: idList, receiptStatus: 0 })
        .then((res) => {
          this.$message.success("未读成功");
          this.$refs.tableData.clearSelection();
          this.search();
        });
      console.log(idList);
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
    canSelect(row, index) {
      if (row.receiptStatus === 0) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__body {
    max-height: 500px;
    overflow: auto;
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>