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