优化报告主页

src/views/reportManagement/components/eleTable/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <!-- 表格 公共组件   包含表格上面的搜索栏 表头 操作栏 都是自定义的 -->
+  <div>
+    <el-table
+      v-loading="loading"
+      :data="data"
+      style="width: 100%"
+      :header-cell-style="{'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }"
+      :cell-style="{ 'font-size':'14px','color':'rgba(102,102,102,1)' }"
+      :show-overflow-tooltip="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column v-if="isShowSelect" type="selection" width="55" />
+      <el-table-column v-for="obj in tableConfiguration" :key="obj.key" :prop="obj.prop" :label="obj.label" :min-width="obj.width">
+        <template slot-scope="scope">
+          <slot name="specialItem" :row="scope.row" :column="obj.prop" :type="obj.type" />
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isShowOperate" fixed="right" label="操作" align="center" :min-width="operateWidth">
+        <template slot-scope="scope">
+          <slot name="operateBox" :row="scope.row" />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableContainer',
+  props: {
+    // 表头配置
+    tableConfiguration: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 是否显示操作
+    isShowOperate: {
+      type: Boolean,
+      default: true
+    },
+    // 列表数据
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 操作栏宽度
+    operateWidth: {
+      type: Number,
+      default: 200
+    },
+    // 是否显示多选框
+    isShowSelect: {
+      type: Boolean,
+      default: false
+    },
+    // 表格高度
+    tableHeight: {
+      type: Number,
+      default: 0
+    },
+    // laoding
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      height: 0
+    }
+  },
+  created() {
+    const screenHeight = document.body.clientHeight
+    this.height = screenHeight - 200
+    window.onresize = () => {
+      this.height = screenHeight - 200
+    }
+  },
+  methods: {
+    filterFields(obj, value) {
+      if (value && value.indexOf('.') !== -1) {
+        const list = value.split('.')
+        let k = obj
+        list.map(item => { k = k[item] })
+        return k
+      } else {
+        return obj[value]
+      }
+    },
+    handleSelectionChange(val) {
+      this.$emit('handleSelectionChange', val)
+    }
+  }
+}
+</script>

src/views/reportManagement/testPresentation.vue

@@ -18,62 +18,42 @@
     </el-header>
 
     <el-main class="Qz_report_main">
-      <el-table v-loading="loading" :data="tableData" size="small" :header-cell-style="{'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }" :cell-style="{ 'font-size':'14px','color':'rgba(102,102,102,1)' }" style="width: 100%" :show-overflow-tooltip="true">
-        <el-table-column label="报告名称" min-width="280" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <a v-if="title === '测试日报' || title === '准出报告'" href="javascript:void(0)" style="color:#20a0ff" @click="history ? toReportView(scope.row) : OldDaily(scope.row)">{{ scope.row.reportName }}</a>
-            <div v-if="title === '准出报告' && scope.row.passStatus === 1" class="passStatus1">不通过</div>
-            <a v-if="title === '提测报告'" href="javascript:void(0)" style="color:#20a0ff" @click="history ? toReportView(scope.row) : OldDaily(scope.row)">{{ history ? scope.row.reportName : scope.row.name }}</a>
-            <div v-if="title === '提测报告' && scope.row.returnReason" style="color: red;" class="breakText1">打回报告：{{ scope.row.returnReason }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" min-width="150">
-          <template slot-scope="scope">{{ scope.row.statusString }}</template>
-        </el-table-column>
-        <el-table-column label="报告人" min-width="180">
-          <template slot-scope="scope">
-            <div v-if="history">
-              <div v-if="title === '测试日报' || title === '准出报告'">{{ scope.row.reportorObject.name ===null ? '' : scope.row.reportorObject.name }}</div>
-              <div v-if="title === '提测报告'">{{ scope.row.reportorObject.name }}</div>
+      <ele-tabel :loading="loading" :data="tableDatas" :isshow-select="true" :table-configuration="tableConfiguration">
+        <span slot="specialItem" slot-scope="props">
+          <div v-if="props.type === 'jumpTips'">
+            <a href="javascript:void(0)" style="color:#20a0ff" @click="history ? toReportView(props.row) : OldDaily(props.row)">{{ filterFields(props.row, props.column) }}</a>
+            <div v-if="title === '准出报告' && props.row.passStatus === 1" class="passStatus1">不通过</div>
+            <div v-if="title === '提测报告' && props.row.returnReason" style="color: red;" class="breakText1">打回报告：{{ props.row.returnReason }}</div>
+          </div>
+          <div v-else>{{ filterFields(props.row, props.column) }}</div>
+        </span>
+        <template slot="operateBox" slot-scope="scope">
+          <div v-if="title === '测试日报'">
+            <span v-if="scope.row.status === 0" class="didi-hover" @click="dailyButtom(3,scope.row)">发送</span>
+            <span v-if="scope.row.status === 0" style="margin: 0 30px;" class="didi-hover" @click="dailyButtom(2,scope.row)">编辑</span>
+            <span v-if="scope.row.status === 0" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
+            <span v-if="scope.row.status === 3" class="didi-hover" @click="dailyButtom(4,scope.row)">复制</span>
+          </div>
+          <div v-if="title === '准出报告'">
+            <div v-if="scope.row.status === 3 ? false : true">
+              <span v-if="scope.row.status === 0" class="didi-hover" @click="clientButtom(3,scope.row)">发送</span>
+              <span v-if="scope.row.status === 0" style="margin: 0 30px;" class="didi-hover" @click="clientButtom(2, scope.row)">编辑</span>
+              <span v-if="scope.row.status === 0" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
             </div>
-            <div v-if="!history">
-              <div v-if="title === '测试日报' || title === '准出报告'">{{ scope.row.ownner }}</div>
-              <div v-if="title === '提测报告'">{{ scope.row.submitter }}</div>
+          </div>
+          <div v-if="title === '提测报告'">
+            <div v-if="scope.row.status === 1 ? false : true">
+              <span v-if="scope.row.status === 3" class="didi-hover" @click="report_click(1,scope.row)">通过</span>
+              <span v-if="scope.row.status === 3" style="margin-left: 30px;" class="didi-hover" @click="report_click(2,scope.row)">打回</span>
+              <span v-if="scope.row.status === 0" class="didi-hover" @click="report_click(5,scope.row)">发送</span>
+              <span v-if="scope.row.status === 0" style="margin: 0 30px;" class="didi-hover" @click="report_click(6,scope.row)">编辑</span>
+              <span v-if="scope.row.status === 0" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
+              <span v-if="scope.row.status === 2" class="didi-hover" @click="report_click(3,scope.row)">重新提测</span>
             </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="创建时间" min-width="280">
-          <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
-        </el-table-column>
-        <el-table-column v-if="history" label="操作" align="center" fixed="right" min-width="230">
-          <template slot-scope="scope">
-            <div v-if="title === '测试日报'">
-              <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="dailyButtom(3,scope.row)">发送</span>
-              <span v-if="scope.row.status === 0 ? true : false" style="margin: 0 30px;" class="didi-hover" @click="dailyButtom(2,scope.row)">编辑</span>
-              <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
-              <span v-if="scope.row.status === 3 ? true : false" class="didi-hover" @click="dailyButtom(4,scope.row)">复制</span>
-            </div>
-            <div v-if="title === '准出报告'">
-              <div v-if="scope.row.status === 3 ? false : true">
-                <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="clientButtom(3,scope.row)">发送</span>
-                <span v-if="scope.row.status === 0 ? true : false" style="margin: 0 30px;" class="didi-hover" @click="clientButtom(2, scope.row)">编辑</span>
-                <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
-              </div>
-            </div>
-            <div v-if="title === '提测报告'">
-              <div v-if="scope.row.status === 1 ? false : true">
-                <span v-if="scope.row.status === 3 ? true : false" class="didi-hover" @click="report_click(1,scope.row)">通过</span>
-                <span v-if="scope.row.status === 3 ? true : false" style="margin-left: 30px;" class="didi-hover" @click="report_click(2,scope.row)">打回</span>
-                <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="report_click(5,scope.row)">发送</span>
-                <span v-if="scope.row.status === 0 ? true : false" style="margin: 0 30px;" class="didi-hover" @click="report_click(6,scope.row)">编辑</span>
-                <span v-if="scope.row.status === 0 ? true : false" class="didi-hover" @click="report_click(4,scope.row )">删除</span>
-                <span v-if="scope.row.status === 2 ? true : false" class="didi-hover" @click="report_click(3,scope.row)">重新提测</span>
-              </div>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination align="right" :current-page="curIndex" :page-sizes="[15, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange()" @current-change="handleCurrentChange()" />
+          </div>
+        </template>
+      </ele-tabel>
+      <el-pagination align="right" :current-page="curIndex" :page-sizes="[15, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
     </el-main>
 
     <!-- 日报/准出/提测选择任务 -->
@@ -142,6 +122,8 @@
 
 <script>
 const _ = require('lodash')
+import eleTabel from '@/views/reportManagement/components/eleTable'
+// import tableMixin from '@/views/reportManagement/components/eleTable/tableMin'
 import { EncryptId } from '@/utils/crypto-js.js'
 import { mapGetters } from 'vuex'
 import '@/styles/PublicStyle/index.scss'
@@ -167,8 +149,10 @@ export default {
     testPresenyL,
     ResultPageyL,
     acceptTheReport,
-    checkListStopConfirm
+    checkListStopConfirm,
+    eleTabel
   },
+  // mixins: [tableMixin],
   data() {
     return {
       reportTypeList: [{ label: '测试日报', name: 'first' }, { label: '准出报告', name: 'second' }, { label: '提测报告', name: 'third' }],
@@ -199,6 +183,13 @@ export default {
         statusString: ''
       },
       tableData: [],
+      tableDatas: [],
+      tableConfiguration: [
+        { label: '报告名称', prop: 'reportName', type: 'jumpTips', width: 280 },
+        { label: '状态', prop: 'statusString', width: 150 },
+        { label: '报告人', prop: 'reportorObject.name', width: 180 },
+        { label: '创建时间', prop: 'gmtCreate', width: 280 }
+      ],
       restaurants2: [],
       dialogVisible1: false, // 提测弹窗
       dialogDaily: false,
@@ -225,6 +216,7 @@ export default {
     }
   },
   created() {
+    this.getList()
     this.$store.state.data.status = true
   },
   destroyed() {
@@ -256,30 +248,33 @@ export default {
     async getList(e) { // 报告list
       this.loading = true
       this.history = true
-      const indexPage = { bizId: this.bizId, pageSize: this.pageSize, curIndex: this.curIndex }
-      e ? indexPage.reportName = this.state : ''
+      const params = {
+        bizId: this.bizId,
+        curIndex: this.curIndex,
+        pageSize: this.pageSize
+
+      }
+      e ? params.reportName = this.state : ''
       if (this.title === '测试日报') {
-        const res = await dailyReportListV2(indexPage)
+        const res = await dailyReportListV2(params)
         if (res.code === 200) {
-          this.tableData = res.data
+          this.tableDatas = res.data
           this.total = res.total
           this.logHandle('get_report_daily')
         }
       }
       if (this.title === '准出报告') {
-        const res = await reportreleaseList(indexPage)
+        const res = await reportreleaseList(params)
         if (res.code === 200) {
-          this.tableData = res.data.list || []
+          this.tableDatas = res.data.list || []
           this.total = res.data.total
           this.logHandle('get_report_release')
         }
       }
       if (this.title === '提测报告') {
-        const data = { bizId: this.bizId, pageSize: this.pageSize, curIndex: this.curIndex }
-        e ? data.reportName = this.state : ''
-        const res = await reportdelivertestList(data)
+        const res = await reportdelivertestList(params)
         if (res.code === 200) {
-          this.tableData = res.data.list || []
+          this.tableDatas = res.data.list || []
           this.total = res.data.total
           this.logHandle('get_report_deliver')
         }
@@ -342,6 +337,17 @@ export default {
       }
     },
 
+    filterFields(obj, value) {
+      if (value && value.indexOf('.') !== -1) {
+        const list = value.split('.')
+        let k = obj
+        list.map(item => { k = k[item] })
+        return k
+      } else {
+        return obj[value]
+      }
+    },
+
     dailyButtom(e, data) { // 测试报告
       this.report_data = data
       this.dialogDaily = true
@@ -558,6 +564,7 @@ export default {
       this.history ? this.getList() : this.gethistoryData()
     },
     handleCurrentChange(curIndex) { // 分页
+      console.log(curIndex)
       this.curIndex = curIndex
       this.history ? this.getList() : this.gethistoryData()
     },