123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564 |
- <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>
|