vue3-product-sku/dist/plugin-product-sku.cjs

vue3.x 商品sku选择器

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".sku-btn[data-v-654bfdce]{background-color:#1fabc4;color:#fff;border:0;padding:7px 20px;border-radius:5px;cursor:pointer}.sku[data-v-654bfdce]{padding-left:5px;border-left:4px solid #1FABC4;margin-bottom:20px}.attr-name[data-v-654bfdce]{background-color:#f8f8f8;padding:10px 20px 10px 5px;display:flex;justify-content:space-between}.attr-name-value[data-v-654bfdce]{outline:none;border:1px solid #e5e6e7;height:32px;line-height:32px;border-radius:4px;padding:0 15px}.attr-name-value[data-v-654bfdce]::placeholder{color:#a8a4a4}.add-attr[data-v-654bfdce]{display:flex;align-items:center;padding:0 5px;flex-wrap:wrap}.add-attr-value[data-v-654bfdce]{margin:10px 10px 0 0;border:1px solid #e5e6e7;height:32px;line-height:32px;padding:0 15px;border-radius:4px;color:#1fabc4;display:flex}.delv[data-v-654bfdce]{color:#067488;cursor:pointer;width:32px;text-align:center}.delN[data-v-654bfdce]{font-size:22px;color:#1fabc4;cursor:pointer}.attr-value[data-v-654bfdce]{width:280px;display:flex;align-items:center;justify-content:space-between;height:32px;line-height:32px;border-radius:4px;border:1px solid #e5e6e7;padding:0 10px;margin-top:10px}.attr-value-value[data-v-654bfdce]{outline:none;border:none;flex:1}.attr-value-value[data-v-654bfdce]::placeholder{color:#a8a4a4}.addIcon[data-v-654bfdce]{font-size:22px;color:#c0c4cc;cursor:pointer}table[data-v-654bfdce]{width:100%;border-collapse:collapse;margin:20px 0}table[data-v-654bfdce],th[data-v-654bfdce],td[data-v-654bfdce]{border:1px solid #e9e4e4}th[data-v-654bfdce],td[data-v-654bfdce]{padding:10px;text-align:center}th[data-v-654bfdce]{background-color:#f8f8f8}.modal-overlay[data-v-654bfdce]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal[data-v-654bfdce]{position:relative;background:#fff;padding:20px;border-radius:8px;max-width:90%;max-height:90%;overflow:auto}.close-button[data-v-654bfdce]{position:absolute;top:0;right:0;font-size:30px;cursor:pointer;background:none;border:none}.modal-image[data-v-654bfdce]{width:500px;height:auto}.productImg[data-v-654bfdce]{display:flex;align-items:center;justify-content:space-between;padding-right:10%}.productImg img[data-v-654bfdce]{border:1px solid #e5e6e7;border-radius:5px}.delete-button[data-v-654bfdce]{font-size:18px;cursor:pointer;background:none;border:none;margin-left:20px}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),$=(r,B)=>{const s=r.__vccOpts||r;for(const[m,h]of B)s[m]=h;return s},z={class:"attr-name"},L=["onUpdate:modelValue"],j=["onClick"],q={class:"add-attr"},O=["onClick"],R={class:"attr-value"},W=["onUpdate:modelValue"],G=["onClick"],H={key:1,border:"1"},J={key:0},K={key:1},Q={key:2},X={key:3},Y=["rowspan"],Z={key:0},x=["onUpdate:modelValue"],ee={key:1},te=["onUpdate:modelValue"],oe={key:2},le=["onUpdate:modelValue"],ae={key:3,style:{width:"20%"}},ce={class:"productImg"},ne=["src","onClick"],re=["onClick"],se=["onChange"],ue={class:"modal"},de=["src"],me={__name:"ProductSku",props:{color:{type:String,default:"#1FABC4"},productStock:{type:Boolean,default:!0},productPrice:{type:Boolean,default:!0},memberPrice:{type:Boolean,default:!0},productImg:{type:Boolean,default:!0},deleteImg:{type:Boolean,default:!1},parentTableData:{type:Array,default:()=>[]},parentAttr:{type:Array,default:()=>[]}},emits:["data-quote","upload-img","delete-img"],setup(r,{emit:B}){const s=e.ref([]),m=e.ref([]),h=e.ref(!1),E=e.ref(""),k=e.ref([]),y=e.ref([]),v=r,g=B;e.onMounted(()=>{v.parentTableData.length>0&&v.parentAttr.length>0&&(y.value=v.parentAttr.map(t=>t.name),s.value=[...v.parentAttr],k.value=[...v.parentTableData])}),e.watch(()=>s.value,t=>{P(I(t))},{deep:!0});const f=()=>{s.value.push({name:"",value:[]})},_=t=>{s.value.splice(t,1)},N=t=>{if(!m.value[t]||!m.value[t].trim()){m.value[t]="";return}const c=m.value[t].trim().split(/\s+/);s.value[t].value=[...new Set([...s.value[t].value,...c])],m.value[t]=""},b=(t,c)=>{s.value[t].value.splice(c,1)},C=(t,c)=>{const l=t.target.files[0];l&&l.type.startsWith("image/")?g("upload-img",l,c):alert("Please select a valid image file.")},S=t=>{v.deleteImg?g("delete-img",t):k.value[t].productImg=""},D=t=>{h.value=!0,E.value=k.value[t].productImg},V=()=>{h.value=!1},P=t=>{y.value=t.map(l=>l.name);const c=w(t,k.value);k.value=A(c,y.value),M()},M=()=>{const t={attr:s.value,tableData:k.value};g("data-quote",t)},w=(t,c)=>{const l=t.map(n=>n.name),a=t.map(n=>n.value),o=T(...a),d=new Map;return c.forEach(n=>{const u=l.map(i=>n.productSpec[i]).join("|");d.set(u,n)}),o.map(n=>{const u={};l.forEach((p,U)=>{u[p]=n[U]});const i=l.map(p=>u[p]).join("|");return d.get(i)||{productSpec:u,productPrice:"",memberPrice:"",productStock:"",productImg:""}})},A=(t,c)=>{const l=c.reduce((a,o)=>(a[o]=F(t,o),a),{});return t.map((a,o)=>{const d=c.map(n=>{var u,i;return{value:a.productSpec[n],show:((u=l[n][o])==null?void 0:u.show)??!0,rowspan:((i=l[n][o])==null?void 0:i.rowspan)??1}});return{...a,specs:d}})},T=(...t)=>t.reduce((c,l)=>c.flatMap(a=>l.map(o=>[a,o].flat())),[[]]),F=(t,c)=>{const l=[];let a=null,o=0;t.forEach((n,u)=>{if(n.productSpec[c]!==a){if(a!==null){const i=u-o;for(let p=o;p<u;p++)l[p]={show:p===o,rowspan:i}}a=n.productSpec[c],o=u}});const d=t.length-o;for(let n=o;n<t.length;n++)l[n]={show:n===o,rowspan:d};return l},I=t=>t.filter(c=>c.name!==""&&Array.isArray(c.value)&&c.value.length>0);return(t,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[s.value.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(s.value,(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:"sku",style:e.normalizeStyle({"border-left":`4px solid ${r.color}`}),key:a},[e.createElementVNode("div",z,[e.withDirectives(e.createElementVNode("input",{class:"attr-name-value","onUpdate:modelValue":o=>l.name=o,type:"text",placeholder:"输入规格名"},null,8,L),[[e.vModelText,l.name,void 0,{trim:!0}]]),e.createElementVNode("span",{class:"delN",style:e.normalizeStyle({color:r.color}),onClick:o=>_(a)},"x",12,j)]),e.createElementVNode("div",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:"add-attr-value",style:e.normalizeStyle({color:r.color}),key:d},[e.createElementVNode("div",null,e.toDisplayString(o),1),e.createElementVNode("div",{class:"delv",style:e.normalizeStyle({color:r.color}),onClick:n=>b(a,d)},"x",12,O)],4))),128)),e.createElementVNode("div",R,[e.withDirectives(e.createElementVNode("input",{class:"attr-value-value","onUpdate:modelValue":o=>m.value[a]=o,type:"text",placeholder:"输入规格值,多个值可用空格隔开一次添加"},null,8,W),[[e.vModelText,m.value[a]]]),e.createElementVNode("span",{class:"addIcon",onClick:o=>N(a)},"+",8,G)])])],4))),128)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"sku-btn",style:e.normalizeStyle({"background-color":r.color}),onClick:f},"添加规格",4),s.value.length>0?(e.openBlock(),e.createElementBlock("table",H,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,l=>(e.openBlock(),e.createElementBlock("th",{key:l},e.toDisplayString(l),1))),128)),r.productPrice?(e.openBlock(),e.createElementBlock("th",J,"价格")):e.createCommentVNode("",!0),r.memberPrice?(e.openBlock(),e.createElementBlock("th",K,"会员价格")):e.createCommentVNode("",!0),r.productStock?(e.openBlock(),e.createElementBlock("th",Q,"库存")):e.createCommentVNode("",!0),r.productImg?(e.openBlock(),e.createElementBlock("th",X,"产品图片")):e.createCommentVNode("",!0)])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(l,a)=>(e.openBlock(),e.createElementBlock("tr",{key:a},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.specs,(o,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:d},[o.show?(e.openBlock(),e.createElementBlock("td",{key:0,rowspan:o.rowspan},e.toDisplayString(o.value),9,Y)):e.createCommentVNode("",!0)],64))),128)),r.productPrice?(e.openBlock(),e.createElementBlock("td",Z,[e.withDirectives(e.createElementVNode("input",{class:"attr-name-value","onUpdate:modelValue":o=>l.productPrice=o,type:"number",placeholder:"价格"},null,8,x),[[e.vModelText,l.productPrice]])])):e.createCommentVNode("",!0),r.memberPrice?(e.openBlock(),e.createElementBlock("td",ee,[e.withDirectives(e.createElementVNode("input",{class:"attr-name-value","onUpdate:modelValue":o=>l.memberPrice=o,type:"number",placeholder:"会员价格"},null,8,te),[[e.vModelText,l.memberPrice]])])):e.createCommentVNode("",!0),r.productStock?(e.openBlock(),e.createElementBlock("td",oe,[e.withDirectives(e.createElementVNode("input",{class:"attr-name-value","onUpdate:modelValue":o=>l.productStock=o,type:"number",placeholder:"库存"},null,8,le),[[e.vModelText,l.productStock]])])):e.createCommentVNode("",!0),r.productImg?(e.openBlock(),e.createElementBlock("td",ae,[e.createElementVNode("div",ce,[l.productImg?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("img",{src:l.productImg,alt:"点击放大图片",height:"50",onClick:o=>D(a)},null,8,ne),e.createElementVNode("button",{onClick:o=>S(a),class:"delete-button"},"❌",8,re)],64)):(e.openBlock(),e.createElementBlock("input",{key:1,type:"file",accept:"image/*",id:"upload",onChange:o=>C(o,a)},null,40,se))])])):e.createCommentVNode("",!0)]))),128))])])):e.createCommentVNode("",!0),h.value?(e.openBlock(),e.createElementBlock("div",{key:2,onClick:V,class:"modal-overlay"},[e.createElementVNode("div",ue,[e.createElementVNode("button",{onClick:V,class:"close-button"},"×"),e.createElementVNode("img",{src:E.value,alt:"放大图片",class:"modal-image"},null,8,de)])])):e.createCommentVNode("",!0)],64))}},ie=$(me,[["__scopeId","data-v-654bfdce"]]);exports.default=ie;