图片组件

src/widget/lowcodeimage/index.vue

@@ -0,0 +1,181 @@
+<!--
+@ 作者: 李文轩
+@ 时间: 2024-03-14 13:49:57
+@ 备注: 
+-->
+<template>
+    <el-form-item 
+        v-bind="data.item"
+		:prop="tProp || data.name"
+		:class="config.className"
+		:rules="itemRules as any"
+		:label="getLabel(data.item as FormItem)"
+    >
+        <input  v-model="value" type="hidden" >
+    </el-form-item>
+
+    <LowcodeImage :data="props.data"></LowcodeImage>
+</template>
+<script lang='ts' setup>
+import LowcodeImage   from './lowcodeImage.vue';
+import { 
+	constControlChange,
+    constFormProps,
+} from '@/api/DesignForm/utils'
+import validate from '@/api/DesignForm/validate'
+import { FormItem, FormList } from '@/api/DesignForm/types'
+const props = withDefaults(
+    defineProps<{
+		data: FormList
+		tablekey: any
+		numrun?: number
+		modelValue?: any // 子表和弹性布局时时有传
+		tProp?: string // 子表时的form-item的prop值，用于子表校验用
+    }>(),
+    {}
+)
+const emits = defineEmits<{
+    (e: 'update:modelValue', numVal: any): void
+}>()
+
+const formProps = inject(constFormProps, {}) as any
+const type = computed(() => {
+    return formProps.value.type
+})
+const config = computed(() => {
+    return props.data.config || {}
+})
+
+const changeEvent = inject(constControlChange, '') as any
+
+const value = computed({
+    get() {
+		if (props.tProp) {
+			// 表格和弹性布局
+			return props.modelValue
+		} else {
+			return formProps.value.model[props.data.name]
+		}
+    },
+    set(newVal: any) {
+		if (props.tProp) {
+			emits('update:modelValue', newVal)
+		}
+		updateModel(newVal)
+    }
+})
+const updateModel = (val: any) => {
+	let controlAttribute = ""
+	if(props.data.control){
+		if(props.data.control.type){
+			controlAttribute = props.data.control.type
+		}
+	}
+    changeEvent &&
+    changeEvent({
+        key: props.data.name,
+        value: val,
+        data: props.data,
+        tProp: props.tProp,
+		type: props.data.type,
+		attribute: controlAttribute
+    })
+}
+
+
+
+const getLabel = (ele: FormItem) => {
+    const showColon = formProps.value.showColon ? '：' : ''
+    if (ele) {
+    	return ele.showLabel ? '' : ele.label + showColon
+    } else {
+      	return ''
+    }
+}
+
+// 返回当前item项的校验规则
+const itemRules = computed(() => {
+    let temp
+    const itemR: any = props.data.item?.rules || []
+    const customR = formatCustomRules()
+    // 如果三个都没有设置，则返回undefined
+    if (itemR?.length || customR?.length) {
+      	temp = [...customR, ...itemR]
+    }
+    return temp
+})
+// 处理自定义校验规则，将customRules转换后追加到rules里
+const formatCustomRules = () => {
+    const rulesReg: any = {}
+    validate &&
+    validate.forEach(item => {
+        rulesReg[item.type] = item.regExp
+    })
+
+    // 获取校验方法 父级使用provide方法注入
+    const temp: any = []
+    props.data.customRules?.forEach((item: any) => {
+		if (!item.message && item.type !== 'methods') {
+			return // 方法时允许提示信息为空
+		}
+		let obj = {}
+		if (item.type === 'required') {
+			obj = { required: true }
+		} else if (item.type === 'rules') {
+			// 自定义表达式
+			obj = { pattern: item.rules }
+		} else if (item.type === 'methods') {
+			// 方法时
+			const methods: any = item.methods
+			if (methods) {
+			obj = { validator: inject(methods, {}) }
+			}
+		} else if (item.type) {
+			obj = { pattern: rulesReg[item.type as string] }
+		}
+		// 这里判断下防某些条件下重复push的可能或存重复校验类型
+		let message: any = { message: item.message }
+		if (!item.message) {
+			// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
+			message = {}
+		}
+		temp.push(
+			Object.assign(
+				{
+					trigger: item.trigger || 'blur'
+				},
+				obj,
+				message
+			)
+		)
+    })
+    return temp
+}
+
+
+
+
+
+
+
+
+</script>
+<style  lang='scss' scoped>
+.imgbox{
+    padding: 0 5px;
+    max-width: 300px;
+    max-height: 200px;
+    width: 100%;
+    height: 200px;
+    .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: var(--el-fill-color-light);
+        color: var(--el-text-color-secondary);
+        font-size: 30px;
+    }
+}
+</style>

src/widget/lowcodeimage/lowcodeImage.vue

@@ -0,0 +1,147 @@
+<template>
+
+
+  <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" />
+
+
+</template>
+
+<script setup >
+
+import errimg from '@/assets/404_images/imgNotFound.png'
+
+
+const props = defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  data: {
+    type: Object,
+  }
+})
+/* 
+  
+*/
+let styleObject = {
+
+}
+let url = props.data?.control.imgUrl
+if(props.data?.control.imgUrl===''){
+  url = errimg
+}else{
+  url = props.data?.control.imgUrl
+}
+
+const fitNum = props.data?.control.fit
+
+
+let fit= ''
+
+switch (fitNum) {
+  case 1:
+    fit = "fill";
+    break;
+  case 2:
+    fit = "contain";
+    break;
+  case 3:
+    fit = "cover";
+    break;
+  case 4:
+    fit = "none";
+    break;
+  case 5:
+    fit = "scale-down";
+    break;
+}
+
+const showMode = props.data?.control.showMode
+
+if (showMode==='自定义像素值') {
+  const pxWidth = props.data?.control.pxWidth
+  const pxHeight = props.data?.control.pxHeight
+  styleObject.width = pxWidth+'px';
+  styleObject.height = pxHeight+'px';
+}else{
+  const widthPercent = props.data?.control.widthPercent
+  const heightPercent = props.data?.control.heightPercent
+  styleObject.width = widthPercent+'%';
+  styleObject.height = heightPercent+'%';
+}
+
+const radius = props.data?.control.radius
+const radiusClass = ref('');
+let radiusClassIsActive = false
+let radiusNum = props.data?.control.radiusNum+'px'
+if(radius === true ){
+  radiusClass.value = 'radius'
+  radiusClassIsActive = true
+}
+
+const mt = props.data?.control.mt+'px'
+const mb = props.data?.control.mb+'px'
+const ml = props.data?.control.ml+'px'
+const mr = props.data?.control.mr+'px'
+const pt = props.data?.control.pt+'px'
+const pb = props.data?.control.pb+'px'
+const pl = props.data?.control.pl+'px'
+const pr = props.data?.control.pr+'px'
+const mp = ref('mp')
+
+const floatStyle = ref('floatStyle')
+const floatFlag = props.data?.control.floatFlag
+const floatValue = props.data?.control.floatValue
+
+const boderAndShadowClass = ref('');
+const boderAndShadow = props.data?.control.boderAndShadow
+let boderAndShadowClassIsActive = false
+if(boderAndShadow === true ){
+  boderAndShadowClass.value = 'boderAndShadow'
+  boderAndShadowClassIsActive = true
+}
+
+function handleLink(item){
+  console.log("handleLink")
+  let url = "";
+  let urlStart = 'http://'
+  // http://  7
+  //https://  8
+  if (item.link.length < 7) {
+    if (item.link == '') {
+      alert("未配置跳转地址")
+      return
+    }
+    url = urlStart + "" + item.link
+  } else {
+    const linkStartComplete1 = item.link.startsWith("http://")
+    const linkStartComplete2 = item.link.startsWith("https://")
+    if (linkStartComplete1 || linkStartComplete2) {
+      url = item.link
+    } else {
+      url = urlStart + "" + item.link
+    }
+  }
+  window.open(url, '_blank')
+}
+
+</script>
+
+<style>
+.boderAndShadow {
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+.radius {
+  border-radius: v-bind(radiusNum);
+}
+.mp {
+  margin-top: v-bind(mt);
+  margin-bottom: v-bind(mb);
+  margin-left:v-bind(ml);
+  margin-right:v-bind(mr);
+  padding-top: v-bind(pt);
+  padding-bottom: v-bind(pb);
+  padding-left: v-bind(pl);
+  padding-right: v-bind(pr);
+}
+.floatStyle {
+  float: v-bind(floatValue);
+}
+</style>