<template>
|
<TableLayout :permissions="['business:category:query']">
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
|
<el-form-item label="类别名称" prop="name">
|
<el-input v-model="searchForm.name" placeholder="请输入类别名称" @keypress.enter.native="loadTree"></el-input>
|
</el-form-item>
|
<el-form-item label="类型" prop="type">
|
<el-select v-model="searchForm.type" clearable placeholder="请选择">
|
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<section>
|
<el-button type="primary" @click="loadTree">搜索</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</section>
|
</el-form>
|
<template v-slot:table-wrap>
|
<ul class="toolbar" v-permissions="['business:category:create']">
|
<li><el-button type="primary" @click="$refs.operaCategoryWindow.open('新建类别')" icon="el-icon-plus">新建一级类别</el-button></li>
|
</ul>
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
row-key="id"
|
stripe
|
border
|
default-expand-all
|
:header-cell-style="rowStyle"
|
:cell-style="rowStyle"
|
>
|
<el-table-column prop="imgurl" label="图标" min-width="90px">
|
<template slot-scope="{row}">
|
<el-image v-if="row.imgurl" style="width: 50px; height: 50px" :src="categoryImgUrl(row)" fit="cover"></el-image>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="类别名称" min-width="140px">
|
<template slot-scope="{row}">
|
<span v-if="row.parentId">└ {{ row.name }}</span>
|
<span v-else>{{ row.name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="级别" min-width="80px">
|
<template slot-scope="{row}">{{ row.parentId ? '二级类别' : '一级类别' }}</template>
|
</el-table-column>
|
<el-table-column prop="sortnum" label="排序码" min-width="80px"></el-table-column>
|
<el-table-column prop="createDate" label="创建时间" min-width="140px"></el-table-column>
|
<el-table-column prop="status" label="状态" min-width="80px">
|
<template slot-scope="{row}">
|
<el-switch v-model="row.status" @change="changeStatus(row)" :active-value="0" :inactive-value="1" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="220px" fixed="right">
|
<template slot-scope="{row}">
|
<template v-if="!row.parentId">
|
<el-button type="text" @click="edit(row.id)" v-permissions="['business:category:update']">编辑</el-button>
|
<el-button type="text" @click="$refs.operaSubCategoryWindow.open('新建子类别', row)" v-permissions="['business:category:create']">新增子类别</el-button>
|
<el-button type="text" class="btn-delete" icon="el-icon-delete" @click="deleteParent(row)" v-permissions="['business:category:delete']">删除</el-button>
|
</template>
|
<template v-else>
|
<el-button type="text" @click="$refs.operaSubCategoryWindow.open('编辑子类别', { id: row.parentId }, row)" v-permissions="['business:category:update']">编辑</el-button>
|
<el-button type="text" class="btn-delete" icon="el-icon-delete" @click="deleteSub(row)" v-permissions="['business:category:delete']">删除</el-button>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
<OperaCategoryWindow ref="operaCategoryWindow" @success="loadTree"/>
|
<OperaSubCategoryWindow ref="operaSubCategoryWindow" @success="loadTree"/>
|
</TableLayout>
|
</template>
|
|
<script>
|
import TableLayout from '@/layouts/TableLayout'
|
import OperaCategoryWindow from '@/components/business/OperaCategoryWindow'
|
import OperaSubCategoryWindow from '@/components/business/OperaSubCategoryWindow'
|
import { fetchTree, queryById, updateDisableById, deleteById, deleteSub as deleteSubApi } from '@/api/business/category.js'
|
|
export default {
|
name: 'Category',
|
components: { TableLayout, OperaCategoryWindow, OperaSubCategoryWindow },
|
data () {
|
return {
|
loading: false,
|
tableData: [],
|
searchForm: { name: '', type: '' },
|
typeList: [{ name: '自定义', id: 0 }, { name: '系统', id: 1 }]
|
}
|
},
|
created () {
|
this.loadTree()
|
},
|
methods: {
|
rowStyle () { return 'text-align:center' },
|
categoryImgUrl (row) {
|
if (!row.imgurl) return ''
|
if (row.imgurl.indexOf('http') === 0) return row.imgurl
|
return (row.prefixUrl || '') + row.imgurl
|
},
|
loadTree () {
|
this.loading = true
|
fetchTree(this.searchForm).then(res => {
|
this.tableData = (res || []).map(p => {
|
const prefixUrl = p.prefixUrl || ''
|
const children = (p.children || []).map(c => ({
|
...c,
|
parentId: c.parentId != null ? c.parentId : p.id,
|
prefixUrl: c.prefixUrl || prefixUrl
|
}))
|
return { ...p, children }
|
})
|
}).finally(() => { this.loading = false })
|
},
|
resetSearch () {
|
this.searchForm = { name: '', type: '' }
|
this.loadTree()
|
},
|
changeStatus (item) {
|
updateDisableById({ id: item.id, status: item.status }).then(() => {
|
this.$message.success('更新成功')
|
})
|
},
|
edit (id) {
|
queryById(id).then(res => {
|
const obj = {
|
id, name: res.name, sortnum: res.sortnum, paramList: res.paramList,
|
imgurl: res.imgurl, budgetList: res.budgetList.length > 0 ? res.budgetList : [{ maxamount: '', minamount: '' }],
|
type: res.type, platCateId: res.platCateId,
|
tableData: res.paramList.map(item => ({ id: item.id, name: item.name, isselect: item.isselect, isshow: item.isshow })),
|
fileList: res.imgurl ? [{ url: res.prefixUrl + res.imgurl }] : []
|
}
|
this.$refs.operaCategoryWindow.open('编辑类别', obj)
|
})
|
},
|
deleteParent (row) {
|
this.$confirm(`确认删除【${row.name}】?`, '提示').then(() => {
|
deleteById(row.id).then(() => {
|
this.$message.success('删除成功')
|
this.loadTree()
|
})
|
})
|
},
|
deleteSub (row) {
|
this.$confirm(`确认删除子类别【${row.name}】?`, '提示').then(() => {
|
deleteSubApi(row.id).then(() => {
|
this.$message.success('删除成功')
|
this.loadTree()
|
})
|
})
|
}
|
}
|
}
|
</script>
|
