附件管理

src/locales/en.js

@@ -14,7 +14,9 @@ export default {
     addMsg: 'New successfully added',
     delMsg: 'Delete successful',
     uploadSucMsg: 'Upload successful',
-    uploadErrMsg: 'Upload failed'
+    uploadErrMsg: 'Upload failed',
+    fileSizeExceed: 'The file size cannot exceed 10M',
+    fileFormatIncorrect: 'The uploaded file format is incorrect'
   },
   sys: {
     api: {
@@ -103,6 +105,8 @@ export default {
     firstWorkTime: 'First Work Time',
     dataDefaultPrompt: 'Please fill in your ',
     expand: 'Expand',
-    retract: 'Retract'
+    retract: 'Retract',
+    deleteAttachment: 'Are you sure to delete this attachment?',
+    uploadFiveCopies: 'Upload up to 5 copies'
   }
 }

src/locales/zh-CN.js

@@ -14,7 +14,9 @@ export default {
     addMsg: '新增成功',
     delMsg: '删除成功',
     uploadSucMsg: '上传成功',
-    uploadErrMsg: '上传失败'
+    uploadErrMsg: '上传失败',
+    fileSizeExceed: '文件大小不能超过10M',
+    fileFormatIncorrect: '上传的文件格式不正确'
   },
   sys: {
     api: {
@@ -103,6 +105,8 @@ export default {
     firstWorkTime: '首次工作时间',
     dataDefaultPrompt: '请填写您的',
     expand: '展开',
-    retract: '收起'
+    retract: '收起',
+    deleteAttachment: '是否确认删除此附件？',
+    uploadFiveCopies: '最多上传5份'
   }
 }

src/views/PersonalCenter/dynamic/right.vue

@@ -13,15 +13,23 @@
       <div>
         <span class="title">附件简历</span>
         <span class="more-text">最多上传5份</span>
-        <span class="upload--text cursor-pointer" @click="handleUpload">上传</span>
+        <span class="upload--text cursor-pointer" @click="openFileInput">
+          上传
+          <input
+            type="file"
+            ref="fileInput"
+            accept=".pdf, .doc, .docx"
+            style="display: none;"
+            @change="handleUploadFile"
+          />
+        </span>
       </div>
-      <div class="d-flex attachment-item my-2 cursor-pointer" v-for="(k, i) in attachmentList" :key="i">
+      <div class="d-flex attachment-item my-2 cursor-pointer" v-for="k in attachmentList" :key="k.id">
         <v-icon color="primary">mdi-file-account</v-icon>
-        <div class="file-name ellipsis ml-2">{{ k.file_name }}</div>
-        <v-icon class="ml-8" color="error">mdi-trash-can-outline</v-icon>
+        <div class="file-name ellipsis ml-2">{{ k.title }}</div>
+        <!-- <v-icon class="ml-8 mr-2" color="primary" @click="handleDownload(k)">mdi-download-box-outline</v-icon> -->
+        <v-icon class="ml-8" color="error" @click="handleDelete(k)">mdi-trash-can-outline</v-icon>
       </div>
-      <div class="border-bottom-dashed my-3"></div>
-      <div class="last-update">最后更新于2024-05-23 12:20:25</div>
     </div>
   </div>
 </template>
@@ -29,30 +37,83 @@
 <script setup>
 defineOptions({ name: 'personal-center-right'})
 import { ref } from 'vue'
-import { getPersonResumeCv } from '@/api/resume'
+import { uploadFile } from '@/api/common'
+import { getPersonResumeCv, savePersonResumeCv, deletePersonResumeCv } from '@/api/resume'
+import { useI18n } from '@/hooks/web/useI18n'
+import Snackbar from '@/plugins/snackbar'
+import Confirm from '@/plugins/confirm'
 
+const { t } = useI18n()
 const resumeList = [
   { icon: 'mdi-upload', title: '置顶简历', desc: '增加更多曝光度' },
   { icon: 'mdi-refresh', title: '刷新简历', desc: '提升简历活跃度' }
 ]
-const attachmentList = [
-  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
-  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
-  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
-  { file_name: '陈芊芊-Web前端开发工程师-15425236412' },
-  { file_name: '陈芊芊-Web前端开发工程师-15425236412' }
-]
-const list = ref([])
+
+// 获取附件
+const attachmentList = ref([])
 const getList = async () => {
   const data = await getPersonResumeCv()
-  console.log(data, list.value, 'get-list')
+  attachmentList.value = data
 }
 getList()
+
+// 选择文件
+const fileInput = ref()
+const clicked = ref(false)
+const openFileInput = () => {
+  if (attachmentList.value.length >= 5) return Snackbar.warning(t('resume.uploadFiveCopies'))
+  if (clicked.value) return
+  clicked.value = true
+  fileInput.value.click()
+  clicked.value = false
+}
+
+// 上传附件
+const typeList = ['pdf', 'doc', 'docx']
+const handleUploadFile = async (e) => {
+  const file = e.target.files[0]
+  const size = file.size
+  if (size / (1024*1024) > 10) {
+    Snackbar.warning(t('common.fileSizeExceed'))
+    return
+  }
+  const arr = file.name.split('.')
+  if (typeList.indexOf(arr[arr.length - 1]) < 0) {
+    Snackbar.warning(t('common.fileFormatIncorrect'))
+    return
+  }
+  const formData = new FormData()
+  formData.append('file', file)
+  const { data } = await uploadFile(formData)
+  if (!data) return
+  Snackbar.success(t('common.uploadSucMsg'))
+  await savePersonResumeCv({ title: file.name, url: data })
+  await getList()
+}
+
+// 删除
+const handleDelete = ({ id }) => {
+  Confirm(t('common.confirmTitle'), t('resume.deleteAttachment')).then(async () => {
+    await deletePersonResumeCv(id)
+    Snackbar.success(t('common.delMsg'))
+    getList()
+  })
+}
+
+// const handleDownload = (k) => {
+//   const link = document.createElement('a')
+//   link.href = k.url
+//   link.setAttribute('download', '')
+//   document.body.appendChild(link)
+//   link.click()
+//   document.body.removeChild(link)
+// }
+
 </script>
 
 <style scoped lang="scss">
 .radius {
-  border-radius: 8px
+  border-radius: 8px;
 }
 .title {
   font-weight: 600;