onlyoffice-front/src/views/List.vue

<template>
  <div class="page">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-row :gutter="24">
        <!--标准号/标准名称-->
        <a-col :md="6" :sm="12">
          <a-form-item label="文档名称">
            <a-input placeholder="请输入文档名称" v-model="queryParam.fileName"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="8">
          <a-button type="primary" @click="searchQuery" icon="search" class="search-btn">查询</a-button>
          <a-button type="primary" @click="searchReset" icon="reload" ghost class="search-btn">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-button class="operate-btn" type="primary" @click="handleAdd">新增</a-button>
    <a-table
      bordered
      :loading="loading"
      :columns="columns"
      :data-source="dataSource"
      :pagination="ipagination"
      @change="tableOnChange">

      <template slot="text" slot-scope="text">
        <a-tooltip overlay-class-name="tooltip-style">
          <template slot="title">{{ text }}</template>
          <div class="table-text">{{ text }}</div>
        </a-tooltip>
      </template>

      <template slot="operation" slot-scope="text, record">
        <a class="table-operate-btn" @click="handleEdit(record)">编辑</a>
        <!--<a class="table-operate-btn" @click="handleDelete(record.id)">删除</a>-->
      </template>

    </a-table>

    <add-file-modal ref="formModal" @ok="modalFormOk" />
  </div>
</template>

<script>
import AddFileModal from './modules/AddFileModal.vue'
import { getList, deleteFile } from '../api/fileApi.js'

export default {
  name: 'List',
  components: { AddFileModal },
  data () {
    return {
      loading: false,
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' ' + '共' + total + '项'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          dataIndex: 'fileName',
          title: '文档名称',
          align: 'center',
          scopedSlots: { customRender: 'text' }
        },
        {
          dataIndex: 'createTime',
          title: '创建时间',
          width: 250,
          align: 'center',
          scopedSlots: { customRender: 'text' }
        },
        {
          dataIndex: 'updateTime',
          title: '更新时间',
          width: 250,
          align: 'center',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: '操作',
          fixed: 'right',
          width: 200,
          align: 'center',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      dataSource: [],
      url: {
        list: '/onlyoffice/pageList'
      },
      queryParam: {}
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    tableOnChange (pagination) {
      this.ipagination = pagination
      this.loadData()
    },
    loadData (arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      const params = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        column: 'createTime',
        order: 'desc',
        fileName: this.queryParam.fileName ? '*' + this.queryParam.fileName + '*' : null
      }
      this.loading = true
      getList(params).then((res) => {
        if (res.success) {
          // update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          console.log(this.dataSource)
          // update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          // this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleAdd () {
      this.$refs.formModal.add()
    },
    handleEdit (record) {
      const { href } = this.$router.resolve({
        path: '/editorPage',
        query: {
          filePath: record.editFilePath,
          fileName: record.fileName,
          fileType: 'docx',
          fileId: record.id,
          key: record.id
        }
      })
      window.open(href, '_blank')
    },
    handleDelete (id) {
      this.$confirm({
        title: '确认删除？',
        content: '确定删除吗?',
        onOk: () => {
          deleteFile({ id: id }).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              // 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
              if (this.ipagination.current > 1 && ((this.ipagination.current - 1) * this.ipagination.pageSize) + 1 === this.ipagination.total) {
                this.ipagination.current -= 1
              }
              this.loadData()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    modalFormOk () {
      this.loadData()
    },
    searchReset () {
      this.queryParam = {}
      this.loadData(1)
    },
    searchQuery () {
      this.loadData(1)
    }
  }
}
</script>

<style scoped>
.page {
  padding: 24px;
  text-align: left;
}

.operate-btn {
  margin: 20px 0;
}

/*表格中换行文本的样式*/
.table-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-operate-btn {
  margin: 0 8px;
}

.table-operate-btn:last-child {
//color: red;
}

.search-btn {
  margin: 5px 0 0 10px;
}
</style>