使用table-tree 显示树状分类，并添加
This commit is contained in:
parent
1b21e0e2aa
commit
782bc1834b
@ -12,7 +12,8 @@
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.13.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0"
|
||||
"vue-router": "^3.2.0",
|
||||
"vue-table-with-tree-grid": "^0.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.4.0",
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<el-table-column label="权限名称" prop="authName"></el-table-column>
|
||||
<el-table-column label="路径" prop="path"></el-table-column>
|
||||
<el-table-column label="权限等级" prop="level">
|
||||
<template scope="scope">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="['','success','warning',][scope.row.level]">等级{{['一','二','三'][scope.row.level]}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
<el-table :data="data" border stripe>
|
||||
<el-table-column type="expand">
|
||||
<template scope="scope">
|
||||
<template slot-scope="scope">
|
||||
<el-row class="bo" :key="v1.id" v-for="(v1) in scope.row.children">
|
||||
<!--一级权限-->
|
||||
<el-col :span="5">
|
||||
@ -41,7 +41,7 @@
|
||||
<el-table-column label="角色名" prop="roleName"></el-table-column>
|
||||
<el-table-column width="300" label="角色描述" prop="roleDesc"></el-table-column>
|
||||
<el-table-column label="操作" >
|
||||
<template scope="scope">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row.id)">编辑</el-button>
|
||||
<el-button size="mini" icon="el-icon-delete" type="danger">删除</el-button>
|
||||
<el-button size="mini" icon="el-icon-setting" @click="setRole(scope.row)" type="warning">分配权限</el-button>
|
||||
|
||||
186
src/components/goods/categories.vue
Normal file
186
src/components/goods/categories.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<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>
|
||||
12
src/components/goods/goods.vue
Normal file
12
src/components/goods/goods.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="goods">
|
||||
<pre v-text="$attrs"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -5,8 +5,10 @@ import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import './assets/fonts/iconfont.css'
|
||||
import './assets/css/globel.css'
|
||||
import tableTree from 'vue-table-with-tree-grid'
|
||||
import axios from 'axios'
|
||||
|
||||
Vue.component('table-tree', tableTree)
|
||||
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
|
||||
axios.interceptors.request.use(config => {
|
||||
config.headers.Authorization = sessionStorage.getItem('token')
|
||||
|
||||
@ -6,6 +6,7 @@ import welcome from '../components/welcome'
|
||||
import users from '../components/users/users'
|
||||
import access from '../components/access/access'
|
||||
import roles from '../components/access/roles'
|
||||
import categories from '../components/goods/categories'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@ -20,7 +21,8 @@ const routes = [
|
||||
{ path: '/welcome', component: welcome },
|
||||
{ path: '/users', component: users },
|
||||
{ path: '/rights', component: access },
|
||||
{ path: '/roles', component: roles }
|
||||
{ path: '/roles', component: roles },
|
||||
{ path: '/categories', component: categories }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user