parent
d12b749802
commit
f9319ef4fb
10 changed files with 456 additions and 50 deletions
@ -0,0 +1,192 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="text-right m-b-20"> |
||||
<el-button type="primary" |
||||
@click="handleColumn(false, 1)">添加分类 |
||||
</el-button> |
||||
</div> |
||||
<div class="el-table"> |
||||
<div class="list"> |
||||
<div class="thead"> |
||||
<span>分类名称</span> |
||||
<span>操作</span> |
||||
</div> |
||||
</div> |
||||
<el-tree :data="list" |
||||
node-key="id" |
||||
default-expand-all> |
||||
<span class="custom-tree-node" |
||||
slot-scope="{ node, data }"> |
||||
<span class="name">{{ data.classificationName }}</span> |
||||
<span class="action"> |
||||
<el-button type="text" |
||||
@click.stop="handleColumn(data)">编辑</el-button> |
||||
<el-divider direction="vertical"></el-divider> |
||||
<template v-if="node.level < 3"> |
||||
<el-button type="text" |
||||
@click.stop="handleColumn(data, data.id)">新增</el-button> |
||||
<el-divider direction="vertical"></el-divider> |
||||
</template> |
||||
<el-button type="text" |
||||
@click.stop="delData(data)">删除</el-button> |
||||
</span> |
||||
</span> |
||||
</el-tree> |
||||
</div> |
||||
|
||||
<el-dialog :title="!curRow.id ? '添加分类' : '编辑分类'" |
||||
:visible.sync="columnVisible" |
||||
width="400px" |
||||
:close-on-click-modal="false" |
||||
@close="closeColumn"> |
||||
<el-form> |
||||
<el-form-item> |
||||
<el-input placeholder="分类名称" |
||||
v-model="curRow.classificationName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" |
||||
class="dialog-footer"> |
||||
<el-button @click="columnVisible = false">取 消</el-button> |
||||
<el-button type="primary" |
||||
@click="columnSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Util from "@/libs/util"; |
||||
import Setting from '@/setting' |
||||
export default { |
||||
data () { |
||||
return { |
||||
list: [], |
||||
columnVisible: false, |
||||
curRow: {}, |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
async getData () { |
||||
const { list } = await this.$post(this.api.treeStructureList) |
||||
this.list = list |
||||
}, |
||||
delData (row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.delSupplierClass, [row.id]).then(res => { |
||||
Util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { }); |
||||
}).catch(() => { }); |
||||
}, |
||||
handleColumn (row, parentId) { |
||||
this.columnVisible = true |
||||
if (row) { |
||||
this.curRow = JSON.parse(JSON.stringify(row)) |
||||
} |
||||
if (typeof parentId === 'number') { |
||||
this.curRow = { |
||||
parentId, |
||||
classificationName: '', |
||||
} |
||||
} |
||||
}, |
||||
columnSubmit () { |
||||
const row = this.curRow |
||||
if (!row.classificationName) return Util.warningMsg("请填写分类名称"); |
||||
if (this.curRow.id) { |
||||
this.$post(this.api.updateSupplierClass, row).then(res => { |
||||
Util.successMsg("修改成功"); |
||||
this.columnVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { }); |
||||
} else { |
||||
this.$post(this.api.saveSupplierClass, row).then(res => { |
||||
Util.successMsg("添加成功"); |
||||
this.columnVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { }); |
||||
} |
||||
}, |
||||
closeColumn () { |
||||
this.curRow = {} |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.list { |
||||
.thead { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background: rgba(0, 0, 0, 0.04) !important; |
||||
|
||||
span { |
||||
padding: 0.75rem 0.625rem; |
||||
text-align: center; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
font-weight: normal; |
||||
box-sizing: border-box; |
||||
|
||||
&:first-child { |
||||
padding-left: 23.5vw; |
||||
@media (max-width: 1270px) { |
||||
padding-left: 25.5%; |
||||
} |
||||
} |
||||
|
||||
&:last-child { |
||||
width: 16%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .el-tree { |
||||
.el-tree-node__expand-icon { |
||||
margin-left: 22.5vw; |
||||
@media (max-width: 1270px) { |
||||
margin-left: 23.5%; |
||||
} |
||||
} |
||||
|
||||
.el-tree-node__content { |
||||
height: 35px; |
||||
padding: 5px; |
||||
border-bottom: 0.0625rem solid #ebeef5; |
||||
} |
||||
} |
||||
|
||||
.custom-tree-node { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
padding-right: 8px; |
||||
|
||||
.name { |
||||
line-height: 44px; |
||||
} |
||||
|
||||
.action { |
||||
width: 8.5vw; |
||||
text-align: left; |
||||
@media (max-width: 1270px) { |
||||
width: 16%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.hide { |
||||
opacity: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
|
||||
const meta = {} |
||||
|
||||
const pre = 'supplierClassification-' |
||||
|
||||
export default { |
||||
path: '/supplierClassification', |
||||
name: 'supplierClassification', |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `${pre}list`, |
||||
path: `list`, |
||||
component: () => import('@/pages/supplierClassification/list'), |
||||
meta: { title: '供应商分类' } |
||||
}, |
||||
] |
||||
} |
||||
Loading…
Reference in new issue