@gct-paas/render-web 0.1.4-dev.12 → 0.1.4-dev.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.min.css +2 -0
- package/dist/loader.esm.min.js +1 -0
- package/es/Event/{EventsPc.mjs → Events.mjs} +1 -1
- package/es/_virtual/_plugin-vue_export-helper.mjs +8 -0
- package/es/components/card-view-render/card-view-render.css +71 -0
- package/es/components/card-view-render/card-view-render.d.ts +38 -0
- package/es/components/card-view-render/card-view-render.mjs +85 -0
- package/es/components/design-render/design-render.css +71 -0
- package/es/components/design-render/design-render.d.ts +52 -0
- package/es/components/design-render/design-render.mjs +126 -0
- package/es/components/design-render-item/design-render-item.d.ts +16 -0
- package/es/components/design-render-item/design-render-item.mjs +24 -0
- package/es/components/form-component/FieldCheckbox.d.ts +38 -0
- package/es/components/form-component/FieldCheckbox.mjs +71 -0
- package/es/components/form-component/FieldRadio.d.ts +38 -0
- package/es/components/form-component/FieldRadio.mjs +64 -0
- package/es/components/form-component/FieldSelect.d.ts +82 -0
- package/es/components/form-component/FieldSelect.mjs +173 -0
- package/es/components/form-component/field-emptyValue.d.ts +6 -0
- package/es/components/form-component/field-label/ref-card-label-render.vue.d.ts +23 -0
- package/es/components/form-component/field-label/ref-card-label-render.vue.mjs +6 -0
- package/es/components/form-component/field-label/ref-card-label-render.vue_vue_type_script_setup_true_lang.mjs +140 -0
- package/es/components/form-component/field-label/ref-card-label-render.vue_vue_type_style_index_0_lang.css +10 -0
- package/es/components/form-component/field-label/selectTag.vue.d.ts +10 -0
- package/es/components/form-component/field-label/selectTag.vue.mjs +5 -0
- package/es/components/form-component/field-label/selectTag.vue_vue_type_script_setup_true_lang.mjs +22 -0
- package/es/components/form-component/field-label/tag-label.vue.d.ts +36 -0
- package/es/components/form-component/field-label/tag-label.vue.mjs +7 -0
- package/es/components/form-component/field-label/tag-label.vue_vue_type_script_setup_true_name_TagLabel_lang.mjs +139 -0
- package/es/components/form-component/field-label/tag-label.vue_vue_type_style_index_0_scoped_0df66b09_lang.css +15 -0
- package/es/components/form-component/field-label/tag-layout.vue.d.ts +21 -0
- package/es/components/form-component/field-label/tag-layout.vue.mjs +7 -0
- package/es/components/form-component/field-label/tag-layout.vue_vue_type_script_setup_true_lang.mjs +16 -0
- package/es/components/form-component/field-label/tag-layout.vue_vue_type_style_index_0_scoped_85e6a8f5_lang.css +12 -0
- package/es/components/form-component/field-label/tag-span.vue.d.ts +21 -0
- package/es/components/form-component/field-label/tag-span.vue.mjs +7 -0
- package/es/components/form-component/field-label/tag-span.vue_vue_type_script_setup_true_lang.mjs +25 -0
- package/es/components/form-component/field-label/tag-span.vue_vue_type_style_index_0_scoped_6c8c4c7a_lang.css +31 -0
- package/es/components/form-component/field-readonly.vue.d.ts +21 -0
- package/es/components/form-component/field-readonly.vue.mjs +5 -0
- package/es/components/form-component/field-readonly.vue_vue_type_script_setup_true_lang.mjs +93 -0
- package/es/components/form-component/index.css +40 -0
- package/es/components/form-component/index.d.ts +8 -0
- package/es/components/form-component/index.mjs +7 -0
- package/es/components/index.d.ts +3 -0
- package/es/components/index.mjs +9 -0
- package/es/hooks/index.d.ts +1 -0
- package/es/hooks/index.mjs +1 -0
- package/es/hooks/refCardList.d.ts +23 -0
- package/es/hooks/refCardList.mjs +56 -0
- package/es/index.d.ts +3 -1
- package/es/index.mjs +13 -2
- package/es/loader.d.ts +1 -0
- package/package.json +9 -11
- package/dist/index.esm.min.js +0 -15
- /package/es/Event/{EventsPc.d.ts → Events.d.ts} +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.gct-design-render{background-color:#f7f8fa;width:100%;height:100%;position:relative;overflow:hidden auto}.gct-card-view-render{position:relative}.gct-card-view-render .gct-design-render{width:auto;height:auto}.tag[data-v-6c8c4c7a]{padding:4px 6px;line-height:1}.tag+.tag[data-v-6c8c4c7a]{margin-left:5px}.tag-radius[data-v-6c8c4c7a]{background:var(--v2ae1b805);border-radius:4px}.tag-linear_radius[data-v-6c8c4c7a]{border:1px solid var(--v2ae1b805);border-radius:4px}.tag-big_radius[data-v-6c8c4c7a]{background:var(--v2ae1b805);border-radius:100px}.tag-linear_big_radius[data-v-6c8c4c7a]{border:1px solid var(--v2ae1b805);border-radius:100px}.tag-dashed_radius[data-v-6c8c4c7a]{border:1px dashed var(--v2ae1b805);border-radius:4px}.tag-status[data-v-6c8c4c7a]{background:var(--v2ae1b805);border-radius:14px 4px 4px}.tag-label-disabled[data-v-85e6a8f5]{opacity:.5}.label-ellipsis[data-v-85e6a8f5]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-wrap[data-v-85e6a8f5]{word-break:break-all;white-space:wrap}.gct-ref-card-popover{overflow-y:auto;box-shadow:0 2px 6px #0000001a}.gct-ref-card-popover .ant-popover-inner-content{padding:0}.gct-ref-card-popover .ant-popover-arrow{display:none}.tag-label-disabled[data-v-0df66b09]{opacity:.5}.label-ellipsis[data-v-0df66b09]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-wrap[data-v-0df66b09]{word-break:break-all;white-space:wrap}.select-text[data-v-0df66b09]{min-width:16px}.field-radio-group .ant-radio-wrapper.ant-radio-wrapper-disabled .ant-radio-checked.ant-radio-disabled .ant-radio-inner{background-color:#fff;border:1px solid var(--ant-primary-3)!important}.field-radio-group .ant-radio-wrapper.ant-radio-wrapper-disabled .ant-radio-checked.ant-radio-disabled .ant-radio-inner:after{background:var(--ant-primary-3)}.field-radio-group--readonly .ant-radio-wrapper{pointer-events:none}.field-radio-group--readonly .ant-radio-wrapper .ant-radio-checked .ant-radio-inner{background-color:#fff;border:1px solid var(--ant-primary-4)!important}.field-radio-group--readonly .ant-radio-wrapper .ant-radio-checked .ant-radio-inner:after{background:var(--ant-primary-4)}.field-checkbox-group .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled .ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner{background-color:var(--ant-primary-3);border:1px solid var(--ant-primary-3)!important}.field-checkbox-group .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled .ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner:after{border-color:#fff}.field-checkbox-group .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled .ant-checkbox-checked.ant-checkbox-disabled:after{border:1px solid var(--ant-primary-3)!important}.field-checkbox-group--readonly .ant-checkbox-wrapper{pointer-events:none}.field-checkbox-group--readonly .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner{background-color:var(--ant-primary-4);border:1px solid var(--ant-primary-4)!important}.field-checkbox-group--readonly .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner:after{border-color:#fff}.field-checkbox-group--readonly .ant-checkbox-wrapper .ant-checkbox-checked:after{border:1px solid var(--ant-primary-4)!important}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DesignRenderViewPrefix as e,RenderNodeRegister as l,schemaToStyle as t,transformDataToDict as a,useDesignRenderController as o}from"@gct-paas/render";import{Fragment as r,computed as n,createBlock as i,createCommentVNode as d,createElementBlock as s,createElementVNode as u,createTextVNode as p,createVNode as c,defineComponent as v,h as y,inject as g,isVNode as m,mergeProps as b,nextTick as f,normalizeClass as x,normalizeStyle as h,openBlock as C,provide as S,reactive as w,ref as _,renderList as T,renderSlot as E,resolveComponent as N,toDisplayString as k,toRef as O,unref as P,useCssVars as B,watch as L,withCtx as I,withModifiers as W}from"vue";import{CARD_TRIGGER_ENUM as R,EntityModelCategoryEnum as M,FIELD_TYPE as F,FormComponents as K,TagTypeEnum as A,calcStyle as V,gctMemoizeAsync as j,useNamespace as D}from"@gct-paas/core";import{DesignNodeMode as q}from"@gct-paas/schema";import{Avatar as U,Checkbox as $,CheckboxGroup as z,Radio as G,RadioGroup as H,Select as J}from"ant-design-vue";import{isString as Y,pick as Q}from"lodash-es";import{IconNext as X,transformUrl as Z}from"@gct-paas/core-web";var ee=Symbol("PAGE_EVENT"),le=e=>S(ee,e),te=()=>{const e=g(ee);if(!e)throw new Error("PAGE_EVENT not provided");return e},ae=/* @__PURE__ */v({name:"DesignRenderItem",props:{model:{type:Object,required:!0}},setup:e=>({ns:D("design-render-item"),style:V(e.model.data)}),render(){var e,l;return c("div",{class:this.ns.b(),style:this.style},[null===(e=(l=this.$slots).default)||void 0===e?void 0:e.call(l)])}}),oe=/* @__PURE__ */v({name:"DesignRender",props:{model:{type:Object,required:!0},prefix:{type:String,default:""},preview:{type:Boolean,default:!1},context:{type:Object,default:()=>({})}},setup(e){const t=D("design-render"),a=o();a.prefix=e.prefix,a.preview=e.preview,a.setNodes(e.model.nodes),a.setTree(e.model.tree),L(()=>e.context,()=>{a.state.context=e.context},{immediate:!0});const r=n(()=>e.model.pageNode?V(e.model.pageNode.data):{}),i=a.getNodes();return{ns:t,c:a,style:r,rootNodes:i,renderNode:function t(o,r){const n=l.get(o.type,a.prefix);if(!n)return console.warn(`未找到节点类型为${o.type}的渲染器`),null;let i=null;return i=n.mode===q.CONTAINER?function(o,r){const n=l.get(o.type,a.prefix),i=a.getNodes(o.id),d=a.getController(o.id);return y(N(n.component),{key:o.id,c:d,model:o,parent:r,preview:e.preview,context:a.state.context,pageModel:e.model.pageNode},i.map(e=>t(e,o)))}(o,r):n.mode===q.ITEM?function(t,o){const r=l.get(t.type,a.prefix),n=a.getController(t.id);return y(N(r.component),{key:t.id,c:n,model:t,parent:o,preview:e.preview,context:a.state.context,pageModel:e.model.pageNode})}(o,r):c("div",null,[p("未支持的适配器模式["),n.mode,p("]")]),c(ae,{model:o},{default:()=>i})},renderPageNode:function(t){if(!e.model.pageNode)return t;const o=l.get(e.model.pageNode.type,a.prefix);if(!o)return console.warn(`未找到页面节点类型为${e.model.pageNode.type}的渲染器`),t;const r=a.getController(e.model.pageNode.id);return y(N(o.component),{key:e.model.pageNode.id,c:r,model:e.model.pageNode,parent:void 0,preview:e.preview,context:a.state.context},t)}}},render(){return c("div",{class:this.ns.b(),style:this.style},[this.renderPageNode(this.rootNodes.map(e=>this.renderNode(e)))])}}),re=j(_api.apaas.commonInfoCard.getGetById),ne=/* @__PURE__ */v({name:"CardViewRender",props:{id:{type:String,required:!0},modelKey:{type:String,required:!0},fetch:{type:Function},preview:{type:Boolean,default:!1}},emits:["mounted"],setup(l,{emit:t}){const a=D("card-view-render"),o=_(!1),r=_(!1),i=_(null),d=_({}),s=n(()=>{var e;return i.value?{width:(null===(e=i.value.pageNode)||void 0===e?void 0:e.data.width)?`${i.value.pageNode.data.width}px`:""}:{}});return async function(){if(l.id){try{o.value=!0,await async function(){const e=await re({id:l.id,modelKey:l.modelKey,type:"CARD"});e&&e.designerJson&&(i.value=JSON.parse(decodeURIComponent(e.designerJson)))}(),!0!==l.preview&&l.fetch&&(d.value=await l.fetch()||{})}catch(e){console.error(e)}finally{o.value=!1}r.value=!0,await f(),setTimeout(()=>{var e;t("mounted",null===(e=i.value)||void 0===e||null===(e=e.pageNode)||void 0===e?void 0:e.data)})}}(),()=>c("div",{class:a.b(),style:s.value},[o.value?c(N("a-spin"),null,null):null,i.value&&r.value?c(oe,{context:{data:d.value,id:l.id,modelKey:l.modelKey},model:{nodes:i.value.nodes,pageNode:i.value.pageNode,tree:i.value.tree,type:e.CARD_VIEW},prefix:e.CARD_VIEW,preview:l.preview},null):null])}}),ie=(e,l)=>{const t=e.__vccOpts||e;for(const[a,o]of l)t[a]=o;return t},de=/* @__PURE__ */ie(/* @__PURE__ */v({__name:"tag-span",props:{tagStyle:{}},setup(e){B(e=>({v2ae1b805:a.value}));const l=e,t=O(()=>{var e;return(null===(e=l.tagStyle)||void 0===e?void 0:e.tagType)||A.RADIUS}),a=O(()=>{var e;return(null===(e=l.tagStyle)||void 0===e?void 0:e.color)||"#f0f0f0"}),o=O(()=>`tag-${t.value}`);return(e,l)=>(C(),s("span",{class:x(["tag cursor-pointer",o.value])},[E(e.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-6c8c4c7a"]]),se=/* @__PURE__ */ie(/* @__PURE__ */v({__name:"tag-layout",props:{labelLayout:{},disabled:{type:Boolean}},setup:e=>(l,t)=>{var a,o,r,n;return C(),s("span",{class:x([e.disabled?"tag-label-disabled":null,!(null===(a=e.labelLayout)||void 0===a?void 0:a.hasLabelWidth)||"left"!==(null===(o=e.labelLayout)||void 0===o?void 0:o.layout.label)&&"horizontal"!=(null===(r=e.labelLayout)||void 0===r?void 0:r.layout)?"":"ellipsis"==(null===(n=e.labelLayout)||void 0===n?void 0:n.overLabelDisplay)?"label-ellipsis":"label-wrap"])},[E(l.$slots,"default",{},void 0,!0)],2)}}),[["__scopeId","data-v-85e6a8f5"]]),ue=["onMouseup"],pe={key:1},ce=/* @__PURE__ */v({__name:"ref-card-label-render",props:{tagWidgetStyle:{},disabled:{type:Boolean},values:{},label:{},showTagStyle:{type:Boolean,default:!0},trigger:{},getCardData:{},modelKey:{},refCardId:{}},setup(e){const l=e,a=l.trigger===R.HOVER?"primary-gct-hover":"primary-gct",o=g("labelLayout",{}),d=w({}),p=n(()=>{var e;const t=("string"==typeof l.label?(l.label??"").split(","):l.label)??[];return(null===(e=l.values)||void 0===e?void 0:e.filter((e,l)=>t[l]).map((e,l)=>({value:e,label:t[l]})))??[]}),v=O(()=>{var e;const a=null===(e=l.tagWidgetStyle)||void 0===e?void 0:e.contentFont;return a?t(a):{}}),y=O(()=>{var e;return(null===(e=v.value)||void 0===e?void 0:e.color)?v.value:{wordBreak:"break-all",...v.value}}),m=async(e,l)=>{d[l.value]=e};function b(e){m(!0,e)}function f(e){return l.getCardData.bind(null,e)}return(l,t)=>{const n=N("a-popover");return p.value.length?(C(),i(se,{key:0,disabled:!!e.disabled,"label-layout":P(o)},{default:I(()=>{var l;return[e.showTagStyle&&(null===(l=e.tagWidgetStyle)||void 0===l?void 0:l.tagStyleOpen)?(C(!0),s(r,{key:0},T(p.value,(l,t)=>(C(),i(n,{key:t,trigger:e.trigger,visible:!!d[l.value],placement:"bottomLeft",color:"#fff","overlay-class-name":"gct-ref-card-popover min-w100px min-h30px max-h96vh",onVisibleChange:e=>m(e,l)},{content:I(()=>[c(P(ne),{id:e.refCardId,"model-key":e.modelKey,fetch:f(l.value)},null,8,["id","model-key","fetch"])]),default:I(()=>[c(de,{"tag-style":e.tagWidgetStyle.tagStyle,onMouseup:e=>b(l)},{default:I(()=>[u("span",{class:x(["select-text cursor-pointer",P(a)]),style:h(y.value)},k(l.label),7)]),_:2},1032,["tag-style","onMouseup"])]),_:2},1032,["trigger","visible","onVisibleChange"]))),128)):(C(!0),s(r,{key:1},T(p.value,(l,o)=>(C(),s(r,{key:o},[u("span",null,k(o?",":""),1),c(n,{"overlay-class-name":"gct-ref-card-popover min-w100px min-h30px max-h96vh",visible:!!d[l.value],trigger:e.trigger,color:"#fff",placement:"bottomLeft",onVisibleChange:e=>m(e,l)},{content:I(()=>[c(P(ne),{id:e.refCardId,"model-key":e.modelKey,fetch:f(l.value)},null,8,["id","model-key","fetch"])]),default:I(()=>[u("span",{class:x(["select-text cursor-pointer",P(a)]),style:h(y.value),onClick:t[0]||(t[0]=W(()=>{},["stop"])),onMouseup:e=>b(l)},k(l.label),47,ue)]),_:2},1032,["visible","trigger","onVisibleChange"])],64))),128))]}),_:1},8,["disabled","label-layout"])):(C(),s("span",pe," "))}}}),ve={class:"select-text"},ye={class:"select-text"},ge={key:0},me=/* @__PURE__ */ie(/* @__PURE__ */v({__name:"tag-label",props:{tagWidgetStyle:{},type:{},disabled:{type:Boolean},label:{},isDesign:{type:Boolean},closable:{type:Boolean},showTagStyle:{type:Boolean,default:!0},avatar:{},iconExtraProps:{},iconProps:{}},emits:["on-close"],setup(e){const l=e,a=_gct.platformStore.themeSetting,o=g("labelLayout",{}),n=O(()=>{var e;let t=l.label??"";return l.showTagStyle&&(null===(e=l.tagWidgetStyle)||void 0===e?void 0:e.tagStyleOpen)||l.type===F.ENUM_MULTI||l.type===F.ENUM?t?Y(t)?t.split(","):t:[]:t instanceof Array?t.join(","):t+""}),v=O(()=>{var e;const a=null===(e=l.tagWidgetStyle)||void 0===e?void 0:e.contentFont;return a?t(a):{}}),m=(e="")=>{var t,a;const o=(null===(t=l.iconExtraProps)||void 0===t?void 0:t[e])||{},r={};return(null==o?void 0:o.textColor)&&Object.assign(r,{color:null==o?void 0:o.textColor}),(null===(a=v.value)||void 0===a?void 0:a.color)?v.value:{wordBreak:"break-all",...v.value,...r}},b={render:({$attrs:e})=>{if(e.labelName){var t;const o=(null===(t=l.iconExtraProps)||void 0===t?void 0:t[e.labelName])||l.iconProps||{};if(!(null==o?void 0:o.icon))return;return y(X,{size:16,value:null==o?void 0:o.icon,color:(null==o?void 0:o.iconColor)||a.themeColor,style:"vertical-align: text-bottom; margin-right: 3px"})}}};return(t,a)=>{var v;return e.showTagStyle&&(null===(v=e.tagWidgetStyle)||void 0===v?void 0:v.tagStyleOpen)?(C(),i(se,{key:0,disabled:!!e.disabled,"label-layout":P(o)},{default:I(()=>[(C(!0),s(r,null,T(n.value,(o,r)=>(C(),i(de,{key:r,"tag-style":e.tagWidgetStyle.tagStyle,style:h(m(o))},{default:I(()=>[l.avatar?(C(),i(P(U),{key:0,src:P(Z)(l.avatar),size:20,style:{"margin-top":"-5px"},class:"mr4px"},null,8,["src"])):d("",!0),c(b,{"label-name":o},null,8,["label-name"]),u("span",ve,k(o),1),e.closable?(C(),i(P(X),{key:1,size:15,value:"icon-park:close-small",style:{verticalAlign:"text-bottom","--color":"rgba(0,0,0,.45)",lineHeight:"1",marginLeft:"2px"},onClick:a[0]||(a[0]=W(e=>t.$emit("on-close"),["prevent","stop"]))})):d("",!0)]),_:2},1032,["tag-style","style"]))),128))]),_:1},8,["disabled","label-layout"])):e.type===P(F).ENUM_MULTI||e.type===P(F).ENUM?(C(),i(se,{key:1,disabled:!!e.disabled,"label-layout":P(o)},{default:I(()=>[(C(!0),s(r,null,T(n.value,(l,t)=>{var a;return C(),s("span",{key:t,style:h(m(l)),class:"mr-5px"},[c(b,{"label-name":l},null,8,["label-name"]),u("span",ye,k(l)+k(!(null===(a=e.tagWidgetStyle)||void 0===a?void 0:a.tagStyleOpen)&&t<n.value.length-1?",":""),1)],4)}),128)),n.value.length?d("",!0):(C(),s("span",ge," "))]),_:1},8,["disabled","label-layout"])):(C(),i(se,{key:2,style:h(m(n.value)),disabled:!!e.disabled,"label-layout":P(o),class:"select-text leading-none ell"},{default:I(()=>[p(k(n.value||" "),1)]),_:1},8,["style","disabled","label-layout"]))}}}),[["__scopeId","data-v-0df66b09"]]);function be(e){const{fieldType:l,refCard:t,refCardId:a,readonly:o}=e.widget.props;(l===F.REF||l===F.REF_MULTI||l===F.RDO_REF)&&t&&a&&o&&S("refCardValues",{refCardValues:O(()=>{const l=e.modelValue??[];return l instanceof Array?l:l.split(",")}),widget:e.widget})}function fe(){var e;const l=g("refCardValues");if(!l)return{};const{fieldType:t,bindModelKey:a,refCardId:o,cardTrigger:r}=(null==l||null===(e=l.widget)||void 0===e?void 0:e.props)||{};return{refCardValues:null==l?void 0:l.refCardValues,trigger:r,getCardData:j(xe,{fieldType:t,modelKey:a}),modelKey:a,refCardId:o}}async function xe({fieldType:e,modelKey:l},t){if(e===F.RDO_REF){const{data:e={},dict:o={}}=await _api.apaas.modelComprehensive.postBizServiceGeneralModelCategoryModelKeyBsKey({modelKey:l,bsKey:"rdoGetVersionByRefId",modelCategory:M.ENTITY},{foreignFields:[]},{includeDeleted:1,refId:t});return a(e,o)}{const{data:e={},dict:o={}}=await _api.apaas.modelComprehensive.postBizServiceGeneralModelCategoryModelKeyBsKey({modelKey:l,bsKey:"getOne",modelCategory:M.ENTITY},{query:{"id_.eq":t},foreignFields:[]},{includeDeleted:1});return a(e,o)}}var he={key:0,class:"w100% ell"},Ce={key:0,class:"gct-custom-tag ml8px"},Se=/* @__PURE__ */v({__name:"field-readonly",props:{isTooltip:{type:Boolean},label:{},type:{},modelValue:{},tagWidgetStyle:{},disabled:{type:Boolean},iconExtraProps:{}},setup(e){const l=e,t=_(!1),a=n(()=>Array.isArray(l.label)?l.label.join(","):l.label),{refCardValues:o,trigger:r,getCardData:u,modelKey:v,refCardId:g}=fe(),m=n(()=>{var e;return(null==o||null===(e=o.value)||void 0===e?void 0:e.length)?y(ce,{values:o.value,trigger:r,getCardData:u,modelKey:v,refCardId:g}):me});function f(e){var a;if(!l.isTooltip)return;const o=null===(a=e.target)||void 0===a?void 0:a.parentNode;console.log(),o.scrollWidth>o.clientWidth&&(t.value=!0)}function x(){t.value=!1}return(o,r)=>{const n=N("a-tooltip");return C(),i(n,{placement:"topLeft",visible:t.value},{title:I(()=>[p(k(a.value),1)]),default:I(()=>{var t;return[l.type===P(F).RDO_REF?(C(),s("div",he,[c(P(m),b(o.$attrs,{label:e.label,"tag-widget-style":l.tagWidgetStyle,disabled:l.disabled,"icon-extra-props":l.iconExtraProps,onMouseenter:f,onMouseleave:x}),null,16,["label","tag-widget-style","disabled","icon-extra-props"]),l.type===P(F).RDO_REF&&l.modelValue&&!(null===(t=l.modelValue)||void 0===t?void 0:t.includes(":"))?(C(),s("span",Ce," 默认 ")):d("",!0)])):(C(),i(P(m),b({key:1},o.$attrs,{label:e.label,"tag-widget-style":l.tagWidgetStyle,disabled:l.disabled,"icon-extra-props":l.iconExtraProps,onMouseenter:f,onMouseleave:x}),null,16,["label","tag-widget-style","disabled","icon-extra-props"]))]}),_:1},8,["visible"])}}}),we=/* @__PURE__ */v({__name:"selectTag",props:{tagWidgetStyle:{}},setup(e){const l=e,t=O(()=>{return l.tagWidgetStyle.tagStyleOpen?l.tagWidgetStyle:{tagStyleOpen:!0,contentFont:null===(e=l.tagWidgetStyle)||void 0===e?void 0:e.contentFont};var e});return(e,l)=>(C(),i(me,{"tag-widget-style":t.value},null,8,["tag-widget-style"]))}}),_e=/* @__PURE__ */v({name:"FieldSelect",props:{design:Boolean,disabled:Boolean,readonly:Boolean,selectExtraProps:Object,fieldType:{type:String,required:!0},type:{type:String,required:!0},tagStyle:{type:Object,required:!0},options:Array,value:[String,Number],maxTagCount:{type:[Number,String],default:5},maxTagTextLength:{type:Number,default:6},selectOptionLabel:{type:String}},setup(e,{emit:l}){const t=n({get:()=>e.value,set(e){l("update:value",e)}}),a=(l,{name:t,iconExtraProps:a,otherParams:o={}})=>y(l,{tagWidgetStyle:e.tagStyle,type:e.fieldType,label:t,disabled:e.disabled,iconExtraProps:a,...o}),o=n(()=>(e.options??[]).map(l=>{var t;const{iconColor:o,icon:r,textColor:n}=l._item||{};return{...l,[(null===(t=e.selectExtraProps)||void 0===t?void 0:t.optionLabelProp)||"titleLabel"]:a(me,{name:l.label,iconExtraProps:{[l.label]:{icon:r,iconColor:o,textColor:n}}})}}));function r(e,l){var t;const{_DICT:a={}}=e,o=e[l];return(null===(t=a[l])||void 0===t||null===(t=t[o])||void 0===t?void 0:t.join(","))??o??e.id_}const i=n(()=>{if(e.readonly){var l;const a=(null===(l=o.value)||void 0===l?void 0:l.filter(l=>{var a;if("multiple"===(null===(a=e.selectExtraProps)||void 0===a?void 0:a.mode))return Array.isArray(t.value)&&t.value.includes(l.value)}))??[],r=Object.fromEntries((null==a?void 0:a.map(e=>[e.label,Q((null==e?void 0:e._item)||{},["iconColor","icon","textColor"])]))??[]);return{labels:a.map(e=>e.label),icons:r}}return{}}),d={option:l=>{const{label:t,_item:o={}}=l;return e.type===K.Userpicker?c("div",{class:"flex items-center"},[c(U,{size:30,style:"margin: 0 8px;min-width:32px",src:Z(o.avatar)},null),c("div",{style:"width:calc(100% - 35px)"},[c("div",{class:" w100% ell",title:t},[t]),c("div",{class:"text-[#8F8F8F] text-[12px] mt2px"},[o.masterOrgName])])]):a(me,{name:e.selectOptionLabel?r(o,e.selectOptionLabel):t,iconExtraProps:{[t]:Q(o,["iconColor","icon","textColor"])},otherParams:{showTagStyle:!1}})}},s=l=>{var t;const{label:a,option:o,closable:r,onClose:n}=l,{_item:i={}}=o||{};return(({name:l,title:t,iconExtraProps:a,avatar:o,otherParams:r={}})=>c(we,b({tagWidgetStyle:e.tagStyle,type:e.fieldType,label:l,avatar:o,title:(null==t?void 0:t.length)>e.maxTagTextLength?t:null,disabled:e.disabled,iconExtraProps:a},r),null))({name:a,title:null==o?void 0:o.label,avatar:null==o||null===(t=o._item)||void 0===t?void 0:t.avatar,iconExtraProps:{[a]:Q(i,["iconColor","icon","textColor"])},otherParams:{closable:r,"onOn-close":n,style:"margin-right: 4px"}})};return()=>{var l,r,n,u;return e.readonly?a(Se,{name:null===(l=i.value)||void 0===l?void 0:l.labels,iconExtraProps:null===(r=i.value)||void 0===r?void 0:r.icons}):c(J,b({class:["field-select","w100%"],value:t.value,"onUpdate:value":e=>t.value=e,options:o.value,disabled:e.disabled,optionLabelProp:"titleLabel",tagRender:s,showArrow:!0,maxTagCount:e.maxTagCount,maxTagTextLength:e.maxTagTextLength,dropdownMatchSelectWidth:180,dropdownClassName:"multiple"===(null===(n=e.selectExtraProps)||void 0===n?void 0:n.mode)?"gct-project-select-dropdown gct-project-select-multiple vxe-table--ignore-clear":"gct-project-select-dropdown vxe-table--ignore-clear"},e.selectExtraProps),(null===(u=e.selectExtraProps)||void 0===u?void 0:u.optionNoStyle)?null:d)}}}),Te=/* @__PURE__ */v({name:"FieldRadio",props:{design:Boolean,disabled:Boolean,readonly:Boolean,fieldType:{type:Object,required:!0},tagStyle:{type:Object,required:!0},options:Array,value:[String,Number]},setup(e,{emit:l}){const t=n({get:()=>e.value,set(e){l("update:value",e)}});return()=>{let l;return c(H,{value:t.value,"onUpdate:value":e=>t.value=e,disabled:e.disabled,class:["field-radio-group",e.readonly?"field-radio-group--readonly":""]},"function"==typeof(a=l=(e.options??[]).map(l=>{const t=l,{icon:a,iconColor:o,textColor:r}=(null==t?void 0:t._item)||{};return c(G,{key:t.value,value:t.value},{default:()=>[c(Se,{tagWidgetStyle:e.tagStyle,type:e.fieldType,label:t.label,disabled:e.disabled,iconExtraProps:{[t.label]:{icon:a,iconColor:o,textColor:r}}},null)]})}))||"[object Object]"===Object.prototype.toString.call(a)&&!m(a)?l:{default:()=>[l]});var a}}}),Ee=/* @__PURE__ */v({name:"FieldCheckbox",props:{design:Boolean,disabled:Boolean,readonly:Boolean,fieldType:{type:Object,required:!0},tagStyle:{type:Object,required:!0},options:Array,value:[String,Number]},setup(e,{emit:l}){const t=e.fieldType===F.BOOLEAN,a=n({get:()=>t?[e.value]:Array.isArray(e.value)?e.value:e.value?e.value.split(","):void 0,set(e){if(t){const t=null==e?void 0:e[0];l("update:value",null==t||"boolean"!=typeof t?Boolean(t):!!t)}else l("update:value",e)}}),o=n(()=>t?(e.options??[]).filter(e=>e.value):e.options??[]);return()=>c(z,{value:a.value,"onUpdate:value":e=>a.value=e,disabled:e.disabled,class:["field-checkbox-group",e.readonly?"field-checkbox-group--readonly":""]},{default:()=>{var l;return[null===(l=o.value)||void 0===l?void 0:l.map(l=>{const t=l,{icon:a,iconColor:o,textColor:r}=(null==t?void 0:t._item)||{};return c($,{key:t.value,value:t.value},{default:()=>[c(Se,{tagWidgetStyle:e.tagStyle,type:e.fieldType,label:t.label,disabled:e.disabled,iconExtraProps:{[t.label]:{icon:a,iconColor:o,textColor:r}}},null)]})})]}})}});function Ne(){console.log("Hello World!")}export{oe as DesignRender,Ee as FieldCheckbox,Te as FieldRadio,_e as FieldSelect,Se as fieldReadonly,xe as getDataByModelType,ce as refCardLabelRender,Ne as run,we as selectTag,le as setupPageEvent,me as taglabel,fe as useGetRefCard,te as usePageEvent,be as useRefCardData};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region \0plugin-vue:export-helper
|
|
2
|
+
var _plugin_vue_export_helper_default = (sfc, props) => {
|
|
3
|
+
const target = sfc.__vccOpts || sfc;
|
|
4
|
+
for (const [key, val] of props) target[key] = val;
|
|
5
|
+
return target;
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { _plugin_vue_export_helper_default as default };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
3
|
+
/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
|
|
4
|
+
/**
|
|
5
|
+
* 定义 Block 块
|
|
6
|
+
* @param {String} $block - Block 块名称
|
|
7
|
+
* @example
|
|
8
|
+
* @include b('button') {
|
|
9
|
+
* padding: 10px;
|
|
10
|
+
* }
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* 定义 Element 元素
|
|
14
|
+
* @param {String|List} $element - Element 元素名称,支持单个或多个
|
|
15
|
+
* @example
|
|
16
|
+
* @include b('button') {
|
|
17
|
+
* @include e('text') {
|
|
18
|
+
* color: #000;
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* // 或传入多个元素
|
|
22
|
+
* @include b('button') {
|
|
23
|
+
* @include e(('text', 'icon')) {
|
|
24
|
+
* margin: 5px;
|
|
25
|
+
* }
|
|
26
|
+
* }
|
|
27
|
+
*/
|
|
28
|
+
/**
|
|
29
|
+
* 定义 Modifier 修饰符
|
|
30
|
+
* @param {String|List} $modifier - Modifier 修饰符名称,支持单个或多个
|
|
31
|
+
* @example
|
|
32
|
+
* @include b('button') {
|
|
33
|
+
* @include m('primary') {
|
|
34
|
+
* background: blue;
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
* // 或传入多个修饰符
|
|
38
|
+
* @include b('button') {
|
|
39
|
+
* @include m(('primary', 'large')) {
|
|
40
|
+
* background: blue;
|
|
41
|
+
* font-size: 16px;
|
|
42
|
+
* }
|
|
43
|
+
* }
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* 定义状态选择器
|
|
47
|
+
* @param {String} $state - 状态名称
|
|
48
|
+
* @example
|
|
49
|
+
* @include b('button') {
|
|
50
|
+
* @include when('disabled') {
|
|
51
|
+
* opacity: 0.5;
|
|
52
|
+
* }
|
|
53
|
+
* }
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* 深色主题样式
|
|
57
|
+
* @param {String} $block - Block 块名称
|
|
58
|
+
* @example
|
|
59
|
+
* @include dark('button') {
|
|
60
|
+
* background: #333;
|
|
61
|
+
* color: #fff;
|
|
62
|
+
* }
|
|
63
|
+
*/
|
|
64
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
65
|
+
.gct-card-view-render {
|
|
66
|
+
position: relative;
|
|
67
|
+
}
|
|
68
|
+
.gct-card-view-render .gct-design-render {
|
|
69
|
+
width: auto;
|
|
70
|
+
height: auto;
|
|
71
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
export declare const CardViewRender: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
3
|
+
id: {
|
|
4
|
+
type: StringConstructor;
|
|
5
|
+
required: true;
|
|
6
|
+
};
|
|
7
|
+
modelKey: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
required: true;
|
|
10
|
+
};
|
|
11
|
+
fetch: {
|
|
12
|
+
type: PropType<() => Promise<IObject>>;
|
|
13
|
+
};
|
|
14
|
+
preview: {
|
|
15
|
+
type: BooleanConstructor;
|
|
16
|
+
default: boolean;
|
|
17
|
+
};
|
|
18
|
+
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "mounted"[], "mounted", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
19
|
+
id: {
|
|
20
|
+
type: StringConstructor;
|
|
21
|
+
required: true;
|
|
22
|
+
};
|
|
23
|
+
modelKey: {
|
|
24
|
+
type: StringConstructor;
|
|
25
|
+
required: true;
|
|
26
|
+
};
|
|
27
|
+
fetch: {
|
|
28
|
+
type: PropType<() => Promise<IObject>>;
|
|
29
|
+
};
|
|
30
|
+
preview: {
|
|
31
|
+
type: BooleanConstructor;
|
|
32
|
+
default: boolean;
|
|
33
|
+
};
|
|
34
|
+
}>> & Readonly<{
|
|
35
|
+
onMounted?: ((...args: any[]) => any) | undefined;
|
|
36
|
+
}>, {
|
|
37
|
+
preview: boolean;
|
|
38
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { DesignRender } from "../design-render/design-render.mjs";
|
|
2
|
+
import './card-view-render.css';/* empty css */
|
|
3
|
+
import { DesignRenderViewPrefix } from "@gct-paas/render";
|
|
4
|
+
import { computed, createVNode, defineComponent, nextTick, ref, resolveComponent } from "vue";
|
|
5
|
+
import { gctMemoizeAsync, useNamespace } from "@gct-paas/core";
|
|
6
|
+
//#region src/components/card-view-render/card-view-render.tsx
|
|
7
|
+
var loadModelAsync = gctMemoizeAsync(_api.apaas.commonInfoCard.getGetById);
|
|
8
|
+
var CardViewRender = /* @__PURE__ */ defineComponent({
|
|
9
|
+
name: "CardViewRender",
|
|
10
|
+
props: {
|
|
11
|
+
id: {
|
|
12
|
+
type: String,
|
|
13
|
+
required: true
|
|
14
|
+
},
|
|
15
|
+
modelKey: {
|
|
16
|
+
type: String,
|
|
17
|
+
required: true
|
|
18
|
+
},
|
|
19
|
+
fetch: { type: Function },
|
|
20
|
+
preview: {
|
|
21
|
+
type: Boolean,
|
|
22
|
+
default: false
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
emits: ["mounted"],
|
|
26
|
+
setup(props, { emit }) {
|
|
27
|
+
const ns = useNamespace("card-view-render");
|
|
28
|
+
const isLoading = ref(false);
|
|
29
|
+
const isLoaded = ref(false);
|
|
30
|
+
const json = ref(null);
|
|
31
|
+
const data = ref({});
|
|
32
|
+
const style = computed(() => {
|
|
33
|
+
if (json.value) return { width: json.value.pageNode?.data.width ? `${json.value.pageNode.data.width}px` : "" };
|
|
34
|
+
return {};
|
|
35
|
+
});
|
|
36
|
+
async function loadModel() {
|
|
37
|
+
const res = await loadModelAsync({
|
|
38
|
+
id: props.id,
|
|
39
|
+
modelKey: props.modelKey,
|
|
40
|
+
type: "CARD"
|
|
41
|
+
});
|
|
42
|
+
if (res && res.designerJson) json.value = JSON.parse(decodeURIComponent(res.designerJson));
|
|
43
|
+
}
|
|
44
|
+
async function onInit() {
|
|
45
|
+
if (!props.id) return;
|
|
46
|
+
try {
|
|
47
|
+
isLoading.value = true;
|
|
48
|
+
await loadModel();
|
|
49
|
+
if (props.preview !== true && props.fetch) data.value = await props.fetch() || {};
|
|
50
|
+
} catch (error) {
|
|
51
|
+
console.error(error);
|
|
52
|
+
} finally {
|
|
53
|
+
isLoading.value = false;
|
|
54
|
+
}
|
|
55
|
+
isLoaded.value = true;
|
|
56
|
+
await nextTick();
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
emit("mounted", json.value?.pageNode?.data);
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
onInit();
|
|
62
|
+
return () => {
|
|
63
|
+
return createVNode("div", {
|
|
64
|
+
"class": ns.b(),
|
|
65
|
+
"style": style.value
|
|
66
|
+
}, [isLoading.value ? createVNode(resolveComponent("a-spin"), null, null) : null, !json.value || !isLoaded.value ? null : createVNode(DesignRender, {
|
|
67
|
+
"context": {
|
|
68
|
+
data: data.value,
|
|
69
|
+
id: props.id,
|
|
70
|
+
modelKey: props.modelKey
|
|
71
|
+
},
|
|
72
|
+
"model": {
|
|
73
|
+
nodes: json.value.nodes,
|
|
74
|
+
pageNode: json.value.pageNode,
|
|
75
|
+
tree: json.value.tree,
|
|
76
|
+
type: DesignRenderViewPrefix.CARD_VIEW
|
|
77
|
+
},
|
|
78
|
+
"prefix": DesignRenderViewPrefix.CARD_VIEW,
|
|
79
|
+
"preview": props.preview
|
|
80
|
+
}, null)]);
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
//#endregion
|
|
85
|
+
export { CardViewRender };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
3
|
+
/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
|
|
4
|
+
/**
|
|
5
|
+
* 定义 Block 块
|
|
6
|
+
* @param {String} $block - Block 块名称
|
|
7
|
+
* @example
|
|
8
|
+
* @include b('button') {
|
|
9
|
+
* padding: 10px;
|
|
10
|
+
* }
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* 定义 Element 元素
|
|
14
|
+
* @param {String|List} $element - Element 元素名称,支持单个或多个
|
|
15
|
+
* @example
|
|
16
|
+
* @include b('button') {
|
|
17
|
+
* @include e('text') {
|
|
18
|
+
* color: #000;
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* // 或传入多个元素
|
|
22
|
+
* @include b('button') {
|
|
23
|
+
* @include e(('text', 'icon')) {
|
|
24
|
+
* margin: 5px;
|
|
25
|
+
* }
|
|
26
|
+
* }
|
|
27
|
+
*/
|
|
28
|
+
/**
|
|
29
|
+
* 定义 Modifier 修饰符
|
|
30
|
+
* @param {String|List} $modifier - Modifier 修饰符名称,支持单个或多个
|
|
31
|
+
* @example
|
|
32
|
+
* @include b('button') {
|
|
33
|
+
* @include m('primary') {
|
|
34
|
+
* background: blue;
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
* // 或传入多个修饰符
|
|
38
|
+
* @include b('button') {
|
|
39
|
+
* @include m(('primary', 'large')) {
|
|
40
|
+
* background: blue;
|
|
41
|
+
* font-size: 16px;
|
|
42
|
+
* }
|
|
43
|
+
* }
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* 定义状态选择器
|
|
47
|
+
* @param {String} $state - 状态名称
|
|
48
|
+
* @example
|
|
49
|
+
* @include b('button') {
|
|
50
|
+
* @include when('disabled') {
|
|
51
|
+
* opacity: 0.5;
|
|
52
|
+
* }
|
|
53
|
+
* }
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* 深色主题样式
|
|
57
|
+
* @param {String} $block - Block 块名称
|
|
58
|
+
* @example
|
|
59
|
+
* @include dark('button') {
|
|
60
|
+
* background: #333;
|
|
61
|
+
* color: #fff;
|
|
62
|
+
* }
|
|
63
|
+
*/
|
|
64
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
65
|
+
.gct-design-render {
|
|
66
|
+
position: relative;
|
|
67
|
+
width: 100%;
|
|
68
|
+
height: 100%;
|
|
69
|
+
overflow: hidden auto;
|
|
70
|
+
background-color: #f7f8fa;
|
|
71
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { PropType, VNode } from 'vue';
|
|
2
|
+
import { IDesignData, IDesignNode } from '@gct-paas/schema';
|
|
3
|
+
export declare const DesignRender: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
4
|
+
model: {
|
|
5
|
+
type: PropType<IDesignData>;
|
|
6
|
+
required: true;
|
|
7
|
+
};
|
|
8
|
+
prefix: {
|
|
9
|
+
type: StringConstructor;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
preview: {
|
|
13
|
+
type: BooleanConstructor;
|
|
14
|
+
default: boolean;
|
|
15
|
+
};
|
|
16
|
+
context: {
|
|
17
|
+
type: PropType<IContext>;
|
|
18
|
+
default: () => {};
|
|
19
|
+
};
|
|
20
|
+
}>, {
|
|
21
|
+
ns: import('@gct-paas/core').Namespace;
|
|
22
|
+
c: import('node_modules/@gct-paas/render/es/interface').IDesignRenderController;
|
|
23
|
+
style: import('vue').ComputedRef<IObject>;
|
|
24
|
+
rootNodes: IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
|
|
25
|
+
renderNode: (node: IDesignNode, parent?: IDesignNode) => import("vue/jsx-runtime").JSX.Element | null;
|
|
26
|
+
renderPageNode: (child: VNode[]) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
27
|
+
[key: string]: any;
|
|
28
|
+
}> | VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
29
|
+
[key: string]: any;
|
|
30
|
+
}>[];
|
|
31
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
32
|
+
model: {
|
|
33
|
+
type: PropType<IDesignData>;
|
|
34
|
+
required: true;
|
|
35
|
+
};
|
|
36
|
+
prefix: {
|
|
37
|
+
type: StringConstructor;
|
|
38
|
+
default: string;
|
|
39
|
+
};
|
|
40
|
+
preview: {
|
|
41
|
+
type: BooleanConstructor;
|
|
42
|
+
default: boolean;
|
|
43
|
+
};
|
|
44
|
+
context: {
|
|
45
|
+
type: PropType<IContext>;
|
|
46
|
+
default: () => {};
|
|
47
|
+
};
|
|
48
|
+
}>> & Readonly<{}>, {
|
|
49
|
+
prefix: string;
|
|
50
|
+
preview: boolean;
|
|
51
|
+
context: IContext;
|
|
52
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { DesignRenderItem } from "../design-render-item/design-render-item.mjs";
|
|
2
|
+
import './design-render.css';/* empty css */
|
|
3
|
+
import { RenderNodeRegister, useDesignRenderController } from "@gct-paas/render";
|
|
4
|
+
import { computed, createTextVNode, createVNode, defineComponent, h, resolveComponent, watch } from "vue";
|
|
5
|
+
import { calcStyle, useNamespace } from "@gct-paas/core";
|
|
6
|
+
import { DesignNodeMode } from "@gct-paas/schema";
|
|
7
|
+
//#region src/components/design-render/design-render.tsx
|
|
8
|
+
var DesignRender = /* @__PURE__ */ defineComponent({
|
|
9
|
+
name: "DesignRender",
|
|
10
|
+
props: {
|
|
11
|
+
model: {
|
|
12
|
+
type: Object,
|
|
13
|
+
required: true
|
|
14
|
+
},
|
|
15
|
+
prefix: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: ""
|
|
18
|
+
},
|
|
19
|
+
preview: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: false
|
|
22
|
+
},
|
|
23
|
+
context: {
|
|
24
|
+
type: Object,
|
|
25
|
+
default: () => {
|
|
26
|
+
return {};
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
setup(props) {
|
|
31
|
+
const ns = useNamespace("design-render");
|
|
32
|
+
const c = useDesignRenderController();
|
|
33
|
+
c.prefix = props.prefix;
|
|
34
|
+
c.preview = props.preview;
|
|
35
|
+
c.setNodes(props.model.nodes);
|
|
36
|
+
c.setTree(props.model.tree);
|
|
37
|
+
watch(() => props.context, () => {
|
|
38
|
+
c.state.context = props.context;
|
|
39
|
+
}, { immediate: true });
|
|
40
|
+
const style = computed(() => {
|
|
41
|
+
if (props.model.pageNode) return calcStyle(props.model.pageNode.data);
|
|
42
|
+
return {};
|
|
43
|
+
});
|
|
44
|
+
const rootNodes = c.getNodes();
|
|
45
|
+
function renderNodeItem(node, parent) {
|
|
46
|
+
const provider = RenderNodeRegister.get(node.type, c.prefix);
|
|
47
|
+
const itemC = c.getController(node.id);
|
|
48
|
+
return h(resolveComponent(provider.component), {
|
|
49
|
+
key: node.id,
|
|
50
|
+
c: itemC,
|
|
51
|
+
model: node,
|
|
52
|
+
parent,
|
|
53
|
+
preview: props.preview,
|
|
54
|
+
context: c.state.context,
|
|
55
|
+
pageModel: props.model.pageNode
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
function renderNodeContainer(node, parent) {
|
|
59
|
+
const provider = RenderNodeRegister.get(node.type, c.prefix);
|
|
60
|
+
const items = c.getNodes(node.id);
|
|
61
|
+
const itemC = c.getController(node.id);
|
|
62
|
+
return h(resolveComponent(provider.component), {
|
|
63
|
+
key: node.id,
|
|
64
|
+
c: itemC,
|
|
65
|
+
model: node,
|
|
66
|
+
parent,
|
|
67
|
+
preview: props.preview,
|
|
68
|
+
context: c.state.context,
|
|
69
|
+
pageModel: props.model.pageNode
|
|
70
|
+
}, items.map((_) => {
|
|
71
|
+
return renderNode(_, node);
|
|
72
|
+
}));
|
|
73
|
+
}
|
|
74
|
+
function renderNode(node, parent) {
|
|
75
|
+
const provider = RenderNodeRegister.get(node.type, c.prefix);
|
|
76
|
+
if (!provider) {
|
|
77
|
+
console.warn(`未找到节点类型为${node.type}的渲染器`);
|
|
78
|
+
return null;
|
|
79
|
+
}
|
|
80
|
+
let content = null;
|
|
81
|
+
if (provider.mode === DesignNodeMode.CONTAINER) content = renderNodeContainer(node, parent);
|
|
82
|
+
else if (provider.mode === DesignNodeMode.ITEM) content = renderNodeItem(node, parent);
|
|
83
|
+
else content = createVNode("div", null, [
|
|
84
|
+
createTextVNode("未支持的适配器模式["),
|
|
85
|
+
provider.mode,
|
|
86
|
+
createTextVNode("]")
|
|
87
|
+
]);
|
|
88
|
+
return createVNode(DesignRenderItem, { "model": node }, { default: () => content });
|
|
89
|
+
}
|
|
90
|
+
function renderPageNode(child) {
|
|
91
|
+
if (!props.model.pageNode) return child;
|
|
92
|
+
const provider = RenderNodeRegister.get(props.model.pageNode.type, c.prefix);
|
|
93
|
+
if (!provider) {
|
|
94
|
+
console.warn(`未找到页面节点类型为${props.model.pageNode.type}的渲染器`);
|
|
95
|
+
return child;
|
|
96
|
+
}
|
|
97
|
+
const itemC = c.getController(props.model.pageNode.id);
|
|
98
|
+
return h(resolveComponent(provider.component), {
|
|
99
|
+
key: props.model.pageNode.id,
|
|
100
|
+
c: itemC,
|
|
101
|
+
model: props.model.pageNode,
|
|
102
|
+
parent: void 0,
|
|
103
|
+
preview: props.preview,
|
|
104
|
+
context: c.state.context
|
|
105
|
+
}, child);
|
|
106
|
+
}
|
|
107
|
+
return {
|
|
108
|
+
ns,
|
|
109
|
+
c,
|
|
110
|
+
style,
|
|
111
|
+
rootNodes,
|
|
112
|
+
renderNode,
|
|
113
|
+
renderPageNode
|
|
114
|
+
};
|
|
115
|
+
},
|
|
116
|
+
render() {
|
|
117
|
+
return createVNode("div", {
|
|
118
|
+
"class": this.ns.b(),
|
|
119
|
+
"style": this.style
|
|
120
|
+
}, [this.renderPageNode(this.rootNodes.map((node) => {
|
|
121
|
+
return this.renderNode(node);
|
|
122
|
+
}))]);
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
//#endregion
|
|
126
|
+
export { DesignRender };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { IDesignNode } from '@gct-paas/schema';
|
|
3
|
+
export declare const DesignRenderItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
4
|
+
model: {
|
|
5
|
+
type: PropType<IDesignNode>;
|
|
6
|
+
required: true;
|
|
7
|
+
};
|
|
8
|
+
}>, {
|
|
9
|
+
ns: import('@gct-paas/core').Namespace;
|
|
10
|
+
style: IObject;
|
|
11
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
12
|
+
model: {
|
|
13
|
+
type: PropType<IDesignNode>;
|
|
14
|
+
required: true;
|
|
15
|
+
};
|
|
16
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { createVNode, defineComponent } from "vue";
|
|
2
|
+
import { calcStyle, useNamespace } from "@gct-paas/core";
|
|
3
|
+
//#region src/components/design-render-item/design-render-item.tsx
|
|
4
|
+
var DesignRenderItem = /* @__PURE__ */ defineComponent({
|
|
5
|
+
name: "DesignRenderItem",
|
|
6
|
+
props: { model: {
|
|
7
|
+
type: Object,
|
|
8
|
+
required: true
|
|
9
|
+
} },
|
|
10
|
+
setup(props) {
|
|
11
|
+
return {
|
|
12
|
+
ns: useNamespace("design-render-item"),
|
|
13
|
+
style: calcStyle(props.model.data)
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
render() {
|
|
17
|
+
return createVNode("div", {
|
|
18
|
+
"class": this.ns.b(),
|
|
19
|
+
"style": this.style
|
|
20
|
+
}, [this.$slots.default?.()]);
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
//#endregion
|
|
24
|
+
export { DesignRenderItem };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { CheckboxGroupProps } from 'ant-design-vue';
|
|
3
|
+
import { FIELD_TYPE } from '@gct-paas/core';
|
|
4
|
+
import { LowCodeWidget } from '@gct-paas/schema';
|
|
5
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
6
|
+
design: BooleanConstructor;
|
|
7
|
+
disabled: BooleanConstructor;
|
|
8
|
+
readonly: BooleanConstructor;
|
|
9
|
+
fieldType: {
|
|
10
|
+
type: PropType<FIELD_TYPE>;
|
|
11
|
+
required: true;
|
|
12
|
+
};
|
|
13
|
+
tagStyle: {
|
|
14
|
+
type: PropType<LowCodeWidget.BasicStyle>;
|
|
15
|
+
required: true;
|
|
16
|
+
};
|
|
17
|
+
options: PropType<CheckboxGroupProps["options"]>;
|
|
18
|
+
value: (StringConstructor | NumberConstructor)[];
|
|
19
|
+
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
20
|
+
design: BooleanConstructor;
|
|
21
|
+
disabled: BooleanConstructor;
|
|
22
|
+
readonly: BooleanConstructor;
|
|
23
|
+
fieldType: {
|
|
24
|
+
type: PropType<FIELD_TYPE>;
|
|
25
|
+
required: true;
|
|
26
|
+
};
|
|
27
|
+
tagStyle: {
|
|
28
|
+
type: PropType<LowCodeWidget.BasicStyle>;
|
|
29
|
+
required: true;
|
|
30
|
+
};
|
|
31
|
+
options: PropType<CheckboxGroupProps["options"]>;
|
|
32
|
+
value: (StringConstructor | NumberConstructor)[];
|
|
33
|
+
}>> & Readonly<{}>, {
|
|
34
|
+
disabled: boolean;
|
|
35
|
+
readonly: boolean;
|
|
36
|
+
design: boolean;
|
|
37
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
38
|
+
export default _default;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import field_readonly_default from "./field-readonly.vue.mjs";
|
|
2
|
+
import './index.css';/* empty css */
|
|
3
|
+
import { computed, createVNode, defineComponent } from "vue";
|
|
4
|
+
import { FIELD_TYPE } from "@gct-paas/core";
|
|
5
|
+
import { Checkbox, CheckboxGroup } from "ant-design-vue";
|
|
6
|
+
//#region src/components/form-component/FieldCheckbox.tsx
|
|
7
|
+
var FieldCheckbox_default = /* @__PURE__ */ defineComponent({
|
|
8
|
+
name: "FieldCheckbox",
|
|
9
|
+
props: {
|
|
10
|
+
design: Boolean,
|
|
11
|
+
disabled: Boolean,
|
|
12
|
+
readonly: Boolean,
|
|
13
|
+
fieldType: {
|
|
14
|
+
type: Object,
|
|
15
|
+
required: true
|
|
16
|
+
},
|
|
17
|
+
tagStyle: {
|
|
18
|
+
type: Object,
|
|
19
|
+
required: true
|
|
20
|
+
},
|
|
21
|
+
options: Array,
|
|
22
|
+
value: [String, Number]
|
|
23
|
+
},
|
|
24
|
+
setup(props, { emit }) {
|
|
25
|
+
const isBool = props.fieldType === FIELD_TYPE.BOOLEAN;
|
|
26
|
+
const currentValue = computed({
|
|
27
|
+
get() {
|
|
28
|
+
if (isBool) return [props.value];
|
|
29
|
+
return Array.isArray(props.value) ? props.value : props.value ? props.value.split(",") : void 0;
|
|
30
|
+
},
|
|
31
|
+
set(value) {
|
|
32
|
+
if (isBool) {
|
|
33
|
+
const bool = value?.[0];
|
|
34
|
+
if (bool === void 0 || bool === null || typeof bool !== "boolean") emit("update:value", Boolean(bool));
|
|
35
|
+
else emit("update:value", !!bool);
|
|
36
|
+
} else emit("update:value", value);
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
const options = computed(() => {
|
|
40
|
+
if (isBool) return (props.options ?? []).filter((item) => item.value);
|
|
41
|
+
return props.options ?? [];
|
|
42
|
+
});
|
|
43
|
+
return () => {
|
|
44
|
+
return createVNode(CheckboxGroup, {
|
|
45
|
+
"value": currentValue.value,
|
|
46
|
+
"onUpdate:value": ($event) => currentValue.value = $event,
|
|
47
|
+
"disabled": props.disabled,
|
|
48
|
+
"class": ["field-checkbox-group", props.readonly ? "field-checkbox-group--readonly" : ""]
|
|
49
|
+
}, { default: () => [options.value?.map((option) => {
|
|
50
|
+
const optionItem = option;
|
|
51
|
+
const { icon, iconColor, textColor } = optionItem?._item || {};
|
|
52
|
+
return createVNode(Checkbox, {
|
|
53
|
+
"key": optionItem.value,
|
|
54
|
+
"value": optionItem.value
|
|
55
|
+
}, { default: () => [createVNode(field_readonly_default, {
|
|
56
|
+
"tagWidgetStyle": props.tagStyle,
|
|
57
|
+
"type": props.fieldType,
|
|
58
|
+
"label": optionItem.label,
|
|
59
|
+
"disabled": props.disabled,
|
|
60
|
+
"iconExtraProps": { [optionItem.label]: {
|
|
61
|
+
icon,
|
|
62
|
+
iconColor,
|
|
63
|
+
textColor
|
|
64
|
+
} }
|
|
65
|
+
}, null)] });
|
|
66
|
+
})] });
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
//#endregion
|
|
71
|
+
export { FieldCheckbox_default as default };
|