dm-vue3-ui/lib/multiple-filter/index.vue.js

This Components Library will help get you started developing in Vue 3.

"use strict";const e=require("ant-design-vue/es"),l=require("vue"),t=require("@ant-design/icons-vue"),a=require("../i18n/index"),n=require("./component/date-range.vue"),i=require("./component/input.vue"),o=require("./component/select.vue"),r=require("./component/multiple-select.vue"),c=require("../utils/index"),s=require("../utils/theme"),u={class:"dm-multiple-filter"},d={class:"search-header"},p={key:0,style:{display:"flex"}},m={class:"search-container"},v={class:"search-value"},f={class:"dm-menu"},g=["onClick","title"],y={class:"extra-tools-wrap"},h={key:0,class:"search-board-wrap"},k={class:"tag-title"},N=["title"],b={class:"search-operation-btns"},V={class:"condition-temp-container"},x={class:"template-content"},B={class:"tips"},C={class:"save-condition"},E=l.defineComponent({name:"dm-multiple-filter",__name:"index",props:{config:{default:()=>[]},moduleKey:{default:"moduleKey"}},emits:["search"],setup(E,{emit:T}){var w;const F=E,S=T,D=c.store("platformConfig")||{},q=(null==D?void 0:D.themeColor)||"default";s.themeManager.initializeTheme(),s.themeManager.applyThemeByType(q);const K=(null==(w=JSON.parse(JSON.stringify(F.config)))?void 0:w.filter((e=>e.value)))||[],M=l.ref(!1),$=l.ref(""),_=l.ref(K),O=l.ref(""),I=l.ref([]),A=l.computed((()=>F.config.map((e=>({label:e.label,value:e.field,type:e.type,disabled:e.disabled}))))),U=l.computed((()=>F.config.find((e=>e.field===$.value)))),z=l.computed((()=>{var e;return{input:i,select:o,"multiple-select":r,"date-range":n}[null==(e=U.value)?void 0:e.type]})),J=e=>{[e].forEach((e=>{let l=F.config.find((l=>l.field===e.field));if(l){let t,{field:a,label:n,type:i}=l;switch(l.type){case"input":"string"==typeof e.value&&0!==e.value.trim().length&&(t={field:a,label:n,type:i,value:e.value,tagText:e.value});break;case"select":let o=l.options.find((l=>l.value===e.value));o&&(t={field:a,label:n,type:i,value:o.value,tagText:o.label});break;case"multiple-select":if(Array.isArray(e.value)){let o=l.options.filter((l=>e.value.includes(l.value)));o.length>0&&(t={field:a,label:n,type:i,value:o.map((e=>e.value)),tagText:o.map((e=>e.label)).toString()})}break;case"date-range":c.validateRangeDateValue(e.value)&&(t={field:a,label:n,type:i,value:e.value,tagText:e.value.join(" - "),combinedFields:l.combinedFields})}if(t){let l=_.value.findIndex((l=>l.field===e.field));l>-1?_.value.splice(l,1,t):_.value.push(t)}}})),R()},L=()=>{_.value.splice(0,_.value.length),R()},j=()=>{c.addTemplate(F.moduleKey,{name:O.value,params:_.value}),O.value="",I.value=c.getTemplatesByModuleKey(F.moduleKey),M.value=!1},P=l.ref(),R=()=>{if(z.value===i){let e=P.value;if(""!==e){e.pressEnter();let t=G();l.nextTick((()=>{S("search",t)}))}else{let e=G();l.nextTick((()=>{S("search",e)}))}}else{let e=G();l.nextTick((()=>{S("search",e)}))}},G=()=>{let e={};return _.value.forEach((l=>{let{field:t,type:a,value:n}=l;switch(a){case"input":case"select":case"multiple-select":e[t]=n;break;case"date-range":l.combinedFields&&2===l.combinedFields.length?(e[l.combinedFields[0]]=n[0],e[l.combinedFields[1]]=n[1]):e[t]=n}})),e};return l.watch((()=>F.config),(()=>{I.value=c.getTemplatesByModuleKey(F.moduleKey),$.value=F.config.length>0?F.config[0].field:""}),{deep:!0,immediate:!0}),l.onMounted((()=>{})),(n,i)=>{const o=e.Select,r=e.Button,s=e.Dropdown,E=e.Input,T=e.Popover;return l.openBlock(),l.createElementBlock("div",u,[l.createElementVNode("div",d,[n.config.length>0?(l.openBlock(),l.createElementBlock("div",p,[l.createElementVNode("div",m,[n.config.length>1?(l.openBlock(),l.createBlock(o,{key:0,class:"selection-menu",value:$.value,"onUpdate:value":i[0]||(i[0]=e=>$.value=e),"dropdown-match-select-width":!1,options:A.value,"get-popup-container":e=>e.parentNode,"dropdown-class-name":"dropdown-selection-menu",size:"small"},null,8,["value","options","get-popup-container"])):l.createCommentVNode("",!0),l.createElementVNode("div",v,[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(z.value),{ref_key:"component1",ref:P,data:U.value,onApply:J},null,40,["data"]))]),l.createVNode(l.unref(t.SearchOutlined),{onClick:R})]),I.value.length?(l.openBlock(),l.createBlock(s,{key:0,"get-popup-container":e=>e.parentNode},{overlay:l.withCtx((()=>[l.createElementVNode("div",f,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(I.value,((e,a)=>(l.openBlock(),l.createElementBlock("div",{key:a,onClick:l=>(e=>{_.value=[...e.params],R()})(e),class:"dm-menu-item",title:e.name},[l.createElementVNode("span",null,l.toDisplayString(e.name),1),l.createVNode(l.unref(t.DeleteOutlined),{class:"delIcon",onClick:l.withModifiers((l=>(e=>{c.deleteTemplate1(F.moduleKey,e.name),I.value=c.getTemplatesByModuleKey(F.moduleKey)})(e)),["stop"])},null,8,["onClick"])],8,g)))),128))])])),default:l.withCtx((()=>[l.createVNode(r,{class:"select-search-temp"},{default:l.withCtx((()=>[l.createTextVNode(l.toDisplayString(l.unref(a.$t)("multipleFilter.filterTemplate")),1)])),_:1})])),_:1},8,["get-popup-container"])):l.createCommentVNode("",!0)])):l.createCommentVNode("",!0),l.createElementVNode("div",y,[l.renderSlot(n.$slots,"extra-tools")])]),_.value.length?(l.openBlock(),l.createElementBlock("div",h,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(_.value,(e=>(l.openBlock(),l.createElementBlock("span",{key:e.field,class:"search-tags"},[l.createVNode(l.unref(t.CloseCircleOutlined),{style:{"margin-right":"5px"},onClick:l=>(e=>{let l=_.value.findIndex((l=>l.field===e));-1!=l&&_.value.splice(l,1),R()})(e.field)},null,8,["onClick"]),l.createElementVNode("span",k,l.toDisplayString(e.label)+":",1),l.createElementVNode("span",{class:"tag-value",title:e.tagText},l.toDisplayString(e.tagText),9,N)])))),128)),l.createElementVNode("div",b,[l.createElementVNode("span",{class:"clean-condition",onClick:L},l.toDisplayString(l.unref(a.$t)("multipleFilter.clear")),1),l.createVNode(T,{visible:M.value,"onUpdate:visible":i[2]||(i[2]=e=>M.value=e),trigger:"click","get-popup-container":e=>e.parentNode,placement:"bottom"},{content:l.withCtx((()=>[l.createElementVNode("div",V,[l.createElementVNode("div",x,[l.createVNode(E,{value:O.value,"onUpdate:value":i[1]||(i[1]=e=>O.value=e),placeholder:l.unref(a.$t)("multipleFilter.placeholder")},null,8,["value","placeholder"]),l.createVNode(r,{class:"save-template-btn",disabled:""===O.value,onClick:j},{default:l.withCtx((()=>[l.createTextVNode(l.toDisplayString(l.unref(a.$t)("multipleFilter.save")),1)])),_:1},8,["disabled"])]),l.createElementVNode("p",B,l.toDisplayString(l.unref(a.$t)("multipleFilter.tips")),1)])])),default:l.withCtx((()=>[l.createElementVNode("span",C,l.toDisplayString(l.unref(a.$t)("multipleFilter.save")),1)])),_:1},8,["visible","get-popup-container"])])])):l.createCommentVNode("",!0)])}}});module.exports=E;