添加属性对话框

src/components/goods/Params.vue

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-25 22:52:20
- * @LastEditTime: 2021-11-25 23:15:58
+ * @LastEditTime: 2021-11-26 23:57:15
 -->
 <template>
   <div>
@@ -25,25 +25,107 @@
       <el-row class="cat_opt">
         <el-col>
           <span>选择商品分类：</span>
-          <el-cascader v-model="selectedKey"
+          <el-cascader ref="cateRef"
+                       v-model="selectedKey"
                        :options="cateList"
                        :props="cateProps"
                        @change="cateChangeHandler"
                        clearable
-                       filterable></el-cascader>
+                       filterable
+                       :show-all-levels="false"></el-cascader>
         </el-col>
       </el-row>
 
       <!-- tab页签区域 -->
       <el-tabs v-model="activeName"
                @tab-click="handleTabClick">
+        <!-- 添加动态参数面板 -->
         <el-tab-pane label="动态参数"
-                     name="first">动态参数</el-tab-pane>
+                     name="many">
+          <!-- 添加参数按钮 -->
+          <el-button type="primary"
+                     size="mini"
+                     :disabled="isBtnDisabled"
+                     @click="addDialogVisible=true">添加参数</el-button>
+          <!-- 动态表格 -->
+          <el-table :data="manyTableData"
+                    border
+                    stripe>
+            <!-- 展开行 -->
+            <el-table-column type="expand"></el-table-column>
+            <!-- 索引列 -->
+            <el-table-column type="index"></el-table-column>
+            <el-table-column label="参数名称"
+                             prop="attr_name"></el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button type="primary"
+                           size="mini"
+                           icon="el-icon-edit">添加</el-button>
+                <el-button type="primary"
+                           size="mini"
+                           icon="el-icon-delete">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <!-- 添加静态数据面板 -->
         <el-tab-pane label="静态属性"
-                     name="second">静态属性</el-tab-pane>
+                     name="only">
+          <!-- 添加属性按钮 -->
+          <el-button type="primary"
+                     size="mini"
+                     :disabled="isBtnDisabled"
+                     @click="addDialogVisible=true">添加属性</el-button>
+          <!-- 今天属性表格 -->
+          <el-table :data="onlyTableData"
+                    border
+                    stripe>
+            <!-- 展开行 -->
+            <el-table-column type="expand"></el-table-column>
+            <!-- 索引列 -->
+            <el-table-column type="index"></el-table-column>
+            <el-table-column label="属性名称"
+                             prop="attr_name"></el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button type="primary"
+                           size="mini"
+                           icon="el-icon-edit">添加</el-button>
+                <el-button type="primary"
+                           size="mini"
+                           icon="el-icon-delete">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+        </el-tab-pane>
 
       </el-tabs>
     </el-card>
+
+    <!-- 添加参数 -->
+    <el-dialog :title=" '添加' + titleText"
+               :visible.sync="addDialogVisible"
+               width="50%"
+               @close="addDialogClosed">
+      <!-- 添加参数对话框 -->
+      <el-form ref="addFormRef"
+               :model="addForm"
+               :rules="addFormRules"
+               label-width="100px">
+        <el-form-item :label="titleText"
+                      prop="attr_name">
+          <el-input v-model="addForm.attr_name"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="addDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -61,7 +143,19 @@ export default {
         checkStrictly: true
       },
       //   被激活的页签名称
-      activeName: 'first',
+      activeName: 'many',
+      //   动态参数数据
+      manyTableData: [],
+      //   静态属性数据
+      onlyTableData: [],
+      //   添加对话框
+      addDialogVisible: false,
+      addForm: {
+        attr_name: ''
+      },
+      addFormRules: {
+        attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }]
+      }
     }
   },
   created () {
@@ -76,13 +170,56 @@ export default {
       this.cateList = res.data
     },
     cateChangeHandler () {
+      this.getParamsData()
+    },
+    handleTabClick () {
+      this.getParamsData()
+    },
+    // 获取参数列表数据
+    async getParamsData () {
       if (this.selectedKey.length !== 3) {
         this.selectedKey = []
-        this.$message.info('请选择三级分类')
+        return this.$message.info('请选择三级分类')
+      }
+      //根据所选择分类的id ，当前所处的面板，获取对于的参数
+      const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
+        params: {
+          sel: this.activeName
+        }
+      })
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      if (this.activeName === 'many') {
+        this.manyTableData = res.data
+      } else {
+        this.onlyTableData = res.data
       }
     },
-    handleTabClick () {
-
+    // 添加对话框关闭事件
+    addDialogClosed () {
+      this.$refs.addFormRef.resetFields()
+    }
+  },
+  computed: {
+    isBtnDisabled () {
+      if (this.selectedKey.length !== 3) {
+        return true
+      }
+      return false
+    },
+    cateId () {
+      if (this.selectedKey.length === 3) {
+        return this.selectedKey[2]
+      }
+      return null
+    },
+    titleText () {
+      if (this.activeName === 'many') {
+        return "动态参数"
+      } else {
+        return "静态属性"
+      }
     }
   }
 }