219 lines
8.8 KiB
Vue
219 lines
8.8 KiB
Vue
<template>
|
||
<div class="content-view">
|
||
<div class="table-head-tool">
|
||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||
<FormItem :label-width="20" class="flex">
|
||
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
||
:placeholder="seachTypePlaceholder">
|
||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||
</Select>
|
||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
||
placeholder="请输入关键字" @on-search="query(1)" />
|
||
</FormItem>
|
||
<FormItem label="平台">
|
||
<Select v-model="gridOption.param.seachOption.platform" style="width: 120px" clearable @on-change="query(1)">
|
||
<Option value="boss">Boss直聘</Option>
|
||
<Option value="liepin">猎聘</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem>
|
||
<Button type="primary" @click="query(1)">查询</Button>
|
||
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
||
<Button type="default" @click="exportCsv">导出</Button>
|
||
</FormItem>
|
||
</Form>
|
||
</div>
|
||
<div class="table-body">
|
||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||
@changePage="query"></tables>
|
||
</div>
|
||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"></editModal>
|
||
|
||
<!-- 详情组件 -->
|
||
<ResumeInfoDetail ref="resumeDetail" @on-close="handleDetailClose" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import resumeInfoServer from '@/api/profile/resume_info_server.js'
|
||
import ResumeInfoDetail from './resume_info_detail.vue'
|
||
|
||
export default {
|
||
components: {
|
||
ResumeInfoDetail
|
||
},
|
||
data() {
|
||
let rules = {}
|
||
rules["sn_code"] = [{ required: true, message: '请填写设备SN码', trigger: 'blur' }]
|
||
rules["platform"] = [{ required: true, message: '请选择平台', trigger: 'change' }]
|
||
rules["name"] = [{ required: true, message: '请填写姓名', trigger: 'blur' }]
|
||
|
||
return {
|
||
seachTypes: [
|
||
{ key: 'name', value: '姓名' },
|
||
{ key: 'sn_code', value: '设备SN码' },
|
||
{ key: 'phone', value: '电话' }
|
||
],
|
||
gridOption: {
|
||
param: {
|
||
seachOption: {
|
||
key: 'name',
|
||
value: '',
|
||
platform: null
|
||
},
|
||
pageOption: {
|
||
page: 1,
|
||
pageSize: 20
|
||
}
|
||
},
|
||
data: [],
|
||
rules: rules
|
||
},
|
||
listColumns: [
|
||
{ title: 'ID', key: 'id', minWidth: 80 },
|
||
{ title: '设备SN码', key: 'sn_code', minWidth: 120 },
|
||
{
|
||
title: '平台',
|
||
key: 'platform',
|
||
minWidth: 100,
|
||
render: (h, params) => {
|
||
const platformMap = {
|
||
'boss': { text: 'Boss直聘', color: 'blue' },
|
||
'liepin': { text: '猎聘', color: 'green' }
|
||
}
|
||
const platform = platformMap[params.row.platform] || { text: params.row.platform, color: 'default' }
|
||
return h('Tag', { props: { color: platform.color } }, platform.text)
|
||
}
|
||
},
|
||
{ title: '姓名', key: 'name', minWidth: 120 },
|
||
{ title: '电话', key: 'phone', minWidth: 130 },
|
||
{ title: '邮箱', key: 'email', minWidth: 180 },
|
||
{ title: '期望职位', key: 'expectedPosition', minWidth: 150 },
|
||
{ title: '期望薪资', key: 'expectedSalary', minWidth: 120 },
|
||
{ title: '工作经验', key: 'workExperience', minWidth: 100 },
|
||
{ title: '学历', key: 'education', minWidth: 100 },
|
||
{ title: '更新时间', key: 'last_modify_time', minWidth: 150 },
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 250,
|
||
type: 'template',
|
||
render: (h, params) => {
|
||
let btns = [
|
||
{
|
||
title: '查看',
|
||
type: 'info',
|
||
click: () => {
|
||
this.showDetail(params.row)
|
||
},
|
||
},
|
||
{
|
||
title: '编辑',
|
||
type: 'primary',
|
||
click: () => {
|
||
this.showEditWarp(params.row)
|
||
},
|
||
},
|
||
{
|
||
title: '删除',
|
||
type: 'error',
|
||
click: () => {
|
||
this.delConfirm(params.row)
|
||
},
|
||
},
|
||
]
|
||
return window.framework.uiTool.getBtn(h, btns)
|
||
},
|
||
}
|
||
],
|
||
editColumns: [
|
||
{ title: '设备SN码', key: 'sn_code', type: 'text', required: true },
|
||
{ title: '平台', key: 'platform', type: 'select', required: true, options: [
|
||
{ value: 'boss', label: 'Boss直聘' },
|
||
{ value: 'liepin', label: '猎聘' }
|
||
]},
|
||
{ title: '姓名', key: 'name', type: 'text', required: true },
|
||
{ title: '电话', key: 'phone', type: 'text' },
|
||
{ title: '邮箱', key: 'email', type: 'text' },
|
||
{ title: '期望职位', key: 'expectedPosition', type: 'text' },
|
||
{ title: '期望薪资', key: 'expectedSalary', type: 'text' },
|
||
{ title: '工作年限', key: 'workExperience', type: 'text' },
|
||
{ title: '学历', key: 'education', type: 'text' },
|
||
{ title: '技能', key: 'skills', type: 'textarea' },
|
||
{ title: '自我介绍', key: 'selfIntroduction', type: 'textarea' },
|
||
{ title: '简历内容', key: 'resumeContent', type: 'textarea' }
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
this.query(1)
|
||
},
|
||
methods: {
|
||
query(page) {
|
||
this.gridOption.param.pageOption.page = page
|
||
resumeInfoServer.page(this.gridOption.param).then(res => {
|
||
this.gridOption.data = res.data.rows
|
||
this.gridOption.param.pageOption.total = res.data.count
|
||
})
|
||
},
|
||
showAddWarp() {
|
||
this.$refs.editModal.showModal()
|
||
},
|
||
showEditWarp(row) {
|
||
this.$refs.editModal.showModal(row)
|
||
},
|
||
delConfirm(row) {
|
||
window.framework.uiTool.delConfirm(async () => {
|
||
await resumeInfoServer.del(row)
|
||
this.$Message.success('删除成功！')
|
||
this.query(1)
|
||
})
|
||
},
|
||
exportCsv() {
|
||
resumeInfoServer.exportCsv(this.gridOption.param).then(res => {
|
||
window.framework.funTool.downloadFile(res, '简历信息.csv')
|
||
})
|
||
},
|
||
resetQuery() {
|
||
this.gridOption.param.seachOption = {
|
||
key: 'name',
|
||
value: '',
|
||
platform: null
|
||
}
|
||
this.query(1)
|
||
},
|
||
showDetail(row) {
|
||
// 优先使用 resumeId，如果没有则使用 id
|
||
const resumeId = row.resumeId || row.id
|
||
if (resumeId) {
|
||
this.$refs.resumeDetail.show(resumeId)
|
||
} else {
|
||
this.$Message.warning('简历ID不存在')
|
||
}
|
||
},
|
||
handleDetailClose() {
|
||
// 详情关闭后的回调，可以在这里刷新列表
|
||
// this.query(this.gridOption.param.pageOption.page)
|
||
}
|
||
},
|
||
computed: {
|
||
seachTypePlaceholder() {
|
||
const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key)
|
||
return selected ? selected.value : '请选择搜索类型'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ml10 {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|
||
|