7 changed files with 534 additions and 56 deletions
@ -0,0 +1,202 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-06-21 13:06:34 |
|||
@ 备注: 创建人 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo' |
|||
import { constControlChange,constFormProps } from '@/api/DesignForm/utils' |
|||
import { FormItem, FormList } from '@/api/DesignForm/types' |
|||
import validate from '@/api/DesignForm/validate' |
|||
import { getPeopleKey,getUserCont } from '@/api/hr/people/index' |
|||
|
|||
import Tooltips from '@/components/DesignForm/tooltip.vue' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList |
|||
tablekey: any |
|||
numrun?: number |
|||
modelValue?: any // 子表和弹性布局时时有传 |
|||
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
const formProps = inject(constFormProps, {}) as any |
|||
const config = computed(() => { |
|||
return props.data.config || {} |
|||
}) |
|||
const type = computed(() => { |
|||
return formProps.value.type |
|||
}) |
|||
// 返回当前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 |
|||
} |
|||
const getLabel = (ele: FormItem) => { |
|||
const showColon = formProps.value.showColon ? '：' : '' |
|||
if (ele) { |
|||
return ele.showLabel ? '' : ele.label + showColon |
|||
} else { |
|||
return '' |
|||
} |
|||
} |
|||
//组件css部分 |
|||
const configStyle = computed(() => { |
|||
return props.data.styles || {} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-01 09:07:11 |
|||
@ 功能: 布局处理 |
|||
*/ |
|||
const getFormItemLableStyle = (ele: any) => { |
|||
if(ele?.labelStyle){ |
|||
// console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle)) |
|||
return AnalysisCss(ele?.labelStyle) |
|||
} |
|||
} |
|||
const getFormItemInputStyle = (ele: any,sty:number) => { |
|||
if(ele?.inputStyle){ |
|||
// console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) |
|||
return AnalysisInputCss(ele?.inputStyle,sty) |
|||
} |
|||
} |
|||
const msg = ref("") |
|||
const value = computed({ |
|||
get() { |
|||
let zhiVal = props.modelValue |
|||
if (props.tProp) { |
|||
} else { |
|||
zhiVal = formProps.value.model[props.data.name] |
|||
} |
|||
if(zhiVal && zhiVal != ""){ |
|||
getPeopleKey({id:zhiVal}) |
|||
.then((data:any)=>{ |
|||
if(data.code == 0){ |
|||
msg.value = data.data.Name + "（" + data.data.Number + "）" |
|||
} |
|||
}) |
|||
}else{ |
|||
getUserCont() |
|||
.then((data:any)=>{ |
|||
console.log("获取人员信息",data) |
|||
if(data.code == 0){ |
|||
msg.value = data.data.nickname + "（" + data.data.number + "）" |
|||
} |
|||
}) |
|||
} |
|||
return msg.value |
|||
}, |
|||
set(newVal: any) { |
|||
if(newVal != null && newVal != "") { |
|||
newVal=newVal*1 |
|||
} |
|||
if (props.tProp) { |
|||
|
|||
emits('update:modelValue', newVal) |
|||
} |
|||
console.log("设置初始值-----》",newVal) |
|||
updateModel(newVal*1) |
|||
} |
|||
}) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-06-21 14:11:15 |
|||
@ 功能: 获取表单创建人 |
|||
*/ |
|||
const getFormFounder = (val: any) => { |
|||
console.log("获取表单创建人",val) |
|||
getPeopleKey({id:val}) |
|||
.then((data:any)=>{ |
|||
console.log("获取初始值-----》",data) |
|||
return data |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-form-item |
|||
v-bind="data.item" |
|||
:prop="tProp || data.name" |
|||
:class="config.className" |
|||
:label="getLabel(data.item as FormItem)" |
|||
:rules="itemRules as any" |
|||
> |
|||
<template v-if="config.help" #label > |
|||
<span :style="getFormItemLableStyle(configStyle)">{{ getLabel(data.item) }}</span> |
|||
<Tooltips :content="config.help" /> |
|||
</template> |
|||
<template #label v-else> |
|||
<span :style="getFormItemLableStyle(configStyle)" >{{ getLabel(data.item) }}</span> |
|||
</template> |
|||
<div v-if="type === 4" class="form-value" v-html="value"></div> |
|||
<template v-else> |
|||
<el-input v-model="value" :style="getFormItemInputStyle(configStyle,2)" :input-style="getFormItemInputStyle(configStyle,3)" placeholder="系统自动生成" disabled></el-input> |
|||
</template> |
|||
</el-form-item> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,185 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-06-22 14:35:29 |
|||
@ 备注: 创建时间 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo' |
|||
import { constControlChange,constFormProps } from '@/api/DesignForm/utils' |
|||
import { FormItem, FormList } from '@/api/DesignForm/types' |
|||
import validate from '@/api/DesignForm/validate' |
|||
import { getPeopleKey,getUserCont } from '@/api/hr/people/index' |
|||
|
|||
import Tooltips from '@/components/DesignForm/tooltip.vue' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList |
|||
tablekey: any |
|||
numrun?: number |
|||
modelValue?: any // 子表和弹性布局时时有传 |
|||
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
const formProps = inject(constFormProps, {}) as any |
|||
const config = computed(() => { |
|||
return props.data.config || {} |
|||
}) |
|||
const type = computed(() => { |
|||
return formProps.value.type |
|||
}) |
|||
// 返回当前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 |
|||
} |
|||
const getLabel = (ele: FormItem) => { |
|||
const showColon = formProps.value.showColon ? '：' : '' |
|||
if (ele) { |
|||
return ele.showLabel ? '' : ele.label + showColon |
|||
} else { |
|||
return '' |
|||
} |
|||
} |
|||
//组件css部分 |
|||
const configStyle = computed(() => { |
|||
return props.data.styles || {} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-01 09:07:11 |
|||
@ 功能: 布局处理 |
|||
*/ |
|||
const getFormItemLableStyle = (ele: any) => { |
|||
if(ele?.labelStyle){ |
|||
// console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle)) |
|||
return AnalysisCss(ele?.labelStyle) |
|||
} |
|||
} |
|||
const getFormItemInputStyle = (ele: any,sty:number) => { |
|||
if(ele?.inputStyle){ |
|||
// console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) |
|||
return AnalysisInputCss(ele?.inputStyle,sty) |
|||
} |
|||
} |
|||
|
|||
const value = computed({ |
|||
get() { |
|||
let zhiVal = "" |
|||
if (props.tProp) { |
|||
// 表格和弹性布局 |
|||
zhiVal = props.modelValue |
|||
|
|||
} else { |
|||
zhiVal = formProps.value.model[props.data.name] |
|||
|
|||
} |
|||
if(zhiVal != null && zhiVal != "") { |
|||
return zhiVal |
|||
}else{ |
|||
return getCurrentTime() |
|||
} |
|||
|
|||
}, |
|||
set(newVal: any) { |
|||
if(newVal != null && newVal != "") { |
|||
newVal=newVal*1 |
|||
} |
|||
if (props.tProp) { |
|||
|
|||
emits('update:modelValue', newVal) |
|||
} |
|||
updateModel(newVal*1) |
|||
} |
|||
}) |
|||
//获取系统当前时间 |
|||
const getCurrentTime = () => { |
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
const month = now.getMonth() + 1; // 月份是从0开始的 |
|||
const day = now.getDate(); |
|||
const hours = now.getHours(); |
|||
const minutes = now.getMinutes(); |
|||
const seconds = now.getSeconds(); |
|||
|
|||
return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-form-item |
|||
v-bind="data.item" |
|||
:prop="tProp || data.name" |
|||
:class="config.className" |
|||
:label="getLabel(data.item as FormItem)" |
|||
:rules="itemRules as any" |
|||
> |
|||
<template v-if="config.help" #label > |
|||
<span :style="getFormItemLableStyle(configStyle)">{{ getLabel(data.item) }}</span> |
|||
<Tooltips :content="config.help" /> |
|||
</template> |
|||
<template #label v-else> |
|||
<span :style="getFormItemLableStyle(configStyle)" >{{ getLabel(data.item) }}</span> |
|||
</template> |
|||
<div v-if="type === 4" class="form-value" v-html="value"></div> |
|||
<template v-else> |
|||
<el-input v-model="value" :style="getFormItemInputStyle(configStyle,2)" :input-style="getFormItemInputStyle(configStyle,3)" placeholder="系统自动生成" disabled></el-input> |
|||
</template> |
|||
</el-form-item> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue