商品参数添加修改删除 级联选择器的使用

src/components/goods/params.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="params">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
+      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <el-card class="box-card">
+
+      <el-alert
+        show-icon
+        :closable="false"
+        title="注意：只允许为第三级分类设置相关参数"
+        type="warning">
+      </el-alert>
+
+      <el-row >
+       <el-col :span="6">
+         <span>选择商品级联选择框：
+           <el-cascader clearable
+           expand-trigger="hover"
+           :options="data"
+           :props="props"
+           v-model="selectKey"
+           @change="handleChange"
+           change-on-select
+           ></el-cascader></span>
+       </el-col>
+      </el-row>
+
+      <el-tabs v-model="tab" @tab-click="handleClick(tab)">
+        <el-tab-pane label="动态参数" name="many">
+          <el-button :disabled="isDisabled" type="primary" @click="edit()">添加参数</el-button>
+
+          <el-table
+            :data="many" border stripe
+            style="width: 100%">
+
+            <el-table-column
+              type="expand"
+            >
+            </el-table-column>
+            <el-table-column
+              label="#"
+              type="index"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="attr_name"
+              label="参数名称"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              label="操作">
+              <template slot-scope="scope">
+                <el-button icon="el-icon-edit" type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
+                <el-button icon="el-icon-delete" type="danger" @click="del(scope.row.attr_id)" size="mini">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="静态属性" name="only">
+          <el-button :disabled="isDisabled" type="primary" @click="edit">添加属性</el-button>
+          <el-table
+            :data="only" border stripe
+            style="width: 100%">
+
+            <el-table-column
+              type="expand"
+            >
+            </el-table-column>
+            <el-table-column
+              label="#"
+              type="index"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="attr_name"
+              label="参数名称"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              label="操作">
+              <template slot-scope="scope">
+                <el-button icon="el-icon-edit" type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
+                <el-button icon="el-icon-delete" type="danger" @click="del(scope.row.attr_id)" size="mini">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+
+    </el-card>
+
+    <el-dialog
+      :title="`添加${text}参数`"
+      :visible.sync="dialogVisible"
+      @close="close"
+      width="50%"
+      >
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item :label="text+'参数'" prop="attr_name">
+          <el-input v-model="form.attr_name" placeholder="请输入属性名"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sub">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'params',
+  data () {
+    return {
+      data: [],
+      props: {
+        label: 'cat_name',
+        value: 'cat_id',
+        children: 'children'
+      },
+      tab: 'many', // 被激活的页答名称
+      selectKey: [],
+      only: [],
+      many: [],
+      dialogVisible: false,
+      form: {
+        attr_name: ''
+      },
+      rules: {
+        attr_name: [
+          { required: true, message: '请输入属性名称', trigger: 'blur' },
+          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
+        ]
+      },
+      route: '',
+      method: 'post'
+    }
+  },
+  methods: {
+    sub () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.form.attr_sel = this.tab
+          this.$http[this.method](this.route, this.form).then(response => {
+            const res = response.data
+            if ([200, 201].indexOf(res.meta.status) < 0) {
+              return this.$message.error(res.meta.msg)
+            }
+            this.$message.success(res.meta.msg)
+            this.params()
+            this.dialogVisible = false
+          }).catch(error => error)
+        }
+      })
+    },
+    close () {
+      this.$refs.form.resetFields()
+    },
+    edit (row) {
+      this.dialogVisible = true
+      this.route = `categories/${this.cateId}/attributes`
+      this.method = 'post'
+      if (row) {
+        this.form.attr_name = row.attr_name
+        this.route = `categories/${this.cateId}/attributes/${row.attr_id}`
+        this.method = 'put'
+      }
+    },
+    del (id) {
+      this.$confirm('是否要删除?')
+        .then(value => {
+          this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
+            .then(response => {
+              const res = response.data
+              if (res.meta.status !== 200) {
+                return this.$message.error(res.meta.msg)
+              }
+              this.$message.success(res.meta.msg)
+              this.params()
+            }).catch(error => error)
+        }).catch(error => error)
+    },
+    handleClick () {
+      this.params()
+    },
+    handleChange () {
+      this.params()
+    },
+    async params () {
+      if (this.selectKey.length === 3) {
+        const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, { params: { sel: this.tab } })
+        if (res.meta.status !== 200) {
+          return this.$message.error(res.meta.msg)
+        }
+        this[this.tab] = res.data
+      }
+    },
+    async list () {
+      const { data: res } = await this.$http.get('categories')
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.data = res.data
+    }
+  },
+  computed: {
+    isDisabled () {
+      return this.selectKey.length !== 3
+    },
+    cateId () {
+      if (this.selectKey.length === 3) {
+        return this.selectKey[2]
+      }
+      return null
+    },
+    text () {
+      return this.tab === 'many' ? '动态' : '静态'
+    }
+  },
+  mounted () {
+    this.list()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.el-alert{
+  margin-bottom: 15px;
+}
+</style>

src/router/router.js

@@ -7,6 +7,7 @@ import users from '../components/users/users'
 import access from '../components/access/access'
 import roles from '../components/access/roles'
 import categories from '../components/goods/categories'
+import params from '../components/goods/params'
 
 Vue.use(VueRouter)
 
@@ -22,7 +23,8 @@ const routes = [
       { path: '/users', component: users },
       { path: '/rights', component: access },
       { path: '/roles', component: roles },
-      { path: '/categories', component: categories }
+      { path: '/categories', component: categories },
+      { path: '/params', component: params }
     ]
   }
 ]

yarn.lock

@@ -8309,6 +8309,13 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-table-with-tree-grid@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.npm.taobao.org/vue-table-with-tree-grid/download/vue-table-with-tree-grid-0.2.4.tgz#b60b22810ab861bdb669afb3d6f0079a4cee52a4"
+  integrity sha1-tgsigQq4Yb22aa+z1vAHmkzuUqQ=
+  dependencies:
+    vue "^2.4.3"
+
 vue-template-compiler@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
@@ -8322,7 +8329,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.11:
+vue@^2.4.3, vue@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==