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="">
        <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'">
        <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)"
                >复核</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>
      <!-- 内层弹窗 -->
      <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 type="primary" @click="confirmCheck(detailData.noticeId)"
            >确认接收</el-button
          >
          <el-button @click="inDialog = false">关 闭</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeFn">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNoticeList,
  getComListList,
  getComListDownload,
  getNoticeDetail,
  confirmCheck,
  getRebateOrderList,
} from "@/api/dashboard";
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: [],
    };
  },
  methods: {
    //复核
    secondFn(id) {
      this.$router.push({
        path: "/finance/rebate_list",
        query: {
          id,
        },
      });
    },
    // 确认查收
    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>