<template> <div> <el-input readonly="readonly" v-model="specNames" placeholder="请选择"> <el-button @click="selectSpecs" slot="append" icon="el-icon-search"></el-button> </el-input> <el-dialog title="请选择规格" :visible.sync="open" width="700px" append-to-body> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="规格名称 " prop="name"> <el-input v-model="queryParams.name" placeholder="规格名称 " clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> </el-form-item> </el-form> <el-table ref="table" v-loading="loading" :data="classList" @select="handleSelectionChange" :reserve-selection="true" :row-key="(rowKey) => rowKey.id"> <el-table-column width="55" align="center"> <template slot-scope="scope"> <el-checkbox @change="x => handleSelectionChange(x, scope.row)" v-model="scope.row.selected"></el-checkbox> </template> </el-table-column> <el-table-column label="规格名称" align="center" prop="name" /> <el-table-column label="规格编码" align="center" prop="code" /> <el-table-column label="备注" align="center" prop="remark" /> <el-table-column label="原料备注" align="center" prop="materialRemark" /> <el-table-column label="选项" align="center" prop="specRules"> <template slot-scope="scope"> <el-tag style="margin-right:10px;" v-for="item in scope.row.specRules" :key="item.id"> {{ item.name }} </el-tag> </template> </el-table-column> </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="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listSpecs } from "@/api/system/spec"; export default { data() { return { loading: true, single: true, multiple: true, showSearch: true, total: 0, ids: [], classList: [], queryParams: { pageNum: 1, pageSize: 10, name: null, state: 1, }, open: false, specNames: "", }; }, props: ["value"], watch: { value: { deep: true, handler(value) { if (value) { const newValue = JSON.parse(JSON.stringify(value)); this.ids = newValue this.specNames = newValue.map((item) => item.name).join(" "); }else{ this.ids = []; this.specNames="" } }, }, }, mounted() { const { value } = this if (value) { const newValue = JSON.parse(JSON.stringify(value)); this.ids = newValue this.specNames = newValue.map((item) => item.name).join(" "); } }, methods: { selectSpecs() { this.open = true; this.getList(); }, /** 查询列表 */ getList() { this.classList=[]; this.loading = true; listSpecs(this.queryParams).then((response) => { const { rows, total } = response; this.total = total; rows.forEach((item) => { const init = this.ids || [] const selctedIds = init.filter((selected) => selected.id == item.id); if (selctedIds.length > 0) { item.selected = true } }); this.classList = rows this.loading = false; }); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, // 多选框选中数据 handleSelectionChange(a, b) { if (a) { this.ids.push(b) } else { this.ids.forEach((item, index) => { if (item.id == b.id) { this.ids.splice(index, 1) } }) } }, cancel() { this.open = false; this.ids = [] }, submitForm() { const selectData = this.ids this.$emit("input", selectData.map((item) => { item.spec_name = item.name; return item; })); this.specNames = selectData.map((item) => item.name).join(" "); this.open = false; this.ids = [] }, }, }; </script>