187 lines
5.2 KiB
Vue
187 lines
5.2 KiB
Vue
|
<template>
|
||
|
<div class="categories">
|
||
|
<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>
|
||
|
<el-row>
|
||
|
<el-col>
|
||
|
<el-button type="primary" @click="add()">添加分类</el-button>
|
||
|
</el-col>
|
||
|
</el-row>
|
||
|
|
||
|
<table-tree class="tree-table" :data="data" show-index :columns="columns" index-text="#" border :show-row-hover="false" :selection-type="false" :expand-type="false">
|
||
|
<!--是否有效-->
|
||
|
<template slot="isok" slot-scope="scope">
|
||
|
<i style="color: lightgreen" :class="'el-icon-'+(scope.row.cat_deleted ? 'error' : 'success')"></i>
|
||
|
</template>
|
||
|
<!--排序-->
|
||
|
<template slot="order" slot-scope="scope">
|
||
|
<el-tag size="mini" :type="['','success','warning',][scope.row.cat_level]">{{['一','二','三'][scope.row.cat_level]}}级</el-tag>
|
||
|
</template>
|
||
|
<!--操作-->
|
||
|
<template slot="operate" slot-scope="scope">
|
||
|
<el-button icon="el-icon-edit" type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
|
||
|
<el-button size="mini" icon="el-icon-delete" type="danger" @click="del(scope.row)">删除</el-button>
|
||
|
</template>
|
||
|
</table-tree>
|
||
|
|
||
|
<el-pagination
|
||
|
@size-change="handleSizeChange"
|
||
|
@current-change="handleCurrentChange"
|
||
|
:current-page="query.pagenum"
|
||
|
:page-sizes="[5, 15, 20, 50]"
|
||
|
:page-size="query.pagesize"
|
||
|
layout="total, sizes, prev, pager, next, jumper"
|
||
|
:total="total">
|
||
|
</el-pagination>
|
||
|
</el-card>
|
||
|
|
||
|
<el-dialog
|
||
|
title="添加分类"
|
||
|
:visible.sync="dialogVisible"
|
||
|
@close="form={cat_name: '',
|
||
|
cat_pid: [],
|
||
|
cat_level: 0}"
|
||
|
width="50%"
|
||
|
>
|
||
|
|
||
|
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||
|
<el-form-item label="分类名称" prop="cat_name">
|
||
|
<el-input v-model="form.cat_name"></el-input>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="父级分类" >
|
||
|
|
||
|
<el-cascader class="cas" clearable
|
||
|
:props="props"
|
||
|
:options="parent"
|
||
|
change-on-select
|
||
|
v-model="form.cat_pid"
|
||
|
></el-cascader>
|
||
|
</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: 'categories',
|
||
|
data () {
|
||
|
return {
|
||
|
data: [],
|
||
|
query: {
|
||
|
type: 3,
|
||
|
pagenum: 1,
|
||
|
pagesize: 5
|
||
|
},
|
||
|
columns: [
|
||
|
{
|
||
|
label: '分类名称',
|
||
|
prop: 'cat_name'
|
||
|
|
||
|
},
|
||
|
{
|
||
|
label: '是否有效',
|
||
|
type: 'template',
|
||
|
template: 'isok'
|
||
|
},
|
||
|
{
|
||
|
label: '排序',
|
||
|
type: 'template',
|
||
|
template: 'order'
|
||
|
},
|
||
|
{
|
||
|
label: '操作',
|
||
|
type: 'template',
|
||
|
template: 'operate'
|
||
|
}
|
||
|
],
|
||
|
total: 0,
|
||
|
dialogVisible: false,
|
||
|
form: {
|
||
|
cat_name: '',
|
||
|
cat_pid: [],
|
||
|
cat_level: 0
|
||
|
},
|
||
|
props: {
|
||
|
label: 'cat_name',
|
||
|
value: 'cat_id',
|
||
|
children: 'children'
|
||
|
},
|
||
|
parent: [],
|
||
|
rules: {
|
||
|
cat_name: [
|
||
|
{ required: true, message: '请输入分类名称', trigger: 'blur' },
|
||
|
{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
sub () {
|
||
|
this.$refs.form.validate(valid => {
|
||
|
if (valid) {
|
||
|
this.form.cat_level = this.form.cat_pid.length
|
||
|
this.form.cat_pid = this.form.cat_pid.length > 0 ? this.form.cat_pid[this.form.cat_pid.length - 1] : 0
|
||
|
this.$http.post('categories', this.form).then(response => {
|
||
|
const res = response.data
|
||
|
if (res.meta.status !== 201) {
|
||
|
return this.$message.error(res.meta.msg)
|
||
|
}
|
||
|
this.$message.success(res.meta.msg)
|
||
|
this.list()
|
||
|
this.dialogVisible = false
|
||
|
}).catch(error => error)
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
add () {
|
||
|
this.dialogVisible = true
|
||
|
this.parentCategories()
|
||
|
},
|
||
|
edit (row) {},
|
||
|
del (row) {},
|
||
|
async parentCategories () {
|
||
|
const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
|
||
|
if (res.meta.status !== 200) {
|
||
|
return this.$message.error(res.meta.msg)
|
||
|
}
|
||
|
this.parent = res.data
|
||
|
},
|
||
|
handleSizeChange (val) {
|
||
|
this.query.pagesize = val
|
||
|
this.list()
|
||
|
},
|
||
|
handleCurrentChange (val) {
|
||
|
this.query.pagenum = val
|
||
|
this.list()
|
||
|
},
|
||
|
async list () {
|
||
|
const { data: res } = await this.$http.get('categories', { params: this.query })
|
||
|
this.data = res.data.result
|
||
|
this.total = res.data.total
|
||
|
}
|
||
|
},
|
||
|
mounted () {
|
||
|
this.list()
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="less" scoped>
|
||
|
.tree-table{
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
.cas {
|
||
|
width: 100%;
|
||
|
}
|
||
|
</style>
|