super-page-runtime 1.0.16 → 1.0.17

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

@@ -1,99 +0,0 @@
-<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

@@ -1,117 +0,0 @@
-<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-event.vue

@@ -1,14 +0,0 @@
-<template>
-	<el-form label-width="80px" size="small">
-		<AttrEvent :events="events"></AttrEvent>
-	</el-form>
-</template>
-<script lang='ts' setup>
-import { ref, computed, defineEmits } from 'vue';
-import AttrEvent from '../../form/common/attr-event.vue'
-import {getFormComponentOptions} from '../../../../utils/assemblys-config.js'
-defineProps({
-	configure:Object
-});
-const events = ['click', 'remove','show', 'hidden']
-</script>

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

@@ -1,25 +0,0 @@
-<template>
-	<el-form label-width="80px" size="small">
-		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
-			<AttrStyle :configure="configure" :blankOption="blankOption"></AttrStyle>
-		</el-collapse>
-	</el-form>
-</template>
-<script lang='ts' setup>
-import { defineProps } from 'vue';
-import AttrStyle from '../../form/common/attr-style.vue'
-defineProps({
-	configure:Object
-});
-const blankOption = {
-	showTittleFont:false, // 是否显示标题字体
-	showBackground:true, // 是否显示背景
-	showPosition:true, // 是否显示定位
-	showMargin:true, // 是否显示外边距
-	showPadding:true, // 是否显示内边距
-	showBorder:true, // 是否显示边框
-	showShadow:true, // 是否显示阴影
-	showCursor:true, // 是否显示鼠标手势
-	showCustom:true, // 是否显示自定义
-}
-</script>

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

@@ -1,28 +0,0 @@
-<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

@@ -1,103 +0,0 @@
-<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/components/runtime/views/assemblys/data/component/attr-header.vue

@@ -1,69 +0,0 @@
-<template>
-		<div class="amb-design-attr-header">
-				<div class="amb-design-attr-header-type">
-					<label :class="{ selected: clickType === 'base' }" @click="changeType('base')">属性</label>
-					<label :class="{ selected: clickType === 'advanced' }" @click="changeType('advanced')">高级</label>
-					<label :class="{ selected: clickType === 'import' }" @click="changeType('import')">导入配置</label>
-					<label :class="{ selected: clickType === 'style' }" @click="changeType('style')">样式</label>
-					<label :class="{ selected: clickType === 'event' }" @click="changeType('event')">事件</label>
-				</div>
-		</div>
-</template>
-<script lang='ts' setup>
-import { ref, defineProps } from 'vue';
-const props = defineProps({
-		modelValue: {
-			type: String,
-			default: 'base' // 设置默认值
-		}
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const clickType = ref(props.modelValue);
-
-function changeType(type: string) {
-  clickType.value = type;
-  emit('update:modelValue', type);
-};
-</script>
-<style scoped>
-.amb-design-attr-header {
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0px;
-  z-index: 1;
-  text-align: center;
-  padding: 20px 0px 10px 0px;
-}
-.amb-design-attr-header-type {
-  border-radius: 100px 100px 100px 100px;
-  background: #ffffff;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
-  padding: 10px;
-  padding-bottom: 12px;
-	width: 230px;
-	white-space: nowrap;
-	overflow:auto;
-}
-.amb-design-attr-header-type::-webkit-scrollbar {
-  max-width: 6px;
-  height: 6px;
-}
-
-.amb-design-attr-header-type::-webkit-scrollbar-thumb {
-  background: #eaeaea;
-  border: none;
-  border-radius: 4px;
-}
-.amb-design-attr-header-type > label {
-  padding: 4px 14px;
-  cursor: pointer;
-  font-size: 14px;
-}
-.amb-design-attr-header-type > label.selected {
-  border-radius: 100px 100px 100px 100px;
-  background: #5893ef;
-  color: #ffffff;
-}
-</style>

package/components/runtime/views/assemblys/data/component/attr-style.vue

@@ -1,64 +0,0 @@
-<template>
-        <el-collapse-item
-              title="表头"
-              name="tableHeader"
-              class="amb-design-attr-group-header">
-          <div style="padding:8px 0px 0px 0px;">
-	          <el-form-item label="表头Class" class="amb-design-attr-item">
-		          <el-input v-model="configure.style.tableHeader.class" />
-	          </el-form-item>
-	          <el-form-item label="表头Style" class="amb-design-attr-item">
-		          <el-input
-				          v-model="configure.style.tableHeader.style"
-				          style="width: 240px"
-				          :autosize="{ minRows: 4 }"
-				          type="textarea"
-				          placeholder="Please input"
-		          />
-	          </el-form-item>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item
-              title="行背景颜色动态设置"
-              name="rowBackgroundColor"
-              class="amb-design-attr-group-header">
-	        <RowBackgroudColor :list="configure.style.rowStyle" />
-        </el-collapse-item>
-	<CommonStylePosition :configure="configure"/>
-	<CommonStyleMargin v-if="blankOption.showMargin" :configure="configure"/>
-	<CommonStylePadding v-if="blankOption.showPadding" :configure="configure"/>
-	<CommonStyleBorder v-if="blankOption.showBorder" :configure="configure"/>
-	<CommonStyleShadow v-if="blankOption.showShadow" :configure="configure"/>
-	<CommonStyleCursor v-if="blankOption.showCursor" :configure="configure" />
-	<CommonStyleCustom v-if="blankOption.showCustom" :configure="configure" />
-</template>
-<script lang='ts' setup>
-import { defineProps,reactive } from 'vue';
-import DimensionInput from '../../form/common/dimension-input.vue'
-import RowBackgroudColor from './row-backgroud-color.vue'
-import CommonStylePosition from '../../common/common-style-position.vue';
-import CommonStyleMargin from '../../common/common-style-margin.vue';
-import CommonStylePadding from '../../common/common-style-padding.vue';
-import CommonStyleBorder from '../../common/common-style-border.vue';
-import CommonStyleShadow from '../../common/common-style-shadow.vue';
-import CommonStyleCursor from '../../common/common-attr-cursor.vue';
-import CommonStyleCustom from '../../common/common-style-custom.vue';
-const props = defineProps({
-	configure: {
-		type: Object,
-		default: () => ({ }) // 设置默认值
-	},
-	blankOption:{
-		type:Object,
-		default:{
-			showTittleFont:true, // 是否显示标题字体
-			showBackground:true, // 是否显示背景
-			showBorder:true, // 是否显示边框
-			showShadow:true, // 是否显示阴影
-			showCursor:true, // 是否显示鼠标手势
-			showClass:true, // 是否显示class
-			showCustom:true, // 是否显示自定义
-		}
-	}
-});
-</script>