super-page-runtime 1.0.15 → 1.0.16

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-event.vue

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

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

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

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

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