# BatchUpload 批量上传
## 基本用法
与BatchImport作用与使用方法类似，区别在于样式和操作逻辑会有部分区别

::: demo

```html
<template>
  <div class="batch-import">
    <el-card>
      <el-button @click="handleClick">点击上传</el-button>  
      <y-batch-upload
        ref="batchUpload"    
        size="1024"
        :columns="stockColumns"
        :upload-success="uploadSuccess"
        download-url="https://yyx-mall.oss-cn-chengdu.aliyuncs.com/template/订单导入.xlsx"
        @upload="upload"
        @download="handleDownload"
        :beforeImportClick="beforeImportClick"
      >
          <template #tips>
              <p>通过上传订单号和商品，批量生成对应订单商品的调整销退单，多个调整销退单对应一个调整销退入库单</p>
              <p>调退单单号在制作调整采退单时是必须关联字段</p>
          </template>
          <template slot="confirm" style="padding: 0 16px">
              <y-table
                      border
                      :columns="[{
          prop: 'firstCustomer',
          label: '结算主体'
        },
        {
          prop: 'orderNum',
          label: '订单数量'
        },
        {
          prop: 'skuId',
          label: '商品ID'
        },
        {
          prop: 'goodsName',
          label: '商品名称'
        },
        {
          prop: 'adjustRefundNum',
          label: '调退数量'
        },
        {
          prop: 'totalAmount',
          label: '合计金额'
        }]"
                      :data="confirmData"
              >

              </y-table>
          </template>
      </y-batch-upload>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  props: {

  },
  data() {
    return {
      uploadSuccess: false,
      stockColumns: [
        {
          prop: 'firstCategory',
          label: '客户ID',
          type: 'input',
          required: false
        },
        {
          prop: 'secondaryCategory',
          label: 'SKUID',
          type: 'input',
          required: false
        },
        {
          prop: 'productName',
          label: '商品名称',
          type: 'input',
          required: false,
          editable:false,
          cellStyle:(row) => {
            return 'border: solid 1px red;'
          }
        },
        {
          prop: 'location',
          label: '产地（所在地）',
          type: 'input',
          required: false
        },
        {
          prop: 'shelfLife',
          label: '保质期',
          type: 'input',
          required: false
        },
        {
          prop: 'manufactureDate',
          label: '生产日期',
          type: 'input',
          required: false,
          format: 'YYYY-MM-DD'
        },
        {
          prop: 'specification',
          label: '规格',
          type: 'input',
          required: false
        },
        {
          prop: 'unit',
          label: '单位',
          type: 'input',
          required: false
        },
        {
          prop: 'quote',
          label: '报价',
          type: 'input',
          required: false,
          number: true

        },
        {
          prop: 'brand',
          label: '品牌',
          type: 'input',
          required: false
        },
        {
          prop: 'supplierName',
          label: '供应商名称',
          type: 'input',
          required: false
        },
        {
          prop: 'storeCondition',
          label: '储存条件',
          type: 'input',
          required: false
        },
        {
          prop: 'quoteDate',
          label: '报价时间',
          type: 'date-picker',
          required: false,
          pattern:
            /^[1-2][0-9][0-9][0-9][-\.\/][0-1]{0,1}[0-9][-\.\/][0-3]{0,1}[0-9]$/
        },
        {
          prop: 'remark',
          label: '备注',
          type: 'input',
          required: false
        }
      ]
    }
  },
  mounted() {

  },
  methods: {
    handleClick() {
        this.$refs.batchUpload.dialogVisible = true
    },    
    upload(data) {
      this.uploadSuccess = true
      this.$nextTick(() => {
        this.uploadSuccess = false
      })
    },
    beforeImportClick(){
      return Promise.resolve()
    },
    handleDownload(){
      console.log('handleDownload')
    }
  }
}
</script>

<style lang="scss" scoped>
  
</style>
```

:::

### Attributes

| 参数          | 说明                                                                    | 类型     | 可选值 | 默认值 |
| ------------- | ----------------------------------------------------------------------- | -------- | ------ | ------ |
| isStreamline           | 是否简易风格                                                     | boolean | true/false     | false    |
| hasEditButton     | 是否可以编辑                                                                | boolean  | true/false     | false    |
| btnText     | 导入按钮文案                                                                | string  | -    | 批量导入    |
| downloadText     | 下载模板按钮文案                                                                | string  | -    | 下载模板    |
| isExport     | 是否显示导出模板按钮                                                                | boolean | true/false     | true    |
| size     | 上传文件大小限制                                                                | String, Number | -     | -    |
| downloadUrl     | 下载模板超链接                                                                | String | -     | -    |
| uploadSuccess     | 是否上传成功                                                                | boolean | true/false     | false    |
| columns     | 数据列                                                                | array |  -     | -    |

### Events

| 事件名称 | 说明                   | 回调参数                               |
| -------- | ---------------------- | -------------------------------------- |
| upload | 确定按钮回调事件 | 表格数据。 |
| download | 下载事件 | 点击下载模板按钮后的回调，可自定义下载事件 |