样式备份

src/views/recruit/enterprise/resumeManagement/talentPool/index copy.vue

@@ -0,0 +1,355 @@
+<!-- 样式备份 -->
+<template>
+  <v-card class="card-box pa-5">
+    <div class="d-flex justify-space-between">
+      <TextUI v-if="showTextUI" :item="textItem" @enter="handleEnter" @appendInnerClick="handleEnter"></TextUI>
+      <div></div>
+      <v-btn color="primary" prependIcon="mdi-filter-multiple-outline" class="half-button" variant="tonal" @click="openDrawer">筛选</v-btn>
+    </div>
+    <div v-if="items.length && showTextUI" class="d-flex align-center" style="margin-left: 14px;">
+      <v-checkbox v-model="selectAll" :label="!selectAll ? '全选' : `已选中${selectList.length}条`" hide-details color="primary" @update:model-value="handleChangeSelectAll"></v-checkbox>
+      <v-btn class="ml-8" :disabled="!selectAll" color="primary" variant="tonal" size="small">邀请面试</v-btn>
+      <v-btn class="mx-3" :disabled="!selectAll" color="primary" variant="tonal" size="small">简历回复</v-btn>
+      <v-btn :disabled="!selectAll" color="primary" variant="tonal" size="small">批量导出</v-btn>
+      <v-btn class="mx-3" :disabled="!selectAll" color="primary" variant="tonal" size="small">踢出人才库</v-btn>
+      <v-btn :disabled="!selectAll" color="primary" variant="tonal" size="small">移动到回收站</v-btn>
+      <v-btn class="ml-3" :disabled="!selectAll" color="primary" variant="tonal" size="small">加入黑名单</v-btn>
+    </div>
+    <div v-if="items.length" class="mt-3">
+      <div v-for="val in items" :key="val.id" class="list-item mb-3">
+        <div class="top">
+          <v-checkbox class="mr-5" v-model="val.select" color="primary" density="compact" hide-details @update:model-value="handleChangeSelect"></v-checkbox>
+          <span>应聘/意向职位：{{ val.job.name }}</span>
+          <span class="mx-10">加入时间：{{ val.createTime }}</span>
+          <span>人才分类：{{ val.type }}</span>
+        </div>
+        <div @click.stop="talentPoolDetails(val)" class="px-5 py-3 d-flex justify-space-between align-center cursor-pointer">
+          <div class="d-flex">
+            <v-badge
+              bordered
+              offset-x="6"
+              offset-y="44"
+              :color="val.sex ? (val.sex === '1' ? '#1867c0' : 'error') : 'error'"
+              :icon="val.sex ? (val.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'">
+              <v-avatar size="large" :image="val.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
+            </v-badge>
+            <div class="ml-5">
+              <div class="user-name">{{ val.name }}</div>
+              <div class="mt-2 user-info">
+                <span v-for="(k, i) in dict" :key="k">
+                  {{ val[k] }}
+                  <span v-if="i !== dict.length - 1" class="mx-3">|</span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div>
+            <!-- <v-btn color="primary" variant="tonal" @click.stop="{}">和TA聊聊</v-btn>
+            <v-btn class="ml-3" color="primary" @click.stop="{}">邀请面试</v-btn> -->
+            <v-btn class="ml-3" color="primary" variant="tonal" @click.stop="handleRemove(val)">踢出人才库</v-btn>
+          </div>
+        </div>
+        <div class="d-flex mx-5 bottom cursor-pointer">
+          <div class="experience" v-if="val.exp.length">
+            <div class="second-title">工作经验</div>
+            <v-timeline density="compact" align="start" side="end" truncate-line="both">
+              <v-timeline-item v-for="(j, i) in val.exp" :key="i" dot-color="primary" size="small">
+                <div class="timeline-item mt-1">
+                  <div>{{ j.startTime }}-{{ j.endTime }} ({{ j.year }})</div>
+                  <div class="timeline-item-name ellipsis">{{ j.name }}</div>
+                  <div class="timeline-item-name ellipsis">{{ j.jobName }}</div>
+                </div>
+              </v-timeline-item>
+            </v-timeline>
+          </div>
+          <div class="edu" v-if="val.edu.length">
+            <div class="second-title">教育经历</div>
+            <v-timeline density="compact" align="start" side="end" truncate-line="both">
+              <v-timeline-item v-for="(j, i) in val.edu" :key="i" dot-color="primary" size="small">
+                <div class="timeline-item mt-1">
+                  <div>{{ j.startTime }}-{{ j.endTime }}</div>
+                  <div class="timeline-item-name ellipsis">{{ j.name }}</div>
+                  <div class="timeline-item-name ellipsis">{{ j.major }}</div>
+                </div>
+              </v-timeline-item>
+            </v-timeline>
+          </div>
+        </div>
+      </div>
+      <CtPagination
+        :total="total"
+        :page="pageInfo.pageNo"
+        :limit="pageInfo.pageSize"
+        @handleChange="handleChangePage"
+      ></CtPagination>
+    </div>
+    <Empty v-else :message="tipsText" :elevation="false" class="mt-15"></Empty>
+
+    <v-navigation-drawer v-model="screen" location="right" absolute temporary width="700">
+      <FilterPage
+        ref="FilterPageRef"
+        @confirm="handleConfirm"
+        @cancel="screen = false"
+      ></FilterPage>
+    </v-navigation-drawer>
+  </v-card>
+</template>
+
+<script setup>
+// import { useRouter } from 'vue-router'
+// const router = useRouter()
+defineOptions({ name: 'enterprise-talent-pool'})
+import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
+import { reactive, ref } from 'vue'
+import Snackbar from '@/plugins/snackbar'
+import TextUI from '@/components/FormUI/TextInput'
+import FilterPage from './components/filter.vue'
+import { dealDictArrayData } from '@/utils/position'
+import { getTalentPoolPage } from '@/api/recruit/enterprise/resumeManagement/talentPool'
+import { removeFormTalentPool } from '@/api/recruit/enterprise/personnel'
+
+
+let query = {}
+const showTextUI = ref(false)
+const screen = ref(false)
+const selectAll = ref(false)
+const selectList = ref([])
+const items = ref([
+  {
+    job: {
+      name: '客房服务员'
+    },
+    createTime: '2026-11-12',
+    type: '默认分类',
+    name: '花城',
+    age: '27岁',
+    expName: '3年经验',
+    areaName: '广州',
+    userId: '1',
+    id: '1793583467288223745',
+    sex: '2',
+    select: false,
+    eduName: '本科',
+    payName: '薪资面议',
+    avatar: 'https://cdn.vuetifyjs.com/images/john.jpg',
+    exp: [
+      {
+        startTime: '2016.05',
+        endTime: '2018.05',
+        year: '2年',
+        name: '广州辞图科技有限公司',
+        jobName: '前台'
+      },
+      {
+        startTime: '2016.05',
+        endTime: '2018.05',
+        year: '2年',
+        name: '广州辞图科技有限公司',
+        jobName: '前台'
+      }
+    ],
+    edu: [
+      {
+        startTime: '2016.05',
+        endTime: '2018.05',
+        name: '广州大学',
+        major: '酒店管理'
+      }
+    ]
+  },
+  {
+    job: {
+      name: '客房服务员'
+    },
+    createTime: '2026-11-12',
+    type: '默认分类',
+    name: '花城',
+    age: '27岁',
+    expName: '3年经验',
+    areaName: '广州',
+    userId: '1',
+    id: '1793583467288223745',
+    sex: '2',
+    select: false,
+    eduName: '本科',
+    payName: '薪资面议',
+    avatar: 'https://cdn.vuetifyjs.com/images/john.jpg',
+    exp: [
+      {
+        startTime: '2016.05',
+        endTime: '2018.05',
+        year: '2年',
+        name: '广州辞图科技有限公司',
+        jobName: '前台'
+      },
+      {
+        startTime: '2016.05',
+        endTime: '2018.05',
+        year: '2年',
+        name: '广州辞图科技有限公司',
+        jobName: '前台'
+      }
+    ],
+    edu: [
+      {
+        startTime: '2016.05',
+        endTime: '2018.05',
+        name: '广州大学',
+        major: '酒店管理'
+      }
+    ]
+  }
+])
+// items.value = [] // 暂定无数据展示
+const tipsText = ref('暂无数据')
+const total = ref(2)
+const pageInfo = reactive({ pageNo: 1, pageSize: 10 })
+
+const textItem = ref({
+  type: 'text',
+  width: 600,
+  value: '',
+  label: '请输入简历姓名/职位名称',
+  appendInnerIcon: 'mdi-magnify'
+})
+const dict = ['age', 'expName', 'areaName', 'eduName', 'payName']
+
+// 获取数据
+const getData = async () => {
+  const obj = { ...pageInfo, ...query }
+  console.log('obj', obj)
+  const { list, total: number } = await getTalentPoolPage(pageInfo)
+  total.value = number
+  if (showTextUI.value) items.value = list?.length ? dealDictArrayData([], list) : []
+}
+// getData()
+
+const handleEnter = (e) => {
+  console.log(e, 'enter')
+}
+
+// 移出人才库 
+const handleRemove = async (item) => {
+  if (!item.userId) return Snackbar.warning('数据异常')
+  await removeFormTalentPool(item.userId)
+  Snackbar.success(t('common.operationSuccessful'))
+}
+
+const dealSelect = () => {
+  selectList.value = items.value.filter(e => e.select).map(k => k.id)
+}
+
+// 全选
+const handleChangeSelectAll = () => {
+  items.value.map(k => {
+    k.select = selectAll.value
+    return k
+  })
+  dealSelect()
+}
+// 单选
+const handleChangeSelect = () => {
+  const length = items.value.filter(k => k.select).length
+  selectAll.value = length > 0 ? true : false
+  dealSelect()
+}
+
+const handleChangePage = () => {
+  // 分页获取新数据后勾选
+  selectList.value.forEach(e => {
+    const obj = items.value.find(k => k.id === e)
+    if (obj) obj.select = true
+  })
+  getData()
+}
+
+// 筛选
+const handleConfirm = (params) => {
+  screen.value = false
+  pageInfo.pageNo = 1
+  query = { ...params }
+  getData()
+}
+
+const FilterPageRef = ref()
+const openDrawer = () => {
+  screen.value = true
+  if (Object.keys(query).length) FilterPageRef.value?.setValue(query)
+  else FilterPageRef.value?.resetValue()
+}
+
+
+// 人才详情
+const talentPoolDetails = ({ userId, id }) => {
+  if (!userId || !id) return
+  window.open(`/recruit/enterprise/resumeManagement/talentPool/details/${userId}?id=${id}`)
+}
+</script>
+
+<style scoped lang="scss">
+.list-item {
+  border: 1px solid #e5e6eb;
+}
+.top {
+  display: flex;
+  background-color: #f7f8fa;
+  height: 50px;
+  line-height: 50px;
+  font-size: 14px;
+  color: var(--color-666);
+  padding: 0 20px;
+}
+.user-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: #555;
+}
+.user-info {
+  color: var(--color-666);
+  font-size: 14px;
+  font-weight: 500;
+}
+:deep(.v-timeline-divider__dot--size-small) {
+  width: 10px !important;
+  height: 10px !important;
+  margin-top: 10px !important;
+}
+:deep(.v-timeline-divider__inner-dot) {
+  width: 10px !important;
+  height: 10px !important;
+}
+.bottom {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 12px;
+  .experience {
+    width: 54%;
+    height: 100%;
+  }
+  .edu {
+    width: 40%;
+    height: 100%;
+  }
+}
+.second-title {
+  color: var(--color-666);
+  font-size: 15px;
+}
+.timeline-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: var(--color-666);
+  font-size: 13px;
+  .timeline-item-name {
+    width: 26%;
+  }
+}
+:deep(.v-timeline-item__body) {
+  width: 100%;
+}
+:deep(.v-timeline--vertical.v-timeline) {
+  row-gap: 0;
+}
+</style>