|
|
@@ -0,0 +1,215 @@
|
|
|
+<template>
|
|
|
+ <div id="self-calendar">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-calendar>
|
|
|
+ <template #dateCell="{date, data}">
|
|
|
+ <el-popover ref="popover" placement="right" width="500" trigger="hover">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="padding:0.5rem;text-align:center;">{{ data.day }}招聘会</el-col>
|
|
|
+ <el-col :span="24" style="text-align:center;">
|
|
|
+ <el-table :data="list" style="width: 100%" border v-loading="loading">
|
|
|
+ <el-table-column prop="title" align="center" label="标题"> </el-table-column>
|
|
|
+ <el-table-column prop="organizer" align="center" label="举办方"> </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span slot="reference">
|
|
|
+ {{ date | getDay }}
|
|
|
+ </span>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-calendar>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="right">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="time">
|
|
|
+ <p>
|
|
|
+ <i class="el-icon-time"></i><span value-format="MM-dd">{{ info.time | getTime }}</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="organizer">
|
|
|
+ {{ info.organizer }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="title">
|
|
|
+ {{ info.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="date">
|
|
|
+ <p>时间：{{ info.date }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="address">
|
|
|
+ <p>地点：{{ info.address }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <span class="jiantou"></span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapActions, mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'self-calendar',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ calendar: new Date(),
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ infoList: {
|
|
|
+ time: '9:00',
|
|
|
+ organizer: '一汽大众大型招聘会',
|
|
|
+ title: '应届毕业生大型招聘会',
|
|
|
+ date: '2019-11-7',
|
|
|
+ address: '长春会展中心',
|
|
|
+ },
|
|
|
+ info: {},
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['jobfairOperation']),
|
|
|
+ async search() {
|
|
|
+ // 1直接拿着参数发送请求
|
|
|
+ let result = await this.jobfairOperation({ type: 'list', data: {} });
|
|
|
+ if (`${result.errcode}` === '0') {
|
|
|
+ //给this=>vue的实例下在中的list属性，赋予result。data的值
|
|
|
+ console.log(result.data);
|
|
|
+ this.$set(this, `infoList`, result.data);
|
|
|
+ if (result.data.length > 0) this.$set(this, `info`, result.data[0]);
|
|
|
+ } else {
|
|
|
+ this.$message.error(result.errmsg ? result.errmsg : 'error');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async checkJobFair(data) {
|
|
|
+ let searchInfo = { date: data.day };
|
|
|
+ this.$set(this, `loading`, true);
|
|
|
+ let result = await this.jobfairOperation({ type: 'list', data: searchInfo });
|
|
|
+ this.$set(this, `list`, result.data ? result.data : []);
|
|
|
+ this.$set(this, `loading`, false);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ getDay(data) {
|
|
|
+ return data.getDate();
|
|
|
+ },
|
|
|
+ getTime(date) {
|
|
|
+ console.log(date);
|
|
|
+ if (date) {
|
|
|
+ let arr = date.split(' ');
|
|
|
+ return arr[1];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+p {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+/deep/.el-calendar {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+/deep/.el-calendar__body {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+/deep/.el-calendar__header {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+/deep/.el-calendar__title {
|
|
|
+ color: yellow;
|
|
|
+ font-weight: 微软雅黑;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+/deep/.el-calendar__button-group {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+/deep/.el-calendar-table thead th {
|
|
|
+ padding: 12px 0;
|
|
|
+ color: #ffff;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+/deep/.el-calendar-table .el-calendar-day {
|
|
|
+ line-height: 70px;
|
|
|
+ font-size: 25px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+/deep/.el-calendar-table tr td:first-child {
|
|
|
+ border-left: none;
|
|
|
+}
|
|
|
+/deep/.el-calendar-table tr:first-child td {
|
|
|
+ border-top: none;
|
|
|
+}
|
|
|
+/deep/.el-calendar-table td {
|
|
|
+ border-bottom: none;
|
|
|
+ border-right: none;
|
|
|
+}
|
|
|
+/deep/.el-calendar-table td.is-today {
|
|
|
+ color: yellow;
|
|
|
+ background: #f8ab55;
|
|
|
+ border-radius: 90px;
|
|
|
+}
|
|
|
+.right {
|
|
|
+ width: 540px;
|
|
|
+ height: 623px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+.jiantou {
|
|
|
+ top: 50%;
|
|
|
+ left: -60px;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 0px;
|
|
|
+ height: 0;
|
|
|
+ border-width: 30px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #789699 #fff #789699 #789699;
|
|
|
+}
|
|
|
+.time p {
|
|
|
+ width: 185px;
|
|
|
+ height: 57px;
|
|
|
+ line-height: 57px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: #139cac;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #fff;
|
|
|
+ float: right;
|
|
|
+ margin: 45px 25px 43px 0;
|
|
|
+}
|
|
|
+.time p i {
|
|
|
+ margin: 0 15px 0 0;
|
|
|
+}
|
|
|
+.organizer {
|
|
|
+ font-size: 50px;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 25px;
|
|
|
+ margin: 70px 0 100px 0;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000;
|
|
|
+ padding: 15px 25px;
|
|
|
+}
|
|
|
+.date {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #000;
|
|
|
+ text-align: cener;
|
|
|
+ padding: 10px 25px;
|
|
|
+}
|
|
|
+.address {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #000;
|
|
|
+ text-align: cener;
|
|
|
+ padding: 10px 25px;
|
|
|
+}
|
|
|
+</style>
|
