|
@@ -1,41 +1,235 @@
|
|
|
<template>
|
|
|
<ContentWrap>
|
|
|
- <div class="box">
|
|
|
- <div class="box-search">
|
|
|
+ <div class="box" :class="{ active: isSearch }">
|
|
|
+ <div class="box-search contentWidth">
|
|
|
<el-input
|
|
|
v-model="searchValue"
|
|
|
size="large"
|
|
|
placeholder="请输入您的描述信息定位人才"
|
|
|
:suffix-icon="Search"
|
|
|
+ @keydown.enter="handleSearch"
|
|
|
/>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="change contentWidth">
|
|
|
+ <el-button class="button-new-tag" size="small" @click="changeTags">
|
|
|
+ 换一批
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="tags contentWidth">
|
|
|
+ <el-tag
|
|
|
+ class="tag"
|
|
|
+ v-for="tag in tags"
|
|
|
+ :key="tag"
|
|
|
+ :type="searchParam.labels.includes(tag) ? 'info' : ''"
|
|
|
+ size="large"
|
|
|
+ @click="handleSearchTag(tag)"
|
|
|
+ >{{ tag }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-if="searchParam.labels.length" class="search-tags">
|
|
|
+ <div class="search-tags-label">标签:</div>
|
|
|
+ <div class="search-tags-label-content">
|
|
|
+ <el-tag
|
|
|
+ v-for="(tag, i) in searchParam.labels"
|
|
|
+ :key="tag"
|
|
|
+ size="large"
|
|
|
+ class="search-tags-tag"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="handleClose(tag, i)"
|
|
|
+ >
|
|
|
+ {{ tag }}
|
|
|
+ </el-tag>
|
|
|
+
|
|
|
+ <el-button class="search-tags-tag" type="danger" @click="handleClear">清除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</ContentWrap>
|
|
|
+ <ContentWrap v-if="isSearch">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="list"
|
|
|
+ :stripe="true"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
+ <el-table-column label="头像" align="left" prop="name" >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-avatar :size="30" :src="scope.row.avatar" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="姓名" align="left" prop="name" />
|
|
|
+ <el-table-column label="英文名" align="left" prop="foreignName" />
|
|
|
+ <el-table-column label="求职状态" align="center" prop="jobStatus" />
|
|
|
+ <el-table-column label="电话号码" align="center" prop="phone" />
|
|
|
+ <el-table-column label="出生日期" align="center" prop="birthday" />
|
|
|
+ <el-table-column label="婚姻状况" align="center" prop="maritalStatus" />
|
|
|
+ <el-table-column label="所在城市" align="center" prop="areaId" />
|
|
|
+ <el-table-column label="首次工作时间" align="center" prop="firstWorkTime" />
|
|
|
+ <el-table-column label="工作年限" align="center" prop="expType" />
|
|
|
+ <el-table-column label="最高学历" align="center" prop="eduType" />
|
|
|
+ <el-table-column label="操作" align="left">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="getDetails(scope.row.id)"
|
|
|
+ >
|
|
|
+ 查看
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <Pagination
|
|
|
+ :total="total"
|
|
|
+ v-model:page="pageInfo.pageNo"
|
|
|
+ v-model:limit="pageInfo.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </ContentWrap>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts">
|
|
|
-import { ref } from 'vue'
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
import { pyTalentMap } from '@/api/menduner/system/talentMap'
|
|
|
const { searchTalent, getTalentLabel } = pyTalentMap
|
|
|
const searchValue = ref(null)
|
|
|
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+const list = ref([])
|
|
|
+const total = ref(0)
|
|
|
+const pageInfo = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10
|
|
|
+})
|
|
|
+
|
|
|
+const tagsPageInfo = ref({
|
|
|
+ current: 1,
|
|
|
+ size: 15
|
|
|
+})
|
|
|
+
|
|
|
+const tags = ref([])
|
|
|
+
|
|
|
+const searchParam = ref({
|
|
|
+ labels: [],
|
|
|
+ content: null
|
|
|
+})
|
|
|
+
|
|
|
+const isSearch = computed(() => {
|
|
|
+ return searchParam.value.content || searchParam.value.labels.length
|
|
|
+})
|
|
|
+
|
|
|
+const getDetails = async (id) => {
|
|
|
+ console.log(id)
|
|
|
+}
|
|
|
+
|
|
|
const getLabelData = async () => {
|
|
|
- const res = await getTalentLabel({ current: 1, size:9999, type: 'person' }) //type: job enterprise person
|
|
|
- console.log(res)
|
|
|
+ const res = await getTalentLabel({ ...tagsPageInfo.value, type: 'person' }) //type: job enterprise person
|
|
|
+ tags.value = res.records
|
|
|
+ if (res.current * res.size >= res.total) {
|
|
|
+ tagsPageInfo.value.current = 0
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ const res = await searchTalent({ ...pageInfo.value, ...searchParam.value })
|
|
|
+ list.value = res.list
|
|
|
+ total.value = res.total
|
|
|
+ loading.value = false
|
|
|
}
|
|
|
+
|
|
|
+const changeTags = () => {
|
|
|
+ tagsPageInfo.value.current++
|
|
|
+ getLabelData()
|
|
|
+}
|
|
|
+
|
|
|
+const handleClose = (tag, index) => {
|
|
|
+ searchParam.value.labels.splice(index, 1)
|
|
|
+ pageInfo.value.current = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleClear = () => {
|
|
|
+ searchParam.value.labels = []
|
|
|
+ pageInfo.value.current = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ searchParam.value.content = searchValue.value
|
|
|
+ pageInfo.value.current = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+const handleSearchTag = async (tag) => {
|
|
|
+ if (searchParam.value.labels.includes(tag)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ searchParam.value.labels.push(tag)
|
|
|
+ pageInfo.value.current = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
getLabelData()
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.contentWidth {
|
|
|
+ width: 75%;
|
|
|
+ max-width: 900px;
|
|
|
+}
|
|
|
.box {
|
|
|
min-height: 500px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- &-search {
|
|
|
- width: 75%;
|
|
|
- max-width: 900px;
|
|
|
+ flex-direction: column;
|
|
|
+ transition: .5s;
|
|
|
+ // &-search {
|
|
|
+ // width: 75%;
|
|
|
+ // max-width: 900px;
|
|
|
+ // }
|
|
|
+ &.active {
|
|
|
+ min-height: unset;
|
|
|
+ }
|
|
|
+ .search-tags {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ &-label {
|
|
|
+ padding-top: 7px;
|
|
|
+ margin-right: 10px;
|
|
|
+ &-content {
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-tag {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.change {
|
|
|
+ // width: 75%;
|
|
|
+ // max-width: 900px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.tags {
|
|
|
+ // width: 75%;
|
|
|
+ // max-width: 900px;
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
</style>
|