<el-form ref="form" :model="formData">
<el-table
v-if="tableType !== 'rateInfo'"
ref="rateTable"
:rules="formRules"
:data="formData.lineInfoList"
border
:max-height="300"
style="width: 100%;"
>
<el-table-column label="发票类型" prop="lineTicketType" align="center" width="120">
<template slot-scope="scope">
<el-form-item :prop="'lineInfoList['+scope.$index+'].lineTicketType'" :rules="formDataRules.lineTicketType">
<el-select
v-model="scope.row.lineTicketType"
size="small"
filterable
remote
placeholder="请选择"
class="basic-form"
>
<el-option
v-for="(r, rIndex) in lineTicketTypeList"
:key="rIndex"
:label="r.dictName"
:value="r.dictCode"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<!-- 发票种类 -->
<el-table-column label="发票种类" prop="lineTicketClassify" align="center" width="120">
<template slot-scope="scope">
<el-form-item :prop="'lineInfoList['+scope.$index+'].lineTicketClassify'" :rules="formDataRules.lineTicketClassify">
<el-select
v-model="scope.row.lineTicketClassify"
size="small"
filterable
remote
placeholder="请选择"
class="basic-form"
>
<el-option
v-for="(r, rIndex) in ticketClassifyList"
:key="rIndex"
:label="r.dictName"
:value="r.dictCode"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<!-- 开票金额 -->
<el-table-column label="开票金额(元)" align="center" width="120">
<template slot-scope="scope">
<el-form-item :rules="formDataRules.lineTicketAmount" :prop="'lineInfoList['+scope.$index+'].lineTicketAmount'">
<el-input v-model="scope.row.lineTicketAmount" type="number" placeholder="请填写开票金额" @blur="((val)=>{lineMountChange(scope.row.lineTicketAmount, 'lineTicketAmount', scope.$index)})" />
</el-form-item>
</template>
</el-table-column>
<!-- 不含税金额 无字段暂不显示 -->
<!-- <el-table-column v-if="tableType==='Offline'" label="不含税金额(元)" prop="lineTicketRate" align="center" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.lineTicketRate" placeholder="请填写不含税金额" />
</template>
</el-table-column> -->
<!-- 开票税额 -->
<el-table-column v-if="tableType==='Offline'" label="开票税额(元)" prop="lineTaxAmount" align="center" width="120">
<template slot-scope="scope">
<el-form-item :rules="tableType==='Offline' ? formDataRules.lineTaxAmount : null" :prop="'lineInfoList['+scope.$index+'].lineTaxAmount'">
<el-input v-model="scope.row.lineTaxAmount" type="number" placeholder="请填写开票税额" @blur="((val)=>{lineMountChange(scope.row.lineTaxAmount, 'lineTaxAmount', scope.$index)})" />
</el-form-item>
</template>
</el-table-column>
<!-- 开票时间-->
<el-table-column v-if="tableType==='Offline'" label="开票时间" prop="invoiceDate" align="center" width="120">
<template slot-scope="scope">
<el-form-item :rules="tableType==='Offline' ? formDataRules.invoiceDate : null" :prop="'lineInfoList['+scope.$index+'].invoiceDate'">
<el-date-picker v-model="scope.row.invoiceDate" type="date" placeholder="请选择(例如2020-01-01)" size="mini" @change="((val)=>{selectTypeChange(val, scope.$index)})" />
</el-form-item>
</template>
</el-table-column>
<!-- 所属帐期 -->
<el-table-column label="所属帐期" prop="settlePeriod" align="center" width="120">
<el-form-item>
<span>{{ settleDetail && settleDetail.settlePeriod }}</span>
</el-form-item>
</el-table-column>
<!-- 开票公司名称 -->
<el-table-column label="开票公司名称" prop="companyName" align="center" width="200px">
<template slot-scope="scope">
<el-form-item :rules="formDataRules.companyName" :prop="'lineInfoList['+scope.$index+'].companyName'">
<el-select
v-model="scope.row.companyName"
size="small"
filterable
remote
placeholder="请选择"
class="basic-form"
@change="((val)=>{selectCompany(val, scope.$index)})"
>
<el-option
v-for="(cItem, cIndex) in companyNameList"
:key="cIndex"
:label="cItem"
:value="cItem"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<!-- 开票公司信息 -->
<el-table-column
v-for="(item, index) in rateTable"
:key="index"
:prop="item.prop"
align="center"
:label="item.label"
>
<template slot-scope="scope">
<span v-if="item.scoped && item.prop === 'index'">{{ scope.$index + 1 }}</span>
<span v-else>{{ scope.row[item.prop] || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="150px" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="bindCopy(scope.row, scope.$index)">复制</el-button>
<el-button type="danger" size="mini" @click="bindRemoveBtn(scope.row, scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 已开票tab显示 -->
<el-table v-if="tableType === 'rateInfo'" :data="lineInfoList">
<el-table-column
v-for="(item, index) in ticketTable"
:key="index"
:prop="item.prop"
align="center"
:label="item.label"
>
<template slot-scope="scope">
<span v-if="item.scoped && item.prop === 'lineTicketType'">{{ scope.row.lineTicketType === 'special' ? '增值税专用发票' : '增值税普通发票' }}</span>
<span v-else-if="item.scoped && item.prop === 'lineTicketClassify'">{{ scope.row.lineTicketType === 'electronic' ? '电子发票' : '纸质发票' }}</span>
<span v-else-if="item.scoped && item.prop === 'invoiceDate'">{{ scope.row[item.prop] ? $filter.dateFilter(scope.row[item.prop] / 1000, 2) : '' }}</span>
<span v-else>{{ scope.row[item.prop] || '-' }}</span>
</template>
</el-table-column>
</el-table>
</el-form>
data() { return { formData: { lineInfoList: undefined }, formDataRules: { lineTicketType: [{ required: true, message: 'Select invoice type ', trigger: 'change'}], lineTicketClassify: [{required: true, message:' Select invoice type ', trigger: 'change'}], lineTicketAmount: [{required: true, message: 'Please enter the invoice amount ', trigger: 'blur'}], linetaxAmount: [{required: True, the message: 'please input tax amount of make out an invoice, the trigger:' blur '}, {pattern: / ^ [+] {0, 1} (\ d +) $| ^ [+] {0, 1} (\ d + \ \ d +) $/, the message: 'Please enter a positive integer greater than 0 ', trigger: 'blur'}], Invoicedate: [{required: true, message:' Please enter the time of the invoice ', trigger: 'change'}], CompanyName: [{required: true, message: 'Please select companyName ', trigger: 'change'}]}, domains: []}
mounted() {
this.$set(this.formData, 'lineInfoList', this.lineInfoList)
},
methods: {
async handleAddDetails() {
try {
await this.$refs.form.validate()
this.lineInfoList.unshift({})
} catch (err) {
console.error(err)
}
}
}