youhua

src/components/table/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-table
+    ref="table"
+    :data="tableList"
+    stripe
+    fit
+    highlight-current-row
+    :height="inTableHeight"
+    @selection-change="selectionChange"
+    @row-click="rowClick"
+  >
+    <template v-for="(itm, idx) in header">
+      <!-- 特殊处理列 -->
+      <el-table-column
+        v-if="itm.render"
+        :key="idx"
+        :prop="itm.prop ? itm.prop : null"
+        :label="itm.label ? itm.label : null"
+        :width="itm.width ? itm.width : null"
+        :sortable="itm.sortable ? itm.sortable : false"
+        :align="itm.align ? itm.align : 'center'"
+        :fixed="itm.fixed ? itm.fixed : null"
+        :show-overflow-tooltip="itm.tooltip"
+        min-width="50"
+      >
+        <template slot-scope="scope">
+          <ex-slot
+            :render="itm.render"
+            :row="scope.row"
+            :index="scope.$index"
+            :column="itm"
+          />
+        </template>
+      </el-table-column>
+      <!-- 正常列 -->
+      <el-table-column
+        v-else
+        :key="idx"
+        :prop="itm.prop ? itm.prop : null"
+        :label="itm.label ? itm.label : null"
+        :width="itm.width ? itm.width : null"
+        :sortable="itm.sortable ? itm.sortable : false"
+        :align="itm.align ? itm.align : 'center'"
+        :fixed="itm.fixed ? itm.fixed : null"
+        :formatter="itm.formatter"
+        :show-overflow-tooltip="itm.tooltip"
+        min-width="50"
+      />
+    </template>
+  </el-table>
+</template>
+
+<script>
+// 自定义内容的组件
+var exSlot = {
+  functional: true,
+  props: {
+    row: Object,
+    render: Function,
+    index: Number,
+    column: {
+      type: Object,
+      default: null
+    }
+  },
+  render: (h, context) => {
+    const params = {
+      row: context.props.row,
+      index: context.props.index
+    }
+    if (context.props.column) params.column = context.props.column
+    return context.props.render(h, params)
+  }
+}
+
+export default {
+  components: { exSlot },
+  props: {
+    tableList: {
+      type: Array,
+      default: () => []
+    },
+    header: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: [Number, String, Function],
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      inTableHeight: null
+    }
+  },
+  created() {
+    // 该阶段可以接收父组件的传递参数
+    this.inTableHeight = this.height
+  },
+  destroyed() {
+    // 高度自适应事件注销
+    window.onresize = null
+  },
+  methods: {
+    /**
+     * 选择框选择后更改,事件分发
+     */
+    selectionChange(selection) {
+      this.$emit('selection-change', selection)
+    },
+    /**
+     * 点击事件
+     */
+    rowClick(row, column, event) {
+      this.$emit('row-click', row, column, event)
+    }
+  }
+}
+</script>
+<style>
+
+</style>

src/components/timeline/index.vue

@@ -2,7 +2,7 @@
   <div class="qz-timeline-bg">
     <div class="qz-timeline-layout">
       <div v-for="item in list" :key="item.value">
-        <div>{{ item.name }}</div>
+        <div class="qz-timeline-name">{{ item.name }}</div>
         <span class="circular" :class="[item.show ? 'qz-time-code1' : 'qz-time-code']" @click="qz_click_code(item)" />
         <div class="qz-timeline-divider" />
       </div>
@@ -12,14 +12,24 @@
 
 <script>
 export default {
+  props: {
+    data: { type: Array, required: true }
+  },
   data() {
     return {
-      list: [{ value: 1, name: '全部' }, { value: 1, name: 'P0' }, { value: 2, name: 'P1' }, { value: 3, name: 'P2' }, { value: 4, name: 'P3' }],
-      codeColor: false
+      list: []
     }
   },
-  created() {
-    this.timeline_init()
+  watch: {
+    data: {
+      handler(newV) {
+        if (!newV) return
+        this.list = newV
+        this.timeline_init()
+      },
+      deep: true,
+      immediate: true
+    }
   },
   methods: {
     // 初始化
@@ -32,7 +42,14 @@ export default {
     },
     // 点击节点
     qz_click_code(val) {
-      val.show = !val.show
+      this.list.map(item => {
+        if (val.value === item.value) {
+          item.show = true
+        } else {
+          item.show = false
+        }
+      })
+      this.$emit('update', val)
     }
   }
 }
@@ -51,7 +68,14 @@ export default {
 .qz-timeline-divider {
   content: '';
   min-width: 100px;
-  border: 1px solid #eee;
+  border: 1px solid #E5E5E5;
+}
+.qz-timeline-name {
+  font-weight: 400;
+  font-size: 12px;
+  color: #444444;
+  position: relative;
+  top: 12px;
 }
 .circular {
   width: 10px;

src/views/quality/components/drawerAll.vue

@@ -1,11 +1,12 @@
 <template>
   <el-drawer :title="Statistics.title" :visible.sync="drawer_" :direction="direction" :modal="false" :class="{'drawer-box': showClass}" size="100%" :before-close="handleClose">
     <div style="height: calc(100vh - 200px); overflow: scroll; overflow-x: hidden;">
-      <div style="text-align: center;">
-        <timeline />
-        <div>dcjns</div>
+      <div class="qz-drawer-header">
+        <timeline :data="list" @update="getTimeLine" />
+        <timeline :data="list" @update="getTimeLine" />
       </div>
-
+      <qz-table :table-list="tableData" :header="header" />
+      <!-- <qz-table :tableData="tableData" :tableHead="tableHead" selectionShow="true" :indexShow="true" indexLabel="序号" :indexWidth="50" /> -->
       <!-- <el-table :data="tableData" style="width: 100%;" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }" class="integration-num">
         <el-table-column label="优先级" min-width="100">
           <template slot-scope="scope">
@@ -32,9 +33,11 @@
 // import { taskList } from '@/api/taskIndex'
 // import { bugList, bugGetEnum } from '@/api/defectManage'
 import timeline from '@/components/timeline'
+import qzTable from '@/components/table'
 export default {
   components: {
-    timeline
+    timeline,
+    qzTable
   },
   // filters: {
   //   ellipsis(value) {
@@ -51,6 +54,7 @@ export default {
   },
   data() {
     return {
+      list: [{ value: 0, name: '全部' }, { value: 1, name: 'P0' }, { value: 2, name: 'P1' }, { value: 3, name: 'P2' }, { value: 4, name: 'P3' }],
       priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
       Statistics: {}, // title
       direction: 'rtl',
@@ -62,7 +66,38 @@ export default {
       //   curIndex: 1, // 分页
       //   pageSize: 10 // 分页
       // },
-      tableData: []
+      header: [
+        { prop: 'w', label: '全部' },
+        { prop: 'x', label: 'x',
+          formatter: (row) => {
+            return row.x.toFixed(3)
+          }
+        },
+        { prop: 'd', label: 'd',
+          formatter: (row) => {
+            return row.d.toFixed(2)
+          }
+        },
+        {
+          label: '操作',
+          render: (h, data) => {
+            return (
+              <el-button
+                type='primary'
+                onClick={() => {
+                  this.handleClick(data.row)
+                }}
+              >
+                点我获取行数据
+              </el-button>
+            )
+          }
+        }
+      ],
+      tableData: [
+        { w: 1, x: 99.25123, d: 0.23892 },
+        { w: 1, x: 255.6666, d: 0.99134 }
+      ]
     }
   },
   computed: {
@@ -91,6 +126,12 @@ export default {
   //   this.bugGetEnum()
   // },
   methods: {
+    handleClick(row) {
+      console.log(row)
+    },
+    getTimeLine(val) {
+      console.log(val, 'vfvdv')
+    },
     async getTableData() {
       // if (this.Statistics.idList !== undefined && this.Statistics.idList.length > 0) {
       //   this.paging.ids = this.Statistics.idList
@@ -145,6 +186,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.qz-drawer-header {
+  text-align: center;
+  background: rgb(252, 252, 252);
+  border-radius: 4px;
+  min-height: 120px;
+  margin: 20px 30px;
+  padding: 1px 0;
+}
 >>> :focus{outline:0;}
 .integration-num {
   margin: 20px;
@@ -171,7 +220,8 @@ export default {
     font-size: 20px;
     font-weight: 500;
     margin-bottom: 0px;
-    padding: 20px 30px 0;
+    padding: 20px 30px;
+    border-bottom: 1px solid #E2E2E2;
 }
 .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);