thoth-frontend-test/src/views/monthlyReport/childrenPage/editReport/components/drawerModal/index.vue

<template>
  <el-drawer
    class="content-wrapper"
    :modal="false"
    size="100%"
    :class="drawerBox"
    destroy-on-close
    :visible.sync="drawer"
    :before-close="handleClose"
    @click.stop
    @open="setBoxShadow('')"
    @opened="setBoxShadow"
    @close="setBoxShadow('')"
  >
    <template slot="title">
      <div v-if="title" @click.stop>{{ title }}<span class="sub-title">{{ subTitle }}</span></div>
    </template>
    <!-- 时间线 -->
    <div
      v-if="openDrawer && baseModal && baseModal.timeline.one "
      class="drawer-padding drawer-header"
      :style="{paddingTop: baseModal.timeline.two ? '10px':'30px'}"
      @click.stop
    >
      <div id="index" ref="timeline1" class="drawer-scll">
        <timeline
          :num="timelineData.firstActive"
          bg-margin
          :data="baseModal.timeline.one"
          @update="(params) => timeLineClick(params, 1)"
        />
      </div>
      <div v-if="baseModal.timeline.two" ref="timeline2" class="drawer-scll">
        <timeline
          :num="timelineData.secondActive"
          :data="baseModal.timeline.two"
          bg-margin
          @update="(params)=>timeLineClick(params, 2)"
        />
      </div>
    </div>

    <!-- 表格 -->
    <dmTable
      v-if="openDrawer"
      v-loading="loading"
      :table-list="tableList"
      :total="tableList"
      :column="baseModal && baseModal.column || []"
      :table-height="baseModal && baseModal.tableHeight ? baseModal.tableHeight : 'auto' "
      size="mini"
      @click.stop
      @change="dmTableChange"
    >
      <!-- 改进项：级别 -->
      <template #improvementsOverRateColumnsPrioritySlot="{scope}">
        <div v-if="scope.row.caseName" @click.stop>
          <a target="_blank" :href="scope.row.url">{{ scope.row.caseName }}</a>
        </div>
      </template>
    </dmTable>
    <!-- 下拉 -->
    <div class="footer-laout" @click.stop>
      <div style="line-height: 60px;">
<!--        <el-button type="primary" size="mini" @click="exportTable">导 出</el-button>-->
      </div>
      <el-pagination
        :current-page.sync="paging.curIndex"
        :page-size="paging.pageSize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 15, 20, 30]"
        :total="paging.pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-drawer>
</template>
<script>
import _ from 'lodash'
import moment from 'moment'
import dmTable from '@/components/baseTable/table'
import timeline from './components/timeline'
import drawerModalData from './drawerModalData'
import { EncryptId } from '@/utils/crypto-js'

export default {
  name: 'DrawerModal',
  components: {
    dmTable, timeline
  },
  props: {
    modalType: {
      type: String,
      required: false,
      default: () => 'bug1' // 默认为缺陷
    },
    openDrawer: {
      type: Boolean,
      required: false,
      default: false
    },
    drawerData: {
      type: Array,
      required: false,
      default: () => {}
    }
  },
  data() {
    return {
      baseModal: null,
      drawer: false,
      loading: false,
      title: '',
      headerTitle: '',
      // timelineData,
      tableList: [],
      tableListOld: [],
      // tableHeight: 'auto',
      column: [],
      ids: [],
      label: '',
      activeLabel: '',
      drawerBox: '',
      subTitle: '',
      sourceData: null,
      /* S 新增缺陷*/
      priorityList: [],
      /* E 新增缺陷*/
      timelineData: {
        first: [],
        firstActive: 0,
        second: [],
        secondActive: 0
      },
      paging: {
        curIndex: 1,
        pageTotal: 0,
        pageSize: 10
      }
    }
  },
  watch: {
    drawerData(v, o) {
      this.init()
    },
    openDrawer(value) {
      this.drawer = value
      if (this.drawer) {
        this.init()
      }
    }
  },
  mounted() {
    this.drawer = false
  },
  methods: {
    moment,
    init() {
      this.baseModal = { ...drawerModalData[this.modalType] }
      this.title = this.baseModal.title
      this.pagingInit()
      this.setPageSize()
      this.column = this.baseModal.column
      this.tableList = []
      this.drawer = this.openDrawer
      // 初始化的时候使用 setIds
      this.paging = this.baseModal.setIds(this.paging, this.drawerData)
      this.setTableList()
    },
    // 设置页数
    setPageSize() {
      const pageSize = window.localStorage.getItem('pageSize') || 10
      const paging = _.cloneDeep(this.paging)
      paging.pageSize = Number.parseInt(pageSize)
      this.paging = _.cloneDeep(paging)
    },
    // 处理日期格式：JS - 2020-01-01T00:00:00.000000Z 日期格式转换
    rTime(date) {
      if (!date) return ''
      var json_date = new Date(date).toJSON()
      return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },

    handleClose() {
      this.drawer = false
      this.$emit('update:openDrawer', this.drawer)
    },
    handleSizeChange(value) {
      this.paging.pageSize = value
      const paging = _.cloneDeep(this.paging)
      paging.pageSize = value
      this.paging = _.cloneDeep(paging)
      window.localStorage.setItem('pageSize', value)
      // 是否真实分页
      if (this.baseModal.isPagination) {
        this.setTableList()
      } else {
        this.tableListPagination()
      }
    },
    handleCurrentChange(value) {
      const paging = _.cloneDeep(this.paging)
      paging.curIndex = value
      this.paging = _.cloneDeep(paging)
      // 是否真实分页
      if (this.baseModal.isPagination) {
        this.setTableList()
      } else {
        this.tableListPagination()
      }
    },
    // 导出
    exportTable() {
    },
    // 格式化时间
    dateFomatter(date) {
      return date.substring(0, 10) + ' ' + date.substring(11, 19)
    },
    // 时间轴点击事件
    timeLineClick({ value, name }, index) {
      this.pagingInit()
      if (index === 1) {
        const { paging } = this.baseModal.timeline.oneClick({
          value, name, paging: this.paging, drawerData: this.drawerData
        })
        this.paging = { ...paging }
      }
      if (index === 2) {
        const { paging } = this.baseModal.timeline.twoClick({
          value, index, paging: this.paging
        })
        this.paging = { ...paging }
      }
      this.setTableList()
    },
    // 设置列表数据
    async setTableList() {
      this.tableList = []
      this.loading = true
      // 请求数据
      if (!this.drawerData.length) {
        this.loading = false
        return
      }
      const paging = this.paging
      this.baseModal.method({
        ...paging
        // idList: this.drawerData,
        // curIndex: this.paging.curIndex,
        // pageSize: this.paging.pageSize
      }).then(res => {
        if (res.code === 200) {
          // 暴露处理返回值的函数，通过 this.baseModal 调用
          const { tableList, oldTableList, paging } = this.baseModal.setTableList({
            tableList: this.tableList, // 表格展示时使用的数据
            oldTableList: this.oldTableList, // 假分页时使用的数据
            paging: this.paging, // 分页数据和部分给接口传参
            res
          })
          if (tableList) {
            this.tableList = [...tableList]
          }
          if (oldTableList) {
            this.oldTableList = [...oldTableList]
          }
          if (paging) {
            this.paging = { ...paging }
          }
          this.loading = false
        }
      })
    },

    // 前端分页
    tableListPagination() {
      if (this.tableListOld.length) {
        this.tableList = this.tableListOld.map(e => e).splice((this.paging.curIndex - 1 || 0) * this.paging.pageSize, this.paging.pageSize)
      }
    },
    // 分页数据初始化
    pagingInit() {
      const pageSize = window.localStorage.getItem('pageSize') || 10
      this.paging = {
        curIndex: 1,
        pageTotal: 0,
        pageSize: Number.parseInt(pageSize)
      }
      this.priorityList = []
    },
    // 设置表头
    // 表格跳转
    dmTableChange({ column, row }) {
      if (typeof this.baseModal.jumper === 'string') {
        this.jumper(row, this.baseModal.jumper)
      } else {
        this.baseModal.jumper({ column, row })
      }
    },
    // 设置表格样式
    setBoxShadow(key = 'drawer-box') {
      if (key) {
        setTimeout(() => {
          this.drawerBox = key
        }, 300)
      } else {
        this.drawerBox = key
      }
    },
    jumper(val, name) { // 需求、任务、缺陷跳转
      // const { bizId = null } = this.$store.state.global || {}
      const { bizId, id } = val
      const bizId_id = EncryptId(`${bizId}_${id}`)
      const newTab = this.$router.resolve({ name: name + '详情', query: { bizId_id: bizId_id }})
      window.open(newTab.href, '_blank')
    }
  }
}
</script>
<style scoped lang='less'>
.content-wrapper{
 /deep/.el-drawer__body{
   overflow: hidden;
 }
}
/deep/ .el-drawer__header {
  color: #444;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;
  padding: 20px 30px;
  border-bottom: 1px solid #E2E2E2;

  .sub-title {
    color: #444;
    font-size: 14px;
    margin-left: 20px;
    font-weight: 400;
  }
}

.drawer-box {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
}
.el-drawer-fade-enter-active {
  animation: el-drawer-fade-in 10ms;
}
.el-drawer-fade-leave-active {
  animation: el-drawer-fade-in 10ms reverse;
}
.el-drawer__wrapper {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  margin: 0;
}
/deep/.el-drawer__container {
  left: 0;
  right: 0;
  width: 50%;
}
/* S 时间轴 */
.drawer-header {
  text-align: center;
  background: #F7F7F7;
  border-radius: 4px;
  min-height: 120px;
  margin: 20px 30px 10px;
  overflow: hidden;
}
.drawer-padding {
  padding: 20px 0;
}
.drawer-padding-s {
  padding: 1px 0;
}
.drawer-scll {
  overflow-x: scroll;
}
.drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
.drawer-H {
  font-size: 16px;
  margin: 0 30px;
  color: #444444;
}
.drawer-scll {
  overflow-x: scroll;
}
.drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
.drawer-H {
  font-size: 16px;
  margin: 0 30px;
  color: #444444;
}
/* E 时间轴 */
.footer-laout {
  display: flex;
  justify-content: space-between;
  margin: 0 30px;
}
.drawer-name:hover {
  color: #409eff;
  cursor: pointer;
}
/deep/.el-table::before{
  display: none;
}
</style>