From e052c52caed7f74710d43e972002e508112aa6ce Mon Sep 17 00:00:00 2001
From: qijq <624811160@qq.com>
Date: Thu, 17 Jul 2025 13:41:42 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=A2=9E=E5=8A=A0=E8=A7=84=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/warehouse/specification.js            |  73 ++
 java-mall-app-shop-admin/pages.json           |   6 +
 .../pages/order/order.vue                     |   3 +
 .../pages/warehouse/manage/classifyList.vue   |   6 +-
 .../components/ba-tree-picker/README.md       | 124 +++
 .../ba-tree-picker/ba-tree-picker.vue         | 704 ++++++++++++++++++
 .../manage/components/tree/style.css          | 160 ++++
 .../warehouse/manage/components/tree/tree.vue | 573 ++++++++++++++
 .../pages/warehouse/manage/specification.vue  | 544 ++++++++++++++
 .../pages/warehouse/warehouse.vue             |   7 +-
 10 files changed, 2192 insertions(+), 8 deletions(-)
 create mode 100644 java-mall-app-shop-admin/api/warehouse/specification.js
 create mode 100644 java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/README.md
 create mode 100644 java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/ba-tree-picker.vue
 create mode 100644 java-mall-app-shop-admin/pages/warehouse/manage/components/tree/style.css
 create mode 100644 java-mall-app-shop-admin/pages/warehouse/manage/components/tree/tree.vue
 create mode 100644 java-mall-app-shop-admin/pages/warehouse/manage/specification.vue

diff --git a/java-mall-app-shop-admin/api/warehouse/specification.js b/java-mall-app-shop-admin/api/warehouse/specification.js
new file mode 100644
index 0000000..657488d
--- /dev/null
+++ b/java-mall-app-shop-admin/api/warehouse/specification.js
@@ -0,0 +1,73 @@
+import http from "../../utils/http";
+import config from "../../config/config";
+
+/** 获取规格列表
+ *
+ * @author Seven
+ * @data 2025-7-12
+ * @params {
+ *  pageNum
+ *  pageSize
+ * }
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/api/admin/shop/shop-base-product-spec/list
+ */
+
+export function GetSpecificationList(params) {
+  return http({
+    url: "/shop/shop-base-product-spec/list",
+    method: "get",
+    params,
+    baseURL: config.adminApi,
+  });
+}
+
+/** 编辑规格
+ *
+ * @author Seven
+ * @data 2025-7-12
+ * @params {
+ *  spec_buildin
+    store_id
+    spec_order
+    specItems
+    spec_id
+    spec_remark
+    store_name
+    spec_format
+    text
+    spec_name
+    spec_category_id
+ * }
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/api/admin/shop/shop-base-product-spec/edit
+ */
+
+export function UpdateSpecification(params) {
+  return http({
+    url: "/shop/shop-base-product-spec/edit",
+    method: "post",
+    params,
+    baseURL: config.adminApi,
+  });
+}
+
+/** 删除规格
+ *
+ * @author Seven
+ * @data 2025-7-12
+ * @params {
+ *  spec_ids
+ * }
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/api/admin/shop/shop-base-product-spec/delete
+ */
+
+export function DelectSpecification(params) {
+  return http({
+    url: "/shop/shop-base-product-spec/delete",
+    method: "post",
+    params,
+    baseURL: config.adminApi,
+  });
+}
diff --git a/java-mall-app-shop-admin/pages.json b/java-mall-app-shop-admin/pages.json
index e43654a..95f28dd 100644
--- a/java-mall-app-shop-admin/pages.json
+++ b/java-mall-app-shop-admin/pages.json
@@ -224,6 +224,12 @@
         "navigationBarTitleText": "分类管理"
       }
     },
+    {
+      "path": "pages/warehouse/manage/specification",
+      "style": {
+        "navigationBarTitleText": "规格管理"
+      }
+    },
     {
       "path": "pages/warehouse/manage/batch",
       "style": {
diff --git a/java-mall-app-shop-admin/pages/order/order.vue b/java-mall-app-shop-admin/pages/order/order.vue
index a9083a6..aa68646 100644
--- a/java-mall-app-shop-admin/pages/order/order.vue
+++ b/java-mall-app-shop-admin/pages/order/order.vue
@@ -1016,12 +1016,15 @@ export default {
       tabs2: [
         {
           name: "进行中",
+          num: 0,
         },
         {
           name: "异常配送",
+          num: 0,
         },
         {
           name: "退款",
+          num: 0,
         },
       ],
       commodityArr: [
diff --git a/java-mall-app-shop-admin/pages/warehouse/manage/classifyList.vue b/java-mall-app-shop-admin/pages/warehouse/manage/classifyList.vue
index 782780e..45fe2ee 100644
--- a/java-mall-app-shop-admin/pages/warehouse/manage/classifyList.vue
+++ b/java-mall-app-shop-admin/pages/warehouse/manage/classifyList.vue
@@ -249,7 +249,7 @@
         <view class="no-commodity-type" v-if="typeManageList.length <= 0">
           <view class="no-commodity-type-bg"></view>
           <view class="no-commodity-type-tips" @click="skipuBrandList">
-            暂无商品，马上添加
+            暂无商品类型，点击马上添加
             <u-icon
               style="display: inline-block"
               name="arrow-right"
@@ -500,7 +500,7 @@ export default {
         contact_name: [
           {
             required: true,
-            message: "请输入联系人",
+            message: "请输入分类名称",
             // 可以单个或者同时写两个触发验证方式
             trigger: ["change", "blur"],
           },
@@ -510,7 +510,7 @@ export default {
         contact_name: [
           {
             required: true,
-            message: "请输入联系人",
+            message: "请输入分类名称",
             // 可以单个或者同时写两个触发验证方式
             trigger: ["change", "blur"],
           },
diff --git a/java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/README.md b/java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/README.md
new file mode 100644
index 0000000..59d99f9
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/README.md
@@ -0,0 +1,124 @@
+## 树形层级选择器
+### 简介
+为统一样式而生，树形层级选择器，picker弹窗形式的，样式和比例参照uniapp的picker和uni-data-picker组件
+* 支持单选、多选、父级选择，当然也支持单层选择
+* 支持Object对象属性自定义映射
+* 支持显示全部选中、部分选中、未选中三种状态
+* 支持快速自定义简单样式（分割线、按钮、标题、对齐等），深入样式可复写css
+
+### 使用方法
+在 `script` 中引入组件
+``` javascript
+	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
+	export default {
+		components: {
+			baTreePicker
+		}
+```
+在 `template` 中使用组件
+``` javascript
+	<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择城市"
+		:localdata="listData" valueKey="value" textKey="label" childrenKey="children" />
+```
+在 `script` 中定义打开方法，和选择监听
+``` javascript
+		methods: {
+			// 显示选择器
+			showPicker() {
+				this.$refs.treePicker._show();
+			},
+			//监听选择（ids为数组）
+			selectChange(ids, names) {
+				console.log(ids, names)
+			}
+		}
+```
+在 `template` 中调用打开
+``` javascript
+	<view @click="showPicker">调用选择器</view>
+```
+
+### 属性
+|属性名|类型|默认值|说明|
+|:-|:-:|:--:|-:|
+|localdata|Array|[]|源数据，目前支持tree结构，后续会考虑支持扁平化结构|
+|valueKey|String|id|指定 Object 中 key 的值作为节点数据id|
+|textKey|String|name|指定 Object 中 key 的值作为节点显示内容|
+|childrenKey|String|children|指定 Object 中 key 的值作为节点子集|
+|multiple|Boolean|false|是否多选，默认单选|
+|selectParent|Boolean|true|是否可以选父级，默认可以|
+|title|String| |标题|
+|titleColor|String||标题颜色|
+|confirmColor|String|#0055ff|确定按钮颜色|
+|cancelColor|String|#757575|取消按钮颜色|
+|switchColor|String|#666|节点切换图标颜色|
+|border|Boolean|false|是否有分割线，默认无|
+
+
+
+###  数据格式
+
+注意：必须有id、name(id可通过valueKey来配置为其它键值，如value)字段，且唯一
+
+``` json
+[
+    {
+        id: 1,
+        name: '公司1',
+        children: [{
+            id: 11,
+            name: '研发部',
+            children: [{
+                id: 111,
+                name: '张三',
+                
+            },{
+                id: 112,
+                name: '李四',
+                
+            }]
+        },{
+            id: 12,
+            name: '综合部',
+            
+        } ]
+    },
+    {
+        id: 2,
+        name: '公司2',
+        children: [{
+            id: 21,
+            name: '研发部',
+            
+        },{
+            id: 22,
+            name: '综合部',
+            
+        },{
+            id: 23,
+            name: '财务部',
+            
+        }, ]
+    },
+    {
+        id: 3,
+        name: '公司3'
+    },
+    {
+        id: 4,
+        name: '公司4',
+        children: [{
+            id: 41,
+            name: '研发部',
+            
+        }]
+    }
+]
+```
+</details>
+
+### 方法
+|方法名|参数|默认值|说明|
+|:-|:-:|:--:|-:|
+|_show()| | |显示选择器|
+|_hide()| | |隐藏选择器|
diff --git a/java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/ba-tree-picker.vue b/java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/ba-tree-picker.vue
new file mode 100644
index 0000000..59496c9
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/warehouse/manage/components/ba-tree-picker/ba-tree-picker.vue
@@ -0,0 +1,704 @@
+<!-- 树形层级选择器-->
+<!-- 1、支持单选、多选 -->
+<template>
+  <view class="ba-tree-picker">
+    <view
+      class="tree-cover"
+      :class="{ show: showDialog }"
+      @tap="_cancel"
+    ></view>
+    <view class="tree-dialog" :class="{ show: showDialog }">
+      <view class="tree-bar">
+        <view
+          class="tree-bar-cancel"
+          :style="{ color: cancelColor }"
+          hover-class="hover-c"
+          @tap="_cancel"
+        >
+          取消
+        </view>
+        <view class="tree-bar-title" :style="{ color: titleColor }">
+          {{ title }}
+        </view>
+        <view
+          class="tree-bar-confirm"
+          :style="{ color: confirmColor }"
+          hover-class="hover-c"
+          @tap="_confirm"
+        >
+          {{ multiple ? "确定" : "" }}
+        </view>
+      </view>
+      <view class="tree-view">
+        <scroll-view class="tree-list" :scroll-y="true">
+          <block v-for="(item, index) in treeList" :key="index">
+            <view
+              class="tree-item"
+              :style="[
+                {
+                  paddingLeft: item.level * 30 + 'rpx',
+                },
+              ]"
+              :class="{
+                itemBorder: border === true,
+                show: item.isShow,
+              }"
+            >
+              <view class="item-label">
+                <view
+                  class="item-icon uni-inline-item"
+                  @tap.stop="_onItemSwitch(item, index)"
+                >
+                  <view
+                    v-if="!item.isLastLevel && item.isShowChild"
+                    class="switch-on"
+                    :style="{ 'border-left-color': switchColor }"
+                  ></view>
+                  <view
+                    v-else-if="!item.isLastLevel && !item.isShowChild"
+                    class="switch-off"
+                    :style="{ 'border-top-color': switchColor }"
+                  ></view>
+                  <view
+                    v-else
+                    class="item-last-dot"
+                    :style="{ 'border-top-color': switchColor }"
+                  ></view>
+                </view>
+                <view
+                  class="uni-flex-item uni-inline-item"
+                  @tap.stop="_onItemSelect(item, index)"
+                >
+                  <view class="item-name">
+                    {{
+                      item.name +
+                      (item.childCount ? "(" + item.childCount + ")" : "")
+                    }}
+                  </view>
+                  <view
+                    class="item-check"
+                    v-if="selectParent ? true : item.isLastLevel"
+                  >
+                    <view
+                      class="item-check-yes"
+                      v-if="item.checkStatus == 1"
+                      :class="{ radio: !multiple }"
+                      :style="{ 'border-color': confirmColor }"
+                    >
+                      <view
+                        class="item-check-yes-part"
+                        :style="{ 'background-color': confirmColor }"
+                      ></view>
+                    </view>
+                    <view
+                      class="item-check-yes"
+                      v-else-if="item.checkStatus == 2"
+                      :class="{ radio: !multiple }"
+                      :style="{ 'border-color': confirmColor }"
+                    >
+                      <view
+                        class="item-check-yes-all"
+                        :style="{ 'background-color': confirmColor }"
+                      ></view>
+                    </view>
+                    <view
+                      class="item-check-no"
+                      v-else
+                      :class="{ radio: !multiple }"
+                      :style="{ 'border-color': confirmColor }"
+                    ></view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </block>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  emits: ["select-change"],
+  name: "ba-tree-picker",
+  props: {
+    valueKey: {
+      type: String,
+      default: "id",
+    },
+    textKey: {
+      type: String,
+      default: "name",
+    },
+    childrenKey: {
+      type: String,
+      default: "children",
+    },
+    localdata: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    localTreeList: {
+      //在已经格式化好的数据
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    selectedData: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    multiple: {
+      // 是否可以多选
+      type: Boolean,
+      default: true,
+    },
+    selectParent: {
+      //是否可以选父级
+      type: Boolean,
+      default: true,
+    },
+    confirmColor: {
+      // 确定按钮颜色
+      type: String,
+      default: "", // #0055ff
+    },
+    cancelColor: {
+      // 取消按钮颜色
+      type: String,
+      default: "", // #757575
+    },
+    titleColor: {
+      // 标题颜色
+      type: String,
+      default: "", //
+    },
+    switchColor: {
+      // 节点切换图标颜色
+      type: String,
+      default: "", // #666
+    },
+    border: {
+      // 是否有分割线
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      treeList: [],
+    };
+  },
+  computed: {},
+  methods: {
+    _show() {
+      this.showDialog = true;
+    },
+    _hide() {
+      this.showDialog = false;
+    },
+    _cancel() {
+      this._hide();
+      this.$emit("cancel", "");
+    },
+    _confirm() {
+      //多选
+      let selectedList = []; //如果子集全部选中，只返回父级 id
+      let selectedNames;
+      let currentLevel = -1;
+      this.treeList.forEach((item, index) => {
+        if (currentLevel >= 0 && item.level > currentLevel) {
+        } else {
+          if (item.checkStatus === 2) {
+            currentLevel = item.level;
+            selectedList.push(item.id);
+            selectedNames = selectedNames
+              ? selectedNames + " / " + item.name
+              : item.name;
+          } else {
+            currentLevel = -1;
+          }
+        }
+      });
+      //console.log('_confirm', selectedList);
+      this._hide();
+      this.$emit("select-change", selectedList, selectedNames);
+    },
+    //格式化原数据（原数据为tree结构）
+    _formatTreeData(list = [], level = 0, parentItem, isShowChild = true) {
+      let nextIndex = 0;
+      let parentId = -1;
+      let initCheckStatus = 0;
+      if (parentItem) {
+        nextIndex =
+          this.treeList.findIndex((item) => item.id === parentItem.id) + 1;
+        parentId = parentItem.id;
+        if (!this.multiple) {
+          //单选
+          initCheckStatus = 0;
+        } else initCheckStatus = parentItem.checkStatus == 2 ? 2 : 0;
+      }
+      list.forEach((item) => {
+        let isLastLevel = true;
+        if (item && item[this.childrenKey]) {
+          let children = item[this.childrenKey];
+          if (Array.isArray(children) && children.length > 0) {
+            isLastLevel = false;
+          }
+        }
+
+        let itemT = {
+          id: item[this.valueKey],
+          name: item[this.textKey],
+          level,
+          isLastLevel,
+          isShow: isShowChild,
+          isShowChild: false,
+          checkStatus: initCheckStatus,
+          orCheckStatus: 0,
+          parentId,
+          children: item[this.childrenKey],
+          childCount: item[this.childrenKey]
+            ? item[this.childrenKey].length
+            : 0,
+          childCheckCount: 0,
+          childCheckPCount: 0,
+        };
+
+        if (this.selectedData.indexOf(itemT.id) >= 0) {
+          itemT.checkStatus = 2;
+          itemT.orCheckStatus = 2;
+          itemT.childCheckCount = itemT.children ? itemT.children.length : 0;
+          this._onItemParentSelect(itemT, nextIndex);
+        }
+
+        this.treeList.splice(nextIndex, 0, itemT);
+        nextIndex++;
+      });
+      //console.log(this.treeList);
+    },
+    // 节点打开、关闭切换
+    _onItemSwitch(item, index) {
+      // console.log(item)
+      //console.log('_itemSwitch')
+      if (item.isLastLevel === true) {
+        return;
+      }
+      item.isShowChild = !item.isShowChild;
+      if (item.children) {
+        this._formatTreeData(item.children, item.level + 1, item);
+        item.children = undefined;
+      } else {
+        this._onItemChildSwitch(item, index);
+      }
+    },
+    _onItemChildSwitch(item, index) {
+      //console.log('_onItemChildSwitch')
+      const firstChildIndex = index + 1;
+      if (firstChildIndex > 0)
+        for (var i = firstChildIndex; i < this.treeList.length; i++) {
+          let itemChild = this.treeList[i];
+          if (itemChild.level > item.level) {
+            if (item.isShowChild) {
+              if (itemChild.parentId === item.id) {
+                itemChild.isShow = item.isShowChild;
+                if (!itemChild.isShow) {
+                  itemChild.isShowChild = false;
+                }
+              }
+            } else {
+              itemChild.isShow = item.isShowChild;
+              itemChild.isShowChild = false;
+            }
+          } else {
+            return;
+          }
+        }
+    },
+    // 节点选中、取消选中
+    _onItemSelect(item, index) {
+      //console.log('_onItemSelect')
+      //console.log(item)
+      if (!this.multiple) {
+        //单选
+        item.checkStatus = item.checkStatus == 0 ? 2 : 0;
+
+        this.treeList.forEach((v, i) => {
+          if (i != index) {
+            this.treeList[i].checkStatus = 0;
+          } else {
+            this.treeList[i].checkStatus = 2;
+          }
+        });
+
+        let selectedList = [];
+        let selectedNames;
+        selectedList.push(item.id);
+        selectedNames = item.name;
+        this._hide();
+        this.$emit("select-change", selectedList, selectedNames);
+        return;
+      }
+
+      let oldCheckStatus = item.checkStatus;
+      switch (oldCheckStatus) {
+        case 0:
+          item.checkStatus = 2;
+          item.childCheckCount = item.childCount;
+          item.childCheckPCount = 0;
+          break;
+        case 1:
+        case 2:
+          item.checkStatus = 0;
+          item.childCheckCount = 0;
+          item.childCheckPCount = 0;
+          break;
+        default:
+          break;
+      }
+      //子节点 全部选中
+      this._onItemChildSelect(item, index);
+      //父节点 选中状态变化
+      this._onItemParentSelect(item, index, oldCheckStatus);
+    },
+    _onItemChildSelect(item, index) {
+      //console.log('_onItemChildSelect')
+      let allChildCount = 0;
+      if (item.childCount && item.childCount > 0) {
+        index++;
+        while (
+          index < this.treeList.length &&
+          this.treeList[index].level > item.level
+        ) {
+          let itemChild = this.treeList[index];
+          itemChild.checkStatus = item.checkStatus;
+          if (itemChild.checkStatus == 2) {
+            itemChild.childCheckCount = itemChild.childCount;
+            itemChild.childCheckPCount = 0;
+          } else if (itemChild.checkStatus == 0) {
+            itemChild.childCheckCount = 0;
+            itemChild.childCheckPCount = 0;
+          }
+          // console.log('>>>>index：', index, 'item：', itemChild.name, '  status：', itemChild
+          // 	.checkStatus)
+          index++;
+        }
+      }
+    },
+    _onItemParentSelect(item, index, oldCheckStatus) {
+      //console.log('_onItemParentSelect')
+      //console.log(item)
+      const parentIndex = this.treeList.findIndex(
+        (itemP) => itemP.id == item.parentId
+      );
+      //console.log('parentIndex：' + parentIndex)
+      if (parentIndex >= 0) {
+        let itemParent = this.treeList[parentIndex];
+        let count = itemParent.childCheckCount;
+        let oldCheckStatusParent = itemParent.checkStatus;
+
+        if (oldCheckStatus == 1) {
+          itemParent.childCheckPCount -= 1;
+        } else if (oldCheckStatus == 2) {
+          itemParent.childCheckCount -= 1;
+        }
+        if (item.checkStatus == 1) {
+          itemParent.childCheckPCount += 1;
+        } else if (item.checkStatus == 2) {
+          itemParent.childCheckCount += 1;
+        }
+
+        if (
+          itemParent.childCheckCount <= 0 &&
+          itemParent.childCheckPCount <= 0
+        ) {
+          itemParent.childCheckCount = 0;
+          itemParent.childCheckPCount = 0;
+          itemParent.checkStatus = 0;
+        } else if (itemParent.childCheckCount >= itemParent.childCount) {
+          itemParent.childCheckCount = itemParent.childCount;
+          itemParent.childCheckPCount = 0;
+          itemParent.checkStatus = 2;
+        } else {
+          itemParent.checkStatus = 1;
+        }
+        //console.log('itemParent：', itemParent)
+        this._onItemParentSelect(itemParent, parentIndex, oldCheckStatusParent);
+      }
+    },
+    // 重置数据
+    _reTreeList() {
+      this.treeList.forEach((v, i) => {
+        this.treeList[i].checkStatus = v.orCheckStatus;
+      });
+    },
+    _initTree() {
+      this.treeList = [];
+      this._formatTreeData(this.localdata);
+    },
+  },
+  watch: {
+    localdata() {
+      this._initTree();
+    },
+    localTreeList() {
+      this.treeList = this.localTreeList;
+    },
+  },
+  mounted() {
+    this._initTree();
+  },
+};
+</script>
+
+<style scoped>
+.ba-tree-picker {
+  z-index: 12000;
+}
+
+.tree-cover {
+  position: fixed;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: all 0.3s ease;
+  visibility: hidden;
+  z-index: 12000;
+}
+
+.tree-cover.show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.tree-dialog {
+  position: fixed;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  background-color: #fff;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  z-index: 12000;
+  top: 20%;
+  transition: all 0.3s ease;
+  transform: translateY(100%);
+}
+
+.tree-dialog.show {
+  transform: translateY(0);
+}
+
+.tree-bar {
+  /* background-color: #fff; */
+  height: 90rpx;
+  padding-left: 25rpx;
+  padding-right: 25rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  border-bottom-width: 1rpx !important;
+  border-bottom-style: solid;
+  border-bottom-color: #f5f5f5;
+  font-size: 32rpx;
+  color: #757575;
+  line-height: 1;
+}
+
+.tree-bar-confirm {
+  color: #0055ff;
+  padding: 15rpx;
+}
+
+.tree-bar-title {
+}
+
+.tree-bar-cancel {
+  color: #757575;
+  padding: 15rpx;
+}
+
+.tree-view {
+  flex: 1;
+  padding: 20rpx;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+.tree-list {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tree-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+  height: 0;
+  opacity: 0;
+  transition: 0.2s;
+  overflow: hidden;
+}
+
+.tree-item.show {
+  height: 90rpx;
+  opacity: 1;
+}
+
+.tree-item.showchild:before {
+  transform: rotate(90deg);
+}
+
+.tree-item.last:before {
+  opacity: 0;
+}
+
+.switch-on {
+  width: 0;
+  height: 0;
+  border-left: 10rpx solid transparent;
+  border-right: 10rpx solid transparent;
+  border-top: 15rpx solid #666;
+}
+
+.switch-off {
+  width: 0;
+  height: 0;
+  border-bottom: 10rpx solid transparent;
+  border-top: 10rpx solid transparent;
+  border-left: 15rpx solid #666;
+}
+
+.item-last-dot {
+  position: absolute;
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 100%;
+  background: #666;
+}
+
+.item-icon {
+  width: 26rpx;
+  height: 26rpx;
+  margin-right: 8rpx;
+  padding-right: 20rpx;
+  padding-left: 20rpx;
+}
+
+.item-label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  line-height: 1.2;
+}
+
+.item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 450rpx;
+}
+
+.item-check {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.item-check-yes,
+.item-check-no {
+  width: 20px;
+  height: 20px;
+  border-top-left-radius: 20%;
+  border-top-right-radius: 20%;
+  border-bottom-right-radius: 20%;
+  border-bottom-left-radius: 20%;
+  border-top-width: 1rpx;
+  border-left-width: 1rpx;
+  border-bottom-width: 1rpx;
+  border-right-width: 1rpx;
+  border-style: solid;
+  border-color: #0055ff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.item-check-yes-part {
+  width: 12px;
+  height: 12px;
+  border-top-left-radius: 20%;
+  border-top-right-radius: 20%;
+  border-bottom-right-radius: 20%;
+  border-bottom-left-radius: 20%;
+  background-color: #0055ff;
+}
+
+.item-check-yes-all {
+  margin-bottom: 5px;
+  border: 2px solid #007aff;
+  border-left: 0;
+  border-top: 0;
+  height: 12px;
+  width: 6px;
+  transform-origin: center;
+  /* #ifndef APP-NVUE */
+  transition: all 0.3s;
+  /* #endif */
+  transform: rotate(45deg);
+}
+
+.item-check .radio {
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+
+.item-check .radio .item-check-yes-b {
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+
+.hover-c {
+  opacity: 0.6;
+}
+
+.itemBorder {
+  border-bottom: 1px solid #e5e5e5;
+}
+</style>
diff --git a/java-mall-app-shop-admin/pages/warehouse/manage/components/tree/style.css b/java-mall-app-shop-admin/pages/warehouse/manage/components/tree/style.css
new file mode 100644
index 0000000..10c8dd8
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/warehouse/manage/components/tree/style.css
@@ -0,0 +1,160 @@
+.tki-tree-mask {
+  position: fixed;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  z-index: 11999;
+  background-color: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: all 0.3s ease;
+  visibility: hidden;
+}
+.tki-tree-mask.show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.tki-tree-cnt {
+  position: fixed;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  z-index: 12000;
+  top: 225rpx;
+  transition: all 0.3s ease;
+  transform: translateY(100%);
+}
+.tki-tree-cnt.show {
+  transform: translateY(0);
+}
+
+.tki-tree-bar-title {
+  font-weight: bold;
+  color: #000;
+}
+
+.tki-tree-bar {
+  background-color: #fff;
+  height: 62px;
+  padding-left: 20rpx;
+  padding-right: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  border-bottom-width: 1rpx !important;
+  border-bottom-style: solid;
+  border-bottom-color: #f5f5f5;
+  font-size: 32rpx;
+  color: #757575;
+  line-height: 1;
+}
+.tki-tree-bar-confirm {
+  color: #fe411b;
+}
+.tki-tree-view {
+  position: absolute;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  top: 120rpx;
+  background-color: #fff;
+  padding-top: 20rpx;
+  padding-right: 20rpx;
+  padding-bottom: 20rpx;
+  padding-left: 20rpx;
+}
+.tki-tree-view-sc {
+  height: 100%;
+  overflow: hidden;
+}
+.tki-tree-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 26rpx;
+  color: #757575;
+  line-height: 1;
+  height: 0;
+  opacity: 0;
+  transition: 0.2s;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+}
+.tki-tree-item.show {
+  height: 80rpx;
+  opacity: 1;
+}
+.tki-tree-item.showchild:before {
+  transform: rotate(90deg);
+}
+.tki-tree-item.last:before {
+  opacity: 0;
+}
+.tki-tree-icon {
+  width: 26rpx;
+  height: 26rpx;
+  margin-right: 24rpx;
+}
+.tki-tree-label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  font-size: 36rpx;
+  line-height: 1.2;
+}
+.tki-tree-check {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tki-tree-check-yes,
+.tki-tree-check-no {
+  width: 20px;
+  height: 20px;
+  border-top-left-radius: 20%;
+  border-top-right-radius: 20%;
+  border-bottom-right-radius: 20%;
+  border-bottom-left-radius: 20%;
+  border-top-width: 1rpx;
+  border-left-width: 1rpx;
+  border-bottom-width: 1rpx;
+  border-right-width: 1rpx;
+  border-style: solid;
+  border-color: #fe411b;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+.tki-tree-check-yes-b {
+  width: 12px;
+  height: 12px;
+  border-top-left-radius: 20%;
+  border-top-right-radius: 20%;
+  border-bottom-right-radius: 20%;
+  border-bottom-left-radius: 20%;
+  background-color: #fe411b;
+}
+.tki-tree-check .radio {
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.tki-tree-check .radio .tki-tree-check-yes-b {
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.hover-c {
+  opacity: 0.6;
+}
diff --git a/java-mall-app-shop-admin/pages/warehouse/manage/components/tree/tree.vue b/java-mall-app-shop-admin/pages/warehouse/manage/components/tree/tree.vue
new file mode 100644
index 0000000..0861fe6
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/warehouse/manage/components/tree/tree.vue
@@ -0,0 +1,573 @@
+<template xlang="wxml">
+  <view class="tki-tree">
+    <view
+      class="tki-tree-mask"
+      :class="{ show: showTree }"
+      @tap="_cancel"
+    ></view>
+    <view class="tki-tree-cnt" :class="{ show: showTree }">
+      <view class="tki-tree-bar">
+        <view
+          class="tki-tree-bar-cancel"
+          :style="{ color: cancelColor }"
+          hover-class="hover-c"
+          @tap="_cancel"
+        >
+          取消
+        </view>
+        <view class="tki-tree-bar-title" :style="{ color: titleColor }">
+          {{ title }}
+        </view>
+        <view
+          class="tki-tree-bar-confirm"
+          :style="{ color: confirmColor }"
+          hover-class="hover-c"
+          @tap="_confirm"
+        >
+          确定
+        </view>
+      </view>
+
+      <view class="tki-tree-view">
+        <view class="no-data" v-if="treeList.length <= 0">
+          <view class="no-data-bg"></view>
+          <view class="no-data-tips" @click="skipuClassify">
+            暂无分类，马上去添加
+            <u-icon
+              style="display: inline-block"
+              name="arrow-right"
+              color="red"
+            ></u-icon>
+          </view>
+        </view>
+        <scroll-view class="tki-tree-view-sc" :scroll-y="true" v-else>
+          <block v-for="(item, index) in treeList" :key="index">
+            <view
+              class="tki-tree-item"
+              :style="[
+                {
+                  paddingLeft: item.rank * 15 + 'px',
+                  zIndex: item.rank * -1 + 50,
+                },
+              ]"
+              :class="{
+                border: border === true,
+                show: item.show,
+                last: item.lastRank,
+                showchild: item.showChild,
+                open: item.open,
+              }"
+            >
+              <view
+                class="tki-tree-label"
+                @tap.stop="_treeItemTap(item, index)"
+              >
+                <image
+                  class="tki-tree-icon"
+                  :src="
+                    item.lastRank
+                      ? lastIcon
+                      : item.showChild
+                      ? currentIcon
+                      : defaultIcon
+                  "
+                ></image>
+                {{ item.name }}
+              </view>
+              <view
+                class="tki-tree-check"
+                @tap.stop="_treeItemSelect(item, index)"
+                v-if="selectParent ? true : item.lastRank"
+              >
+                <view
+                  class="tki-tree-check-yes"
+                  v-if="item.checked"
+                  :class="{ radio: !multiple }"
+                  :style="{ 'border-color': confirmColor }"
+                >
+                  <view
+                    class="tki-tree-check-yes-b"
+                    :style="{ 'background-color': confirmColor }"
+                  ></view>
+                </view>
+                <view
+                  class="tki-tree-check-no"
+                  v-else
+                  :class="{ radio: !multiple }"
+                  :style="{ 'border-color': confirmColor }"
+                ></view>
+              </view>
+            </view>
+          </block>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "tki-tree",
+  props: {
+    range: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    idKey: {
+      type: String,
+      default: "id",
+    },
+    rangeKey: {
+      type: String,
+      default: "label",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    multiple: {
+      // 是否可以多选
+      type: Boolean,
+      default: false,
+      // default: true
+    },
+    selectParent: {
+      //是否可以选父级
+      type: Boolean,
+      default: false,
+    },
+    foldAll: {
+      //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
+      type: Boolean,
+      default: false,
+    },
+    confirmColor: {
+      // 确定按钮颜色
+      type: String,
+      default: "", // #07bb07
+    },
+    cancelColor: {
+      // 取消按钮颜色
+      type: String,
+      default: "", // #757575
+    },
+    titleColor: {
+      // 标题颜色
+      type: String,
+      default: "", // #757575
+    },
+    currentIcon: {
+      // 展开时候的ic
+      type: String,
+      default:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg==",
+    },
+    defaultIcon: {
+      // 折叠时候的ic
+      type: String,
+      default:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC",
+    },
+    lastIcon: {
+      // 没有子集的ic
+      type: String,
+      default: "",
+    },
+    border: {
+      // 是否有分割线
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showTree: false,
+      treeList: [],
+      selectIndex: -1,
+      idArr: [],
+    };
+  },
+  computed: {},
+  methods: {
+    _show() {
+      this.showTree = true;
+    },
+    _hide() {
+      this.showTree = false;
+    },
+    _cancel() {
+      this._hide();
+      this.$emit("cancel", "");
+    },
+    _confirm() {
+      // 处理所选数据
+      let rt = [],
+        obj = {};
+      this.treeList.forEach((v, i) => {
+        if (this.treeList[i].checked) {
+          obj = {};
+          obj.parents = this.treeList[i].parents;
+          obj = Object.assign(obj, this.treeList[i].source);
+          // 移除子元素
+          delete obj.children;
+          rt.push(obj);
+        }
+      });
+      this._hide();
+      this.$emit("confirm", rt);
+    },
+    //扁平化树结构
+    _renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
+      list.forEach((item) => {
+        this.treeList.push({
+          id: item[this.idKey],
+          name: item[this.rangeKey],
+          source: item,
+          parentId, // 父级id数组
+          parents, // 父级id数组
+          rank, // 层级
+          showChild: false, //子级是否显示
+          open: false, //是否打开
+          show: rank === 0, // 自身是否显示
+          hideArr: [],
+          orChecked: item.checked ? item.checked : false,
+          checked: item.checked ? item.checked : false,
+        });
+        if (Array.isArray(item.children) && item.children.length > 0) {
+          // console.log(item)
+          let parentid = [...parentId],
+            parentArr = [...parents],
+            childrenid = [...childrenid];
+          delete parentArr.children;
+          parentid.push(item[this.idKey]);
+          parentArr.push({
+            [this.idKey]: item[this.idKey],
+            [this.rangeKey]: item[this.rangeKey],
+          });
+          this._renderTreeList(item.children, rank + 1, parentid, parentArr);
+        } else {
+          this.treeList[this.treeList.length - 1].lastRank = true;
+        }
+      });
+      // console.log(list)
+    },
+    // 处理默认选择
+    _defaultSelect() {
+      this.treeList.forEach((v, i) => {
+        // if (v.checked) {
+        // 	this.treeList.forEach((v2, i2) => {
+        // 		if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
+        // 			console.log(v2,v.parentId.toString().indexOf(v2.parentId.toString()));
+        // 			v2.show = true
+        // 			// if(v2.rank>0){
+        // 			// 	v2.show=false
+        // 			// }
+        // 			if (v.parentId.includes(v2.id)) {
+        // 				v2.showChild = true;
+        // 				v2.open = true;
+        // 			}
+        // 		}
+        // 	})
+        // }
+      });
+    },
+    // 点击
+    _treeItemTap(item, index) {
+      console.log(item, index, "点击");
+      if (item.lastRank === true) {
+        //点击最后一级时触发事件
+        this.treeList[index].checked = !this.treeList[index].checked;
+        this._fixMultiple(index);
+        return;
+      }
+      let list = this.treeList;
+      let id = item.id;
+      item.showChild = !item.showChild;
+      item.open = item.showChild ? true : !item.open;
+      list.forEach((childItem, i) => {
+        if (item.showChild === false) {
+          //隐藏所有子级
+          if (!childItem.parentId.includes(id)) {
+            return;
+          }
+          if (!this.foldAll) {
+            if (childItem.lastRank !== true && !childItem.open) {
+              childItem.showChild = false;
+            }
+            // 为隐藏的内容添加一个标记
+            if (childItem.show) {
+              childItem.hideArr[item.rank] = id;
+            }
+          } else {
+            if (childItem.lastRank !== true) {
+              childItem.showChild = false;
+            }
+          }
+          childItem.show = false;
+        } else {
+          // 打开子集
+          if (childItem.parentId[childItem.parentId.length - 1] === id) {
+            childItem.show = true;
+          }
+          // 打开被隐藏的子集
+          if (childItem.parentId.includes(id) && !this.foldAll) {
+            // console.log(childItem.hideArr)
+            if (childItem.hideArr[item.rank] === id) {
+              childItem.show = true;
+              if (childItem.open && childItem.showChild) {
+                childItem.showChild = true;
+              } else {
+                childItem.showChild = false;
+              }
+              childItem.hideArr[item.rank] = null;
+            }
+            // console.log(childItem.hideArr)
+          }
+        }
+      });
+      // console.log(this.treeList)
+    },
+    _treeItemSelect(item, index) {
+      // console.log(item, index,'点击事件1');
+      // console.log(this.treeList,'点击事件2');
+      this.treeList[index].checked = !this.treeList[index].checked;
+      this._fixMultiple(index);
+      // console.log(item.id, index,this.treeList[index].checked,9);
+      // this.$emit('chenge',item,this.treeList[index].checked)
+      this._chenge(item, this.treeList[index].checked);
+    },
+    _chenge(e, e1) {
+      this.idArr.push(e.id);
+      if (e.source.children == undefined) {
+        this.treeList.forEach((k, i) => {
+          this.idArr.forEach((k1, i1) => {
+            if (k.id == k1 && e1 == true) {
+              this.treeList[i].checked = true;
+            } else if (k.id == k1 && e1 == false) {
+              this.treeList[i].checked = false;
+            }
+          });
+        });
+        if (e.checked) {
+          e.parentId.forEach((k, i) => {
+            this.treeList.forEach((k1, i1) => {
+              if (k1.id == k) {
+                this.treeList[i1].checked = true;
+              }
+            });
+          });
+        } else {
+          e.parentId.forEach((k, i) => {
+            this.treeList.forEach((k1, i1) => {
+              if (k1.id == k) {
+                this.treeList[i1].checked = false;
+              }
+            });
+          });
+        }
+        this.treeList.forEach((k1, i1) => {
+          if (k1.checked) {
+            k1.parentId.forEach((k2, i2) => {
+              this.treeList.forEach((k3, i3) => {
+                if (k3.id == k2) {
+                  this.treeList[i3].checked = true;
+                }
+              });
+            });
+          }
+        });
+        this.idArr = [];
+        return;
+      }
+      this.handkeCheck1(e.source.children);
+      this.treeList.forEach((k, i) => {
+        this.idArr.forEach((k1, i1) => {
+          if (k.id == k1 && e1 == true) {
+            this.treeList[i].checked = true;
+          } else if (k.id == k1 && e1 == false) {
+            this.treeList[i].checked = false;
+          }
+        });
+      });
+      if (e.checked) {
+        e.parentId.forEach((k, i) => {
+          this.treeList.forEach((k1, i1) => {
+            if (k1.id == k) {
+              this.treeList[i1].checked = true;
+            }
+          });
+        });
+      } else {
+        e.parentId.forEach((k, i) => {
+          this.treeList.forEach((k1, i1) => {
+            if (k1.id == k) {
+              this.treeList[i1].checked = false;
+            }
+          });
+        });
+      }
+      this.treeList.forEach((k1, i1) => {
+        if (k1.checked) {
+          k1.parentId.forEach((k2, i2) => {
+            this.treeList.forEach((k3, i3) => {
+              if (k3.id == k2) {
+                this.treeList[i3].checked = true;
+              }
+            });
+          });
+        }
+      });
+      this.idArr = [];
+      // console.log(e,'item');
+      // console.log(this.range,'原始');
+      // console.log(this.treeList,'初始化');
+      // this.handkeCheck(this.range, e, e1)
+    },
+    handkeCheck1(list) {
+      list.forEach((k, i) => {
+        this.idArr.push(k.id);
+        if (k.children == undefined) return;
+        this.handkeCheck1(k.children);
+      });
+    },
+
+    handkeCheck(list, e, e1) {
+      // console.log(list,'list');
+      // console.log(e.id,'e');
+      // console.log(e1,'e1');
+      // 点击数据权限
+      list.forEach((k, i) => {
+        if (k.children != undefined) {
+          if (k.id == e.id && e.checked == true) {
+            k.checked = true;
+            // console.log(k.id,'第一');
+            this.handkeChecks(k.children, e, e1);
+          } else if (k.id == e.id && e.checked == false) {
+            k.checked = false;
+            this.handkeChecks(k.children, e, e1);
+          } else {
+            this.handkeCheck(k.children, e, e1);
+          }
+        } else {
+          // console.log(1);
+          if (k.id == e.id && e.checked == true) {
+            k.checked = true;
+          } else if (k.id == e.id && e.checked == false) {
+            k.checked = false;
+          }
+        }
+      });
+      // console.log(this.treeList);
+      // this._reTreeList()
+      // this._initTree(list)
+      // this._renderTreeList(list)
+      // list.splice()
+      // this.lists = list
+      // this.$forceUpdate()
+      // console.log(this.lists,'执行了强制刷新');
+    },
+    handkeChecks(list, e, e1) {
+      // console.log(list, e, e1,'循环执行');
+      // console.log(list,'list','循环执行');
+      // console.log(e.id,'e','循环执行');
+      // console.log(e1,'e1','循环执行');
+      list.forEach((k, i) => {
+        if (k.children != undefined) {
+          if (e.checked) {
+            k.checked = true;
+            this.handkeChecks(k.children, e, e1);
+          } else {
+            k.checked = false;
+            this.handkeChecks(k.children, e, e1);
+          }
+        } else {
+          // console.log(k, 'else');
+          if (e.checked) {
+            k.checked = true;
+          } else {
+            k.checked = false;
+          }
+        }
+      });
+    },
+    // 处理单选多选
+    _fixMultiple(index) {
+      // console.log(index,'33333');
+      if (!this.multiple) {
+        // 如果是单选
+        this.treeList.forEach((v, i) => {
+          if (i != index) {
+            this.treeList[i].checked = false;
+          } else {
+            this.treeList[i].checked = true;
+            // console.log(index,'4444');
+          }
+        });
+      }
+    },
+    // 重置数据
+    _reTreeList() {
+      this.treeList.forEach((v, i) => {
+        this.treeList[i].checked = v.orChecked;
+      });
+    },
+    _initTree(range = this.range) {
+      // console.log('接收值的事件');
+      this.treeList = [];
+      this._renderTreeList(range);
+      this.$nextTick(() => {
+        this._defaultSelect(range);
+      });
+    },
+    skipuClassify() {
+      uni.navigateTo({
+        url: "/pages/warehouse/manage/classifyList",
+      });
+    },
+  },
+  watch: {
+    range(list) {
+      // console.log('监视值的改变1');
+      this._initTree(list);
+    },
+    multiple() {
+      // console.log('监视值的改变2');
+      if (this.range.length) {
+        this._reTreeList();
+      }
+    },
+    selectParent() {
+      // console.log('监视值的改变3');
+      if (this.range.length) {
+        this._reTreeList();
+      }
+    },
+    deep: true, // 深度监听
+    immediate: true, // 初次监听即执行
+  },
+  mounted() {
+    this._initTree();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./style.css";
+.no-data {
+  .no-data-bg {
+    margin: 50% auto;
+    margin-bottom: 0;
+    width: 300rpx;
+    height: 200rpx;
+    background-image: url("@/static/warehouse/no-classify.png");
+    background-size: 100%;
+  }
+  .no-data-tips {
+    margin: 80rpx auto;
+    color: red;
+    text-align: center;
+  }
+}
+</style>
diff --git a/java-mall-app-shop-admin/pages/warehouse/manage/specification.vue b/java-mall-app-shop-admin/pages/warehouse/manage/specification.vue
new file mode 100644
index 0000000..9582115
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/warehouse/manage/specification.vue
@@ -0,0 +1,544 @@
+<template>
+  <view class="specification-container">
+    <view class="specification-content">
+      <favorite-loading
+        class="specification-loading"
+        v-show="loading"
+        :color="'#fe4119'"
+        text=""
+        animation="spinner15"
+      ></favorite-loading>
+      <view class="no-data" v-if="specificationList.length <= 0 && !loading">
+        <view class="no-data-bg"></view>
+        <view class="no-data-tips">暂无规格</view>
+      </view>
+      <scroll-view
+        v-if="specificationList.length > 0 && !loading"
+        scroll-y
+        scroll-with-animation
+        :show-scrollbar="false"
+        class="specification-scroll"
+      >
+        <view
+          class="specification-item"
+          v-for="(item, index) of specificationList"
+        >
+          <view class="specification-info">
+            <view class="specification-name">
+              {{ item.spec_name }}
+            </view>
+            <view class="specification-sort">排序{{ item.spec_order }}</view>
+          </view>
+          <view class="specification-btn-content">
+            <u-icon
+              class="u-icon-jianhao"
+              custom-prefix="custom-icon-jianhao custom-icon"
+              size="20"
+              @click="handerShowDelectPopup(item)"
+            ></u-icon>
+            <u-icon
+              class="u-icon-bianji"
+              @click="handerShowEeditPopup(item)"
+              custom-prefix="custom-icon-icon_519 custom-icon"
+              size="24"
+            ></u-icon>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="specification-bottom">
+      <view class="bottom-list">
+        <u-button
+          class="bottom-btn-item"
+          :hairline="true"
+          :plain="true"
+          shape="circle"
+          @click="handerAddAndEditPopup(true)"
+        >
+          <u-icon class="bottom-icon" name="plus-circle"></u-icon>
+          新建规格
+        </u-button>
+      </view>
+    </view>
+    <u-popup
+      class="add-popup"
+      zIndex="10077"
+      :show="showAddAndEditPopup"
+      mode="center"
+    >
+      <view class="add-popup-content">
+        <view class="add-popup-title">
+          {{ isAdd ? "添加规格" : "编辑规格" }}
+        </view>
+        <u--form
+          labelPosition="left"
+          :model="form"
+          ref="uForm"
+          label-width="100"
+          :rules="rules"
+        >
+          <u-form-item
+            label="规格名称"
+            prop="spec_name"
+            class="form-item"
+            required
+          >
+            <u--textarea
+              class="u-textarea"
+              v-model="form.spec_name"
+              count
+              autoHeight
+              maxlength="20"
+              placeholder="请输入规格名称"
+            ></u--textarea>
+          </u-form-item>
+          <u-form-item
+            label="商品分类"
+            prop="type_name"
+            class="form-item"
+            @click="hadnerShowClassifyListPopup()"
+          >
+            <u--input
+              v-model="form.spec_category_name"
+              disabled
+              disabledColor="#ffffff"
+              placeholder="请选择商品分类"
+              border="none"
+              @click="hideKeyboard()"
+            ></u--input>
+            <u-icon slot="right" name="arrow-right"></u-icon>
+          </u-form-item>
+          <u-form-item label="分类排序" prop="category_order" class="form-item">
+            <u--input
+              v-model="form.category_order"
+              type="number"
+              placeholder="请输入商品排序"
+              border="none"
+            ></u--input>
+          </u-form-item>
+        </u--form>
+        <view class="popup-btn-list">
+          <u-button
+            class="btn-item"
+            :hairline="true"
+            :plain="true"
+            shape="circle"
+            @click="showAddAndEditPopup = false"
+          >
+            取消
+          </u-button>
+          <u-button
+            class="btn-item btn-item-2"
+            :hairline="true"
+            :plain="true"
+            shape="circle"
+            @click="handerAffirmAddAndEdit"
+          >
+            {{ isAdd ? "添加" : "修改" }}
+          </u-button>
+        </view>
+      </view>
+    </u-popup>
+    <tki-tree
+      ref="tkitree"
+      :range="baTreePickerList"
+      :foldAll="true"
+      rangeKey="category_name"
+      idKey="category_id"
+      title="选择商品分类"
+      @confirm="treeConfirm"
+      @cancel="treeCancel"
+      @handerScrolltolower="handerScrolltolower"
+      @handleRefresh="handleRefresh"
+    ></tki-tree>
+    <!-- <ba-tree-picker
+      ref="treePicker"
+      :multiple="false"
+      @select-change="selectChange"
+      title="选择商品分类"
+      :localdata="baTreePickerList"
+      valueKey="category_id"
+      textKey="category_name"
+      childrenKey="sub"
+      :selectParent="false"
+    /> -->
+    <!--商品类型弹窗-->
+    <!-- <u-popup
+      class="commodity-type-popup"
+      :show="showCommodityTypePopup"
+      mode="bottom"
+      zIndex="10080"
+      closeable
+      @close="handerCloseTypePopup"
+    >
+      <view class="commodity-type-popup-content">
+        <view class="commodity-type-popup-title">选择商品类型</view>
+        <view class="no-commodity-type" v-if="typeManageList.length <= 0">
+          <view class="no-commodity-type-bg"></view>
+          <view class="no-commodity-type-tips" @click="skipuBrandList">
+            暂无商品，马上添加
+            <u-icon
+              style="display: inline-block"
+              name="arrow-right"
+              color="red"
+            ></u-icon>
+          </view>
+        </view>
+
+        <scroll-view
+          v-if="typeManageList.length > 0"
+          scroll-y
+          class="commodity-type-search-scroll"
+          :show-scrollbar="false"
+          @scrolltolower="handerScrolltolower"
+          refresher-enabled
+          :refresher-triggered="isRefreshing"
+          @refresherrefresh="handleRefresh"
+          :style="{
+            maxHeight: typeManageList.length >= 2 ? '500px' : 'none',
+            overflowY: typeManageList.length >= 2 ? 'auto' : 'visible',
+          }"
+        >
+          <u-radio-group
+            class="commodity-type-radio-group"
+            v-model="radioValue"
+            placement="column"
+          >
+            <u-radio
+              class="commodity-type-radio"
+              v-for="(item, index) in typeManageList"
+              :key="index"
+              :label="item.type_name"
+              :name="item.type_id"
+            ></u-radio>
+          </u-radio-group>
+          <view
+            class="m-loading-box"
+            v-if="typeManageList.length > 0 && !isNotypeManageData"
+          >
+            <block v-if="loadingDownTypeManageData">
+              <view class="u-loadmore">
+                <view class="u-loading"></view>
+                <text class="u-loadmore-tips">正在加载...</text>
+              </view>
+            </block>
+            <block v-else>
+              <view class="u-loadmore u-loadmore-line">
+                <text class="u-loadmore-tips">没有更多商品类型了 ~</text>
+              </view>
+            </block>
+          </view>
+        </scroll-view>
+        <view class="popup-btn-list">
+          <u-button
+            class="btn-item"
+            :hairline="true"
+            :plain="true"
+            shape="circle"
+            @click="handerCancelCommodityTpye"
+          >
+            取消
+          </u-button>
+          <u-button
+            v-show="typeManageList.length > 0"
+            class="btn-item btn-item-2"
+            :hairline="true"
+            :plain="true"
+            shape="circle"
+            @click="handerAffirmCommodityType"
+          >
+            确认
+          </u-button>
+        </view>
+      </view>
+    </u-popup> -->
+  </view>
+</template>
+
+<script>
+import {
+  GetSpecificationList,
+  UpdateSpecification,
+  DelectSpecification,
+} from "@/api/warehouse/specification";
+import { GetCommodityClassify } from "@/api/warehouse/classifyList";
+import tkiTree from "./components/tree/tree";
+export default {
+  name: "specification",
+  components: {
+    tkiTree,
+  },
+  data() {
+    return {
+      loading: false,
+      loadingClassIfy: false,
+      pageNum: 1,
+      pageSize: 20,
+      specificationList: [],
+      currDelectItem: {},
+      currEidtItem: {},
+      showDelectPopup: false,
+      showAddAndEditPopup: false,
+      form: {
+        spec_name: "",
+        spec_order: "",
+        spec_category_id: "",
+        spec_format: "text",
+        spec_category_name: "",
+      },
+      isAdd: false,
+      rules: {
+        spec_name: [
+          {
+            required: true,
+            message: "请输入规格名称",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change", "blur"],
+          },
+        ],
+      },
+      baTreePickerList: [],
+    };
+  },
+  computed: {},
+  onLoad: function (options) {},
+  onReady() {},
+  onShow() {
+    this.getCommodityClassify();
+    this.getSpecificationList();
+  },
+
+  mounted() {},
+  methods: {
+    async getCommodityClassify() {
+      this.loadingClassIfy = true;
+      let res = await GetCommodityClassify();
+      if (res && res.status == 200) {
+        const classifyList = res.data;
+
+        if (classifyList.length > 0) {
+          this.baTreePickerList = classifyList.map((item) => {
+            // 创建父节点，并保留所有原始字段
+            const parentNode = {
+              ...item, // 保留所有原始数据
+              children: null, // 先初始化为 null
+            };
+
+            // 如果有子分类，递归处理
+            if (item.sub && item.sub.length > 0) {
+              parentNode.children = item.sub.map((subItem) => ({
+                ...subItem, // 保留所有子分类的原始数据
+              }));
+            }
+
+            return parentNode;
+          });
+        }
+      }
+      this.loadingClassIfy = false;
+    },
+    async getSpecificationList(isNoLoading = true) {
+      if (isNoLoading) {
+        this.loading = true;
+      }
+
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+      };
+
+      let res = await GetSpecificationList(params);
+      if (res && res.status == 200) {
+        this.specificationList = res.data.items;
+      }
+      this.loading = false;
+    },
+    handerShowDelectPopup(item) {
+      this.currDelectItem = item;
+      this.showDelectPopup = true;
+    },
+    hadnerShowClassifyListPopup() {
+      this.$refs.tkitree._show();
+    },
+    handerAddAndEditPopup(isAdd) {
+      this.isAdd = isAdd;
+      this.showAddAndEditPopup = true;
+    },
+    async handerAffirmAddAndEdit() {
+      let params = this.form;
+
+      let res = await UpdateSpecification(params);
+      if (res && res.status == 200) {
+        this.$refs.uToast.show({
+          message: this.isAdd ? "添加成功" : "修改成功",
+          type: "succeed",
+          duration: 1000,
+        });
+
+        this.getSpecificationList(true);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+.specification-container {
+  .specification-scroll {
+    -ms-overflow-style: none; /* IE和Edge */
+    scrollbar-width: none; /* Firefox */
+    height: calc(100vh - 230px);
+  }
+
+  .specification-loading {
+    margin: 70% auto;
+    display: flex;
+  }
+
+  .no-data {
+    .no-data-bg {
+      margin: 50% auto;
+      margin-bottom: 0;
+      width: 300rpx;
+      height: 200rpx;
+      background-image: url("../../../static/warehouse/no-classify.png");
+      background-size: 100%;
+    }
+    .no-data-tips {
+      margin: 80rpx auto;
+      color: #aaaaaa;
+      text-align: center;
+    }
+  }
+
+  .m-loading-box {
+    text-align: center;
+    padding: 40rpx;
+    color: #aaaa;
+    font-size: 28rpx;
+  }
+
+  .specification-content {
+    padding: 24rpx;
+
+    .specification-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 20rpx 0;
+      margin-left: 40rpx;
+      margin-bottom: 20px;
+
+      .specification-info {
+        .specification-name {
+          font-size: 17px;
+          font-weight: 600;
+        }
+
+        .specification-sort {
+          font-size: 15px;
+          color: #606060;
+        }
+      }
+
+      .specification-btn-content {
+        display: flex;
+        justify-content: space-around;
+        width: 220rpx;
+
+        .u-icon-jianhao {
+          ::v-deep.custom-icon-jianhao {
+            color: $base-color !important;
+          }
+        }
+      }
+    }
+  }
+
+  .add-popup {
+    ::v-deep.u-popup__content {
+      border-radius: 16rpx;
+    }
+
+    ::v-deep.u-fade-enter-to {
+      z-index: 10076 !important;
+    }
+
+    .add-popup-content {
+      width: 700rpx;
+
+      .add-popup-title {
+        padding: 40rpx;
+        text-align: center;
+        font-weight: 500;
+      }
+
+      .u-form {
+        margin: 0 40rpx;
+
+        .form-item {
+          margin: 28rpx 0;
+        }
+      }
+
+      .popup-btn-list {
+        display: flex;
+        margin: 50rpx;
+
+        .btn-item {
+          width: 46%;
+          height: 80rpx;
+          border-color: #909193;
+
+          &::after {
+            border: none;
+          }
+        }
+
+        .btn-item-2 {
+          background: $base-color;
+          color: #fff;
+          border: none;
+        }
+      }
+    }
+  }
+
+  .specification-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 172rpx;
+    background: #fff;
+    border-top: 2px solid #eeeeee;
+    z-index: 2;
+
+    .bottom-list {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-top: 40rpx;
+
+      .bottom-btn-item {
+        margin: 0;
+        margin-right: 20rpx;
+        width: 400rpx;
+        height: 88rpx;
+        font-size: 32rpx;
+        border-color: #d2d2d2;
+        color: #000;
+
+        .bottom-icon {
+          margin-right: 8rpx;
+        }
+
+        &::after {
+          border: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/java-mall-app-shop-admin/pages/warehouse/warehouse.vue b/java-mall-app-shop-admin/pages/warehouse/warehouse.vue
index fd050d4..4e2b99c 100644
--- a/java-mall-app-shop-admin/pages/warehouse/warehouse.vue
+++ b/java-mall-app-shop-admin/pages/warehouse/warehouse.vue
@@ -14,7 +14,7 @@
           </view>
           <view class="warehouse-item-name">商品管理</view>
         </view>
-        <view class="warehouse-item" @click="skipu('productList')">
+        <view class="warehouse-item" @click="skipu('specification')">
           <view class="warehouse-item-img">
             <u--image
               src="../../static/warehouse/specification.png"
@@ -24,10 +24,7 @@
           </view>
           <view class="warehouse-item-name">规格管理</view>
         </view>
-        <view
-          class="warehouse-item warehouse-item-2"
-          @click="skipu('brandList')"
-        >
+        <view class="warehouse-item warehouse-item-2" @click="skipu('')">
           <view class="warehouse-item-img">
             <u--image
               src="../../static/warehouse/commodity-type.png"