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

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",

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",

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

src/views/product/addProduct/index.vue

@@ -41,22 +41,41 @@
     <div class="container" style="">
       <div class="centered">
         <!-- 这里是你的内容 -->
-        <div style="width: 700px;height: 300px;">
+        <div style="width: 700px;height: 300px; display: flex;">
-          <el-cascader
+          <div>
-            v-model="categoryId"
+            <div style="display: flex; width: 100%; ">
-            clearable
+              <el-cascader
-            filterable
+                v-model="category_id"
-            :options="list"
+                clearable
-            :props="{ label: 'category_name', value: 'category_id', children:'sub' }"
+                filterable
-            :placeholder="__('请选择需要发布商品的所属分类')"
+                :options="list"
-            ref="cascader"
+                :props="{ label: 'category_name', value: 'category_id', children:'sub',checkStrictly: true }"
-            :style="{ width: '490px' }"
+                :placeholder="__('请选择需要发布商品的所属分类')"
-            @change="onCategoryChange"
+                ref="cascader"
-            size="medium"
+                :style="{ width: '490px' }"
-          />
+                style
-          <el-button size="medium"
+                @visible-change="onCategoryChange"
-                     type="primary"
+                @focus="searchOnFocus"
-                     :style="{ width: '200px' }" style="margin-left: 10px;" @click="submit">确认发布</el-button>
+                @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(() => {
+    this.$nextTick(() => {
-        // 获取 el-cascader 的输入框元素
+      const cascader = this.$refs.cascaderRef;
-        const inputEl = this.$refs.cascader.$el.querySelector('.el-input__inner');
+      if (cascader) {
-        // 设置焦点
+        // 禁用下拉显示
-        if (inputEl) {
+        cascader.dropdownVisible = false;
-          inputEl.click();
+        // 重写下拉显示方法，直接返回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) {
+      async onCategoryChange() {
-        if (row.length > 0) {
+        this.$refs.cascader.destroyPopper()
-          this.category_id = row[row.length-1];
+        this.$refs.cascader.dropDownVisible = false
-        } else {
+        this.$refs.tree.filterValue = this.$refs.cascader.inputValue
-          this.category_id = null;
-        }
       },
 
       tree(data) {
@@ -162,9 +203,9 @@
       },
       submit() {
         const category = this.findTree(this.list, this.category_id)
-
+        console.log(this.category_id)
-        if (category != null) {
+        if (this.category_id != null) {
-          this.handleEdit(category)
+          this.handleEdit(this.category_id)
         } else {
           this.$baseMessage("请选择商品分类", 'error')
         }
@@ -180,9 +221,8 @@
   align-items: center; /* 垂直居中 */
   height: 80vh; /* 100%视窗高度 */
 }
-
 .centered {
   /* 可以添加其他样式 */
 }
 
-</style>
+</style>