上传

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

@@ -3,58 +3,58 @@
     <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" :offset="0">
-          <el-form-item label="年月" prop="yearmonth">
-            <el-date-picker v-model="formData.yearmonth" type="month" placeholder="选择年月" />
+          <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="12" :offset="0">
           <el-form-item label="导入奖金">
-            <UploadFile
-              v-model="formData.files1"
-              :limit="1"
-              :fileType="['xls', 'xlsx']"
-              accept=".xls,.xlsx"
-              :isShowTip="false"
-            >
-              <template #tip>
-                <div>
-                  <el-link
-                    type="primary"
-                    :underline="false"
-                    href="https://ss-cloud.ahduima.com/1011/1808052748575576064.pdf"
-                    target="_blank"
-                  >
-                    点击下载模板文件
-                  </el-link>
-                </div>
-              </template>
-            </UploadFile>
+            <div>
+              <el-upload
+                ref="rewardFile"
+                action="#"
+                :limit="1"
+                accept=".xls,.xlsx"
+                :before-upload="fileBeforeUpload"
+                :http-request="rewardUpload"
+              >
+                <el-button type="primary">
+                  <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                </el-button>
+              </el-upload>
+              <el-link type="primary" :underline="false" @click="downloadTemplateFile(1)">
+                点击下载模板文件
+              </el-link>
+            </div>
           </el-form-item>
         </el-col>
         <el-col :span="12" :offset="0">
-          <el-form-item label="导入考勤" prop="files2">
-            <UploadFile
-              v-model="formData.files2"
-              :limit="1"
-              :fileType="['xls', 'xlsx']"
-              accept=".xls,.xlsx"
-              :isShowTip="false"
-            >
-              <template #tip>
-                <div>
-                  <el-link
-                    type="primary"
-                    :underline="false"
-                    href="https://ss-cloud.ahduima.com/1011/1808052748575576064.pdf"
-                    target="_blank"
-                  >
-                    点击下载模板文件
-                  </el-link>
-                </div>
-              </template>
-            </UploadFile>
+          <el-form-item label="导入考勤" prop="attendanceFile">
+            <div>
+              <el-upload
+                ref="attendanceFile"
+                action="#"
+                :limit="1"
+                accept=".xls,.xlsx"
+                :before-upload="fileBeforeUpload"
+                :http-request="attendanceUpload"
+              >
+                <el-button type="primary">
+                  <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                </el-button>
+              </el-upload>
+              <el-link type="primary" :underline="false" @click="downloadTemplateFile(2)">
+                点击下载模板文件
+              </el-link>
+            </div>
           </el-form-item>
         </el-col>
       </el-row>
@@ -69,6 +69,10 @@
 </template>
 
 <script setup name="DialogCreateSalary">
+import * as SalaryApi from '@/api/home/salary.js'
+import { downloadFile } from '@/utils/download'
+
+const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false)
 
 const formData = ref({})
@@ -76,8 +80,7 @@ const formData = ref({})
 const formLoading = ref(false)
 
 const rules = {
-  yearmonth: { required: true, message: '年月不可为空', trigger: 'blur,change' },
-  files2: { required: true, message: '考勤文件不可为空', trigger: 'blur,change' }
+  period: { required: true, message: '年月不可为空', trigger: 'blur,change' }
 }
 
 function open() {
@@ -86,16 +89,72 @@ function open() {
 }
 
 function resetForm() {
+  const month = `${new Date().getMonth() + 1}`
   formData.value = {
-    yearmonth: new Date().getFullYear(),
-    files1: '',
-    files2: ''
+    period: `${new Date().getFullYear()}-${month.padStart(2, '0')}`
   }
 }
 
 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('attendanceFile')) {
+    message.info('请导入考勤表！')
+    return
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    fd.value.append('period', formData.value.period)
+    await SalaryApi.createSalarySlip(fd.value)
+    message.success('生成成功')
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+async function downloadTemplateFile(type) {
+  let data
+  if (type == 1) {
+    data = await SalaryApi.getLinkReward()
+    downloadFile(data, '奖金模板.xls')
+  } else if (type == 2) {
+    data = await SalaryApi.getLinkAttendance()
+    downloadFile(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(new FormData())
+
+function rewardUpload(data) {
+  fd.value.append('rewardSalaryFile', data.file)
+}
+
+function attendanceUpload(data) {
+  fd.value.append('attendanceFile', data.file)
+}
 </script>
 
 <style lang="scss" scoped></style>