MyToDo.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. <template>
  2. <div id="home">
  3. <!-- 第一行 -->
  4. <a-row :gutter="24" class="firstLine">
  5. <!-- 我的 -->
  6. <a-col :xs="24" :sm="24" :md="24" :lg="7" :style="{ marginBottom: '8px', paddingRight: 0 }">
  7. <!-- 等高设置 -->
  8. <a-card title="我的" style="width: 100%;" :bordered="false" :style="{ marginBottom: '8px', height: '264px' }">
  9. <a-row :gutter="24">
  10. <!-- 头像 -->
  11. <a-col :xs="24" :sm="24" :md="12" :lg="14">
  12. <a-row :gutter="24">
  13. <a-col :xs="24" :sm="24" :md="12" :lg="8">
  14. <div class="userImg">
  15. <img src="../../assets/user.jpg" width="50px;" />
  16. </div>
  17. </a-col>
  18. <a-col :xs="24" :sm="24" :md="12" :lg="16">
  19. <div class="userInfo">
  20. <span>{{ userInfo.realname }}</span>
  21. <p>账号:{{ userInfo.username }}</p>
  22. <em>Tel:{{ userInfo.telphone }}</em>
  23. </div>
  24. </a-col>
  25. </a-row>
  26. </a-col>
  27. <!-- 数量 -->
  28. <a-col :xs="24" :sm="24" :md="12" :lg="10" class="msgBox">
  29. <span> {{ todoList.length }}</span>
  30. <p>我的待办</p>
  31. <span>{{ msgTotal }}</span>
  32. <p>系统消息</p>
  33. </a-col>
  34. </a-row>
  35. </a-card>
  36. </a-col>
  37. <!-- 待办 -->
  38. <a-col :xs="24" :sm="24" :md="24" :lg="11" :style="{ marginBottom: '8px', paddingRight: 0 }">
  39. <MyoaTabs />
  40. </a-col>
  41. <!-- 按钮 -->
  42. <a-col :xs="24" :sm="24" :md="24" :lg="6" :style="{ marginBottom: '8px' }">
  43. <!-- 等高设置 -->
  44. <a-card title="OA工作台" :bordered="false" style="height: 264px;">
  45. <div v-for="(item, index) in activeKeyAll" :key="index" class="oaBig">
  46. <a @click.prevent="aClick(item)" class="oaItem fl">
  47. <!-- 图标 -->
  48. <a-avatar shape="square" :size="36" :src="item.iconAddress" />
  49. <h4>{{ item.name }}</h4>
  50. </a>
  51. </div>
  52. </a-card>
  53. </a-col>
  54. </a-row>
  55. <!-- 第二行-->
  56. <a-row :gutter="24" class="secondLine">
  57. <!-- 公告 -->
  58. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="9" :style="{ marginBottom: '8px', paddingRight: 0 }">
  59. <a-card title="企业公告" :bordered="false" style="height:400px;">
  60. <template #extra>
  61. <a href="javascript:void(0);" @click="openEnterAnn">更多</a>
  62. </template>
  63. <div class="dataV">
  64. <dv-scroll-board class="board" :config="config" style="height:300px;" @click="getMethod" />
  65. </div>
  66. </a-card>
  67. </a-col>
  68. <!-- 计划 友情链接 -->
  69. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7" :style="{ marginBottom: '8px' }">
  70. <a-row :gutter="24">
  71. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px', paddingRight: 0 }">
  72. <a-card title="我的计划" :bordered="false" style="width:100%;height:196px;">
  73. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :style="{ marginBottom: '8px', paddingRight: 0 }">
  74. <p>
  75. 上月我的计划:
  76. <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 0 </strong>份
  77. </p>
  78. <p>
  79. 本月我的计划:
  80. <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 1 </strong>份
  81. </p>
  82. </a-col>
  83. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
  84. <p>
  85. 上月他人计划:
  86. <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 0 </strong>份
  87. </p>
  88. <p>
  89. 本月他人计划:
  90. <strong style="color:#fa6b5c;marginRight:4px;textDecoration: underline;"> 2 </strong>份
  91. </p>
  92. </a-col>
  93. </a-card>
  94. </a-col>
  95. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px', paddingRight: 0 }">
  96. <a-card title="友情链接" :bordered="false" style="width:100%;height:196px;" class="links">
  97. <template #extra><a href="javascript:void(0);" @click="openMyLinks">更多</a></template>
  98. <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
  99. <button><a href="http://www.dakabg.com/" target="_blank">哒咔办公</a></button>
  100. <button>
  101. <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
  102. </button>
  103. <button><a href="https://www.11467.com" target="_blank">品医</a></button>
  104. <button><a href="https://www.antgroup.com/" target="_blank">蚂蚁集团</a></button>
  105. <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
  106. <button>
  107. <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
  108. </button>
  109. </a-card>
  110. </a-col>
  111. </a-row>
  112. </a-col>
  113. <!-- 日历 -->
  114. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :style="{ marginBottom: '8px' }">
  115. <a-card title="日程" :bordered="false" style="height:400px;">
  116. <template #extra>
  117. <a href="javascript:void(0);" @click="openCalTab">详情</a>
  118. </template>
  119. <a-row :gutter="24">
  120. <!-- 图片 -->
  121. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  122. <div style="height:186px;">
  123. <div class="tips">
  124. <img src="../../assets/date.jpg" alt="" height="186px;" width="100%" />
  125. <!-- <i id="showTime"></i> -->
  126. </div>
  127. </div>
  128. </a-col>
  129. <!-- 小日历 -->
  130. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  131. <div class="ccfullCalendar">
  132. <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
  133. </div>
  134. </a-col>
  135. </a-row>
  136. </a-card>
  137. </a-col>
  138. </a-row>
  139. <!-- 按钮弹框 -->
  140. <a-modal v-model="lcModal.visible" :title="lcModal.title" :footer="null" :maskClosable="false" width="90%">
  141. <component
  142. :disabled="lcModal.disabled"
  143. v-if="lcModal.visible"
  144. :is="lcModal.formComponent"
  145. :processData="lcModal.processData"
  146. :isNew="lcModal.isNew"
  147. @afterSubmit="afterSub"
  148. @close=";(lcModal.visible = false), (lcModal.disabled = false)"
  149. >
  150. </component>
  151. </a-modal>
  152. <!-- 企业公告详情 弹框-->
  153. <detAnn-modal ref="DetAnnModal" @ok="modalFormOk" :fatherData="annDetail"></detAnn-modal>
  154. </div>
  155. </template>
  156. <script>
  157. import MyoaTabs from '@views/dashboard/MyoaTabs.vue'
  158. import DetAnnModal from '@views/oa/enter-ann/add/detAnnModal.vue'
  159. import { mapGetters } from 'vuex'
  160. import { getAction } from '@/api/manage'
  161. import FullCalendar from '@fullcalendar/vue'
  162. import dayGridPlugin from '@fullcalendar/daygrid'
  163. import interactionPlugin from '@fullcalendar/interaction'
  164. import timeGridPlugin from '@fullcalendar/timegrid'
  165. import SchedulePlan from '@views/oa/my-plan/schedulePlan'
  166. // import '@fullcalendar/core/main.css'
  167. import { scheduleGetListByTime, scheduleQueryById } from '@api/oa/cd-schedule'
  168. import { enterpriseEQueryById } from '@api/oa/cd-enterprise-announcement'
  169. import { enterpriseEList } from '@api/oa/cd-enterprise-announcement'
  170. import '@fullcalendar/daygrid/main.css'
  171. import JEditor from '../../components/jeecg/JEditor.vue'
  172. import '@/assets/less/dataVTable.less' // 修改首页 DataV 轮播表样式
  173. export default {
  174. name: 'Mytodo',
  175. components: {
  176. FullCalendar, //日历
  177. JEditor, //富文本
  178. DetAnnModal, //公告详情弹框
  179. MyoaTabs //我的待办、已办、申请 tabs
  180. },
  181. data() {
  182. return {
  183. timer: '',
  184. value: 0,
  185. annDetail: {}, //公告详情 数据
  186. annList: [], //公告列表 数据
  187. config: {}, //轮播表配置
  188. //日历组件 参数
  189. calendarOptions: {
  190. // 日程数组
  191. events: [
  192. {
  193. title: '啦啦啦啦',
  194. start: '2021-10-13T14:30:00',
  195. end: '2021-10-13T14:30:00',
  196. extendedProps: {
  197. status: 'done'
  198. },
  199. backgroundColor: '#ccd5ae',
  200. borderColor: 'red'
  201. }
  202. ],
  203. // 事件---------------------------------
  204. editable: true, // 是否可以进行(拖动、缩放)修改
  205. eventStartEditable: true, // Event日程开始时间可以改变,默认为true,若为false,则表示开始结束时间范围不能拉伸,只能拖拽
  206. eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变,默认为true,若为false,则表示开始结束时间范围不能拉伸,只能拖拽
  207. selectable: true, // 是否可以选中日历格
  208. selectMirror: true,
  209. selectMinDistance: 0, // 选中日历格的最小距离
  210. weekends: true,
  211. navLinks: false, // 天链接
  212. selectHelper: false,
  213. selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠,默认为true,允许
  214. dayMaxEvents: true,
  215. dateClick: this.handleDateClick, // 日期点击
  216. eventsSet: this.handleEvents, // 事件点击
  217. eventClick: this.handleEventClick, // 日程点击信息展示
  218. eventDrop: this.handleEventDrop, // 日程拖动事件
  219. eventResize: this.eventResize, // 日程缩放事件
  220. // 引入的插件
  221. plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  222. // 日历头部按钮位置
  223. headerToolbar: {
  224. /* -----------------------
  225. left: 'prev,next',
  226. center: 'title',
  227. right: 'dayGridMonth'
  228. -------------------------*/
  229. left: '',
  230. center: '',
  231. right: ''
  232. },
  233. // 日历头部按钮中文转换
  234. // buttonText: {
  235. // month: '月'
  236. // },
  237. initialView: 'dayGridMonth', // 指定默认显示视图
  238. locale: 'zh-ch', // 切换语言,当前为中文
  239. firstDay: '1', // 设置一周中显示的第一天是周几,周日是0,周一是1
  240. weekNumberCalculation: 'ISO', // 与 firstDay 配套使用
  241. // eventColor: 'red', // 全部日历日程背景色
  242. timeGridEventMinHeight: '20', // 设置事件的最小高度
  243. // aspectRatio: '8.5', // 设置日历单元格宽高比
  244. displayEventTime: false, // 是否显示事件时间
  245. allDaySlot: false, // 周、日视图时,all-day不显示
  246. eventLimit: true, // 设置月日程,与all-day slot 的最大显示数量,超过的通过弹窗展示
  247. eventTimeFormat: {
  248. hour: 'numeric',
  249. minute: '2-digit',
  250. hour12: false
  251. },
  252. slotLabelFormat: {
  253. hour: '2-digit',
  254. minute: '2-digit',
  255. meridiem: false,
  256. hour12: false // 设置时间为 24小时制
  257. }
  258. },
  259. userInfo: this.$store.getters.userInfo,
  260. todoList: [],
  261. activeKeyAll: [],
  262. msg1Count: '0',
  263. msg2Count: '0',
  264. url: {
  265. listCementByUser: '/sys/annountCement/listByUser'
  266. },
  267. //按钮弹框
  268. lcModal: {
  269. title: '',
  270. visible: false,
  271. disabled: false,
  272. formComponent: null,
  273. isNew: false
  274. },
  275. data: [], // 表单数据
  276. total: 0, // 表单数据总数
  277. ipagination: {
  278. current: 1,
  279. pageSize: 3,
  280. pageSizeOptions: ['10', '20', '30'],
  281. showTotal: (total, range) => {
  282. return range[0] + '-' + range[1] + ' 共' + total + '条'
  283. },
  284. showQuickJumper: true,
  285. showSizeChanger: true,
  286. total: 0
  287. }
  288. }
  289. },
  290. created() {
  291. this.getScheduleData() //查询日程数据
  292. this.getDataList() //待办数据
  293. this.getActiveKeyAll() //OA按钮
  294. this.getAnnList() //渲染公告(已发布的)
  295. },
  296. computed: {
  297. // 系统消息计算
  298. msgTotal() {
  299. return parseInt(this.msg1Count) + parseInt(this.msg2Count)
  300. },
  301. scroll: function() {
  302. var width = window.innerWidth
  303. // ant-table
  304. let $antTable = window.document.getElementsByClassName('ant-table')
  305. if ($antTable[0]) {
  306. width = $antTable[0].clientWidth
  307. }
  308. return {
  309. x: 1160,
  310. y: window.innerHeight / 2
  311. }
  312. },
  313. innerHeight: function() {
  314. var innerHeight = window.innerHeight
  315. return innerHeight
  316. }
  317. },
  318. mounted() {
  319. this.loadData()
  320. this.getAnnList()
  321. // this.timer = setInterval(this.getCurrentTime, 1000) //时间
  322. },
  323. methods: {
  324. //获取当前时间
  325. getCurrentTime() {
  326. var _this = this
  327. let yy = new Date().getFullYear()
  328. let mm = new Date().getMonth() + 1
  329. let dd = new Date().getDate()
  330. let hh = new Date().getHours()
  331. let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
  332. let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
  333. // yy + '/' + mm + '/' +dd + ' ' + 省掉年月日
  334. _this.gettime = hh + ':' + mf + ':' + ss
  335. this.value = _this.gettime
  336. showTime.innerHTML = _this.gettime
  337. // console.log(_this.gettime)
  338. },
  339. // 公告数据 ----|**查询条件:已发布、数据条数**|------
  340. async getAnnList() {
  341. await enterpriseEList({ isRelease: '1', pageSize: 1000 }).then(res => {
  342. if (res.success) {
  343. console.log('轮播公告列表-->', res.result.records)
  344. this.annList = res.result.records
  345. let scrollData = [] //轮播表数据
  346. // 拿到返回的数据进行遍历并渲染
  347. this.annList.map(item => {
  348. var list = [item.id, item.type, item.title, item.createBy, item.createTime]
  349. scrollData.push(list) //取到的每一个数据放到轮播表数据中
  350. })
  351. //轮播表配置
  352. this.config = {
  353. oddRowBGC: 'white',
  354. evenRowBGC: 'white',
  355. columnWidth: [50, 200, 600, 300, 400],
  356. align: ['center'],
  357. rowNum: 6,
  358. waitTime: 2000,
  359. data: scrollData //双向绑定(轮播表数据 绑定到配置的 data数据中)
  360. }
  361. }
  362. })
  363. },
  364. //轮播图 点击事件
  365. getMethod(item) {
  366. this.$refs.DetAnnModal.annVisible = true
  367. // console.log('轮播自带的数据', item)
  368. this.$nextTick(() => {
  369. enterpriseEQueryById({ id: item.row[0] }).then(res => {
  370. this.$refs.DetAnnModal.annVisible = true
  371. if (res.success) {
  372. console.log(res.result)
  373. this.annDetail = res.result
  374. }
  375. })
  376. })
  377. },
  378. //查询日程数据
  379. getScheduleData() {
  380. this.$nextTick(() => {
  381. //发送查询请求
  382. scheduleGetListByTime(null).then(res => {
  383. if (res.success) {
  384. // console.log('查询到的总日程结果', res)
  385. let list = res.result // 已经的结果
  386. var eventList = [] // 装新日程的
  387. // 循环日程
  388. list.forEach(e => {
  389. let Object = {
  390. title: e.title,
  391. start: e.startTime,
  392. end: e.endTime,
  393. id: e.id,
  394. backgroundColor: e.backgroundColor,
  395. extendedProps: {
  396. status: 'done'
  397. },
  398. borderColor: 'none'
  399. }
  400. eventList.push(Object) // 把日程推到日程列表
  401. })
  402. // console.log('总共的日程', eventList)
  403. // 刷新 日程列表
  404. this.calendarOptions.events = eventList
  405. }
  406. })
  407. })
  408. },
  409. // 代办数据
  410. getDataList() {
  411. this.loading = true
  412. this.postFormAction('/actTask/todoList', {}).then(res => {
  413. this.loading = false
  414. if (res.success) {
  415. this.todoList = res.result || []
  416. // console.log('首页 我的待办数字:', this.todoList.length)
  417. this.total = this.data.leading
  418. // console.log('系统消息:', this.data)
  419. }
  420. })
  421. },
  422. // 获取 OA 按钮
  423. getActiveKeyAll() {
  424. this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => {
  425. this.activeKeyAll = []
  426. if (res.success) {
  427. var result = res.result || []
  428. if (result.length > 0) {
  429. this.activeKeyAll = result
  430. // this.activeKeyAll.push.apply(this.activeKeyAll,result);
  431. // console.log(this.activeKeyAll)
  432. // console.log('OA 4个按钮被渲染')
  433. }
  434. }
  435. })
  436. },
  437. handleEvents(info) {
  438. // console.log('what', info)
  439. // 打印了事件(完成、位置)
  440. // this.currentEvents = events
  441. },
  442. // 日期点击
  443. handleDateClick(selectInfo) {
  444. this.$router.push('/oa/my-plan/schedulePlan')
  445. },
  446. //企业公告
  447. openEnterAnn() {
  448. this.$router.push('/oa/enterpriseAnnouncement')
  449. },
  450. //友情链接
  451. openMyLinks() {
  452. this.$router.push('/oa/myLinks')
  453. },
  454. //日程计划列表
  455. openCalTab() {
  456. this.$router.push('/oa/my-plan/calTable')
  457. },
  458. // 系统消息
  459. loadData() {
  460. try {
  461. // 获取系统消息
  462. getAction(this.url.listCementByUser)
  463. .then(res => {
  464. if (res.success) {
  465. this.msg1Count = res.result.anntMsgTotal
  466. this.msg2Count = res.result.sysMsgTotal
  467. // console.log(this.msg2Count)
  468. }
  469. })
  470. .catch(error => {
  471. console.log('系统消息通知异常', error) // 这行打印permissionName is undefined
  472. this.stopTimer = true
  473. console.log('清理timer')
  474. })
  475. } catch (err) {
  476. this.stopTimer = true
  477. console.log('通知异常', err)
  478. }
  479. },
  480. ...mapGetters(['nickname', 'avatar']),
  481. //OA图标点击事件
  482. aClick(v) {
  483. console.log(v)
  484. if (!v.routeName) {
  485. this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  486. return
  487. }
  488. if (v.routeName.indexOf('外部表单') != -1) {
  489. alert('调用其他项目页面')
  490. } else if (v.routeName.indexOf('自定义') != -1) {
  491. this.lcModal.disabled = false
  492. let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
  493. this.lcModal.formComponent = com.component
  494. this.lcModal.title = '发起流程:' + v.name
  495. this.lcModal.isNew = true
  496. this.lcModal.processData = v
  497. this.lcModal.visible = true
  498. } else {
  499. this.lcModal.disabled = false
  500. this.lcModal.formComponent = this.getFormComponent(v.routeName).component
  501. this.lcModal.title = '发起流程:' + v.name
  502. this.lcModal.isNew = true
  503. this.lcModal.processData = v
  504. this.lcModal.visible = true
  505. }
  506. console.log('发起', v)
  507. },
  508. //提交后
  509. afterSub(formData) {
  510. this.lcModal.visible = false
  511. },
  512. // 分页、排序、筛选变化时触发
  513. handleTableChange(pagination, filters, sorter) {
  514. if (Object.keys(sorter).length > 0) {
  515. this.isorter.column = sorter.field
  516. this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
  517. }
  518. this.ipagination = pagination
  519. // this.loadData();
  520. },
  521. // 去处理按钮
  522. toDealWith() {
  523. this.$router.push({ path: '/activiti/todoManage' })
  524. },
  525. prev() {
  526. this.calendarApi.prev()
  527. console.log(this.calendarApi.prev)
  528. },
  529. modalFormOk() {}
  530. }
  531. }
  532. </script>
  533. <style lang="less" scoped>
  534. // 单独创建页面写样式 如下
  535. @import '~@assets/less/mytodo.less';
  536. @import '~@assets/less/common.less';
  537. </style>