ConsumSupplier-Platform/src/views/page/procurement-settlement/paymentStatus/consumptionDetails.vue

<template>
  <!-- 商品退货管理————待确认 -->
  <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>
      <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="invoName">
              <div class="content">
                {{ listForm.invoName }}
              </div>
            </el-form-item>
            <el-form-item label="发票号码" prop="invoNo" >
              <div class="content">
                {{ listForm.invoNo }}
              </div>
            </el-form-item>
            <el-form-item label="开票日期" prop="invoDate">
              <div class="content">
                {{ listForm.invoDate }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="开票金额" prop="invoAmt">
              <div class="content">
                {{ listForm.invoAmt }}
              </div>
            </el-form-item>
            <el-form-item label="发票文件" prop="invoFile" >
              <yl-upload :fileId="listForm.invoFile" :fileStas="listForm.stas" readonly> </yl-upload>
            </el-form-item>
            <el-form-item
              label="核验文件"
              prop="invoChkFile"
            >
              <yl-upload :fileId="listForm.invoChkFile" :fileStas="listForm.stas" readonly> </yl-upload>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </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="splerName">
              <div class="content">
                {{ this.$store.state.user.username }}
              </div>
            </el-form-item>
            <el-form-item label="账户名称" prop="accName">
              <div class="content">
                {{ listForm.accName }}
              </div>
            </el-form-item>
            <el-form-item label="账号" prop="accNo">
                <div class="content">
                  {{ listForm.accNo }}
                </div>
              </el-form-item>
            
          </div>
          <div class="flex-css">
            <el-form-item label="付款日期" prop="payDate">
              <div class="content">
                {{ listForm.payDate }}
              </div>
            </el-form-item>
            <el-form-item label="付款金额" prop="payAmt">
              <div class="content">
                {{ listForm.payAmt }}
              </div>
            </el-form-item>
            <el-form-item label="附件" prop="payFile">
              <yl-upload :fileId="listForm.payFile" :fileStas="listForm.stas" readonly> </yl-upload>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="foot-button">
      <el-button type="info" @click="handleBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylUpload from "@/components/yl-upload-files";
import { selectSetlStmtDetlD } from "@/api/procurement-settlement/index";

export default {
  components: {
    ylStep,
    ylUpload,
  },
  data() {
    return {
      listForm: {
        stmtNo: "",
        branchName: "",
        isFas: "",
        amt: "",
        stmtPrd: "",
        stas: "",
        invoFile: "",
        invoChkFile: "",
        invoName: "",
        invoNo: "",
        invoDate: "",
        invoAmt: "",
        splerName: "",
        accName: "",
        accNo: "",
        payDate: "",
        payAmt: "",
        payFile: "",
      },
      stasOptions: [
        { value: "C", lable: "未付款" },
        { value: "Y", lable: "已付款" },
      ],
      isFasOptions: [
        { value: "0", lable: "非集采" },
        { value: "1", lable: "集采" },
      ],

    };
  },
  created() {
    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.listForm.invoFile = this.$route.query.invoFile;
    this.listForm.invoChkFile = this.$route.query.invoChkFile;
    this.listForm.invoName = this.$route.query.invoName;
    this.listForm.invoNo = this.$route.query.invoNo;
    this.listForm.invoAmt = this.$route.query.invoAmt;
    this.listForm.invoDate = this.$route.query.invoDate;
    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;
      }
    });
    this.listForm.splerName = this.$route.query.splerName;
    this.listForm.accName = this.$route.query.accName;
    this.listForm.accNo = this.$route.query.accNo;
    this.listForm.payDate = this.$route.query.payDate;
    this.listForm.payAmt = this.$route.query.payAmt;
    this.listForm.payFile = this.$route.query.payFile;
    // console.log(this.listForm.payFile,"this.listForm.payFile");
  },
  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;
    },
    getUpload(id) {
      this.listForm.invoFile = id;
      if (id) {
        this.$refs.listform.clearValidate("invoFile");
        // console.log(this.listForm.invoFile, "this.listForm.invoFile");
      } else {
        this.$refs.listform.validateField("invoFile");
      }
    },
    getUpload1(id) {
      this.listForm.invoChkFile = id;
      if (id) {
        this.$refs.listform.clearValidate("invoChkFile");
        // console.log(this.listForm.invoChkFile, "this.listForm.invoChkFile");
      } else {
        this.$refs.listform.validateField("invoChkFile");
      }
    },
    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;
        });
    },
    // 确认
    // handleSubmit() {
    //   this.$refs["listform"].validate((valid) => {
    //     if (valid) {
    //       this.$confirm("确认提交", "提示", {
    //         confirmButtonText: "确定",
    //         cancelButtonText: "取消",
    //         type: "warning",
    //       })
    //         .then(() => {
    //           this.submitLoad = true;
    //           this.listForm.stas = "D";
    //           insertSetlInvo(this.listForm)
    //             .then((response) => {
    //               this.$message({
    //                 message: "提交成功",
    //                 type: "success",
    //               });
    //               this.submitLoad = false;
    //               this.$router.push({
    //                 name: "InvoiceManage",
    //                 query: {
    //                   spdId: this.$route.query.spdId,
    //                   activeNameTab: this.$route.query.activeNameTab,
    //                 },
    //               });
    //             })
    //             .catch(() => {
    //               this.submitLoad = false;
    //             });
    //         })
    //         .catch(() => {});
    //     }
    //   });
    // },
    // 返回
    handleBack() {
      this.$router.push({
        name: "PaymentStatus",
        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%;
  }
}
</style>