改为表格

components.d.ts

@@ -32,7 +32,6 @@ declare module 'vue' {
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElTree: typeof import('element-plus/es')['ElTree']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     File: typeof import('./src/components/Upload/file.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']

src/views/recruit/personal/PersonalCenter/resume/attachment/index.vue

@@ -6,64 +6,25 @@
     </div>
     <p class="font-size-14 color-999">最多只能上传5份附件简历</p>
     <div v-if="attachmentList.length" class="mt-5">
-      <table style="width: 100%;">
-        <tr>
-          <th>名称</th>
-          <th>文件类型</th>
-          <th>上传时间</th>
-          <th>操作</th>
-        </tr>
-        <tr
-          v-for="(k, i) in attachmentList" :key="i"
-          :class="['mx-n2', 'px-2']"
-          @click.self="checkboxClick(i, !k.choose)"
-        >
-          <td>
-            <div class="d-flex flex" style="max-width: 250px;">
-              <v-checkbox-btn
-                v-if="props.analysis"
-                v-model="k.choose"
-                :label="k.title"
-                color="primary"
-                class="pe-2"
-                style="color: #333;"
-                @update:modelValue="bool => checkboxClick(i, bool)"
-              ></v-checkbox-btn>
-              <!-- <span @click="checkboxClick(i, !k.choose)">{{ k.title }}</span> -->
-              <span v-else>{{ k.title }}</span>
-            </div>
-          </td>
-          <td style="text-align: center;">.{{ k.fileType }}</td>
-          <td style="text-align: center;">{{ timesTampChange(k.createTime, 'Y-M-D h:m') }}</td>
-          <td style="text-align: center; width: 268px;">
-            <div>
-              <v-btn variant="text" color="primary" prepend-icon="mdi-eye-outline" @click="previewFile(k.url)">预览</v-btn>
-              <v-btn variant="text" color="primary" prepend-icon="mdi-arrow-down-bold-outline" @click="handleDownload(k)">下载</v-btn>
-              <v-btn variant="text" color="primary" prepend-icon="mdi-trash-can-outline" @click="handleDelete(k)">{{ $t('common.delete') }}</v-btn>
-            </div>
-          </td>
-        </tr>
-      </table>
-
-      <!-- <div
-        :class="['position-item', 'mx-n2', 'px-2']" 
-        v-for="(k, i) in attachmentList" 
-        :key="i" 
-        @mouseenter="k.active = true" 
-        @mouseleave="k.active = false"
-        @click.self="checkboxClick(i, !k.choose)"
+      <CtTable
+        class="mt-3"
+        :items="attachmentList"
+        :headers="headers"
+        :loading="false"
+        :elevation="0"
+        :isTools="false"
+        :showPage="false"
+        :showSelect="props.analysis"
+        selectStrategy="single"
+        itemKey="id"
+        @selected="handleSelected"
       >
-        <div class="d-flex">
-          <v-checkbox-btn v-if="props.analysis" v-model="k.choose" color="primary" class="pe-2" @update:modelValue="bool => checkboxClick(i, bool)"></v-checkbox-btn>
-          <span @click="checkboxClick(i, !k.choose)">{{ k.title }}</span>
-        </div>
-        <div class="float-right" v-if="k.active">
-          <v-btn variant="text" color="primary" prepend-icon="mdi-eye-outline" @click="previewFile(k.url)">预览</v-btn>
-          <v-btn variant="text" color="primary" prepend-icon="mdi-arrow-down-bold-outline" @click="handleDownload(k)">下载</v-btn>
-          <v-btn variant="text" color="primary" prepend-icon="mdi-trash-can-outline" @click="handleDelete(k)">{{ $t('common.delete') }}</v-btn>
-        </div>
-      </div> -->
-
+        <template #actions="{ item }">
+          <v-btn color="primary" @click.stop="previewFile(item0.url)" variant="text">预览</v-btn>
+          <v-btn color="error" @click.stop="handleDownload(item)" variant="text">下载</v-btn>
+          <v-btn v-if="!item.defaultStatus" color="success" @click.stop="handleDelete(item)" variant="text">{{ $t('common.delete') }}</v-btn>
+        </template>
+      </CtTable>
       <div v-if="props.analysis" class="d-flex  flex-column align-center mt-15">
         <v-btn class="buttons" color="primary" @click="handleAnalysis">开始解析</v-btn>
         <v-btn class="mt-2" variant="text" color="primary" to="/recruit/personal/personalCenter/resume/online">返回在线简历</v-btn>
@@ -111,6 +72,13 @@ const props = defineProps({
 
 const { t } = useI18n()
 
+const headers = [
+  { title: '名称', key: 'title', sortable: false, width: '20' },
+  { title: '文件类型', key: 'fileType', sortable: false },
+  { title: '上传时间', key: 'createTime', sortable: false, value: item => timesTampChange(item.createTime, 'Y-M-D h:m') },
+  { title: '操作', key: 'actions', sortable: false }
+]
+
 const CtFormRef = ref()
 const formItems = ref({
   options: [
@@ -205,14 +173,10 @@ const handleDownload = (k) => {
 }
 
 const fileUrl = ref('')
-const checkboxClick = (i, bool) => {
-  if (!props.analysis) return
-  let item = null
-  attachmentList.value.forEach((e, index) => {
-    e.choose = i === index ? bool : false
-    if (e.choose) item = e
-  })
+const handleSelected = (e) => {
+  const item = e?.length ? attachmentList.value.find(k => k.id === e[0]) : null
   if (item?.url) fileUrl.value = encodeURIComponent(item.url)
+  else fileUrl.value = ''
 }
 
 const handleAnalysis = () => {