|
|
@@ -0,0 +1,413 @@
|
|
|
+<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>
|
qinzhipeng_v@didiglobal.com