faw-report-library-web/src/components/ProcessApprovalHistory.vue

<template>
  <div class="table-box">
    <el-table
      :data="standTableList"
      style="width: 100%;margin-bottom: 30px"
      max-height="402"
      v-loading="loading"
      :header-cell-style="{ color: '#606266', fontSize: '13px',
       height: '48px'}"
      border
      @sort-change="sortChange">
<!--      <el-table-column-->
<!--        show-overflow-tooltip-->
<!--        prop="orgName"-->
<!--        align="center"-->
<!--        label="审批人所在部门">-->
<!--        <template slot-scope="scope">-->
<!--          <span >{{ scope.row.orgName }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="assignee"
        align="center"
        label="审批人员">
        <template slot-scope="scope">
          <span>{{ scope.row.assignee }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="standStateShow"
        label="审批结果"
        align="center"
      >
        <template slot-scope="scope">
          {{scope.row.$index}}
                      <span v-if="scope.row.approvalResult == '1' || scope.row.approvalResult == '3' ">
                           同意
                      </span>
          <span v-else-if="scope.row.approvalResult == '2'">
                             不同意
                      </span>
          <span v-else-if="!scope.row.approvalResult && scope.row.deleteReason=='completed'"  >
            {{scope.$index ===0 ? "发起":"重新发起"}}
          </span>

        </template>
      </el-table-column>
      <el-table-column
        prop="approvalOpinion"
        align="center"

        label="审核意见">
        <template slot-scope="scope">
          <span :title="scope.row.approvalOpinion" class="overspan">
            {{scope.row.approvalOpinion}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="160px"
        align="center"
        label="开始时间"
        prop="startTime"
      >
        <template slot-scope="scope">
          <span> {{formatDate(scope.row.createTime,"yyyy-mm-dd hh:mm:ss")}}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="160px"
        align="center"
        label="完成时间"
        prop="endTime"
     >
        <template slot-scope="scope">
        <span>{{formatDate(scope.row.endTime?scope.row.endTime:'',"yyyy-mm-dd hh:mm:ss")}}</span>
      </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        width="150px"
        align="center"
        label="审批处理时长（天）">
        <template slot-scope="scope">
          <span>{{scope.row.endTime ? scope.row.approvalTime : ''}}</span>
        </template>
      </el-table-column>
      <!--              <el-table-column-->
      <!--                      show-overflow-tooltip-->
      <!--                      align="center"-->
      <!--                      prop="approvalFile"-->
      <!--                      width="150px"-->
      <!--                      label="附件">-->
      <!--                  <template slot-scope="scope">-->
      <!--&lt;!&ndash;                      <span>{{ scope.row.approvalFile }}</span>&ndash;&gt;-->
      <!--                       <span class="lookFile" @click="lookFile(scope.row.approvalFile)" v-if="scope.row.approvalFile">查看附件</span>-->
      <!--                       <span v-else>-</span>-->
      <!--                  </template>-->
      <!--              </el-table-column>-->
    </el-table>
    <el-dialog
      width='400px'
      :visible.sync="importModalshowflagtemp"
      title="查看附件"
      @close="defaultFileList = []"
    >
      <div class="fileList" v-for="(item,index) in defaultFileList" :key="index">
        <span class="filename" :title="item.name">{{item.name}}</span>
        <span class="fileDown" @click="fileDown(item.id)">下载</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
export default {
  name: 'approvalHistory',
  props: {
    prcNum:{
      type:String
    }
  },
  data () {
    return {
      formatDate,
      loading: false,
      standTableList: [],
      importModalshowflagtemp: false,
      defaultFileList: [],
      uploadPath: 'api/att/attFile/upload'// 上传文件
    }
  },
  created () {
    this.getListByInstance({})
  },
  methods: {
    // 表格排序
    sortChange (column, prop, order) {
      const form = {}
      form.sortWord = column.prop
      if (column.order === 'ascending') {
        form.shunxu = 'asc'
      } else if (column.order === 'descending') {
        form.shunxu = 'desc'
      } else {
        form.shunxu = ''
        form.sortWord = ''
      }
      this.getListByInstance(form)
    },
    formatIssueDate (str) {
      const momentDate = this.$moment(str)
      if (momentDate.isValid()) {
        return this.$moment(str).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return str
      }
    },
    getListByInstance (form) {
      this.$api.process.getHistory({
        prcNum: this.prcNum,
        ...form
      }).then(res => {
        this.standTableList = res.data
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.table-box{
  width: 100%;
}
.lookFile{
  color: #0c91e5;
}
.lookFile:hover{
  cursor: pointer;
}
.fileList{
  width: 100%;
  line-height: 2;
}
.filename{
  width: 90%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space:nowrap;
}
.fileDown{
  color: #0c91e5;
  position: absolute;
}
.fileDown:hover{
  cursor: pointer;
}

.file .el-upload{
  display: none!important;
}
.overspan{
  display: inline-block;
  width: 90%;
  overflow: hidden;
  height: 23px;
  text-overflow: ellipsis;
}
</style>