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: '250px' }">
          <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.phone }}</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="常用流程" :bordered="false" style="height: 250px;">
          <div v-for="(item, index) in activeKeyAll.slice(5, 10)" :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> -->
            <a href="javascript:void(0);" @click="()=>modal.visible=true">更多</a>
          </template>

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

      <!-- 计划  友情链接 -->
      <div>
        <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:176px">
                <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;">{{ mlp }}</strong
                    >份
                  </p>
                  <p>
                    本月我的计划：
                    <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;">{{ mtp }}</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;">{{ olp }}</strong
                    >份
                  </p>
                  <p>
                    本月他人计划：
                    <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;">{{ otp }}</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:216px">
                <template #extra><a href="javascript:void(0);"  @click="()=>modal1.visible=true">更多</a></template>
                <!-- <template #extra><a href="javascript:void(0);" @click="openMyLinks">更多</a></template> -->
                <div v-for="item in linksList.slice(0, 8)" :key="item.id" class="links">
                  <button class="itemLink">
                    <a href="#" @click="openItemLink(item)">
                      <span width="2em"> {{ item.name }}</span>
                    </a>
                  </button>
                </div>
              </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" class="dataStyle">
            <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 class="ccfullCalendar">
                  <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
                </div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </div>
    </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>
    <!-- 企业公告更多 弹框-->
    <j-modal
      :visible.sync="modal.visible"
      :width="1300"
      :title="modal.title"
      :fullscreen.sync="modal.fullscreen"
      :switchFullscreen="modal.switchFullscreen"
    >
    
    <dv-scroll-board class="board" :config="config" style="height:280px;" @click="getMethod" />
      <!-- <template v-for="(i,k) of 30">
        <p :key="k">这是主体内容，高度是自适应的</p>
      </template> -->
    
    </j-modal>
    <!-- 友情链接更多 弹框-->
    <j-modal
      :visible.sync="modal1.visible"
      :width="1300"
      :title="modal1.title"
      :fullscreen.sync="modal1.fullscreen"
      :switchFullscreen="modal1.switchFullscreen"
    >
    
    <div v-for="item in linksList.slice(0, 8)" :key="item.id" class="links">
      <button class="itemLink">
        <a href="#" @click="openItemLink(item)">
          <span width="2em"> {{ item.name }}</span>
        </a>
      </button>
    </div>
    
    </j-modal>
  </div>
</template>

<script>
import Vue from 'vue'
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, scheduleGetLastMonth } 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 轮播表样式
import { getUserPermissionByTokenBottom, getListByCreateBy } from '@api/api.js'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { linksList } from '@api/oa/cd_links.js'
export default {
  name: 'Mytodo',
  components: {
    FullCalendar, //日历
    JEditor, //富文本
    DetAnnModal, //公告详情弹框
    MyoaTabs //我的待办、已办、申请 tabs
  },
  data() {
    return {
      mlp: '', // 上月计划数量
      mtp: '', //本月我的计划
      olp: '', //上月他计划
      otp: '', //本月他计划
      modal: {
          title: '企业公告',
          visible: false,
          fullscreen: false,
          switchFullscreen: true,
        },
        modal1: {
            title: '友情链接',
            visible: false,
            fullscreen: false,
            switchFullscreen: true,
          },
      menuALL: [], //所有菜单
      // value: 0,
      annDetail: {}, //公告详情 数据
      annList: [], //公告列表 数据
      linksList: [], //友情链接 数据
      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() //渲染公告(已发布)
    this.getFooterNav() // 获取快捷导航
    this.getMyLinks() //友情链接(已发布)
    this.getMyPlan() //我的计划数据
  },
  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()
  },
  methods: {
    // 我的计划 数据
    getMyPlan() {
      return new Promise(resolve => {
        /*--------------------------------------------------------- 
          createBy:'' ,人员账号(不传则查询全部人员)
          whereTimeType:'',时间类型（0无时间筛选  1查询上月 2本月）
        ----------------------------------------------------------*/

        // 我上月计划
        scheduleGetLastMonth({ createBy: this.userInfo.username, whereTimeType: '1' }).then(res => {
          console.log('上月我计划res', res)
          // console.log('this.userInfo.username', this.userInfo.username)
          if (res.success) {
            this.mlp = res.result
          }
          resolve()
        })

        // 我本月计划
        scheduleGetLastMonth({ createBy: this.userInfo.username, whereTimeType: '2' }).then(res => {
          console.log('本月我计划', res)
          if (res.success) {
            this.mtp = res.result
          }
          resolve()
        })

        // 他人上月计划 他人计划减一下我的计划数量
        scheduleGetLastMonth({ createBy: !this.userInfo.username, whereTimeType: '1' }).then(res => {
          console.log('上月他计划', res)
          if (res.success) {
            // this.olp = res.result - this.mlp
            this.olp = res.result
          }
          resolve()
        })

        // 他人本月计划
        scheduleGetLastMonth({ createBy: !this.userInfo.username, whereTimeType: '2' }).then(res => {
          console.log('本月他计划', res)
          if (res.success) {
            // this.otp = res.result - this.mtp
            this.otp = res.result
          }
          resolve()
        })
      })
    },

    // 友情链接跳转
    openItemLink(e) {
      window.open(e.link, '_blank') //新窗口打开
      console.log('e.link', e.link)
    },
    // 查询友情链接
    async getMyLinks() {
      // params:{xx1:'',xx2:'',......}
      // isRelease为 1  已发布（渲染）
      await linksList({ isRelease: '1' }).then(res => {
        console.log('友情链接后台返回结果', res)
        this.linksList = res.result.records
        console.log('this.linksList', this.linksList)
      })
    },

    // 获取底部快捷菜单
    async getFooterNav() {
      await getListByCreateBy().then(res => {
        if (res.success) {
          console.log('底部快捷菜单', res)
          this.selectList = res.result
        }
      })
    },

    // 公告数据 ----|**查询条件：已发布、数据条数**|------
    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 annType = ''
            if (item.type == '人事') {
              annType =
                '<span style="color:rgba(128, 0, 128,.3);border:1px solid rgba(128, 0, 128,.3);padding:0 4px;border-radius:3px;">人事</span>'
            }
            if (item.type == '财务') {
              annType =
                '<span style="color:rgba(19, 194, 197,.6);border:1px solid rgba(19, 194, 197,.6);padding:0 4px;border-radius:3px;">财务</span>'
            }
            if (item.type == '项目') {
              annType =
                '<span style="color:rgba(255, 165, 0,.8);border:1px solid rgba(255, 165, 0,.8);padding:0 4px;border-radius:3px;">项目</span>'
            }
            var list = [item.id, annType, item.title, item.createBy, item.createTime]

            scrollData.push(list) //取到的每一个数据放到轮播表数据中
          })
          //轮播表配置
          this.config = {
            oddRowBGC: 'white',
            evenRowBGC: 'white',
            columnWidth: [50, 200, 600, 300, 400],
            align: ['center'],
            rowNum: 8,
            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
          }
        })
      })
    },

    // 代办数据
    async getDataList() {
      this.loading = true
      await 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 按钮
    async getActiveKeyAll() {
      await 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
          }
        }
      })
    },

    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/common.less';
// 单独首页样式
@import '~@assets/less/mytodo.less';

.contain {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
}
</style>