@qiyin/select-product 1.0.0

package/README.md

@@ -0,0 +1,138 @@
+# @qiyin/select-product
+
+货品树形选择组件，支持分类展开、图片预览悬浮、关键词搜索高亮。
+
+## 安装
+
+```bash
+npm install @qiyin/select-product
+```
+
+## 注册
+
+### 全局注册
+```js
+import { createApp } from 'vue'
+import SelectProduct from '@qiyin/select-product'
+
+const app = createApp(App)
+app.use(SelectProduct) // 注册为 <QySelectProduct>
+```
+
+### 局部引入
+```js
+import { SelectProduct } from '@qiyin/select-product'
+```
+
+## 基础用法
+
+```vue
+<template>
+  <div style="height: 600px; width: 280px;">
+    <QySelectProduct :data="productTree" @select="handleSelect" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const productTree = ref([
+  {
+    cateName: '礼盒类',
+    cateProductCode: 'CAT-001',
+    children: [
+      {
+        finishedProductCode: 'P-001',
+        finishedProductName: '天地盖礼盒',
+        displayImage: 'https://example.com/img/p001.jpg'
+      },
+      {
+        finishedProductCode: 'P-002',
+        finishedProductName: '翻盖礼盒',
+        displayImage: 'https://example.com/img/p002.jpg'
+      }
+    ]
+  },
+  {
+    finishedProductCode: 'P-003',
+    finishedProductName: '手提袋',
+    displayImage: 'https://example.com/img/p003.jpg'
+  }
+])
+
+function handleSelect([code, ...rest]) {
+  console.log('选中货品编号:', code)
+}
+</script>
+```
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `data` | `Array` | `[]` | 货品树数据，见下方数据结构 |
+
+## Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `select` | `[finishedProductCode, ...menuArgs]` | 点击某个货品时触发，第一个参数为货品编号 |
+
+## Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| `header` | 搜索栏下方、列表上方的自定义内容区 |
+
+## 数据结构
+
+```ts
+type ProductNode = CategoryNode | ProductLeaf
+
+// 分类节点（有 cateName 字段）
+interface CategoryNode {
+  cateProductCode: string   // 分类唯一编码，作为菜单 index
+  cateName: string          // 分类显示名称
+  children?: ProductNode[]  // 子节点（分类或货品）
+}
+
+// 货品节点（无 cateName 字段）
+interface ProductLeaf {
+  finishedProductCode: string  // 货品编号，作为菜单 index，select 事件返回此值
+  finishedProductName: string  // 货品名称
+  displayImage?: string        // 封面图 URL，悬浮显示大图
+}
+```
+
+## 搜索
+
+组件内置搜索栏，支持按**货品名称**或**货品编号**模糊匹配。搜索时：
+- 自动展开所有命中分类
+- 匹配关键词高亮显示
+- 无结果时显示空状态
+
+## 样式定制
+
+组件使用 `border-box` 布局，需要父容器指定高度。常见场景：
+
+```vue
+<!-- 固定高度侧边栏 -->
+<div style="height: 100vh; width: 260px;">
+  <QySelectProduct :data="tree" @select="onSelect" />
+</div>
+
+<!-- 弹窗内使用 -->
+<el-dialog width="360px">
+  <div style="height: 500px;">
+    <QySelectProduct :data="tree" @select="onSelect" />
+  </div>
+</el-dialog>
+```
+
+## 对等依赖（peerDependencies）
+
+| 包 | 版本 |
+|----|------|
+| `vue` | `^3.4` |
+| `element-plus` | `^2.0` |
+| `@element-plus/icons-vue` | `^2.0` |

package/dist/select-product.es.js

@@ -0,0 +1,282 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".cate-title[data-v-4cd996d7]{font-size:13px;font-weight:600}.product-item[data-v-4cd996d7]{height:auto!important;min-height:44px}.product-item__inner[data-v-4cd996d7]{display:flex;align-items:center;gap:10px;width:100%;padding:4px 0}.product-item__thumb[data-v-4cd996d7]{width:44px;height:44px;border-radius:4px;border:1px solid #eee;flex-shrink:0;overflow:hidden;cursor:pointer}.product-item__thumb--placeholder[data-v-4cd996d7]{display:flex;align-items:center;justify-content:center;background:#f5f5f5;color:#c0c4cc}.product-item__thumb-error[data-v-4cd996d7]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f7fa;color:#c0c4cc}.product-item__name[data-v-4cd996d7]{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#303133;line-height:1.4;word-break:break-all}.product-item__code[data-v-4cd996d7]{font-size:11px;color:#909399}.preview-error[data-v-4cd996d7]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;color:#c0c4cc;gap:6px;font-size:12px}mark.highlight[data-v-4cd996d7]{background:#fef08a;color:inherit;padding:0;border-radius:2px}[data-v-4cd996d7] .el-menu-item *{vertical-align:middle}.qy-select-product[data-v-33a92b09]{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #e4e7ed;border-radius:6px;overflow:hidden}.qy-select-product__search[data-v-33a92b09]{padding:10px 12px 8px;border-bottom:1px solid #f0f0f0;background:#fff}.qy-select-product__body[data-v-33a92b09]{flex:1;min-height:0}.qy-select-product__menu[data-v-33a92b09]{border-right:none!important}.qy-select-product__empty[data-v-33a92b09]{display:flex;align-items:center;justify-content:center;height:200px}[data-v-33a92b09] .el-menu{border-right:none}[data-v-33a92b09] .el-sub-menu__title{font-weight:600;font-size:13px;color:#303133}[data-v-33a92b09] .el-sub-menu__title:hover,[data-v-33a92b09] .el-menu-item:hover,[data-v-33a92b09] .el-menu-item.is-active{background-color:#ecf5ff!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { ElSubMenu as B, ElMenuItem as D, ElPopover as j, ElImage as A, ElIcon as F, ElInput as R, ElScrollbar as U, ElMenu as G, ElEmpty as H } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import "element-plus/es/components/scrollbar/style/css";
+import "element-plus/es/components/empty/style/css";
+import "element-plus/es/components/menu/style/css";
+import "element-plus/es/components/input/style/css";
+import { ref as $, computed as q, resolveComponent as J, createBlock as y, openBlock as t, withCtx as n, createElementBlock as c, Fragment as b, renderList as L, createElementVNode as p, toDisplayString as P, createVNode as l, unref as I, renderSlot as K } from "vue";
+import { Picture as N, Search as W } from "@element-plus/icons-vue";
+import "element-plus/es/components/menu-item/style/css";
+import "element-plus/es/components/popover/style/css";
+import "element-plus/es/components/image/style/css";
+import "element-plus/es/components/icon/style/css";
+import "element-plus/es/components/sub-menu/style/css";
+const V = (m, e) => {
+  const v = m.__vccOpts || m;
+  for (const [C, _] of e)
+    v[C] = _;
+  return v;
+}, X = { class: "cate-title" }, Y = { class: "product-item__inner" }, Z = { class: "product-item__thumb-error" }, ee = { class: "preview-error" }, te = { class: "product-item__thumb-error" }, oe = {
+  key: 1,
+  class: "product-item__thumb product-item__thumb--placeholder"
+}, re = { class: "product-item__name" }, ne = { key: 0 }, se = {
+  key: 0,
+  class: "highlight"
+}, ce = { key: 1 }, le = { key: 1 }, ie = { class: "product-item__code" }, ue = {
+  __name: "menuItem",
+  props: {
+    item: { type: Object, default: null },
+    index: { type: Number, default: 0 },
+    openCode: { type: String, default: "" },
+    searchQuery: { type: String, default: "" }
+  },
+  setup(m) {
+    const e = m, v = $(!1), C = q(() => {
+      const _ = e.item.finishedProductName || "", u = e.searchQuery;
+      if (!u) return [_];
+      const a = new RegExp(
+        `(${u.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+        "gi"
+      );
+      return _.split(a);
+    });
+    return (_, u) => {
+      const a = J("menu-item", !0), E = B, g = F, k = A, Q = j, S = D;
+      return e.item.cateName ? (t(), y(E, {
+        key: 0,
+        index: e.item.cateProductCode
+      }, {
+        title: n(() => [
+          p("span", X, P(e.item.cateName), 1)
+        ]),
+        default: n(() => [
+          (t(!0), c(b, null, L(e.item.children || [], (s) => (t(), y(a, {
+            key: s.cateProductCode,
+            item: s,
+            openCode: e.openCode,
+            searchQuery: e.searchQuery
+          }, null, 8, ["item", "openCode", "searchQuery"]))), 128)),
+          (t(!0), c(b, null, L(e.item.productList || [], (s, x) => (t(), y(a, {
+            key: s.finishedProductCode,
+            item: s,
+            openCode: e.openCode,
+            searchQuery: e.searchQuery,
+            index: x
+          }, null, 8, ["item", "openCode", "searchQuery", "index"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["index"])) : (t(), y(S, {
+        key: 1,
+        index: e.item.finishedProductCode,
+        class: "product-item"
+      }, {
+        title: n(() => [
+          p("div", Y, [
+            e.item.displayImage ? (t(), c(b, { key: 0 }, [
+              v.value ? (t(), y(Q, {
+                key: 0,
+                placement: "right",
+                width: 320,
+                trigger: "hover",
+                teleported: !0
+              }, {
+                reference: n(() => [
+                  l(k, {
+                    class: "product-item__thumb",
+                    src: e.item.displayImage,
+                    fit: "cover",
+                    lazy: ""
+                  }, {
+                    error: n(() => [
+                      p("div", Z, [
+                        l(g, null, {
+                          default: n(() => [
+                            l(I(N))
+                          ]),
+                          _: 1
+                        })
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["src"])
+                ]),
+                default: n(() => [
+                  l(k, {
+                    src: e.item.displayImage,
+                    class: "w-full",
+                    style: { "max-height": "200px" },
+                    fit: "contain"
+                  }, {
+                    error: n(() => [
+                      p("div", ee, [
+                        l(g, { size: "24" }, {
+                          default: n(() => [
+                            l(I(N))
+                          ]),
+                          _: 1
+                        }),
+                        u[1] || (u[1] = p("span", null, "加载失败", -1))
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["src"])
+                ]),
+                _: 1
+              })) : (t(), y(k, {
+                key: 1,
+                class: "product-item__thumb",
+                src: e.item.displayImage,
+                fit: "cover",
+                lazy: "",
+                onMouseenter: u[0] || (u[0] = (s) => v.value = !0)
+              }, {
+                error: n(() => [
+                  p("div", te, [
+                    l(g, null, {
+                      default: n(() => [
+                        l(I(N))
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }, 8, ["src"]))
+            ], 64)) : (t(), c("div", oe, [
+              l(g, null, {
+                default: n(() => [
+                  l(I(N))
+                ]),
+                _: 1
+              })
+            ])),
+            p("div", re, [
+              e.searchQuery && C.value.length > 1 ? (t(), c("span", ne, [
+                (t(!0), c(b, null, L(C.value, (s, x) => (t(), c(b, { key: x }, [
+                  x % 2 === 1 ? (t(), c("mark", se, P(s), 1)) : (t(), c("span", ce, P(s), 1))
+                ], 64))), 128))
+              ])) : (t(), c("span", le, P(e.item.finishedProductName), 1)),
+              p("span", ie, P(e.item.finishedProductCode), 1)
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["index"]));
+    };
+  }
+}, ae = /* @__PURE__ */ V(ue, [["__scopeId", "data-v-4cd996d7"]]), de = { class: "qy-select-product" }, pe = { class: "qy-select-product__search" }, me = {
+  key: 1,
+  class: "qy-select-product__empty"
+}, _e = {
+  __name: "index",
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["select"],
+  setup(m, { emit: e }) {
+    const v = m, C = e, _ = $(""), u = $(""), a = $("");
+    let E = null;
+    function g(o) {
+      clearTimeout(E), E = setTimeout(() => {
+        a.value = o;
+      }, 300);
+    }
+    function k(o, r) {
+      var i, h;
+      return ((i = o.finishedProductName) == null ? void 0 : i.toLowerCase().includes(r)) || ((h = o.finishedProductCode) == null ? void 0 : h.toLowerCase().includes(r));
+    }
+    function Q(o, r) {
+      if (!r) return o;
+      const i = r.toLowerCase();
+      return o.reduce((h, f) => {
+        if (f.cateName) {
+          const w = Q(f.children || [], r), d = (f.productList || []).filter(
+            (T) => k(T, i)
+          );
+          (w.length || d.length) && h.push({
+            ...f,
+            children: w,
+            productList: d
+          });
+        } else
+          k(f, i) && h.push(f);
+        return h;
+      }, []);
+    }
+    function S(o) {
+      return o.reduce((r, i) => (i.cateName && (r.push(i.cateProductCode), r.push(...S(i.children || []))), r), []);
+    }
+    const s = q(() => Q(v.data, a.value)), x = q(
+      () => a.value ? S(s.value) : []
+    ), M = (...o) => {
+      C("select", o);
+    }, O = (o) => {
+      _.value = o;
+    };
+    return (o, r) => {
+      const i = R, h = G, f = H, w = U;
+      return t(), c("div", de, [
+        p("div", pe, [
+          l(i, {
+            modelValue: u.value,
+            "onUpdate:modelValue": r[0] || (r[0] = (d) => u.value = d),
+            placeholder: "搜索货品名称 / 编号",
+            clearable: "",
+            "prefix-icon": I(W),
+            size: "small",
+            onInput: g,
+            onClear: r[1] || (r[1] = (d) => g(""))
+          }, null, 8, ["modelValue", "prefix-icon"])
+        ]),
+        K(o.$slots, "header", {}, void 0, !0),
+        l(w, {
+          class: "qy-select-product__body",
+          "wrap-class": "scrollbar-wrapper"
+        }, {
+          default: n(() => [
+            s.value.length ? (t(), y(h, {
+              key: 0,
+              "background-color": "#f7f8fa",
+              class: "qy-select-product__menu",
+              onSelect: M,
+              onOpen: O,
+              "unique-opened": !a.value,
+              "default-openeds": x.value,
+              style: {
+                "--el-menu-item-height": "44px",
+                "--el-menu-sub-item-height": "44px"
+              }
+            }, {
+              default: n(() => [
+                (t(!0), c(b, null, L(s.value, (d) => (t(), y(ae, {
+                  key: d.cateProductCode || d.finishedProductCode,
+                  item: d,
+                  openCode: _.value,
+                  searchQuery: a.value
+                }, null, 8, ["item", "openCode", "searchQuery"]))), 128))
+              ]),
+              _: 1
+            }, 8, ["unique-opened", "default-openeds"])) : (t(), c("div", me, [
+              l(f, {
+                description: "暂无匹配货品",
+                "image-size": 60
+              })
+            ]))
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}, z = /* @__PURE__ */ V(_e, [["__scopeId", "data-v-33a92b09"]]);
+z.install = (m) => {
+  m.component("QySelectProduct", z);
+};
+export {
+  z as SelectProduct,
+  z as default
+};

package/dist/select-product.umd.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".cate-title[data-v-4cd996d7]{font-size:13px;font-weight:600}.product-item[data-v-4cd996d7]{height:auto!important;min-height:44px}.product-item__inner[data-v-4cd996d7]{display:flex;align-items:center;gap:10px;width:100%;padding:4px 0}.product-item__thumb[data-v-4cd996d7]{width:44px;height:44px;border-radius:4px;border:1px solid #eee;flex-shrink:0;overflow:hidden;cursor:pointer}.product-item__thumb--placeholder[data-v-4cd996d7]{display:flex;align-items:center;justify-content:center;background:#f5f5f5;color:#c0c4cc}.product-item__thumb-error[data-v-4cd996d7]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f7fa;color:#c0c4cc}.product-item__name[data-v-4cd996d7]{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#303133;line-height:1.4;word-break:break-all}.product-item__code[data-v-4cd996d7]{font-size:11px;color:#909399}.preview-error[data-v-4cd996d7]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;color:#c0c4cc;gap:6px;font-size:12px}mark.highlight[data-v-4cd996d7]{background:#fef08a;color:inherit;padding:0;border-radius:2px}[data-v-4cd996d7] .el-menu-item *{vertical-align:middle}.qy-select-product[data-v-33a92b09]{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #e4e7ed;border-radius:6px;overflow:hidden}.qy-select-product__search[data-v-33a92b09]{padding:10px 12px 8px;border-bottom:1px solid #f0f0f0;background:#fff}.qy-select-product__body[data-v-33a92b09]{flex:1;min-height:0}.qy-select-product__menu[data-v-33a92b09]{border-right:none!important}.qy-select-product__empty[data-v-33a92b09]{display:flex;align-items:center;justify-content:center;height:200px}[data-v-33a92b09] .el-menu{border-right:none}[data-v-33a92b09] .el-sub-menu__title{font-weight:600;font-size:13px;color:#303133}[data-v-33a92b09] .el-sub-menu__title:hover,[data-v-33a92b09] .el-menu-item:hover,[data-v-33a92b09] .el-menu-item.is-active{background-color:#ecf5ff!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(r,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/scrollbar/style/css"),require("element-plus/es/components/empty/style/css"),require("element-plus/es/components/menu/style/css"),require("element-plus/es/components/input/style/css"),require("vue"),require("@element-plus/icons-vue"),require("element-plus/es/components/menu-item/style/css"),require("element-plus/es/components/popover/style/css"),require("element-plus/es/components/image/style/css"),require("element-plus/es/components/icon/style/css"),require("element-plus/es/components/sub-menu/style/css")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/scrollbar/style/css","element-plus/es/components/empty/style/css","element-plus/es/components/menu/style/css","element-plus/es/components/input/style/css","vue","@element-plus/icons-vue","element-plus/es/components/menu-item/style/css","element-plus/es/components/popover/style/css","element-plus/es/components/image/style/css","element-plus/es/components/icon/style/css","element-plus/es/components/sub-menu/style/css"],s):(r=typeof globalThis<"u"?globalThis:r||self,s(r.QySelectProduct={},r.es,null,null,null,null,null,r.Vue,r.ElementPlusIconsVue))})(this,function(r,s,H,J,K,W,X,e,g){"use strict";const b=(p,t)=>{const h=p.__vccOpts||p;for(const[f,d]of t)h[f]=d;return h},w={class:"cate-title"},V={class:"product-item__inner"},S={class:"product-item__thumb-error"},q={class:"preview-error"},I={class:"product-item__thumb-error"},$={key:1,class:"product-item__thumb product-item__thumb--placeholder"},Q={class:"product-item__name"},L={key:0},T={key:0,class:"highlight"},D={key:1},F={key:1},M={class:"product-item__code"},z=b({__name:"menuItem",props:{item:{type:Object,default:null},index:{type:Number,default:0},openCode:{type:String,default:""},searchQuery:{type:String,default:""}},setup(p){const t=p,h=e.ref(!1),f=e.computed(()=>{const d=t.item.finishedProductName||"",i=t.searchQuery;if(!i)return[d];const a=new RegExp(`(${i.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return d.split(a)});return(d,i)=>{const a=e.resolveComponent("menu-item",!0),E=s.ElSubMenu,y=s.ElIcon,k=s.ElImage,x=s.ElPopover,N=s.ElMenuItem;return t.item.cateName?(e.openBlock(),e.createBlock(E,{key:0,index:t.item.cateProductCode},{title:e.withCtx(()=>[e.createElementVNode("span",w,e.toDisplayString(t.item.cateName),1)]),default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.item.children||[],l=>(e.openBlock(),e.createBlock(a,{key:l.cateProductCode,item:l,openCode:t.openCode,searchQuery:t.searchQuery},null,8,["item","openCode","searchQuery"]))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.item.productList||[],(l,B)=>(e.openBlock(),e.createBlock(a,{key:l.finishedProductCode,item:l,openCode:t.openCode,searchQuery:t.searchQuery,index:B},null,8,["item","openCode","searchQuery","index"]))),128))]),_:1},8,["index"])):(e.openBlock(),e.createBlock(N,{key:1,index:t.item.finishedProductCode,class:"product-item"},{title:e.withCtx(()=>[e.createElementVNode("div",V,[t.item.displayImage?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[h.value?(e.openBlock(),e.createBlock(x,{key:0,placement:"right",width:320,trigger:"hover",teleported:!0},{reference:e.withCtx(()=>[e.createVNode(k,{class:"product-item__thumb",src:t.item.displayImage,fit:"cover",lazy:""},{error:e.withCtx(()=>[e.createElementVNode("div",S,[e.createVNode(y,null,{default:e.withCtx(()=>[e.createVNode(e.unref(g.Picture))]),_:1})])]),_:1},8,["src"])]),default:e.withCtx(()=>[e.createVNode(k,{src:t.item.displayImage,class:"w-full",style:{"max-height":"200px"},fit:"contain"},{error:e.withCtx(()=>[e.createElementVNode("div",q,[e.createVNode(y,{size:"24"},{default:e.withCtx(()=>[e.createVNode(e.unref(g.Picture))]),_:1}),i[1]||(i[1]=e.createElementVNode("span",null,"加载失败",-1))])]),_:1},8,["src"])]),_:1})):(e.openBlock(),e.createBlock(k,{key:1,class:"product-item__thumb",src:t.item.displayImage,fit:"cover",lazy:"",onMouseenter:i[0]||(i[0]=l=>h.value=!0)},{error:e.withCtx(()=>[e.createElementVNode("div",I,[e.createVNode(y,null,{default:e.withCtx(()=>[e.createVNode(e.unref(g.Picture))]),_:1})])]),_:1},8,["src"]))],64)):(e.openBlock(),e.createElementBlock("div",$,[e.createVNode(y,null,{default:e.withCtx(()=>[e.createVNode(e.unref(g.Picture))]),_:1})])),e.createElementVNode("div",Q,[t.searchQuery&&f.value.length>1?(e.openBlock(),e.createElementBlock("span",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(l,B)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:B},[B%2===1?(e.openBlock(),e.createElementBlock("mark",T,e.toDisplayString(l),1)):(e.openBlock(),e.createElementBlock("span",D,e.toDisplayString(l),1))],64))),128))])):(e.openBlock(),e.createElementBlock("span",F,e.toDisplayString(t.item.finishedProductName),1)),e.createElementVNode("span",M,e.toDisplayString(t.item.finishedProductCode),1)])])]),_:1},8,["index"]))}}},[["__scopeId","data-v-4cd996d7"]]),O={class:"qy-select-product"},j={class:"qy-select-product__search"},A={key:1,class:"qy-select-product__empty"},C=b({__name:"index",props:{data:{type:Array,default:()=>[]}},emits:["select"],setup(p,{emit:t}){const h=p,f=t,d=e.ref(""),i=e.ref(""),a=e.ref("");let E=null;function y(n){clearTimeout(E),E=setTimeout(()=>{a.value=n},300)}function k(n,o){var c,u;return((c=n.finishedProductName)==null?void 0:c.toLowerCase().includes(o))||((u=n.finishedProductCode)==null?void 0:u.toLowerCase().includes(o))}function x(n,o){if(!o)return n;const c=o.toLowerCase();return n.reduce((u,_)=>{if(_.cateName){const P=x(_.children||[],o),m=(_.productList||[]).filter(G=>k(G,c));(P.length||m.length)&&u.push({..._,children:P,productList:m})}else k(_,c)&&u.push(_);return u},[])}function N(n){return n.reduce((o,c)=>(c.cateName&&(o.push(c.cateProductCode),o.push(...N(c.children||[]))),o),[])}const l=e.computed(()=>x(h.data,a.value)),B=e.computed(()=>a.value?N(l.value):[]),R=(...n)=>{f("select",n)},U=n=>{d.value=n};return(n,o)=>{const c=s.ElInput,u=s.ElMenu,_=s.ElEmpty,P=s.ElScrollbar;return e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("div",j,[e.createVNode(c,{modelValue:i.value,"onUpdate:modelValue":o[0]||(o[0]=m=>i.value=m),placeholder:"搜索货品名称 / 编号",clearable:"","prefix-icon":e.unref(g.Search),size:"small",onInput:y,onClear:o[1]||(o[1]=m=>y(""))},null,8,["modelValue","prefix-icon"])]),e.renderSlot(n.$slots,"header",{},void 0,!0),e.createVNode(P,{class:"qy-select-product__body","wrap-class":"scrollbar-wrapper"},{default:e.withCtx(()=>[l.value.length?(e.openBlock(),e.createBlock(u,{key:0,"background-color":"#f7f8fa",class:"qy-select-product__menu",onSelect:R,onOpen:U,"unique-opened":!a.value,"default-openeds":B.value,style:{"--el-menu-item-height":"44px","--el-menu-sub-item-height":"44px"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,m=>(e.openBlock(),e.createBlock(z,{key:m.cateProductCode||m.finishedProductCode,item:m,openCode:d.value,searchQuery:a.value},null,8,["item","openCode","searchQuery"]))),128))]),_:1},8,["unique-opened","default-openeds"])):(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(_,{description:"暂无匹配货品","image-size":60})]))]),_:1})])}}},[["__scopeId","data-v-33a92b09"]]);C.install=p=>{p.component("QySelectProduct",C)},r.SelectProduct=C,r.default=C,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/index.js

@@ -0,0 +1,8 @@
+import SelectProduct from './lib/selectProduct/index.vue'
+
+SelectProduct.install = (app) => {
+  app.component('QySelectProduct', SelectProduct)
+}
+
+export { SelectProduct }
+export { SelectProduct as default }

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@qiyin/select-product",
+  "version": "1.0.0",
+  "description": "起印货品选择组件",
+  "author": "qy",
+  "license": "MIT",
+  "main": "./dist/select-product.umd.js",
+  "module": "./dist/select-product.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/select-product.es.js",
+      "require": "./dist/select-product.umd.js"
+    }
+  },
+  "files": [
+    "index.js",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "release": "npm run build && npm publish --registry=https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.21",
+    "element-plus": "^2.0.0",
+    "@element-plus/icons-vue": "^2.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  }
+}