yos_web/src/SDrpManagement/ProductGroup/index.vue

<template>
  <div class="group container normal-panel normal-margin">
    <div style="display:flex;align-items:center;margin-bottom:16px">
      <el-input
          placeholder="请输入搜索内容"
          suffix-icon="el-icon-search"
          v-model="params.content.where.condition"
          style="width:200px"
          size="mini"
          class="input-with-select inline-16"
          @keyup.native.enter="getProductGroup(params.content.pageNumber=1)"
          @clear="clearData"
          clearable>
      </el-input>
      <selectPeople ref="people" @selectRow="selectRow" v-if="isEnterprise == 0 || isEnterprise == 1">
        <div :class="enterprisename ? 'select-input' : ''" slot="input" >
          <el-input 
            clearable 
            @clear="selectRow({enterprisename:'',sys_enterpriseid:''})" 
            v-model="enterprisename" 
            placeholder="请选择经销商/客户" 
            @focus="$refs.people.visible=true" 
            size="small"
            style="width:300px"
          ></el-input>
        </div>
      </selectPeople>
    </div>
    <selectClass ref="class" @clickAreaBase="clickAreaBase" @brandChange="brandChange" @onClassChange="onClassChange" @Search="Search" @clearSearch="clearSearch" @clickField="clickField" :default="true"></selectClass>
    <div class="content" v-if="Object.keys(productGroup).length > 0">
      <div class="group-list">
        <div class="group-item" v-for="item in productGroup" :key="item.sa_itemgroupid" @click="itemClick(item)">
          <div class="top">
            <el-image style="width:100%;width: 200px" :src="item.attinfos[0].url" fit="contain" />
          </div>
          <div class="bottom">
            <p class="title">{{item.groupname}}</p>
            <p class="descript">{{item.groupnum}}</p>
            <p class="descript"><span v-for="(cls,index) in item.itemclass" :key="cls.index">{{index === item.itemclass.length -1 ?cls.itemclassfullname:cls.itemclassfullname + ','}}</span></p>
            <p class="price descript">价格：<span style="color:red;font-size:16px"><small>¥</small>{{item.minprice}}</span>&nbsp;~&nbsp;<span style="color:red;font-size:16px"><small>¥</small>{{item.maxprice}}</span></p>
          </div>
        </div>
      </div>
    </div>
    <el-empty description="暂无数据" v-else></el-empty>
     <div style="text-align:center;padding-top:36px">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="params.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  </div>
  </div>
</template>

<script>
import selectClass from './modules/Select2.vue'
import selectPeople from './modules/selectPeople'
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: 'productgroup',
  data() {
    return {
      brandList:'',
      brandId:[],
      tablecols:[],
      productGroup:'',
      params: {
        "id": "20220926142203",
        "content": {
          "pageSize":20,
          "pageNumber":1,
          "nocache":true,
          "brandids":[],
          "where":{
            "condition":"",
            "tradefield":'',
            "standards":''
          }
        }
      },
      total:0,
      currentPage:0,
      sys_enterpriseid:'',
      enterprisename:'',
      isEnterprise: JSON.parse(window.sessionStorage.getItem('active_account')).usertype
    };
  },
  provide () {
    return {
      sys_enterpriseid:() => this.sys_enterpriseid
    }
  },
  components:{selectClass,selectPeople},
  computed:{
  },
  watch:{
  },
  created() {
    this.getbrandList()
    this.tablecols = this.tool.tabelCol(this.$route.name).productGroupTable.tablecols
  },
  methods: {
    selectRow (data) {
      this.enterprisename = data.enterprisename
      this.sys_enterpriseid = data.sys_enterpriseid

      this.$refs.class.queryBrands(() => {
        this.$refs.class.queryClass()
        this.brandId = [this.$refs.class.brand_act]
      })
      this.$refs.class.queryAreaBase(() => {
        this.$refs.class.queryAreaBase()
        this.params.content.where.standards = [this.$refs.class.areaBase]
      })
      this.$refs.class.queryAgentiInfo(() => {
        this.params.content.where.tradefield = this.$refs.class.tradefield
        
        this.params.content.where.itemclassid = ''
        this.$refs.class.class_act = ''
        this.$refs.class.activeClass = {}
        this.params.content.pageNumber = 1
        
        this.getProductGroup()
      })
      
    },
    /* 获取品牌数据 */
    async getbrandList() {
      let res = await this.$api.requested({
        "id": "20220922085103",
        "content": {
          "nocache":true,
          "where":{
              "condition":""
          }
        }
      })
      this.brandList = res.data.map(item => {
        return {
          label:item.brandname,
          value:item.sa_brandid
        }
      })
      // this.brandId = this.brandList ? [this.brandList[0].value] : [0]
      this.getProductGroup()
    },
    async getProductGroup() {
      this.params.content.brandids = this.brandId
      if (this.sys_enterpriseid) {
        this.params.content.sys_enterpriseid = this.sys_enterpriseid
      } else {
        Reflect.deleteProperty(this.params.content,'sys_enterpriseid')
      }
      let res = await this.$api.requested(this.params)
      res.data = res.data.map(e=>{
        if (e.attinfos.length > 0) {
          return e
        } else {
          e.attinfos.push({
            url:e.cover
          })
          return e
        }
      })
      console.log(res.data,'--')
      this.productGroup = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    itemClick(id) {
      this.$router.push({
        path:'/groupDetail',
        query: {
          id:id.sa_itemgroupid,
          brandid:id.sa_brandid,
          sys_enterpriseid: this.sys_enterpriseid ? this.sys_enterpriseid : ''
        }
      })
    },
    brandChange(id) {
      console.log(id);
      this.brandId = id
      this.$refs.class.clickClass(false)
      this.getProductGroup()
    },
    onClassChange (n) {
      this.params.content.where.itemclassid = n.itemclassid
      this.getProductGroup()
    },
    clickField (item) {
      this.params.content.where.tradefield = item.tradefield
      this.getProductGroup()
    },
    clickAreaBase (item) {
      this.params.content.where.standards = item
      this.getProductGroup()
    },
    pageChange(n) {
      this.params.content.pageNumber = n
      this.getProductGroup()
    },
    Search(data) {
      this.params.content.where.condition = data
      this.params.content.pageNumber = 1
      this.getProductGroup()
    },
    clearSearch() {
      this.params.content.where.condition = ''
      this.params.content.pageNumber = 1
      this.getProductGroup()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getProductGroup()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getProductGroup()
    },
    clearData(){
      this.params.content.pageNumber = 1
      this.getProductGroup()
    },
  },
  beforeRouteLeave (to, from,next) {
    if (to.name == 'groupDetail') {
      this.$store.commit('setPageCache',['productgroup'])
    } else {
      this.$store.commit('setPageCache',[])
    }
    next()
  }
};
</script>

<style scoped>
/* @media only screen and (max-width: 1200px) {
  .gtc {
    grid-template-columns: repeat(8, 1fr);
  }
} */
.content{
  height:calc(100vh - 400px);
  overflow-y: scroll;
}
.group .group-list {
  /* display: grid;
  column-gap: 24px;
  box-sizing: border-box;
  background-color: transparent;
  grid-template-columns: repeat(5, 1fr); */
  padding-top:36px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.group .group-list .group-item {
  width: 261px;
  max-width: 357px;
  background: #ffffff;
  transition: all 0.1s ease-in;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 36px;
  margin-right: 16px;
}
.group .group-list .group-item .el-image {
  transition: transform 0.3s;
}
.group .group-list .group-item:hover .top .el-image {
  transform: scale(1.3);
}
.group .group-list .group-item .top {
  height: 150px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
}
.group .group-list .group-item .bottom {
  padding: 10px;
  /* border:1px solid #f1f2f3; */
  border-top:none;
}
.group .group-list .group-item .bottom .title {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  width: 100%;
  margin-bottom: 5px;
}
.group .group-list .group-item .bottom .descript {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  width: 100%;
  margin-bottom: 4px;
}
.group .group-list .group-item .bottom .people {
  font-size: 10px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999;
}
.group-item{
  border:1px solid #f1f2f3;
  border-radius: 3px;
}
.page {
  display: flex;
  flex-direction: row-reverse;
}
/deep/.select-input input {
  color: #3874f6;
}
</style>