月报：历史记录

src/api/qualityMonthlyReport/edit.js

@@ -232,3 +232,24 @@ export function pullSubTitle(data) {
     data
   })
 }
+
+// 月报历史记录列表
+export function getHistory(params) {
+  return request({
+    url: projectManagementUrl + '/monthlyReport/getHistory',
+    // url: 'http://127.0.0.1:4523/mock/368525/monthlyReport/getHistory',
+    method: 'get',
+    timeout: '100000',
+    params
+  })
+}
+// 月报历史记录详情
+export function getHistoryDetail(params) {
+  return request({
+    url: projectManagementUrl + '/monthlyReport/getHistoryDetail',
+    // url: 'http://127.0.0.1:4523/mock/368525/monthlyReport/getHistoryDetail',
+    method: 'get',
+    timeout: '100000',
+    params
+  })
+}

src/store/modules/monthlyReport/baseMixin/actions.js

@@ -13,7 +13,8 @@ import {
   getSubReportInfo,
   updateSubReport,
   pullDataAgain,
-  pullSubTitle
+  pullSubTitle,
+  getHistoryDetail
 } from '@/api/qualityMonthlyReport/edit'
 // import { memberQueryMemberInfoByIDAPorName } from '@/api/projectIndex'
 import { getAvaliableInfo, getMonthlyReportVersion } from '@/api/qualityMonthlyReport'
@@ -34,7 +35,7 @@ export default {
   // 月报数据获取
   async initPageData(
     { commit, state, dispatch },
-    { id, subReportId, subActive }
+    { id, subReportId, subActive, windowHref }
   ) {
     dispatch('setSubReportInfo', id)
     const { pageType } = state
@@ -47,7 +48,8 @@ export default {
       dispatch('getSubReportData', {
         id,
         subReportId,
-        tabsActive: `tab_${subActive || '上月问题跟进'}`
+        tabsActive: `tab_${subActive || '上月问题跟进'}`,
+        windowHref
       })
     } else {
       const res = await getMonthlyReport(id)
@@ -64,21 +66,20 @@ export default {
     }
   },
   // 页面切换 TAB_ACTIVE_CHANGE
-  tabActiveChange({ commit, state, dispatch }, { id, tabsActive }) {
+  tabActiveChange({ commit, state, dispatch }, { id, tabsActive, windowHref }) {
     const { pageType } = state
     if (pageType === 'editAll') {
       return commit('TAB_ACTIVE_CHANGE', tabsActive)
     }
     if (pageType === 'readAll') {
-      dispatch('getSubReportData', { id, tabsActive })
+      dispatch('getSubReportData', { id, tabsActive, windowHref })
     }
   },
   // 获取查看月报数据
-  async getSubReportData({ dispatch, commit, state }, { id, subReportId, tabsActive }) {
+  async getSubReportData({ dispatch, commit, state }, { id, subReportId, tabsActive, windowHref }) {
     const { pageType } = state
     let params = {}
-    const method =
-      pageType === 'readAll' ? getAllSubReportCatalog : getSubReport
+    let method = pageType === 'readAll' ? getAllSubReportCatalog : getSubReport
     if (pageType === 'read' || pageType === 'edit') {
       params = {
         subReportId
@@ -93,6 +94,12 @@ export default {
         catalogTitle: setTabActive('tab_', tabsActive)
       }
     }
+    if (windowHref.indexOf('isHistory=new') > -1) {
+      method = getHistoryDetail
+      params = {
+        historyId: subReportId
+      }
+    }
     const res = await method(params)
     if (res.code === 200) {
       // 单个月报与完整月报数据梳理
@@ -142,6 +149,7 @@ export default {
       params.saveAsTargetList = _.cloneDeep(state.saveAsTargetList)
     }
     params.dependence = null
+    console.log(params)
     const res = await updateSubReport(params)
     if (res.code === 200) {
       callback()

src/views/monthlyReport/childrenPage/editReport/components/historyRecord.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="history-wrapper">
+    <section class="main-section">
+      <div class="el-main-title">
+        <div class="title-left-icon" />
+        <div class="title-left-name">动态</div>
+      </div>
+      <div class="comments-margin">
+        <el-tabs v-model="tabPosition">
+          <el-tab-pane label="评论" name="first">
+            <comments-and-changes v-if="$route.query.subReportId" :data="{type: 8, id: $route.query.subReportId}" />
+          </el-tab-pane>
+          <el-tab-pane label="变更记录" name="second">
+            <div v-if="historyList && historyList.length" class="history-list-wrapper">
+                <div v-for="(item, itemIndex) in historyList" :key="itemIndex" class="history-wrapper">
+                  <div class="operationTypeStr">{{ item.operationTypeStr }}：</div>
+                  <div class="creatorCn">{{ item.creatorCn }}：</div>
+                  <div class="content-wrapper">
+                    <span>{{ item.content }}</span>
+                    <!-- <div class="isHove el-button--text" type="text">内容查看</div> -->
+                    <div v-if="item.operationTypeStr === '更新'" class="isHove el-button--text" type="text" @click="showHistory(item)">内容查看</div>
+                  </div>
+                  <div class="operationTime">{{ item.operationTime }}</div>
+                </div>
+
+            </div>
+            <!-- <record v-if="form_query.id" :id="form_query.id" ref="record" :name="7" /> -->
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { getHistory } from '@/api/qualityMonthlyReport/edit'
+import commentsAndChanges from '@/components/commentsAndChanges/index.vue'
+import { locale } from 'dayjs'
+
+export default {
+  name: 'History',
+  components: {
+    commentsAndChanges
+    // record
+  },
+  data() {
+    return {
+      historyList: [],
+      form_query: {},
+      tabPosition: 'first'
+    }
+  },
+  computed: {
+    tabsActive() {
+      return this.$store.state.monthlyReportEdit.tabsActive
+    },
+    pageType() {
+      return this.$store.state.monthlyReportEdit.pageType
+    },
+    pageDate() {
+      return this.$store.state.monthlyReportEdit.pageDate
+    }
+  },
+  watch: {
+    tabPosition() {
+      if (this.tabPosition === 'second') {
+        this.getHistoryFn()
+      }
+    }
+  },
+  mounted() {
+    this.getHistoryFn()
+  },
+  methods: {
+    async getHistoryFn() {
+      const { subReportId } = this.$route.query
+      if (subReportId) {
+        const res = await getHistory({
+          subMonthlyReportId: subReportId
+        })
+        if (res.code === 200) {
+          this.historyList = res.data
+        }
+
+        console.log(res)
+      }
+    },
+    // 查看历史月报详情
+    showHistory(item) {
+      const url = `${location.origin}/#/monthlyReport/edit?pageType=read&reportId=334&subReportId=${item.historyId}&isHistory=new`
+      window.open(url, '_blank')
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+.history-wrapper {
+  background-color: white;
+
+  .main-section{
+    margin-left: 0;
+    margin-bottom: 0;
+
+    .el-main-title {
+      margin-left: 0;
+      margin-top: 40px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .history-list-wrapper {
+
+    .history-wrapper{
+      display: flex;
+
+      > * {
+        padding: 10px 0;
+        margin-right: 10px;
+        height: initial;
+      }
+      .operationTypeStr {
+        color: #FAAD14;
+      }
+      .content-wrapper {
+        > * {
+          // padding: 10px 0;
+           height: initial;
+          display: inline-block;
+          margin-right: 10px;
+        }
+      }
+    }
+     // 全局动效
+  .isHove{
+    &:hover{
+      cursor: pointer;
+      display: inline-block;
+      animation-name: example;
+      // animation-iteration-count:1;
+      animation-duration: 300ms;
+    }
+  }
+  .noHover {
+    cursor: auto!important;
+  }
+  @keyframes example {
+  0% {
+    transform: scale(1.2);
+    // transform: rotateX(60deg);
+  }
+  50%  {
+    transform: scale(1.3);
+    // transform: rotateX(90deg);
+  }
+  100% {
+    transform: scale(1);
+    // transform: rotateX(0);
+  }
+}
+  }
+}
+</style>

src/views/monthlyReport/childrenPage/editReport/index.vue

@@ -100,6 +100,7 @@
             />
           </div>
           <div v-else style="margin-top: 30px;">暂无数据！</div>
+          <historyRecord v-if="pageType.search(/All/) < 0 && tabPageData && windowHref.indexOf('isHistory=new') < 0" />
         </div>
         <div class="right-wrapper">
           <Affix
@@ -221,6 +222,7 @@ import Affix from '@/components/affix/affix'
 import Anchor from './components/anchor'
 import Menu from './components/menu'
 import Core from './components/core'
+import historyRecord from './components/historyRecord'
 import Clickoutside from 'element-ui/src/utils/clickoutside'
 import normalDialog from '@/components/dialog/normalDialog'
 import { projectManagementUrl } from '@/apiConfig/api'
@@ -234,6 +236,7 @@ export default {
     Anchor,
     Menu,
     Core,
+    historyRecord,
     normalDialog
   },
   directives: { Clickoutside },
@@ -245,7 +248,8 @@ export default {
       bodyLoading: false,
       monthlyReportPreView: null,
       monthlyReportPrePdfView: null,
-      scrollTop: 0
+      scrollTop: 0,
+      windowHref: ''
     }
   },
   computed: {
@@ -291,12 +295,13 @@ export default {
     if (this.$route.query.pageType === 'readAll') {
       this.SET_SUB_TITLE('查看完整月报')
     }
-
+    this.windowHref = window.location.href
     if (this.$route.query.reportId || this.$route.query.subReportId) {
       this.initPageData({
         id: this.$route.query.reportId,
         subActive: this.$route.query.subActive,
-        subReportId: this.$route.query.subReportId
+        subReportId: this.$route.query.subReportId,
+        windowHref: window.location.href
       })
     }
     // 数据埋点
@@ -477,7 +482,8 @@ export default {
         this.$store.dispatch('monthlyReportEdit/tabActiveChange', {
           ...this.$route.query,
           id: this.$route.query.reportId,
-          tabsActive: tab.name
+          tabsActive: tab.name,
+          windowHref: window.location.href
         })
         setTimeout(() => {
           this.bodyLoading = false