Merge branch 'http_mock' into http_test

src/components/select/searchPeople.vue

@@ -104,9 +104,8 @@ export default {
   methods: {
     remoteMethod: _.debounce(function(query, initMore = false) {
       query !== '' ? this.getMember(query, initMore) : this.options = []
-    }, 2000),
+    }, 700),
     searchPeople(query, initMore = false) {
-      this.loading = true
       this.remoteMethod(query, initMore)
     },
     initMore(arr) { // 当多人时候，对数组每一个人员进行搜索
@@ -117,6 +116,7 @@ export default {
       }
     },
     async getMember(query, initMore = false) {
+      this.loading = true
       let res = null
       if (typeof query === 'string') {
         res = await memberQueryMemberInfoByIDAPorName({ memberIDAP: query })
@@ -126,7 +126,9 @@ export default {
       if (res.data === null) {
         return
       }
-      this.loading = false
+      setTimeout(() => {
+        this.loading = false
+      }, 300)
       // 去重
       this.arrayNonRepeatfy(res.data, initMore)
       // this.options = res.data
@@ -139,6 +141,7 @@ export default {
     arrayNonRepeatfy(data, initMore = false) {
       // this.options = initMore ? data.map(e => e) : Array.from(new Set([...this.options, ...data]))
       this.options = data.map(e => e)
+      this.loading = false
       // console.log(this.options, data, 139)
       // const weakMap = new Map()
       // for (const item of data) {

src/store/modules/monthlyReport/edit/index.js

@@ -1012,7 +1012,6 @@ export default {
       let { subReportId } = route.query
       const { pageType } = route.query
       const [tabKey, subTabKey] = state.subTabsActive
-      console.log(state, 1016)
       // 查询
       if (!subReportId) {
         if (pageType !== 'readAll') {

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

@@ -0,0 +1,486 @@
+<template>
+  <div
+    v-if="indexShow"
+    ref="pageWrapper"
+    v-loading="loading"
+    class="page-wrapper"
+    @click.stop="$store.commit('monthlyReportEdit/INIT_EDIT_KEYS')"
+  >
+    <headerCom :key="subTitle" title="月报" :sub-title="subTitle" :address="address" />
+    <div class="content-wrapper">
+      <el-tabs v-if="pageType.search(/All/) > -1" :value="tabsActive" @tab-click="tabClick">
+        <el-tab-pane v-for="item in tabsList" :key="item.name" :label="item.label" :name="item.name" />
+      </el-tabs>
+      <div v-loading="bodyLoading" class="body-wrapper">
+        <div class="left-wrapper">
+          <div v-if="tabPageShow">
+            <Core
+              v-for="(item, index) in tabPageData.children"
+              :key="item.domKey"
+              :dom-index="index"
+              :base-data="item"
+            />
+          </div>
+          <div v-else style="margin-top: 30px;">暂无数据！</div>
+        </div>
+        <div class="right-wrapper">
+          <Affix
+            ref="affix"
+            v-clickoutside="$refs.menu && $refs.menu.closeMenu"
+            :listen-time="pageType.search(/read/) ? 5 : 5"
+            :offset-top="134"
+            :target="() => $refs && $refs.pageWrapper && $refs.pageWrapper.parentNode"
+            @change="userFun"
+          >
+            <div class="set_scroll" style="max-height: 570px;overflow-y: scroll;">
+              <Anchor
+                :list="tabPageData && tabPageData.children"
+                :active="anchorActive"
+                @change="anchorChange"
+                @openMenu="openMenu"
+              />
+              <Menu ref="menu" />
+            </div>
+          </Affix>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type='text/javascript'>
+import { mapState, mapMutations, mapActions } from 'vuex'
+import headerCom from '../../components/header'
+import Affix from '@/components/affix/affix'
+import Anchor from '../editReport/components/anchor'
+import Menu from '../editReport/components/menu'
+import Core from '../editReport/components/core'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+import { projectManagementUrl } from '@/apiConfig/api'
+import { getMonthlyReportPreView, getMonthlyReportPrePdfView } from '@/api/qualityMonthlyReport/edit'
+
+export default {
+  name: '',
+  components: {
+    headerCom,
+    Affix,
+    Anchor,
+    Menu,
+    Core
+  },
+  directives: { Clickoutside },
+  data() {
+    // this.userFun = _.debounce(this.userFun, 300)
+    return {
+      /* 右侧列表页数据 */
+      anchorActive: '',
+      bodyLoading: false,
+      monthlyReportPreView: null,
+      monthlyReportPrePdfView: null,
+      scrollTop: 0
+    }
+  },
+  computed: {
+    tabPageShow() {
+      return this.tabPageData && this.tabPageData.children && this.tabPageData.children.length
+    },
+    address() {
+      let pathName = '/monthlyReport/index'
+      if (this.$route.query.reportId) {
+        pathName += `?reportId=${this.$route.query.reportId}`
+      }
+      return pathName
+    },
+    ...mapState('monthlyReportEdit',
+      ['pageDate', 'tabPageData', 'subTitle', 'tabsList', 'tabsActive', 'treeData', 'subTabsActive', 'domKeys', 'offsetList', 'pageType', 'subReportInfo', 'roleCode', 'loading']
+    )
+  },
+  watch: {
+    subTabsActive() {
+      this.$refs.affix.init()
+    }
+  },
+  created() {
+    this.INIT_STATE_DATA()
+    this.SET_LOADING(true)
+    this.indexShow = true
+    // 默认获取用户权限
+    this.getUserPermission()
+    // 获取部门数据
+    this.setSelectEnum()
+  },
+  mounted() {
+    /*
+     * read: 查看子月报
+     * readAll：查看完整月报
+     * edit：编辑子月报
+     * editAll：编辑完整月报
+     * */
+    if (this.$route.query.pageType) {
+      this.SET_PAGE_TYPE(this.$route.query.pageType)
+    }
+    // 查看
+    if (this.$route.query.pageType === 'readAll') {
+      this.SET_SUB_TITLE('查看完整月报')
+    }
+
+    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
+      })
+    }
+    // 数据埋点
+    this.monthlyReportBuriedPoint()
+    // 防止页面后退
+    if (this.$route.query.pageType.search(/edit/) > -1) {
+      history.pushState(null, null, document.URL)
+      window.addEventListener('popstate', function() {
+        history.pushState(null, null, document.URL)
+      })
+    }
+  },
+  destroyed() {
+    this.indexShow = false
+    this.INIT_STATE_DATA()
+    // 判断当前页面是否为新建页面
+    if (this.$route.query.type && this.$route.query.type === 'create') {
+      this.deleteReport({ isMsg: false })
+    }
+    // 销毁组件时，取消浏览器前进后端拦截事件
+    window.removeEventListener('popstate', function() {
+      history.pushState(null, null, document.URL)
+    })
+  },
+  methods: {
+    ...mapMutations('monthlyReportEdit',
+      ['INIT_STATE_DATA', 'SET_LOADING', 'SET_PAGE_TYPE', 'SET_SUB_TITLE']
+    ),
+    ...mapActions('monthlyReportEdit',
+      ['getUserPermission', 'deleteReport', 'setSelectEnum', 'initPageData', 'upDateReport', 'upDateSubReport', 'confirmReport']
+    ),
+    setInit() {
+      // this.$store.commit('monthlyReportEdit/INIT_EDIT_KEYS')
+      // window.addEventListener('click', () => {
+      //   this.$refs.menu.show = true
+      //   console.log(127)
+      // })
+    },
+    anchorChange(item) {
+      // 获取元素到文档区域的坐标
+      const getPosition = (element) => {
+        var actualLeft = element.offsetLeft
+        var actualTop = element.offsetTop
+        var current = element.offsetParent // 取得元素的offsetParent
+        // 一直循环直到根元素
+        while (current !== null) {
+          actualLeft += current.offsetLeft
+          actualTop += current.offsetTop
+          current = current.offsetParent
+        }
+        // 返回包含left、top坐标的对象
+        return {
+          left: actualLeft,
+          top: actualTop
+        }
+      }
+      this.anchorActive = item.domKey
+      const anchor = document.getElementById(`${item.domKey}`) // 参数为要跳转到的元素id
+
+      if (!anchor) {
+        return (this.$el.parentNode.scrollTop = 0)
+      }
+      const { top } = getPosition(anchor)
+      this.$el.parentNode.scrollTop = top // chrome
+    },
+    openMenu({ event, item }) {
+      this.$refs.menu.init({ event, item })
+      // console.log(event, item)
+    },
+    userFun({ scrollTop }) {
+      this.$nextTick(() => {
+        if (!this.tabPageData || !this.tabPageData.children) return false
+        this.$refs.menu && this.$refs.menu.closeMenu()
+        // this.anchorActive = ''
+        const getOffsetTop = (id) => {
+          const dom = document.getElementById(id)
+          if (!dom) return 0.9527
+          return dom.getBoundingClientRect().top
+        }
+        const setActive = (key) => {
+          const offsetTop = getOffsetTop(key)
+          if (offsetTop && offsetTop !== 0.9527 && Math.abs(offsetTop) < 50) {
+            this.anchorActive = key
+            return
+          }
+        }
+        const setList = (arr) => {
+          for (let index = 0; index < arr.length; index++) {
+            const element = arr[index]
+            if (element.domKey) {
+              setActive(element.domKey)
+            }
+            if (element.content && element.content.length) {
+              for (let itemIndex = 0; itemIndex < element.content.length; itemIndex++) {
+                const item = element.content[itemIndex]
+                if (item.domKey) {
+                  setActive(item.domKey)
+                }
+              }
+            }
+            if (element.children && element.children.length) {
+              setList(element.children)
+            }
+          }
+        }
+        // 每次 scroll 事件结束之后，递归计算各个标签距离窗口顶部的位置
+        setList(this.tabPageData.children)
+      })
+    },
+    // 月报更新
+    upDateReportFn(key = 'cb', confirmReportBack) {
+      this.SET_LOADING(true)
+      const method = this.pageType.search(/All/) > -1 ? 'upDateReport' : 'upDateSubReport'
+      this[method](() => {
+        confirmReportBack && confirmReportBack()
+        if (!confirmReportBack) {
+          this.SET_LOADING(false)
+        }
+        if (key === 'cb') {
+          window.log({ c: 'report_edit', d: 'report_edit_save' })
+          this.$message.success('保存成功！')
+        }
+      })
+    },
+    // 月报确认
+    confirmReport() {
+      this.$refs['dialogConfirm'].visible = false
+      this.upDateReportFn('nocb', () => {
+        this.$store.dispatch('monthlyReportEdit/confirmReport', {
+          id: this.$route.query.subReportId,
+          callback: () => {
+            window.log({ c: 'report_edit', d: 'report_edit_confirm' })
+            this.SET_LOADING(false)
+            this.$router.push({ path: '/monthlyReport/index' })
+          }
+        })
+      })
+    },
+    // 删除月报
+    deleteReport(key) {
+      this.$refs['dialogDelete'].visible = false
+      if (key === '删除') {
+        this.deleteReport({
+          key,
+          callback: () => {
+            window.log({ c: 'report_edit', d: 'report_edit_delete' })
+            this.$router.push({ path: '/monthlyReport/index' })
+          }
+        })
+      } else {
+        // this.$message('删除操作已取消！')
+      }
+    },
+    // 月报发布确认
+    publishAllReport(key) {
+      this.$refs['dialogPublishAll'].visible = false
+      this.SET_LOADING(true)
+      this.$store.dispatch('monthlyReportEdit/publishAllReport', {
+        id: this.$route.query.reportId,
+        callback: () => {
+          window.log({ c: 'report_edit', d: 'report_edit_push' })
+          this.SET_LOADING(false)
+          this.$router.push({ path: '/monthlyReport/index' })
+        }
+      })
+    },
+    // 下载月报pdf
+    downloadReportPdf(key) {
+      this.$refs['dialogViewPdf'].visible = false
+      const { reportId } = this.$route.query
+      const url = `${projectManagementUrl}/monthlyReport/downloadMonthlyReport?id=${reportId}&refrash=true`
+      window.open(url, '_blank')
+    },
+    tabClick(tab, event) {
+      this.bodyLoading = true
+      this.$store.dispatch('monthlyReportEdit/tabActiveChange', {
+        ...this.$route.query,
+        id: this.$route.query.reportId,
+        tabsActive: tab.name
+      })
+      setTimeout(() => {
+        this.bodyLoading = false
+      }, 700)
+    },
+    dialogOpen(key) {
+      if (key === 'dialogPublishAll') {
+        this.setMonthlyReportPreView()
+      }
+      if (key === 'dialogViewPdf') {
+        this.setMonthlyReportPrePdfView()
+      }
+      this.$refs[key].visible = true
+    },
+    sendReport(key) {
+      this.$refs['dialogSend'].visible = false
+      if (key === '取消') {
+        // this.$message('发送操作已取消！')
+        return
+      }
+      this.SET_LOADING(true)
+      this.$store.dispatch('monthlyReportEdit/sendReport', {
+        id: this.$route.query.reportId,
+        callback: () => {
+          setTimeout(() => {
+            window.log({ c: 'report_edit', d: 'report_edit_send' })
+            this.SET_LOADING(false)
+            this.$router.push({ path: '/monthlyReport/index' })
+          }, 500)
+        }
+      })
+    },
+    // 月报退回
+    returnReport(command) {
+      this.SET_LOADING(true)
+      let list = []
+      if (command === 'all') {
+        list = this.subReportInfo.map((elm) => {
+          return Number.parseInt(elm.id)
+        })
+      } else {
+        list.push(Number.parseInt(command))
+      }
+      if (command === 'only' && this.$route.query.subReportId) {
+        list = [Number.parseInt(this.$route.query.subReportId)]
+      }
+      this.$store.dispatch('monthlyReportEdit/returnReport', {
+        data: {
+          subReportIds: list
+        },
+        callback: () => {
+          window.log({ c: 'report_edit', d: 'report_edit_return' })
+          this.SET_LOADING(false)
+          this.$message.success('退回成功！')
+          this.$router.push({ path: '/monthlyReport/index' })
+        }
+      })
+    },
+    // 月报预览
+    async setMonthlyReportPreView() {
+      const res = await getMonthlyReportPreView(this.$route.query.reportId)
+      if (res.code === 200) {
+        this.monthlyReportPreView = res.data
+      }
+    },
+    // 月报Pdf预览
+    async setMonthlyReportPrePdfView() {
+      const res = await getMonthlyReportPrePdfView(this.$route.query.reportId)
+      if (res.code === 200) {
+        this.monthlyReportPrePdfView = res.data
+      }
+    },
+    // 埋点
+    monthlyReportBuriedPoint() {
+      const { pageType, type } = this.$route.query
+      if (type !== 'create') {
+        // 月报编辑
+        if (pageType === 'editAll') {
+          window.log({ c: 'report_view', d: 'report_view_edit' })
+        }
+        // 月报浏览
+        if (pageType === 'readAll') {
+          window.log({ c: 'report_view', d: 'report_view_only' })
+        }
+        // 单业务线编辑
+        if (pageType === 'edit') {
+          window.log({ c: 'report_view', d: 'report_view_only_edit' })
+        }
+        // 单业务线浏览
+        if (pageType === 'read') {
+          window.log({ c: 'report_view', d: 'report_view' })
+        }
+      }
+    }
+
+  }
+}
+</script>
+<style scoped lang='less'>
+@import '../../style';
+// setscroll
+.set_scroll {
+  &::-webkit-scrollbar {
+    width: 0px;
+    //height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #c8cbcc;
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    background: #d3d3d3;
+  }
+}
+
+/deep/ .report-delete {
+  text-align: center;
+}
+
+.content-wrapper {
+  /deep/ .el-tabs__nav-wrap::after {
+    height: 1px;
+  }
+
+  .body-wrapper {
+    display: grid;
+    grid-template-columns: calc(100% - 190px) 190px;
+    //grid-template-rows: 100px 100px 100px;
+
+    .left-wrapper {
+      //flex: 1;
+      //width: 100%;
+      margin-top: -45px;
+      padding-top: 16px;
+      padding-right: 20px;
+    }
+
+    // .right-wrapper {
+    //flex: 1 1 0;
+    //display: contents;
+    // }
+  }
+}
+
+/*特殊字体*/
+/deep/ hhtem {
+  color: #333;
+  font-weight: 600;
+
+  &.red {
+    color: red;
+  }
+}
+
+/deep/ hhtsubtitle {
+  color: #333;
+  font-weight: 600;
+}
+
+/deep/ .view-report {
+  //background-color: #0EB400;
+
+  .report-delete {
+    padding: 0 20px;
+    margin: -20px 0;
+    color: #333;
+  }
+
+  .el-dialog {
+    margin-top: 5vh !important;
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/monthlyReport/index.vue

@@ -26,8 +26,8 @@
         <el-button v-if="tagData.status === 30" type="text" @click="jump('report_home_viewReport', '/monthlyReport/edit', { pageType: 'readAll', reportId: reportStatus.id })"> 查看完整报告</el-button>
         <!--    @click="downloadMonthlyReportFn"    -->
         <!-- <a target="blank" :href="`${projectManagementUrl}/monthlyReport/downloadMonthlyReport?id=${reportValue}&refrash=true`" :download="`${reportName}.pdf`" style="margin-left: 10px;display: inline-block"><svg-icon icon-class="monthlyReport下载" class="icon" /></a> -->
-        <a v-if="isShowPdfPushDow() && tagData.status === 20" style="margin-left: 10px;display: inline-block" @click="downloadFile"><svg-icon icon-class="monthlyReport下载" class="icon" /></a>
-        <a v-if="isShowPdfDow()" target="blank" style="margin-left: 10px;display: inline-block" @click="downloadFile"><svg-icon icon-class="monthlyReport下载" class="icon" /></a>
+        <a v-show="isShowPdfPushDow() && tagData.status === 20" @click="downloadFile(true)" style="margin-left: 10px;display: inline-block"><svg-icon icon-class="monthlyReport下载" class="icon" /></a>
+        <a v-show="isShowPdfDow()" target="blank" @click="downloadFile" style="margin-left: 10px;display: inline-block"><svg-icon icon-class="monthlyReport下载" class="icon" /></a>
         <el-button v-if="tagData.status === 0" type="text" @click="sendConfirm(reportData)"> 发送确认</el-button>
       </div>
       <div v-show="tagData.status === 30" class="report-bottom">
@@ -226,7 +226,7 @@ export default {
       this.reportValue = e.id
       this.reportStatus = e
     },
-    downloadFile() {
+    downloadFile ( refrash = false ) {
       console.log(this.projectManagementUrl)
       // fetch(`${this.projectManagementUrl}/monthlyReport/downloadMonthlyReport?id=${this.reportValue}&refrash=true`, {
       //   method: 'POST',
@@ -237,19 +237,19 @@ export default {
       // })
       downloadMonthlyReport({
         id: this.reportValue,
-        refrash: false
+        refrash
       }).then((res) => {
         this.convertRes2Blob(res)
-        // console.log(blob)
-        //  const link = document.createElement('a')
-        //  link.style.display = 'none'
-        //  link.setAttribute('target', 'blank')
-        //  link.href = URL.createObjectURL(blob)
-        //  document.body.appendChild(link)
-        //  link.click()
-        //  // 释放的 URL 对象以及移除 a 标签
-        //  URL.revokeObjectURL(link.href)
-        //  document.body.removeChild(link)
+       // console.log(blob)
+       //  const link = document.createElement('a')
+       //  link.style.display = 'none'
+       //  link.setAttribute('target', 'blank')
+       //  link.href = URL.createObjectURL(blob)
+       //  document.body.appendChild(link)
+       //  link.click()
+       //  // 释放的 URL 对象以及移除 a 标签
+       //  URL.revokeObjectURL(link.href)
+       //  document.body.removeChild(link)
       })
     },
     convertRes2Blob(response) {