supply-front/src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">
    <el-row :gutter="10" class="top-container">
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="today-content">欢迎登入供应链管理系统</div>
      </el-col>
    </el-row>

    <!-- 弹窗 -->
    <el-dialog title="消息" :visible.sync="showMessages" width="50%" :show-close="false" :close-on-click-modal="false">
      <el-radio-group v-model="type" @change="checkFn" size="mini">
        <el-radio-button label="1">系统通知</el-radio-button>
        <el-radio-button label="2">文件下发</el-radio-button>
        <el-radio-button label="3">返利确认单</el-radio-button>
      </el-radio-group>
      <br />
      <br />
      <!-- 系统通知 -->
      <div v-show="type == '1'" class="table">
        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="标题" prop="title" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="来源" prop="source" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="时间" prop="issueTime" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" class="textColor" @click="lookInDialog(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 文件下发 -->
      <div v-show="type == '2'">
        <el-table v-loading="listLoading" :data="fileList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="标题" prop="title" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="来源" prop="operatorNickName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="时间" prop="createTime" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" class="textColor" @click="downloadFn(scope.row.id)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 返利确认单 -->
      <div v-show="type == '3'">
        <el-table v-loading="listLoading" :data="rebateList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="经销商名称" prop="customerName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="确认人" prop="examineBy" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="确认时间" prop="examineTime" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" class="textColor" @click="secondFn(scope.row.rebateOrderId)">{{ isCustomer ? "确认" : "复核" }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <br />
      <br />
      <!-- 分页 -->
      <div class="fr">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
        </el-pagination>
      </div>
      <br /><br />
      <!-- 内层弹窗 -->
      <el-dialog width="40%" title="消息标题" :visible.sync="inDialog" append-to-body>
        <div class="detail-container">
          <div class="title">{{ detailData.title }}</div>
          <div class="text">
            发布人：{{ detailData.issueNickName
            }}<el-divider direction="vertical"></el-divider>发布时间：{{
              detailData.issueTime
            }}
          </div>
          <el-divider></el-divider>
          <div class="content">{{ detailData.content }}</div>
          <el-divider v-if="detailData.files && detailData.files.length > 0"></el-divider>
          <div class="file" v-if="detailData.files && detailData.files.length > 0">
            <div>附件：</div>
            <div class="file-list">
              <div v-for="(item, index) in detailData.files" :key="index" class="item">
                <el-image v-if="checkFileType(item.url) == 'image'" class="img" :src="imageURL + item.url" :preview-src-list="[imageURL + item.url]"></el-image>
                <div v-else class="box2" @click="openLink(item.url)">
                  <img src="@/assets/common/word.png" v-if="checkFileType(item.url) == 'word'" />
                  <img src="@/assets/common/excel.png" v-if="checkFileType(item.url) == 'excel'" />
                  <img src="@/assets/common/ppt.png" v-if="checkFileType(item.url) == 'ppt'" />
                  <img src="@/assets/common/pdf.png" v-if="checkFileType(item.url) == 'pdf'" />
                  <div class="name ellipsis-3">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="confirmCheck(detailData.noticeId)">确认接收</el-button>
          <el-button size="mini" @click="inDialog = false">关 闭</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="closeFn">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNoticeList,
  getComListList,
  getComListDownload,
  getNoticeDetail,
  confirmCheck,
  getRebateOrderList,
} from "@/api/dashboard";
import { getFileUrl } from "@/api/common";
import { mapGetters } from "vuex";
import { getInfo, getOrder, getGoodsRank } from "@/api/dashboard";
import { dateFormat } from "@/utils/util";

export default {
  name: "Dashboard",
  created() {
    this.getDataList({
      pageSize: this.pageSize,
      pageNum: this.currentPage,
      readFlag: false,
    });
  },
  computed: {
    ...mapGetters(["showMessages"]),
  },
  data() {
    return {
      imageURL: this.$imageUrl,
      type: "1",
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [],
      listLoading: false, // 列表加载loading
      fileList: [],
      inDialog: false,
      detailData: [],
      rebateList: [],
      isCustomer: JSON.parse(localStorage.getItem("supply_user")).isCustomer,
    };
  },

  methods: {
    // 打开链接
    openLink(url) {
      getFileUrl({ key: url }).then((res) => {
        window.open(res.data);
      });
    },
    //复核
    secondFn(id) {
      this.$router.push({
        path: "/finance/rebate/rebate_list",
        query: {
          id,
        },
      });

      this.$store.commit("user/showMessage", "no");
    },
    // 确认查收
    confirmCheck(id) {
      confirmCheck({ noticeIds: id }).then((res) => {
        this.$successMsg("查收成功");
        this.inDialog = false;
        this.getDataList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          readFlag: false,
        });
      });
    },
    // 检查文件类型
    checkFileType(url) {
      if (!url) return "";
      const fileSuffix = url.substring(url.lastIndexOf(".") + 1);

      if (["jpg", "jpeg", "png"].includes(fileSuffix)) {
        return "image";
      } else if (["doc", "docx", "dot", "wps", "wpt"].includes(fileSuffix)) {
        return "word";
      } else if (["xls", "xlsx", "xlt", "et", "ett"].includes(fileSuffix)) {
        return "excel";
      } else if (
        ["ppt", "pptx", "dps", "dpt", "pot", "pps"].includes(fileSuffix)
      ) {
        return "ppt";
      } else if (["pdf"].includes(fileSuffix)) {
        return "pdf";
      } else {
        return "";
      }
    },
    //查看
    async lookInDialog(id) {
      let res = await getNoticeDetail({ id });
      // console.log(res, 7898);
      this.detailData = res.data;
      this.inDialog = true;
    },
    //下载
    async downloadFn(id) {
      const res = await getComListDownload({ id });
      if (res.data) {
        window.open(this.imageURL + res.data);
      }
    },
    //获取文件列表数据
    async getFileList(data) {
      let res = await getComListList(data);
      this.fileList = res.data.records;
      this.listTotal = res.data.total;
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      if (this.type == 1) {
        this.getDataList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          readFlag: false,
        });
      }
      if (this.type == 2) {
        this.getFileList({
          needDown: true,
          pageSize: this.pageSize,
          pageNo: this.currentPage,
        });
      }
      if (this.type == 3) {
        this.getRebateList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          isSecondExamine: false,
        });
      }
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      if (this.type == 1) {
        this.getDataList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          readFlag: false,
        });
      }
      if (this.type == 2) {
        this.getFileList({
          needDown: true,
          pageSize: this.pageSize,
          pageNo: this.currentPage,
        });
      }
      if (this.type == 3) {
        this.getRebateList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          isSecondExamine: false,
        });
      }
    },
    //获取返利确认单数据
    async getRebateList(data) {
      const res = await getRebateOrderList(data);
      this.rebateList = res.data.records;
      this.listTotal = res.data.total;
    },
    //获取列表数据
    async getDataList(data) {
      const res = await getNoticeList(data);
      console.log(res);
      this.dataList = res.data.records;
      this.listTotal = res.data.total;
    },
    //选择
    checkFn(v) {
      this.type = v;
      if (v == 1) {
        this.getDataList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          readFlag: false,
        });
      }
      if (v == 2) {
        this.getFileList({
          needDown: true,
          pageSize: this.pageSize,
          pageNo: this.currentPage,
        });
      }
      if (v == 3) {
        this.getRebateList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          isSecondExamine: false,
        });
      }
    },
    //关闭
    closeFn() {
      this.$store.commit("user/showMessage", "no");
    },
  },
};
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    background: #f5f5f5;
    padding: 30px;
    min-height: calc(100vh - 86px);
    .top-container {
      .today-content {
        font-size: 14px;
      }
    }
  }
}
</style>