<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) } }}