ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/card/config/props.js

@@ -0,0 +1,150 @@
+import { commonlyConfig } from '@ibsp-config'
+export default ()=>{
+  return [
+    {
+      label: '顶部配置',
+      key: 'header',
+      componentType: 'Collapse',
+      children: [
+        {
+          label: '显示',
+          key: 'show',
+          value: true,
+          componentType: 'Switch'
+        },
+        ...commonlyConfig.batchGroup(
+          {
+            show: ({show})=>show
+          },
+          [
+            {
+              label: '内边距',
+              key: 'padding',
+              value: '0 10px',
+              componentType: 'Input'
+            },
+            {
+              label: '头部图标',
+              key: 'iconType',
+              value: 'block',
+              componentType: 'Select',
+              componentProps: {
+                options: [
+                  {
+                    label: '无',
+                    value: 'none'
+                  },
+                  {
+                    label: '图标',
+                    value: 'icon'
+                  },
+                  {
+                    label: '色块',
+                    value: 'block'
+                  }
+                ]
+              }
+            },
+            {
+              label: '图标',
+              key: 'icon',
+              value: '',
+              componentType: 'SelectIcon',
+              show: ({iconType})=>iconType === 'icon'
+            },
+            {
+              label: '色块',
+              key: 'blockColor',
+              value: '#409EFF',
+              componentType: 'Color',
+              show: ({iconType})=>iconType === 'block'
+            },
+            {
+              label: '背景色',
+              key: 'backgroundColor',
+              value: '',
+              componentType: 'Color'
+            },
+            {
+              label: '字体颜色',
+              key: 'color',
+              value: '',
+              componentType: 'Color'
+            },
+            {
+              label: '字体大小',
+              key: 'fontSize',
+              value: 14,
+              componentType: 'InputNumber'
+            },
+            {
+              label: '高度',
+              key: 'height',
+              value: 40,
+              componentType: 'InputNumber'
+            }
+          ]
+        )
+
+      ]
+    },
+    {
+      label: '内容配置',
+      key: 'content',
+      componentType: 'Collapse',
+      children: [
+        {
+          label: '内边距',
+          key: 'padding',
+          value: '10px',
+          componentType: 'Input'
+        }
+      ]
+    },
+    {
+      label: '底部配置',
+      key: 'footer',
+      componentType: 'Collapse',
+      children: [
+        {
+          label: '显示',
+          key: 'show',
+          value: true,
+          componentType: 'Switch'
+        },
+        ...commonlyConfig.batchGroup(
+          {
+            show: ({show})=>show
+          },
+          [
+            {
+              label: '内边距',
+              key: 'padding',
+              value: '0 10px',
+              componentType: 'Input'
+            },
+            {
+              label: '背景色',
+              key: 'backgroundColor',
+              value: '',
+              componentType: 'Color'
+            },
+            {
+              label: '字体颜色',
+              key: 'color',
+              value: '',
+              componentType: 'Color'
+            },
+            {
+              label: '高度',
+              key: 'height',
+              value: 40,
+              componentType: 'InputNumber'
+            }
+          ]
+        )
+
+      ]
+    }
+  ]
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/card/index.vue

@@ -0,0 +1,32 @@
+<script setup lang='ts'>
+import { ContentContainer } from '../../builtinContainer';
+import Template from './Template.vue';
+defineProps<{
+  page:IBSP.IPage.Page,
+  app:IBSP.IbspAPP.APP,
+  dataModel:any,
+  dataValues:any,
+  propsValues:any,
+  eventValues:any,
+  component:IBSP.IComponent.DesignComponent,
+}>()
+
+</script>
+
+<template>
+  <div class="ibsp-card-container" >
+    <Template
+      :dataModel="dataModel"
+      :data-values="dataValues"
+      :props-values="propsValues"
+      :event-values="eventValues"
+    >
+      <ContentContainer
+        :page="page"
+        :app="app"
+        :component="component"
+      />
+    </Template>
+  </div>
+</template>
+

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/data/config.js

@@ -0,0 +1,49 @@
+
+export default {
+  id: 'ibsp-data-container',
+  label: '数据容器',
+  icon: {
+    type: 'svg',
+    value: '数据容器'
+  },
+  type: 'container',
+  isContainer: true,
+  contentContainer: true,
+  dataContainer: true,
+  sort: 2,
+  excludeTabModules: ['propsConfig'],
+  setup({app}) {
+    const {selectDataModel} = app.commonlyConfig
+    return {
+      config: {
+        data: [
+          {
+            label: '容器名称',
+            key: 'name',
+            value: '数据容器',
+            type: 'Input',
+            event: {
+              change: ({value, activeComponent})=>{
+                activeComponent.name = value
+              }
+            }
+          },
+          selectDataModel()
+        ],
+        event: [
+          {
+            label: '数据调用完成前',
+            key: 'beforeLoad',
+            value: ()=>{}
+          },
+          {
+            label: '数据调用完成后',
+            key: 'afterLoad',
+            value: ()=>{}
+          }
+        ]
+      }
+    }
+  },
+  render: ()=> import('./index.vue')
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/data/index.vue

@@ -0,0 +1,205 @@
+<script setup lang='ts'>
+import { reactive, isRef, computed } from 'vue';
+import { ContentContainer } from '../../builtinContainer';
+import { getUuid } from '@utils';
+import { PreviewComponent } from '@models/useComponentModel';
+import { useAnalysisInteraction } from '@preview';
+import { toTree } from './utils';
+const props = defineProps<{
+  page:IBSP.IPage.Page,
+  context:Record<string, any>,
+  component:IBSP.IComponent.DesignComponent,
+  dataValues:Record<string, any>,
+  data:Record<string, any>,
+  store:any,
+  eventValues:Record<string, any>,
+  app:IBSP.IbspAPP.APP
+}>()
+
+const modelItem = reactive({
+  data: {},
+  fields: []
+})
+const componentData = props.store.componentStore?.componentData || []
+
+const getComponents = ()=>{
+  return props.page.store.componentStore.queryComponentDataTreePlat(props.component, {map: (i)=>({id: i.id, parentId: i.parentId}), self: false})
+}
+
+const components = getComponents()
+
+
+const components_tree = toTree(components)
+
+const componentMap = props.page.store.componentStore.componentDataMap
+
+const loopAddComponents = (_children:any[], pid:string | undefined = undefined, context:unknown) => {
+  _children.forEach((_item:{
+    id:string,
+    parent:string,
+    children?:any[]
+  }) => {
+    const item = componentMap[_item.id]
+    const configComponent = props.page.getConfigComponent({ component: item });
+    const id = `${item.type}-${getUuid()}-${ Date.now() }`;
+    const fistComponent = props.page.generateComponentPreviewData([item])?.[0];
+
+    const _components = JSON.parse(JSON.stringify(fistComponent))
+
+    const _component = new PreviewComponent({
+      ..._components,
+      id: id,
+      uId: id,
+      data: {
+        ...(_components.data || []),
+        contextModel: context
+      }
+    }, {
+      page: props.page,
+      configComponent
+    }) as Record<string, any>;
+
+    useAnalysisInteraction(_component, props.page);
+
+    _component.parentId = pid;
+    componentData.push(_component);
+    const _hasChildren = _item.children;
+    if (_hasChildren?.length) {
+      loopAddComponents(_hasChildren, id, context)
+    }
+
+  });
+}
+
+const init = (model:any)=>{
+  let data = model.data
+  let fields = model.selectFields
+  const components = getComponents()
+  const componentMap = props.page.store.componentStore.componentDataMap
+  if (isRef(data)) {
+    data = data.value
+  }
+  if (isRef(fields)) {
+    fields = fields.value
+  }
+
+  modelItem.fields = fields
+
+  if (props.page.mode === 'Preview') {
+    const dataItem = (Array.isArray(data) && data.length > 0) ? data[0] : data
+    for (const item of components) {
+      const component = componentMap[item.id]
+      component.addData('contextModel', {
+        model: modelData,
+        item: {
+          data: dataItem,
+          fields: (modelData.selectFields as any).value
+        },
+        target: 'context'
+      })
+    }
+    if (Array.isArray(data) && data.length) {
+      for (let i = 1; i < data.length; i++) {
+        const item = data[i]
+        loopAddComponents(components_tree, props.component.id, {
+          item: {
+            data: item,
+            fields: modelData.selectFields
+          },
+          model: modelData,
+          target: 'context'
+        })
+      }
+    }
+  } else if (props.page.mode === 'Design') {
+    // 设计模式下只取第一条数据
+    const dataItem = (Array.isArray(data) && data.length > 0) ? data[0] : data
+    for (const item of components) {
+      const component = componentMap[item.id]
+      component.addData('contextModel', {
+        model: modelData,
+        item: {
+          data: dataItem,
+          fields: (modelData.selectFields as any).value
+        },
+        target: 'context'
+      })
+    }
+  }
+
+}
+
+
+const modelData = props.page.useDataModel(props.dataValues.dataModel, {
+  watch: ()=>props.dataValues.dataModel,
+  loaded: (res:any)=>{
+    init(res)
+    props.eventValues?.afterLoad?.()
+  },
+  beforeLoad: ()=>{
+    props.eventValues?.beforeLoad?.()
+  }
+}) as unknown as typeof modelItem & {selectFields: any[]}
+
+
+props.component.addData('model', modelData)
+
+
+</script>
+
+<template>
+  <div class="data-container"
+       v-if="page.mode === 'Design'"
+       :class="{
+         'active': component.active,
+       }"
+  >
+    <ContentContainer
+      :page="page"
+      :component="component"
+      :app="app"
+      :is-data-container="true"
+    />
+  </div>
+  <template
+    v-else
+  >
+    <ContentContainer
+      :page="page"
+      :app="app"
+      :component="component"
+      :is-data-container="true"
+    />
+
+  </template>
+
+
+</template>
+
+<style lang="less" scoped>
+.data-container{
+    width:100%;
+    height:100%;
+    padding: var(--container-padding) !important;
+    outline-style: dashed;
+  outline-width: var(--container-border-width);
+  gap: var(--container-padding);
+  outline-color: #848282;
+  position: relative;
+
+  &:not(:has(:hover)):hover {
+    outline-color: #F77234;
+    outline-width: 2px;
+    outline-style: solid;
+    z-index: 11;
+  }
+
+  &.active {
+  outline: 2px solid #F77234;
+  gap: var(--container-padding);
+  z-index: 9;
+}
+
+}
+
+</style>

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/data/utils.ts

@@ -0,0 +1,20 @@
+
+export const toTree = (list:any)=>{
+  const map:any = {};
+  const roots:any = [];
+  let node:any;
+  for (let i = 0; i < list.length; i += 1) {
+    map[list[i].id] = i;
+    list[i].children = [];
+  }
+  for (let i = 0; i < list.length; i += 1) {
+    node = list[i];
+    if (node.parentId !== null && map[node.parentId] !== undefined) {
+      list[map[node.parentId]].children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  return roots;
+}
+

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/formContainer/RenderComponent.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed, onBeforeMount, provide } from 'vue';
+import { MiddlewareComponentPre } from '@ibsp-component-lib';
+const props = defineProps(['page', 'component', 'store', 'eventValues', 'app', 'propsValues'])
+const children = computed(()=>{
+  return props.store?.componentStore?.queryComponentChildrenData?.(props?.component?.id) || []
+})
+provide('formContainer', true);
+provide('FormPropsValues', props.propsValues)
+
+onBeforeMount(()=>{
+  props.eventValues?.onBeforeMount?.()
+})
+
+</script>
+
+<template>
+  <div
+    :id="component.id"
+    :style="component?.getComponentStyles?.(component)"
+    @click.stop="eventValues?.click?.()"
+    :class="[component.uId]"
+  >
+    <MiddlewareComponentPre
+      v-for="item in children"
+      :key="item._key"
+      :component="item"
+      :page="page"
+      :app="app"
+    ></MiddlewareComponentPre>
+  </div>
+</template>
+

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/formContainer/config.ts

@@ -0,0 +1,25 @@
+export default {
+  id: 'formContainer', // id必须是唯一
+  label: '表单容器',
+  icon: {
+    type: 'svg', // 图标类型
+    value: '表单容器'
+  },
+  type: 'container',
+  sort: 3,
+  isContainer: true,
+  setup: ({ page, store })=>{
+
+    return {
+      config: {
+        props: [
+        ]
+      }
+    }
+  },
+  render: ({ component }: {
+    component: IBSP.IComponent.DesignComponent
+  })=>{
+    return component.mode === 'Design' ? import('./index.vue') : import('./RenderComponent.vue')
+  }
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/formContainer/form-item/config.ts

@@ -0,0 +1,25 @@
+import type { h } from 'vue'
+
+export default {
+  id: 'formContainerItem', // id必须是唯一
+  label: '表单项',
+  icon: {
+    type: 'svg', // 图标类型
+    value: '导航框架'
+  },
+  position: {
+    w: '100%',
+    h: 'auto'
+  },
+  type: 'formItem',
+  sort: 1,
+  visible: false,
+  setup: ({ page, store })=>{
+    return {
+      
+    }
+  },
+  render: ()=>{
+    return import('./index.vue')
+  }
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/formContainer/form-item/index.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useComponentStore } from '@/stores';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  page: IBSP.IPage.Page,
+  component: IBSP.IComponent.DesignComponent,
+  app: IbspApp
+}>();
+
+console.log(props);
+
+const componentStore = useComponentStore();
+
+const layoutChildren = computed(() => {
+  const childComponents = componentStore.queryComponentChildrenData(props.component.id);
+  return childComponents[0];
+})
+
+</script>
+<template>
+  <div>
+    <template v-for="item of layoutChildren">
+      <div class="form-item-wrap"
+           :class="{
+             'active': component.active
+           }">
+        <div class="form-item-label">
+          {{item.label}}
+        </div>
+        <div>
+          <component
+            :id="item.id"
+            :is="item.component"
+            :component="component"
+            :page="page"
+            :store="page.store"
+            :api="page.api"
+            :utils="page.utils"
+            :data="component.data"
+            :propsValues="component.componentValue!.props"
+            :dataValues="component.componentValue!.data"
+            :eventValues="component.componentValue!.event"
+            :style="{
+              ...component.getComponentStyles(),
+              ...style
+            }"
+            :useDataSource="page.useDataSource"
+          ></component>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+.form-item-wrap{
+  color: #000;
+  width: 100%;
+  padding: 10px 20px;
+  border: 1px dashed #ddd;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  &.position-label-left{
+    flex-direction: column;
+  }
+  &.active{
+    border-color: #1784FC;
+  }
+}
+</style>