InvoiceEntry.vue 10.6 KB
<template>
    <div class="container resource close-left-menu">
        <div class="pop-banner clearfix">
            <h3 class="current-module">供应商发票录入</h3>
        </div>

        <div class="content">
            <div class="bd-rgt" style="padding-right: 300px;height: 100%;">
                <div class="main bdrgtm" style="height: 100%;">
                    <p class="text-color-red mt-10">注:保存完发票,请点击上传发票</p>
                    <h2 class="h2_1 mt-10">
                        未开发票金额<span id="id_num">21746.400</span>元,已开发票金额<span id="id_num">0.000</span>
                    </h2>

                    <section class="ctable ct-parent mt-20">
                        <div class="ct-head">
                            <span class="ct-col w40">序号</span>
                            <span class="ct-col w90">商品</span>
                            <span class="ct-col w80">批号</span>
                            <span class="ct-col w90">数量/单价</span>
                            <span class="ct-col w90">单据总金额</span>
                            <span class="ct-col w90">送货单号</span>
                            <span class="ct-col w90">开票金额</span>
                            <span class="ct-col w90">本次开票金额</span>
                        </div>
                        <div class="ct-row">
                            <div class="row-line" v-for="sup in mxList">
                                <span class="ct-col w40">{{ $index + 1 }}</span>
                                <span class="ct-col w90">{{ sup.medname }}</span>
                                <span class="ct-col w80">{{ sup.accountperiod }}</span>
                                <span class="ct-col w90">{{ }}</span>
                                <span class="ct-col w90">{{ sup.dzbegindate }}</span>
                                <span class="ct-col w90">{{ sup.dzenddate }}</span>
                                <span class="ct-col w90">0.000</span>
                                <span class="ct-col w90">{{ sup.geamount }}</span>
                                <span class="ct-col w90">0000</span>
                                <span class="ct-col w90">{{ sup.balanceamount }}</span>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="aside" style="">
                    <div class="invoice_right">
                        <h3 class="h-ti-h3-1">发票信息</h3>
                        <div class="invoice-notes">
                            <ul>
                                <li>
                                    <span>发票总金额:<b id="id_num">0.000</b></span>
                                </li>
                                <li>
                                    <span>发票总数:<b id="id_num">0</b></span>
                                    <span>
                                        未上传发票数:<b id="id_num"> 0 </b>
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div class="left-treeb fpart pull1 layui-form mt-10">
                            <div class="row">
                                <div class="form-group form-label">
                                    <label class="label" for="cn1">发票号</label>
                                    <div class="control">
                                        <input type="text" v-model="mxListList[0].medname" id="cn1" class="inp4"
                                            maxlength="20">

                                    </div>
                                </div>
                            </div>
                            <div class="row mt-10">
                                <div class="form-group form-label">
                                    <label class="label" for="cn1">发票金额</label>
                                    <div class="control">
                                        <input type="text" v-model="mxListList[0].medname" id="cn1" class="inp4"
                                            readonly="readonly" maxlength="20">

                                    </div>
                                </div>
                            </div>
                            <div class="box_showpr box_showpr_s1 mt-10">
                                <span style="background: #f5f5f5">大写金额</span>
                                <p>0</p>
                            </div>
                            <div class="box_du mt-20" style="display: none">
                                <div id="imageBox1" class="box_showpr">
                                    <span>发票上传</span>
                                    <div class="cert-view mt-5">
                                        <ul class="cert-list">
                                            <li tag-name="image">
                                                <div class="cp-box">
                                                    <div class="big-imgs rela_img">
                                                        <img id="Image1" src-none="" src="" alt="" upload="upload"
                                                            data-type="show" image-json="null" onerror='' />
                                                    </div>
                                                </div>
                                                <div class="license-btn">
                                                    <label class="fbtn modify-btn" title="修改">
                                                        <i>|</i>
                                                        <input type="file" accept="" style="
                                                                display: none;
                                                            " action="upload" />
                                                    </label>
                                                    <label class="fbtn magnify-btn" title="放大" action="zoomOut">
                                                        <i>|</i>
                                                    </label>
                                                    <label class="fbtn del-btn" title="删除" action="delete"></label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="from-button fr from-s1">
                                <a href="javascript:;" class="green-button" onclick="SendInvoice()">保存</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="InvoiceDeatil" style="display: none">
                <div class="row" id="tabTRSettleMV" style="height: 520px; overflow-y: auto"></div>
                <div class="popup-btn" style="border: 0">
                    <div class="layui-layer-btn popup-btn-oc">
                        <a class="layui-layer-btn1" onclick="controlHide('InvoiceDeatil');">关闭</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        convertNumToChinese: function (num) {
            const chineseNum = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
            const chineseUnit = ["", "拾", "佰", "仟", "万", "亿"];

            let result = "";

            if (num === 0) {
                return "零";
            }

            // 将数字转换为字符串,从最高位开始遍历
            const numString = num.toString();
            let i = numString.length - 1;
            let j = 0;

            while (i >= 0) {
                let currNum = parseInt(numString[i]);
                let currChinese = chineseNum[currNum];

                // 处理零的情况
                if (currNum === 0) {
                    if (j === 4) {  // 处理万位
                        result = chineseUnit[j] + result;
                    } else if (j === 8) {  // 处理亿位
                        result = chineseUnit[j] + result;
                    } else if (result[0] !== "零") {
                        result = chineseNum[currNum] + result;
                    }

                    j++;
                    i--;
                    continue;
                }

                // 处理大于一的情况
                currChinese += chineseUnit[j];
                result = currChinese + result;

                j++;
                i--;
            }

            return result;
        }
    },
}
</script>

<style>
.content {
    width: 100%;
    height: 100%;
    line-height: 1.42857143;
    font-family: Open Sans, Microsoft Yahei, sans-serif;
    color: #373737;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    display: block;
    padding: 10px 30px 80px;
    background: #f5f5f5;
    padding-left: 55px;
    padding-right: 55px;
    overflow: hidden;
}

.bd-rgt {
    zoom: 1;
    overflow: hidden;
    padding-right: 210px;
}

.bd-rgt {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 1.42857143;
    font-family: Open Sans, Microsoft Yahei, sans-serif;
    color: #373737;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    zoom: 1;
    padding-right: 300px;
}

.main.bdrgtm {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 1.42857143;
    font-family: Open Sans, Microsoft Yahei, sans-serif;
    color: #373737;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    border-right: 2px #00aaeb solid;
    padding-right: 15px;
    float: left;
    width: 100%;
    height: 100%;
}

.bd-rgt .aside {
    float: left;
    position: relative;
    width: 290px;
    right: -290px;
    margin-left: -292px;
    padding-left: 10px;
    border-left: 2px solid #00aaeb;
}

.bdrgtm {
    border-right: 2px #00aaeb solid;
    padding-right: 15px;
}
</style>