商品参数添加修改删除 级联选择器的使用
This commit is contained in:
parent
782bc1834b
commit
9c7c7b688a
235
src/components/goods/params.vue
Normal file
235
src/components/goods/params.vue
Normal file
@ -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>
|
||||
@ -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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -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==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user