GCLS_Page_BMS/src/views/upload/uploadList.vue

<!--  -->
<template>
  <div class="book-vocab">
    <div class="book-vocab-content">
      <div class="book-vocab-content-create">
        <el-button size="mini" type="primary" @click="createVocab">上传资源</el-button>
      </div>
      <div class="book-vocab-content-search">
        <el-form :inline="true" :model="searchForm" size="mini">
          <el-form-item label="名称">
            <el-input v-model="searchForm.name" placeholder="请输入关键词"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="searchForm.memo" placeholder="请输入关键词"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="book-vocab-content-table">
        <el-table :data="book_List">
          <el-table-column label="键值" prop="resource_key" width="200"></el-table-column>
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="备注" prop="memo"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleView(scope.row)">查看</el-button>
              <!-- <el-button @click="handleEdit(scope.row)" size="small" type="text">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="book-vocab-content-pag">
        <el-pagination
          background
          :current-page="cur_page"
          :page-size="page_capacity"
          :page-sizes="[20, 30, 40, 50]"
          :total="total_count"
          layout="prev, pager, next, total, sizes, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :before-close="handleClose" :visible.sync="dialogFlag">
      <uploadDetail :resource_key="resource_key" @closeDialog="closeDialog"></uploadDetail>
    </el-dialog>
  </div>
</template>

<script>
import { getContent } from '@/api/ajax';
import uploadDetail from './uploadDetail';

export default {
  name: 'UploadList',
  components: {
    uploadDetail
  },
  data() {
    return {
      page_capacity: 20,
      cur_page: 1,
      total_count: 0,
      searchForm: {
        memo: '',
        name: ''
      },
      book_List: [],
      resource_key: '',
      dialogFlag: false
    };
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getWordList();
  },
  // 方法集合
  methods: {
    getWordList() {
      let MethodName = 'file_resource_manager-PageQueryFileResourceList';
      let data = {
        memo: this.searchForm.memo,
        name: this.searchForm.name,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page
      };
      getContent(MethodName, data).then(res => {
        this.total_count = res.total_count;
        this.book_List = res.file_list;
      });
    },
    handleSizeChange(val) {
      this.page_capacity = val;
      this.cur_page = 1;
      this.getWordList();
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getWordList();
    },
    onSearch() {
      this.getWordList();
    },
    // 新增资源
    createVocab() {
      this.resource_key = '';
      this.dialogFlag = true;
    },
    // 查看资源详情
    handleView(row) {
      this.resource_key = row.resource_key;
      this.dialogFlag = true;
    },
    // 关闭弹窗
    handleClose(done) {
      this.loading = false;
      done();
    },
    // 子级调用父级关闭弹窗
    closeDialog() {
      this.dialogFlag = false;
      this.cur_page = 1;
      this.getWordList();
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scope>
@import '~@/styles/mixin.scss';

.book-vocab {
  width: 100%;
  height: 100%;

  &-content {
    width: 1200px;
    margin: 0 auto;
    padding: 30px 0;

    &-create {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
    }

    &-table {
      width: 100%;
      min-height: calc(100vh - 130px);
    }

    &-pag {
      @include pagination;
    }
  }
}
</style>