|
|
@@ -1,11 +1,302 @@
|
|
|
<template>
|
|
|
- <div>人才库</div>
|
|
|
+ <v-card class="card-box pa-5">
|
|
|
+ <div class="d-flex justify-space-between">
|
|
|
+ <TextUI :item="textItem" @enter="handleEnter" @appendInnerClick="handleEnter"></TextUI>
|
|
|
+ <v-btn color="primary" prependIcon="mdi-filter-multiple-outline" class="half-button" variant="tonal" @click="screen = true">筛选</v-btn>
|
|
|
+ </div>
|
|
|
+ <div v-if="items.length" 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">
|
|
|
+ <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 class="px-5 py-3 d-flex justify-space-between align-center">
|
|
|
+ <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">和TA聊聊</v-btn>
|
|
|
+ <v-btn class="ml-3" color="primary">邀请面试</v-btn>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d-flex mx-5 bottom">
|
|
|
+ <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="query.pageNo"
|
|
|
+ :limit="query.pageSize"
|
|
|
+ @handleChange="handleChangePage"
|
|
|
+ ></CtPagination>
|
|
|
+ </div>
|
|
|
+ <Empty v-else :message="tipsText" :elevation="false"></Empty>
|
|
|
+
|
|
|
+ <v-navigation-drawer v-model="screen" location="right" absolute temporary width="700">
|
|
|
+ <FilterPage></FilterPage>
|
|
|
+ </v-navigation-drawer>
|
|
|
+ </v-card>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
defineOptions({ name: 'enterprise-talent-pool'})
|
|
|
+import { ref } from 'vue'
|
|
|
+import TextUI from '@/components/FormUI/TextInput'
|
|
|
+import FilterPage from './components/filter.vue'
|
|
|
+
|
|
|
+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: '广州',
|
|
|
+ id: 1,
|
|
|
+ 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: '广州',
|
|
|
+ id: 1,
|
|
|
+ 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: '酒店管理'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+])
|
|
|
+const tipsText = ref('暂无数据')
|
|
|
+const total = ref(2)
|
|
|
+const query = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10
|
|
|
+})
|
|
|
+
|
|
|
+const textItem = ref({
|
|
|
+ type: 'text',
|
|
|
+ width: 600,
|
|
|
+ value: '',
|
|
|
+ label: '请输入简历姓名/职位名称',
|
|
|
+ appendInnerIcon: 'mdi-magnify'
|
|
|
+})
|
|
|
+const dict = ['age', 'expName', 'areaName', 'eduName', 'payName']
|
|
|
+
|
|
|
+const handleEnter = (e) => {
|
|
|
+ console.log(e, 'enter')
|
|
|
+}
|
|
|
+
|
|
|
+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
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
+.card-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.list-item {
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+}
|
|
|
+.top {
|
|
|
+ display: flex;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+.user-name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #555;
|
|
|
+}
|
|
|
+.user-info {
|
|
|
+ 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: #666;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+.timeline-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ 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>
|
Xiao_123