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

<template>
  <div class="app-container">
    <el-container>
      <el-container>
        <el-aside
          style="
            background-color: white;
            line-height: 0px;
            width: 300px;
            height: 400px;
          "
        >
          <el-steps
            :active="active"
            direction="vertical"
            process-status="finish"
            finish-status="success"
          >
            <el-step title="基本信息"></el-step>
            <el-step title="发票列表"></el-step>
            <el-step title="合同附件"></el-step>
            <el-step title="物流附件"></el-step>
            <el-step title="其他附件"></el-step>
          </el-steps>
        </el-aside>
        <el-main>
            <el-form ref="bill" label-width="auto" :inline="true" style="margin-bottom:50px">
              <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 v-if="active == 0">
            <el-divider content-position="left">基本信息</el-divider>
            <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-select style="width: 300px" v-model="form.zbiPayerId" :disabled="true"
                  v-if="type == '00'">
                    <el-option :label="company.scyName" :value="company.scyId">
                    </el-option>
                </el-select>
                <el-select style="width: 300px" v-model="form.zbiPayerId" filterable clearable remote 
                  v-if="type == '01'">
                    <el-option v-for="(item,index) in companyRelList" :key="index" :label="item.launchScyId == company.scyId ? item.receiveScyName : item.launchScyName" :value="item.launchScyId == company.scyId ? item.receiveScyId : item.launchScyId">
                    </el-option>
                </el-select>
              </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="zbiPayeeId">
                <el-select style="width: 300px" v-model="form.zbiPayeeId" :disabled="true"
                  v-if="type == '01'">
                    <el-option :label="company.scyName" :value="company.scyId">
                    </el-option>
                </el-select>
                <el-select style="width: 300px" v-model="form.zbiPayeeId" filterable clearable remote 
                  v-if="type == '00'">
                    <el-option v-for="(item,index) in companyRelList" :key="index" :label="item.launchScyId == company.scyId ? item.receiveScyName : item.launchScyName" :value="item.launchScyId == company.scyId ? item.receiveScyId : item.launchScyId">
                    </el-option>
                </el-select>
              </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="合同编号" 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.zbiOrderNo"
                  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.zbiRemark"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  maxlength="100"
                  type="textarea"
                  style="width: 615px"
                />
              </el-form-item>
            </el-form>
          </div>
          <!-- 发票列表 -->
          <div v-if="active == 1">
            <el-divider content-position="left">发票列表</el-divider>
            <el-form ref="invoice" label-width="auto" :inline="true">
              <el-form-item label="合计：">{{ allAmount() }}</el-form-item>
              <el-form-item label="大写：">{{ smallToBig(allAmount()) }}</el-form-item>
            </el-form>

            <el-table
              stripe
              :data="fileList"
              row-key="ziiId"
              default-expand-all
              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>
          <!-- 合同附件 -->
          <div v-if="active == 2">
            <el-divider content-position="left">合同附件</el-divider>
            <el-upload
              :disabled="true"
              :file-list="contractList"
              :auto-upload="false"
              action=""
              ref="contractUpload"
              list-type="picture-card"
              :on-preview="invoicePictureCardPreview">
            </el-upload>
          </div>
          <!-- 物流附件 -->
          <div v-if="active == 3">
            <el-divider content-position="left">物流附件</el-divider>
            <el-upload
              :disabled="true"
              :file-list="logisticsList"
              :auto-upload="false"
              action=""
              ref="logisticsUpload"
              list-type="picture-card"
              :on-preview="invoicePictureCardPreview">
            </el-upload>
          </div>
          <!-- 其他附件 -->
          <div v-if="active == 4">
            <el-divider content-position="left">其他附件</el-divider>
            <el-upload
              :disabled="true"
              :file-list="otherList"
              :auto-upload="false"
              action=""
              ref="otherUpload"
              list-type="picture-card"
              :on-preview="invoicePictureCardPreview">
            </el-upload>
          </div>
        </el-main>
      </el-container>
    </el-container>
    
    <!-- 查看图片 -->
    <el-dialog :visible.sync="invoiceVisible">
      <img width="100%" :src="invoiceImageUrl" alt="" />
    </el-dialog>

    <div style="text-align: center">
      <el-button type="primary" @click="back()" v-if="active != 0"
        >查看上一步</el-button
      >
      <el-button type="primary" @click="next()" v-if="active != 4"
      v-loading.fullscreen.lock="fullscreenLoading"
        >查看下一步</el-button
      >
      <el-button type="primary" @click="submit()" v-if="active == 4"
        >关闭</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"

export default {
  name: "BillDetail",
  components: {},
  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.$route.params && this.$route.params.zbiId;
    this.fullscreenLoading = true
    getOwnCompany().then((response) => {
      console.log(response);
      this.company = response.data;
    });
    this.getCompanyRel()
    this.getDetail(zbiId)
    this.getDicts("zc_invoice_checkStt").then((response) => {
      this.checkSttOptions = response.data;
    });
  },
  activated() {},
  methods: {
    //查询往来账款详情
    getDetail(zbiId){
      getBill(zbiId).then((response) => {
        console.log(response);
        this.form = response.data;
        this.fullscreenLoading = false
      });
    },
    //查询链属企业
    getCompanyRel(val){
      this.queryParams.companyName = val
      companyRelList(this.queryParams).then((response) => {
        console.log(response);
        this.companyRelList = response.data;
      });
    },
    //查看图片
    invoicePictureCardPreview(file) {
      console.log(file)
      this.invoiceImageUrl = file.url;
      this.invoiceVisible = true;
    },
    //发票合计
    allAmount() {
      var strarr = [0.00];
      for (let i in this.fileList) {
        strarr.push(this.fileList[i]["ziiAmount"]);
      }
      return Math.floor(eval(strarr.join("+")) * 100) / 100; //结果
      // return this.handleInput(eval(strarr.join("+"))); //结果
    },
    // 下一步
    next() {
      this.fullscreenLoading = true
      if (this.active == 0) {
        this.getInvoiceList();
        this.active++;
      } else if(this.active == 1) {
        //查询合同
        getFile("0",this.form.zbiId).then((response) => {
          this.contractList = response.data;
          this.fullscreenLoading = false
        }).catch(() => {
          this.fullscreenLoading = false
        })
        this.active++;
      } else if(this.active == 2) {
        //查询物流
        getFile("1",this.form.zbiId).then((response) => {
          this.logisticsList = response.data;
          this.fullscreenLoading = false
        }).catch(() => {
          this.fullscreenLoading = false
        })
        this.active++;
      } else if(this.active == 3) {
        //查询其他附件
        getFile("2",this.form.zbiId).then((response) => {
          this.otherList = response.data;
          this.fullscreenLoading = false
        }).catch(() => {
          this.fullscreenLoading = false
        })
        this.active++;
      } else {
        this.fullscreenLoading = false
        this.active++;
      }
    },
    //查询合同
    getInvoiceList(){
      getInvoice(this.form.zbiId).then((response) => {
        console.log(response);
        this.fileList = response.data;
        this.fullscreenLoading = false
      }).catch(() => {
        this.fullscreenLoading = false
      });
    },
    // 上一步
    back() {
      this.active--;
    },
    // 结束
    submit() {
      commitBill(this.form.zbiId).then((response) => {
        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>