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="spuName">
				<el-input v-model="queryParams.spuName" 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="takeTime" />
			<el-table-column label="折扣价" align="center" prop="discount" />
			<el-table-column label="原价" align="center" prop="price" />
			<!-- <el-table-column label="标签" align="center" prop="label" /> -->
			<el-table-column label="简介" align="center" prop="desc" />
			<el-table-column label="备注" align="center" prop="remarks" />
			<!-- <el-table-column
        label="上架时间"
        align="center"
        prop="shelfTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.shelfTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column> -->
			<el-table-column label="状态" align="center" prop="status" />
		</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 { listSpu } 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,
				spuName: null,
				productionTime: null,
				discountPrice: null,
				originalPrice: null,
				label: null,
				desc: null,
				createUserId: null,
				updateUserId: null,
				shelfTime: null,
				status: null,
			},
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询列表 */
		getList() {
			this.loading = true;
			listSpu(this.queryParams).then((response) => {
				this.spuList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},

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