alhj-admin/src/views/sucuirtyaudit/annexList.vue

<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
      <div class="grid-content bg-purple">
        <div class="grid-content bg-purple" style="margin-left: 30px">
          <el-input
            placeholder="请输入合同名称"
            v-model="formData.content"
            @change="Search"
            style="width: 80%"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <div class="grid-content bg-purple">
        <el-input
          placeholder="请输入供应商名称"
          v-model="formData.operateUser"
          @change="SearchOperateUser"
          style="width: 100%"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>

      <div class="grid-content bg-purple">
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="startEndTime"
          >
          </el-date-picker>
        </div>
      </div>

      <div
        class="grid-content bg-purple"
        style="display: flex; justify-content: flex-end"
      >
        <el-button type="primary" @click="toindex">操作日志</el-button>
        <el-button type="primary" disabled>附件列表</el-button>
        <el-button type="primary" @click="batchExports">导出</el-button>
        <el-button type="primary" @click="downloadAppendix">下载</el-button>
      </div>
    </el-row>
    <el-table
      :row-key="getRowKey"
      v-loading="listLoading"
      :data="temporaryList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @select="handleSelectionChange"
      @select-all="handleAll"
    >
      <el-table-column
        align="center"
        label=""
        width="55"
        type="selection"
        :reserve-selection="true"
      >
      </el-table-column>
      <el-table-column align="center" label="合同名称" width="210" prop="name">
      </el-table-column>

      <el-table-column
        label="供应商名称"
        align="center"
        width="120"
        prop="supplierName"
      >
      </el-table-column>
      <el-table-column label="日期" width="120" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createdAt }}</span>
        </template>
      </el-table-column>
      <!-- 合同附件 -->
      <el-table-column
        align="center"
        label="合同附件"
        width="300"
        prop="picUrls"
      >
        <template slot-scope="scope">
          <!-- <img
            width="100"
            height="100"
            v-for="item in scope.row.picUrls"
            :key="item.id"
            :src="item"
          /> -->
          <FileShow :files="scope.row.picUrls" />
        </template>
      </el-table-column>
      <!-- 发票附件 -->
      <el-table-column
        align="center"
        label="发票附件"
        width="300"
        prop="invoicePics"
      >
        <template slot-scope="scope">
          <!-- <img
            width="100"
            height="100"
            v-for="item in scope.row.invoicePics"
            :key="item.id"
            :src="item"
          /> -->
          <FileShow :files="scope.row.invoicePics" />
        </template>
      </el-table-column>
      <!-- 贸易合同 -->
      <el-table-column
        align="center"
        label="贸易合同"
        width="400"
        prop="tradePics"
      >
        <template slot-scope="scope">
          <!-- <img
            width="100"
            height="100"
            v-for="item in scope.row.tradePics"
            :key="item.id"
            :src="item"
          /> -->
          <FileShow :files="scope.row.tradePics" />
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <el-tag
            type="primary"
            style="cursor: pointer; margin-right: 15px"
            @click="todetail(scope.row.id)"
            >汇票附件</el-tag
          >
          <el-tag
            type="primary"
            style="cursor: pointer; margin-right: 15px"
            @click="download(scope.row.id)"
          >
            下载</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagesip">
      <el-button
        type="primary"
        size="small"
        style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpFirstPage"
        >首页
      </el-button>
      <el-pagination
        ref="pagination"
        background
        layout="total,prev, pager, next"
        :total="total"
        :page-size="pagesize"
        :current-page="currentPage"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
      />
      <el-button
        type="primary"
        size="small"
        style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpLastPage"
        >尾页
      </el-button>
    </div>
  </div>
</template>

<script>
import { getAuditLogAttachmentsSearch } from "@/api/auditlog";
import { dataConversionUtil } from "../../utils/Excel.js";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      // 表单数据
      formData: {
        startTime: "",
        endTime: "",
        name: "",
        operateUser: "", //操作人员
        content: "", //查询内容
      },
      /* 当前页数 */
      currentPage: 1,
      /* 每页显示个数 */
      pagesize: 10,
      /* 总条数 */
      total: 20,
      temporaryList: [],
      srcList: [],
      list: [],
      listLoading: false,
      status: "",
      hpstatus: "",
      input4: "",
      checked: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      multipleSelection: [], //导出数据
      idsArray: [], //存放所有合同的id名
    };
  },
  mounted() {
    this.getAllList();
  },
  methods: {
    /* 获取列表数据 */
    getAllList(searchForm = {}) {
      const params = {
        pageIndex: this.currentPage,
        pageSize: this.pagesize,
      };
      getAuditLogAttachmentsSearch({
        ...params,
        ...searchForm,
      }).then((res) => {
        const { data } = res;
        this.temporaryList = data.result;
        this.srcList = data.result;
        this.total = res.data.total;
        this.idsArray = this.temporaryList.map((item) => {
          return item.id;
        });
      });
    },

    /* 请输入查询内容 */
    Search() {
      this.currentPage = 1;
      this.searchForm = {
        ...this.formData,
      };
      this.getAllList(this.searchForm);
    },
    /* 操作人员查询*/
    SearchOperateUser() {
      console.log("我是操作人员");
      this.currentPage = 1;
      this.searchForm = {
        ...this.formData,
      };
      this.getAllList(this.searchForm);
    },

    // 日期审核状态查询
    startEndTime(item) {
      if (item == null) {
        item = [];
        this.formData.startTime = "";
        this.formData.endTime = "";
        this.currentPage = 1;
        this.searchForm = {
          ...this.formData,
        };
        this.getAllList(this.searchForm);
      } else {
        this.formData.startTime = this.value2[0];
        this.formData.endTime = this.value2[1];
        this.currentPage = 1;
        this.searchForm = {
          ...this.formData,
        };
        this.getAllList(this.searchForm);
      }
    },

    /* 分页功能，改变当前页 */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllList(this.searchForm);
    },

    /* 分页功能去首页 */
    jumpFirstPage() {
      this.$refs.pagination.handleCurrentChange(1);
      this.$emit("handleCurrentChange", 1);
    },
    /* 分页功能：去尾页 */
    jumpLastPage() {
      let font = this.$refs.pagination;
      let cpage = Math.ceil(font.total / font.pageSize);
      font.handleCurrentChange(cpage);
    },

    /* 跳转到详情页 */
    todetail(id) {
      this.$router.push({
        path: "/attachmentdetail",
        query: {
          id: id,
        },
      });
    },
    toindex() {
      this.$router.push({
        path: "/sucuirtyaudit/index",
      });
    },

    // 下载合同附件zip
    download(id) {
      let that = this;
      this.$request({
        url: "/api/AuditLog/attachments/download",
        method: "post",
        data: {
          contractIds: [id],
        },
        responseType: "blob",
      }).then((res) => {
        let filename = this.getFileName(res.headers["content-disposition"]);
        let fileData = res.data;
        let blob = new Blob([fileData], { type: "application/zip" });
        let url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = filename;
        link.click();
        // 释放内存
        URL.revokeObjectURL(url);
      });
    },
    // 设置zip名
    getFileName(contentDisposition) {
      var filename = "";
      var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
      var matches = filenameRegex.exec(contentDisposition);
      if (matches != null && matches[1]) {
        filename = matches[1].replace(/['"]/g, "");
      }
      return decodeURI(filename);
    },

    /* 批量下载附件 */
    downloadAppendix() {
      let ids = this.multipleSelection.map((item) => {
        return item.id;
      });

      if (ids == "") {
        let that = this;
        this.$request({
          url: "/api/AuditLog/attachments/download",
          method: "post",
          data: {
            contractIds: this.idsArray,
          },
          responseType: "blob",
        }).then((res) => {
          let filename = this.getFileName(res.headers["content-disposition"]);
          let fileData = res.data;
          let blob = new Blob([fileData], { type: "application/zip" });
          let url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.download = filename;
          link.click();
          // 释放内存
          URL.revokeObjectURL(url);
        });
      } else {
        let that = this;
        this.$request({
          url: "/api/AuditLog/attachments/download",
          method: "post",
          data: {
            contractIds: ids,
          },
          responseType: "blob",
        }).then((res) => {
          let filename = this.getFileName(res.headers["content-disposition"]);
          let fileData = res.data;
          let blob = new Blob([fileData], { type: "application/zip" });
          let url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.download = filename;
          link.click();
          // 释放内存
          URL.revokeObjectURL(url);
        });
      }
    },

    getRowKey(row) {
      return row.id;
    },

    /* 批量导出 */
    handleSelectionChange(data) {
      this.multipleSelection = data;
    },
    handleAll(data) {
      this.multipleSelection = data;
    },
    /* 批量导出数据 */
    batchExports() {
      if (this.multipleSelection == "") {
        this.Exports();
      } else {
        var tableHeader = [
          [
            "序号",
            "合同名称",
            "供应商名称",
            "日期",
            "合同附件",
            "发票附件",
            "贸易合同",
          ],
        ];
        var dataList = [];
        this.multipleSelection.forEach((item, index) => {
          dataList.push([
            index + 1,
            item.name,
            item.supplierName,
            item.createdAt,
            item.picUrls,
            item.invoicePics,
            item.tradePics,
          ]);
        });
        dataConversionUtil.dataToExcel("附件列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }
    },
    /* 全部导出承兑人列表数据 */
    getContacts() {
      const data = {
        pageIndex: "",
        pageSize: -1,
        startTime: "",
        endTime: "",
        operateUser: "",
        content: "",
      };
      getAuditLogAttachmentsSearch({ ...data }).then((res) => {
        const { result } = res.data;
        this.multipleSelection = result;
      });
    },
    /* 全部导出 */
    Exports() {
      this.getContacts();
      setTimeout(() => {
        var tableHeader = [
          [
            "序号",
            "合同名称",
            "供应商名称",
            "日期",
            "合同附件",
            "发票附件",
            "贸易合同",
          ],
        ];
        var dataList = [];
        this.multipleSelection.forEach((item, index) => {
          dataList.push([
            index + 1,
            item.name,
            item.supplierName,
            item.createdAt,
            item.picUrls,
            item.invoicePics,
            item.tradePics,
          ]);
        });
        dataConversionUtil.dataToExcel("附件列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.pulldown {
  width: 185px;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #999999;
}

.pagesip {
  width: 100%;
  margin: 20px auto;
  display: flex;
  // align-items: center;
  justify-content: flex-end;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d8ab5a;
}

.el-col {
  margin-bottom: 20px;
}
</style>