front/front-vue/src/views/service/credit/billDetail.vue

<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 0.6%">
      <div class="text item">
        <el-form ref="bill" label-width="auto" :inline="true">
          <el-form-item label="创建人：" style="float: right">{{
            form.createUser
          }}</el-form-item>
          <el-form-item label="创建时间：" style="float: right">{{
            parseTime(new Date(form.createTime))
          }}</el-form-item>
          <el-form-item label="编号：" style="float: right">{{
            form.zbiNumber
          }}</el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">基本信息</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-form
          ref="form"
          :model="form"
          label-width="auto"
          label-position="top"
          :inline="true"
          :disabled="true"
        >
          <el-form-item label="账款类型" prop="wplIsInput" style="width: 300px">
            <el-radio-group v-model="type" prop="type">
              <el-radio-button label="00" v-if="type == '00'"
                >应付账款</el-radio-button
              >
              <el-radio-button label="01" v-if="type == '01'"
                >应收账款</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="账款名称" prop="zbiName">
            <el-input
              v-model="form.zbiName"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="应付方" prop="zbiPayerId">
            <el-input
              v-model="form.payerName"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="应收方" prop="zbiPayeeId">
            <el-input
              v-model="form.payeeName"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="贸易日期" prop="zbiDate">
            <el-date-picker
              style="width: 300px"
              v-model="form.zbiDate"
              value-format="yyyy-MM-dd"
              type="date"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="
              type == '00'
                ? '预计付款日期'
                : type == '01'
                ? '预计收款日期'
                : '预计收/付款日期'
            "
            prop="zbiPayDate"
          >
            <el-date-picker
              style="width: 300px"
              v-model="form.zbiPayDate"
              value-format="yyyy-MM-dd"
              type="date"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="账款金额" prop="zbiAmount">
            <el-input
              v-model="form.zbiAmount"
              maxlength="20"
              style="width: 300px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="账款金额大写">
            <el-input
              :disabled="true"
              :value="smallToBig(form.zbiAmount)"
              style="width: 300px"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="贸易合同编号" prop="zbiContractNo">
            <el-input
              v-model="form.zbiContractNo"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="贸易商品/服务">
            <el-input
              v-model="form.zbiService"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="配送企业">
            <el-input
              v-model="form.zbiDistributor"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="配送订单号">
            <el-input
              v-model="form.zbiOrderNo"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="form.zbiRemark"
              :autosize="{ minRows: 2, maxRows: 4 }"
              maxlength="100"
              type="textarea"
              style="width: 615px"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">发票列表</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-form ref="invoice" label-width="auto" :inline="true">
          <el-form-item label="合计：">{{
            handleInput(allAmount())
          }}</el-form-item>
          <el-form-item label="大写：">{{
            smallToBig(allAmount())
          }}</el-form-item>
        </el-form>

        <el-table
          :data="fileList"
          row-key="ziiId"
          default-expand-all
          :row-class-name="tableRowClassName"
          border
        >
          <el-table-column type="index" width="50" align="center" />
          <el-table-column
            label="发票代码"
            align="center"
            prop="ziiNo"
            maxlength="10"
          />
          <el-table-column
            label="发票号码"
            align="center"
            prop="ziiNumber"
            maxlength="10"
          />
          <el-table-column label="开票日期" align="center" prop="ziiDate" />
          <el-table-column
            label="购方识别号"
            align="center"
            prop="ziiPurchaserNo"
          />
          <el-table-column
            label="销方识别号"
            align="center"
            prop="ziiSellerNo"
          />
          <el-table-column
            label="合计金额"
            align="center"
            prop="ziiTotalAmount"
          />
          <el-table-column label="价税合计" align="center" prop="ziiAmount" />
          <el-table-column
            label="校验结果"
            align="center"
            prop="ziiCheckStt"
            :formatter="checkSttFormat"
          />
          <el-table-column
            label="附件"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="invoicePictureCardPreview(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">合同附件</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-upload
          :disabled="true"
          :file-list="contractList"
          :auto-upload="false"
          action=""
          ref="contractUpload"
          list-type="picture-card"
          :on-preview="invoicePictureCardPreview"
        >
        </el-upload>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">物流附件</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-upload
          :disabled="true"
          :file-list="logisticsList"
          :auto-upload="false"
          action=""
          ref="logisticsUpload"
          list-type="picture-card"
          :on-preview="invoicePictureCardPreview"
        >
        </el-upload>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">其他附件</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-upload
          :disabled="true"
          :file-list="otherList"
          :auto-upload="false"
          action=""
          ref="otherUpload"
          list-type="picture-card"
          :on-preview="invoicePictureCardPreview"
        >
        </el-upload>
      </div>
    </el-card>

    <!-- 查看图片 -->
    <el-dialog :visible.sync="invoiceVisible">
      <img width="100%" :src="invoiceImageUrl" alt="" />
    </el-dialog>

    <div style="text-align: center">
      <el-button type="primary" @click="submit()">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  getBill,
  getInvoice,
  getFile,
  commitBill,
} from "@/api/service/bill/bill";
import { getOwnCompany, companyRelList } from "@/api/common/company";
import { amtformat } from "@/utils/amtCommon";
import { getToken } from "@/utils/auth";

export default {
  name: "billDetail",
  components: {},
  props: {
    // 正常的业务数据，对应echarts饼图配置中series[0].data
    zbiId: {
      type: String,
      required: true,
      default: () => "",
    },
  },
  data() {
    return {
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      //进度
      active: 0,
      //类型
      type: "00",
      //合同附件
      contractList: [],
      //物流附件
      logisticsList: [],
      //其他附件
      otherList: [],
      //发票列表
      fileList: [],
      //合计金额
      totalPrice: 0,
      //验证结果
      checkSttOptions: [],
      //图片路径
      invoiceImageUrl: null,
      //图片显示
      invoiceVisible: false,
      //等待框
      fullscreenLoading: false,
      //链属企业
      companyRelList: [],
      //链属企业
      company: {},
    };
  },
  created() {
    //进度
    this.active = 0;
    const zbiId = this.zbiId;
    // const zbiId = this.$route.params && this.$route.params.zbiId;
    this.fullscreenLoading = true;
    getOwnCompany().then((response) => {
      this.company = response.data;
    });
    this.getCompanyRel();
    this.getDetail(zbiId);
    getInvoice(zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.fileList = response.data;
      this.invoice = this.fileList[0] ? this.fileList[0] : {};
      this.ids = [];
    });
    getFile("0", zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.contractList = response.data;
    });
    //查询物流
    getFile("1", zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.logisticsList = response.data;
    });
    //查询其他附件
    getFile("2", zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.otherList = response.data;
    });
    this.getDicts("zc_invoice_checkStt").then((response) => {
      this.checkSttOptions = response.data;
    });
  },
  activated() {},
  methods: {
    //查询往来账款详情
    getDetail(zbiId) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getBill(zbiId).then((response) => {
        this.form = response.data;
        if (this.form.zbiPayerId == this.company.scyId) {
          this.type = "00";
        } else {
          this.type = "01";
        }
          loading.close();
      })
        .catch(() => {
          loading.close();
        });
    },
    //查询链属企业
    getCompanyRel(val) {
      this.queryParams.companyName = val;
      companyRelList(this.queryParams).then((response) => {
        this.companyRelList = response.data;
      });
    },
    //表格置灰
    tableRowClassName({ row, rowIndex }) {
      if (row.ziiCheckStt != "1") {
        return "warning-row";
      }
      return "";
    },
    //查看图片
    invoicePictureCardPreview(file) {
      this.invoiceImageUrl = file.url;
      this.invoiceVisible = true;
    },
    //发票合计
    allAmount() {
      var strarr = [0.0];
      for (let i in this.fileList) {
        if (this.fileList[i]["ziiCheckStt"] == "1") {
          strarr.push(this.fileList[i]["ziiAmount"]);
        }
      }
      return (Math.floor(eval(strarr.join("+")) * 100) / 100).toFixed(2); //结果
      // return this.handleInput(eval(strarr.join("+"))); //结果
    },
    // 结束
    submit() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
    //校验结果字典
    checkSttFormat(row, column) {
      return this.selectDictLabel(this.checkSttOptions, row.ziiCheckStt);
    },
    /* 金额展示 */
    handleInput(str) {
      return amtformat(str, 2, ".", ",");
    },
    /* //  将数字金额转换为大写金额 */
    smallToBig(money) {
      //  将数字金额转换为大写金额
      var cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整数完以后的单位
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      var integerNum; //金额整数部分
      var decimalNum; //金额小数部分
      //输出的中文金额字符串
      var chineseStr = "";
      var parts; //分离金额后用的数组，预定义
      if (money == "" || money == null || money == undefined) {
        return "零元零角零分";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return "超出最大处理数字";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }
      //四舍五入保留两位小数,转换为字符串
      money = Math.round(money * 100).toString();
      integerNum = money.substr(0, money.length - 2);
      decimalNum = money.substr(money.length - 2);
      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
        chineseStr += cnInteger;
      }
      return chineseStr;
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: rgb(223, 223, 223);
}
</style>