image.png

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

‭肉斯王子
18 声望2 粉丝

« 上一篇
es6项目使用