|
@@ -0,0 +1,530 @@
|
|
|
+<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;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //查看图片
|
|
|
+ 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>
|