275 lines
7.7 KiB
Vue
275 lines
7.7 KiB
Vue
<template>
|
|
<ai-list isTabs class="list">
|
|
<template #content>
|
|
<div class="statistics-top">
|
|
<div class="statistics-top__item">
|
|
<span>招聘单位总数</span>
|
|
<h2 style="color: #2266FF;">{{ staData.countCompany || 0 }}</h2>
|
|
</div>
|
|
<div class="statistics-top__item">
|
|
<span>招聘岗位总数</span>
|
|
<h2 style="color: #22AA99;">{{ staData.countTotal || 0 }}</h2>
|
|
</div>
|
|
<div class="statistics-top__item">
|
|
<span>招聘人员总数</span>
|
|
<h2 style="color: #F8B425">{{ staData.countUser || 0 }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<ai-search-bar bottomBorder>
|
|
<template slot="left">
|
|
<!-- 性别下拉选择框 -->
|
|
<ai-select v-model="searchObj.gender" placeholder="请选择性别" clearable @change=";(page.current = 1), getList()" :selectList="dict.getDict('JobGender')"></ai-select>
|
|
</template>
|
|
|
|
<!-- 搜索 -->
|
|
<template slot="right"> <el-input v-model="searchObj.title" size="small" placeholder="请输入单位名称" clearable v-throttle="() => {page.current = 1, getList()}" @clear=";(page.current = 1), (searchObj.title = ''), getList()" suffix-icon="iconfont iconSearch"/></template>
|
|
</ai-search-bar>
|
|
|
|
<ai-search-bar style="margin-top: 16px;">
|
|
<!-- 添加 -->
|
|
<template #left>
|
|
<el-button type="primary" icon="iconfont iconAdd" size="small" @click="add('')">添加</el-button>
|
|
<el-button icon="iconfont iconDelete" size="small" @click="toDelete()" :disabled="ids.length == 0">删除</el-button>
|
|
</template>
|
|
|
|
<!-- 导入导出 -->
|
|
<template #right>
|
|
<ai-import :instance="instance" :dict="dict" type="appjob" name="招工就业" @success="getList(), $message.success('导入成功!')">
|
|
<el-button icon="iconfont iconImport">导入</el-button>
|
|
</ai-import>
|
|
|
|
<ai-download :instance="instance" url="/app/appjob/listExport" :params="param" fileName="招工就业模板" />
|
|
</template>
|
|
</ai-search-bar>
|
|
|
|
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @selection-change="(v) => (ids = v.map((e) => e.id))" @getList="getList">
|
|
<!-- 是否启用 -->
|
|
<el-table-column label="是否启用" slot="status" align="center" width="80">
|
|
<template v-slot="{ row }">
|
|
<el-switch v-model="row.status" @change="onChange(row)" active-value="1" inactive-value="0" active-color="#5088FF" inactive-color="#D0D4DC"> </el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 操作 -->
|
|
<el-table-column label="操作" align="center" width="140" slot="options">
|
|
<template slot-scope="{ row }">
|
|
<el-button type="text" @click="add(row.id)">编辑</el-button>
|
|
<el-button type="text" @click="toDelete(row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</div>
|
|
</template>
|
|
</ai-list>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'list',
|
|
// 组件
|
|
components: {},
|
|
props: {
|
|
params: Object,
|
|
instance: Function,
|
|
dict: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
page: {
|
|
size: 10,
|
|
current: 1,
|
|
total: 0,
|
|
},
|
|
searchObj: {
|
|
gender: '',
|
|
title: '',
|
|
},
|
|
colConfigs: [
|
|
{ type: 'selection' },
|
|
{ prop: 'companyName', label: '单位名称', width: '180px' },
|
|
{ prop: 'title', label: '招聘岗位', width: '150px' },
|
|
{ prop: 'total', label: '招聘人数', width: '80px' },
|
|
{ prop: 'education', label: '学历', width: '80px' },
|
|
{
|
|
prop: 'gender',
|
|
label: '性别',
|
|
width: '60px',
|
|
render: (h, { row }) => {
|
|
return h('span', null, this.dict.getLabel('JobGender', row.gender))
|
|
},
|
|
},
|
|
{ prop: 'age', label: '年龄' },
|
|
{ prop: 'salary', label: '薪酬待遇' },
|
|
{ prop: 'linkName', label: '联系人', width: '80px' },
|
|
{ prop: 'linkPhone', label: '联系方式' },
|
|
{ prop: 'createUserName', label: '添加人' },
|
|
{ prop: 'createTime', label: '添加日期', width: '160px' },
|
|
{ slot: 'status', label: '是否启用' },
|
|
],
|
|
staData: [],
|
|
ids: [],
|
|
}
|
|
},
|
|
// 计算
|
|
computed: {
|
|
param() {
|
|
let params = {}
|
|
//导出搜索条件
|
|
if (this.ids.length) {
|
|
params = {
|
|
...params,
|
|
ids: this.ids,
|
|
}
|
|
} else {
|
|
params = {
|
|
...params,
|
|
...this.searchObj,
|
|
}
|
|
}
|
|
return params
|
|
},
|
|
},
|
|
// 监听
|
|
watch: {},
|
|
|
|
// 实例创建后
|
|
created() {
|
|
this.dict.load('JobGender').then(() => {
|
|
this.getList()
|
|
this.getStaData()
|
|
})
|
|
},
|
|
|
|
// 实例创建后
|
|
onShow() {},
|
|
// 实例渲染后
|
|
mounted() {
|
|
this.dict.load('JobGender').then(() => {
|
|
this.$nextTick(() => this.getList())
|
|
})
|
|
},
|
|
// 方法
|
|
methods: {
|
|
getList() {
|
|
this.instance
|
|
.post(`/app/appjob/list`, null, {
|
|
params: {
|
|
...this.page,
|
|
...this.searchObj,
|
|
type: 0
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
// console.log(res.data.records)
|
|
this.tableData = res.data.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
|
|
// 添加
|
|
add(id) {
|
|
this.$emit('change', {
|
|
type: 'Add',
|
|
params: {
|
|
id: id || '',
|
|
},
|
|
})
|
|
},
|
|
|
|
// 删除
|
|
toDelete(id) {
|
|
this.$confirm('删除后不可恢复，是否要删除该事项?').then(() => {
|
|
this.instance
|
|
.post('/app/appjob/delete', null, {
|
|
params: { ids: id || this.ids.join(',') },
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.$message.success('删除成功！')
|
|
this.getList()
|
|
this.getStaData()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
// 启用停用
|
|
onChange(row) {
|
|
this.instance.post(`/app/appjob/setStatus?id=${row.id}&status=${row.status}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.$message.success(+row.status ? '已启用' : '不启用')
|
|
this.getList()
|
|
}
|
|
})
|
|
},
|
|
|
|
// 统计
|
|
getStaData() {
|
|
this.instance.post('/app/appjob/statistic').then((res) => {
|
|
if (res?.data) {
|
|
this.staData = res.data
|
|
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.list {
|
|
::v-deep .ai-list__content {
|
|
padding: 0!important;
|
|
|
|
.ai-list__content--right-wrapper {
|
|
background: transparent!important;
|
|
box-shadow: none!important;
|
|
margin: 0!important;
|
|
padding: 0 0 12px!important;
|
|
}
|
|
}
|
|
.statistics-top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
|
|
& > div {
|
|
flex: 1;
|
|
height: 96px;
|
|
line-height: 1;
|
|
margin-right: 20px;
|
|
padding: 16px 24px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
border-radius: 4px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
color: #888888;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 16px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
}
|
|
}
|
|
</style>
|