ss-oa-manage-web/src/views/Home/Salary/Comp/DialogSalaryImport.vue

<template>
  <Dialog v-model="dialogVisible" title="导入历史工资条" style="width: 500px">
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <el-form-item label="年月" prop="period">
            <el-date-picker
              v-model="formData.period"
              type="month"
              placeholder="选择年月"
              format="YYYY-MM"
              value-format="YYYY-MM"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <el-form-item label="工资文件">
            <div>
              <el-upload
                ref="salaryFile"
                action="#"
                :limit="1"
                accept=".xls,.xlsx"
                :before-upload="fileBeforeUpload"
                :http-request="salaryUpload"
              >
                <el-button type="primary">
                  <Icon icon="ep:upload" class="mr-5px" /> 点击上传
                </el-button>
              </el-upload>
              <el-link type="primary" :underline="false" @click="downloadTemplateFile(3)">
                点击下载模板文件
              </el-link>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="formLoading" @click="handleSave">确 认</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script setup name="DialogSalaryImport">
import * as SalaryApi from '@/api/home/salary.js'
import download from '@/utils/download'

const message = useMessage() // 消息弹窗
const dialogVisible = ref(false)

const formData = ref({})

const formLoading = ref(false)

const rules = {
  period: { required: true, message: '年月不可为空', trigger: 'blur,change' }
}

function open() {
  dialogVisible.value = true
  resetForm()
}

function resetForm() {
  formData.value = {
    period: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`
  }
}

defineExpose({ open })

const emit = defineEmits(['success'])
const formRef = ref()
async function handleSave() {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  if (!fd.value.get('file')) {
    message.info('请上传工资文件！')
    return
  }

  // 提交请求
  formLoading.value = true
  try {
    fd.value.delete('period')
    fd.value.append('period', formData.value.period)
    await SalaryApi.importSalarySlip(fd.value)
    message.success('导入成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

async function downloadTemplateFile(type) {
  let data
  if (type == 3) {
    data = await SalaryApi.getLinkHistorySalary()
    download.excel(data, '工资条模板.xls')
  }
}

const fileBeforeUpload = (file) => {
  let format = '.' + file.name.split('.')[1]
  if (!['.xls', '.xlsx'].includes(format)) {
    message.error(`请上传指定格式".xls,.xlsx"文件`)
    return false
  }
  let isRightSize = file.size / 1024 / 1024 < 20
  if (!isRightSize) {
    message.error('文件大小超过 20MB')
  }
  return isRightSize
}

const fd = ref()

function salaryUpload(data) {
  fd.value = new FormData()
  fd.value.append('file', data.file)
}
</script>

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