You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
348 lines
8.9 KiB
348 lines
8.9 KiB
<!--
|
|
@ 作者: 李文轩
|
|
@ 时间: 2024-02-07 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)"
|
|
v-if="judgeIsShow(data.name)"
|
|
>
|
|
<input v-model="value" :disabled="judgeIsEdit(data.name)" type="hidden" >
|
|
</el-form-item>
|
|
|
|
<LowcodeTransfer :key="componentKey" :data="props.data" :selected-value="value" @checked-id-list-changed="checkedIdListChangedIndex" @update-model="updateModel" @re-render-component="reRenderComponent"></LowcodeTransfer>
|
|
</template>
|
|
<script lang='ts' setup>
|
|
import LowcodeTransfer from './lowcodeTransfer.vue';
|
|
import {
|
|
constControlChange,
|
|
constFormProps,
|
|
} from '@/api/DesignForm/utils'
|
|
import validate from '@/api/DesignForm/validate'
|
|
import { FormItem, FormList } from '@/api/DesignForm/types'
|
|
import { nodePoweInfo,powerAryInfo } from "@/api/taskapi/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
|
|
}>()
|
|
|
|
function checkedIdListChangedIndex(val:any){
|
|
//console.log(val)
|
|
value.value = val
|
|
}
|
|
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 parsedData = ref<any[]>([])
|
|
|
|
|
|
|
|
const value = computed({
|
|
get() {
|
|
|
|
if (props.tProp) {
|
|
//console.log("a")
|
|
// 表格和弹性布局
|
|
return props.modelValue
|
|
} else {
|
|
/* console.log(formProps.value.model)
|
|
console.log(props.data.name)
|
|
console.log(formProps.value.model[props.data.name]) */
|
|
nextTick(()=>{
|
|
if(formProps.value.model[props.data.name]&&formProps.value.model[props.data.name] != ""&&parsedData.value.length==0){
|
|
parsedData.value = JSON.parse(formProps.value.model[props.data.name]);
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
|
// parsedData.value = arr
|
|
|
|
return parsedData.value
|
|
//return formProps.value.model[props.data.name]
|
|
}
|
|
},
|
|
set(newVal: any) {
|
|
//console.log(newVal)
|
|
if (props.tProp) {
|
|
emits('update:modelValue', newVal)
|
|
}
|
|
updateModel(newVal)
|
|
}
|
|
})
|
|
|
|
let componentKey = 0
|
|
|
|
function reRenderComponent() {
|
|
componentKey++;
|
|
}
|
|
|
|
function waitModelHasValue(){
|
|
//console.log("waitModelHasValue")
|
|
setTimeout(()=>{
|
|
if(formProps.value.model&&formProps.value.model.creater){
|
|
/* console.log(formProps.value.model[props.data.name])
|
|
console.log(formProps.value.model)
|
|
console.log(props.data.name) */
|
|
/* nextTick(()=>{
|
|
if(formProps.value.model[props.data.name]&&formProps.value.model[props.data.name] != ""&&parsedData.value.length==0){
|
|
parsedData.value = JSON.parse(formProps.value.model[props.data.name]);
|
|
}
|
|
}) */
|
|
if(formProps.value.model[props.data.name]){
|
|
//console.log(formProps.value.model[props.data.name])
|
|
//parsedData.value = JSON.parse(formProps.value.model[props.data.name]);
|
|
|
|
|
|
try {
|
|
parsedData.value = JSON.parse(formProps.value.model[props.data.name]);
|
|
} catch (error) {
|
|
//console.error('Error parsing JSON:', error);
|
|
// 可以在这里进行一些错误处理，比如设置默认值或其他操作
|
|
//parsedData.value = null;
|
|
}
|
|
}
|
|
|
|
//console.log("的发生范德萨范德萨富士达"+parsedData.value)
|
|
value.value = parsedData.value
|
|
}else{
|
|
waitModelHasValue()
|
|
}
|
|
},200)
|
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
/* console.log(formProps.value.model[props.data.name])
|
|
console.log(formProps.value)
|
|
console.log(props.data.name) */
|
|
//nextTick(()=>{
|
|
if(formProps.value.model&&formProps.value.model.creater){
|
|
/* console.log(formProps.value.model[props.data.name])
|
|
console.log(formProps.value.model)
|
|
console.log(props.data.name) */
|
|
nextTick(()=>{
|
|
if(formProps.value.model[props.data.name]&&formProps.value.model[props.data.name] != ""&&parsedData.value.length==0){
|
|
parsedData.value = JSON.parse(formProps.value.model[props.data.name]);
|
|
}
|
|
})
|
|
value.value = parsedData.value
|
|
}else{
|
|
waitModelHasValue()
|
|
}
|
|
//})
|
|
/* setTimeout(()=>{
|
|
nextTick(()=>{
|
|
if(formProps.value.model[props.data.name]&&formProps.value.model[props.data.name] != ""&&parsedData.value.length==0){
|
|
parsedData.value = JSON.parse(formProps.value.model[props.data.name]);
|
|
}
|
|
})
|
|
checkedIdListChangedIndex(parsedData.value)
|
|
},500) */
|
|
|
|
|
|
})
|
|
|
|
/* watch(value, (newValue, oldValue) => {
|
|
|
|
},{deep:true}); */
|
|
const updateModel = (val: any) => {
|
|
/* console.log("updateModel")
|
|
console.log(typeof(val))
|
|
console.log(val) */
|
|
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
|
|
}
|
|
|
|
|
|
|
|
|
|
//权限检测
|
|
const allNodePwoer = inject('flowNodePower') as any
|
|
const currentNodePowerKey = inject('currentNodeKey') as any
|
|
|
|
//获取当前节点授权
|
|
const curNodePowerAry = () => {
|
|
if(currentNodePowerKey && currentNodePowerKey.value && currentNodePowerKey.value != ""){
|
|
if(allNodePwoer.value && Array.isArray(allNodePwoer.value) && allNodePwoer.value.length > 0){
|
|
let powerAry: any[] = []
|
|
allNodePwoer.value.forEach((item:nodePoweInfo) => {
|
|
if(item.nodeKey == currentNodePowerKey.value){
|
|
powerAry = item.powerAry
|
|
}
|
|
})
|
|
return powerAry
|
|
}else{
|
|
return []
|
|
}
|
|
}else{
|
|
return []
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-06 14:03:21
|
|
@ 功能: 判断此组件是否可见
|
|
*/
|
|
const judgeIsShow = (key: string) => {
|
|
let myPower = curNodePowerAry() //获取权限数组
|
|
if(Array.isArray(myPower) && myPower.length > 0){
|
|
let isOk = true
|
|
myPower.forEach((item:powerAryInfo) => {
|
|
if(key == item.id){
|
|
isOk = item.isLook
|
|
}
|
|
})
|
|
return isOk
|
|
}else{
|
|
return true
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-11-06 14:03:21
|
|
@ 功能: 判断此组件是否可编辑
|
|
*/
|
|
const judgeIsEdit = (key: string) => {
|
|
let myPower = curNodePowerAry() //获取权限数组
|
|
if(Array.isArray(myPower) && myPower.length > 0){
|
|
let isOk = false
|
|
myPower.forEach((item:powerAryInfo) => {
|
|
if(key == item.id){
|
|
isOk = !item.isEdit
|
|
}
|
|
})
|
|
return isOk
|
|
}else{
|
|
return false
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</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>
|
|
|