ibsp-fg-page 4.0.2

package/src/views/designer/modules/data-model/src/components/ScriptConfig.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref } from 'vue';
+
+import IbspAddTag from '@/components/ibsp/IbspAddTag.vue';
+const requestScript = ref([])
+const responseScript = ref([])
+
+const delRequestCallback = async (item)=>{
+  return new Promise((resolve, reject)=>{
+    ElMessageBox.confirm('请确认删除该脚本 ! ', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      resolve(true)
+    })
+      .catch(()=>{
+        reject()
+      })
+  })
+}
+
+</script>
+
+<template>
+  <div class="data-option-item">
+    <span class="label">请求拦截</span>
+    <IbspAddTag :delCallback="delRequestCallback"
+                :data="requestScript"
+                :disabledAddBtn="requestScript.length >= 1"
+                add-label="添加脚本" />
+
+  </div>
+  <div class="data-option-item">
+    <span class="label">响应拦截</span>
+    <IbspAddTag :delCallback="delRequestCallback"
+                :data="responseScript"
+                :disabledAddBtn="responseScript.length >= 1"
+                add-label="添加脚本" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.data-option-item {
+  display: flex;
+  align-items: center;
+  padding-top: 10px !important;
+  :deep(.el-tag){
+    margin-bottom: 0;
+  }
+}
+
+</style>

package/src/views/designer/modules/data-model/src/components/ScriptData.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { Tabs } from '@nextui';
+
+import { Button } from '@nextui';
+import IbspSelect from '@/components/ibsp/IbspSelect.vue';
+const props = defineProps({
+  page: {
+    type: Object,
+    default: ()=>({})
+  },
+})
+
+const modelValue = defineModel()
+
+const types = [
+  {
+    label: '应用级',
+    id: 'app'
+  },
+  {
+    label: '平台级',
+    id: 'platform'
+  }
+]
+const scriptList = computed(()=>{
+  return props.page.store.platformLibStore.platformLibData.script[modelValue.value?.type || 'app']
+})
+const onSelectType = ()=>{
+  modelValue.value.id = ''
+}
+const onCLickOpenScript = ()=>{
+// TODO ...
+}
+</script>
+
+<template>
+  <div class="script-data">
+    <div class="data-option-item">
+      <span class="label">脚本类型</span>
+      <Tabs :style="{width:'200px'}"
+            v-model="modelValue.type"
+            :data="types"
+            @select="onSelectType"
+      />
+    </div>
+
+    <div class="data-option-item">
+      <span class="label">选择脚本</span>
+      <IbspSelect v-model="modelValue.id" :options="scriptList" >
+        <template #footer>
+          <Button :style="{width:'88px'}" @click="onCLickOpenScript">脚本管理</Button>
+        </template>
+      </IbspSelect>
+    </div>
+  </div>
+
+</template>
+
+<style>
+
+</style>

package/src/views/designer/modules/data-model/src/components/ServiceInterface.vue

@@ -0,0 +1,248 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
+import { groupBy } from 'lodash-es';
+import { map, foreach } from 'tree-lodash';
+
+import ParamsSelect from './ParamSelect.vue';
+
+import { getServiceInterfaceInfoApi } from '@/api/ibsp-bg-sif'
+import { Tabs } from '@nextui';
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  currentDataSource: {
+    type: Object,
+    default: ()=>({})
+  },
+  model: {
+    type: Object,
+    default: ()=>({})
+  }
+})
+
+const modelValue = defineModel()
+
+const paramsType = ref('path')
+const paramListGroup = ref({})
+const platformStore = props.page.store.platformStore
+const loading = ref(false)
+
+const getParamsForm = (paramList, form = {})=>{
+  paramList.forEach(item=>{
+    if (item.paramDataType === 'array') {
+      form[item.paramCode] = []
+      if (item.children.length) {
+        const resForm = getParamsForm(item.children)
+        form[item.paramCode] = Object.keys(resForm).map(key=>({
+          [key]: resForm[key]
+        }))
+      }
+    } else if (item.paramDataType === 'object') {
+      form[item.paramCode] = {}
+      if (item.children.length) {
+        form[item.paramCode] = getParamsForm(item.children)
+      }
+    } else {
+      form[item.paramCode] = item.defaultValue
+    }
+  })
+  return form
+}
+
+const setParamsForm = (paramList, form)=>{
+  return paramList.map(item=>{
+    if (item.paramDataType === 'array') {
+      if (Array.isArray(form[item.paramCode])) {
+        const resForm = form[item.paramCode].reduce((prev, item)=>{
+          const key = Object.keys(item)[0]
+          prev[key] = item[key]
+          return prev
+        }, {})
+        item.children = setParamsForm(item.children, resForm)
+      }
+    } else if (item.paramDataType === 'object') {
+      if (item.children.length) {
+        item.children = setParamsForm(item.children, form[item.paramCode])
+      }
+    } else {
+      if (Object.hasOwn(form, item.paramCode)) {
+        item.defaultValue = form[item.paramCode]
+      }
+    }
+    return {
+      ...item
+    }
+  })
+}
+
+const getParamListGroup = async (id)=>{
+  loading.value = true
+  const res = await getServiceInterfaceInfoApi(id)
+  modelValue.value.url = res.data?.url
+  modelValue.value.ip = res.data?.ip
+  modelValue.value.method = res.data?.requestMode
+  modelValue.value.port = res.data?.port
+  modelValue.value.protocol = res.data?.protocol
+  modelValue.value.path = res.data?.path
+  loading.value = false
+
+  const exit = modelValue.value.params
+  const exitMap = {}
+  if (Object.values(exit).length) {
+    Object.values(exit).forEach(items=>{
+      foreach(items, (item)=>{
+        exitMap[item.id] = item
+      })
+    })
+  }
+
+  const data = map(res.data?.paramList || [], (item)=>{
+    const exitItem = exitMap[item.id]
+    return {
+      id: item.id,
+      paramPosition: item.paramPosition,
+      paramName: item.paramName,
+      paramCode: item.paramCode,
+      defaultValue: exitItem?.defaultValue || item.defaultValue,
+      paramDataType: item.paramDataType
+    }
+  })
+  return groupBy((data || []), 'paramPosition')
+}
+
+
+const onChangeServiceInterfaceId = async (val) => {
+  paramListGroup.value = await getParamListGroup(val)
+  modelValue.value.params = paramListGroup.value
+}
+
+const data = computed(() => {
+  return Object.keys(paramListGroup.value).map(key => ({
+    label: key,
+    id: key
+  }))
+})
+
+watch(()=>data.value, (data)=>{
+  if (data.length) {
+    paramsType.value = data[0].id
+  }
+})
+
+
+const tableColumns = [
+  {
+    label: '参数名称',
+    prop: 'paramName',
+    width: '140'
+  },
+  {
+    label: '参数编码',
+    prop: 'paramCode',
+    width: '100'
+  },
+  {
+    label: '值类型',
+    prop: 'paramDataType',
+    width: '80'
+  }
+
+]
+
+
+onMounted(()=>{
+  if (modelValue.value.id) {
+    onChangeServiceInterfaceId(modelValue.value.id)
+
+  }
+})
+
+defineExpose({
+  refresh() {
+    if (modelValue.value?.id) {
+      onChangeServiceInterfaceId(modelValue.value.id)
+    }
+  }
+})
+
+
+</script>
+
+<template>
+  <div class="data-serviceInterface">
+    <div class="data-option-item">
+      <span class="label">服务接口</span>
+      <IbspSelect v-model="modelValue.id"
+                  :options="platformStore.platformData.serviceInterfaceData"
+                  placeholder="请选择接口"
+                  clearable
+                  @change="onChangeServiceInterfaceId" />
+    </div>
+    <template v-if="modelValue.id">
+      <div class="data-option-item">
+        <span class="label">参数配置</span>
+        <div class="params-container" v-loading="loading">
+          <Tabs v-model="paramsType"
+                :data="data"
+                :style="{width:(100 * data.length) + 'px'}"></Tabs>
+          <el-table :data="paramListGroup[paramsType]"
+                    style="width: 100%;"
+                    row-key="id"
+                    default-expand-all
+                    :tree-props="{ children: 'children' }"
+                    scrollbar-always-on
+                    height="300"
+          >
+            <el-table-column
+              v-for="item in tableColumns"
+              :key="item.prop"
+              :prop="item.prop"
+              :label="item.label"
+              :width="item.width"/>
+            <el-table-column
+              prop="defaultValue"
+              label="值"
+            >
+              <template #default="{row}">
+                <ParamsSelect
+                  v-model="row.defaultValue"
+                  :options="model.enterParams.params"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+
+        </div>
+      </div>
+
+
+    </template>
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.data-serviceInterface{
+  width: 100%;
+  height: 100%;
+  .params-container{
+    width: calc(100% - 80px);
+    height: 100%;
+    .el-table{
+      margin-top: 10px;
+      border-radius: 6px;
+    }
+
+  }
+  .bind-btn{
+  &:hover{
+    color: var(--theme-gl-bg);
+  }
+}
+
+}
+
+</style>

package/src/views/designer/modules/data-model/src/components/Static.vue

@@ -0,0 +1,236 @@
+<script setup>
+import { ref, computed, reactive } from 'vue'
+import { ElMessage } from 'element-plus';
+
+import EditTable from './EditTable.vue'
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+import { Tabs, Button } from '@nextui';
+import {NextUiMonacoCode} from '@nextui'
+
+const props = defineProps({
+  model: {
+    type: Object,
+    default: ()=>({})
+  }
+
+})
+
+const staticDataType = [
+  {
+    label: '表格',
+    id: 'table'
+  },
+  {
+    label: 'JSON',
+    id: 'json'
+  }
+]
+const dataType = [
+  {
+    label: '数组',
+    id: 'array'
+  },
+  {
+    label: '对象',
+    id: 'object'
+  }
+]
+
+const modelValue = defineModel()
+
+if (typeof modelValue.value.data === 'string') {
+  try {
+    modelValue.value.data = JSON.parse(modelValue.value.data)
+  } catch (error) {
+    ElMessage.error('数据格式不正确，请检查')
+  }
+}
+
+const currentType = ref('table')
+const dataTypeRef = ref('array')
+const editTableRef = ref(null)
+const jsonRef = ref(null)
+const tableOpenState = ref(true)
+const jsonOpenState = ref(false)
+
+const defaultData = ()=>{
+  return [
+    {
+      id: 1,
+      name: '张三',
+      age: 18
+    },
+    {
+      id: 2,
+      name: '李四',
+      age: 19
+    },
+    {
+      id: 3,
+      name: '王五',
+      age: 20
+    }
+  ]
+}
+
+
+const onChange = ()=>{
+  currentType.value = currentType.value === 'table' ? 'json' : 'table'
+  const val = currentType.value
+  if (val === 'json') {
+    tableOpenState.value = false
+    jsonOpenState.value = true
+    const res = editTableRef.value.getResData()
+    modelValue.value.data = JSON.stringify(res, null, 2)
+  } else {
+    try {
+      const jsonData = JSON.parse(modelValue.value.data)
+      modelValue.value.data = jsonData
+      tableOpenState.value = true
+      jsonOpenState.value = false
+    } catch (e) {
+      tableOpenState.value = false
+      jsonOpenState.value = true
+      currentType.value = 'json'
+      ElMessage.error('JSON数据格式错误')
+    }
+
+  }
+}
+
+const onChangeDataType = ()=>{
+  const val = dataTypeRef.value
+  if (val === 'array') {
+    modelValue.value.data = []
+  } else {
+    modelValue.value.data = {}
+  }
+}
+
+defineExpose({
+  refresh() {
+    const d = modelValue.value.data ?? defaultData()
+
+
+    if (currentType.value === 'json') {
+      if (typeof d === 'string') {
+        jsonRef.value.setValue(d)
+      } else {
+        jsonRef.value.setValue(JSON.stringify(d, null, 2))
+      }
+
+
+    } else {
+      if (typeof d === 'string') {
+        try {
+          modelValue.value.data = JSON.parse(d)
+        } catch (error) {
+          ElMessage.error('JSON数据格式错误')
+
+        }
+      }
+
+
+    }
+  },
+  save() {
+    if (currentType.value === 'json') {
+      try {
+        const jsonData = JSON.parse(json.value)
+        props.model.static.data = jsonData
+      } catch (e) {
+        ElMessage.error('JSON数据格式错误')
+        throw new Error('JSON数据格式错误')
+      }
+    } else {
+      const res = editTableRef.value.getResData()
+      props.model.static.data = res
+    }
+
+  }
+})
+
+
+</script>
+
+<template>
+  <div class="static-data">
+    <div class="static-data-type">
+      <div class="data-option-item" >
+        <span class="label">数据类型</span>
+        <div style="display: flex; gap: 10px;">
+          <Tabs
+            style="width:120px;"
+            v-model="dataTypeRef"
+            @select="onChangeDataType"
+            :data="dataType" />
+          <!-- <Tabs
+          style="width:200px;"
+          v-model="currentType"
+          @select="onChange"
+          :data="staticDataType" /> -->
+          <Button @click="onChange">
+            <div  class="switch-btn">
+              <span>切换编辑方式</span>
+              <SvgIcon :icon="{
+                type:'svg',
+                value:'切换'
+              }" />
+              <span>{{ currentType === 'json'?'表格':'json' }}</span>
+            </div>
+          </Button>
+        </div>
+      </div>
+
+    </div>
+    <div class="content">
+      <div class="data-option-item" >
+        <span class="label"></span>
+        <EditTable ref="editTableRef"
+                   v-if="currentType === 'table' && tableOpenState"
+                   :data="modelValue.data" />
+        <NextUiMonacoCode
+          ref="jsonRef"
+          :editorProps="{
+            language:'json'
+          }"
+          v-if="currentType === 'json' && jsonOpenState"
+          v-model="modelValue.data" />
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.static-data{
+    width: 100%;
+    height: 100%;
+    .switch-btn{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 3px;
+            user-select: none;
+          }
+    .static-data-type{
+        height: 48px;
+    }
+    .content{
+        height: calc(100% - 48px);
+        .data-option-item{
+          width: 100%;
+          height: 100%;
+
+          >:not(.label){
+            width: calc(100% - 80px);
+            height: 100%;
+          }
+        }
+    }
+}
+
+</style>

package/src/views/designer/modules/data-model/src/components/TestData.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { ref } from 'vue'
+
+import { NextUiMonacoCode } from '@nextui';
+import { nextTick } from 'vue';
+
+
+const data = ref('')
+const codeRef = ref(null)
+
+defineExpose({
+  setData: (data)=>{
+    nextTick(()=>{
+      codeRef.value.setValue(JSON.stringify(data, null, 2))
+    })
+  }
+})
+
+</script>
+
+<template>
+  <div class="test-data">
+    <NextUiMonacoCode
+      :editorProps="{
+        language: 'json',
+      }"
+      ref="codeRef"
+      v-model="data" />
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.test-data{
+    width: 100%;
+    height: 100%;
+}
+
+</style>