X-web/src/views/modules/order/dispatch-arrived.vue

<template>
  <div>
      <div class="my-title">送达</div>
      <!-- 表单 -->
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
        <el-table :data="dataForm.list" border>
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center">
          </el-table-column>
          <el-table-column
            prop="productName"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="productSpec"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="型号/规格">
          </el-table-column>
          <el-table-column
            prop="productNumber"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="batchNumber"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="批次号">
          </el-table-column>
          <el-table-column
            prop="deliverCnt"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="price"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="单价">
          </el-table-column>
          <el-table-column
            prop="amount"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="总价">
          </el-table-column>
          <el-table-column
            prop="notes"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="备注">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="arriveCnt"
            header-align="center"
            align="center"
            min-width="140"
            :show-tooltip-when-overflow="true"
            label="送达数量">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.arriveCnt" size="mini"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="签收附件" prop="attachList">
            <upload-component :accept="'*'" v-model="dataForm.attachList" />
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" v-reClick>确定</el-button>
      </span>
  </div>
</template>

<script>
  import UploadComponent from '../common/upload-component-v2'

export default {
    name: 'dispatch-arrived',
    components: { UploadComponent },
    data () {
      return {
        visible: false,
        id: 0,
        fileList: [],
        dataForm: {
          list:[],
          attachList:[]
        },
        max: 0,
        dataRule: {
          attachList: [{ required: true, message: '请上传签收附件', trigger: 'blur' }]
        }
      }
    },
    methods: {
      onChose () {
        this.visible = false
        this.$emit('onChose')
      },
      async init (id) {
        this.id = id
        this.getDetails()
      },
      getDetails () {
        this.$http({
            url: this.$http.adornUrl(`/biz-service/deliver/info/${this.id}`),
            method: 'get',
          }).then(({data}) => {
            if (data && data.code === '200') {
                this.dataForm.list = data.data
                this.dataForm.list.map(t => t.arriveCnt = t.deliverCnt)
            } else {
                this.$message.error(data.msg)
            }
          })
      },
      uploadSuccess (fileList) {
        this.fileList = fileList
      },
      validateField (type) {
        this.$refs.dataForm.validateField(type)
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let submitData = this.dataForm.list.map(t => ({
              arriveCnt: t.arriveCnt,
              deliverId: t.deliverId,
              contractId: t.contractId
            }))
            let attachList = []

            for (let i = 0; i < this.dataForm.attachList.length; i++) {
              attachList.push({
                fileName: this.dataForm.attachList[i].name,
                url: this.dataForm.attachList[i].url
              })
            }

            submitData.map(t => t.attachList = attachList)
   
            this.$http({
              url: this.$http.adornUrl(`/biz-service/deliver/arrive`),
              method: 'post',
              data: this.$http.adornData(submitData)
            }).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)
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
/deep/ .el-input-number--mini {
    width:100px;
}
</style>