zhgdyun/src/views/infoCenter/notRead/componentsModule/dataListData.vue

<template>
  <div>
    <div class="fullHeight" v-if="!infoDetailShow">
      <div class="searchBtn">
        <div
          class="search-btn-item"
          :class="checkIndex == index ? 'item-active' : ''"
          v-for="(item, index) in searchBtnList"
          :key="index"
          @click="searchSelect(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="searchBox whiteBlock">
        <el-form
          :inline="true"
          ref="searchForm"
          :model="searchForm"
          size="medium"
          style="width: 100%;display: flex;align-items: center;"
        >
          <el-form-item label="标题内容" prop="title">
            <el-input
              placeholder="请输入"
              clearable
              v-model="searchForm.title"
            />
          </el-form-item>
          <el-form-item label="应用" prop="app">
              <!-- suffix-icon="el-icon-search" -->
            <el-input
              placeholder="请输入"
              clearable
              v-model="searchForm.app"
            />
          </el-form-item>
          <el-form-item label="标签" prop="tag">
            <el-input
              placeholder="请输入"
              clearable
              v-model="searchForm.tag"
            />
          </el-form-item>
          <!-- 时间 -->
          <el-form-item label="接收时间" style="margin-right: auto;">
            <el-date-picker
              size="medium"
              v-model="timeRange"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              :start-placeholder="'开始日期'"
              :end-placeholder="'结束日期'"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 条件查询按钮 -->
          <el-form-item style="margin-right: 0px;">
            <el-button type="primary" plain @click="searchList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="info-operate">
        <span>消息列表</span>
        <el-button type="primary" size="medium" @click="markReadFn">标为已读</el-button>
        <el-button type="danger" plain size="medium" @click="deleteInfoFn">删除</el-button>
      </div>
      <div class="table_wrap whiteBlock">
        <el-table class="tables" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" width="60" />
          <el-table-column label="标题内容" align="center" prop="title">
            <template slot-scope="scope">
              <span :style="{color: scope.row.isRead == 1?'#BFBFBF':'#5181F7'}" style="cursor: pointer;" @click="infoDetailOpen">{{
                scope.row.title
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类别" align="center" prop="type">
            <template slot-scope="scope">
              <span>{{ scope.row.type | typeText(searchBtnList) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="应用"
            align="center"
            prop="app"
          />
          <el-table-column label="标签" align="center" prop="tag" />
          <el-table-column label="操作时间" align="center" prop="operateTime" />
        </el-table>
        <el-pagination
          class="pagerBox"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pageInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pageInfo.total)"
          background
        ></el-pagination>
      </div>
    </div>
    <div class="info-content" v-else>
      <div class="back-operate" @click="infoDetailShow = false">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
      <div class="info-content-detail">
        <div class="detail-title">{{rowObj.title}}</div>
        <div class="detail-sub-title">
          <span>应用：{{rowObj.app}}</span>
          <span>标签：{{rowObj.tag}}</span>
          <span>接收时间：{{rowObj.operateTime}}</span>
        </div>
        <div class="detail-content">{{rowObj.content}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getInfoListApi, markInfoReadApi, batchDeleteInfoApi } from "@/assets/js/api/loginSign.js";
import { getNoticeListApi } from "@/assets/js/api/company/project";
export default {
  data() {
    return {
      infoDetailShow: false,
      checkIndex: 0,
      // searchBtnList: [
      //   { name: "全部类别", value: "" },
      //   { name: "通知公告", value: 1 },
      //   { name: "审批流程", value: 3 },
      //   { name: "风险预警", value: 2 },
      //   { name: "任务待办", value: 4 },
      //   { name: "其他", value: 5 },
      // ],
      searchBtnList: [
        { name: "全部类别", value: "" },
        { name: "质量", value: 11 },
        { name: "安全", value: 10 },
        { name: "AI", value: 8 }
      ],
      devSn: "",
      // 遮罩层
      loading: false,
      daterange: [],
      pageInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 1, //总条数
      },
      searchForm: {
        title: "",
        app: "",
        tag: "",
      },
      timeRange: [],
      tableData: [],
      multipleSelection: [],
      rowObj: {}
    };
  },
  filters: {
    typeText(val, list) {
      let findItem = list.find((item) => val === item.value);
      return findItem ? findItem.name : "";
    },
  },
  mounted() {},
  created() {
    this.getList();
  },
  methods: {
    // 删除
    deleteInfoFn(){
      let selectedIds = [];
      if(this.multipleSelection.length == 0){
        this.$message({
                type: "error",
                message: "请勾选表格项",
              });
              return;
      } else {
        this.multipleSelection.map(item => {
          selectedIds.push(item.id)
        })
      }
      this.$confirm("此操作将删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchDeleteInfoApi({ accountId: this.$store.state.userInfo.userId, ids: selectedIds.join(',') }).then((res) => {
            if (res.success) {
              this.getList()
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 标为已读
    markReadFn(){
      let selectedIds = [];
      if(this.multipleSelection.length == 0){
        this.$message({
                type: "error",
                message: "请勾选表格项",
              });
              return;
      } else {
        this.multipleSelection.map(item => {
          selectedIds.push(item.id)
        })
      }
      this.$confirm("此操作将标记已读, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          markInfoReadApi({ accountId: this.$store.state.userInfo.userId, ids: selectedIds.join(',') }).then((res) => {
            if (res.success) {
              this.getList()
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val,'测试测试')
    },
    infoDetailOpen(item) {
      this.rowObj = item;
      this.infoDetailShow = true;
    },
    searchSelect(obj, index) {
      this.checkIndex = index;
      this.pageInfo.pageNo = 1;
      this.getList();
    },
    //查询列表
    getList() {
      let requestData = {
        accountId: this.$store.state.userInfo.userId,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize,
        type: this.searchBtnList[this.checkIndex].value,
        isRead: 0,
        ...this.searchForm,
      };
      if (this.timeRange && this.timeRange.length > 0) {
        requestData.operateTime_begin = this.timeRange[0];
        requestData.operateTime_end = this.timeRange[1];
      }
      getNoticeListApi(requestData).then((res) => {
        if (res.success) {
          this.tableData = res.result.records;
          this.pageInfo.total = res.result.total;
        }
      });
    },
    //查询列表
    // getList() {
    //   let requestData = {
    //     accountId: this.$store.state.userInfo.userId,
    //     pageNo: this.pageInfo.pageNo,
    //     pageSize: this.pageInfo.pageSize,
    //     type: this.searchBtnList[this.checkIndex].value,
    //     isRead: 0,
    //     ...this.searchForm
    //   }
    //   if(this.timeRange && this.timeRange.length > 0){
    //     requestData.operateTime_begin = this.timeRange[0]
    //     requestData.operateTime_end = this.timeRange[1]
    //   }
    //   getInfoListApi(requestData).then((result) => {
    //     if (result.success) {
    //       this.tableData = result.result.records;
    //       this.pageInfo.total = result.result.total;
    //     }
    //   });
    // },
    SizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getList();
    },
    CurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.getList();
    },
    searchList() {
      this.pageInfo.pageNo = 1; //页数
      this.getList();
    },
    refresh() {
      this.searchForm = {
        title: "",
        app: "",
        tag: "",
      };
      this.pageInfo.pageNo = 1; //页数
      this.pageInfo.pageSize = 10; //条数
      this.getList();
    },
    //选择条数
    handleSizeChange(val) {
      this.pageSize2 = val;
      this.getPageList();
    },
    //选择分页
    handleCurrentChange(val) {
      this.pageNo2 = val;
      this.getPageList();
    }
  },
};
</script>
<style lang="less" scoped>
.tables {
  min-height: 0;
}
.searchBox {
  height: 50px;
  margin-bottom: 0px;
  margin-top: 10px;
}
.searchBtn {
  display: flex;
  align-items: center;
  margin-top: 15px;
  margin-left: 25px;
  .search-btn-item {
    width: 65px;
    padding: 5px 1px;
    text-align: center;
    border: 1px solid #638ef7;
    border-radius: 3px;
    font-size: 14px;
    color: #638ef7;
    cursor: pointer;
  }
  .item-active {
    background-color: #5181f6;
    color: white;
  }
  .search-btn-item:not(:last-child) {
    margin-right: 10px;
  }
}
.info-operate {
  display: flex;
  align-items: center;
  margin: 0px 25px 10px 25px;
  > span:nth-child(1) {
    margin-right: auto;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
}
.info-content {
  .back-operate {
    display: flex;
    align-items: center;
    color: #5282f6;
    height: 40px;
    border-bottom: 2px solid #c8c8c8;
    padding-bottom: 5px;
    cursor: pointer;
    .el-icon-arrow-left {
      color: #5282f6;
      margin-left: 15px;
    }
    > span {
      margin-left: 5px;
    }
  }
  .info-content-detail {
    margin-top: 80px;
    .detail-title {
      font-family: PingFang SC, PingFang SC;
      color: #000000;
      font-size: 18px;
      text-align: center;
    }
    .detail-sub-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC, PingFang SC;
      color: #000000;
      font-size: 16px;
      margin-top: 30px;
      margin-bottom: 30px;
      span:not(:last-child) {
        margin-right: 25px;
      }
    }
    .detail-content {
      font-family: PingFang SC, PingFang SC;
      color: #000000;
      font-size: 14px;
      margin: 0 25px 15px 25px;
    }
  }
}
.table_wrap{
  .pagerBox{
    margin-top: 30px;
  }
}
</style>