cld/global/vue/fee/receipt_office_component.js

/*
 * @description: 费用-办事处相关组件
 * @Author: CP
 * @Date: 2020-11-16 14:52:08
 * @FilePath: \cld\global\vue\fee\receipt_office_component.js
 */

Vue.component("office", {
    props:['daily','other','officeExplain'],
    computed: {
        officePrice: function () {
            return officePrice(this);
        },
        dailyTotal:function(){
            let sum = 0;
            this.daily.forEach(element => {
                sum += Number(element.price);
            });
            return sum.toFixed(2);
        },
        otherTotal:function(){
            let sum = 0;
            this.other.forEach(element => {
                sum += Number(element.price);
            });
            return sum.toFixed(2);
        },
    },
    template:
        `
<div>
    <div class="seTable">
        <table class="table table-bordered table-condensed table-hover mb-0">
            <tbody>
                <tr>
                    <th colspan="2" class="taC">日常相关费用</th>
                </tr>
                <tr v-for="item in daily" >
                    <th>{{ item.name }}</th>
                    <td width="200" class="taR">￥<input type="number" v-model="item.price"  pattern="[0-9]" step="0.01"
                             min="0" class="span2"></td>
                </tr>
                <tr>
                    <th class="taR">小计</th>
                    <td class="colGreen taR">￥{{ dailyTotal }}</td>
                </tr>

                <tr>
                    <th colspan="2" class="taC">其他</th>
                </tr>
                <tr v-for="item in other">
                    <th>{{ item.name }}</th>
                    <td width="200" class="taR">￥<input type="number" v-model="item.price"  pattern="[0-9]" step="0.01"
                             min="0" class="span2"></td>
                </tr>
                <tr>
                    <th class="taR">小计</th>
                    <td class="colGreen taR">￥{{ otherTotal }}</td>
                </tr>
                <tr class="warning">
                    <td class="taR"><b>办事处相关费用合计</b></td>
                    <td class="colGreed taR"><b style="font-size: 24px">￥{{ officePrice }}</b></td>
                </tr>
                <tr>
                    <th colspan="2" class="taC">报销说明</th>
                </tr>
                <tr>
                    <th colspan="2" v-for="item in officeExplain">
                    <textarea required rows="6" style="width: 99%"  v-model="item.officeExplain" placeholder="办事处相关费用说明">
                    </textarea>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="seCensor receipt-censor">
        <div class="title">报销单填写说明</div>
        <div class="detail">
            
            <p>
                1 <b>产生费用所在办事处</b> 默认使用您所在的第一个办事处；
            </p>
            <p>
                2 邮寄费、公关费、办公费等详细说明请填写到 <b>报销说明</b>。
            </p>
        </div>
    </div>
</div>
    `
})