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 @change="(e) => changeDefault(e, scope.$index)"
            v-model="scope.row.isDefault" :checked="scope.row.isDefault===1" true-label="1" false-label="0"></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="120" align="center" prop="name">
        <template slot-scope="scope">
          <el-input placeholder="名称" v-model="scope.row.name" wi></el-input>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="120" 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" style="color:blue">
              {{ item.materialName }}* {{ 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);
      if(this.list.length>=1){
        for(let i=0;i<this.list.length;i++){
          if(i==0){
             this.$set(this.list[i],"isDefault","1")
            return;
          }
        }
      }
    },
    addMaterial(index) {
      this.index = index;
      this.$refs.SelectMaterial.openModal();
    },
    selectMaterial(data) {
      this.list[this.index].specRuleMaterials = JSON.parse(
        JSON.stringify(data)
      );
    },
    add() {
      let obj={
        name: "",
        amount: "",
        specRuleMaterials: [],
        isDefault:""
      }
      if(this.list.length==0){
        obj.isDefault="1";
        this.list.push(obj);
      }else{
        let p=0;       
        for(let i=0;i<this.list.length;i++){
          if(this.list[i].isDefault=="1"){        
            p=1;
            this.list.push(obj);
            return;
          }
        }
        //没有选择默认项,默认第一条
        if(p==0){
         this.$set(this.list[0],"isDefault","1")
        }              
      }
    }, 
    clearMaterial() {
      this.list = [];
    },
  },
};
</script>

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