menduner-admin/src/views/menduner/system/talentMap/index.vue

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" class="!w-240px" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button type="primary" plain @click="handleAdd">
          <Icon icon="ep:plus" class="mr-5px" /> 新增人才
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true">
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="标签个数" align="center" prop="num" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="openDetail(scope.row)">查看</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <TalentForm ref="formRef" @success="getList" />

  <Dialog v-model="dialogVisible" title="新增人才" style="width: 47%;">
    <div style="display: flex;">
      <el-upload
        ref="uploadRef"
        v-model:file-list="fileList"
        :action="uploadUrl"
        :auto-upload="false"
        :data="data"
        :limit="1"
        :on-change="handleChange"
        :on-error="submitFormError"
        :on-exceed="handleExceed"
        :on-success="submitFormSuccess"
        :http-request="httpRequest"
        accept=".pdf"
        drag
        style="flex: 1;"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">上传附件， 将文件拖到此处，或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip" style="color: red">
            提示：仅允许导入 pdf 格式文件！
          </div>
        </template>
      </el-upload>
      <div class="m-l-10px info" @click="dialogVisible = false; formRef.open()">
        点击填写基本信息
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import download from '@/utils/download'
import { commonApi } from '@/api/menduner/common'
import File from '@/components/Upload/file.vue'
import { useUpload } from '@/components/UploadFile/src/useUpload'

/** 猎寻服务 列表 */
defineOptions({ name: 'TalentMap' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
})
const formRef = ref()
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const uploadRef = ref()
const dialogVisible = ref(false)
const data = ref({ path: '' })
const fileList = ref([]) // 文件列表
const { uploadUrl, httpRequest } = useUpload()

/** 上传错误提示 */
const submitFormError = () => {
  message.error('上传失败，请您重新上传！')
}

/** 文件数超出提示 */
const handleExceed = () => {
  message.error('最多只能上传一个文件！')
}

const submitFormSuccess = () => {
  // 清理
  dialogVisible.value = false
  unref(uploadRef)?.clearFiles()
}

// 文件上传
const handleChange = (file) => {
  data.value.path = file.name
  unref(uploadRef)?.submit()
  if (fileList.value.length) handleUploadResume(fileList.value[0].response.data, fileList.value[0].name)
}

/** 查询列表 */
const getList = async () => {
  // list.value = [{id: '1843909421273563137', userId: '800018973600124928', name: '测试', num: '23'}]
  loading.value = false
  
  // loading.value = true
  // try {
  //   const data = await HuntApi.getHuntPage(queryParams)
  //   // list.value = data.list
  //   list.value = [{name: '测试'}]
  //   total.value = data.total
  // } finally {
  //   loading.value = false
  // }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 打开用户详情 */
const { push } = useRouter()
const openDetail = ({ id, userId }) => {
  push({ name: 'TalentMapDetail', query: { id, userId } })
}

/** 删除按钮操作 */
const handleDelete = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    // await HuntApi.deleteHunt(id)
    // message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

const handleAdd = () => {
  dialogVisible.value = true
}

// 上传附件
const handleUploadResume = async (url, filename) => {
  if (url) {
    const res = await commonApi.resumeParser({ fileUrl: url })
    if (res?.status?.code === 200) {
      localStorage.setItem('resumeParserData', JSON.stringify({
        data: res.result,
        url: url,
        filename: filename,
        id: Date.now()
      }))
      // 路由跳转
      push({ name: 'TalentMapDetail' })
    }
  }
}
/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss">
.info {
  display: flex;
  width: 50%;
  height: 99px;
  cursor: pointer; 
  border: 1px dashed #ccc; 
  border-radius: 6px; 
  align-items: center; 
  justify-content: center;

  &:hover {
    border: 1px dashed #409eff;
  }
}
</style>