ibsp-fg-page 4.0.2

package/src/views/designer/modules/data-model/src/hooks/useModelConfig.ts

@@ -0,0 +1,98 @@
+import { v4 as uuid4 } from 'uuid';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import useModelDefaultValue from './useModelDefaultValue'
+
+export default (
+  props: {
+        page: IBSP.IPage.Page
+    },
+  dataModels: DataModelConfig[]
+
+) => {
+
+  const addModel = ():DataModelConfig => {
+    const defaultValue = useModelDefaultValue()
+    dataModels.push({
+      ...defaultValue,
+      id: uuid4(),
+      name: '新建模型' + (dataModels.length + 1)
+    })
+    return dataModels[dataModels.length - 1]
+  }
+
+  const delModel = (id: string) => {
+    return new Promise((resolve, reject) => {
+      ElMessageBox.confirm('确定删除该模型吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const index = dataModels.findIndex(item => item.id === id)
+        dataModels.splice(index, 1)
+        resolve(true)
+      })
+    })
+  }
+
+  const getModelValues = ():DataModelValue<any, any>[]=>{
+    return dataModels.map(item=>({
+      id: item.id,
+      name: item.name,
+      enterParams: item.enterParams,
+      leaveParams: item.leaveParams,
+      pull: {
+        type: item.pull.type,
+        configValues: item.pull.configValues[item.pull.type]
+      },
+      push: {
+        type: item.push.type,
+        configValues: item.push.configValues[item.push.type]
+      }
+    }))
+  }
+
+  return {
+    addModel,
+    delModel,
+    getModelValues
+  }
+}
+
+export const initDataModel = (dataModels: DataModelValue<any, any>[]): DataModelConfig[] => {
+  const res = dataModels.map((item): DataModelConfig => {
+    const defaultValue = useModelDefaultValue()
+    return {
+      ...item,
+      pull: {
+        type: item.pull?.type,
+        configValues: {
+          ...defaultValue.pull.configValues,
+          [item.pull.type]: item.pull.configValues
+        }
+      },
+      push: {
+        type: item.push.type,
+        configValues: {
+          ...defaultValue.push.configValues,
+          [item.push.type]: item.push.configValues || {}
+        }
+      },
+      _props: {
+        inputEl: null,
+        isEditName: false
+      }
+    } as DataModelConfig
+  })
+
+  return res.map((item:DataModelConfig)=>{
+    try {
+      return JSON.parse(JSON.stringify(item))
+    } catch (e) {
+      ElMessage.error(`${item.name} 模型配置有误, Error: ${e.message}`)
+      return null
+    }
+  }).filter(Boolean)
+
+
+}

package/src/views/designer/modules/data-model/src/hooks/useModelDefaultValue.ts

@@ -0,0 +1,153 @@
+import { markRaw, defineAsyncComponent } from 'vue'
+
+export default ():DataModelConfig=>{
+  return {
+    id: '',
+    name: '',
+    pull: {
+      type: 'static',
+      configValues: {
+        static: {
+          data: [
+            {
+              id: 1,
+              name: '张三',
+              age: 18
+            },
+            {
+              id: 2,
+              name: '李四',
+              age: 19
+            },
+            {
+              id: 3,
+              name: '王五',
+              age: 20
+            }
+          ]
+        },
+        dataView: {
+          id: '',
+          requestSize: 10,
+          requestAll: false,
+          params: {},
+          script: {
+            request: [],
+            response: []
+          }
+        },
+        serviceInterface: {
+          id: '',
+          params: {},
+          method: '',
+          url: '',
+          ip: '',
+          port: '',
+          protocol: '',
+          path: '',
+          script: {
+            request: [],
+            response: []
+          }
+        },
+        categoryDict: {
+          id: ''
+        },
+        script: {
+          type: 'app',
+          id: ''
+        }
+      }
+    },
+    push: {
+      type: 'websocket',
+      configValues: {}
+    },
+    enterParams: {
+      params: [],
+      requestScript: []
+    },
+    leaveParams: {
+      responseIntercept: {
+        type: 'none',
+        selectFieldPaths: [],
+        script: {
+          label: '',
+          value: ''
+        }
+      },
+      dataRecast: {
+        selectFields: [],
+        commonFields: {
+          labelField: '',
+          valueField: '',
+          parentField: '',
+          isTree: false,
+          isToTree: false,
+          childrenField: ''
+        }
+      }
+    },
+    _props: {
+      isEditName: false,
+      inputEl: null
+    }
+  }
+}
+
+export const getModelConfigOptions = ():[
+    ModelTypeOption<'pull'>,
+    ModelTypeOption<'push'>,
+]=>{
+  return [
+    {
+      label: '拉取',
+      id: 'pull',
+      models: [
+        {
+          label: '静态数据',
+          id: 'static',
+          component: markRaw(defineAsyncComponent(()=>import('../components/Static.vue')))
+        },
+        {
+          label: '视图数据',
+          id: 'dataView',
+          component: markRaw(defineAsyncComponent(()=>import('../components/DataView.vue')))
+        },
+        {
+          label: '接口数据',
+          id: 'serviceInterface',
+          component: markRaw(defineAsyncComponent(()=>import('../components/ServiceInterface.vue')))
+        },
+        {
+          label: '字典数据',
+          id: 'categoryDict',
+          component: markRaw(defineAsyncComponent(()=>import('../components/CategoryDict.vue')))
+        },
+        {
+          label: '脚本数据',
+          id: 'script',
+          component: markRaw(defineAsyncComponent(()=>import('../components/ScriptData.vue')))
+        }
+      ]
+    },
+    {
+      label: '推送',
+      id: 'push',
+      models: [
+        {
+          label: 'Websocket',
+          id: 'websocket'
+        },
+        {
+          label: 'MQTT',
+          id: 'mqtt'
+        },
+        {
+          label: 'RocketMQ',
+          id: 'rocketmq'
+        }
+      ]
+    }
+  ]
+}

package/src/views/designer/modules/data-model/src/index.vue

@@ -0,0 +1,374 @@
+<script setup lang='ts'>
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { type ElInput } from 'element-plus';
+import { Button } from '@nextui';
+import { useContextmenu } from '@nextui'
+
+import useModelConfig, { initDataModel } from './hooks/useModelConfig';
+import { getModelConfigOptions } from './hooks/useModelDefaultValue';
+import DataModelPanel from './components/DataModel2.vue'
+
+import Modal from '@/components/nextui/modal/index.vue'
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+
+const props = defineProps<{
+    page: IBSP.IPage.Page
+}>();
+const currentModel = ref<DataModelConfig | null>(null)
+const state = reactive<{
+    currentType: DataModelType,
+    visibleModelParams: boolean
+}>({
+  currentType: 'pull',
+  visibleModelParams: false
+})
+const dataSourceRef = ref<any>(null)
+const currentModel_ = ref<DataModelConfig | null>(null)
+const dataModelParamsRef = ref<any>(null)
+const dataModels = reactive(initDataModel(props.page.pageDataSource));
+const modelConfig = useModelConfig(props as any, dataModels)
+const modelOptions = reactive(getModelConfigOptions())
+const currentModelComponent = computed(() => {
+  const id = currentModel.value?.[state.currentType].type
+  return modelOptions[state.currentType === 'pull' ? 0 : 1].models.find(item => item.id === id)
+})
+const typeOptions = reactive([
+  {
+    id: 'pull',
+    label: '拉取数据'
+  },
+  {
+    id: 'push',
+    label: '推送数据'
+  }
+])
+// #region  --------------------------- 事件处理 ---------------------------
+
+const editModel = (model: DataModelConfig = currentModel.value!) => {
+  if (!model) return
+  model._props.isEditName = true
+  nextTick(() => {
+    const el = (model._props.inputEl as unknown as InstanceType<typeof ElInput>);
+    el.focus()
+    el.select()
+  })
+}
+const onClickAddModel = () => {
+  currentModel.value = modelConfig.addModel()
+  editModel()
+}
+const onClickActiveModel = (model: DataModelConfig) => {
+  currentModel.value = model
+  nextTick(()=>{
+    dataSourceRef.value?.refresh?.()
+  })
+
+}
+const onDblclickModel = (model: DataModelConfig) => {
+  editModel(model)
+}
+const onClickOpenParamConfig = (model: DataModelConfig) => {
+  onClickActiveModel(model)
+  state.visibleModelParams = true
+  currentModel_.value = JSON.parse(JSON.stringify(currentModel.value))
+
+}
+const onClickContextmenu = (item:any) => {
+  useContextmenu([
+    {
+      label: '删除',
+      click: () => {
+        modelConfig.delModel(item.id).then(()=>{
+          if (dataModels.length) {
+            currentModel.value = dataModels[0]
+          }
+        })
+      }
+    }
+  ]).show((item)=>item.click())
+}
+const onOk = ()=>{
+  dataModelParamsRef.value?.saveParams()
+  const itemIndex = dataModels.findIndex(item=>item.id === currentModel_.value?.id)
+  if (itemIndex >= 0) {
+    dataModels[itemIndex] = currentModel_.value as any
+    currentModel.value = currentModel_.value
+
+
+  }
+
+}
+
+// #endregion  --------------------------- 事件处理--end ---------------------------
+onMounted(()=>{
+  if (dataModels.length > 0) {
+    currentModel.value = dataModels[0]
+  }
+
+})
+onBeforeUnmount(() => {
+  props.page.pageDataSource = modelConfig.getModelValues()
+})
+
+</script>
+
+<template>
+  <div class="ibsp-data-model-lib">
+    <div class="data-source-list">
+      <header>
+        <span class="title">
+          <SvgIcon :icon="{
+            type: 'svg',
+            value: '模型仓库'
+          }"
+          />
+          <span style="margin-left: 2px;">模型列表</span>
+        </span>
+        <Button @click="onClickAddModel" class="add-data-btn">新增</Button>
+      </header>
+      <ul class="data-source-list-ul" v-if="dataModels.length">
+        <li v-for="(item) in dataModels"
+            :key="item.id"
+            :class="{ 'active': currentModel?.id === item.id }"
+            @contextmenu.prevent="onClickContextmenu(item)"
+            @click="onClickActiveModel(item)">
+          <div style="width: 100%;" @dblclick="onDblclickModel(item)">
+            <span class="name" v-show="!item._props?.isEditName">{{ item.name }}</span>
+            <ElInput v-model="item.name"
+                     type="text"
+                     :ref="(el: any) => item._props.inputEl = el"
+                     v-show="item._props.isEditName"
+                     @change="item._props.isEditName = false"
+                     @blur="item._props.isEditName = false"
+                     size="small" />
+          </div>
+          <div class="operation">
+            <SvgIcon :icon="{
+                       type: 'svg',
+                       value: '模型参数'
+                     }"
+                     @click.stop="onClickOpenParamConfig(item)" />
+          </div>
+        </li>
+      </ul>
+      <el-empty style="width: 100%;"
+                description="暂无数据模型，请添加"
+                v-else />
+    </div>
+    <!-- ----------------- -->
+    <div class="data-config" v-if="currentModel?.id && dataModels.length">
+      <header>
+        <div class="data-option-item" style="padding-top: 0;width:80%;">
+          <span style="display: flex;align-items: center;" class="label">数据模式</span>
+          <Tabs :style="{
+                  width: '200px'
+                }"
+                v-model="state.currentType"
+                :data="typeOptions" />
+        </div>
+      </header>
+      <main>
+        <div class="data-option-item" style="padding-top: 0;width:80%;">
+          <span style="display: flex;align-items: center;" class="label">数据来源</span>
+          <Tabs
+            v-show="state.currentType === 'pull'"
+            v-model="currentModel.pull.type"
+            :data="modelOptions[0].models" />
+          <Tabs style="width: 300px;"
+                v-show="state.currentType === 'push'"
+                v-model="currentModel.push.type"
+                :data="modelOptions[1].models" />
+        </div>
+        <!-- ------------------- -->
+        <component :is="currentModelComponent?.component"
+                   v-if="currentModelComponent?.component"
+                   :key="currentModelComponent?.id"
+                   :page="page"
+                   ref="dataSourceRef"
+                   :model="currentModel"
+                   v-model="(currentModel[state.currentType].configValues as any)[currentModel?.[state.currentType].type]"
+                   :currentDataSource="currentModel" />
+        <div v-else style="margin: 10px;">未开发...</div>
+      </main>
+    </div>
+    <el-empty  v-else description="请添加" />
+
+    <Modal v-model="state.visibleModelParams"
+           :style="{
+             width: '1200px',
+             height: '700px'
+           }"
+           :title="currentModel?.name"
+           closeDestroyContent
+           @ok="onOk"
+    >
+      <DataModelPanel
+        :currentModel="(currentModel_ as any)"
+        ref="dataModelParamsRef"
+        :page="page" />
+    </Modal>
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-data-model-lib {
+    height: 100%;
+    display: flex;
+    border-top: 1px solid var(--theme-border-color);
+
+    :deep(.el-input) {
+        --el-input-focus-border-color: var(--theme-gl-bg);
+    }
+
+    :deep(.el-select) {
+        --el-select-border-color-hover: var(--theme-gl-bg);
+        --el-select-input-focus-border-color: var(--theme-gl-bg);
+    }
+
+    .add-data-btn,
+    .test-data-btn {
+
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: var(--theme-btn-bg);
+            color: var(--theme-gl-bg);
+            border-color: var(--theme-gl-bg);
+        }
+    }
+
+    .data-source-list {
+        width: 220px;
+        height: 100%;
+        border-right: 1px solid var(--theme-border-color);
+        flex-shrink: 0;
+
+        header {
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 10px;
+            border-bottom: 1px solid var(--theme-border-color);
+
+            .title {
+
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+
+            }
+        }
+
+        ul {
+            list-style: none;
+            padding: 10px;
+            margin: 0;
+            overflow: auto;
+            height: calc(100% - 48px);
+            user-select: none;
+
+            li {
+                height: 40px;
+                line-height: 40px;
+                padding: 0 10px;
+                display: flex;
+                border-radius: 8px;
+                justify-content: space-between;
+                cursor: pointer;
+                align-items: center;
+
+                margin-bottom: 10px;
+
+                &.active {
+                    background-color: var(--theme-next-btn-bg);
+                    color: var(--theme-btn-color);
+                    border: 1px solid var(--theme-gl-bg);
+
+                    :deep(.ibsp-svg-icon) {
+                        --fill: var(--theme-btn-color);
+                    }
+
+                    box-shadow:0px 4px 6px -3px var(--theme-gl-bg);
+                }
+
+                .name {
+                    font-size: 12px;
+                    // 一行超出省略号
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 150px;
+                    display: block;
+                    font-weight: bold;
+
+                }
+
+                :deep(.el-input__wrapper) {
+                    background: var(--theme-bg);
+                }
+
+                .operation {
+                    display: flex;
+                    align-items: center;
+
+                    .el-icon {
+                        cursor: pointer;
+                        margin-left: 10px;
+                    }
+                }
+
+                &:hover .operation {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    .data-config {
+        flex: 1;
+        height: 100%;
+        flex-direction: column;
+
+        padding-top: 0;
+
+
+        header {
+            height: 48px;
+            border-bottom: 1px solid var(--theme-border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 15px;
+            padding-left: 5px;
+        }
+
+        main {
+            height: calc(100% - 48px);
+            overflow: hidden;
+            padding: 0 15px;
+            padding-left: 5px;
+            padding-top: 10px;
+
+        }
+    }
+    >.el-empty{
+      flex: 1;
+      margin-top: -100px;
+    }
+
+    :deep(.data-option-item),.data-option-item {
+            display: flex;
+            padding-top: 15px;
+
+            .label {
+                width: 80px;
+                padding-left: 10px;
+                line-height: 32px;
+                flex-shrink: 0;
+            }
+        }
+}
+</style>onMounted,