main
parent
f6c0d4f591
commit
a4c68718fc
@ -0,0 +1,39 @@
|
||||
import httpService from "@/request"
|
||||
|
||||
// 商品
|
||||
// 品牌
|
||||
export function cateList(params) {
|
||||
return httpService({
|
||||
url: `/user/shopCategory/listAll`,
|
||||
method: 'get',
|
||||
params: params,
|
||||
})
|
||||
}
|
||||
export function cateShow(params) {
|
||||
return httpService({
|
||||
url: `/user/shopCategory/isShow`,
|
||||
method: 'get',
|
||||
params: params,
|
||||
})
|
||||
}
|
||||
export function cateInfo(params) {
|
||||
return httpService({
|
||||
url: `/user/shopCategory/listByParentId`,
|
||||
method: 'get',
|
||||
params: params,
|
||||
})
|
||||
}
|
||||
export function cateUpdate(params) {
|
||||
return httpService({
|
||||
url: `/user/shopCategory/updateCategory`,
|
||||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
export function cateInsert(params) {
|
||||
return httpService({
|
||||
url: `/user/shopCategory/insertCategory`,
|
||||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
export const columns = [
|
||||
{
|
||||
title: "分类名称",
|
||||
dataIndex: "name",
|
||||
width: "33%",
|
||||
},
|
||||
{
|
||||
title: "图片",
|
||||
dataIndex: "imgpic",
|
||||
width: "33%",
|
||||
scopedSlots: { customRender: "imgpic"}
|
||||
},
|
||||
{
|
||||
title: "是否显示",
|
||||
dataIndex: "isShow",
|
||||
width: "33%",
|
||||
customRender: function (isShow) {
|
||||
switch (isShow) {
|
||||
case 1:
|
||||
return '显示'
|
||||
case 0:
|
||||
return '不显示'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
key: "action",
|
||||
width: "180",
|
||||
fixed: "right",
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
]
|
||||
export const pagination = {
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
}
|
||||
@ -1,14 +1,157 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="cardTitle">商品分类</div>
|
||||
<div class="content">
|
||||
<a-button class="add-btn" style="margin-left: 10px" @click="addCate"
|
||||
>新增商品分类</a-button
|
||||
>
|
||||
<a-row>
|
||||
<a-col
|
||||
:span="3"
|
||||
style="
|
||||
border-right: 1px solid #0000000f;
|
||||
height: 100vh;
|
||||
margin-right: 40px;
|
||||
"
|
||||
>
|
||||
<a-tree
|
||||
class="tree"
|
||||
v-model="checkedKeys"
|
||||
:expanded-keys="expandedKeys"
|
||||
:scroll="{ x: 2600 }"
|
||||
:auto-expand-parent="autoExpandParent"
|
||||
:selected-keys="selectedKeys"
|
||||
:tree-data="treeData"
|
||||
@expand="onExpand"
|
||||
@select="onSelect"
|
||||
:replaceFields="{
|
||||
children: 'shopCategoryVoList',
|
||||
title: 'name',
|
||||
key: 'id',
|
||||
}"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
@change="handleTableChange"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: selectionChoosed,
|
||||
}"
|
||||
:row-key="
|
||||
(record, index) => {
|
||||
return record.id;
|
||||
}
|
||||
"
|
||||
>
|
||||
<span slot="action" slot-scope="text, row">
|
||||
<a-space>
|
||||
<a class="ant-dropdown-link" @click="show(row.id)" v-if="row.isShow===0">显示</a>
|
||||
<a class="ant-dropdown-link" @click="show(row.id)" v-else-if="row.isShow===1">隐藏</a>
|
||||
</a-space>
|
||||
</span>
|
||||
<span slot="imgpic" slot-scope="text, row">
|
||||
<img
|
||||
v-if="row.imgUrls.length > 0"
|
||||
:src="$ImgUrl(row.imgUrls[0].url)"
|
||||
class="table-img"
|
||||
alt=""
|
||||
/>
|
||||
<span v-else>无图片</span>
|
||||
</span>
|
||||
</a-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<a-drawer
|
||||
:title="drawer.title"
|
||||
placement="right"
|
||||
:closable="false"
|
||||
:visible="drawer.show"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="main"></div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cateList, cateInfo,cateShow } from "@/api/shop/goods/cate.js";
|
||||
import { columns, pagination } from "./depend/config";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
columns,
|
||||
pagination,
|
||||
// 选择的index
|
||||
selectedRowKeys: [],
|
||||
tableData: [],
|
||||
drawer: {
|
||||
show: false,
|
||||
title: "分类-详情",
|
||||
},
|
||||
expandedKeys: [],
|
||||
autoExpandParent: true,
|
||||
checkedKeys: [],
|
||||
selectedKeys: [],
|
||||
treeData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
let res = await cateList();
|
||||
this.treeData = res.data;
|
||||
},
|
||||
addCate() {},
|
||||
onClose() {},
|
||||
async show(id){
|
||||
let res = await cateShow({shopCategoryId:id})
|
||||
if(res.code === 200){
|
||||
this.$message.success(res.msg)
|
||||
this.onSelect(this.selectedKeys)
|
||||
}else{
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
},
|
||||
selectionChoosed(data) {
|
||||
this.selectedRowKeys = data;
|
||||
},
|
||||
handleTableChange(pagination) {
|
||||
console.log(pagination);
|
||||
const pager = { ...this.pagination };
|
||||
pager.current = pagination.current;
|
||||
pager.pageSize = pagination.pageSize;
|
||||
this.pagination = pager;
|
||||
this.getData();
|
||||
},
|
||||
// 树操作
|
||||
onExpand(expandedKeys) {
|
||||
this.expandedKeys = expandedKeys;
|
||||
this.autoExpandParent = false;
|
||||
},
|
||||
async onSelect(selectedKeys) {
|
||||
this.selectedKeys = selectedKeys;
|
||||
let res = await cateInfo({ parentId: this.selectedKeys[0],pageNum:this.pagination.current,size:this.pagination.pageSize });
|
||||
this.tableData = res.data.rows
|
||||
this.pagination.total = res.data.total
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.table-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.tree {
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue