settle_down_web/src/views/invoice/components/formalInvoiceManageEdit.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>
              <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="请选择"
                    popper-class="statistic_base"
                  >
                    <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-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" @click="confirmSubmit()">确 定</el-button>
    </div>

  </div>
</template>

<script>
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'

export default {
    name: 'FormalInvoiceManageEdit',
    components: { },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['invoice_tax'],
            form: {},
            rules: {},
            dialogVisible: false,
            dialogTitle: '',
            isView: false,
            bankOptions: []
        }
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
            console.log('invoice_tax', this.dc_data.invoice_tax)
        })
    },
    methods: {
        initData(data) {
            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
                    this.getBankTaxRateByFloor()
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        getBankOptions() {
            this.bankRequest('listAll', {}).then(res => {
                this.bankOptions = res.data || []
            })
        },
        getBankTaxRateByFloor() {
            this.baseRequest('getBankTaxRateByFloor', { id: this.form.id }).then(res => {
                if (res.data) {
                    this.form.invoiceSellerBank = res.data.invoiceSellerBank
                    this.form.invoiceTax = res.data.invoiceTax
                }
            })
        },
        cancel() {
            this.$emit('cancel')
        },
        confirmSubmit() {
            const _this = this
            const soaUrl = 'add'
            const extraData = {
                type: '1'
            }
            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)
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        getChildrenData(data) {
            console.log('data', data)
            this.dialogVisible = false
            const postData = {
                id: data
            }
            this.baseRequest('getByContractId', postData).then(res => {
                if (res.data) {
                    this.form = res.data
                }
            })
        },
        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>