ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-config/configComponentLibs/DataSource/components/ServiceInterface.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { groupBy } from 'lodash-es';
+
+import ScriptConfig from './ScriptConfig.vue'
+
+import { getServiceInterfaceInfoApi } from '@/api/ibsp-bg-sif'
+import { Tabs } from '@nextui';
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const paramsType = ref('path')
+const serviceInterfaceId = ref('')
+const paramListGroup = ref({})
+const platformStore = props.page.store.platformStore
+
+const onChangeServiceInterfaceId = async (val) => {
+  const res = await getServiceInterfaceInfoApi(val)
+  paramListGroup.value = groupBy((res.data?.paramList || []), 'paramPosition')
+}
+const data = computed(() => {
+  return Object.keys(paramListGroup.value).map(key => ({
+    label: key,
+    id: key
+  }))
+})
+
+watch(()=>data.value, (data)=>{
+  const res = data.find(item=>item.id === paramsType.value)
+  if (!res) {
+    paramsType.value = data[0].id
+  }
+})
+
+const tableColumns = [
+  {
+    label: '参数名称',
+    prop: 'paramName',
+    width: '120'
+  },
+  {
+    label: '参数编码',
+    prop: 'paramCode',
+    width: '80'
+  },
+  {
+    label: '值类型',
+    prop: 'paramDataType',
+    width: '80'
+  },
+
+]
+
+const onClickOpenBind = ()=>{
+  console.log('绑定');
+}
+
+</script>
+
+<template>
+  <div class="data-serviceInterface">
+    <div class="data-option-item">
+      <span class="label">选择接口</span>
+      <IbspSelect v-model="serviceInterfaceId"
+                  :options="platformStore.platformData.serviceInterfaceData"
+                  placeholder="请选择接口"
+                  clearable
+                  @change="onChangeServiceInterfaceId" />
+    </div>
+    <template v-if="serviceInterfaceId">
+      <div class="data-option-item">
+        <span class="label">参数配置</span>
+        <div class="params-container">
+          <Tabs v-model="paramsType"
+                :data="data"
+                :style="{width:(100 * data.length) + 'px'}"></Tabs>
+          <el-table :data="paramListGroup[paramsType]"
+                    style="width: 100%;"
+
+                    scrollbar-always-on
+                    max-height="260px">
+            <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}">
+                <el-input v-model="row.defaultValue" clearable>
+                  <template #append>
+                    <el-button size="mini" @click="onClickOpenBind">绑定</el-button>
+                  </template>
+                </el-input>
+              </template>
+            </el-table-column>
+          </el-table>
+
+        </div>
+      </div>
+
+      <ScriptConfig/>
+    </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;
+    }
+
+  }
+}
+
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/DataSource/components/Static.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed, reactive } from 'vue'
+import { ElMessage } from 'element-plus';
+
+import EditTable from './EditTable.vue'
+
+import IbspMonacoCode from '@/components/ibsp/IbspMonacoCode.vue'
+const staticDataType = [
+  {
+    label: '表格编辑',
+    value: 'table'
+  },
+  {
+    label: 'JSON数据',
+    value: 'json'
+  },
+]
+
+const currentType = ref('table')
+const editTableRef = ref(null)
+const jsonRef = ref(null)
+const tableOpenState = ref(true)
+const jsonOpenState = ref(false)
+
+const current = computed(()=>staticDataType.find(item=>item.value === currentType.value))
+
+const data = ref([
+  {
+    id: 1,
+    name: '张三',
+    age: 18,
+  },
+  {
+    id: 2,
+    name: '李四',
+    age: 19,
+  },
+  {
+    id: 3,
+    name: '王五',
+    age: 20,
+  },
+  {
+    id: 4,
+    name: '赵六',
+    age: 21,
+  },
+  {
+    id: 5,
+    name: '田七',
+    age: 22,
+  },
+  {
+    id: 6,
+    name: '刘八',
+    age: 23,
+  },
+])
+
+const json = ref(JSON.stringify(data.value, null, 2))
+
+
+const onChange = (val)=>{
+  if (val === 'json') {
+    const res = editTableRef.value.getResData()
+    json.value = JSON.stringify(res, null, 2)
+    tableOpenState.value = false
+    jsonOpenState.value = true
+    jsonRef.value.updateValue(json.value)
+  } else {
+    try {
+      const jsonData = JSON.parse(json.value)
+      data.value = jsonData
+      tableOpenState.value = true
+      jsonOpenState.value = false
+    } catch (e) {
+      tableOpenState.value = false
+      jsonOpenState.value = true
+      currentType.value = 'json'
+      ElMessage.error('JSON数据格式错误')
+    }
+
+  }
+}
+
+</script>
+
+<template>
+  <div class="static-data">
+    <div class="static-data-type">
+      <div class="data-option-item" >
+        <span class="label">数据类型</span>
+        <el-radio-group v-model="currentType"
+                        size="large"
+                        @change="onChange">
+          <el-radio-button v-for="item in staticDataType"
+                           :value="item.value"
+                           :label="item.value"
+                           :key="item.value">{{item.label}}</el-radio-button>
+        </el-radio-group>
+      </div>
+
+    </div>
+    <div class="content">
+      <div class="data-option-item" >
+        <span class="label">数据类型</span>
+        <EditTable ref="editTableRef"
+                   v-show="currentType === 'table' && tableOpenState"
+                   :data="data" />
+        <IbspMonacoCode language="json"
+                        ref="jsonRef"
+                        v-show="currentType === 'json' && jsonOpenState"
+                        v-model="json" />
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.static-data{
+    width: 100%;
+    height: 100%;
+    .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/ibsp-config/configComponentLibs/DataSource/index.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref, defineAsyncComponent, computed } from 'vue';
+import { Modal } from '@nextui'
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const visible = ref(false)
+const currentDataType = ref('static')
+
+const onClick = () => {
+  visible.value = true
+}
+
+const dataTypes = [
+  {
+    label: '静态数据',
+    value: 'static',
+    component: defineAsyncComponent(() => import('./components/Static.vue'))
+  },
+  {
+    label: '视图数据',
+    value: 'dataView',
+    component: defineAsyncComponent(() => import('./components/DataView.vue'))
+  },
+  {
+    label: '服务接口',
+    value: 'serviceInterface',
+    component: defineAsyncComponent(() => import('./components/ServiceInterface.vue'))
+  },
+  {
+    label: '分类字典',
+    value: 'categoryDict',
+    component: defineAsyncComponent(() => import('./components/CategoryDict.vue'))
+  }
+]
+
+const currentItem = computed(() => dataTypes.find(item => item.value === currentDataType.value))
+
+const onTest = () => {
+  console.log('测试')
+}
+</script>
+
+<template>
+  <div>
+    <el-button class="cancel-btn"
+               size="small"
+               @click="onClick">打开配置
+    </el-button>
+    <Modal v-model="visible"
+           title="数据模型配置"
+           :style="{ width: '700px', height: '75%' }">
+      <div class="data-source-config">
+        <header>
+          <el-radio-group v-model="currentDataType" size="large">
+            <el-radio-button v-for="item in dataTypes"
+                             :value="item.value"
+                             :label="item.value"
+                             :key="item.value">{{ item.label }}</el-radio-button>
+          </el-radio-group>
+          <el-button @click="onTest"
+                     v-show="currentDataType !== 'static'"
+                     size="small">测试</el-button>
+        </header>
+        <main>
+          <component :is="currentItem?.component" :page="page" />
+        </main>
+      </div>
+    </Modal>
+  </div>
+
+
+</template>
+
+<style lang="less" scoped>
+.data-source-config {
+  padding: 15px;
+  height: 100%;
+
+  header {
+    height: 48px;
+    border-bottom: 1px solid var(--theme-border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  main {
+    height: calc(100% - 48px);
+    overflow: hidden;
+
+    :deep(.data-option-item) {
+      display: flex;
+      padding-top: 15px;
+
+      .label {
+        width: 80px;
+        padding-left: 10px;
+        line-height: 32px;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,147 @@
+<script setup>
+import { computed, ref } from 'vue'
+
+import { getConfigComponent } from '../../../hooks/useConfigComponent';
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  modelValue: {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const show = defineModel()
+
+const emit = defineEmits(['handleClose', 'handleSubmit', 'update:modelValue'])
+const submitData = ref([])
+const dialog = ref(true)
+const componentRef = ref(null)
+let callback = null
+/**
+ * 关闭弹窗
+ */
+const handleClose = () => {
+  props.config.componentEvent?.cancel?.({
+    activeComponent: props.activeComponent,
+    config: props.config,
+    configValue: props.configValue
+  })
+  show.value = false
+}
+/**
+ * 提交数据
+ */
+const handleSubmit = () => {
+
+  props.config.componentEvent?.ok?.({
+    activeComponent: props.activeComponent,
+    config: props.config,
+    configValue: props.configValue
+  })
+  if (componentRef.value?.getConfigValue) {
+    let res = componentRef.value?.getConfigValue()
+    props.configValue[props.config.key] = res
+  }
+  show.value = false
+}
+
+
+const slotProps = computed(() => {
+  return props.config.componentProps?.slotProps?.({
+    activeComponent: props.activeComponent,
+    config: props.config,
+    configValue: props.configValue
+  })
+})
+
+const getComponent = computed(() => {
+  const slot = props.config.componentProps?.slot
+  if (slot.componentType) {
+    return getConfigComponent(slot.componentType)
+  }
+  return slot
+})
+
+</script>
+
+<template>
+  <div class="base-dialog">
+    <el-dialog
+      v-model="dialog"
+      :close-on-click-modal="false"
+      :title="config.label"
+      :width="config.componentProps?.width || '50%'"
+      align-center
+      draggable
+      :append-to-body="config.componentProps?.appendToBody ??true "
+      :style="props.config.componentProps?.style"
+      @close="handleClose"
+    >
+      <template #header>
+        <div>{{ config.label }}</div>
+      </template>
+      <div :style="{
+        height:config.componentProps?.height || 'auto',
+      }">
+        <component
+          :is="getComponent"
+          :config="config"
+          :configValue="configValue"
+          ref="componentRef"
+          v-bind="slotProps"
+          :activeComponent="activeComponent">
+        </component>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确认</el-button>
+          <el-button @click="handleClose">取消</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.base-dialog {
+
+  :deep(.el-overlay){
+    z-index: 2000 !important;
+  }
+    :deep(.el-dialog) {
+      background-color: var(--theme-bg);
+
+
+      &__header {
+        box-shadow: inset 0px -1px 0px 0px #363841;
+        padding: 10px;
+        margin: 0;
+        font-size: 18px;
+
+        .el-dialog__headerbtn {
+          height: 47px;
+          top: 0;
+        }
+      }
+
+      &__footer {
+        border-top: 1px solid #363841;
+        text-align: left;
+      }
+    }
+}
+</style>