商品规格属性功能

src/views/product/rule/index.vue

@@ -65,6 +65,17 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" />
       <el-table-column label="规格名称" align="center" prop="name" />
+      <el-table-column label="规格属性名" align="center" prop="name">
+        <template slot-scope="scope">
+          <el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.name}}</span></el-row>
+        </template>
+      </el-table-column>
+      <el-table-column label="规格属性值" align="center" prop="name">
+        <template slot-scope="scope">
+          <el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.valueList.toString()}}</span></el-row>
+        </template>
+      </el-table-column>
+
       <el-table-column label="规格状态" align="center" prop="status" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -104,6 +115,46 @@
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+        <el-row v-for="(ruleAttr,index) in form.ruleAttrList">
+          <el-row style="margin: 20px 0">
+            <el-tag
+              :key="ruleAttr.name"
+              @close="removeRule(index)"
+              closable>
+              {{ruleAttr.name}}
+            </el-tag>
+          </el-row>
+          <el-row style="margin: 10px 0">
+            <el-tag
+              style="float: left; margin-right: 20px"
+              v-for="(ruleProperty,index) in ruleAttr.valueList"
+              :key="ruleProperty"
+              @close="removeRuleProperty(ruleAttr.valueList,index)"
+              closable>
+              {{ruleProperty}}
+            </el-tag>
+            <el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus=!ruleAttr.ruleAttrAddStatus" size="mini">
+              添加
+            </el-button>
+            <el-input v-if="ruleAttr.ruleAttrAddStatus" v-model="addRulePropertyValue"
+                      @blur="addRuleProperty(ruleAttr,false)"
+                      @keyup.enter.native="addRuleProperty(ruleAttr,true)"
+                      size="mini" placeholder="请输入规格属性值" style="float: left;width: 150px" />
+          </el-row>
+          <el-divider></el-divider>
+        </el-row>
+        <el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus=!ruleAddFormStatus">添加规格</el-button>
+        <el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">
+            <el-form-item label="规格名称">
+              <el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
+            </el-form-item>
+          <el-form-item label="规格属性">
+            <el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input>
+          </el-form-item>
+          <el-form-item label="规格属性">
+            <el-button type="primary" @click="ruleAddFormFun">添加</el-button>
+          </el-form-item>
+        </el-form>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -155,13 +206,86 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
-      }
+      },
+      ruleAddForm:{
+        name: null,
+        valueList: null,
+      },
+      ruleAddFormStatus: false,
+      addRulePropertyValue: null
     };
   },
   created() {
     this.getList();
   },
   methods: {
+
+    removeRule(index){
+      this.form.ruleAttrList.splice(index,1);
+    },
+    removeRuleProperty(valueList,index){
+      valueList.splice(index,1);
+    },
+    addRuleProperty(ruleAttr,continuousInput){
+      if(this.addRulePropertyValue===null || this.addRulePropertyValue===0){
+        if(!continuousInput){
+          ruleAttr.ruleAttrAddStatus=!ruleAttr.ruleAttrAddStatus
+        }
+        return;
+      }
+      if(ruleAttr.valueList.indexOf(this.addRulePropertyValue)>-1){
+        this.$message(
+          {
+            message:`规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`,
+            type:'warning'
+          }
+        );
+        return;
+      }
+      ruleAttr.valueList.push(this.addRulePropertyValue)
+      this.addRulePropertyValue=null;
+      if(!continuousInput){
+        ruleAttr.ruleAttrAddStatus=!ruleAttr.ruleAttrAddStatus
+      }
+    },
+    ruleAddFormFun(){
+      if(this.ruleAddForm.name===null||this.ruleAddForm.name.length===0){
+        this.$message({
+          message:'规格名称不可为空',
+          type:'warning'
+        });
+        return;
+      }
+      if(this.ruleAddForm.valueList===null || this.ruleAddForm.valueList.length===0){
+        this.$message({
+          message:'规格属性不可为空',
+          type:'warning'
+        });
+        return;
+      }
+      let ruleAttr=this.form.ruleAttrList.find(ruleAttr => ruleAttr.name===this.ruleAddForm.name);
+      if(ruleAttr===undefined){
+        this.form.ruleAttrList.push({
+          "name":this.ruleAddForm.name,
+          "valueList":[this.ruleAddForm.valueList],
+          "ruleAttrAddStatus":false
+        })
+      }else{
+        if(ruleAttr.valueList.indexOf(this.ruleAddForm.valueList)>-1){
+          this.$message({
+            message:`规格[${this.ruleAddForm.name}]属性值[${this.ruleAddForm.valueList}]已经存在`,
+            type:'warning'
+          });
+          return;
+        }
+        ruleAttr.valueList.push(this.ruleAddForm.valueList)
+      }
+      this.ruleAddForm={
+        name:null,
+        valueList:null,
+      }
+      this.ruleAddFormStatus=false;
+    },
     /** 查询商品规格列表 */
     getList() {
       this.loading = true;
@@ -183,10 +307,7 @@ export default {
         name: null,
         status: null,
         remark: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
+        ruleAttrList:[]
       };
       this.resetForm("form");
     },