X-web/src/views/modules/finance/purchase-invoice-add-or-update.vue

<template>
  <div>
      <div class="my-title">{{ !id ? '新增': formDisable ? '详情' : '修改' }}</div>
      <div style="margin-top: 20px"></div>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" :disabled="formDisable" label-width="auto">
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="采购发票编码" prop="code">
              <el-input v-model="dataForm.code" :disabled="true" placeholder="系统自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="发票类型" prop="type">
              <el-select v-model="dataForm.type" filterable placeholder="请选择">
                <el-option
                  v-for="item in typeState"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="发票类别代码" prop="typeCode">
              <el-input v-model="dataForm.typeCode" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="发票号" prop="invoiceNumber">
              <el-input v-model="dataForm.invoiceNumber"  placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票电话" prop="phone">
              <el-input v-model="dataForm.phone"  placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="发票金额" prop="invoiceAmount">
              <el-input v-model="dataForm.invoiceAmount"  placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         
        <el-row class="my-row">
          <el-col :span="8" >
            <el-form-item label="币种" prop="currency">
              <el-select v-model="dataForm.currency" filterable placeholder="请选择">
                <el-option
                  v-for="item in currencyType"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplierId">
              <el-select
                v-model="dataForm.supplierId"
                remote
                @change="cusChange"
                clearable
                placeholder="请选择">
                <el-option
                  v-for="item in optionsCus"
                  :key="item.supplierId"
                  :label="item.supplierName"
                  :value="item.supplierId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="15">
            <el-form-item label="备注说明" prop="notes">
              <el-input type="textarea" 
                v-model="dataForm.notes" 
                :rows="4" 
                maxlength="300"
                show-word-limit 
                placeholder="备注说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <upload-component :title="'附件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
        </el-row>
        <div v-loading="supplierLoading">
        <h4>客户信息</h4>
         <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="发票抬头" prop="invoiceTitle">
              <el-input v-model="dataForm.invoiceTitle" :value="supplierInfo.invoiceTitle" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业税号" prop="taxNumber">
              <el-input v-model="dataForm.taxNumber" :value="supplierInfo.taxNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户银行" prop="bank">
              <el-input v-model="dataForm.bank" :value="supplierInfo.bank" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="银行账号" prop="account">
              <el-input v-model="dataForm.account" :value="supplierInfo.account" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="dataForm.tel" :value="supplierInfo.tel" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传真" prop="fax">
              <el-input v-model="dataForm.fax" :value="supplierInfo.fax" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </div>
         
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">取消</el-button>
        <el-button v-if="!formDisable" type="primary" @click="dataFormSubmit()" v-reClick>确定</el-button>
      </span>
  </div>
</template>

<script>
  import { getSupplierNameList, getSupplierDetail } from '@/api/sale'
  import { getPurchaseInvoiceDetail } from '@/api/finance'
  import uploadComponent from '../common/upload-component'
  export default {
    name: 'purchase-invoice-add-or-update',
    components: {
      uploadComponent
    },
    data () {
      return {
        visible: false,
        formDisable: false,
        dataList: [],
        fileList: [],
        id: 0,
        dataForm: {},
        optionsType: [],
        optionsApplier: [],
        materialDetails: [],
        optionsCus: [], // 供应商下拉列表
        supplierInfo: {},
        supplierVisible: false,
        supplierLoading: false,
        totalAmount: 0,
        dataRule: {
          type: [{ required: true, message: '发票类型不能为空', trigger: 'blur' }],
          typeCode: [{ required: true, message: '发票类别代码不能为空', trigger: 'blur' }],
          invoiceNumber: [{ required: true, message: '发票号不能为空', trigger: 'blur' }],
          phone: [{ required: true, message: '开票电话不能为空', trigger: 'blur' }],
          currency: [{ required: true, message: '币种不能为空', trigger: 'blur' }],
          invoiceAmount: [{ required: true, message: '发票金额不能为空', trigger: 'blur' }],
          supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }]
        },
        typeState: [ // 发票类型映射关系
          {
            code: '1',
            value: '增值税专用发票'
          },
          {
            code: '2',
            value: '增值税普通发票'
          },
          {
            code: '3',
            value: '形式发票'
          }
        ],
        currencyType: [ // 币种映射关系
          {
            code: '1',
            value: '人民币'
          }
        ]
      }
    },
    watch: {
      'dataForm.customerId' (value) {
        this.optionsCus.forEach(v => {
          if (v.supplierId === value) {
            this.dataForm.supplierName = v.supplierName
          }
        })
      }
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      async init (id, formDisable) {
        this.visible = true
        this.id = id || 0
        this.formDisable = formDisable
        await getSupplierNameList().then(({data}) => {
          if (data && data.code === '200') {
            this.optionsCus = data.data
          }
        })
        if (!id) return
        await getPurchaseInvoiceDetail(this.id).then(({data}) => {
          if (data && data.code === '200') {
            this.dataForm = data.data
            // 文件列表
            this.fileList = []
            if (data.data.attachList) {
              data.data.attachList.forEach((item) => {
                this.fileList.push({
                  name: item.fileName,
                  url: item.url,
                  id: item.url
                })
              })
            }
          }
        })
        await this.cusChange()
      },
      validateField (type) {
        this.$refs.dataForm.validateField(type)
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 添加附件
            let fList = this.fileList
            if (fList.length > 0) {
              this.dataForm.attachList = []
              for (let i = 0; i < fList.length; i++) {
                this.dataForm.attachList.push({
                  fileName: fList[i].name,
                  url: fList[i].url
                })
              }
            } else {
              this.$message.error('请上传文件')
              return
            }
            // 添加客户信息
            if (this.dataForm.supplierId && this.supplierInfo) {
              Object.assign(this.dataForm, this.supplierInfo)
            }
            // let finSalesInvoice = {finSalesInvoice: this.dataForm}
            this.$http({
              url: !this.id ? this.$http.adornUrl(`/biz-service/purchase/invoice/save`) : this.$http.adornUrl(`/biz-service/purchase/invoice/update`),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({data}) => {
              if (data && data.code === '200') {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.onChose()
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      uploadSuccess (fileList) {
        this.fileList = fileList
      },
      // 客户选中切换
      cusChange () {
        if (!this.dataForm.supplierId) {
          this.supplierInfo = {}
          this.supplierVisible = false
        }
        this.customerloading = true
        getSupplierDetail(this.dataForm.supplierId).then(({data}) => {
          if (data && data.code === '200') {
            let supplierInfo = data.data
            this.supplierInfo = {
              invoiceTitle: supplierInfo.invoiceTitle,
              taxNumber: supplierInfo.taxNumber,
              bank: supplierInfo.bank,
              account: supplierInfo.account,
              tel: supplierInfo.tel,
              fax: supplierInfo.fax
            }
          }
          this.supplierloading = false
        })
      }
    }
  }
</script>

<style scoped>

</style>