yxk-electronic-archives/src/views/components/archivesListModule/index.vue

<template>
  <div>
    <el-table
      ref="table"
      v-loading="tableLoading"
      class="archives-table"
      :data="tableData"
      :height="isDetail ? 'calc(100vh - 382px)':'calc(100vh - 676px)'"
      highlight-current-row
      style="width: 100%;"
      :row-key="rowKey"
      @cell-dblclick="tableDoubleClick"
    >
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column v-if="isCase" prop="child" label="子条数目" align="center" width="100" />
      <el-table-column v-else :label="selectedCategory.arrangeType === 1 ? '原文':'卷内'" prop="child" width="55" align="center">
        <template slot-scope="scope">
          {{ scope.row.child === '' ? 0 : scope.row.child }}
        </template>
      </el-table-column>
      <el-table-column v-for="field in tableDisplayFields" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip>
        <template slot="header">
          <el-tooltip
            class="item"
            effect="dark"
            :content="field.fieldCnName"
            placement="top-start"
          >
            <span>{{ field.fieldCnName }}</span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          {{ scope.row[field.fieldName] }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 档案详情 -->
    <ArchivesInfo ref="archivesInfo" :selected-category="selectedCategory" :arc-id="arcId" />
  </div>
</template>

<script>
import ArchivesInfo from '@/views/collectReorganizi/collectionLibrary/module/archivesInfo/index'
import { FetchInitCategoryViewTable, FetchInitCategoryView } from '@/api/collect/collect'
import { FetchInitContorlView } from '@/api/archivesManage/library'
export default {
  name: 'ArchivesListModule',
  components: { ArchivesInfo },
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    collectLevel: {
      type: Number,
      default: function() {
        return null
      }
    },
    selections: {
      type: Array,
      default: () => []
    },
    isTitleType: {
      type: Number,
      default: 2
    },
    isCollect: {
      type: Boolean,
      default: true
    },
    isCase: {
      type: Boolean,
      default: false
    },
    categoryId: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      tableLoading: false,
      tableDisplayFields: [],
      tableData: [],
      arrySort: [],
      arcId: null,
      isDetail: false,
      parentId: null,
      detailLevel: null,
      caseCategoryId: null
    }
  },
  watch: {
    isTitleType: function(newValue, oldValue) {
      console.log('newValue222', newValue)
    }
  },
  mounted() {
  },
  methods: {
    rowKey(row) {
      return row.id
    },
    // table - 双击查看详情
    tableDoubleClick(row) {
      this.arcId = row.id
      this.$nextTick(() => {
      })
    },
    getViewTable() {
      this.tableData = []
      this.tableLoading = true
      let params
      if (this.isDetail) {
        params = {
          categoryId: this.categoryId !== '' ? this.categoryId : this.selectedCategory.id,
          categoryLevel: this.detailLevel
        }
      } else if (this.isCase) {
        params = {
          categoryId: this.caseCategoryId,
          categoryLevel: this.collectLevel
        }
      } else {
        params = {
          categoryId: this.categoryId !== '' ? this.categoryId : this.selectedCategory.id,
          categoryLevel: this.collectLevel
        }
      }

      FetchInitCategoryViewTable(params).then((res) => {
        if (res) {
          this.arrySort = []
          this.tableDisplayFields = res
          const orderSortArry = this.tableDisplayFields.filter(item => item.displayOrder).sort((a, b) => a.displayOrder - b.displayOrder)
          orderSortArry.forEach(item => {
            if (item.displayOrderBy) {
              this.arrySort.push(item.fieldName + ',' + item.displayOrderBy)
            }
          })
          if (this.isDetail) {
            this.getViewTableList()
          } else {
            this.tableData = this.selections
            this.tableLoading = false
          }
        }
      })
    },
    getViewTableList() {
      const params = {
        'parentId': this.parentId,
        'categoryId': this.categoryId !== '' ? this.categoryId : this.selectedCategory.id,
        'categoryLevel': this.detailLevel,
        'ignore': false,
        'page': 0,
        'size': 100,
        'sort': this.arrySort
      }
      if (this.isCollect) {
        FetchInitCategoryView(params).then((res) => {
          if (res.code !== 500) {
            this.tableData = res.list.content
            this.collectLevelList = res.categoryLevel
          }
          this.tableLoading = false
        })
      } else {
        FetchInitContorlView(params).then((res) => {
          if (res.code !== 500) {
            this.tableData = res.list.content
            this.collectLevelList = res.categoryLevel
          }
          this.tableLoading = false
        })
      }
    }
  }
}
</script>

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

</style>