irc_web/.svn/pristine/26/26f28105608ead9cbef998f0fd70a4c52d0dac46.svn-base

<template>
  <div class="needSignSys-wrapper">
    <el-row>
      <el-col :span="12">
        <!-- 待签署的系统文件 -->
        <h3>{{ $t('trials:workbench:title:sysDocBeSigned') }}</h3>
      </el-col>
      <el-col :span="12" style="text-align:right;">
        <h3>
          <Pagination class="page" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" layout="total, sizes, prev, pager, next" :background="false" style="display: inline-block;" @pagination="getList" />
          <el-button icon="el-icon-refresh-left" size="small" circle :title="$t('common:button:reset')" @click="handleReset" />
        </h3>
      </el-col>
    </el-row>
    <!--  -->
    <el-table
      ref="needSignSysList"
      v-loading="listLoading"
      :data="list"
      :show-header="true"
      height="calc(100% - 100px)"
      @sort-change="handleSortByColumn"
    >
      <el-table-column type="index" width="40" />
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:fileType')"
        prop="FileType"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:fileName')"
        prop="Name"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:uploadTime')"
        prop="UpdateTime"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('common:action:action')"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit-outline"
            circle
            :title="$t('trials:workbench:action:sign')"
            @click="handleSign(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 预览/签署文件 -->
    <el-dialog
      v-if="previewVisible"
      :visible.sync="previewVisible"
      :title="title"
      :fullscreen="true"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <span v-if="!currentIsConfirm" style="position: fixed;right: 75px;top: 14px;">
        <span style="color:red;margin-right:10px;">
          <!-- 请仔细阅读文件，并签名确认 -->
          {{ $t('common:message:signTip') }}
          <span v-show="duration < currentMinMinutes * 60">{{ `(${currentMinMinutes * 60 - duration}s)` }}</span>
        </span>

        <el-button
          size="small"
          type="primary"
          :disabled="timer !== null || duration === 0"
          :loading="btnLoading"
          @click="handleConfirm"
        >
          {{ $t('common:button:sign') }}
        </el-button>
      </span>

      <div class="base-modal-body" style="border:2px solid #ccc;padding: 10px">
        <PreviewFile v-if="previewVisible" :file-path="currentPath" :file-type="currentType" @getList="getList" />
      </div>
    </el-dialog>

    <!-- 签名弹框 -->
    <el-dialog
      v-if="signVisible"
      :visible.sync="signVisible"
      :close-on-click-modal="false"
      width="600px"
      append-to-body
    >
      <div slot="title">
        <span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
      </div>
      <SignForm :is-system-doc="currentRow.IsSystemDoc" :document-id="currentRow.Id" :file-name="fileName" @closeDialog="closeSignDialog" />
    </el-dialog>
  </div>
</template>
<script>
import { getWaitSignSysDocList, setSystemDocFirstViewTime } from '@/api/trials'
import Pagination from '@/components/Pagination'
import PreviewFile from '@/components/PreviewFile/index'
import SignForm from '@/views/trials/trials-panel/attachments/self-attachment/components/SignForm'
const searchDataDefault = () => {
  return {
    pageIndex: 1,
    pageSize: 20,
    asc: true,
    sortField: ''
  }
}
export default {
  name: 'NeedSignSysDoc',
  components: { Pagination, PreviewFile, SignForm },
  data() {
    return {
      listQuery: searchDataDefault(),
      listLoading: false,
      list: [],
      total: 0,
      previewVisible: false,
      signVisible: false,
      currentMinMinutes: 0,
      duration: 0,
      timer: null,
      btnLoading: false,
      fileName: '',
      currentPath: '',
      currentType: '',
      currentIsConfirm: false,
      currentUser: zzSessionStorage.getItem('userName'),
      currentRow: {}
    }
  },
  mounted() {
    this.getList()
  },
  destroyed() {
    if (this.timer) {
      this.stopTimer()
    }
  },
  methods: {
    getList() {
      getWaitSignSysDocList(this.listQuery).then(res => {
        this.listLoading = false
        this.total = res.Result.TotalCount
        this.list = res.Result.CurrentPageData
      }).catch(() => { this.listLoading = false })
    },
    handleSign(row) {
      this.currentRow = { ...row }
      const { Name, FullFilePath, SignViewMinimumMinutes } = row
      this.currentPath = FullFilePath
      this.currentType = row.Name ? Name.substring(Name.lastIndexOf('.') + 1).toLocaleLowerCase() : ''
      this.currentMinMinutes = SignViewMinimumMinutes
      this.currentIsConfirm = false
      this.title = Name
      this.fileName = Name.slice(0, Name.lastIndexOf('.'))
      this.listLoading = true
      setSystemDocFirstViewTime(row.Id).then(res => {
        this.listLoading = false
        this.previewVisible = true
        const _this = this
        setTimeout(() => {
          _this.initTimer()
        }, 1000)
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.listQuery.asc = true
      } else {
        this.listQuery.asc = false
      }
      this.listQuery.sortField = column.prop
      this.getList()
    },
    handleReset() {
      this.listQuery = searchDataDefault()
      this.getList()
      this.$nextTick(() => {
        this.$refs.needSignSysList.clearSort()
      })
    },
    // 签名
    handleConfirm() {
      this.signVisible = true
    },
    // 关闭签名弹窗
    closeSignDialog(isSave) {
      this.signVisible = false
      if (isSave) {
        this.currentIsConfirm = true
        this.getList()
        this.$emit('refreshStats')
      }
    },
    // 初始化计时器,清除上一次的数据
    initTimer() {
      if (this.currentMinMinutes > 0 && !this.currentIsConfirm) {
        this.duration = 0
        if (this.timer) {
          this.stopTimer()
        }
        this.startTimer()
      }
    },
    // 开启计时器
    startTimer() {
      this.timer = setInterval(() => {
        this.duration++
        if (this.duration >= this.currentMinMinutes * 60) {
          this.stopTimer()
        }
      }, 1000)
    },
    // 清楚计时器
    stopTimer() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style lang="scss" scoped>
.needSignSys-wrapper{
  height: 100%;
}

</style>