DL_houtai/src/pages/content/Collection.vue

<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData">
      <div slot="con">
        <el-button type="primary" @click="$router.push({name:'edit-collection',query:{type},params:{type:0,id:'none'}})">新增精品典藏</el-button>
      </div>
    </main-top>
    <div class="table-interface">
      <div class="con-left">
        <el-menu :default-active="`1-${type}`" @select="handleSelect" class="el-menu-vertical-demo" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">精品典藏</span>
            </template>
            <el-menu-item v-for="(item,i) in collectionType" :key="i" :index="'1-'+item.id">{{item.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
        <div class="sousuo" @click="isCollapse=!isCollapse">
          <i :class="isCollapse?'el-icon-arrow-right':'el-icon-arrow-left'"></i>
        </div>
      </div>
      <div class="top-body">
        <ul class="tab">
          <li @click="status = 5" :class="{active:status !== 4}">待审核</li>
          <li @click="status = 4" :class="{active:status === 4}">审核通过</li>
        </ul>
        <div class="info-top">
          <div class="info-left">
            <span>发布时间：</span>
            <el-date-picker
              v-model="time"
              type="daterange"
              range-separator="-"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <span style="margin-left:1.25rem;">状态：</span>
            <el-select style="width:6.25rem;" v-model="status" placeholder="请选择">
              <el-option label="全部" :value="5"></el-option>
              <el-option v-for="(item,i) in statusArr" :key="i" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span style="margin-left:1.25rem;">标题关键字：</span>
            <el-input class="elInput" v-model="inputKey" placeholder="请输入标题关键字搜索"></el-input>
            <el-button type="primary" @click="getInformation">查找</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
          <div class="info-right">
          </div>
        </div>
        <el-table :data="tableData" height="55vh" class="collection-con" style="width: 100%">
          <el-table-column
            v-for="(item, idx) in data"
            :key="idx"
            :sortable="item.prop==='viewCount'"
            :prop="item.prop"
            :width="item.prop === 'thumb'?250:'auto'"
            :label="item.label"
          >
            <template slot-scope="scope" >
              <el-switch
                v-model="scope.row[item.prop]"
                v-if="item.prop === 'display'"
                v-show="status === 4"
                @change="changeState(scope.row)"
                inactive-color="#ccc">
              </el-switch>
              <el-image 
                v-else-if="item.prop === 'thumb'"
                style="width:auto;height:125px;"
                :src="scope.row[item.prop]"
                :preview-src-list="[scope.row[item.prop]]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <el-input type="number" class="icenter" v-else-if="(item.prop === 'sort')" @blur="handleSort(scope.row)" v-model="scope.row[item.prop]"></el-input>
              <span v-else v-html="scope.row[item.prop]||'-'"></span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope" >
              <template v-if="status !== 4">
                <template v-if="scope.row.statusStr === '待审核'">
                  <span class="o-span" @click="goto(scope.row)" v-if="scope.row.statusStr === '待审核'">
                    '审核'
                  </span>
                </template>
                <template v-else>
                  <span class="o-span" @click="goto(scope.row)">编辑</span>
                  <span class="o-span" @click="del(scope.row)">删除</span>
                </template>
              </template>
              <template v-else>
                <span class="o-span" @click="goto(scope.row)">查看</span>
                <span class="o-span" v-if="(!scope.row.display)" @click="del(scope.row)">删除</span>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <div class="e-pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            @size-change="handleSizeChange"
            :page-size="size"
            :page-sizes="PAGESIZES"
            layout="total, sizes, 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 {changeState} from '@/util/commonfn.js'
const crumbData = [
  {
    name: '精品典藏管理',
    id: 4
  }
]

let collectionType = [
  {
    id:3,
    name:'实物模型'
  },
  {
    id:1,
    name:'专题图库'
  },
  {
    id:2,
    name:'视频档案'
  }
]



let data = [
  {
    prop: "idx",
    label: "编号"
  },
  {
    prop: "title",
    label: "标题"
  },
  {
    prop: "thumb",
    label: "封面图片"
  },
  {
    prop: "sort",
    label: "排序"
  },
  {
    prop: "viewCount",
    label: "阅读"
  },
  {
    prop: "submitName",
    label: "发布人"
  },
  {
    prop: "createTime",
    label: "发布时间"
  },
  {
    prop: "statusStr",
    label: "所属状态"
  }
];
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop,
  },
  data () {
    return {
      isCollapse:false,
      crumbData,
      time:'',
      tableData: [],
      inputKey: '',
      currentPage: 1,
      size: 25,
      total: 0,
      collectionType,
      loading: false,
      status:5,
      type:this.$route.params.type
    }
  },
  computed:{
    data(){
      data.pop()
      let item = this.status === 4?{
        prop: "display",
        label: "是否显示"
      }:{
        prop: "statusStr",
        label: "所属状态"
      }
      data.push(item)
      return data
    }
  },
  watch: {
    currentPage () {
      this.refresh()
    },
    size () {
      this.refresh()
    },
    status () {
      this.refresh()
    },
    type(){
      this.refresh()
    }
  },
  mounted () {
    this.refresh()
  },
 
  methods: {
    handleSort(item=""){
      if(!item||!item.sort)return
      this.$http.get(`/manage/goods/sort/${item.id}/${item.sort}`, {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      })
      .then((res) => {
        if (res.code === 0) {
          // this.refresh();
        } else {
          this.$notify.error({
            title: "错误",
            message: res.msg
          });
        }
      });
    },
    changeState(item) {
      changeState(item,'goods',()=>{
          this.refresh();
      })
    },
    handleSelect(index){
      this.type = Number(index.substr(-1))
      this.$router.push({
        name:'collection',
        params:{
          type:this.type
        }
      })
      // this.refresh()
    },
    reset(){
      this.inputKey=''
      this.status=5
    },
    del (item) {
      let ids = item.id
      this.$confirm('删除后，信息将无法恢复，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get(`/manage/goods/remove/${ids}`,{headers: {
          token: window.localStorage.getItem('token')
        }}).then(res => {
          if (res.code === 0) {
            this.$alert('删除成功', '提示', {
              confirmButtonText: '确定',
              callback: () => {
                this.refresh()
              }
            })
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    
    gotoShow (item) {
      this.$router.push({ name: 'show-collection', params: { id: item.id } })
    },

    goto (item) {
      this.$router.push({ name: 'edit-collection', params: { type: 1,id:item.id } })
    },
 
    refresh () {
      this.loading = true
      this.getInformation()
      this.loading = false
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleSizeChange(val){
      this.size = val
    },
    async getInformation () {
      let params = {
        pageNum:this.currentPage,
        pageSize: this.size,
        searchKey: this.inputKey,
        startTime: this.time? (this.time[0].split(' ')[0] + ' 00:00:00') : '',
        endTime: this.time? (this.time[1].split(' ')[0] + ' 23:59:59') : '',
        status: this.status,
        type:this.type
      }

      let result = await this.$http({
        method: 'post',
        data: params,
        headers: {
          token: window.localStorage.getItem('token')
        },
        url: '/manage/goods/list'
      })

      if (result.code !== 0) {
        return
      }
      this.tableData = result.data.list
      this.total = result.data.total
      this.tableData.forEach((item, i) => {
        item["idx"] = i + 1;
        item["typeStr"] = this.typeStr[item.type];
        item["statusStr"] = this.statusStr[item.status];
        item["createTime"] = item["createTime"].split(' ')[0] + '<br/>' +item["createTime"].split(' ')[1]
        item["display"] = Boolean(item["display"]);
      });
    }
  }
}
</script>


<style lang="less" scoped>
.top-body{
  border-top: .0625rem solid #e6e6e6;
  line-height: 1.5;
  padding: 0 1.25rem 1.25rem;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
  margin: 1rem 0;
  width: 90%;
}

.top-body .top-con{
  font-weight: bold;
}
.table-title{
  padding: 1rem 1rem 1rem 0 ;
  font-size: 1rem;
  color: #2d2d2d;
  border-bottom: .0625rem solid #ccc;
  display: flex;
  justify-content: space-between;
}

.more{
  color: #ec652d;
  cursor: pointer;
}

.top-right{
  background-color: #ec652d;
  height: 3.5625rem;
  line-height: 3.5625rem;
  color: #fff;
  padding: 0 1.875rem;
  border-radius: .3125rem;
  font-size: 1.125rem;
  font-weight: bold;
}

.search-body{
  background-color: #fff;
  margin: 1.25rem 0;
}

.interface-table{
  height: calc(100% - 17.1875rem);
  overflow-x: hidden;
  background-color: #fff;
  padding: 0 1.125rem 2.375rem;
  box-sizing: border-box;
}

.zan-con{
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1.125rem;
}

.zan-con .line{
  height: 8rem;
  width: .0625rem;
  background: #ccc;
}

.zan-con .zan-contain{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.zan-con .zan-contain p{
  font-size: 2.25rem;
}

.zan-con .zan-contain p:first-child{
  font-size: .875rem;
  line-height: 1.5;
}

.zan-sub{
  text-align: right;
  margin-top: 1.25rem;
  color: #a5a5a5;
  font-size: .875rem;
}

.table-interface{
  height: calc(100% - 3rem);
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .con-left{
    border-right: solid 1px #e5e5e5;
    position: relative;
    margin-right: 30px;
    .sousuo{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -30px;
      cursor: pointer;
    }
  }
}


.info-top{
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  border-bottom: .0625rem #a5a5a5 solid;
}

.o-span{
  cursor: pointer;
  color: rgb(7, 152, 244);
}

.collection-con{
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 55vh;
}



.collection-con ul{
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.collection-con ul li {
  width: 24%;
  margin-right: 1%;
  cursor: pointer;
  font-size: .8rem;
  color: #2d2d2d;
  margin-bottom: 1.25rem;
}

.collection-con ul .li-img {
  position: relative;
  
}
.collection-con ul .li-img div{
  position: absolute;
  left: .625rem;
  bottom: .625rem;
  color: #fff;
}

.collection-con ul .li-img div span{
  margin-right: .625rem;
}


.collection-con ul img {
  width: 100%;
}

.collection-con{
  .li-txt,.li-name{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .li-name{
    margin-top: .5rem;
    div{
      font-size: 1rem;
      font-weight: bold;
      color: #532F1C;
      &:last-of-type{
        color: #707070;
        font-size: .875rem;
        font-weight: normal;
        span{
          margin-left: .30rem;
          &:last-of-type{
            &:hover{
              color: #409EFF;
            }
          }
          &:hover{
            color: #c56351;
          }
        }
      }
    }
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu{
  border-right: none!important;
}
</style>