<template>
|
<TableLayout class="menu-layout" :permissions="['business:category:query']">
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<ul class="toolbar" v-permissions="['business:category:create', 'business:category:delete', 'business:category:sort']">
|
<li><el-button type="primary" @click="$refs.OperaCategoryWindow.open('新建分类',null,null,pList)" icon="el-icon-plus" v-permissions="['business:category:create']">新建</el-button></li>
|
<li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:category:delete']">删除</el-button></li>
|
</ul>
|
<el-table
|
ref="table1"
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
row-key="id"
|
stripe
|
default-expand-all
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
|
<el-table-column prop="name" label="名称" fixed="left" min-width="160px"></el-table-column>
|
<el-table-column prop="sortnum" label="排序码" min-width="140px"></el-table-column>
|
<el-table-column prop="editorName" label="操作人" min-width="100px"> </el-table-column>
|
<el-table-column prop="editDate" label="操作时间" min-width="140px"></el-table-column>
|
<el-table-column
|
v-if="containPermissions(['business:category:update', 'business:category:create', 'business:category:delete'])"
|
label="操作"
|
min-width="220"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<el-button type="text" icon="el-icon-edit" @click="$refs.OperaCategoryWindow.open('编辑分类', row,null,pList)" v-permissions="['business:category:update']">编辑</el-button>
|
<el-button type="text" icon="el-icon-plus" v-if="!row.parentId " @click="$refs.OperaCategoryWindow.open('新建子分类', null, row,pList)" v-permissions="['business:category:create']">新建子分类</el-button>
|
<el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['business:category:delete']">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
<!-- 新建/修改 -->
|
<OperaCategoryWindow ref="OperaCategoryWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/>
|
</TableLayout>
|
</template>
|
|
<script>
|
import TableLayout from '@/layouts/TableLayout'
|
import BaseTable from '@/components/base/BaseTable'
|
import { fetchTree } from '@/api/business/category'
|
import OperaCategoryWindow from '@/components/business/OperaCategoryWindow'
|
export default {
|
name: 'bjParam',
|
extends: BaseTable,
|
components: { OperaCategoryWindow, TableLayout },
|
data () {
|
return {
|
// 是否正在处理中
|
pList:[],
|
isWorking: {
|
sort: false
|
}
|
}
|
},
|
methods: {
|
// 查询数据
|
handlePageChange () {
|
this.isWorking.search = true
|
fetchTree()
|
.then(records => {
|
this.pList = records || []
|
for (const p of this.pList ) {
|
if (p.hasChildren && p.children) {
|
for (const item of p.children) {
|
item.hasChildren = true
|
item.children = []
|
}
|
}
|
}
|
this.tableData.list = this.pList
|
console.log(this.tableData.list)
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
// 查询父节点
|
__findParent (id, parent) {
|
if (parent.children === 0) {
|
return
|
}
|
for (const menu of parent.children) {
|
if (menu.id === id) {
|
return parent
|
}
|
if (menu.children.length > 0) {
|
const m = this.__findParent(id, menu)
|
if (m != null) {
|
return m
|
}
|
}
|
}
|
return null
|
}
|
},
|
created () {
|
this.config({
|
module: '分类信息',
|
api: '/business/category'
|
})
|
this.search()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
.menu-layout {
|
/deep/ .table-content {
|
margin-top: 0;
|
}
|
}
|
// 图标列
|
.table-column-icon {
|
// element-ui图标
|
i {
|
background-color: $primary-color;
|
opacity: 0.72;
|
font-size: 20px;
|
color: #fff;
|
padding: 4px;
|
border-radius: 50%;
|
}
|
// 自定义图标
|
[class^="eva-icon-"] {
|
width: 20px;
|
height: 20px;
|
background-size: 16px;
|
vertical-align: middle;
|
}
|
}
|
</style>
|
