comparison-portal/src/views/base/auditing-pending.vue

<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#">基础信息管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/base/auditingPending">待办信息</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-table :data="tableData" style="min-height: 400px" stripe>
      <el-table-column prop="workflowDetailName" label="工作流程" width="180"></el-table-column>
      <el-table-column prop="cpbvCode" label="发票号" width="180"></el-table-column>
      <el-table-column prop="cvenName" label="供应商" width="380"></el-table-column>
      <el-table-column prop="stateName" label="审核状态" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleNext(row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="pageIndex"
      :total="totalElements"
      :page-sizes="pageSizeList"
      @current-change="changePage"
      @size-change="pageSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <auditing-next
      v-if="showNext"
      :businessKey="businessKey"
      :title="modalTitle"
      @close="onDetailModalClose"
    ></auditing-next>
    <auditing-billing
      v-if="showBilling"
      :businessKey="businessKey"
      :title="modalTitle"
      @close="onDetailModalCloseEx"
    ></auditing-billing>
  </div>
</template>
<script>
import Constant from "@/constant";
import AuditingDetail from "./auditing-detail";
import AuditingBilling from "./auditing-billing";
import AuditingNext from "./auditing-next";
import auditingApi from "@/api/base/auditing";
import workflowDetailApi from "@/api/base/workflowDetail";
import dataDictionaryApi from "@/api/sys/dataDictionary";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style

export default {
  data() {
    var self = this;

    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPages: 0,
      totalElements: 0,
      pageSizeList: [10, 20, 30],
      showNext: false,
      showBilling: false,
      modalTitle: "",
      businessKey: "",
      printId: "",
    };
  },
  methods: {
    changePage(pageIndex) {
      var self = this;

      self.pageIndex = pageIndex;
      var formData = new FormData();
      // formData.append("workflowDetailId", self.queryModel.workflowDetailId);

      auditingApi
      .listPending(formData)
      .then(function (response) {
        var jsonData = response.data.data;

        self.tableData = jsonData;
        self.totalPages = jsonData.totalPages;
        self.totalElements = jsonData.recordsTotal;
      })
      .catch((error) => {
        // self.$message.error(error + "");
      });
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;

      this.$nextTick(() => {
        this.changePage(this.pageIndex);
      });
    },
    handleNext(record) {
      this.modalTitle = "审核";
      this.businessKey = record.id;
      this.showNext = true;
      this.printId = record.id;
    },
    onDetailModalClose(refreshed) {
      //保存成功后回调
      this.showNext = false;

      if (refreshed == "1" || refreshed == "2") {
        this.changePage(this.pageIndex);
      }

      if (refreshed == "3") {
        this.changePage(this.pageIndex);

        this.modalTitle = "发票入账单";
        this.businessKey = this.printId;
        this.showBilling = true;
      }
    },
    onDetailModalCloseEx(refreshed) {
      //保存成功后回调
      this.showBilling = false;
    },
  },
  mounted: function () {
    this.changePage(1);
  },
  components: {
    "auditing-next": AuditingNext,
    "auditing-billing": AuditingBilling,
  },
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.demo-form-inline {
  margin-left: 10px;
  text-align: left;
}

.button-group {
  margin-left: 10px;
  text-align: left;
}
</style>