herenshan112
6 months ago
42 changed files with 2225 additions and 63 deletions
@ -0,0 +1,182 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 15:54:32 |
||||
|
@ 备注: 多选控件 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
||||
|
import { |
||||
|
formatNumber, |
||||
|
constFormProps |
||||
|
} from '@/api/lowCode/utils'; |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
tablekey: any |
||||
|
numrun?: number |
||||
|
modelValue?: any // 子表和弹性布局时时有传 |
||||
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
||||
|
types?:number |
||||
|
control:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits(['update:modelValue','pageIdAry']) |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const config = computed(() => { |
||||
|
return props.data.config || {} |
||||
|
}) |
||||
|
const type = computed(() => { |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 14:25:01 |
||||
|
@ 功能: 获取组件名称 |
||||
|
*/ |
||||
|
const getLabel = (val:any) => { |
||||
|
if(val.label){ |
||||
|
return val.label; |
||||
|
}else{ |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-11-13 14:36:08 |
||||
|
@ 功能: 解析css |
||||
|
*/ |
||||
|
const getFormItemLableStyle = (ele: any) => { |
||||
|
if(ele?.labelStyle){ |
||||
|
// console.log("返回栅格宽度3",AnalysisCss(ele)) |
||||
|
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) |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-27 15:11:42 |
||||
|
@ 功能: 判断是否禁用 |
||||
|
*/ |
||||
|
const judgeIsDisabled = (key:string) => { |
||||
|
return false |
||||
|
if (type.value === 3) { |
||||
|
return true // 查看模式，为不可编辑状态 |
||||
|
} |
||||
|
if (type.value === 1 && config.value.addDisabled) { |
||||
|
return true |
||||
|
} |
||||
|
if (type.value === 2 && config.value.editDisabled) { |
||||
|
return true // 编辑模式 |
||||
|
} |
||||
|
if(props.nodeKey != undefined && props.purview != undefined && props.purview != null && props.purview != null && props.purview != "" && props.purview != "") { |
||||
|
if(props.purview.length < 1){ |
||||
|
return false; |
||||
|
}else{ |
||||
|
let isShow = true; |
||||
|
props.purview.forEach((item)=>{ |
||||
|
if(item.nodeKey == props.nodeKey){ |
||||
|
|
||||
|
if(item.powerAry && item.powerAry.length > 0){ |
||||
|
item.powerAry.forEach((itm)=>{ |
||||
|
if(itm.id == key){ |
||||
|
console.log("判断此组件是否禁用",itm,itm.id == key,"--------->",itm.isLook) |
||||
|
isShow = !itm.isEdit |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
return isShow |
||||
|
} |
||||
|
}else{ |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
/****input slot处理***/ |
||||
|
const getInputSlot = (key?: string) => { |
||||
|
const slot = key === 'p' ? config.value.prepend : config.value.append |
||||
|
const has = slot.indexOf('key:') === 0 |
||||
|
if (!has) { |
||||
|
return false |
||||
|
} |
||||
|
const slotKey = slot.replace('key:', '') |
||||
|
const control = getControlByName(slotKey) |
||||
|
if (!control || Object.keys(control)?.length === 0) { |
||||
|
return false |
||||
|
} |
||||
|
return control |
||||
|
} |
||||
|
// 选择数据转换，默认尝试转数字 |
||||
|
const transformOption = (val: string | number, type?: string) => { |
||||
|
switch (config.value.transformData || type) { |
||||
|
case 'none': |
||||
|
return val |
||||
|
case 'string': |
||||
|
try { |
||||
|
return val.toString() |
||||
|
} catch (e) { |
||||
|
return val |
||||
|
} |
||||
|
} |
||||
|
return formatNumber(val) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 11:13:06 |
||||
|
@ 功能: 输出结果 |
||||
|
*/ |
||||
|
const valPrint = (val:any[],orgList:any[]) => { |
||||
|
let title = new Array |
||||
|
if(Array.isArray(val)){ |
||||
|
if(Array.isArray(orgList)){ |
||||
|
val.forEach((vitem: any) => { |
||||
|
orgList.forEach((item: any) => { |
||||
|
if(vitem==item.value){ |
||||
|
title.push(item.label) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
return title.join("、") |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-checkbox-group |
||||
|
v-if="props.types!=3" |
||||
|
v-bind="control" |
||||
|
v-model="value" |
||||
|
:style="getFormItemInputStyle(configStyle,4)" |
||||
|
> |
||||
|
<el-checkbox |
||||
|
v-for="(item, index) in props.data.options" |
||||
|
:key="index" |
||||
|
:label="transformOption(item.value)" |
||||
|
> |
||||
|
<span :style="getFormItemInputStyle(configStyle,5)">{{ item.label }}</span> |
||||
|
</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
<el-text v-else class="wordColor">{{valPrint(value,props.data.options)}}</el-text> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,45 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-11 13:47:22 |
||||
|
@ 备注: 取色器 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
modelValue?: string |
||||
|
disabled?: boolean |
||||
|
data?:any |
||||
|
types?:number |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits<{ |
||||
|
(e: 'update:modelValue', value: string): void |
||||
|
}>() |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const control = computed(() => { |
||||
|
if(props.data.type == "upload"){ |
||||
|
props.data.control.action = uploadUrl |
||||
|
} |
||||
|
return props.data.control |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-color-picker v-if="props.types!=3" v-model="value" v-bind="control" /> |
||||
|
<div v-else :style="'padding:5px;background-color:'+value"><el-text class="wordColor">{{value}}</el-text></div> |
||||
|
|
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,37 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-11 11:11:16 |
||||
|
@ 备注: 计数组件 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
modelValue?: string |
||||
|
disabled?: boolean |
||||
|
data?:any |
||||
|
types?:number |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits<{ |
||||
|
(e: 'update:modelValue', value: string): void |
||||
|
}>() |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-input-number v-if="props.types!=3" v-model="value" /> |
||||
|
<el-text v-else class="wordColor">{{value}}</el-text> |
||||
|
|
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,167 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 15:34:04 |
||||
|
@ 备注: 单行文本及密码 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
||||
|
import { |
||||
|
constFormProps |
||||
|
} from '@/api/lowCode/utils'; |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
tablekey: any |
||||
|
numrun?: number |
||||
|
modelValue?: any // 子表和弹性布局时时有传 |
||||
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
||||
|
types?:number |
||||
|
control:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits(['update:modelValue','pageIdAry']) |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const config = computed(() => { |
||||
|
return props.data.config || {} |
||||
|
}) |
||||
|
const type = computed(() => { |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 14:25:01 |
||||
|
@ 功能: 获取组件名称 |
||||
|
*/ |
||||
|
const getLabel = (val:any) => { |
||||
|
if(val.label){ |
||||
|
return val.label; |
||||
|
}else{ |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-11-13 14:36:08 |
||||
|
@ 功能: 解析css |
||||
|
*/ |
||||
|
const getFormItemLableStyle = (ele: any) => { |
||||
|
if(ele?.labelStyle){ |
||||
|
// console.log("返回栅格宽度3",AnalysisCss(ele)) |
||||
|
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) |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-27 15:11:42 |
||||
|
@ 功能: 判断是否禁用 |
||||
|
*/ |
||||
|
const judgeIsDisabled = (key:string) => { |
||||
|
return false |
||||
|
if (type.value === 3) { |
||||
|
return true // 查看模式，为不可编辑状态 |
||||
|
} |
||||
|
if (type.value === 1 && config.value.addDisabled) { |
||||
|
return true |
||||
|
} |
||||
|
if (type.value === 2 && config.value.editDisabled) { |
||||
|
return true // 编辑模式 |
||||
|
} |
||||
|
if(props.nodeKey != undefined && props.purview != undefined && props.purview != null && props.purview != null && props.purview != "" && props.purview != "") { |
||||
|
if(props.purview.length < 1){ |
||||
|
return false; |
||||
|
}else{ |
||||
|
let isShow = true; |
||||
|
props.purview.forEach((item)=>{ |
||||
|
if(item.nodeKey == props.nodeKey){ |
||||
|
|
||||
|
if(item.powerAry && item.powerAry.length > 0){ |
||||
|
item.powerAry.forEach((itm)=>{ |
||||
|
if(itm.id == key){ |
||||
|
console.log("判断此组件是否禁用",itm,itm.id == key,"--------->",itm.isLook) |
||||
|
isShow = !itm.isEdit |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
return isShow |
||||
|
} |
||||
|
}else{ |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
/****input slot处理***/ |
||||
|
const getInputSlot = (key?: string) => { |
||||
|
const slot = key === 'p' ? config.value.prepend : config.value.append |
||||
|
const has = slot.indexOf('key:') === 0 |
||||
|
if (!has) { |
||||
|
return false |
||||
|
} |
||||
|
const slotKey = slot.replace('key:', '') |
||||
|
const control = getControlByName(slotKey) |
||||
|
if (!control || Object.keys(control)?.length === 0) { |
||||
|
return false |
||||
|
} |
||||
|
return control |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-input |
||||
|
v-if="props.types!=3" |
||||
|
v-bind="control" |
||||
|
v-model="value" |
||||
|
:type="data.type === 'password' ? 'password' : 'text'" |
||||
|
:style="getFormItemInputStyle(configStyle,2)" |
||||
|
:input-style="getFormItemInputStyle(configStyle,3)" |
||||
|
:placeholder="data.control.placeholder?data.control.placeholder:'请输入'+getLabel(data.item)" |
||||
|
> |
||||
|
<template #prepend v-if="config.prepend"> |
||||
|
<div v-if="getInputSlot('p')"> |
||||
|
<SelectDesign |
||||
|
:data="getInputSlot('p')" |
||||
|
:disabled="judgeIsDisabled(data.name)" |
||||
|
:transform-option="transformOption" |
||||
|
@change="inputSlotChange" |
||||
|
type="slot" |
||||
|
/> |
||||
|
</div> |
||||
|
<span v-else>{{ config.prepend }}</span> |
||||
|
</template> |
||||
|
<template #append v-if="config.append"> |
||||
|
<div v-if="getInputSlot()"> |
||||
|
<SelectDesign |
||||
|
:data="getInputSlot()" |
||||
|
:disabled="judgeIsDisabled(data.name)" |
||||
|
:transform-option="transformOption" |
||||
|
@change="inputSlotChange" |
||||
|
type="slot" |
||||
|
/> |
||||
|
</div> |
||||
|
<span v-else>{{ config.append }}</span> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
<el-text v-else class="wordColor">{{value}}</el-text> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,180 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 15:46:55 |
||||
|
@ 备注: 单选 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
||||
|
import { |
||||
|
formatNumber, |
||||
|
constFormProps |
||||
|
} from '@/api/lowCode/utils'; |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
tablekey: any |
||||
|
numrun?: number |
||||
|
modelValue?: any // 子表和弹性布局时时有传 |
||||
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
||||
|
types?:number |
||||
|
control:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits(['update:modelValue','pageIdAry']) |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const config = computed(() => { |
||||
|
return props.data.config || {} |
||||
|
}) |
||||
|
const type = computed(() => { |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 14:25:01 |
||||
|
@ 功能: 获取组件名称 |
||||
|
*/ |
||||
|
const getLabel = (val:any) => { |
||||
|
if(val.label){ |
||||
|
return val.label; |
||||
|
}else{ |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-11-13 14:36:08 |
||||
|
@ 功能: 解析css |
||||
|
*/ |
||||
|
const getFormItemLableStyle = (ele: any) => { |
||||
|
if(ele?.labelStyle){ |
||||
|
// console.log("返回栅格宽度3",AnalysisCss(ele)) |
||||
|
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) |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-27 15:11:42 |
||||
|
@ 功能: 判断是否禁用 |
||||
|
*/ |
||||
|
const judgeIsDisabled = (key:string) => { |
||||
|
return false |
||||
|
if (type.value === 3) { |
||||
|
return true // 查看模式，为不可编辑状态 |
||||
|
} |
||||
|
if (type.value === 1 && config.value.addDisabled) { |
||||
|
return true |
||||
|
} |
||||
|
if (type.value === 2 && config.value.editDisabled) { |
||||
|
return true // 编辑模式 |
||||
|
} |
||||
|
if(props.nodeKey != undefined && props.purview != undefined && props.purview != null && props.purview != null && props.purview != "" && props.purview != "") { |
||||
|
if(props.purview.length < 1){ |
||||
|
return false; |
||||
|
}else{ |
||||
|
let isShow = true; |
||||
|
props.purview.forEach((item)=>{ |
||||
|
if(item.nodeKey == props.nodeKey){ |
||||
|
|
||||
|
if(item.powerAry && item.powerAry.length > 0){ |
||||
|
item.powerAry.forEach((itm)=>{ |
||||
|
if(itm.id == key){ |
||||
|
console.log("判断此组件是否禁用",itm,itm.id == key,"--------->",itm.isLook) |
||||
|
isShow = !itm.isEdit |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
return isShow |
||||
|
} |
||||
|
}else{ |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
/****input slot处理***/ |
||||
|
const getInputSlot = (key?: string) => { |
||||
|
const slot = key === 'p' ? config.value.prepend : config.value.append |
||||
|
const has = slot.indexOf('key:') === 0 |
||||
|
if (!has) { |
||||
|
return false |
||||
|
} |
||||
|
const slotKey = slot.replace('key:', '') |
||||
|
const control = getControlByName(slotKey) |
||||
|
if (!control || Object.keys(control)?.length === 0) { |
||||
|
return false |
||||
|
} |
||||
|
return control |
||||
|
} |
||||
|
// 选择数据转换，默认尝试转数字 |
||||
|
const transformOption = (val: string | number, type?: string) => { |
||||
|
switch (config.value.transformData || type) { |
||||
|
case 'none': |
||||
|
return val |
||||
|
case 'string': |
||||
|
try { |
||||
|
return val.toString() |
||||
|
} catch (e) { |
||||
|
return val |
||||
|
} |
||||
|
} |
||||
|
return formatNumber(val) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 11:13:06 |
||||
|
@ 功能: 输出结果 |
||||
|
*/ |
||||
|
const valPrint = (val:any,orgList:any[]) => { |
||||
|
let title = "" |
||||
|
if(Array.isArray(orgList)){ |
||||
|
orgList.forEach((item: any) => { |
||||
|
if(item.value==val){ |
||||
|
title = item.label |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
return title |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-radio-group |
||||
|
v-if="props.types!=3" |
||||
|
|
||||
|
v-bind="control" |
||||
|
v-model="value" |
||||
|
:style="getFormItemInputStyle(configStyle,4)" |
||||
|
> |
||||
|
<el-radio |
||||
|
:key="index" |
||||
|
:label="transformOption(item.value)" |
||||
|
v-for="(item, index) in props.data.options" |
||||
|
|
||||
|
> |
||||
|
<span :style="getFormItemInputStyle(configStyle,5)">{{ item.label }}</span> |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
<el-text v-else class="wordColor">{{valPrint(value,props.data.options)}}</el-text> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,195 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 16:04:34 |
||||
|
@ 备注: 下来组件 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
||||
|
import { |
||||
|
formatNumber, |
||||
|
constFormProps |
||||
|
} from '@/api/lowCode/utils'; |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
tablekey: any |
||||
|
numrun?: number |
||||
|
modelValue?: any // 子表和弹性布局时时有传 |
||||
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
||||
|
types?:number |
||||
|
control:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits(['update:modelValue','pageIdAry']) |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const config = computed(() => { |
||||
|
return props.data.config || {} |
||||
|
}) |
||||
|
const type = computed(() => { |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 14:25:01 |
||||
|
@ 功能: 获取组件名称 |
||||
|
*/ |
||||
|
const getLabel = (val:any) => { |
||||
|
if(val.label){ |
||||
|
return val.label; |
||||
|
}else{ |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-11-13 14:36:08 |
||||
|
@ 功能: 解析css |
||||
|
*/ |
||||
|
const getFormItemLableStyle = (ele: any) => { |
||||
|
if(ele?.labelStyle){ |
||||
|
// console.log("返回栅格宽度3",AnalysisCss(ele)) |
||||
|
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) |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-27 15:11:42 |
||||
|
@ 功能: 判断是否禁用 |
||||
|
*/ |
||||
|
const judgeIsDisabled = (key:string) => { |
||||
|
return false |
||||
|
if (type.value === 3) { |
||||
|
return true // 查看模式，为不可编辑状态 |
||||
|
} |
||||
|
if (type.value === 1 && config.value.addDisabled) { |
||||
|
return true |
||||
|
} |
||||
|
if (type.value === 2 && config.value.editDisabled) { |
||||
|
return true // 编辑模式 |
||||
|
} |
||||
|
if(props.nodeKey != undefined && props.purview != undefined && props.purview != null && props.purview != null && props.purview != "" && props.purview != "") { |
||||
|
if(props.purview.length < 1){ |
||||
|
return false; |
||||
|
}else{ |
||||
|
let isShow = true; |
||||
|
props.purview.forEach((item)=>{ |
||||
|
if(item.nodeKey == props.nodeKey){ |
||||
|
|
||||
|
if(item.powerAry && item.powerAry.length > 0){ |
||||
|
item.powerAry.forEach((itm)=>{ |
||||
|
if(itm.id == key){ |
||||
|
console.log("判断此组件是否禁用",itm,itm.id == key,"--------->",itm.isLook) |
||||
|
isShow = !itm.isEdit |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
return isShow |
||||
|
} |
||||
|
}else{ |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
/****input slot处理***/ |
||||
|
const getInputSlot = (key?: string) => { |
||||
|
const slot = key === 'p' ? config.value.prepend : config.value.append |
||||
|
const has = slot.indexOf('key:') === 0 |
||||
|
if (!has) { |
||||
|
return false |
||||
|
} |
||||
|
const slotKey = slot.replace('key:', '') |
||||
|
const control = getControlByName(slotKey) |
||||
|
if (!control || Object.keys(control)?.length === 0) { |
||||
|
return false |
||||
|
} |
||||
|
return control |
||||
|
} |
||||
|
// 选择数据转换，默认尝试转数字 |
||||
|
const transformOption = (val: string | number, type?: string) => { |
||||
|
switch (config.value.transformData || type) { |
||||
|
case 'none': |
||||
|
return val |
||||
|
case 'string': |
||||
|
try { |
||||
|
return val.toString() |
||||
|
} catch (e) { |
||||
|
return val |
||||
|
} |
||||
|
} |
||||
|
return formatNumber(val) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 11:13:06 |
||||
|
@ 功能: 输出结果 |
||||
|
*/ |
||||
|
const valPrint = (val:any[],orgList:any[]) => { |
||||
|
|
||||
|
if(Array.isArray(val)){ |
||||
|
let title = new Array |
||||
|
if(Array.isArray(orgList)){ |
||||
|
val.forEach((vitem: any) => { |
||||
|
orgList.forEach((item: any) => { |
||||
|
if(vitem==item.value){ |
||||
|
title.push(item.label) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
if(title.length>0){ |
||||
|
return title.join("、") |
||||
|
}else{ |
||||
|
return "" |
||||
|
} |
||||
|
|
||||
|
}else{ |
||||
|
let title = "" |
||||
|
if(Array.isArray(orgList)){ |
||||
|
orgList.forEach((item: any) => { |
||||
|
if(item.value==val){ |
||||
|
title = item.label |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
return title |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<SelectDesign |
||||
|
v-if="props.types!=3" |
||||
|
:data="data" |
||||
|
:disabled="judgeIsDisabled(data.name)" |
||||
|
v-model="value" |
||||
|
:options="props.data.options" |
||||
|
:remote-method="getAxiosOptions" |
||||
|
:transformOption="transformOption" |
||||
|
:placeholder="data.control.placeholder?data.control.placeholder:'请选择'+getLabel(data.item)" |
||||
|
/> |
||||
|
<el-text v-else class="wordColor">{{valPrint(value,props.data.options)}}</el-text> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -1,13 +1,13 @@ |
|||||
<!-- |
<!-- |
||||
@ 作者: 秦东 |
@ 作者: 秦东 |
||||
@ 时间: 2024-11-17 15:32:52 |
@ 时间: 2025-06-11 13:41:24 |
||||
@ 备注: 签名板 |
@ 备注: 签字版 |
||||
--> |
--> |
||||
<script lang='ts' setup> |
<script lang='ts' setup> |
||||
|
|
||||
</script> |
</script> |
||||
<template> |
<template> |
||||
<div>签名版</div> |
<div></div> |
||||
</template> |
</template> |
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
|
|
||||
|
|||||
@ -0,0 +1,49 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-11 14:11:25 |
||||
|
@ 备注: 开关 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
modelValue?: string |
||||
|
disabled?: boolean |
||||
|
data?:any |
||||
|
types?:number |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits<{ |
||||
|
(e: 'update:modelValue', value: string): void |
||||
|
}>() |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-11 14:03:37 |
||||
|
@ 功能: 打印地址 |
||||
|
*/ |
||||
|
const valPrint = (val:any,openVal:string) => { |
||||
|
if(val == openVal){ |
||||
|
return "开" |
||||
|
}else{ |
||||
|
return "关" |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-switch v-if="props.types!=3" v-model="value" /> |
||||
|
<el-text v-else class="wordColor">{{valPrint(value,props.data.control.activeValue)}}</el-text> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,69 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 14:20:12 |
||||
|
@ 备注: 多行文本 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { |
||||
|
constFormProps |
||||
|
} from '@/api/lowCode/utils'; |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
tablekey: any |
||||
|
numrun?: number |
||||
|
modelValue?: any // 子表和弹性布局时时有传 |
||||
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
||||
|
types?:number |
||||
|
control:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits(['update:modelValue','pageIdAry']) |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const config = computed(() => { |
||||
|
return props.data.config || {} |
||||
|
}) |
||||
|
const type = computed(() => { |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 14:25:01 |
||||
|
@ 功能: 获取组件名称 |
||||
|
*/ |
||||
|
const getLabel = (val:any) => { |
||||
|
if(val.label){ |
||||
|
return val.label; |
||||
|
}else{ |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-input |
||||
|
v-if="props.types!=3" |
||||
|
v-bind="props.control" |
||||
|
v-model="value" |
||||
|
type="textarea" |
||||
|
:autosize="{ minRows: 2, maxRows: 20 }" |
||||
|
:placeholder="data.control.placeholder?data.control.placeholder:'请输入'+getLabel(data.item)" |
||||
|
/> |
||||
|
<el-text v-else class="wordColor">{{value}}</el-text> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,78 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-11 10:33:20 |
||||
|
@ 备注: 时间选择器 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import dayJs from 'dayjs' |
||||
|
import { |
||||
|
constFormProps |
||||
|
} from '@/api/lowCode/utils'; |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
tablekey: any |
||||
|
numrun?: number |
||||
|
modelValue?: any // 子表和弹性布局时时有传 |
||||
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
||||
|
types?:number |
||||
|
control:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits(['update:modelValue','pageIdAry']) |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const config = computed(() => { |
||||
|
return props.data.config || {} |
||||
|
}) |
||||
|
const type = computed(() => { |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
return props.modelValue |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 14:25:01 |
||||
|
@ 功能: 获取组件名称 |
||||
|
*/ |
||||
|
const getLabel = (val:any) => { |
||||
|
if(val.label){ |
||||
|
return val.label; |
||||
|
}else{ |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
//阻止唤起键盘 |
||||
|
const handleClick = (event) => { |
||||
|
// 阻止输入框默认行为 |
||||
|
event.target.readOnly = true; |
||||
|
}; |
||||
|
//打印数据 |
||||
|
const valPrint = (val:number,group:string,type:string) => { |
||||
|
return dayJs(val).format('HH:mm:ss'); |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-time-picker |
||||
|
v-if="props.types!=3" |
||||
|
v-model="value" |
||||
|
value-format="x" |
||||
|
:placeholder="data.control.placeholder? data.control.placeholder: '请选择' + getLabel(data.item)" |
||||
|
@click="handleClick" |
||||
|
@focus="handleClick" |
||||
|
/> |
||||
|
<el-text v-else class="wordColor">{{valPrint(value)}}</el-text> |
||||
|
|
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,132 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-11 14:23:59 |
||||
|
@ 备注: 树形控件 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
modelValue?: string |
||||
|
disabled?: boolean |
||||
|
data?:any |
||||
|
types?:number |
||||
|
control?:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits<{ |
||||
|
(e: 'update:modelValue', value: string): void |
||||
|
}>() |
||||
|
const value = computed({ |
||||
|
get: () => { |
||||
|
if(props.modelValue != "" && props.modelValue != undefined){ |
||||
|
if(Array.isArray(props.modelValue)){ |
||||
|
return props.modelValue |
||||
|
}else{ |
||||
|
return JSON.parse(props.modelValue); |
||||
|
} |
||||
|
}else{ |
||||
|
return "" |
||||
|
} |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
emits('update:modelValue', newVal) |
||||
|
}, |
||||
|
}); |
||||
|
const control = computed(() => { |
||||
|
return props.control || {} |
||||
|
// return props.data |
||||
|
}) |
||||
|
|
||||
|
// 定义树节点接口 |
||||
|
interface TreeNode { |
||||
|
value: number; |
||||
|
label: string; |
||||
|
children?: TreeNode[]; |
||||
|
} |
||||
|
interface TreeNodeInfo { |
||||
|
value: number; |
||||
|
label: string; |
||||
|
} |
||||
|
function treeData(node: TreeNode[],title: TreeNodeInfo[]){ |
||||
|
|
||||
|
// let title = new Array |
||||
|
if(Array.isArray(node)){ |
||||
|
node.forEach((item:TreeNode) => { |
||||
|
if(Array.isArray(title)){ |
||||
|
title.push({ |
||||
|
value:item.value, |
||||
|
label:item.label |
||||
|
}); |
||||
|
}else{ |
||||
|
title =[{ |
||||
|
value:item.value, |
||||
|
label:item.label |
||||
|
}]; |
||||
|
} |
||||
|
if (item.children) { |
||||
|
|
||||
|
if(Array.isArray(item.children)){ |
||||
|
treeData(item.children,title) |
||||
|
// for (const child of item.children) { |
||||
|
// treeData(child,title) |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return title; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-10 11:13:06 |
||||
|
@ 功能: 输出结果 |
||||
|
*/ |
||||
|
const valPrint = (pickVal:string,orgList:any[]) => { |
||||
|
let titlaAry = new Array |
||||
|
let title = treeData(orgList) |
||||
|
if(pickVal != "" && pickVal != undefined){ |
||||
|
// let pickVal = JSON.parse(val) |
||||
|
if(Array.isArray(pickVal)){ |
||||
|
console.log("输出结果--数组-->",pickVal,orgList) |
||||
|
if(Array.isArray(title)){ |
||||
|
pickVal.forEach((pitem) => { |
||||
|
title.forEach((item:TreeNodeInfo) => { |
||||
|
if(item.value == pitem){ |
||||
|
titlaAry.push(item.label) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
}else{ |
||||
|
console.log("输出结果--字符-->",pickVal,orgList) |
||||
|
if(Array.isArray(title)){ |
||||
|
title.forEach((item:TreeNodeInfo) => { |
||||
|
if(item.value == pickVal){ |
||||
|
titlaAry.push(item.label) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return titlaAry.join("、") |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-tree-select |
||||
|
v-if="props.types!=3" |
||||
|
v-model="value" |
||||
|
:data="data" |
||||
|
:multiple="props.control.multiple" |
||||
|
:render-after-expand="false" |
||||
|
style="width: 240px" |
||||
|
/> |
||||
|
<el-text v-else class="wordColor">{{valPrint(value,props.data)}}</el-text> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.wordColor{ |
||||
|
color:#000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,445 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-11 08:11:22 |
||||
|
@ 备注: 表单组件循环(新版) |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { Md5 } from 'ts-md5' |
||||
|
import { debounce } from '@/utils/lowCode/item/index' |
||||
|
import { uploadUrl } from '@/api/lowCode/form/fieldUnit' |
||||
|
import { |
||||
|
constFormProps, |
||||
|
constControlChange, |
||||
|
constGetControlByName, |
||||
|
constSetFormOptions |
||||
|
} from '@/api/lowCode/utils'; |
||||
|
import validate from "@/api/lowCode/form/validate" |
||||
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' //样式解析 |
||||
|
//辅助控件 |
||||
|
import InputPage from '@/components/lowCode/assistant/inputPage.vue' |
||||
|
import DigitpagePage from '@/components/lowCode/assistant/digitpage.vue' |
||||
|
import TextareaPage from '@/components/lowCode/assistant/textareaPage.vue' |
||||
|
import RadioPage from '@/components/lowCode/assistant/radioPage.vue' |
||||
|
import CheckboxPage from '@/components/lowCode/assistant/checkboxPage.vue' |
||||
|
import SelectPage from '@/components/lowCode/assistant/selectPage.vue' |
||||
|
import CascaderPage from '@/components/lowCode/assistant/cascader.vue' |
||||
|
import DatePickerPage from '@/components/lowCode/assistant/datePicker.vue' |
||||
|
import TimePickerPage from '@/components/lowCode/assistant/timePickerPage.vue' |
||||
|
import OrgCitys from '@/components/lowCode/assistant/orgCitys.vue' |
||||
|
import SwitchPage from '@/components/lowCode/assistant/switchPage.vue' |
||||
|
import InputNumberPage from '@/components/lowCode/assistant/inputNumberPage.vue' |
||||
|
import LowcodeImagePage from '@/components/lowCode/assistant/lowcodeImage.vue' |
||||
|
import VideoUpAndPlay from '@/components/lowCode/assistant/videoUpAndPlay.vue' |
||||
|
import UploadPage from '@/components/lowCode/assistant/uploadPage.vue' |
||||
|
import UrlLinkPage from '@/components/lowCode/assistant/urlLink.vue' |
||||
|
import BaiDuMapPage from '@/components/lowCode/assistant/baiDuMap.vue' |
||||
|
import QuillEditor from '@/components/lowCode/assistant/quillEditor.vue' |
||||
|
import LowcodeCarsusel from '@/components/lowCode/assistant/lowcodeCarsusel.vue' |
||||
|
import SignatureMap from '@/components/lowCode/assistant/signatureMap.vue' |
||||
|
import LowcodeTransfer from '@/components/lowCode/assistant/lowcodeTransfer.vue' |
||||
|
import ColorPickerPage from '@/components/lowCode/assistant/colorPickerPage.vue' |
||||
|
import TreeSelectPage from '@/components/lowCode/assistant/treeSelectPage.vue' |
||||
|
import AssociatedForms from '@/components/lowCode/assistant/associatedForms.vue' |
||||
|
import SerialNumber from '@/components/lowCode/assistant/serialNumber.vue' |
||||
|
import ExpandUser from '@/components/lowCode/assistant/user.vue' |
||||
|
import OrgCentent from '@/components/lowCode/assistant/org.vue' |
||||
|
import FounderForm from '@/components/lowCode/assistant/founder.vue' |
||||
|
import FounderTime from '@/components/lowCode/assistant/founderTime.vue' |
||||
|
import EditTime from '@/components/lowCode/assistant/editTime.vue' |
||||
|
import OwnerPage from '@/components/lowCode/assistant/ownerPage.vue' |
||||
|
import DepartmentOrg from '@/components/lowCode/assistant/departmentOrg.vue' |
||||
|
import PickRole from '@/components/lowCode/assistant/pickrole.vue' |
||||
|
import PickPost from '@/components/lowCode/assistant/pickpost.vue' |
||||
|
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList |
||||
|
modelValue?: any // 子表和弹性布局时时有传 |
||||
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
||||
|
nodeKey?:string |
||||
|
purview?:any[] |
||||
|
optionsValue3Get1?:any |
||||
|
tablekey?:any |
||||
|
numrun?:any |
||||
|
rowIndex?:any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
const emits = defineEmits<{ |
||||
|
(e: 'update:modelValue', val: any): void |
||||
|
(e: 'optionsValue3Get1', val: any,fieldName: string): void |
||||
|
(e: 'asfValueChanged', val: any): void |
||||
|
}>() |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" //默认图片 |
||||
|
//执行类型 |
||||
|
const type = computed(() => { |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
//配置 |
||||
|
const config = computed(() => { |
||||
|
return props.data.config || {} |
||||
|
}) |
||||
|
//组件css部分 |
||||
|
const configStyle = computed(() => { |
||||
|
return props.data.styles || {} |
||||
|
}) |
||||
|
const control = computed(() => { |
||||
|
if(props.data.type == "upload"){ |
||||
|
props.data.control.action = uploadUrl |
||||
|
} |
||||
|
return props.data.control |
||||
|
}) |
||||
|
const options = ref(props.data.options) //附属属性值 |
||||
|
const changeEvent = inject(constControlChange, '') as any |
||||
|
//获取值 |
||||
|
const value = computed({ |
||||
|
get() { |
||||
|
if (props.tProp) { |
||||
|
// 表格和弹性布局 |
||||
|
return props.modelValue |
||||
|
} else { |
||||
|
if(props.data.type == "checkbox"){ |
||||
|
if (formProps.value.model[props.data.name] == null || formProps.value.model[props.data.name] == ""){ |
||||
|
// formProps.value.model[props.data.name] = [] |
||||
|
// return formProps.value.model[props.data.name] |
||||
|
return [] |
||||
|
}else{ |
||||
|
return formProps.value.model[props.data.name] |
||||
|
} |
||||
|
}else{ |
||||
|
return formProps.value.model[props.data.name] |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
set(newVal: any) { |
||||
|
if (props.tProp) { |
||||
|
emits('update:modelValue', newVal) |
||||
|
} |
||||
|
updateModel(newVal) |
||||
|
} |
||||
|
}) |
||||
|
const getControlByName = inject(constGetControlByName) as any |
||||
|
// 对单选多选select设置options |
||||
|
const formOptions = inject(constSetFormOptions, {}) as any |
||||
|
//更新数值 |
||||
|
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 |
||||
|
}) |
||||
|
} |
||||
|
// 返回当前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 |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-27 15:11:42 |
||||
|
@ 功能: 判断是否禁用 |
||||
|
*/ |
||||
|
const judgeIsDisabled = (key:string) => { |
||||
|
return false |
||||
|
if (type.value === 3) { |
||||
|
return true // 查看模式，为不可编辑状态 |
||||
|
} |
||||
|
if (type.value === 1 && config.value.addDisabled) { |
||||
|
return true |
||||
|
} |
||||
|
if (type.value === 2 && config.value.editDisabled) { |
||||
|
return true // 编辑模式 |
||||
|
} |
||||
|
if(props.nodeKey != undefined && props.purview != undefined && props.purview != null && props.purview != null && props.purview != "" && props.purview != "") { |
||||
|
if(props.purview.length < 1){ |
||||
|
return false; |
||||
|
}else{ |
||||
|
let isShow = true; |
||||
|
props.purview.forEach((item)=>{ |
||||
|
if(item.nodeKey == props.nodeKey){ |
||||
|
|
||||
|
if(item.powerAry && item.powerAry.length > 0){ |
||||
|
item.powerAry.forEach((itm)=>{ |
||||
|
if(itm.id == key){ |
||||
|
console.log("判断此组件是否禁用",itm,itm.id == key,"--------->",itm.isLook) |
||||
|
isShow = !itm.isEdit |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
return isShow |
||||
|
} |
||||
|
}else{ |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-11-13 14:36:08 |
||||
|
@ 功能: 解析css |
||||
|
*/ |
||||
|
const getFormItemLableStyle = (ele: any) => { |
||||
|
if(ele?.labelStyle){ |
||||
|
// console.log("返回栅格宽度3",AnalysisCss(ele)) |
||||
|
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 getLabel = (ele: FormItem) => { |
||||
|
const showColon = formProps.value.showColon ? '：' : '' |
||||
|
if (ele) { |
||||
|
return ele.showLabel ? '' : ele.label + showColon |
||||
|
} else { |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
function asfValueChanged(val:any){ |
||||
|
emits("asfValueChanged",val) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-11-13 16:18:59 |
||||
|
@ 功能: 自定义组件 |
||||
|
*/ |
||||
|
const currentComponent = computed(() => { |
||||
|
switch(props.data.type){ |
||||
|
case "component": |
||||
|
// 自定义组件 |
||||
|
return config.value.componentName; |
||||
|
break; |
||||
|
case "input": |
||||
|
case "password": |
||||
|
return markRaw(InputPage); |
||||
|
break; |
||||
|
case "digitpage": |
||||
|
return markRaw(DigitpagePage); |
||||
|
break; |
||||
|
case "textarea": |
||||
|
case "description": |
||||
|
return markRaw(TextareaPage); |
||||
|
break; |
||||
|
case "radio": |
||||
|
return markRaw(RadioPage); |
||||
|
break; |
||||
|
case "checkbox": |
||||
|
return markRaw(CheckboxPage); |
||||
|
break; |
||||
|
case "select": |
||||
|
return markRaw(SelectPage); |
||||
|
break; |
||||
|
case "cascader": |
||||
|
return markRaw(CascaderPage); |
||||
|
break; |
||||
|
case "datePicker": |
||||
|
props.data.control.valueFormat = "x"; |
||||
|
return markRaw(DatePickerPage) |
||||
|
break; |
||||
|
case "timePicker": |
||||
|
props.data.control.valueFormat = "x"; |
||||
|
return markRaw(TimePickerPage) |
||||
|
break; |
||||
|
case "organization": |
||||
|
return markRaw(OrgCitys) |
||||
|
break; |
||||
|
case "switch": |
||||
|
return markRaw(SwitchPage) |
||||
|
break; |
||||
|
case "inputNumber": |
||||
|
return markRaw(InputNumberPage) |
||||
|
break; |
||||
|
case "lowcodeImage": |
||||
|
return markRaw(LowcodeImagePage) |
||||
|
break; |
||||
|
case "videoUpAndPlay": |
||||
|
return markRaw(VideoUpAndPlay); |
||||
|
break |
||||
|
case "upload": |
||||
|
return markRaw(UploadPage); |
||||
|
break |
||||
|
case "urllink": |
||||
|
return markRaw(UrlLinkPage); |
||||
|
break |
||||
|
case "baidumap": |
||||
|
return markRaw(BaiDuMapPage); |
||||
|
break; |
||||
|
case "tinymce": |
||||
|
return markRaw(QuillEditor); |
||||
|
break; |
||||
|
case "lowcodeCarsusel": |
||||
|
return markRaw(LowcodeCarsusel); |
||||
|
break; |
||||
|
case "signaturemap": |
||||
|
return markRaw(SignatureMap); |
||||
|
break; |
||||
|
case "lowcodeTransfer": |
||||
|
return markRaw(LowcodeTransfer); |
||||
|
break; |
||||
|
case "colorPicker": |
||||
|
return markRaw(ColorPickerPage); |
||||
|
break; |
||||
|
case "treeSelect": |
||||
|
return markRaw(TreeSelectPage); |
||||
|
break; |
||||
|
case "associatedForms": |
||||
|
return markRaw(AssociatedForms); |
||||
|
break; |
||||
|
case "serialNumber": |
||||
|
return markRaw(SerialNumber); |
||||
|
break; |
||||
|
case "expand-user": |
||||
|
return markRaw(ExpandUser); |
||||
|
break; |
||||
|
case "orgCentent": |
||||
|
return markRaw(OrgCentent); |
||||
|
break; |
||||
|
case "founder": |
||||
|
return markRaw(FounderForm); |
||||
|
break; |
||||
|
case "founderTime": |
||||
|
return markRaw(FounderTime); |
||||
|
break; |
||||
|
case "editTime": |
||||
|
return markRaw(EditTime); |
||||
|
break; |
||||
|
case "owner": |
||||
|
return markRaw(OwnerPage); |
||||
|
break; |
||||
|
case "deptOrg": |
||||
|
return markRaw(DepartmentOrg); |
||||
|
break; |
||||
|
case "pickpost": |
||||
|
return markRaw(PickPost); |
||||
|
break; |
||||
|
case "pickrole": |
||||
|
return markRaw(PickRole); |
||||
|
break; |
||||
|
default: |
||||
|
return `el-${props.data.type}` |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-form-item |
||||
|
v-bind="data.item" |
||||
|
:prop="tProp || data.name" |
||||
|
:class="config.className" |
||||
|
:label="getLabel(data.item as FormItem)" |
||||
|
:rules="itemRules" |
||||
|
> |
||||
|
<template #label v-if="config.help"> |
||||
|
<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> |
||||
|
<!--关联表单--> |
||||
|
<component |
||||
|
v-if="['associatedForms'].includes(data.type)" |
||||
|
:is="currentComponent" |
||||
|
:data="data" |
||||
|
:formProps = "formProps" |
||||
|
v-bind="control" |
||||
|
:control="control" |
||||
|
:config="config" |
||||
|
:name="control.file || 'file'" |
||||
|
:disabled="judgeIsDisabled(data.name)" |
||||
|
:options="options" |
||||
|
:row-index = "rowIndex" |
||||
|
v-model="value" |
||||
|
@asf-value-changed="asfValueChanged" |
||||
|
/> |
||||
|
<!--单行文本及密码组件--> |
||||
|
<component |
||||
|
v-else |
||||
|
:types="type" |
||||
|
:is="currentComponent" |
||||
|
:data="data" |
||||
|
v-bind="control" |
||||
|
:control="control" |
||||
|
:config="config" |
||||
|
:name="control.file || 'file'" |
||||
|
:disabled="judgeIsDisabled(data.name)" |
||||
|
:options="options" |
||||
|
v-model="value" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue