tire-platform-ui/src/views/iosBasicData/fininvoices/fininvoicesDetails.vue

<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                           @click="backToList">返回列表
                </el-button>
            </div>
            <div class="add-customer-btn">
                <el-button style="margin-left: 10px" type="primary"
                           size="small"
                           plain>导出到税控网络客户端
                </el-button>
                <el-button type="primary"
                           size="small"
                           plain>导出到税控
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px" v-if="editSave"
                            :loading="saveLoading" @click="editHandle">编 辑
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px" v-else
                            :loading="saveLoading" @click="editCustomer">保 存
                </el-button>
            </div>
        </div>
        <div style="margin: 55px 5px 0px 5px;'">
            <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm">
                <el-card class="box-card">
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="业务编号" prop="businessNo">
                                <el-input style="width: 100%;" v-model="form.billNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入业务编号" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="单据日期" prop="billDate">
                                <el-date-picker v-model="form.billDate" clearable
                                                style="width: 100%;"
                                                type="date" size="small"
                                                :disabled="true"
                                                value-format="yyyy-MM-dd HH:mm"
                                                placeholder="选择单据日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="制单人" prop="createUserName">
                                <el-input style="width: 100%;" v-model="form.createUserName"
                                          size="small" autocomplete="off"
                                          :disabled="editSave"
                                          clearable placeholder="请输入制单人" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="发票币种" prop="invCurCode">
                                <el-input style="width: 100%;" v-model="form.invCurCode"
                                          size="small" autocomplete="off"
                                          :disabled="editSave"
                                          clearable placeholder="请输入发票币种" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="打印次数" prop="invCurCode">
                                <el-input style="width: 100%;" v-model="form.invCurCode"
                                          size="small" autocomplete="off"
                                          :disabled="editSave"
                                          clearable placeholder="请输入打印次数" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <div class="flexBox" style="margin-top: 10px">
                    <div class="cardBox flexBoxLeft">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="发票号码" prop="invoiceNo">
                                    <el-input style="width: 100%;" v-model="form.invoiceNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入发票号码" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开票日期" prop="invoiceDate">
                                    <el-date-picker v-model="form.invoiceDate" clearable
                                                    style="width: 100%;"
                                                    type="date" size="small"
                                                    :disabled="true"
                                                    value-format="yyyy-MM-dd HH:mm"
                                                    placeholder="选择开票日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="税号" prop="invCorpTaxNo">
                                    <el-input style="width: 100%;" v-model="form.invCorpTaxNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入税号" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="美元银行" prop="invCorpAccountBankUsd">
                                    <el-input style="width: 100%;" v-model="form.invCorpAccountBankUsd"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入美元银行" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="美元账户" prop="invCorpAccountNoUsd">
                                    <el-input style="width: 100%;" v-model="form.invCorpAccountNoUsd"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入美元账户" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="人民币银行" prop="invCorpAccountBankUsd">
                                    <el-input style="width: 100%;" v-model="form.invCorpAccountNoCny"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入美元银行" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="人民币账户" prop="invCorpAccountNoUsd">
                                    <el-input style="width: 100%;" v-model="form.invCorpAccountNoCny"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入美元账户" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="船名/航次" prop="vesselVoyno">
                                    <el-input style="width: 100%;" v-model="form.vesselVoyno"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入船名/航次" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开航日期" prop="etd">
                                    <el-input style="width: 100%;" v-model="form.etd"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入开航日期" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="装货港" prop="pol">
                                    <el-input style="width: 100%;" v-model="form.pol"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入装货港" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="卸货港" prop="pod">
                                    <el-input style="width: 100%;" v-model="form.pod"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入卸货港" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="目的地" prop="destination">
                                    <el-input style="width: 100%;" v-model="form.destination"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入卸货港" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="箱型箱量" prop="containers">
                                    <el-input style="width: 100%;" v-model="form.containers"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入箱型箱量" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="开票单位" prop="invCorpCnName">
                                    <el-input style="width: 100%;" v-model="form.invCorpCnName"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入开票单位" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="cardBox flexBoxRight">
                        <el-row>
                            <el-col :span="4">
                                <el-switch
                                    v-model="form.stlMode"
                                    active-value="1"
                                    inactive-value="0"
                                    active-text="票结"
                                    inactive-text="月结">
                                </el-switch>
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                             :disabled="editSave"
                                             v-model="form.isDk">整票(不列费用明细)
                                </el-checkbox>
                            </el-col>
                            <el-col :span="5">
                                <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                             :disabled="editSave"
                                             v-model="form.isRp">只提取开票费用
                                </el-checkbox>
                            </el-col>
                            <el-col :span="3">
                                <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                             :disabled="editSave"
                                             v-model="form.isExportMblno">主单号
                                </el-checkbox>
                            </el-col>
                            <el-col :span="3">
                                <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                             :disabled="editSave"
                                             v-model="form.isExportVslvoy">船名航次
                                </el-checkbox>
                            </el-col>
                            <el-col :span="3">
                                <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                             :disabled="editSave"
                                             v-model="form.isExportHblno">分单号
                                </el-checkbox>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="结算单位" prop="corpCnName">
                                    <el-input style="width: 100%;" v-model="form.corpCnName"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入结算单位" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="开票日期" prop="invoiceDate">
                                    <el-date-picker v-model="form.invoiceDate" clearable
                                                    style="width: 100%;"
                                                    type="date" size="small"
                                                    :disabled="editSave"
                                                    value-format="yyyy-MM-dd HH:mm"
                                                    placeholder="选择开票日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="税控发票号" prop="taxInvoiceNo">
                                    <el-input style="width: 100%;" v-model="form.taxInvoiceNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入税控发票号" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="银行账号" prop="bankReceiptAccountNo">
                                    <el-input style="width: 100%;" v-model="form.bankReceiptAccountNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入银行账号" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="银行名称" prop="bankReceiptBankName">
                                    <el-input style="width: 100%;" v-model="form.bankReceiptBankName"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入银行名称" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="导出时间" prop="exportDate">
                                    <el-input style="width: 100%;" v-model="form.exportDate"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入导出时间" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="业务编号" prop="businessNo">
                                    <el-input style="width: 100%;" v-model="form.businessNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入导出时间" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="导出人" prop="exportName">
                                    <el-input style="width: 100%;" v-model="form.exportName"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入导出人" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="主单编号" prop="mblno">
                                    <el-input style="width: 100%;" v-model="form.mblno"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入主单编号" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="导出汇率" prop="exrate">
                                    <el-input style="width: 100%;" v-model="form.exrate"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入导出汇率" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="分单编号" prop="hblno">
                                    <el-input style="width: 100%;" v-model="form.hblno"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入分单编号" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="发票类型" prop="invType">
                                    <el-input style="width: 100%;" v-model="form.invType"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入发票类型" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="账单号" prop="bookingNo">
                                    <el-input style="width: 100%;" v-model="form.bookingNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入账单号" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="对账单号" prop="checkNo">
                                    <el-input style="width: 100%;" v-model="form.checkNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入对账单号" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属税种" prop="taxType">
                                    <el-input style="width: 100%;" v-model="form.taxType"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入所属税种" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="BOOK NO" prop="bookingNo">
                                    <el-input style="width: 100%;" v-model="form.bookingNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入BOOK NO" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="业务类型" prop="businessTypes">
                                    <el-input style="width: 100%;" v-model="form.businessTypes"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入业务类型" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="税率" prop="taxRate">
                                    <el-input style="width: 100%;" v-model="form.taxRate"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入税率" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="选择币种" prop="curCode">
                                    <el-input style="width: 100%;" v-model="form.curCode"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入选择币种" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                             :disabled="editSave"
                                             v-model="form.isExchangeToCny">转换成人民币
                                </el-checkbox>
                                <el-button type="primary"
                                           size="small"
                                           icon="el-icon-service"
                                           plain>提取费用
                                </el-button>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="邮箱" prop="checkNo">
                                    <el-input style="width: 100%;" v-model="form.checkNo"
                                              size="small" autocomplete="off"
                                              :disabled="editSave"
                                              clearable placeholder="请输入邮箱" >
                                    </el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </div>
                </div>

                <el-card style="margin-top: 10px">
                    <el-form-item label="全电发票备注:" prop="invCurCode">
                        <el-input style="width: 100%;" v-model="form.elecRemarks"
                                  size="small" autocomplete="off"
                                  :disabled="editSave"
                                  clearable placeholder="请输入全电发票备注" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开票金额合计:" prop="invCurCode">
                        <span>¥{{form.amountLoc}}元</span>
                    </el-form-item>
                </el-card>

                <el-card style="margin-top: 10px">
                    <div style="margin-bottom: 10px;display: flex;justify-content: space-between">
                        <div>
                            <el-button size="small" type="primary">新 建</el-button>
                            <el-button size="small" type="danger">删 除</el-button>
                        </div>
                        <div>
                            <el-button size="small" type="primary" plain>全部选择</el-button>
                            <el-button size="small" type="primary" plain>确认费用</el-button>
                        </div>
                    </div>
                    <fininvoicesitems :tableData="[]"></fininvoicesitems>
                </el-card>

            </el-form>
        </div>
    </div>
</template>

<script>
import fininvoicesitems from "@/views/iosBasicData/fininvoices/assembly/fininvoicesitems.vue";
    export default {
        components:{fininvoicesitems},
        data() {
            return {
                pageLoading:false, // 全屏加载
                saveLoading:false, // 按钮加载
                form:{},
            }
        },
        props:{
            editSave:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            //返回列表
            backToList() {
                this.$emit('goBack')
            },
        },
    }
</script>

<style scoped>
::v-deep.el-form-item {
    margin-bottom: 0;
}
.cardBox {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.flexBox {
    display: flex;
}
.flexBoxLeft {
    flex: 2;
    margin-right: 10px;
    padding-bottom: 40px;
}
.flexBoxRight {
    flex: 3;
}
</style>