settle_down_web/src/views/invoice/components/addInvoice.vue

<template>
  <div class="addInvoice">
    <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules">
      <el-row>
        <el-col style="padding-bottom: 10px">
          <span class="card_title">开票信息</span>
          <el-card shadow="always" style="padding-top: 10px">
            <el-row v-if="!id">
              <el-col :span="4" class="col-txt"><span><span class="red-asterisk">*</span>签约信息</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-button type="text" @click="handleContract()">去选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>发票抬头</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.invoiceHeaderName" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>税号</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.invoiceHeaderNumber" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>项目名称</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.invoiceGoodsName" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>规格</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.specifications" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>单位</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <span>平方米</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>数量</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.invoiceCount" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>金额</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.invoiceAmount" oninput="value=value.replace(/[^\d.]/g,'')" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>销方开户行、账号</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item prop="invoiceSellerBank">
                  <el-select
                    v-model="form.invoiceSellerBank"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in bankOptions"
                      :key="item.id"
                      :label="item.bankName + (item.bankBranchName?item.bankBranchName:'') + item.bankNumber"
                      :title="'适用楼盘：' + (item.suitFloorStr?item.suitFloorStr:'无') + ' 适用费用类型：' + (item.suitCostType?item.suitCostType:'无')"
                      :value="item.bankName + (item.bankBranchName?item.bankBranchName:'') + item.bankNumber"
                    >
                      <div class="my-select">
                        <span>{{ item.bankName + (item.bankBranchName?item.bankBranchName:'') + item.bankNumber }}</span>
                        <span style="color: #8492a6; font-size: 13px;padding-left: 10px">
                          {{ ' 适用楼盘：' + (item.suitFloorStr?item.suitFloorStr:'无') + ' 适用费用类型：' + (item.suitCostType?item.suitCostType:'无') }}
                        </span>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>税率</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item prop="invoiceTax">
                  <!--                  <el-select-->
                  <!--                    v-model="form.invoiceTax"-->
                  <!--                    filterable-->
                  <!--                    placeholder="请选择"-->
                  <!--                    popper-class="statistic_base"-->
                  <!--                  >-->
                  <!--                    <el-option-->
                  <!--                      v-for="item in dc_data.invoice_tax"-->
                  <!--                      :key="item.value"-->
                  <!--                      :label="item.label"-->
                  <!--                      :value="item.value"-->
                  <!--                    />-->
                  <!--                  </el-select>-->
                  <el-input v-model="form.invoiceTax" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>备注</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 100}" maxlength="2000" show-word-limit />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="!isView" type="primary" :loading="loadingFlag" @click="confirmSubmit()">确 定</el-button>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
      @close="getData"
    >
      <contract-index v-if="dialogVisible" ref="contractIndex" from-address="addInvoice" @getChildrenData="getChildrenData" />
    </el-dialog>

  </div>
</template>

<script>
import ContractIndex from '@/views/signingManagement/contractManagement/index.vue'
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'

export default {
    name: 'AddInvoice',
    components: { ContractIndex },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['invoice_tax'],
            form: {},
            rules: {},
            dialogVisible: false,
            dialogTitle: '',
            isView: false,
            bankOptions: [],
            loadingFlag: false,
            id: ''
        }
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
        })
    },
    methods: {
        initData(data) {
            this.id = data.id
            this.isView = data.isView
            this.getBankOptions()
            if (data) {
                this.getData(data)
            }
        },
        getData(data) {
            const postData = {
                id: data.id
            }
            this.baseRequest('getById', postData).then(res => {
                if (res.data) {
                    this.form = res.data
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        getBankOptions() {
            this.bankRequest('listAll', {}).then(res => {
                this.bankOptions = res.data || []
            })
        },
        getBankTaxRateByFloor(data) {
            this.baseRequest('getBankTaxRateByFloor_2', data).then(res => {
                if (res.data) {
                    this.form.invoiceSellerBank = res.data.invoiceSellerBank
                    this.form.invoiceTax = res.data.invoiceTax == null ? '0' : res.data.invoiceTax
                }
            })
        },
        handleContract() {
            this.dialogVisible = true
            this.dialogTitle = ''
        },
        cancel() {
            this.$emit('cancel')
        },
        confirmSubmit() {
            const _this = this
            if (!this.form.contractId) {
                this.$message.warning('请选择签约信息')
                return
            }
            _this.loadingFlag = true
            let soaUrl = 'add'
            if (this.id) {
                soaUrl = 'sendInvoice'
            }
            const extraData = {
            }
            const postData = Object.assign({}, _this.form, extraData)
            this.baseRequest(soaUrl, postData).then(res => {
                if (res.data.code === 200) {
                    this.$message.success('保存成功')
                    this.cancel()
                } else {
                    this.$message.error(res.data.msg)
                }
                _this.loadingFlag = false
            }).catch(err => {
                // this.$message.error(err)
                _this.loadingFlag = false
            })
        },
        getChildrenData(data) {
            console.log('data', data)
            this.dialogVisible = false
            const postData = {
                id: data,
                invoiceGoodsName: '*房地产预收款*&'
            }
            this.baseRequest('getByContractId', postData).then(res => {
                if (res.data) {
                    this.form = res.data
                    // 带出银行
                    const postData = {
                        contractId: data,
                        paymentType: '房款'
                    }
                    this.getBankTaxRateByFloor(postData)
                }
            })
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('InvoiceManageController', opUrl, postData, 'project')
        },
        bankRequest(opUrl, postData) {
            return this.$channel.globeRequest('InvoiceBankController', opUrl, postData, 'project')
        }
    }
}
</script>

<style lang="scss">

</style>
<style scoped>
.red-asterisk {
    color: red;
}
</style>