invoiceInfo.vue

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-20 09:35:11
 * @LastEditTime: 2019-10-29 09:48:42
 * @LastEditors: Please set LastEditors
 -->
<template>
  <list-item :item-height="44">
    <item :showArrow="true">
      <div slot="name" class="font-color">纳税人类型</div>
      <input
        slot="content"
        v-model="invoiceInfo.taxpayer_type_n"
        type="text"
        readonly
        placeholder="请选择"
        @click="selectTaxpayer"
      >
    </item>
    <item :showArrow="true">
      <div slot="name" class="font-color">发票类型</div>
      <input
        slot="content"
        v-model="invoice_kind_n"
        type="text"
        readonly
        placeholder="请选择"
        @click="selectInvoiceType"
      >
    </item>
    <item>
      <div slot="name" class="font-color">发票抬头</div>
      <input slot="content" v-model="invoiceInfo.invoice_title" type="text" placeholder="请输入发票抬头" >
    </item>
    <item>
      <div slot="name" class="font-color">发票地址</div>
      <textarea
        slot="content" ref="myTestarea" v-model="invoiceInfo.invoice_adds" cols="22"
        rows="1"
        type="text" placeholder="请输入发票地址" @input="addRows(invoiceInfo.invoice_adds)" />
    </item>
    <item>
      <div slot="name" class="font-color">开户电话</div>
      <input slot="content" v-model="invoiceInfo.invoice_tel" type="text" placeholder="请输入开户电话" >
    </item>
    <item>
      <div slot="name" class="font-color">发票开户行</div>
      <input
        slot="content"
        ref="myTestareaLive"
        v-model="invoiceInfo.open_bank"
        cols="22"
        rows="1"
        type="text"
        placeholder="请输入发票开户行"
        @input="addRowsLive(invoiceInfo.open_bank)"
      >
    </item>
    <item>
      <div slot="name" class="font-color">开户行账号</div>
      <input slot="content" v-model="invoiceInfo.open_account" type="text" placeholder="请输入开户行账号" >
    </item>
    <item>
      <div slot="name" class="font-color">纳税人识别号</div>
      <input
        slot="content"
        v-model="invoiceInfo.organization_code" :placeholder="orgCode" type="text" readonly
      >
    </item>
    <!-- <p>{{ organization_code }}</p> -->
  </list-item>
</template>
<script>
export default {
  name: 'InvoiceInfo',
  props: {
    'orgCode': {
      type: String,
      default: '',
    },
    'baseInfo': {
      type: Object,
      default: {},
    },
    'tabNum': {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      invoicList: [],
      taxpayerList: [],
      invoice_kind_n: '',
      invoiceInfo: {
        invoice_kind: 1,
        taxpayer_type: '',
        invoice_title: '',
        taxpayer_type_n: '',
        organization_code: this.orgCode,
        invoice_adds: '',
        invoice_tel: '',
        open_bank: '',
        open_account: '',
      },
    }
  },
  watch: {
    orgCode () {
      this.invoiceInfo.organization_code = this.orgCode
    },
    'tabNum' (newVal, oulVal) {
      if (newVal === 2) {
        Object.assign(this.invoiceInfo, this.baseInfo)
        this.invoice_kind_n = ''
        if (this.invoiceInfo.invoice_kind == 0) {
          this.invoice_kind_n = '增值税专用发票'
        } else if (this.invoiceInfo.invoice_kind == 2) {
          this.invoice_kind_n = '增值税普通发票'
        }
      }
    },
  },
  created () {
    this.getInvoiceType()
    this.getTaxpayer()
    this.addRows(this.invoiceInfo.invoice_adds)
    this.addRowsLive(this.invoiceInfo.open_bank)
  },
  updated () {
    this.sendList()
  },
  methods: {
    getInvoiceType () {
      let vm = this
      let url = process.env.basePath + 'bp_invoice_kind_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.invoicList = res.lists.map(item => {
            return {
              code: item.invoice_kind,
              code_name: item.invoice_kind_n,
            }
          })
        }
      })
    },
    addRows (e) {
      let addNum = parseInt(e.length / 16)
      if (addNum === 0) {
        this.$refs.myTestarea.rows = 1
      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
        this.$refs.myTestarea.rows = addNum + 1
      }
    },
    addRowsLive (e) {
      let addNum = parseInt(e.length / 16)
      if (addNum === 0) {
        this.$refs.myTestareaLive.rows = 1
      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
        this.$refs.myTestareaLive.rows = addNum + 1
      }
    },
    getTaxpayer () {
      let vm = this
      let url = process.env.basePath + 'bp_taxpayer_type_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.taxpayerList = res.lists.map(item => {
            return {
              code: item.taxpayer_type,
              code_name: item.taxpayer_type_n,
            }
          })
        }
      })
    },
    selectInvoiceType (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.invoicList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.invoiceInfo.invoice_kind = obj.bp_type
          vm.invoice_kind_n = obj.bp_type_n
        },
      })
    },
    selectTaxpayer (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.taxpayerList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.invoiceInfo.taxpayer_type = obj.bp_type
          vm.invoiceInfo.taxpayer_type_n = obj.bp_type_n
        },
      })
    },
    sendList () {
      this.$emit('getinvoiceList', this.invoiceInfo)
    },
  },
}
</script>
<style scoped>
input::placeholder{
    color: #B4B4B5;
}
.font-color {
        color: #656464;
    }
     textarea::placeholder {
    color: #b4b4b5;
  }
  textarea {
    text-align: right;
    color:#666;
  }
</style>