11 changed files with 409 additions and 44 deletions
@ -0,0 +1,181 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 李文轩 |
||||
|
@ 时间: 2024-01-02 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> |
||||
|
|
||||
|
<LowcodeCarousel></LowcodeCarousel> |
||||
|
</template> |
||||
|
<script lang='ts' setup> |
||||
|
import LowcodeCarousel from './lowcodeCarousel.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> |
||||
@ -0,0 +1,40 @@ |
|||||
|
<template> |
||||
|
<el-carousel class="lowcodeCarsousel"> |
||||
|
<el-carousel-item v-for="item in 4" :key="item"> |
||||
|
<h3 class="small justify-center" text="2xl">{{ item }}</h3> |
||||
|
</el-carousel-item> |
||||
|
</el-carousel> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.lowcodeCarsousel{ |
||||
|
height:300px; |
||||
|
width:550px; |
||||
|
} |
||||
|
.demonstration { |
||||
|
color: var(--el-text-color-secondary); |
||||
|
} |
||||
|
|
||||
|
.el-carousel__item h3 { |
||||
|
color: #475669; |
||||
|
opacity: 0.75; |
||||
|
line-height: 150px; |
||||
|
margin: 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.el-carousel__item:nth-child(2n) { |
||||
|
background-color: #99a9bf; |
||||
|
} |
||||
|
|
||||
|
.el-carousel__item:nth-child(2n + 1) { |
||||
|
background-color: #d3dce6; |
||||
|
} |
||||
|
</style> |
||||
@ -1,11 +1,13 @@ |
|||||
<template> |
<template> |
||||
<video :src="lowcodevideoStore.videoResource" loop controls style="width:70%;max-width: 800px;"></video> |
<video :src="videoUrl" loop controls></video> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
|
|
||||
import uselowcodevideoStore from '@/store/modules/lowcodevideo' |
import uselowcodevideoStore from '@/store/modules/lowcodevideo' |
||||
const lowcodevideoStore = uselowcodevideoStore(); |
const lowcodevideoStore = uselowcodevideoStore(); |
||||
|
const videoUrl = ""; |
||||
|
|
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
|
|||||
Loading…
Reference in new issue