index.vue

<template>
	<el-dialog title="选择商品" :visible.sync="open" width="1000px" append-to-body>
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="商品名称" prop="goodsName">
				<el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="分类" prop="category">
				<SelectCategory v-model="queryParams.category" placeholder="分类" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="spuList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="商品名称" align="center" prop="name" />
      <el-table-column label="缩略图" align="center" prop="">
        <template slot-scope="scope">              
           <div class="image-tmp">
            <el-image style="width: 100px; height: 100px"  :src="getPicsList(scope.row.pics)" :preview-src-list="getPicsBigList(scope.row.pics)">
              <div slot="error" class="image-slot"></div>            
            </el-image>
          </div>    
        </template>
      </el-table-column>
      <el-table-column label="商品分类" align="center" prop="categoryName"/>
      <el-table-column label="售价" align="center" prop="price" />
      <el-table-column label="折扣价" align="center" prop="discount" />
			<el-table-column label="总销量" align="center" prop="salesVolume" />
			<el-table-column label="上架时间" align="center" prop="shelfAt" />
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submit">确 定</el-button>
			<el-button @click="cancel">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import { goodslist } from "@/api/system/goods";
import SelectCategory from '@/components/SelectCategory'
export default {
	components: { SelectCategory },
	name: "Spu",
	data() {
		return {
			ids: [],
			// 遮罩层
			loading: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 表格数据
			spuList: [],
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				goodsName: null,
				category: null,
				state: 3,
        shopId: null
			},
      shopId: null
		};
	},
	created() {
		//this.getList();
	},
	methods: {
    getPicsList(str){   
      let picObj = JSON.parse(str);  
      return picObj.thumbnail
    },
    getPicsBigList(str){
      let list=[];
      let picObj = JSON.parse(str);  
      list.push(picObj.thumbnail)
      return list;
    },
		/** 查询列表 */
		getList(shopId) {
			this.loading = true;
      this.queryParams.shopId=shopId;
      this.shopId=shopId;
			goodslist(this.queryParams).then((response) => {
				this.spuList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},

		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList(this.shopId);
		},
		/** 重置按钮操作 */
		resetQuery() {
      this.queryParams.goodsName=null;
      this.queryParams.category=null;
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
		},
		// 取消按钮
		cancel() {
			this.open = false;
			//this.reset();
		},
		openModal(shopId) {
			this.open = true;
      this.getList(shopId);
		},
		submit() {
			this.$emit('callback', this.ids);
			//this.open = false
		}
	},
};
</script>