|
|
@@ -1,15 +1,123 @@
|
|
|
+<!-- 招聘计划管理 -->
|
|
|
<template>
|
|
|
<div class="recruitmentPlanBox">
|
|
|
<div class="header">
|
|
|
<plan-header></plan-header>
|
|
|
</div>
|
|
|
- <div class="con">
|
|
|
- <el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
|
|
|
- <el-button size="small" icon="el-icon-edit-outline">修改</el-button>
|
|
|
- <el-button size="small" icon="el-icon-close">删除</el-button>
|
|
|
- <el-button size="small" icon="el-icon-download">合并查看</el-button>
|
|
|
- <plan-con></plan-con>
|
|
|
+ <div class="content">
|
|
|
+ <div class="con">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" style="margin-left: 30px;">添加</el-button>
|
|
|
+ <el-button icon="el-icon-edit-outline">修改</el-button>
|
|
|
+ <el-button icon="el-icon-close">删除</el-button>
|
|
|
+ <el-button icon="el-icon-download">合并查看</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧栏 -->
|
|
|
+ <div class="con cons">
|
|
|
+ <div class="b_r b_ro">
|
|
|
+ <i class="el-icon-search" title="搜索"></i>
|
|
|
+ </div>
|
|
|
+ <div class="b_r">
|
|
|
+ <i class="el-icon-refresh" title="刷新"></i>
|
|
|
+ </div>
|
|
|
+ <div class="b_r">
|
|
|
+ <i class="el-icon-notebook-2" title="切换"></i>
|
|
|
+ </div>
|
|
|
+ <div class="b_r ">
|
|
|
+ <el-dropdown :hide-on-click="false">
|
|
|
+ <div class=" b_rf">
|
|
|
+ <i class="el-icon-s-grid" title="列"></i>
|
|
|
+ <i class="el-icon-caret-bottom" title="列"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧栏 -->
|
|
|
+ <!-- 下拉菜单 -->
|
|
|
+ <el-dropdown-menu slot="dropdown" style="height: 320px;overflow-y: scroll;">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.inviteid">招聘计划id</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.serial">序号</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.organid">机构id</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.want">招聘单位</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.wanttype">招聘类型</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.wantyear">招聘计划年份</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.planwant">拟聘人数</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.wantnumber">已聘人数</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.remark">备注</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.creator">创建人</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.creationtime">创建时间</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.modifier">修改人</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.modifiertime">修改时间</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.accessory">附件</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ <!-- 下拉菜单 -->
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ <plan-con></plan-con>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- 展示列表 -->
|
|
|
+ <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="招聘计划id" v-if="showColumn.inviteid">
|
|
|
+ <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="序号" v-if="showColumn.serial">
|
|
|
+ <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="机构id" v-if="showColumn.organid">
|
|
|
+ <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="招聘单位" v-if="showColumn.want">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="type" label="招聘类型" v-if="showColumn.wanttype">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="year" label="招聘计划年份" v-if="showColumn.wantyear">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="number" label="拟聘人数" v-if="showColumn.planwant">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="num" label="已聘人数" v-if="showColumn.wantnumber">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" v-if="showColumn.remark">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="person" label="创建人" v-if="showColumn.creator">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" v-if="showColumn.creationtime">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="修改人" v-if="showColumn.modifier">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="修改时间" show-overflow-tooltip v-if="showColumn.modifiertime">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="附件" show-overflow-tooltip v-if="showColumn.accessory">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 展示列表 -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -17,28 +125,225 @@
|
|
|
import planHeader from "./components/planHeader.vue";
|
|
|
import planCon from "./components/planCon.vue";
|
|
|
export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ checkList: ['选中且禁用', '复选框 A'],
|
|
|
+ tableData: [{
|
|
|
+ date: '1',
|
|
|
+ name: '安徽省直',
|
|
|
+ type: '统一招聘',
|
|
|
+ number: '5',
|
|
|
+ num: '0',
|
|
|
+ person: '张三',
|
|
|
+ year: '2022',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-08',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-06',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-07',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }],
|
|
|
+ multipleSelection: [],
|
|
|
+ showColumn: {
|
|
|
+ inviteid: false,
|
|
|
+ serial: true,
|
|
|
+ organid: true,
|
|
|
+ want: true,
|
|
|
+ wanttype: true,
|
|
|
+ wantyear: true,
|
|
|
+ planwant: true,
|
|
|
+ wantnumber: true,
|
|
|
+ hired: true,
|
|
|
+ remark: true,
|
|
|
+ creator: true,
|
|
|
+ creationtime: true,
|
|
|
+ modifier: true,
|
|
|
+ modifiertime: true,
|
|
|
+ accessory: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 发请求得到showColumnInitData的列的名字
|
|
|
+ if (localStorage.getItem("columnSet")) {
|
|
|
+ this.showColumn = JSON.parse(localStorage.getItem("columnSet"))
|
|
|
+ } else {
|
|
|
+ this.showColumn = {
|
|
|
+ inviteid: false,
|
|
|
+ serial: true,
|
|
|
+ organid: true,
|
|
|
+ want: true,
|
|
|
+ wanttype: true,
|
|
|
+ wantyear: true,
|
|
|
+ planwant: true,
|
|
|
+ wantnumber: true,
|
|
|
+ hired: true,
|
|
|
+ remark: true,
|
|
|
+ creator: true,
|
|
|
+ creationtime: true,
|
|
|
+ modifier: true,
|
|
|
+ modifiertime: true,
|
|
|
+ accessory: true,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleSelection(rows) {
|
|
|
+ if (rows) {
|
|
|
+ rows.forEach(row => {
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(row);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$refs.multipleTable.clearSelection();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+ handleClick(row) {
|
|
|
+ console.log(row);
|
|
|
+ },
|
|
|
+ saveColumn() {
|
|
|
+ localStorage.setItem("columnSet", JSON.stringify(this.showColumn))
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
name: "recruitmentPlan",
|
|
|
components: {
|
|
|
planHeader,
|
|
|
planCon,
|
|
|
},
|
|
|
+
|
|
|
};
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.recruitmentPlanBox {
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.recruitmentPlanBox .header {
|
|
|
background: #ffffff;
|
|
|
- border-radius: 10px;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
|
|
|
}
|
|
|
+
|
|
|
.recruitmentPlanBox .con {
|
|
|
- margin-top: 15px;
|
|
|
background: #ffffff;
|
|
|
- border-radius: 10px;
|
|
|
+ border-radius: 0 0 10px 10px;
|
|
|
height: calc(100% - 90px);
|
|
|
+ padding-top: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.cons {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.b_r {
|
|
|
+ border: 1px solid #DCDCDC;
|
|
|
+ border-right: none;
|
|
|
+ color: #000;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.b_ro {
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.b_rf {
|
|
|
+ display: flex;
|
|
|
+ border-right: 1px solid #DCDCDC;
|
|
|
+ border-radius: 0 5px 5px 0;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.b_r:hover {
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.b_rf:hover {
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-caret-bottom {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-search {
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-refresh {
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-notebook-2 {
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-s-grid {
|
|
|
+ padding: 10px 0px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-caret-bottom {
|
|
|
+ padding: 10px 10px 10px 0;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter-active,
|
|
|
+.fade-leave-active {
|
|
|
+ transition: opacity 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter,
|
|
|
+.fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.chenkbox {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
</style>
|
