日历提示招聘会

src/components/self-calendar.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="self-calendar">
+    <el-calendar>
+      <template #dateCell="{date, data}">
+        <el-popover ref="popover" placement="right" width="500" trigger="hover" @show="checkJobFair(data)">
+          <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>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex';
+export default {
+  name: 'self-calendar',
+  props: {},
+  components: {},
+  data: () => ({
+    value: new Date(),
+    list: [],
+    loading: false,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    ...mapActions(['jobfairOperation']),
+    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();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-calendar__body {
+  padding: 0;
+}
+/deep/.el-calendar-table thead th {
+  padding: 10px 0;
+}
+/deep/.el-calendar-table .el-calendar-day {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 0 0 15px;
+}
+/deep/.el-calendar-table thead {
+  background-color: #c45353;
+}
+/deep/.el-calendar-table thead th {
+  color: #fff;
+}
+</style>

src/store.js

@@ -70,8 +70,8 @@ export default new Vuex.Store({
       let { skip, limit } = data;
       if (type === 'list') {
         data = this.$toUndefined(data);
-        let { schid } = data;
-        result = await this.$axios.$get(api.fairs, {}, { schid: schid, skip: skip, limit: limit });
+        let { schid, date } = data;
+        result = await this.$axios.$get(api.fairs, {}, { schid: schid, skip: skip, limit: limit, date: date });
       }
       if (type === 'search') {
         let { id } = data;

src/views/index/index.vue

@@ -81,7 +81,7 @@
             <el-col :span="24" class="mainThr">
               <el-col class="mainThrSide">
                 <el-col class="mainThrSideRili">
-                  <el-calendar v-model="value"> </el-calendar>
+                  <slot name="calendar"></slot>
                 </el-col>
                 <el-col class="mainThrSideExp">
                   <el-col class="sideExpTit" :style="`background:${backColor}`">
@@ -1082,24 +1082,6 @@ img {
   height: 21px;
   line-height: 21px;
 }
-
-/deep/.el-calendar__body {
-  padding: 0;
-}
-/deep/.el-calendar-table thead th {
-  padding: 10px 0;
-}
-/deep/.el-calendar-table .el-calendar-day {
-  height: 40px;
-  line-height: 40px;
-  padding: 0 0 0 15px;
-}
-/deep/.el-calendar-table thead {
-  background-color: #c45353;
-}
-/deep/.el-calendar-table thead th {
-  color: #fff;
-}
 .mainThrMain {
   float: right;
   width: 838px;

src/views/index/request.vue

@@ -19,12 +19,17 @@
         :tagsCol="tagsCol"
         :tagsOne="tagsOne"
         :site="site"
-      ></pages-one>
+      >
+        <template #calendar>
+          <self-calendar></self-calendar>
+        </template>
+      </pages-one>
     </el-row>
   </div>
 </template>
 
 <script>
+import selfCalendar from '@/components/self-calendar.vue';
 import pagesOne from './index.vue';
 import { mapActions, mapState } from 'vuex';
 export default {
@@ -32,6 +37,7 @@ export default {
   props: {},
   components: {
     pagesOne,
+    selfCalendar,
   },
   data: () => ({
     limit: 4,
@@ -83,8 +89,6 @@ export default {
       }
     },
     async search() {
-      console.log(this.$site);
-
       // 1直接拿着参数发送请求
       let result = await this.postTalksInfo({ type: 'list', data: { schid: this.$site } });
       if (`${result.errcode}` === '0') {