招工就业

This commit is contained in:
yanran200730
2021-12-21 16:47:07 +08:00
parent 47e0b485ab
commit 0dc777d02b
5 changed files with 436 additions and 176 deletions

View File

@@ -180,7 +180,7 @@ export default {
// 返回按钮
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
type: 'List',
isRefresh: isRefresh ? true : false,
})
},

View File

@@ -0,0 +1,116 @@
<template>
<ai-detail>
<template #title>
<ai-title title="添加招工就业信息" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
</template>
<template #content>
<el-form class="ai-form" :model="formData" ref="ruleForm" :rules="formRules">
<ai-card title="基础信息">
<div slot="content" class="ai-content">
<el-form-item label="标题" prop="title" style="width: 100%">
<el-input placeholder="请输入" size="small" v-model="formData.title" maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-form-item label="联系人" prop="linkName" style="width: 100%">
<el-input size="small" placeholder="请输入联系人" v-model="formData.linkName" maxlength="20" show-word-limit></el-input>
</el-form-item>
<el-form-item label="联系方式" prop="linkPhone" style="width: 100%">
<el-input size="small" placeholder="请输入联系方式" v-model="formData.linkPhone" show-word-limit></el-input>
</el-form-item>
</div>
</ai-card>
</el-form>
</template>
<template #footer>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
</template>
</ai-detail>
</template>
<script>
export default {
name: 'Add',
props: {
instance: Function,
dict: Object,
params: Object,
},
data() {
return {
info: {},
id: '',
formData: {
title: '',
linkPhone: '',
linkName: '',
type: 1
},
formRules: {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
linkPhone: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
linkName: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
},
}
},
created() {
this.dict.load('JobGender').then(() => {})
if (this.params && this.params.id) {
this.id = this.params.id
this.getInfoList(this.params.id)
}
},
methods: {
getInfoList(id) {
this.instance.post(`/app/appjob/detail?id=${id}`).then((res) => {
if (res.code === 0) {
this.formData = res.data
window.console.log(this.info)
}
})
},
confirm() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.instance.post(`/app/appjob/addOrUpdate`, {
...this.formData,
type: 1,
id: this.id || ''
})
.then((res) => {
if (res.code == 0) {
this.$message.success('提交成功')
setTimeout(() => {
this.cancel(true)
}, 600)
}
})
}
})
},
cancel(isRefresh) {
this.$emit('change', {
type: 'List',
isRefresh: isRefresh ? true : false,
})
},
},
}
</script>
<style scoped lang="scss">
::v-deep.ai-form {
display: flex;
flex-direction: column;
.ai-card {
.ai-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
}
</style>

View File

@@ -0,0 +1,126 @@
<template>
<ai-list class="notice" isTabs>
<template slot="content">
<ai-search-bar class="search-bar">
<template #left>
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
</template>
<template #right>
<el-input
v-model="search.title"
class="search-input"
size="small"
@keyup.enter.native="search.current = 1, search.title, getList()"
placeholder="请输入标题"
clearable
@clear="search.current = 1, search.title = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="toAdd(row.id)">编辑</el-button>
<el-button type="text" @click="remove(row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'JobList',
props: {
instance: Function,
dict: Object,
moduleId: String
},
data() {
return {
search: {
current: 1,
size: 10,
title: ''
},
currIndex: -1,
areaList: [],
total: 10,
colConfigs: [
{ prop: 'title', label: '标题', align: 'left', width: '200px' },
{ prop: 'linkPhone', label: '联系方式', align: 'center' },
{ prop: 'createUserName', label: '发布人', align: 'center' },
{ prop: 'createTime', label: '发布时间', align: 'center' },
{ slot: 'options', label: '操作', align: 'center' }
],
areaName: '',
unitName: '',
tableData: []
}
},
computed: {
...mapState(['user'])
},
mounted() {
this.search.areaId = this.user.info.areaId
this.getList()
},
methods: {
getList() {
this.instance.post(`/app/appjob/list`, null, {
params: {
...this.search,
type: 1
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
remove(id) {
this.$confirm('确定删除该数据?').then(() => {
this.instance.post(`/app/appjob/delete?id=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功!')
this.getList()
}
})
})
},
toAdd(id) {
this.$emit('change', {
type: 'AddJob',
params: {
id: id || ''
}
})
}
}
}
</script>
<style lang="scss" scoped>
.notice {
}
</style>

View File

@@ -1,77 +1,67 @@
<template>
<section class="list">
<ai-list>
<!-- 标题 -->
<ai-title slot="title" title="招工就业" isShowBottomBorder />
<template #custom>
<!-- 卡片 -->
<el-row type="flex" class="staDataPane">
<div class="boxItem">
<div>招聘单位总数</div>
<b>{{ staData.countCompany || 0 }}</b>
</div>
<div class="boxItem">
<div>招聘岗位总数</div>
<b>{{ staData.countTotal || 0 }}</b>
</div>
<div class="boxItem">
<div>招聘人员总数</div>
<b>{{ staData.countUser || 0 }}</b>
</div>
</el-row>
<!-- 内容 -->
<div class="mainPane">
<ai-search-bar>
<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 @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (searchObj.title = ''), getList()" suffix-icon="iconfont iconSearch"/></template>
</ai-search-bar>
<ai-search-bar>
<!-- 添加 -->
<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>
<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>
</template>
</ai-list>
</section>
<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 @keyup.enter.native=";(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>
@@ -230,62 +220,53 @@ export default {
</script>
<style scoped lang="scss">
.list {
height: 100%;
.list {
::v-deep .ai-list__content {
padding: 0!important;
::v-deep .ai-list__content {
padding: 0 16px 16px !important;
box-sizing: border-box;
.ai-list__content--wrapper {
display: flex;
flex-direction: column;
gap: 10px;
.ai-list__content--right-wrapper {
background: transparent!important;
box-shadow: none!important;
margin: 0!important;
padding: 12px 0 12px!important;
}
}
}
::v-deep .staDataPane {
width: 100%;
gap: 16px;
padding-top: 10px;
.boxItem {
flex: 1;
min-width: 0;
height: 64px;
.statistics-top {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 16px;
font-size: 14px;
color: #333;
border: 1px solid #eee;
background: #fff;
margin-bottom: 20px;
b {
font-size: 20px;
font-family: DINAlternate-Bold, DINAlternate,serif;
& > 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;
}
}
}
}
::v-deep .mainPane {
background: #fff;
border: 1px solid #eee;
padding: 12px 16px;
}
.WhereaboutsConfigForm {
flex-wrap: wrap;
.el-select {
width: 100%;
::v-deep .el-tag__close.el-icon-close {
background: transparent;
}
.content {
padding: 16px;
background: #FFFFFF;
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
}
}
}
</style>