crm_extend/src/pages/payment-record3/components/upload.vue

<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="750px"
      title="Upload Statement"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <div
        v-loading="loading"
        class="flex items-start"
      >
        <el-form
          ref="mainForm"
          :rules="formRule"
          class="flex-auto"
          :model="form"
          label-width="150px"
        >
          <el-form-item
            label="Statement Name"
            prop="statement_name"
          >
            <el-input
              v-model="form.statement_name"
              style="width: 190px"
              type="textarea"
              :rows="3"
            />
          </el-form-item>

          <el-form-item label="Currency">
            <el-select v-model="form.currency">
              <el-option
                v-for="option in currencyList as IOptionItem[]"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="Payment Type">
            <el-select
              v-model="form.paymentType"
              disabled
            >
              <el-option
                v-for="option in paymentOption"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.paymentType === '国际运费'"
            label="Weight Unit"
          >
            <el-select v-model="form.weightUnit">
              <el-option
                v-for="option in weightOption"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="Upload Mode">
            <el-select
              v-model="form.mode"
              disabled
            >
              <el-option
                v-for="option in uploadOption"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div
          class="flex-auto drag-area"
          @dragenter="stop"
          @dragover="stop"
          @dragleave="stop"
          @drop="processExcel"
        >
          <label for="fileInput">
            <div
              class="flex flex-col items-stretch"
              style="text-align: center; padding: 44px 20px; cursor: pointer"
            >
              <div>
                <el-icon
                  size="60px"
                  color="#999"
                >
                  <upload-filled />
                </el-icon>
              </div>

              <div class="el-upload__text">拖动文件到这或者点击选择</div>
              <br />
              <div class="el-upload__text">
                注意, 点确认前确保Payment Type选了正确的类型;
              </div>
              <br />
              <div class="el-upload">
                单个Excel数据最好控制在100行内, 处理起来会慢;
              </div>
              <br />
              <div
                v-if="fileContainer"
                style="color: green"
              >
                读取文件成功!
              </div>
            </div>
          </label>
        </div>
      </div>
      <br />
      <div class="flex justify-end">
        <el-button
          :loading="loading"
          @click="handleClose"
        >
          关闭
        </el-button>
        <el-tooltip content="注意, 点确认前确保Payment Type选了正确的类型">
          <el-button
            type="primary"
            :loading="loading"
            @click="next(mainForm)"
          >
            确认
          </el-button>
        </el-tooltip>
      </div>
    </el-dialog>
    <!-- multiple -->
    <input
      id="fileInput"
      type="file"
      style="display: none"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
      @change="processExcel"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'DialogUploadExcel',
})
</script>
<script lang="ts" setup>
import { watchEffect, ref } from 'vue'
import {
  ElDialog,
  ElMessage,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElInput,
  ElButton,
  ElIcon,
  ElTooltip,
} from 'element-plus'

import { UploadFilled } from '@element-plus/icons-vue'
import * as XLSX from 'xlsx'
import type { FormInstance, FormRules } from 'element-plus'
import { ITrackingNumberItem, IOptionItem, } from '../inteface'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  currencyList: {
    type: Array,
    default: () => {
      return []
    },
  },
  defaultFileType: {
    type: String,
    default: '国际运费',
  },
})

const emit = defineEmits(['update:visible', 'update-table-data'])

const dialogVisible = ref(false)

watchEffect(() => {
  dialogVisible.value = props.visible
})

const tableData = ref([] as any[])

const handleClose = function (done: any) {
  emit('update:visible', false)
  tableData.value = []
  form.value = {
    statement_name: '',
    currency: 'CNY',
    mode: 'Replace',
    paymentType: props.defaultFileType,
    weightUnit: 'Kg',
  }
  const target = document.getElementById('fileInput') as HTMLInputElement
  if (target) {
    target.value = ''
  }
  fileContainer.value = null

  if (typeof done === 'function') {
    done()
  }
}
const mainForm = ref<FormInstance>()
const formRule = ref<FormRules>({
  statement_name: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
})
const form = ref({
  statement_name: '',
  currency: 'CNY',
  mode: 'Replace',
  paymentType: props.defaultFileType,
  weightUnit: 'Kg',
})
watchEffect(() => {
  form.value.paymentType = props.defaultFileType
})
const uploadOption = [
  {
    label: '追加(Append)',
    value: 'Append',
  },
  {
    label: '替换(Replace)',
    value: 'Replace',
  },
]

const paymentOption = [
  {
    label: '国际运费',
    value: '国际运费',
  },
]

const weightOption = [
  {
    label: 'Kg',
    value: 'Kg',
  },
  {
    label: 'Lb',
    value: 'Lb',
  },
]

const stop = (e: any) => {
  e.preventDefault()
  e.stopPropagation()
}
const fileContainer = ref(null as any)
const processExcel = (event: any) => {
  const files = event.target.files || event.dataTransfer.files

  let str = ''
  tableData.value = []
  try {
    for (let i = 0; i < files.length; i++) {
      if (i === files.length - 1) {
        fileContainer.value = files[i]
      }
      if (
        ![
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          'application/vnd.ms-excel',
        ].includes(files[i].type)
      ) {
        ElMessage.error('读取数据出错, 请确认选择了正确的Excel文件')
        return
      }
      str =
        str +
        `${str.length ? ', ' : ''}` +
        (files[i].name.replace(/\.xlsx?/, '') || 'unNameFile')
    }

    form.value.statement_name = str
  } catch (error) {
    console.log('读取文件出错:', error)
  }

  event.preventDefault()
  event.stopPropagation()
}
const loading = ref(false)
const next = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true

      try {
        const fileReader = new FileReader()

        fileReader.onload = (e: any) => {
          const data = XLSX.read(e.target.result, { type: 'binary' })
          // 重命名列名
          if (form.value.paymentType === '国际运费') {
            // todo
            const jsonData = XLSX.utils.sheet_to_json(
              data.Sheets[data.SheetNames[0]],
            ) as ITrackingNumberItem[]
            jsonData.forEach((i) => {
              tableData.value.push({
                ...i,
                Weight_Unit: form.value.weightUnit,
                Currency: form.value.currency,
                payment_type: form.value.paymentType,
                statement_name: form.value.statement_name,
              })
            })
          }

          let result = {
            mode: form.value.mode,
            data: tableData.value,
          }
          emit('update-table-data', result, fileContainer.value)
          handleClose(false)
        }
        fileReader.readAsBinaryString(fileContainer.value)
      } catch (e) {
        console.log(e, '处理文件出错')
      }

      loading.value = false
    } else {
      console.log('check form has not pass!', fields)
      ElMessage.error('请检查表单必填项')
    }
  })
}

form.value.paymentType = props.defaultFileType
</script>

<style lang="scss" scoped>
.drag-area {
  height: 240px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 24px;
}
</style>