FE_IASF_server/src/pages/annex/list/index.vue

<template>
  <div class="page">
    <div class="tool">
    <ul class="filter">
      <li>
        <label>站点选择</label>
        <el-select v-model="form.site" @change="initData">
          <el-option label="不限" value=""></el-option>
          <el-option
            v-for="item in sites"
            :key="item.id"
            :label="item.siteName"
            :value="item.siteName">
          </el-option>
        </el-select>
      </li>
      <li>
        <label>文件类型</label>
        <el-select v-model="form.type" @change="initData">
          <el-option
            v-for="item in types"
            :key="item.name"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </li>
    </ul>
    </div>
    <div class="tool">
      <div class="search-wrap">
        <el-select v-model="field" @change="initData">
          <el-option
            v-for="(item, i) in keywords"
            :key="i"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input>
      </div>
      <div class="actions">
        <el-button v-auth @click="batchDel">删除</el-button>
      </div>
    </div>

    <el-table ref="table" :data="list" class="table" header-align="center" @selection-change="handleSelectionChange" row-key="id">
      <el-table-column type="selection" width="50" align="center" :reserve-selection="true" :selectable="row => !row.quote"></el-table-column>
      <el-table-column type="index" width="60" label="ID"></el-table-column>
      <el-table-column prop="site" label="站点" min-width="180"></el-table-column>
      <el-table-column prop="fileName" label="名称" min-width="180"></el-table-column>
      <el-table-column prop="type" label="文件类型" min-width="80"></el-table-column>
      <el-table-column prop="format" label="格式" min-width="80"></el-table-column>
      <el-table-column prop="fileSize" label="大小" min-width="80">
        <template slot-scope="scope">
          {{ (scope.row.fileSize / 1000).toFixed(2) }}kb
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="上传时间" min-width="150"></el-table-column>
      <el-table-column prop="uploader" label="上传人" min-width="100"></el-table-column>
      <el-table-column prop="quote" label="文章名称" min-width="180">
        <template slot-scope="scope">
          {{ scope.row.quote || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="deleted" label="是否使用" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.quote ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="show(scope.row, 'edit')">查看</el-button>
          <el-button v-auth type="text" :disabled="scope.row.quote !== ''" @click="del(scope.row)">删除</el-button>
          <el-button v-auth type="text" @click="download(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import util from '@/libs/util'
export default {
    data() {
        return {
          sites: [],
          types: [
            {
              name: '不限'
            },
            {
              name: '图片'
            },
            {
              name: '视频'
            },
            {
              name: '文档'
            }
          ],
          field: 'fileName',
          keywords: [
            {
              id: 'fileName',
              name: '文件名称'
            },
            {
              id: 'uploader',
              name: '上传人'
            },
            {
              id: 'quote',
              name: '文章名称'
            }
          ],
          keyword: '',
          form: {
            site: '',
            type: '不限'
          },
          page: +this.$route.query.page || 1,
          pageSize: 10,
          total: 0,
          list: [],
          multipleSelection: [],
        };
    },
    computed: {
      ...mapState('auth', [
        'btns'
      ])
    },
    watch: {
      keyword: function(val) {
        clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(() => {
          this.initData()
        }, 500)
      }
    },
    mounted() {
      this.$store.commit('user/setCrumbs', [
        {
          name: '附件管理'
        }
      ])
      this.getData()
      this.getSite()
    },
    methods: {
      getData() {
        const { form } = this
        this.$post(this.api.listByPage, {
          page: this.page,
          limit: this.pageSize,
          quote: this.field === 'quote' ? this.keyword : '',
          fileName: this.field === 'fileName' ? this.keyword : '',
          uploader: this.field === 'uploader' ? this.keyword : '',
          site: form.site,
          type: form.type === '不限' ? '' : form.type
        }).then(({ data }) => {
          this.list = data.records
          this.total = +data.total
        }).catch(err => {})
      },
      // 获取站点列表
      getSite() {
        this.$post(this.api.site, {
          page: 1,
          limit: 1000,
          siteName: ''
        }).then(({ data }) => {
          this.sites = util.getSite(data.records)
        }).catch(e => {})
      },
      initData() {
        this.$refs.table.clearSelection()
        this.page = 1
        this.getData()
      },
      // 查看
      show(row) {
        const format = row.format
        window.open((util.isDoc(format) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + row.url)
      },
      // 下载
      download(row) {
        util.downloadFile(row.fileName, row.url)
      },
      // 删除
      del(row) {
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$del(`${this.api.delFile}`, [row.id]).then(res => {
            util.successMsg('删除成功')
            this.getData()
          }).catch(res => {})
        }).catch(() => {})
      },
      // 批量删除
      batchDel() {
        const list = this.multipleSelection
        if (list.length) {
          this.$confirm('确定要删除吗？', '提示', {
            type: 'warning'
          }).then(() => {
            this.$del(`${this.api.delFile}`, list.map(e => e.id)).then(res => {
              this.$refs.table.clearSelection()
              util.successMsg('删除成功')
              this.getData()
            }).catch(res => {})
          }).catch(() => {})
        } else {
          util.errorMsg('请先选择数据 ！')
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleCurrentChange(val) {
        this.page = val
        this.$router.push(`list?page=${val}`)
        this.getData()
      },
    }
};
</script>

<style lang="scss" scoped>

</style>