hxgksystemapp/src/widget/number/index.vue

<!--
@ 作者: 秦东
@ 时间: 2023-12-05 09:40:32
@ 备注: 链接地址组件
-->
<script lang='ts' setup>
import { 
	formatNumber, 
	objectToArray,
	constControlChange,
    constSetFormOptions,
    constFormProps,
    constGetControlByName
} from '@/api/DesignForm/utils'
import { uploadUrl,getRequest } from '@/api/DesignForm'
import validate from '@/api/DesignForm/validate'

import { useRoute } from 'vue-router'

import { FormItem, FormList } from '@/api/DesignForm/types'
import { gainNumber } from '@/api/DesignForm/requestapi'
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 route = useRoute()
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
    return formProps.value.type
})
const config = computed(() => {
    return props.data.config || {}
})
const control = computed(() => {
	
    return props.data.control
	// return props.data
})
const options = ref(props.data.options)
const changeEvent = inject(constControlChange, '') as any



// const numVal = ref(props.modelValue)
// watch(() => props.modelValue,() => {
// 	numVal.value = props.modelValue
// })
watch(() => props.tablekey,() => {
	console.log("编码组件1---》",props.tablekey)
})
const editDisabled = ref(false);			//是否手动编辑

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
    })
}
onMounted(() => {
	console.log("编码组件---》",props.data,props.data.control.config)
	if(props.numrun == 1){
		getNumber()
	}
})

//获取编号
const getNumber = () => {
	let sendData = {
		table:props.tablekey,
		automatic:props.data.config.automatic,
		customRules:props.data.config.customRules
	}
	editDisabled.value = props.data.config.automatic
	gainNumber(sendData)
		.then((data:any) =>{
			console.log("编码组件2---》",data,sendData)
			value.value = data.data
		})
}
// 当通用修改属性功能添加新字段时，数组更新但toRefs没更新
const getControlByName = inject(constGetControlByName) as any
const sourceFunKey = computed(() => {
    const iReg = new RegExp('(?<=\\${)(.*?)(?=})', 'g')
    //const iReg = new RegExp('\\${.*?}', 'g') // 结果会包含开头和结尾=>${name}
    const apiUrl = config.value.optionsFun
    const replace = apiUrl?.match(iReg)
    return replace && replace[0]
})
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>
<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)"
	>
		<el-input v-model="value" :disabled="editDisabled" placeholder="请输入编码">
			<template #prefix>NO.</template>
		</el-input>
    </el-form-item>                             
</template>
<style  lang='scss' scoped>

</style>