SpecsSelect.vue

<template>
  <div>
    <el-table :data="list" :row-key="(row) => row.id">
      <el-table-column label="默认" width="50" align="center" prop="isDefault">
        <template slot-scope="scope">
          <el-checkbox true-label="1" false-label="0" @change="(e) => changeDefault(e, scope.$index)"
            v-model="scope.row.isDefault"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="推荐" width="50" align="center" prop="isRecommend">
        <template slot-scope="scope">
          <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRecommend"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="100" align="center" prop="name">
        <template slot-scope="scope">
          <el-input placeholder="名称" v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="80" align="center" prop="amount">
        <template slot-scope="scope">
          <el-input placeholder="价格" v-model="scope.row.amount"> </el-input>
        </template>
      </el-table-column>

      <el-table-column label="原料" align="center" prop="specRuleMaterials">
        <template slot-scope="scope">
          <div @click="addMaterial(scope.$index)" v-if="
            scope.row.specRuleMaterials &&
            scope.row.specRuleMaterials.length > 0
          ">
            <span v-for="item in scope.row.specRuleMaterials" :key="item.id">
              {{ item.name }}* {{ item.quantity || "" }}
            </span>
          </div>
          <el-button v-else type="primary" @click="addMaterial(scope.$index)" size="mini">添加原料
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" class="add" @click="add">添加</el-button>
    <SelectMaterial ref="SelectMaterial" @callback="selectMaterial" />
  </div>
</template>

<script>
import SelectMaterial from "@/components/SelectMaterial";
export default {
  components: { SelectMaterial },
  props: ["initData"],
  watch: {
    initData(data) {
      this.list = data;
    },
  },
  data() {
    return {
      list: [],
      index: "",
    };
  },
  mounted() {
    this.list = this.initData;
  },
  methods: {
    changeDefault(def, data) {
      this.list = this.list.map((item, index) => {
        item.isDefault = "0";
        if (def == "1" && data == index) item.isDefault = "1";
        return item;
      });
    },
    handleDelete(index) {
      this.list.splice(index, 1);
    },
    addMaterial(index) {
      this.index = index;
      this.$refs.SelectMaterial.openModal();
    },
    selectMaterial(data) {
      this.list[this.index].specRuleMaterials = JSON.parse(
        JSON.stringify(data)
      );
    },
    add() {
      this.list.push({
        name: "",
        amount: "",
        specRuleMaterials: [],
      });
    },
    clearMaterial() {
      this.list = [];
    },
  },
};
</script>

<style>
.add {
  margin-top: 10px;
}
</style>