ShutongInterconnectedChemicalCloudPlatform/src/widget/associatedforms/index.vue

<!--
@ 作者: 李文轩
@ 时间: 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)" v-if="judgeIsShow(data.name)">
		<input v-model="value" type="hidden" :disabled="judgeIsEdit(data.name)">
		<AssociatedForms :data="props.data" :form-props="formProps" :tablekey="props.tablekey"
			:row-index="props.rowIndex" @value-changed="valueChanged" @value-changed-table="valueChangedTable"></AssociatedForms>
	</el-form-item>


</template>
<script lang='ts' setup>
import AssociatedForms from './associatedForms.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
		rowIndex: any
		numrun?: number
		modelValue?: any // 子表和弹性布局时时有传
		tProp?: string // 子表时的form-item的prop值，用于子表校验用
	}>(),
	{}
)

const emits = defineEmits<{
	(e: 'update:modelValue', numVal: any): void
	(e: 'asfValueChanged', val: 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) => {
	//console.log("dfsasdfasdf")
	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 valueChanged = (val: any) => {
	//console.log("关联表单选择--->", val)

	value.value = val.currentVal
	emits("asfValueChanged", val)





}


const valueChangedTable = (val: any) => {
	//console.log("关联表单选择table--->", val)
	
	
	//emits("asfValueChanged", val)


	//确定哪个或哪些表单是被放置在子表中的
	//valueTest.value = formProps.model
	//console.log(formProps.value.model)
	for (let key in formProps.value.model) {
		if (key.startsWith("table")) {
			if (Array.isArray(formProps.value.model[key])) {
				if (formProps.value.model[key].length > 0) {
					for (let key1 in formProps.value.model[key][0]) {

						if (key1 == props.data.name) {
							/* console.log(key1)
							//当前关联表单在子表的第几行
							console.log(props.rowIndex)
							//当值变化时
							console.log(formProps.value.model[key][props.rowIndex][key1])
							console.log(val.currentVal) */
							formProps.value.model[key][props.rowIndex][key1] = val.currentVal
							val.key = key
							val.propsRowIndex = props.rowIndex
							val.key1 = key1
							emits("asfValueChanged", val)
						}
					}
				}

			}

		}
	}

}


//权限检测
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>