规格前台回显，单规格查询

src/api/product/rule.js

@@ -26,6 +26,7 @@ export function addRule(data) {
   })
 }
 
+
 // 修改规格
 export function updateRule(data) {
   return request({

src/views/product/rule/index.vue

@@ -63,8 +63,26 @@
 
     <el-table v-loading="loading" :data="ruleList" @selection-change="handleSelectionChange">
       <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" >
+        <template slot-scope="scope">
+          <el-row  v-for="attr in scope.row.ruleAttrList">
+            <span onresize="mini">{{attr.attrName}}</span>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column label="属性值" align="center" >
+        <template slot-scope="scope">
+          <el-row  v-for="attr in scope.row.ruleAttrList">
+            <span>{{attr.valueList.toString()}}</span>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column label="是否启用" align="center" prop="states" >
+      <template slot-scope="scope">
+        <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.states"/>
+      </template>
+      </el-table-column>
       <el-table-column label="说明" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -97,12 +115,72 @@
     <!-- 添加或修改规格对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="规格名称" prop="name">
+        <el-row>
-          <el-input v-model="form.name" placeholder="请输入规格名称" />
+          <el-col :span="12">
-        </el-form-item>
+            <el-form-item label="规格名称" prop="name">
-        <el-form-item label="说明" prop="remark">
+              <el-input v-model="form.name" placeholder="请输入规格名称" />
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
-        </el-form-item>
+            <el-form-item label="状态" prop="states">
+              <el-radio-group v-model="form.states">
+                <el-radio
+                  v-for="dict in dict.type.sys_yes_no"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="说明" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-for="(ruleAttr,index) in form.ruleAttrList">
+              <el-tag
+                :key="ruleAttr.attrName"
+                closable
+                @close="removeRule(index)">
+                {{ruleAttr.attrName}}
+              </el-tag>
+
+            <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-button size="mini" v-if="ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus">取消</el-button>
+            </el-row>
+
+            <el-divider></el-divider>
+        </el-row>
+          <el-button v-if="!ruleAddStatus" @click="ruleAddStatus = !ruleAddStatus">添加规格</el-button>
+        <el-form v-if="ruleAddStatus" :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>
+            <el-button type="primary" @click="ruleAddFormFun" v-if="ruleAddStatus">添加</el-button>
+            <el-button type="primary" @click="ruleAddStatus = !ruleAddStatus">取消</el-button>
+          </el-form-item>
+        </el-form>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -117,8 +195,14 @@ import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/r
 
 export default {
   name: "Rule",
+  dicts: ['sys_yes_no'],
   data() {
     return {
+      ruleAddStatus: false,
+      ruleAddForm: {
+        name: null,
+        valueList: null,
+      },
       // 遮罩层
       loading: true,
       // 选中数组
@@ -145,6 +229,7 @@ export default {
       },
       // 表单参数
       form: {},
+      addRulePropertyValue: null,
       // 表单校验
       rules: {
         name: [
@@ -157,10 +242,80 @@ export default {
     this.getList();
   },
   methods: {
+    addRuleList() {
+        this.ruleAddFormStatus = false;
+
+    },
+    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;
+      }
+      console.log(ruleAttr)
+      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({
+          "attrName": 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.ruleAddStatus = false;
+    },
     /** 查询规格列表 */
     getList() {
       this.loading = true;
       listRule(this.queryParams).then(response => {
+        console.log(response)
         this.ruleList = response.data.rows;
         this.total = response.data.total;
         this.loading = false;
@@ -180,7 +335,9 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
+        ruleAttrList: [],
+        asInsertRule: [],
       };
       this.resetForm("form");
     },
@@ -211,6 +368,7 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getRule(id).then(response => {
+        console.log(response)
         this.form = response.data;
         this.open = true;
         this.title = "修改规格";