<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: '请抉择发票类型', trigger: 'change'}],
lineTicketClassify: [{required: true, message: '请抉择发票品种', trigger: 'change'}],
lineTicketAmount: [{required: true, message: '请输出开票金额', trigger: 'blur'}],
lineTaxAmount: [{required: true, message: '请输出开票税额', trigger: 'blur'},
{pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输出大于 0 的正整数', trigger: 'blur'
}],
invoiceDate: [{required: true, message: '请输出开票工夫', trigger: 'change'}],
companyName: [{required: true, message: '请抉择开票公司名称', 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)
}
}
}