super-page-runtime 1.0.14 → 1.0.16

package/components/runtime/views/assemblys/container/form/form-runtime.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-form
+    ref="thisRef"
+    :label-width="runtimeProps.labelWidth"
+    :label-position="runtimeProps.labelPosition"
+    :size="runtimeProps.componentSize"
+    :style="runtimeStyle"
+    :class="runtimeClass"
+  >
+    <template v-for="(element, itemIndex) in configure.items" :key="element.uuid">
+      <ObjectRender :pageContext="pageContext" :configure="element"></ObjectRender>
+    </template>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import ObjectRender from '../../object-render.vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef } from '../../../../../../src/utils/global-refs'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+if (!props.configure.items) {
+  props.configure.items = []
+}
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+//运行时配置
+const runtimeProps: any = runtimeInfo.props ? runtimeInfo.props : {}
+//定义自身详细参数
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+</script>

package/components/runtime/views/assemblys/container/iframe/iframe-runtime.vue

@@ -0,0 +1,32 @@
+<template>
+  <iframe
+    ref="thisRef"
+    :src="configure.props.src"
+    class="amb-widget-container-iframe"
+    :style="runtimeStyle"
+    :class="runtimeClass"
+  >
+  </iframe>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef } from '../../../../../../src/utils/global-refs'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+  indexObj: any
+  selectWidget: any
+}
+const props = defineProps<MyProps>()
+
+//自身引用
+const thisRef = ref(null)
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+//运行时的自身详细参数
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+</script>

package/{src/components → components}/runtime/views/assemblys/container/tabs/tabs-runtime.vue

@@ -32,8 +32,11 @@ import { ref, onMounted } from 'vue'
 import { ElTabs, ElTabPane } from 'element-plus'
 import ObjectRender from '../../object-render.vue'
 import { SuperIcon } from 'agilebuilder-ui'
-import type { Component, PageContext } from '@/components/design/utils/interfaces/page-design-types'
-import { addComponentRef } from '../../../../utils/global-refs'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef } from '../../../../../../src/utils/global-refs'
 interface MyProps {
   pageContext: PageContext
   configure: Component

package/components/runtime/views/assemblys/container/tools/tools-runtime.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="amb-widget-tools-parent">
+    <div
+      class="amb-widget-container-tool amb-widget-tools"
+      :style="runtimeStyle"
+      :class="runtimeClass"
+      ref="thisRef"
+    >
+      <template v-for="(element, itemIndex) in configure.items" :key="element.uuid">
+        <ObjectRender :pageContext="pageContext" :configure="element"></ObjectRender>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import ObjectRender from '../../object-render.vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef } from '../../../../../../src/utils/global-refs'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+
+//自身引用
+const thisRef: any = ref(null)
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+//运行时的自身详细参数
+const runtimeStyle = ref(runtimeInfo.style ? runtimeInfo.style : {})
+const runtimeClass = runtimeInfo.class
+
+//加载后的事件
+let resizeObserver: any = null
+onMounted(() => {
+  //监控父容器的变化
+  if (thisRef.value && thisRef.value.parentNode) {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        //console.log('Element:', entry.target,entry.contentRect);
+        //console.log(`Element size: ${entry.contentRect.width}px x ${entry.contentRect.height}px`);
+        //console.log(`Element padding: ${entry.contentRect.top}px ; ${entry.contentRect.left}px`);
+      }
+      caculatePositionStyle()
+    })
+    // 添加监听器到需要观察的 DOM 元素
+    resizeObserver.observe(thisRef.value.parentNode)
+  }
+})
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+})
+/**
+ * 计算工具栏特有的样式
+ */
+function caculatePositionStyle() {
+  if (thisRef.value && thisRef.value.parentNode) {
+    //位置计算
+    const thisProps = props.configure.props
+    const position = thisProps.position
+    if (position == 'top1' || position == 'bottom1') {
+      const tempStyle: any = {}
+      //position: -webkit-sticky
+      tempStyle['position'] = 'fixed !important'
+      tempStyle['z-index'] = '1'
+      //找展示容器的位置
+      //const contentObj = document.getElementsByClassName("amb-design-board");
+      const contentObj = [thisRef.value.parentNode]
+      if (contentObj && contentObj.length > 0) {
+        const contentRec = contentObj[0].getBoundingClientRect()
+        if (position == 'top') {
+          tempStyle['top'] = contentRec.top + 'px'
+        }
+        if (position == 'bottom') {
+          tempStyle['bottom'] = '10px'
+        }
+      }
+      //与父类一样宽
+      const parentRec = thisRef.value.parentNode.getBoundingClientRect()
+      console.log('parentRec', parentRec)
+      tempStyle['width'] = parentRec.width - 25 + 'px'
+
+      //
+      //设置到对象中
+      Object.assign(runtimeStyle.value, tempStyle)
+      /**const contentObj = document.getElementsByClassName("amb-design-content");
+          if(contentObj&&contentObj.length>0){
+            console.log("contentObj.scrollY",contentObj[0].getBoundingClientRect());
+            const absoluteTop = rect.top + contentObj.scrollY;
+          }*/
+    }
+  }
+}
+</script>

package/components/runtime/views/assemblys/data/bar-code/barcode-attr-base.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-form label-width="80px" size="small">
+    <el-collapse v-model="openCollapseItems" style="margin-top: 6px">
+      <el-collapse-item title="基本" name="base" class="amb-design-attr-group-header">
+        <div style="padding: 8px 0px 0px 0px">
+          <el-form-item label="组件类型" class="amb-design-attr-item">
+            <el-select v-model="configure.name" placeholder="请选择">
+              <el-option
+                v-for="item in getFormComponentOptions()"
+                :key="item.name"
+                :label="item.label"
+                :value="item.name"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="组件名" class="amb-design-attr-item">
+            <el-input v-model="configure.props.base.name" placeholder="请输入" />
+          </el-form-item>
+          <el-form-item label="条码类型" class="amb-design-attr-item">
+            <el-radio-group v-model="configure.props.base.type" class="ml-4">
+              <el-radio value="br-code">条形码</el-radio>
+              <el-radio value="QR-code">二维码</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="条形码格式" class="amb-design-attr-item">
+            <el-select v-model="configure.props.base.format" placeholder="请选择">
+              <el-option label="默认" value="CODE128" />
+              <el-option label="CODE128A" value="CODE128A" />
+              <el-option label="CODE128B" value="CODE128B" />
+              <el-option label="CODE128C" value="CODE128C" />
+              <el-option label="CODE39" value="CODE39" />
+              <el-option label="EAN-13" value="EAN-13" />
+              <el-option label="EAN-8" value="EAN-8" />
+              <el-option label="EAN-5" value="EAN-5" />
+              <el-option label="EAN-2" value="EAN-2" />
+              <el-option label="UPC（A）" value="UPC（A）" />
+              <el-option label="ITF" value="ITF" />
+              <el-option label="ITF-14" value="ITF-14" />
+              <el-option label="MSI" value="MSI" />
+              <el-option label="MSI10" value="MSI10" />
+              <el-option label="MSI11" value="MSI11" />
+              <el-option label="MSI1010" value="MSI1010" />
+              <el-option label="MSI1110" value="MSI1110" />
+              <el-option label="Pharmacode" value="Pharmacode" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" class="amb-design-attr-item">
+            <el-radio-group v-model="configure.props.base.state" class="ml-4">
+              <el-radio value="default">普通</el-radio>
+              <el-radio value="hidden">隐藏</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="数据" name="data" class="amb-design-attr-group-header">
+        <div style="padding: 8px 0px 0px 0px">
+          <el-form-item label="绑定" class="amb-design-attr-item">
+            <el-radio-group v-model="configure.props.base.way" class="ml-4">
+              <el-radio value="data">绑定变量</el-radio>
+              <el-radio value="regulation">绑定规则</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="configure.props.base.way === 'data'"
+            label="绑定变量"
+            class="amb-design-attr-item"
+          >
+            <DataoriginInputtable
+              v-model:modelValue="configure.props.base.bindProp"
+            ></DataoriginInputtable>
+          </el-form-item>
+          <el-form-item
+            v-if="configure.props.base.way === 'regulation'"
+            label="绑定规则"
+            class="amb-design-attr-item"
+          >
+            <DataoriginInputtable
+              v-model:modelValue="configure.props.base.regulation"
+            ></DataoriginInputtable>
+          </el-form-item>
+          <div v-if="dataRule">
+            <el-form-item
+              v-for="(item, index) in dataRule"
+              :key="index"
+              :label="item.name"
+              class="amb-design-attr-item"
+            >
+              <DataoriginInputtable v-model:modelValue="item.date"></DataoriginInputtable>
+            </el-form-item>
+          </div>
+        </div>
+      </el-collapse-item>
+      <CommonAttrSize :size="configure.props.size" />
+    </el-collapse>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
+import Verification from '../../form/common/verification.vue'
+import CommonAttrSize from '../../common/common-attr-size.vue'
+import Title from '../../form/common/title.vue'
+import PreSuffix from '../../form/common/pre-suffix.vue'
+import DataoriginInputtable from '../../form/common/dataorigin-input-table.vue'
+import BarCodeRule from '../../form/common/bar-code-rule.vue'
+
+defineProps({
+  configure: Object,
+  default: () => ({ props: {} })
+})
+const openCollapseItems = ref('')
+const dataRule = ref([])
+const BarCodeRuleOff = ref(false)
+function barCodeRuleSelect(selectArr: []) {
+  dataRule.value = selectArr
+}
+</script>

package/components/runtime/views/assemblys/data/bar-code/barcode-attr.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="amb-design-attr-content">
+    <AttrHeader v-model="currentConfigType" />
+    <div class="amb-design-attr-list">
+      <AttrBase v-show="currentConfigType === 'base'" :configure="configure"></AttrBase>
+      <AttrStyle v-show="currentConfigType === 'style'" :configure="configure"></AttrStyle>
+      <AttrEvent v-show="currentConfigType === 'event'" :configure="configure"></AttrEvent>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import AttrBase from './barcode-attr-base.vue'
+import AttrStyle from './barcode-attr-style.vue'
+import AttrHeader from '../../form/common/attr-header.vue'
+import AttrEvent from './barcode-attr-event.vue'
+import { ref } from 'vue'
+
+defineProps({
+  configure: {
+    type: Object,
+    default: () => ({ title: 'Text', props: { type: 'input-text' } }) // 设置默认值
+  }
+})
+let currentConfigType = ref('base')
+</script>
+<style>
+/* @import '../../../../../../assets/design-attr.css'; */
+</style>

package/components/runtime/views/assemblys/data/bar-code/barcode-design.vue

@@ -0,0 +1,103 @@
+<template>
+  <div :class="designClass" :style="designStyle">
+    <img v-if="designProperty.type === 'QR-code'" :src="qrUrl" />
+    <canvas v-else ref="barcode"></canvas>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue'
+import qrcode from 'qrcode'
+import JsBarcode from 'jsbarcode'
+import {
+  caculateDetailComponentStyle,
+  caculateComponentProps
+} from '../../../../../../src/utils/form-design-util'
+
+const props = defineProps({
+  configure: Object
+})
+
+const qrCodeData = ref('Hello br code')
+const qrUrl = ref('')
+const barcode = ref(null)
+const barcodeFormat = ref('CODE128')
+// 生成条形码
+function createBarCode() {
+  JsBarcode(barcode.value, qrCodeData.value, { format: barcodeFormat.value })
+}
+// 生成二维码
+function createQrCode() {
+  qrcode.toDataURL(qrCodeData.value, (err, url) => {
+    if (err) {
+      console.error(err)
+    } else {
+      qrUrl.value = url
+    }
+  })
+}
+
+function getRestsParameter() {
+  let defineProps = {}
+  const tempProps = {}
+
+  if (props.configure.props.preSuffix) {
+    defineProps = props.configure.props
+  }
+  // 绑定变量
+  if (defineProps['base']['bindProp']) {
+    qrCodeData.value = defineProps['base']['bindProp']
+  }
+
+  // 条形码格式
+  // if (defineProps['base'] && defineProps['base']['format']){
+  // 	barcodeFormat.value = defineProps['base']['format']
+  // }
+
+  // 条码类型
+  if (defineProps['base'] && defineProps['base']['type'] === 'br-code') {
+    // 条形码
+    createBarCode()
+    tempProps['type'] = defineProps['base']['type']
+  }
+
+  if (defineProps['base'] && defineProps['base']['type'] === 'QR-code') {
+    // 二维码
+    createQrCode()
+    tempProps['type'] = defineProps['base']['type']
+  }
+
+  if (tempProps != {}) {
+    for (const tempPropsKey in tempProps) {
+      designProperty.value[tempPropsKey] = tempProps[tempPropsKey]
+    }
+  }
+}
+
+onMounted(() => {
+  createBarCode()
+})
+
+//定义自身详细参数
+const designStyle = ref({})
+const designClass = ref('')
+const designHeaderStyle = ref({})
+const designProperty = ref({})
+//监控配置样式的变化
+watch(
+  props.configure.style,
+  () => {
+    caculateDetailComponentStyle(props.configure, designStyle, designClass, designHeaderStyle)
+  },
+  { immediate: true }
+)
+
+//监控配置属性的变化
+watch(
+  props.configure.props,
+  () => {
+    caculateComponentProps(props.configure, designProperty), getRestsParameter()
+  },
+  { immediate: true }
+)
+</script>
+<style scoped></style>

package/{src/components → components}/runtime/views/assemblys/data/table/main-table-runtime.vue

@@ -25,7 +25,10 @@
 <script lang="ts" setup>
 import { SuperIcon } from 'agilebuilder-ui'
 import { computed, onMounted, watch, ref, onUnmounted } from 'vue'
-import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
 import {
   doAfterClickEvent,
   canExecuteButton,
@@ -41,12 +44,15 @@ import {
   rowClick,
   rowDblClick,
   headerClick
-} from '../../../../utils/events/event-util'
-import { getRealRestApiPath, getListCode } from '../../../../utils/common-util'
-import { getSaveFormRequest, standardEvents } from '../../../../utils/events/standard-event'
+} from '../../../../../../src/utils/events/event-util'
+import { getRealRestApiPath, getListCode } from '../../../../../../src/utils/common-util'
+import {
+  getSaveFormRequest,
+  standardEvents
+} from '../../../../../../src/utils/events/standard-event'
 import { isPromise } from 'agilebuilder-ui/src/utils/common-util'
-import { getDataTypeMap, popupToPage } from '../../../../utils/table-utils'
-// import eventBus from '../../../../utils/eventBus'
+import { getDataTypeMap, popupToPage } from '../../../../../../src/utils/table-utils'
+// import eventBus from '../../../../../../src/utils/eventBus'
 interface MyProps {
   pageContext: PageContext
   configure: Component

package/{src/components → components}/runtime/views/assemblys/data/table/sub-table-runtime.vue

@@ -28,7 +28,10 @@
 </template>
 <script lang="ts" setup>
 import { computed, onMounted, watch, ref } from 'vue'
-import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
 import {
   gridSelectRecord,
   setTableEvents,
@@ -39,12 +42,12 @@ import {
   rowClick,
   rowDblClick,
   headerClick
-} from '../../../../utils/events/event-util'
-import { getVariableValue, setVariableValue } from '../../../../utils/page-helper-util'
-import { getFormModelFields } from '../../../../utils/page-init-util'
-// import eventBus from '../../../../utils/eventBus'
-import { popupToPage } from '../../../../utils/table-utils'
-import { getListCode } from '../../../../utils/common-util'
+} from '../../../../../../src/utils/events/event-util'
+import { getVariableValue, setVariableValue } from '../../../../../../src/utils/page-helper-util'
+import { getFormModelFields } from '../../../../../../src/utils/page-init-util'
+// import eventBus from '../../../../../../src/utils/eventBus'
+import { popupToPage } from '../../../../../../src/utils/table-utils'
+import { getListCode } from '../../../../../../src/utils/common-util'
 interface MyProps {
   pageContext: PageContext
   configure: Component

package/{src/components → components}/runtime/views/assemblys/data/table/table-runtime.vue

@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import { SuperIcon } from 'agilebuilder-ui'
 import { computed, onMounted, watch, ref } from 'vue'
-import { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
-import { getVariableValue, setVariableValue } from '../../../../utils/page-helper-util'
+import { Component, PageContext } from '../../../../../../src/utils/interfaces/page-design-types'
+import { getVariableValue, setVariableValue } from '../../../../../../src/utils/page-helper-util'
 import SubTable from './sub-table-runtime.vue'
 import MainTable from './main-table-runtime.vue'
 interface MyProps {

package/components/runtime/views/assemblys/data/tree/tree-attr.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="amb-design-attr-content">
+    <AttrHeader v-model="currentConfigType" />
+    <div class="amb-design-attr-list">
+      <AttrBase v-show="currentConfigType === 'base'" :configure="configure"></AttrBase>
+      <AttrStyle v-show="currentConfigType === 'style'" :configure="configure"></AttrStyle>
+      <AttrEvent v-show="currentConfigType === 'event'" :configure="configure"></AttrEvent>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import AttrBase from './tree-attr-base.vue'
+import AttrStyle from './tree-attr-style.vue'
+import AttrHeader from '../../form/common/attr-header.vue'
+import AttrEvent from './tree-attr-event.vue'
+import { ref } from 'vue'
+
+defineProps({
+  configure: {
+    type: Object,
+    default: () => ({ title: 'Text', props: { type: 'input-text' } }) // 设置默认值
+  }
+})
+let currentConfigType = ref('base')
+</script>
+<style>
+/* @import '../../../../../../assets/design-attr.css'; */
+</style>

package/components/runtime/views/assemblys/data/tree/tree-design.vue

@@ -0,0 +1,125 @@
+<template>
+  <div :class="designClass" :style="designStyle">
+    <el-tree
+      style="max-width: 600px"
+      :data="designProperty.staticData"
+      :default-expand-all="designProperty.defaultExpand"
+      :expand-on-click-node="designProperty.deployable"
+      :indent="designProperty.retractWidth ? designProperty.retractWidth : 18"
+      :accordion="designProperty.oneNode"
+      :show-checkbox="designProperty.treeSelect"
+      :props="defaultProps"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  caculateDetailComponentStyle,
+  caculateComponentProps
+} from '../../../../../../src/utils/form-design-util'
+import { ref, watch } from 'vue'
+const props = defineProps({
+  configure: Object
+})
+if (props.configure.title == undefined) {
+  props.configure.title = ''
+}
+
+const defaultProps = {
+  children: 'children',
+  label: 'label'
+}
+
+const data = [
+  {
+    label: 'Level one 1',
+    children: [
+      {
+        label: 'Level two 1-1',
+        children: [
+          {
+            label: 'Level three 1-1-1'
+          }
+        ]
+      }
+    ]
+  }
+]
+//定义自身详细参数
+const designStyle = ref({})
+const designClass = ref('')
+const designHeaderStyle = ref({})
+const designProperty = ref({})
+function getRestsParameter() {
+  let defineProps = {}
+  const tempProps = {}
+
+  if (props.configure.props.preSuffix) {
+    defineProps = props.configure.props
+  }
+  // 可选择
+  if (defineProps['base']['treeSelect']) {
+    tempProps['treeSelect'] = defineProps['base']['treeSelect']
+  }
+
+  // 默认展开
+  if (defineProps['base']['defaultExpand']) {
+    tempProps['defaultExpand'] = defineProps['base']['defaultExpand']
+  }
+
+  // 点击节点时展开或收缩节点
+  if (defineProps['base']['deployable']) {
+    tempProps['deployable'] = defineProps['base']['deployable']
+  }
+
+  // 每次只打开一个同级树节点
+  if (defineProps['base']['oneNode']) {
+    tempProps['oneNode'] = defineProps['base']['oneNode']
+  }
+
+  // 每次只打开一个同级树节点
+  if (defineProps['base']['retractWidth']) {
+    tempProps['retractWidth'] = defineProps['base']['retractWidth']
+  }
+
+  // 树形数据
+  try {
+    if (defineProps['dataOrigin']['staticData']) {
+      let str: string = defineProps['dataOrigin']['staticData'].replace(/[\r\n\t\f\v ]+/g, '')
+      tempProps['staticData'] = JSON.parse(str)
+    }
+  } catch (err) {
+    console.log(err)
+  }
+
+  if (tempProps != {}) {
+    for (const tempPropsKey in tempProps) {
+      designProperty.value[tempPropsKey] = tempProps[tempPropsKey]
+    }
+  }
+}
+//监控配置样式的变化
+watch(
+  props.configure.style,
+  () => {
+    caculateDetailComponentStyle(props.configure, designStyle, designClass, designHeaderStyle)
+  },
+  { immediate: true }
+)
+
+//监控配置属性的变化
+watch(
+  props.configure.props,
+  () => {
+    caculateComponentProps(props.configure, designProperty)
+    getRestsParameter()
+    console.log(
+      '%c描述-174733',
+      'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',
+      designProperty.value
+    )
+  },
+  { immediate: true }
+)
+</script>
+<style scoped></style>