import { ViewController } from '@ibiz-template/controller'; import { useNamespace } from '@ibiz-template/vue-util'; import { defineComponent, PropType } from 'vue'; import '@ibiz-template/theme/style/components/layout/view-base/view-base.scss'; export const ViewBase = defineComponent({ props: { controller: { type: Object as PropType<ViewController>, required: true, }, }, setup(props) { const ns = useNamespace('view'); const renderViewMessage = () => { const messageSlots: IData = {}; if (props.controller.complete) { ['TOP', 'BOTTOM', 'BODY'].forEach(position => { const viewMessages = props.controller.viewMessages[position]; if (viewMessages?.length) { messageSlots[`${position.toLowerCase()}Message`] = () => { return <view-message messages={viewMessages}></view-message>; }; } }); } return messageSlots; }; return { ns, renderViewMessage }; }, render() { const c = this.controller; // 外面的插槽同样传给view-layout const inheritSlots: IData = {}; Object.keys(this.$scopedSlots).forEach(key => { inheritSlots[key] = (arg: IData) => this.$scopedSlots[key]!(arg); }); return ( <view-layout class={[ this.ns.b(), c.complete && this.ns.b(this.controller.model.typeClass), c.complete && this.ns.m(this.controller.model.modelClass), c.complete && this.controller.model.sysCssName, ]} isComplete={c.complete} modelData={c.model} viewMode={c.modal.mode} isLoading={c.viewLoading.isLoading} scopedSlots={{ caption: () => { return ( <div class={this.ns.b('caption')}> {c.complete && c.model.source.getPSSysImage() ? ( [ <app-icon class={this.ns.be('caption', 'icon')} icon={c.model.source.getPSSysImage()} ></app-icon>, <span class={this.ns.be('caption', 'text')} title={c.caption} > {c.caption} </span>, ] ) : ( <span class={this.ns.be('caption', 'text')} title={c.caption}> {c.caption} </span> )} </div> ); }, toolbar: () => { if (c.complete && c.model.toolbar) { return [ <view-toolbar modelData={c.model.toolbar} on-neuronInit={c.nerve.onNeuronInit( c.model.toolbar.source.name, )} toolbarState={c.toolbarState} viewMode={c.modal.mode} ></view-toolbar>, ]; } return null; }, ...this.renderViewMessage(), ...inheritSlots, }} /> ); }, });