ConsumSupplier-Platform/src/views/page/procurement-settlement/reconciliation/supplierDetail.vue

<template>
  <!-- 耗材退货管理————待确认 -->
  <div>
    <el-card>
      <div style="text-align: right">
        <el-button type="primary" @click.stop="prDataView()">打印</el-button>
        <el-button
          type="primary"
          v-if="isShow"
          @click="handleConfirm"
          :loading="sureLoading"
          >确 认</el-button
        >
      </div>
    </el-card>
    <div class="common-card">
      <h3>基本信息</h3>
      <el-form
        :model="listForm"
        ref="listform"
        label-width="180px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="对账单号" prop="stmtNo">
              <div class="content">
                {{ listForm.stmtNo }}
              </div>
            </el-form-item>
            <el-form-item label="客户名称" prop="branchName">
              <div class="content">
                {{ listForm.branchName }}
              </div>
            </el-form-item>
            <el-form-item label="对账类型" prop="isFas">
              <div class="content">
                {{ listForm.isFas }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="对账周期" prop="stmtPrd">
              <div class="content">
                {{ listForm.stmtPrd }}
              </div>
            </el-form-item>
            <el-form-item label="对账金额" prop="amt">
              <div class="content">
                {{ listForm.amt }}
              </div>
            </el-form-item>
            <el-form-item label="状态" prop="stas">
              <div class="content">
                {{ listForm.stas }}
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="common-card">
      <h3>明细信息</h3>
      <div class="right-btn">
        <el-button type="primary" @click.stop="exportExal()">导出</el-button>
      </div>
      <div>
        <el-table
          ref="table"
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          show-summary
          :summary-method="getSummaries"
          :span-method="arraySpanMethod"
          :header-cell-style="getRowClass"
          class="print-table"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column :label="tableLabel" align="center">
            <!-- :header-cell-style="{background:'#ccc',borderColor:'#000'}" -->
            <el-table-column type="index" label="序号" border align="center" />
            <el-table-column label="耗材名称" prop="prodName" align="center" />
            <el-table-column label="规格" prop="spec" align="center" />
            <el-table-column label="型号" prop="mol" align="center">
            </el-table-column>
            <el-table-column label="数量" prop="cnt" align="center" />
            <el-table-column label="单位" prop="unt" align="center" />
            <el-table-column label="单价" prop="pric" align="center" />
            <el-table-column label="总计" prop="amt" align="center" />
            <el-table-column label="类别" prop="mcsType" align="center">
              <!-- <template #default="{ row }">
                <span v-if="row.mcsType == '0'">普通耗材</span>
                <span v-if="row.mcsType == '1'">高值耗材</span>
                <span v-if="row.mcsType == '2'">试剂</span>
              </template> -->
            </el-table-column>
            <el-table-column label="是否集采" prop="isFas" align="center">
              <template #default="{ row }">
                <span v-if="row.isFas == '0'">非集采</span>
                <span v-if="row.isFas == '1'">集采</span>
              </template>
            </el-table-column>
            <el-table-column label="批次" prop="lotNum" align="center">
            </el-table-column>
            <el-table-column label="生产日期" prop="manuDate" align="center" />
            <el-table-column label="有效期" prop="prodExpy" align="center" />
            <el-table-column label="厂商" prop="prodEntp" align="center" />
          </el-table-column>
          <p class="price-css">共计{{ total }}条</p>
        </el-table>
        <el-dialog
          title="预览"
          :visible.sync="comModal"
          width="70%"
          :before-close="comhandleClose"
          destroy-on-close
          append-to-body
        >
          <div class="prWrap">
            <div id="printMe" class="print-container">
              <printTable :tableHeader="tableHeader" :tableData="list" />
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button type="primary" v-print="printObj">打印</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="foot-button">
        <el-button type="info" @click="handleBack">返 回</el-button>
      </div>
      <!-- <p class="price-css">合计数量：{{}} <span></span>合计金额： {{}}</p> -->
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylPagination from "@/components/yl-pagination";
import mcsInfo from "@/views/components/mcs-info.vue";
import printTable from "@/views/components/printTable.vue";
import {
  selectRetnDetl,
  acpRetnOrd
} from "@/api/productreturnmanage-sup/returnList";
import {
  selectSetlStmtDetlD,
  updateSetlStmtDStas,
  exportAllSetlExcel
} from "@/api/procurement-settlement/index";
import { exportData } from "../../consumCataManage-sup/const.js";
const printCSS = `
    @media print{.print-header{position: fixed !important;top: 0 !important;left:10px; !important;height: 51px !important;background: #fff !important;margin-left:1px;}
   table{page-break-inside: auto;}
   tr{page-break-inside: avoid;}
   thead{display: table-header-group;}
   @page{@bottom-right{content: "第" counter(page) "页/共" counter(pages) "页";font-family: Arial;font-size: 10pt;}}
   body{counter-reset: page;}
`;
export default {
  components: {
    ylStep,
    ylPagination,
    mcsInfo,
    printTable
  },
  data() {
    return {
      tableHeader: [
        {
          label: "序号",
          value: "serial"
        },
        {
          label: "耗材名称",
          value: "prodName"
        },
        {
          label: "规格",
          value: "spec"
        },
        // {
        //   label: "型号",
        //   value: "mol"
        // },
        {
          label: "数量",
          value: "cnt"
        },
        {
          label: "单位",
          value: "unt"
        },
        {
          label: "单价",
          value: "pric"
        },
        {
          label: "总计（元）",
          value: "amt"
        },
        {
          label: "类别",
          value: "mcsType"
        },
        {
          label: "是否集采",
          value: "iFas"
        },
        {
          label: "批次",
          value: "lotNum"
        },
        {
          label: "生产日期",
          value: "manuDate"
        },
        {
          label: "有效期至",
          value: "prodExpy"
        },
        {
          label: "厂商",
          value: "prodEntp"
        }
      ],
      total: "",
      comModal: false,
      listForm: {
        stmtNo: "",
        branchName: "",
        isFas: "",
        amt: "",
        stmtPrd: "",
        stas: ""
      },
      stasOptions: [
        { value: "A", lable: "待确认" },
        { value: "B", lable: "已确认" }
      ],
      isFasOptions: [
        { value: "0", lable: "非集采" },
        { value: "1", lable: "集采" }
      ],
      listLoading: false,
      list: [],
      isShow: false,
      sureLoading: false,
      printLoading: false,
      tableLabel: "",
      // 打印
      printObj: {
        id: "printMe",
        popTitle: "", // 打印配置页上方标题
        extraHead: `<style>${printCSS}</style>`, //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {
          console.log("执行了吗");
        }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback: () => {}, // 开启打印前的回调事件
        beforePrintCallback: () => {},
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
        extraCss: printCSS
      }
    };
  },
  created() {
    if (this.$route.query.stas == "A") {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    this.tableLabel = this.$route.query.branchName + "对账明细";
    this.listForm.stmtNo = this.$route.query.stmtNo;
    this.listForm.branchName = this.$route.query.branchName;
    this.listForm.amt = this.$route.query.amt;
    this.listForm.stmtPrd = this.$route.query.stmtPrd;
    this.stasOptions.forEach(i => {
      if (i.value == this.$route.query.stas) {
        this.listForm.stas = i.lable;
      }
    });
    this.isFasOptions.forEach(i => {
      if (i.value == this.$route.query.isFas) {
        this.listForm.isFas = i.lable;
      }
    });
  },
  mounted() {
    this.getData();
  },
  methods: {
    //导出
    exportExal() {
      exportAllSetlExcel({
        stmtNo: this.$route.query.stmtNo,
        spdName: this.$route.query.branchName,
        stmtPrd: this.$route.query.stmtPrd
      }).then(res => {
        const _res = res.data;
        exportData(_res, "对账明细");
      });
    },
    prDataView() {
      this.comModal = true;
    },
    comhandleClose() {
      this.comModal = false;
    },
    arraySpanMethod() {
      //table合计行合并单元格
      setTimeout(() => {
        if (this.$refs.table.$el) {
          let current = this.$refs.table.$el
            .querySelector(".el-table__footer-wrapper")
            .querySelector(".el-table__footer");
          let cell = current.rows[0].cells;
          cell[1].colSpan = "13";
        }
      }, 50);
    },
    getSummaries(param) {
      //table自定义合计行方法summary-method
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 7) {
          const values = data.map(item => Number(item[column.property]));
          sums[1] = values.reduce((prev, curr) => {
            return prev + curr;
          }, 0);
          sums[1] = sums[1].toFixed(2) + "元";
        }
      });
      return sums;
    },

    getData() {
      this.listLoading = true;
      selectSetlStmtDetlD({ stmtNo: this.$route.query.stmtNo })
        .then(res => {
          this.list = res.data;
          this.total = this.$route.query.detlCnt;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 确认
    handleConfirm() {
      this.$confirm("确认对账", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.sureLoading = true;
        let data = {
          stmtNo: this.$route.query.stmtNo,
          spdId: this.$route.query.spdId,
          stas: "B"
        };
        updateSetlStmtDStas(data)
          .then(res => {
            if (res.success == true) {
              this.sureLoading = false;
              this.$message.success("操作成功");
              this.$router.push({
                name: "Reconciliation",
                query: {
                  spdId: this.$route.query.spdId,
                  activeNameTab: this.$route.query.activeNameTab
                }
              });
            } else {
              this.sureLoading = false;
              this.$message.error("确认失败");
            }
          })
          .catch(err => {
            this.sureLoading = false;
          });
      });
    },
    handleBack() {
      this.$router.push({
        name: "Reconciliation",
        query: {
          spdId: this.$route.query.spdId,
          activeNameTab: this.$route.query.activeNameTab
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#printMe {
  ::v-deep .print-table {
    border: 1px solid #999;

    td,
    th {
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
    }
  }

  ::v-deep .price-css {
    margin-left: 94%;
  }
}

.el-card {
  ::v-deep .el-card__body {
    padding: 10px 0px 10px 0px;
    border: none;
    margin-right: 20px;
  }
}

.right-btn {
  width: 100%;
  height: 50px;
  padding-right: 20px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.prWrap {
  height: 400px;
  overflow: auto;
}
</style>