caimei-mall-admin-ui/src/views/goods/list-preferred.vue

<template>
  <div class="app-container">

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
    </el-menu>

    <div class="filter-container" style="margin-top:20px;">
      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-sort">批量更新排序</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline">
        <router-link to="/goods/list/select">添加商品</router-link>
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width:100%;margin-top:20px;"
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="商品ID" align="center" prop="id" />
      <el-table-column label="商品图片" align="center" prop="mainImage">
        <template slot-scope="{row}">
          <img :src="row.mainImage" alt="" width="50">
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="productName" />
      <el-table-column label="供应商名称" align="center" prop="shopName" />
      <el-table-column label="市场价" align="center" prop="normalPrice" />
      <el-table-column label="成本价" align="center" prop="costPrice" />
      <el-table-column label="售价" align="center" prop="retailPrice" />
      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
      <el-table-column align="center" label="添加时间" prop="addTime">
        <template slot-scope="{row}">
          <i class="el-icon-time" />
          <span>{{ row.addTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序值" align="center" prop="sort">
        <template slot-scope="{row}">
          <el-input v-model="row.sort" style="width:60px;" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button :vid="row.id" type="primary" size="small">取消</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />

  </div>
</template>

<script>
import { getList } from '@/api/goods'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'gray'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      activeIndex: '2',
      listQuery: {
        page: 1,
        limit: 10,
        form: {
          id: '',
          mainImage: '',
          productName: '',
          shopName: '',
          normalPrice: '', // 市场价',
          costPrice: '', // 成本价',
          retailPrice: '', // '售价',
          minBuyNumber: '', // '最小起订量',
          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
          validFlag: '', // '商品状态,1已上架,2已下架',
          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
          addTime: '', //  '添加时间',
          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
        }
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      }).catch(() => {
        // 封装静态数据
        this.list = [
          {
            id: 0,
            mainImage: 'https://img.caimei365.com/group1/M00/00/C3/Cmis21ogFTuATpnrAAIh4ixubXM38.JPEG',
            productName: '韩国恩盛进口 素提亚 BeautyHeart 电穿孔技术 打造V脸 紧致提升',
            shopName: '北京恩盛众成国际贸易有限公司',
            normalPrice: '10000.00',
            costPrice: '6666.00',
            retailPrice: '6600.00',
            minBuyNumber: '1',
            preferredProduct: '1',
            commonlyProduct: '1',
            preferentialProduct: '1',
            validFlag: '1',
            productClassifyName: 0,
            addTime: new Date(),
            organizeID: this.organizeID
          },
          {
            id: 0,
            mainImage: '',
            productName: 'hahaah',
            shopName: '',
            normalPrice: '',
            costPrice: '',
            retailPrice: '',
            minBuyNumber: '',
            preferredProduct: '',
            commonlyProduct: '',
            preferentialProduct: '',
            validFlag: '',
            productClassifyName: 0,
            addTime: '',
            organizeID: this.organizeID
          }
        ]
      })
      this.listLoading = false
      this.total = 2
    },
    handleFilter() {
      alert('搜索')
    },
    handleCreate() {
      alert('添加')
    }
  }
}
</script>

<style scoped>

</style>