update: 修改商品添加时分类选择页面

2026-01-12 16:48:41 +08:00 · 2026-01-12 16:48:41 +08:00 · ff1596bb92
commit ff1596bb92
parent 31e9e0dd35
4 changed files with 114 additions and 41 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,16 +1,16 @@
 {
-  "name": "lancer-admin",
+  "name": "xiaofa-admin",
  "version": "2.0.12-dev",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "lancer-admin",
+      "name": "xiaofa-admin",
      "version": "2.0.12-dev",
-      "license": "Mozilla Public License Version 2.0",
      "dependencies": {
        "@logicflow/core": "^1.0.2",
        "@logicflow/extension": "^1.0.2",
+        "@smallwei/avue": "^2.13.2",
        "@vuemap/vue-amap": "^0.1.17",
        "axios": "^0.26.1",
        "clipboard": "^2.0.10",
@ -2809,6 +2809,23 @@
        "@sinonjs/commons": "^1.7.0"
      }
    },
+    "node_modules/@smallwei/avue": {
+      "version": "2.13.2",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@smallwei/avue/-/avue-2.13.2.tgz",
+      "integrity": "sha512-ctd8ul96xAdBXU6PJ2QkKlvZ89pVCha/aHM6rflLVD5HHU0N9KHvz0e2R52yyE87YuYpqiSO+OH7lckyVR+4kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "countup.js": "^1.9.3",
+        "dayjs": "^1.10.4",
+        "lodash": "^4.17.21",
+        "nprogress": "^0.2.0",
+        "vue-cropper": "^0.5.8"
+      },
+      "peerDependencies": {
+        "element-ui": ">=2.15.3",
+        "vue": ">=2.5.17"
+      }
+    },
    "node_modules/@soda/friendly-errors-webpack-plugin": {
      "version": "1.8.1",
      "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@ -8127,6 +8144,12 @@
        "node": ">=4"
      }
    },
+    "node_modules/countup.js": {
+      "version": "1.9.3",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/countup.js/-/countup.js-1.9.3.tgz",
+      "integrity": "sha512-UHf2P/mFKaESqdPq+UdBJm/1y8lYdlcDd0nTZHNC8cxWoJwZr1Eldm1PpWui446vDl5Pd8PtRYkr3q6K4+Qa5A==",
+      "license": "MIT"
+    },
    "node_modules/cp-file": {
      "version": "7.0.0",
      "resolved": "https://registry.npmmirror.com/cp-file/-/cp-file-7.0.0.tgz",
@ -28983,6 +29006,12 @@
        "vue": "^2.1.8"
      }
    },
+    "node_modules/vue-cropper": {
+      "version": "0.5.11",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/vue-cropper/-/vue-cropper-0.5.11.tgz",
+      "integrity": "sha512-UeA3qL2BLCTGkOEAxEsxSNFO+qLYAn6YRHv4oS32cP9lMhF1vFmnAf/z+ZamtR0/Fh3sbZeZUCLVR2Ol2/dpTQ==",
+      "license": "ISC"
+    },
    "node_modules/vue-eslint-parser": {
      "version": "8.3.0",
      "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
  "dependencies": {
    "@logicflow/core": "^1.0.2",
    "@logicflow/extension": "^1.0.2",
+    "@smallwei/avue": "^2.13.2",
    "@vuemap/vue-amap": "^0.1.17",
    "axios": "^0.26.1",
    "clipboard": "^2.0.10",
--- a/src/main.js
+++ b/src/main.js
@ -27,6 +27,9 @@ import { sprintf, translateTitle as __ } from '@/utils/i18n'
 */
 import { baseURL, pwa } from './config'
 import { isExternal } from 'vue-plugin-utils'
+import Avue from '@smallwei/avue';
+import '@smallwei/avue/lib/index.css';
+Vue.use(Avue);

 if (process.env.NODE_ENV === 'production' && !isExternal(baseURL)) {
  /*
@ -48,4 +51,4 @@ new Vue({
  router,
  baiduMap,
  render: (h) => h(App),
-})
+})
--- a/src/views/product/addProduct/index.vue
+++ b/src/views/product/addProduct/index.vue
@ -41,22 +41,41 @@
    <div class="container" style="">
      <div class="centered">
        <!-- 这里是你的内容 -->
-        <div style="width: 700px;height: 300px;">
-          <el-cascader
-            v-model="categoryId"
-            clearable
-            filterable
-            :options="list"
-            :props="{ label: 'category_name', value: 'category_id', children:'sub' }"
-            :placeholder="__('请选择需要发布商品的所属分类')"
-            ref="cascader"
-            :style="{ width: '490px' }"
-            @change="onCategoryChange"
-            size="medium"
-          />
-          <el-button size="medium"
-                     type="primary"
-                     :style="{ width: '200px' }" style="margin-left: 10px;" @click="submit">确认发布</el-button>
+        <div style="width: 700px;height: 300px; display: flex;">
+          <div>
+            <div style="display: flex; width: 100%; ">
+              <el-cascader
+                v-model="category_id"
+                clearable
+                filterable
+                :options="list"
+                :props="{ label: 'category_name', value: 'category_id', children:'sub',checkStrictly: true }"
+                :placeholder="__('请选择需要发布商品的所属分类')"
+                ref="cascader"
+                :style="{ width: '490px' }"
+                style
+                @visible-change="onCategoryChange"
+                @focus="searchOnFocus"
+                @blur="searchOutFocus"
+                @click.native.prevent="searchOutFocus"
+                @focus.native.prevent="searchOutFocus"
+                size="medium"
+              />
+              <el-button size="medium"
+                        type="primary"
+                        :style="{ width: '200px',height: '35px' }" style="margin-left: 10px;" @click="submit">确认发布
+              </el-button>
+            </div>
+            <div style="width: 100%; height: calc(100% - 45px); border-radius: 1;">
+              <avue-tree
+                ref = 'tree'
+                :data="list"     
+                :expand-all="true"
+                :option="treeOption"  
+                @node-click="treeNodeClick" 
+              ></avue-tree>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@ -84,23 +103,48 @@
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
+        treeOption:{
+          addBtn: false,
+          editBtn: false,
+          delBtn:false,
+          filter:false,
+          props:{ label: 'category_name', value: 'category_id', children:'sub' }  
+        },
      }
    },
    created() {
      this.fetchData()
    },
    mounted() {
-      // 在组件挂载后立即获取焦点
-      this.$nextTick(() => {
-        // 获取 el-cascader 的输入框元素
-        const inputEl = this.$refs.cascader.$el.querySelector('.el-input__inner');
-        // 设置焦点
-        if (inputEl) {
-          inputEl.click();
-        }
-      });
+    // 挂载后强制关闭下拉，且监听防止弹出
+    this.$nextTick(() => {
+      const cascader = this.$refs.cascaderRef;
+      if (cascader) {
+        // 禁用下拉显示
+        cascader.dropdownVisible = false;
+        // 重写下拉显示方法，直接返回false
+        cascader.showPopper = () => false;
+      }
+    });
    },
    methods: {
+      //当搜索框失去焦点
+      searchOutFocus(){
+        this.$refs.cascader.destroyPopper()
+        this.$refs.cascader.dropDownVisible = false
+      },
+      //当搜索框成为焦点
+      searchOnFocus(){
+        this.$refs.cascader.destroyPopper()
+        this.$refs.cascader.dropDownVisible = false
+        this.$refs.tree.filterValue = ''
+        this.$refs.cascader.inputValue = ''
+      },
+      //当节点被点击
+      treeNodeClick(row){
+        this.category_id = row.category_id
+        console.log(row.category_id)
+      },
      showEdit(row) {
        const sub = row.sub
        if (sub && sub.length > 0) return false
@ -115,16 +159,13 @@
        const { data } = await categoryTree()

        this.list = this.tree(data);
-
        this.listLoading = false
      },

-      async onCategoryChange(row) {
-        if (row.length > 0) {
-          this.category_id = row[row.length-1];
-        } else {
-          this.category_id = null;
-        }
+      async onCategoryChange() {
+        this.$refs.cascader.destroyPopper()
+        this.$refs.cascader.dropDownVisible = false
+        this.$refs.tree.filterValue = this.$refs.cascader.inputValue
      },

      tree(data) {
@ -162,9 +203,9 @@
      },
      submit() {
        const category = this.findTree(this.list, this.category_id)
-
-        if (category != null) {
-          this.handleEdit(category)
+        console.log(this.category_id)
+        if (this.category_id != null) {
+          this.handleEdit(this.category_id)
        } else {
          this.$baseMessage("请选择商品分类", 'error')
        }
@ -180,9 +221,8 @@
  align-items: center; /* 垂直居中 */
  height: 80vh; /* 100%视窗高度 */
 }
-
 .centered {
  /* 可以添加其他样式 */
 }

-</style>
+</style>