update: 新增商品图片新增图库功能

update: 修改商品添加时分类选择页面
2026-01-12 16:49:07 +08:00 · 2026-01-12 16:48:41 +08:00
6 changed files with 323 additions and 42 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)) {
  /*
--- 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,7 +221,6 @@
  align-items: center; /* 垂直居中 */
  height: 80vh; /* 100%视窗高度 */
 }
-
 .centered {
  /* 可以添加其他样式 */
 }
--- a/src/views/product/goodsImg/goodsImgs.vue
+++ b/src/views/product/goodsImg/goodsImgs.vue
@ -32,6 +32,14 @@
        批量编辑
      </el-button>
    </div>
+            <el-button
+              type="primary"
+              icon="el-icon-plus"
+              @click.stop="handleAdd"
+              style="margin-bottom: 10px;"
+            >
+              新增图库
+            </el-button>
    <div class="list">
      <el-table
        ref="imgTable"
@ -148,6 +156,7 @@
    </div>
    <batchEditBarcode ref="batchEditBarcodeRef" @success="handleEditSuccess" />
    <img-edit ref="imgEditRef" @success="handleEditSuccess" />
+    <img-add ref="imgAddRef" @callback_fun_add="handleEditSuccess" />
  </div>
 </template>

@ -155,11 +164,13 @@
 import GoodsToolApi from '@/api/goodsTool'
 import batchEditBarcode from './batchEditBarcode.vue'
 import imgEdit from './imgEdit.vue'
+import imgAdd from './imgAdd.vue'

 export default {
  components: {
    batchEditBarcode,
-    imgEdit
+    imgEdit,
+    imgAdd,
  },
  data() {
    return {
@ -315,6 +326,10 @@ export default {
    handleEdit(row) {
        this.$refs.imgEditRef?.open(row);
    },
+
+    handleAdd() {
+      this.$refs.imgAddRef.init();
+    },
  },
 }
 </script>
--- a/src/views/product/goodsImg/imgAdd.vue
+++ b/src/views/product/goodsImg/imgAdd.vue
@ -0,0 +1,193 @@
+<template>
+    <div>
+        <el-dialog :title="title" :visible.sync="dialogVisible" @open="openDialog" :modal-append-to-body="false"
+            :append-to-body="true" :close-on-click-modal="false" width="70%">
+            <avue-form ref="formref" style="max-height: 700px; overflow-y: auto; margin-bottom: 50px" :key="formkey"
+                :option="option" v-model="form" @submit="handleSubmit" @error="handleSubmitError"></avue-form>
+
+            <span class="avue-dialog__footer avue-dialog__footer--right" v-if="['add', 'edit'].includes(ntype)">
+                <el-button icon="el-icon-upload" type="primary" :loading="btnLoading"
+                    @click="submitBtnSave">保存</el-button>
+                <el-button icon="el-icon-circle-close" @click="dialogVisible = false">取消</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { saveBatchBarcode } from "@/api/goodsTool";
+
+export default {
+    data() {
+        return {
+            title: '新增',
+            dialogVisible: false,
+            ntype: 'add',
+            formkey: 1,
+            obj_detail: {},
+            btnLoading: false,
+
+            form: {},
+            option: {
+                column: [
+                    {
+                        label: '添加图库',
+                        prop: 'imgs',
+                        type: 'dynamic',
+                        span: 24,
+                        children: {
+                            align: 'center',
+                            headerAlign: 'center',
+                            rowAdd: (done) => {
+                                if (this.form.imgs.length >= 5) {
+                                    this.$message.error('批次每次最多五条');
+                                    return;
+                                }
+                                done();
+                            },
+                            column: [
+                                {
+                                    label: '商品名称',
+                                    prop: "name",
+                                    rules: [
+                                        {
+                                            required: true,
+                                            message: '商品名称必须填写',
+                                        },
+                                    ],
+                                },
+                                {
+                                    label: '条形码',
+                                    prop: "barcode",
+                                    tip: '如有条形码请记得添加',
+                                },
+                                {
+                                    label: '商品主图',
+                                    width: 200,
+                                    type: 'upload',
+                                    listType: 'picture-img',
+                                    propsHttp: {
+                                        res: 'data',
+                                        url: 'media_url',
+                                    },
+                                    action: 'https://mall.gpxscs.cn/api/admin/oss/upload',
+                                    tip: '只能上传jpg/png',
+                                    data: {
+                                        authorization: this.$store.state.user.token,
+                                    },
+                                    prop: 'thumb',
+                                    rules: [
+                                        {
+                                            required: true,
+                                            message: '商品主图必须有',
+                                        },
+                                    ],
+                                },
+                                {
+                                    label: '商品附图',
+                                    type: 'upload',
+                                    width: 150,
+                                    listType: 'picture',
+                                    propsHttp: {
+                                        res: 'data',
+                                        url: 'media_url',
+                                    },
+                                    action: 'https://mall.gpxscs.cn/api/admin/oss/upload',
+                                    tip: '只能上传jpg/png',
+                                    data: {
+                                        authorization: this.$store.state.user.token,
+                                    },
+                                    prop: 'product_image_list',
+                                },
+                                {
+                                    label: '商品简称',
+                                    prop: "sname",
+                                },
+                                {
+                                    label: '商品标题',
+                                    prop: "title",
+                                },
+                                {
+                                    label: '一级分类',
+                                    prop: "category_1st",
+                                },
+                                {
+                                    label: '二级分类',
+                                    prop: "category_2nd",
+                                },
+                            ],
+                        },
+                    }
+                ],
+                labelPosition: 'right',
+                labelSuffix: '：',
+                labelWidth: 140,
+                gutter: 0,
+                menuBtn: false,
+                detail: false,
+                submitBtn: false,
+                submitText: '提交',
+                emptyBtn: false,
+                emptyText: '清空',
+                menuPosition: 'center',
+            },
+        }
+    },
+    methods: {
+        init() {
+            this.form = {}
+            this.dialogVisible = true
+            this.formkey++
+        },
+        openDialog() {
+            this.title = '新增'
+            this.option.detail = false
+        },
+        submitBtnSave() {
+            this.btnLoading = true
+            this.$refs.formref.submit()
+        },
+        handleSubmitError() {
+            this.btnLoading = false
+        },
+        handleSubmit(form, done) {
+            done()
+            let putData = []
+            form.imgs.forEach((item) => {
+                let imageList = []
+                item.product_image_list.forEach((item) => {
+                    let putObj = {
+                        imageUrl: item,
+                    }
+                    imageList.push(putObj)
+                })
+                putData.push(
+                    {
+                        ...item,
+                        product_image_list: imageList,
+                    }
+                )
+            })
+            this.saveSet(saveBatchBarcode, putData)
+        },
+        saveSet(Interface, params) {
+            Interface(params).then(
+                (res) => {
+                    this.$emit('callback_fun_add')
+                    console.log(res)
+                    this.$message({
+                        type: 'success',
+                        message: res.msg,
+                    })
+                    this.dialogVisible = false
+                    this.btnLoading = false
+                },
+                (error) => {
+                    this.btnLoading = false
+                    window.console.log(error)
+                }
+            )
+        },
+    },
+}
+</script>
Author	SHA1	Message	Date
hufflzp	2a825e765f	update: 新增商品图片新增图库功能	2026-01-12 16:49:07 +08:00
hufflzp	ff1596bb92	update: 修改商品添加时分类选择页面	2026-01-12 16:48:41 +08:00