上传

src/views/Home/Salary/Comp/DialogCreateSalary.vue

@@ -16,7 +16,7 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12" :offset="0">
-          <el-form-item label="导入奖金">
+          <el-form-item label="导入工资">
             <div>
               <el-upload
                 ref="rewardFile"
@@ -70,7 +70,7 @@
 
 <script setup name="DialogCreateSalary">
 import * as SalaryApi from '@/api/home/salary.js'
-import { downloadFile } from '@/utils/download'
+import download from '@/utils/download'
 
 const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false)
@@ -104,13 +104,10 @@ async function handleSave() {
   if (!formRef.value) return
   const valid = await formRef.value.validate()
   if (!valid) return
-  if (!fd.value.get('attendanceFile')) {
-    message.info('请导入考勤表！')
-    return
-  }
   // 提交请求
   formLoading.value = true
   try {
+    fd.value.delete('period')
     fd.value.append('period', formData.value.period)
     await SalaryApi.createSalarySlip(fd.value)
     message.success('生成成功')
@@ -126,10 +123,11 @@ async function downloadTemplateFile(type) {
   let data
   if (type == 1) {
     data = await SalaryApi.getLinkReward()
-    downloadFile(data, '奖金模板.xls')
+    console.log(data)
+    download.excel(data, '奖金模板.xls')
   } else if (type == 2) {
     data = await SalaryApi.getLinkAttendance()
-    downloadFile(data, '考勤模板.xls')
+    download.excel(data, '考勤模板.xls')
   }
 }
 

src/views/Home/Salary/Comp/DialogSalaryImport.vue

@@ -1,6 +1,6 @@
 <template>
-  <Dialog v-model="dialogVisible" title="导入历史工资条" style="width: 600px">
-    <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px">
+  <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">
@@ -16,22 +16,24 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="24" :offset="0">
-          <el-form-item label="导入工资条">
-            <UploadFile
-              v-model="formData.rewardSalaryFile"
-              :limit="1"
-              :fileType="['xls', 'xlsx']"
-              accept=".xls,.xlsx"
-              :isShowTip="false"
-            >
-              <template #tip>
-                <div>
-                  <el-link type="primary" :underline="false" @click="downloadTemplateFile(3)">
-                    点击下载模板文件
-                  </el-link>
-                </div>
-              </template>
-            </UploadFile>
+          <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>
@@ -39,7 +41,7 @@
     <template #footer>
       <span>
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :disabled="formLoading" @click="handleSave"> 确认生成 </el-button>
+        <el-button type="primary" :disabled="formLoading" @click="handleSave">确 认</el-button>
       </span>
     </template>
   </Dialog>
@@ -47,8 +49,9 @@
 
 <script setup name="DialogSalaryImport">
 import * as SalaryApi from '@/api/home/salary.js'
-import { downloadFile } from '@/utils/download'
+import download from '@/utils/download'
 
+const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false)
 
 const formData = ref({})
@@ -56,8 +59,7 @@ const formData = ref({})
 const formLoading = ref(false)
 
 const rules = {
-  period: { required: true, message: '年月不可为空', trigger: 'blur,change' },
-  attendanceFile: { required: true, message: '考勤文件不可为空', trigger: 'blur,change' }
+  period: { required: true, message: '年月不可为空', trigger: 'blur,change' }
 }
 
 function open() {
@@ -67,23 +69,66 @@ function open() {
 
 function resetForm() {
   formData.value = {
-    period: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
-    rewardSalaryFile: '',
-    attendanceFile: ''
+    period: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`
   }
 }
 
 defineExpose({ open })
 
-function handleSave() {}
+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()
-    downloadFile(data, '工资条模板.xls')
+    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>