epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/code/OperHistory.vue

<template>
  <div>
    <c-dialog :showFooter="false"
              :title="'操作历史'"
              :visible="diaVisible"
              :dialogHeight="1.1"
              @cancel="diaCancel">

      <el-tabs v-model="activeName"
               @tab-click="tabClick"
               class="el-tabs">
        <el-tab-pane label="操作历史"
                     name="oper">
          <c-table column-type="index"
                   :pageVisible="true"
                   ref="table"
                   :url="tableUrl"
                   :params="tableParams"
                   keyword="OperHistory"
                   :operations="operations"
                   :tableHeight="tableHeight">
          </c-table>

        </el-tab-pane>

        <el-tab-pane label="审核失败历史"
                     name="submitFail">

          <el-table id="out-table"
                    ref="table_submitfail"
                    :header-cell-style="{color:'#000'}"
                    :data="submitFailTable"
                    :style="{width: '100%'}"
                    border>

            <el-table-column prop="auditTime"
                             label="审核时间"
                             width="100"
                             header-align="center"
                             align="center"></el-table-column>
            <el-table-column prop="reason"
                             label="原因"
                             width="300"
                             header-align="center"
                             align="center"></el-table-column>

            <!--操作列-->
            <el-table-column label="图片"
                             header-align="center"
                             class="operate">
              <template slot-scope="scope">
                <el-image class="img"
                          v-for="(oneImg,index) in scope.row.screenshotUrl"
                          :key="index"
                          style="width: 100px; height: 100px"
                          :preview-src-list="getSrcList(scope.$index,index)"
                          :src="oneImg"></el-image>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>

    </c-dialog>

  </div>
</template>

<script>
import CTable from '@c/CTableNoPage'
import { mapGetters } from 'vuex'
import CDialog from '@c/CDialog'

export default {
  data () {
    return {
      loading: false,
      diaVisible: false,
      // tab页相关
      activeName: 'oper',
      params: {},
      codeId: '',
      // 模板列表
      tableUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/history',
      // tableUrl: '/third/code/history',
      tableParams: {
        type: Object, // table的查询参数
        default () {
          return {}
        }
      },
      // 列表操作栏的操作项数组
      operations: [],

      // 审核失败列表
      submitFailTable: [
        // {
        //   time: '2020-09-09 09:00',
        //   reason: '审核失败审核失败审核失败审核失败审核失败审核失败审核失败审核失败',
        //   screenshotUrl: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
        // },
        // {
        //   time: '2020-09-09 10:00',
        //   reason: '啦啦啦啦啦啦又失败了啦啦啦啦啦啦又失败了啦啦啦啦啦啦又失败了啦啦啦啦啦啦又失败了啦啦啦啦啦啦又失败了',
        //   screenshotUrl: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
        // }
      ]

    }
  },
  components: {
    CTable, CDialog
  },
  mounted () {
  },
  methods: {
    tabClick (tab) {
      if (tab.name === 'item') {
        this.$refs['ref_submit_item'].initData(this.codeId)
      }
      if (tab.name === 'submitFail') {
        this.loadSubmitFailHistory()
      }
    },
    initData (params, codeId) {
      this.params = params
      this.codeId = codeId
      this.tableParams.codeId = codeId

      this.diaVisible = true

      this.$nextTick(() => {
        this.$refs.table.loadData() // 解决表格错位
      })
    },
    // 审核失败历史
    loadSubmitFailHistory () {
      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/reason'
      // const url = '/third/code/reason'
      const param = {
        codeId: this.codeId
      }
      window.app.ajax.post(url, param,
        (data, rspMsg) => {
          this.submitFailTable = data
          // this.$message.success(rspMsg)
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        })
    },
    diaCancel () {
      this.diaVisible = false
    },

    getSrcList (tableIndex, picIndex) {
      return this.submitFailTable[tableIndex].screenshotUrl.slice(picIndex).concat(this.submitFailTable[tableIndex].screenshotUrl.slice(0, picIndex))
      // return this.submitFailTable[].screenshotUrl.slice(index).concat(this.dataForm.screenshotUrl.slice(0, index))
    }
  },
  computed: {
    tableHeight () {
      // return this.clientHeight - 60 - 80 - 80 - 50 - 400
      return this.clientHeight * 0.6 - 40
    },
    tabsHeight () {
      // return this.clientHeight - 60 - 80 - 80 - 50 - 400
      return this.clientHeight * 0.6 - 100
    },
    ...mapGetters(['clientHeight'])
  }
}
</script>
<style scoped >
.el-tabs {
  margin: 0 20px;
}
</style>