changshuBWG/src/pages/cultural-relic/index.vue

<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData"></main-top>
    <div class="table-interface">
      <div class="top-body">
        <div class="info-top">
          <div class="info-left">
            <span>按文物类别查看：</span>
            <el-select style="width:100px;" v-model="typeId" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item,i) in plist" :key="i" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span style="margin-left:20px;">按文物年代查看：</span>
            <el-select style="width:180px; text-align:center;" v-model="timeId" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item,i) in tlist" :key="i" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-input style="width:220px;margin:0 20px;" v-model="inputKey" placeholder="请输入文物名称搜索"></el-input>
            <el-button type="primary" @click="getInformation">查找</el-button>
            <el-button @click="inputKey=''">重置</el-button>
            <el-select style="margin-left:20px;" @change="piliang" :value="'批量导入 '" placeholder="请选择">
              <el-option
                label="模板下载"
                value="模板下载">
              </el-option>
              <el-option
                label="批量导入"
                value="批量导入">
              </el-option>
            </el-select>
            <input @change="uploadChange" class="upload-btn" ref="upload" type="file">
          </div>
          <div class="info-right">
            <el-button type="primary" @click="$router.push({name:'edit-cultural-relic',params:{type:0}})">新增文物</el-button>
          </div>
        </div>
        <div class="collection-con">
          <ul>
            <li class="theme-color" @click="gotoShow(item)" v-for="(item,i) in tableData" :key="i">
              <div class="li-img">
                <el-image :fit="'cover'" style="width:100%;height:100%;" :src="item.unityPic"></el-image>
                <!-- <div class="liulan"><span>浏览量: {{Math.round(Math.random()*100000)}}</span> 点赞数: {{Math.round(Math.random()*1000)}}</div> -->
              </div>
              <div>{{item.timeName}} {{item.typeName}} <span @click.stop="del(item)" class="del">删除</span></div>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
        <div class="e-pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="size"
            layout="prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import MainTop from '@/components/main-top'
import SearchBar from '@/components/search-bar'
const crumbData = [
  {
    name: '文物库',
    id: 4
  }
]

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop,
    SearchBar
  },
  data () {
    return {
      crumbData,
      tableData: [],
      inputKey: '',
      currentPage: 1,
      size: 20,
      total: 0,
      loading: false,
      plist: [],
      tlist: [],
      typeId: '',
      timeId: ''
    }
  },
  watch: {
    currentPage () {
      this.refresh()
    },
    size () {
      this.refresh()
    },
    inputKey () {
      this.refresh()
    }
  },
  mounted () {
    this.getPositionList()
    this.getTypeList()
    this.refresh()
  },
  methods: {
    del (item) {
      let data = {
        id: item.id
      }
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/collection/deleteCollection', data).then(res => {
          if (res.code === 0) {
            this.$notify.success({
              title: '提示',
              message: '删除成功',
              duration: 2000
            })
            this.refresh()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg,
              duration: 2000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async uploadChange (e) {
      let file = e.target.files[0]
      let formData = new FormData()
      formData.append('file', file)
      const res = await this.$http.post(
        '/collection/importCollection',
        formData,
        {'Content-Type': 'multipart/form-data'})
      if (res.code === 0) {
        this.$alert(`上传成功`, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.refresh()
          }
        })
      } else {
        this.$alert(`上传失败，${res.msg}`, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.refresh()
          }
        })
      }
    },
    piliang (data) {
      if (data === '模板下载') {
        window.open('/collection/importData.xlsx', '_blank')
      } else {
        this.$refs.upload.click()
      }
    },
    async getPositionList () {
      let result = await this.$http({
        method: 'post',
        data: {
          state: 0
        },
        url: '/collection/typeList'
      })

      this.plist = result.data
    },
    async getTypeList () {
      let result = await this.$http({
        method: 'post',
        url: '/collection/timeList'
      })

      this.tlist = result.data
    },
    gotoShow (item) {
      this.$router.push({ name: 'show-cultural-relic', params: { id: item.id } })
    },
    goto (item) {
      window.localStorage.setItem('editCollection', JSON.stringify(item))
      this.$router.push({ name: 'edit-collection', params: { type: 1 } })
    },
    refresh () {
      this.loading = true
      this.getInformation()
      this.loading = false
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    async getInformation () {
      let params = {
        name: this.inputKey,
        typeId: this.typeId,
        timeId: this.timeId,
        pageNum: this.currentPage,
        pageSize: this.size
      }

      let result = await this.$http({
        method: 'post',
        data: params,
        url: '/collection/list'
      })

      if (result.code !== 0) {
        return
      }
      this.tableData = result.data.list
      this.total = result.data.total
    }
  }
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>