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