ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-config/configComponentLibs/TreeSelect.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import CateTreeList from './CateTreeList.vue';
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const isShowCateTreeList = ref(false)
+const inputRef = ref(null)
+// eslint-disable-next-line vue/no-setup-props-destructure
+const label = ref(null)
+const optionsList = computed(()=>{
+  if (props.config.componentProps.isCategory) {
+    return getListData.value?.flatMap((item)=>{
+      return item?.list || item?.children || []
+    }) || []
+  }
+  return getListData.value?.flatMap((item)=>{
+    return item?.list || item?.children || []
+  }) || []
+})
+const labelAgent = computed({
+  get: ()=>{
+    const value = props.configValue[props.config.key]
+    if (label.value === null) {
+      return optionsList.value.find((item)=>item.value === value)?.label
+    }
+    return label.value
+  },
+  set: (val)=>{
+    label.value = val
+  }
+})
+
+const position = ref({
+  x: 0,
+  y: 0,
+  w: 0,
+  h: 0,
+})
+
+/**
+ * 点击事件
+ */
+const onClick = ()=>{
+
+
+  props.config?.componentEvent?.click?.({
+    config: props.config,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent
+  })
+  const { x, y, width } = inputRef.value.$el.getBoundingClientRect()
+  position.value = { x, y, w: width, h: 500, }
+  isShowCateTreeList.value = true
+}
+
+/**
+ *  选择
+ * @param {*} item
+ */
+const onSelect = (item)=>{
+  console.log(item);
+  if (!item) {
+    isShowCateTreeList.value = false
+    return
+  }
+  labelAgent.value = item.label
+  props.configValue[props.config.key] = item.value
+  props.config.componentEvent?.change?.({
+    config: props.config,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent,
+    value: item.value,
+    item,
+  })
+
+  isShowCateTreeList.value = false
+
+}
+
+const getListData = computed(()=>{
+  const options = props.config.componentProps?.options || []
+  if (typeof options === 'function') {
+    return options({
+      activeComponent: props.activeComponent,
+      config: props.config,
+      configValue: props.configValue,
+      parentConfig: props.parentConfig,
+    }) || []
+  }
+  return options
+})
+
+</script>
+
+<template>
+  <div>
+    <el-select
+      ref="inputRef"
+      v-model="labelAgent"
+      placeholder="请选择"
+      @click="onClick"
+      :clearable="true"
+      size="small"
+      popper-class="cate-tree-list"
+    >
+    </el-select>
+    <CateTreeList
+      v-show="isShowCateTreeList"
+      :isCategory="config.componentProps?.isCategory || false"
+      :position="position"
+      :isPopUp="true"
+      @onSelect="onSelect"
+      :listData="getListData" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.el-select {
+  width: 100%;
+}
+</style>
+
+<style>
+.cate-tree-list{
+  display: none;
+}
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/TreeSelectPlus.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed } from 'vue';
+import { find } from 'tree-lodash'
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const getListData = computed(() => {
+  const options = props.config.componentProps.options
+  if (typeof options === 'function') {
+    return options({
+      activeComponent: props.activeComponent,
+      config: props.config,
+      page: props.page,
+      configValue: props.configValue })
+  }
+  return options
+})
+
+const onChange = (val) => {
+  props.config.componentEvent?.change?.({
+    activeComponent: props.activeComponent,
+    config: props.config,
+    configValue: props.configValue,
+    value: val,
+    item: find(getListData.value, (item)=>item.value === val)
+  })
+}
+
+</script>
+
+<template>
+  <div class="tree-select-plus-config">
+    <el-tree-select
+      v-model="configValue[config.key]"
+      :data="getListData"
+      check-strictly
+      :render-after-expand="false"
+      style="width: 100%"
+      v-bind="config.componentProps"
+      @change="onChange"
+    />
+  </div>
+
+</template>
+
+<style lang="less">
+.tree-select-plus-config {
+    width: 100%;
+    height: 100%;
+
+}
+
+</style>

package/src/views/designer/modules/ibsp-config/configGroups/BaseData.js

@@ -0,0 +1,60 @@
+export default (page, config)=>{
+  return [
+    {
+      label: '数据类型',
+      key: 'dataType',
+      value: 0,
+      componentType: 'Radio',
+      componentProps: {
+        type: 'button',
+        options: [{ label: '静态数据', value: 0 }, { label: '动态数据', value: 1 }],
+      },
+      componentEvent: {
+        change: async ({ configValue, activeComponent, value }) => {
+
+        }
+      }
+    },
+    {
+      label: '数据源',
+      key: 'dataSource',
+      value: 0,
+      componentType: 'StaticTable',
+      builtinComponentType: 'dataSource',
+      show: (values)=>{
+        return values.dataType === 0
+      },
+      componentProps: {
+        labelPosition: 'top',
+      }
+    },
+    {
+      label: '数据模型',
+      key: 'viewId',
+      value: '',
+      componentType: 'Select',
+      componentProps: {
+        options: ()=> platformStore?.platformData?.viewDta || [],
+        filterable: true,
+      },
+      show: ({ dataType })=>dataType === 1,
+      componentEvent: {
+        change: async ({ configValue, value, activeComponent })=>{
+
+        },
+      }
+    },
+    {
+      label: '数量',
+      key: 'pageSize',
+      value: 10,
+      componentType: 'Select',
+      componentProps: {
+        options: pageSizeOptions,
+        clearable: false,
+        allowCreate: true,
+      },
+      show: ({ dataType })=> dataType === 1
+    },
+  ]
+}

package/src/views/designer/modules/ibsp-config/hooks/useModelValue.ts

@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+
+export default (props:any)=>{
+  const modelValue = computed({
+    get() {
+      if (props.config?.expression && props.configValue[props.config.key]?.expression) {
+        return props.configValue[props.config.key].value
+      }
+      return props.configValue[props.config.key]
+    },
+    set(value) {
+      if (props.config?.expression && props.configValue[props.config.key]?.expression) {
+        props.configValue[props.config.key].value = value
+        return
+      }
+      props.configValue[props.config.key] = value
+    }
+  })
+  return {
+    modelValue
+  }
+}

package/src/views/designer/modules/ibsp-config/index.ts

@@ -0,0 +1,44 @@
+import DataModel from './builtinComponents/DataModel.jsx'
+export const builtinComponents = {
+  DataModel: DataModel
+}
+export default {
+  Button: import('./configComponentLibs/Button.vue'),
+  CascaderSelect: import('./configComponentLibs/CascaderSelect.vue'),
+  CateTreeList: import('./configComponentLibs/CateTreeList.vue'),
+  Checkbox: import('./configComponentLibs/Checkbox.vue'),
+  Collapse: import('./configComponentLibs/Collapse.vue'),
+  Color: import('./configComponentLibs/Color.vue'),
+  Dialog: import('./configComponentLibs/Dialog.vue'),
+  DragTabs: import('./configComponentLibs/DragTabs.vue'),
+  Drawer: import('./configComponentLibs/Drawer.vue'),
+  DynamicDataValue: import('./configComponentLibs/DynamicDataValue.vue'),
+  FormItem: import('./configComponentLibs/FormItem.vue'),
+  Input: import('./configComponentLibs/Input.vue'),
+  InputNumber: import('./configComponentLibs/InputNumber.vue'),
+  InterfaceParamConfig: import('./configComponentLibs/InterfaceParamConfig.vue'),
+  Modal: import('./configComponentLibs/Modal.vue'),
+  MonacoEditor: import('./configComponentLibs/MonacoEditor.vue'),
+  ParamConfig: import('./configComponentLibs/ParamConfig.vue'),
+  Position: import('./configComponentLibs/Position.vue'),
+  Radio: import('./configComponentLibs/Radio.vue'),
+  Select: import('./configComponentLibs/Select.vue'),
+  SelectIcon: import('./configComponentLibs/SelectIcon.vue'),
+  SelectResource: import('./configComponentLibs/SelectResource.vue'),
+  SetParamSource: import('./configComponentLibs/SetParamSource.vue'),
+  Slider: import('./configComponentLibs/Slider.vue'),
+  StaticTable: import('./configComponentLibs/StaticTable.vue'),
+  Switch: import('./configComponentLibs/Switch.vue'),
+  Tab: import('./configComponentLibs/Tab.vue'),
+  Tabs: import('./configComponentLibs/Tabs.vue'),
+  Tabs2: import('./configComponentLibs/Tabs2.vue'),
+  Title: import('./configComponentLibs/Title.vue'),
+  TreeSelect: import('./configComponentLibs/TreeSelect.vue'),
+  TreeSelectPlus: import('./configComponentLibs/TreeSelectPlus.vue'),
+  ControlConfig: import('./configComponentLibs/ControlConfig/index.vue'),
+  ScriptData: import('./configComponentLibs/ScriptData.vue'),
+  SelectExpression: import('./configComponentLibs/SelectExpression.vue')
+}
+
+export * as commonlyConfig from './commonlyConfig'
+

package/src/views/designer/modules/ibsp-config/utils.ts

@@ -0,0 +1,6 @@
+export const applyFunctionProps = <P extends Function | unknown>(props:P, ...args:any[]) => {
+  if (typeof props === 'function') {
+    return (props as Function)(...args)
+  }
+  return props as P
+}

package/src/views/designer/modules/ibsp-form-domain/index.ts

@@ -0,0 +1,3 @@
+import FormDomainConfig from './src/index.vue'
+
+export default FormDomainConfig

package/src/views/designer/modules/ibsp-form-domain/src/index.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+import { useComponentStore } from '@/stores';
+
+type TreeNode = {
+  name: string;
+  id: string;
+  formModel: string;
+  parentId: string;
+  componentIcon: any;
+  children?: TreeNode[] | null;
+}
+
+const props = defineProps({
+  activeComponent: {
+    type: Object as PropType<IBSP.IComponent.DesignComponent>
+  },
+  page: {
+    type: Object as PropType<IBSP.IPage.Page>
+  }
+})
+
+
+const componentStore = useComponentStore();
+const componentData = componentStore.componentData as IBSP.IComponent.DesignComponent[];
+
+const getTreeData = (component: IBSP.IComponent.DesignComponent): TreeNode[] | null => {
+  let children = componentData.filter(item => item.parentId === component.id);
+  if (children && children.length) {
+    let result: {
+      [key: string]: TreeNode
+    } = {};
+    children.forEach((item) => {
+      if (item?.form?.model && !result[item?.form?.model]) {
+        result[item?.form?.model] = {
+          name: item?.name,
+          id: item?.id,
+          componentIcon: item.icon,
+          formModel: item?.form.model,
+          parentId: item?.parentId,
+          children: getTreeData(item)
+        }
+      }
+    });
+    return Object.values(result);
+  }
+  return null;
+}
+
+const treeData = computed(() => {
+  if (props.activeComponent?.id && props.activeComponent?.componentMetaId === 'formContainer') {
+    const rootItem = {
+      name: props.activeComponent?.name,
+      id: props.activeComponent?.id,
+      componentIcon: props.activeComponent.icon,
+      formModel: props.activeComponent?.form.model,
+      parentId: props.activeComponent?.parentId,
+      children: getTreeData(props.activeComponent)
+    }
+    console.log(rootItem);
+    return [rootItem];
+  }
+  return [];
+})
+
+const currentNodeKey = computed(()=>{
+  return props.activeComponent?.id
+})
+
+
+const onSelectComponent = (node: TreeNode) => {
+  componentStore.setTempActiveComponent(componentData.filter(item => (item.form.model === node.formModel && item.parentId === node.parentId)))
+}
+
+const onDragstart = (evt: DragEvent, data: TreeNode) => {
+  const component = componentData.find(item => item.id === data.id);
+  if (component) {
+    evt.dataTransfer!.setData('copyComponentId', component?.id)
+  }
+}
+
+</script>
+<template>
+  <div class="form-domain-wrap">
+    <el-tree
+      node-key="id"
+      :data="treeData"
+      :default-expand-all="true"
+      :expand-on-click-node="false"
+      @node-click="onSelectComponent"
+      :current-node-key="currentNodeKey"
+    >
+      <template #default="{ data }">
+        <div class="tree-item"
+             :id="`outline-${data.id}`"
+             :draggable="data.id === activeComponent?.id ? false : true"
+             @dragstart="(evt: DragEvent) => onDragstart(evt , data)"
+        >
+          <div class="tree-item-icon">
+            <SvgIcon
+              style="margin-right: 5px;"
+              v-if="data.componentIcon"
+              :icon="data.componentIcon"
+            />
+          </div>
+          <div class="tree-item-content">
+            <span>{{data.name}}</span>
+            <span>{{ data.formModel }}</span>
+          </div>
+        </div>
+      </template>
+
+    </el-tree>
+  </div>
+</template>
+<style lang="less" scoped>
+.form-domain-wrap {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 10px;
+  .el-tree{
+    background:transparent;
+  }
+  .tree-item{
+    display: flex;
+    align-items: center;
+    flex: 1;
+    .tree-item-icon{
+      display: flex;
+      width: 24px;
+      align-items: center;
+      height: 100%;
+      justify-content: center;
+    }
+    .tree-item-content{
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      padding-right: 10px;
+      span{
+        &:last-child{
+          color: var(--el-input-icon-color,var(--el-text-color-placeholder));
+        }
+      }
+    }
+  }
+  .visible {
+    color: var(--theme-font-color);
+    cursor: pointer;
+    width: 100%;
+    display: inline-block;
+  }
+  .no-visible {
+    filter: brightness(0.5);
+    opacity: .5;
+  }
+  :deep(.el-tree-node){
+    color: var(--theme-font-color);
+    user-select: none;
+    .el-tree-node__content{
+      padding: 3px 0;
+      box-sizing: content-box;
+      line-height: 24px;
+      display: flex;
+      border-radius: 2px;
+      &:hover{
+        background: var(--theme-next-btn-bg);
+      }
+    }
+    &.is-current{
+      >.el-tree-node__content{
+        background-color: var(--theme-gl-bg) !important;
+      }
+    }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-history/history.service.ts

@@ -0,0 +1,3 @@
+export default class HistoryService {
+
+}

package/src/views/designer/modules/ibsp-history/index.ts

@@ -0,0 +1,3 @@
+import IbspHistory from './src/index.vue'
+
+export default IbspHistory

package/src/views/designer/modules/ibsp-history/src/index.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { RefreshRight } from '@element-plus/icons-vue';
+
+import { historyStackModel, actions } from '@/models/useHistoryStackModel';
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+
+const props = defineProps({
+  page: {
+    type: Object,
+    default: ()=>({})
+  }
+})
+
+let data = ref([])
+
+const stackIndex = computed(() => {
+  return historyStackModel.stack.index.value;
+})
+
+const stack = computed(() => {
+  return historyStackModel.stack.list;
+})
+
+watch(() => historyStackModel.stack.list, () => {
+  data.value = historyStackModel.stack.list;
+}, {
+  immediate: true,
+  deep: true
+})
+
+const onSelect = (node)=> {
+  console.log(node);
+}
+
+let actionMap = {};
+
+actions.forEach(item => {
+  actionMap[item.action] = {
+    iconType: typeof item.icon === 'string' ? 1 : 2,
+    ...item
+  }
+})
+
+const findAction = (actionType) => {
+  return actions.find(item => item.action === actionType);
+}
+
+const recovery = (index) => {
+  historyStackModel.recovery(index, props.page)
+}
+
+props.page.created((page)=>{
+  console.log('historyIndex', page);
+})
+</script>
+
+<template>
+
+  <div class="history-index">
+    <ul class="history-list">
+      <li v-for="(item , index) of data"
+          :class="{'history-dis': index < stackIndex , active: index === stackIndex}"
+          :key="index"
+          @click="recovery(index)"
+      >
+        <div class="icon">
+          <i v-if="actionMap[item.actionType].iconType === 1" :class="actionMap[item.actionType].icon"></i>
+          <SvgIcon v-else :icon="actionMap[item.actionType].icon"></SvgIcon>
+        </div>
+        <div class="label">
+          {{ item.label }}
+        </div>
+        <!-- <div class="icon">
+          <el-tooltip
+            effect="dark"
+            content="恢复操作"
+            placement="top"
+          >
+            <el-icon @click="recovery(item)"><RefreshRight /></el-icon>
+          </el-tooltip>
+        </div> -->
+      </li>
+    </ul>
+    <!-- <IbspTree :data="data"
+              ref="ibspTreeRef"
+              :is-open-search="true"
+              searchPlaceholder="搜索操作名称"
+              :isSelectScrollIntoView="true"
+              @select="onSelect"
+              defaultExpandAll>
+    </IbspTree> -->
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.history-index{
+  width: 100%;
+  height: 100%;
+}
+.history-list{
+  overflow: auto;
+  .history-dis{
+    color: var(--theme-die-font-color);
+  }
+  >li{
+    display: flex;
+    align-items: center;
+    color: var(--theme-font-color);
+    cursor: pointer;
+    padding: 5px 10px;
+    border-bottom: 1px solid var(--theme-border-color);
+    // margin: 10px 0;
+    transition: background-color 0.1s;
+    >.label{
+      padding: 0 10px;
+      flex: 1;
+    }
+    &:hover,&.active{
+      color: var(--theme-gl-color);
+      background-color: var(--theme-gl-bg);
+    }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-outline/index.ts

@@ -0,0 +1,3 @@
+import IbspOutline from './src/index.vue'
+
+export default IbspOutline

package/src/views/designer/modules/ibsp-outline/outline.service.ts

@@ -0,0 +1 @@
+export default class OutlineService {}