index.vue

<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="500px" 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>
      <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,
        status: 0,
      },
      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(" ");
        }
      },
    },
  },
  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.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>