1

src/api/shop/goods/cate.js

@@ -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,
+	})
+}

src/views/Shop/GoodsManage/_goodsCate/depend/config.js

@@ -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,
+}

src/views/Shop/GoodsManage/_goodsCate/index.vue

@@ -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>