cd-work-flow-web/src/views/dashboard/MyToDo.vue

<template>
  <div id="home">
    <!-- 第一行 -->
    <a-row :gutter="24" class="firstLine">
      <!-- 我的 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="7" :style="{ marginBottom: '8px', paddingRight: 0 }">
        <!-- 等高设置 -->
        <a-card title="我的" style="width: 100%;" :bordered="false" :style="{ marginBottom: '8px', height: '264px' }">
          <a-row :gutter="24">
            <!-- 头像 -->
            <a-col :xs="24" :sm="24" :md="12" :lg="14">
              <a-row :gutter="24">
                <a-col :xs="24" :sm="24" :md="12" :lg="8">
                  <div class="userImg">
                    <img src="../../assets/user.jpg" width="50px;" />
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="16">
                  <div class="userInfo">
                    <span>{{ userInfo.realname }}</span>
                    <p>账号：{{ userInfo.username }}</p>
                    <em>Tel：{{ userInfo.telphone }}</em>
                  </div>
                </a-col>
              </a-row>
            </a-col>

            <!-- 数量 -->
            <a-col :xs="24" :sm="24" :md="12" :lg="10" class="msgBox">
              <span> {{ todoList.length }}</span>
              <p>我的待办</p>
              <span>{{ msgTotal }}</span>
              <p>系统消息</p>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <!--  待办 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="11" :style="{ marginBottom: '8px', paddingRight: 0 }">
        <MyoaTabs />
      </a-col>

      <!-- 按钮 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="6" :style="{ marginBottom: '8px' }">
        <!-- 等高设置 -->
        <a-card title="OA工作台" :bordered="false" style="height: 264px;">
          <div v-for="(item, index) in activeKeyAll" :key="index" class="oaBig">
            <a @click.prevent="aClick(item)" class="oaItem fl">
              <!-- 图标 -->
              <a-avatar shape="square" :size="36" :src="item.iconAddress" />
              <h4>{{ item.name }}</h4>
            </a>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 第二行-->
    <a-row :gutter="24" class="secondLine">
      <!-- 公告 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="9" :style="{ marginBottom: '8px', paddingRight: 0 }">
        <a-card title="企业公告" :bordered="false" style="height:400px;">
          <template #extra>
            <a href="javascript:void(0);" @click="openEnterAnn">更多</a>
          </template>

          <div class="dataV">
            <dv-scroll-board class="board" :config="config" style="height:300px;" @click="getMethod" />
          </div>
        </a-card>
      </a-col>

      <!-- 计划  友情链接 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7" :style="{ marginBottom: '8px' }">
        <a-row :gutter="24">
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px', paddingRight: 0 }">
            <a-card title="我的计划" :bordered="false" style="width:100%;height:196px;">
              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :style="{ marginBottom: '8px', paddingRight: 0 }">
                <p>
                  上月我的计划：
                  <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 0 </strong>份
                </p>
                <p>
                  本月我的计划：
                  <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 1 </strong>份
                </p>
              </a-col>

              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
                <p>
                  上月他人计划：
                  <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 0 </strong>份
                </p>
                <p>
                  本月他人计划：
                  <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 2 </strong>份
                </p>
              </a-col>
            </a-card>
          </a-col>

          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px', paddingRight: 0 }">
            <a-card title="友情链接" :bordered="false" style="width:100%;height:196px;" class="links">
              <template #extra><a href="javascript:void(0);" @click="openMyLinks">更多</a></template>
              <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
              <button><a href="http://www.dakabg.com/" target="_blank">哒咔办公</a></button>
              <button>
                <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
              </button>
              <button><a href="https://www.11467.com" target="_blank">品医</a></button>
              <button><a href="https://www.antgroup.com/" target="_blank">蚂蚁集团</a></button>
              <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
              <button>
                <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
              </button>
            </a-card>
          </a-col>
        </a-row>
      </a-col>

      <!-- 日历 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :style="{ marginBottom: '8px' }">
        <a-card title="日程" :bordered="false" style="height:400px;">
          <template #extra>
            <a href="javascript:void(0);" @click="openCalTab">详情</a>
          </template>

          <a-row :gutter="24">
            <!-- 图片 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <div style="height:186px;">
                <div class="tips">
                  <img src="../../assets/date.jpg" alt="" height="186px;" width="100%" />
                  <!-- <i id="showTime"></i> -->
                </div>
              </div>
            </a-col>

            <!-- 小日历 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ccfullCalendar">
                <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 按钮弹框 -->
    <a-modal v-model="lcModal.visible" :title="lcModal.title" :footer="null" :maskClosable="false" width="90%">
      <component
        :disabled="lcModal.disabled"
        v-if="lcModal.visible"
        :is="lcModal.formComponent"
        :processData="lcModal.processData"
        :isNew="lcModal.isNew"
        @afterSubmit="afterSub"
        @close=";(lcModal.visible = false), (lcModal.disabled = false)"
      >
      </component>
    </a-modal>

    <!-- 企业公告详情 弹框-->
    <detAnn-modal ref="DetAnnModal" @ok="modalFormOk" :fatherData="annDetail"></detAnn-modal>
  </div>
</template>

<script>
import MyoaTabs from '@views/dashboard/MyoaTabs.vue'
import DetAnnModal from '@views/oa/enter-ann/add/detAnnModal.vue'
import { mapGetters } from 'vuex'
import { getAction } from '@/api/manage'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import SchedulePlan from '@views/oa/my-plan/schedulePlan'
// import '@fullcalendar/core/main.css'
import { scheduleGetListByTime, scheduleQueryById } from '@api/oa/cd-schedule'
import { enterpriseEQueryById } from '@api/oa/cd-enterprise-announcement'
import { enterpriseEList } from '@api/oa/cd-enterprise-announcement'
import '@fullcalendar/daygrid/main.css'
import JEditor from '../../components/jeecg/JEditor.vue'
import '@/assets/less/dataVTable.less' // 修改首页 DataV 轮播表样式
export default {
  name: 'Mytodo',
  components: {
    FullCalendar, //日历
    JEditor, //富文本
    DetAnnModal, //公告详情弹框
    MyoaTabs //我的待办、已办、申请 tabs
  },
  data() {
    return {
      timer: '',
      value: 0,
      annDetail: {}, //公告详情 数据
      annList: [], //公告列表 数据
      config: {}, //轮播表配置
      //日历组件 参数
      calendarOptions: {
        // 日程数组
        events: [
          {
            title: '啦啦啦啦',
            start: '2021-10-13T14:30:00',
            end: '2021-10-13T14:30:00',
            extendedProps: {
              status: 'done'
            },
            backgroundColor: '#ccd5ae',
            borderColor: 'red'
          }
        ],
        // 事件---------------------------------
        editable: true, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        weekends: true,
        navLinks: false, // 天链接
        selectHelper: false,
        selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
        dayMaxEvents: true,
        dateClick: this.handleDateClick, // 日期点击
        eventsSet: this.handleEvents, // 事件点击
        eventClick: this.handleEventClick, // 日程点击信息展示
        eventDrop: this.handleEventDrop, // 日程拖动事件
        eventResize: this.eventResize, // 日程缩放事件
        // 引入的插件
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        // 日历头部按钮位置
        headerToolbar: {
          /* -----------------------
              left: 'prev,next',
              center: 'title',
              right: 'dayGridMonth'
           -------------------------*/
          left: '',
          center: '',
          right: ''
        },
        // 日历头部按钮中文转换
        // buttonText: {
        //   month: '月'
        // },
        initialView: 'dayGridMonth', // 指定默认显示视图
        locale: 'zh-ch', // 切换语言，当前为中文
        firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1
        weekNumberCalculation: 'ISO', // 与 firstDay 配套使用
        // eventColor: 'red', // 全部日历日程背景色
        timeGridEventMinHeight: '20', // 设置事件的最小高度
        // aspectRatio: '8.5', // 设置日历单元格宽高比
        displayEventTime: false, // 是否显示事件时间
        allDaySlot: false, // 周、日视图时，all-day不显示
        eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
        eventTimeFormat: {
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为　24小时制
        }
      },
      userInfo: this.$store.getters.userInfo,
      todoList: [],
      activeKeyAll: [],
      msg1Count: '0',
      msg2Count: '0',
      url: {
        listCementByUser: '/sys/annountCement/listByUser'
      },
      //按钮弹框
      lcModal: {
        title: '',
        visible: false,
        disabled: false,
        formComponent: null,
        isNew: false
      },

      data: [], // 表单数据
      total: 0, // 表单数据总数

      ipagination: {
        current: 1,
        pageSize: 3,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      }
    }
  },

  created() {
    this.getScheduleData() //查询日程数据
    this.getDataList() //待办数据
    this.getActiveKeyAll() //OA按钮
    this.getAnnList() //渲染公告(已发布的)
  },
  computed: {
    // 系统消息计算
    msgTotal() {
      return parseInt(this.msg1Count) + parseInt(this.msg2Count)
    },
    scroll: function() {
      var width = window.innerWidth
      // ant-table
      let $antTable = window.document.getElementsByClassName('ant-table')
      if ($antTable[0]) {
        width = $antTable[0].clientWidth
      }
      return {
        x: 1160,
        y: window.innerHeight / 2
      }
    },
    innerHeight: function() {
      var innerHeight = window.innerHeight
      return innerHeight
    }
  },
  mounted() {
    this.loadData()
    this.getAnnList()
    // this.timer = setInterval(this.getCurrentTime, 1000) //时间
  },
  methods: {
    //获取当前时间
    getCurrentTime() {
      var _this = this
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      //  yy + '/' + mm + '/' +dd + ' ' +  省掉年月日
      _this.gettime = hh + ':' + mf + ':' + ss
      this.value = _this.gettime
      showTime.innerHTML = _this.gettime
      // console.log(_this.gettime)
    },
    // 公告数据 ----|**查询条件：已发布、数据条数**|------
    async getAnnList() {
      await enterpriseEList({ isRelease: '1', pageSize: 1000 }).then(res => {
        if (res.success) {
          console.log('轮播公告列表-->', res.result.records)
          this.annList = res.result.records
          let scrollData = [] //轮播表数据
          // 拿到返回的数据进行遍历并渲染
          this.annList.map(item => {
            var list = [item.id, item.type, item.title, item.createBy, item.createTime]
            scrollData.push(list) //取到的每一个数据放到轮播表数据中
          })
          //轮播表配置
          this.config = {
            oddRowBGC: 'white',
            evenRowBGC: 'white',
            columnWidth: [50, 200, 600, 300, 400],
            align: ['center'],
            rowNum: 6,
            waitTime: 2000,
            data: scrollData //双向绑定(轮播表数据 绑定到配置的 data数据中)
          }
        }
      })
    },

    //轮播图 点击事件
    getMethod(item) {
      this.$refs.DetAnnModal.annVisible = true
      // console.log('轮播自带的数据', item)
      this.$nextTick(() => {
        enterpriseEQueryById({ id: item.row[0] }).then(res => {
          this.$refs.DetAnnModal.annVisible = true
          if (res.success) {
            console.log(res.result)
            this.annDetail = res.result
          }
        })
      })
    },

    //查询日程数据
    getScheduleData() {
      this.$nextTick(() => {
        //发送查询请求
        scheduleGetListByTime(null).then(res => {
          if (res.success) {
            // console.log('查询到的总日程结果', res)
            let list = res.result // 已经的结果
            var eventList = [] // 装新日程的
            // 循环日程
            list.forEach(e => {
              let Object = {
                title: e.title,
                start: e.startTime,
                end: e.endTime,
                id: e.id,
                backgroundColor: e.backgroundColor,
                extendedProps: {
                  status: 'done'
                },
                borderColor: 'none'
              }
              eventList.push(Object) // 把日程推到日程列表
            })
            // console.log('总共的日程', eventList)
            // 刷新 日程列表
            this.calendarOptions.events = eventList
          }
        })
      })
    },

    // 代办数据
    getDataList() {
      this.loading = true
      this.postFormAction('/actTask/todoList', {}).then(res => {
        this.loading = false
        if (res.success) {
          this.todoList = res.result || []
          // console.log('首页 我的待办数字：', this.todoList.length)
          this.total = this.data.leading
          // console.log('系统消息:', this.data)
        }
      })
    },
    // 获取 OA 按钮
    getActiveKeyAll() {
      this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => {
        this.activeKeyAll = []
        if (res.success) {
          var result = res.result || []
          if (result.length > 0) {
            this.activeKeyAll = result
            // this.activeKeyAll.push.apply(this.activeKeyAll,result);
            // console.log(this.activeKeyAll)
            // console.log('OA 4个按钮被渲染')
          }
        }
      })
    },

    handleEvents(info) {
      // console.log('what', info)
      // 打印了事件（完成、位置）
      // this.currentEvents = events
    },
    // 日期点击
    handleDateClick(selectInfo) {
      this.$router.push('/oa/my-plan/schedulePlan')
    },
    //企业公告
    openEnterAnn() {
      this.$router.push('/oa/enterpriseAnnouncement')
    },
    //友情链接
    openMyLinks() {
      this.$router.push('/oa/myLinks')
    },

    //日程计划列表
    openCalTab() {
      this.$router.push('/oa/my-plan/calTable')
    },
    // 系统消息
    loadData() {
      try {
        // 获取系统消息
        getAction(this.url.listCementByUser)
          .then(res => {
            if (res.success) {
              this.msg1Count = res.result.anntMsgTotal
              this.msg2Count = res.result.sysMsgTotal
              // console.log(this.msg2Count)
            }
          })
          .catch(error => {
            console.log('系统消息通知异常', error) // 这行打印permissionName is undefined
            this.stopTimer = true
            console.log('清理timer')
          })
      } catch (err) {
        this.stopTimer = true
        console.log('通知异常', err)
      }
    },
    ...mapGetters(['nickname', 'avatar']),

    //OA图标点击事件
    aClick(v) {
      console.log(v)
      if (!v.routeName) {
        this.$message.warning('该流程信息未配置表单，请联系开发人员！')
        return
      }
      if (v.routeName.indexOf('外部表单') != -1) {
        alert('调用其他项目页面')
      } else if (v.routeName.indexOf('自定义') != -1) {
        this.lcModal.disabled = false
        let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
        this.lcModal.formComponent = com.component
        this.lcModal.title = '发起流程：' + v.name
        this.lcModal.isNew = true
        this.lcModal.processData = v
        this.lcModal.visible = true
      } else {
        this.lcModal.disabled = false
        this.lcModal.formComponent = this.getFormComponent(v.routeName).component
        this.lcModal.title = '发起流程：' + v.name
        this.lcModal.isNew = true
        this.lcModal.processData = v
        this.lcModal.visible = true
      }
      console.log('发起', v)
    },

    //提交后
    afterSub(formData) {
      this.lcModal.visible = false
    },

    // 分页、排序、筛选变化时触发
    handleTableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      // this.loadData();
    },

    // 去处理按钮
    toDealWith() {
      this.$router.push({ path: '/activiti/todoManage' })
    },
    prev() {
      this.calendarApi.prev()
      console.log(this.calendarApi.prev)
    },
    modalFormOk() {}
  }
}
</script>

<style lang="less" scoped>
// 单独创建页面写样式  如下
@import '~@assets/less/mytodo.less';
@import '~@assets/less/common.less';
</style>