vue-learn/src/components/goods/categories.vue

187 lines
5.2 KiB
Vue
Raw Normal View History

<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>