X-web/src/views/modules/finance/supplier-account-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="customerAccountCode">
              <el-input v-model="dataForm.customerAccountCode" :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="contractNumber">
              <el-input v-model="dataForm.contractNumber" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="收付款时间" prop="receivedPaidTime">
              <el-date-picker
                v-model="dataForm.receivedPaidTime"
                type="date"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <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="receivedPaidAmount">
              <el-input v-model="dataForm.receivedPaidAmount"  placeholder=""></el-input>
            </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>
         
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">取消</el-button>
        <el-button v-if="!formDisable" type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
  </div>
</template>

<script>
import uploadComponent from '../common/upload-component'
export default {
  name: 'supplier-account-add-or-update',
  components: {
    uploadComponent
  },
  data () {
    return {
      visible: false,
      formDisable: false,
      dataList: [],
      fileList: [],
      id: 0,
      dataForm: {},
      optionsType: [],
      optionsApplier: [],
      materialDetails: [],
      optionsCus: [], // 客户下拉列表
      customerInfo: {},
      customerVisible: false,
      customerLoading: false,
      totalAmount: 0,
      dataRule: {
        type: [{ required: true, message: '账款类型不能为空', trigger: 'blur' }],
        contractNumber: [{ required: true, message: '合同号不能为空', trigger: 'blur' }],
        receivedPaidTime: [{ required: true, message: '收付款时间不能为空', trigger: 'blur' }],
        receivedPaidAmount: [{ required: true, message: '收付款金额不能为空', trigger: 'blur' }],
        currency: [{ required: true, message: '币种不能为空', trigger: 'blur' }]
      },
      typeState: [ // 账款类别映射关系
        {
          code: '1',
          value: '采购付款'
        },
        {
          code: '2',
          value: '采购退款'
        }
      ],
      currencyType: [ // 币种映射关系
        {
          code: '1',
          value: '人民币'
        }
      ]
    }
  },
  watch: {
  },
  methods: {
    onChose () {
      console.log(5555)
      this.$emit('onChose')
    },
    async init (id, supplierAccount, supplierId, formDisable) {
      this.visible = true
      this.id = id || 0
      this.formDisable = formDisable
      this.fileList = []
      if (id && supplierAccount) {
        this.dataForm = {
          supplierAccountId: id,
          supplierAccountCode: supplierAccount.supplierAccountCode,
          type: supplierAccount.type,
          contractNumber: supplierAccount.contractNumber,
          receivedPaidTime: supplierAccount.receivedPaidTime,
          currency: supplierAccount.currency,
          receivedPaidAmount: supplierAccount.receivedPaidAmount,
          notes: supplierAccount.notes
        }
        supplierAccount.attachList && supplierAccount.attachList.forEach((item) => {
          this.fileList.push({
            name: item.fileName,
            url: item.url,
            id: item.url
          })
        })
      }
      this.dataForm.supplierId = supplierId
      // await getCustomer().then(({data}) => {
      //   if (data && data.code === '200') {
      //     this.optionsCus = data.data
      //   }
      // })
      // if (!id) return
      // await getSaleInvoiceDetail(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
      //         })
      //       })
      //     }
      //   }
      // })
    },
    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
          }
          // let finSalesInvoice = {finSalesInvoice: this.dataForm}
          this.$http({
            url: !this.id ? this.$http.adornUrl(`/biz-service/finance/supplier/account/save`) : this.$http.adornUrl(`/biz-service/finance/supplier/account/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
    }
  }
}
</script>

<style scoped>

</style>