transportation-archives/src/views/archivesMIOD/miodRecord/index.vue

<template>
  <div class="app-container row-container">
    <div class="head-container">
      <div class="head-search">
        <el-input
          v-model="typeValue"
          size="small"
          clearable
          placeholder="请输入题名搜索关键字"
          style="width: 300px;"
          class="input-prepend filter-item"
          @clear="crud.toQuery"
          @keyup.enter.native="crud.toQuery"
          @input="typeInput"
        >
          <el-select slot="prepend" v-model="inputSelect" style="width: 92px" @change="clearInputValue">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-input>
        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <p style="margin-right: 10px; font-size: 14px;">借阅时间</p>
          <date-range-picker v-model="blurryTimeStart" class="date-item" />
        </div>
        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <p style="margin-right: 10px; font-size: 14px;">归还时间</p>
          <date-range-picker v-model="blurryTimeEnd" class="date-item" />
        </div>
        <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
        <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
      </div>
    </div>
    <div class="container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <!-- @selection-change="crud.selectionChangeHandler" -->
      <el-table
        ref="table"
        v-loading="crud.loading"
        class="archives-table"
        :data="crud.data"
        style="width: 100%;"
        height="calc(100vh - 288px)"
        @cell-dblclick="tableDoubleClick"
      >
        <el-table-column prop="reg_no" label="公文登记号" width="120" />
        <el-table-column prop="maintitle" label="公文题名" min-width="140" show-overflow-tooltip />
        <el-table-column prop="details_type" label="文件类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.details_type === 1">原件</el-tag>
            <el-tag v-else>复印件</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="borrow_name" label="借阅者" />
        <el-table-column prop="borrow_type" label="借阅者类型">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.borrow_type === 1">部门</span>
              <span v-if="scope.row.borrow_type === 2">个人</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="传阅开始时间" width="200">
          <template slot-scope="scope">
            <div>{{ scope.row.start_time | parseTime }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="latest_time" label="最迟归还时间" width="200">
          <template slot-scope="scope">
            <div>{{ scope.row.latest_time | parseTime }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actual_return_time" label="实际归还时间" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.actual_return_time && (scope.row.actual_return_time!=='' || scope.row.actual_return_time!== null)">{{ scope.row.actual_return_time | parseTime }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column prop="actual_return_time" label="状态" align="center" width="110">
          <template slot-scope="scope">
            <div>
              <!-- <span v-if="scope.row.borrow_type==='即将到期'" class="row-state soon-state">即将到期</span> -->
              <span v-if="scope.row.actual_return_time && (scope.row.actual_return_time!=='' || scope.row.actual_return_time!== null)" class="row-state row-physical state-active">已归还</span>
              <span v-else class="row-state row-binding state-active">传阅中</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="actual_return_time" label="操作" align="center" width="100">
          <!--  -->
          <template slot-scope="scope">
            <el-button v-if="!(scope.row.actual_return_time && (scope.row.actual_return_time!=='' || scope.row.actual_return_time!== null))" size="mini" style="padding: 5px;" :loading="returnBtnLoading[scope.$index]" @click="handleReturnFile(scope.$index, scope.row)"><i class="iconfont icon-weituo" />归还</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="crud.data.length !== 0" />
    </div>
    <MidoArchivesInfo ref="archivesInfo" :is-mido-record="true" :parent-info="parentInfo" :page-type="pageType" />
  </div>
</template>

<script>
import CRUD, { presenter, crud } from '@crud/crud'
import { FetchDocumentReturn } from '@/api/system/documentArchives'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import MidoArchivesInfo from '@/views/archivesMIOD/miodLibrary/module/detail'
// import { parseTime } from '@/utils/index'

export default {
  name: 'MiodRecord',
  components: { pagination, DateRangePicker, MidoArchivesInfo },
  mixins: [presenter(), crud()],
  cruds() {
    return CRUD({
      url: 'api/documentArchives/initBorrowLog',
      title: '传阅记录',
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        reset: false,
        group: false
      }
    })
  },
  data() {
    return {
      typeValue: null,
      options: [
        { value: null, label: '全部' },
        { value: 1, label: '传阅中' },
        { value: 2, label: '已归还' }
      ],
      inputSelect: '',
      blurryTimeStart: null,
      blurryTimeEnd: null,
      lendDetail: false,
      rowCurrent: null,
      detailArcData: [],
      categoryId: null,
      parentInfo: null,
      pageType: 'miodRecord',
      returnBtnLoading: []
    }
  },
  watch: {
  },
  created() {
    // 初始化带select的输入框的 - 搜索
    this.inputSelect = this.options[0].value
  },
  mounted() {
  },
  methods: {
    typeInput(e) {
      this.typeInputkey = this.getDescByValue(
        this.inputSelect,
        this.options,
        'value',
        'value'
      )
      this.crud.query.readType = this.typeInputkey
      this.crud.query.search = e
      // this.crud.query[this.typeInputkey] = e
    },
    clearInputValue(val) {
      console.log('val', val)
      this.inputSelect = val
      this.typeValue = ''
      // 避免向后端传递多余参数,切换和重置时，若有typeInputkey则去掉form中对应参数
      if (this.typeInputkey) {
        delete this.crud.query[this.typeInputkey]
      }
      this.crud.query.readType = val
      this.crud.query.search = this.typeValue
      this.crud.toQuery()
    },
    getDescByValue(inputValue, data, inputKey = 'value', outputKey = 'value') {
      let outputValue = ''
      if (data && data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          const item = data[i]
          const itemValue = item[inputKey]
          if (inputValue + '' === itemValue + '') {
            outputValue = item[outputKey]
            break
          }
        }
      }
      return outputValue
    },
    [CRUD.HOOK.beforeRefresh]() {
      if (this.blurryTimeStart) {
        this.crud.query.borrowStartTime = this.blurryTimeStart[0]
        this.crud.query.borrowEndTime = this.blurryTimeStart[1]
      } else {
        this.crud.query.borrowStartTime = null
        this.crud.query.borrowEndTime = null
      }
      if (this.blurryTimeEnd) {
        this.crud.query.lastStartTime = this.blurryTimeEnd[0]
        this.crud.query.lastEndTime = this.blurryTimeEnd[1]
      } else {
        this.crud.query.lastStartTime = null
        this.crud.query.lastEndTime = null
      }
    },
    [CRUD.HOOK.afterRefresh](crud) {
    },
    resetQuery() {
      this.clearInputValue()
      this.inputSelect = this.options[0].value
      this.crud.query.readType = null
      this.crud.query.search = null
      this.blurryTimeStart = []
      this.blurryTimeEnd = []
      this.crud.query.borrowStartTime = null
      this.crud.query.borrowEndTime = null
      this.crud.query.lastStartTime = null
      this.crud.query.lastEndTime = null
      this.crud.toQuery()
    },
    tableDoubleClick(row) {
      console.log('row', row)
      this.parentInfo = row
      this.$nextTick(() => {
        this.$refs.archivesInfo.archivesInfoVisible = true
        this.$refs.archivesInfo.archivesTabIndex = 0
        this.$refs.archivesInfo.getDetial()
      })
    },
    handleReturnFile(index, row) {
      this.$set(this.returnBtnLoading, index, true)
      console.log('row', row)
      this.$confirm('确认是否归还当前所选文件，公文登记号：' + row.reg_no + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const param = {
          'documentTid': row.reg_no
        }
        console.log('param', param)
        FetchDocumentReturn(param).then((res) => {
          console.log('resReturn', res)
          if (res.code !== '-1') {
            this.$message({ message: res.msg, type: 'success', offset: 8 })
          } else {
            this.$message({ message: res.msg, type: 'error', offset: 8 })
          }
          this.crud.toQuery()
          this.$set(this.returnBtnLoading, index, false)
        }).catch(error => {
          console.error(error)
          this.$set(this.returnBtnLoading, index, false)
        })
      }).catch(() => {
        this.$set(this.returnBtnLoading, index, false)
      })
    },
    handleCloseDialog(done) {
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/collect-reorganizi.scss";

.recordList-main{
  height: calc(100vh - 236px);
  .start-date,
  .end-date{
    display: flex;
    justify-content: flex-start;
    padding-left: 8px;
    font-size: 14px;
    line-height: 30px;
    color: #0C0E1E;
    span{
      display: block;
      margin-right: 8px;
    }
  }
  .iconfont{
    font-size: 14px;
  }
  .icon-fou{
    color: #A6ADB6;
  }
  .icon-shi{
    color: #12C37A;
  }
  .icon-dengdai{
    color: #FF8329;
  }
  .icon-cuowu1{
    color: #ED4A41;
  }
  .row-state{
    width: 56px;
    padding: 0;
    text-align: center;
  }
}
.user-record{
  padding: 0 0 0 20px;
  height: calc(100vh - 320px);
}
.title-style{
  span{
    display: inline-block;
    width: 42px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    color: #0348F3;
    background-color: #CAE1FF;
    border-radius: 3px;
  }
}
::v-deep .el-dialog{
  width: 860px !important;
  .el-form-item .el-form-item__content{
    width: 280px;
  }
  .dialog-footer{
    margin-top: 15px !important;
  }
}
::v-deep .el-checkbox-group{
  .el-checkbox{
    margin-right: 10px !important;
  }
}
::v-deep .el-pagination{
  margin: 24px 0 10px 0 !important
}

::v-deep .input-prepend .el-input__inner{
  padding-left: 100px;
}

.row-state{
  font-style: normal;
  padding: 0 8px;
}
</style>