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

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

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">选择商品</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-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-check">确定选择</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-close" @click="toggleSelection()">取消选择</el-button>
    </div>

    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width:100%;margin-top:20px;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column label="商品ID" align="center" prop="id" />
      <el-table-column label="商品图片" align="center" prop="classifyImage">
        <template slot-scope="{row}">
          <img :src="row.mainImage" alt="">
        </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">
        <template slot-scope="{row}">
          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="成本价" align="center" prop="costPrice">
        <template slot-scope="{row}">
          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="售价" align="center" prop="retailPrice">
        <template slot-scope="{row}">
          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="起订量" align="center" prop="minBuyNumber">
        <template slot-scope="{row}">
          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="商品分类" align="center" prop="classifyID">
        <template slot-scope="{row}">
          <el-select v-model="row.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="">
            <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
          </el-select>
        </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: '1',
      listQuery: {
        page: 1,
        limit: 10,
        form: {
          id: '',
          classifyImage: '',
          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',
        }
      },
      multipleSelection: []
    }
  },
  computed: {
    organizeID() {
      return this.$store.state.settings.organizeID
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      }).catch(() => {
        // 封装静态数据
        this.list = [
          {
            id: 0,
            classifyImage: '',
            productName: 'hahaah',
            shopName: '',
            normalPrice: '',
            costPrice: '',
            retailPrice: '',
            minBuyNumber: '',
            preferredProduct: '',
            commonlyProduct: '',
            preferentialProduct: '',
            validFlag: '',
            productClassifyName: 0,
            addTime: '',
            organizeID: this.organizeID
          },
          {
            id: 0,
            classifyImage: '',
            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('添加')
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>