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

<template>
  <!-- 商品退货管理————待确认 -->
  <div>
    <div class="right-button">
      <el-button type="primary" v-print="printObj">打印</el-button>
      <el-button type="primary" v-if="isShow" @click="handleConfirm" :loading="sureLoading"
        >确 认</el-button
      >
    </div>
    <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 id="printMe">
        <el-table
          ref="table"
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          show-summary
          :summary-method="getSummaries"
          :span-method="arraySpanMethod"
          show-summary
          :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="retnCnt" align="center"/>
          <el-table-column label="有效期" prop="prodEntp" align="center"/> -->
          <el-table-column label="厂商" prop="prodEntp" align="center"/>
          </el-table-column>
          </el-table-column>
          <p class="price-css">共计{{total}}条</p>
          
        </el-table>
      </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 { selectRetnDetl, acpRetnOrd } from "@/api/productreturnmanage-sup/returnList";
import {selectSetlStmtDetlD} from "@/api/procurement-settlement/index"

export default {
  components: {
    ylStep,
    ylPagination,
    mcsInfo,
  },
  data() {
    return {
      total:"",
      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: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        beforeEntryIframe () {
            const cells = document.querySelectorAll('.cell')
            for (let k7 = 0; k7 < cells.length; k7++) {
              const cell = cells[k7]
              // 在这里添加样式只是修改了打印的样式，不会污染原页面的样式
              // 为了让表格中的内容自动换行，不需要的话可以删掉
              cell.style.whiteSpace = 'pre-wrap' 
  
            }
          },
        // beforeEntryIframe(copy) {
        //   console.log(copy,"copy")
        //   // copy是ele对象的深度拷贝，修改copy对象不会更改页面中table表格的样式，只会更改打印预览生成的表格的样式
        //   const cells = copy.querySelectorAll('.cell');
        //   const tableNode = copy.querySelectorAll('.el-table__header,.el-table__body');
        //   ;[].slice.call(cells).forEach(item => {
        //     // 为了让表格中的内容自动换行，不需要的话可以删掉
        //     item.style.whiteSpace = 'pre-wrap'
        //   })
        //   // el-table打印不全的问题
        //   ;[].slice.call(tableNode).forEach(item => {
        //     item.style.width = '100%';
        //     const child = item.childNodes;
        //     ;[].slice.call(child).forEach(element => {
        //       if(element.localName === 'colgroup') {
        //         element.innerHTML = ''
        //       }
        //     })
        //   })
        // },
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback: () => {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
        extraCss: "",
      },
    };
  },
  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: {
    //设置表格第一行的颜色
    // getRowClass({ row, column, rowIndex, columnIndex }) {
    //     return "background:#e2e1e1;text-align:center";
    // },
    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;
          });
      });
    },
  },
};
</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%;
 }
}

</style>