pet-front/components/dForm/index.vue

<template>
	<up-form label-position="left" :model="formData" :rules="rules" ref="dFormRef">
		<div class="form-item" v-for="item in list" :key="item.key">
			<up-form-item :label="item.label" :prop="item.key" @click="item.type==='select'&&open(item)"
				:labelStyle="{fontSize:'28rpx'}" :labelWidth="labelWidth" class="item">
				<template v-if="item.type==='input'">
					<div class="flex-rowr">
						<up-input inputAlign="right" v-model="formData[item.key]" :placeholder="item.placeholder"
							border="none" fontSize='28rpx'></up-input><text
							class="ml10">{{item.unit?item.unit:""}}</text>
					</div>
				</template>
				<template v-else-if="item.type==='select'">
					<up-input inputAlign="right" :value="getDesc(formData[item.key], item.options)" disabled disabledColor="#ffffff"
						:placeholder="item.placeholder" border="none">
						<template #suffix>
							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
						</template>
					</up-input>
				</template>
				<template v-else-if="item.type==='radio'">
					<up-radio-group v-model="formData[item.key]" placement="column">
						<div class="flex-rowr">
							<up-radio class="mr16" activeColor="#FFBF60" :customStyle="{marginBottom: '8px'}"
								v-for="option in item.options" :key="option.value" :label="option.name" :name="option.value">
							</up-radio>
						</div>
					</up-radio-group>
				</template>
				<template v-else-if="item.type==='textarea'">
					<up-textarea v-model="formData[item.key]" :placeholder="item.placeholder" count autoHeight
						:maxlength="item.maxlength"></up-textarea>
				</template>
				<template v-else-if="item.type==='upload'">
					<up-upload :fileList="item.fileList" @afterRead="afterRead" @delete="deletePic" name="1"
						:multiple="item.multiple" :maxCount="item.maxCount" :accept='item.accept'
						:previewFullImage="item.previewFullImage"></up-upload>
				</template>
				<template v-else>
					<view>
						<slot :name="item.key"></slot>
					</view>
				</template>

			</up-form-item>

			<slot :name="`${item.key}-extend`"></slot>

		</div>
		<up-button @click="handleSubmit" class="mt20" type="warning" v-if="isFooter">提交</up-button>
	</up-form>
	<up-action-sheet :show="sheet.show" :actions="sheet.actions" :title="sheet.title" :description="sheet.description"
		@close="sheetClose" @select="handleSelect">
	</up-action-sheet>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watch,
	} from "vue"
	const {
		list,
		labelWidth
	} = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		labelWidth: {
			type: String,
			default: "200rpx"
		},
		isFooter: true
	})
	const emit = defineEmits(['submit', 'input'])
	const formData = reactive({
		name: ""
	})

	watch(formData, (val) => {
		emit('input', val)
	})

	const sheet = reactive({
		show: false,
		key: null,
		actions: [],
		title: "",
		description: ""
	})
	// 设置校验
	const rules = computed(() => {
		const obj = {}
		list.forEach(item => {
			if (item.rule && item.rule.length > 0)
				obj[item.key] = [...item.rule]
		})
		return obj
	})

	// 开启弹框
	const open = (item) => {
		sheet.show = true
		sheet.key = item.key
		sheet.actions = item.options
		sheet.title = item.placeholder
		sheet.description = item.description || ""
	}
	// 关闭弹框
	const sheetClose = () => {
		sheet.show = false
	}

	// 选择
	const handleSelect = (val) => {
		formData[sheet.key] = val?.value
	}

	const getDesc = (val, options) => {
		return options.find(item => item.value === val)?.name
	}

	// 上传
	const afterRead = () => {}
	// 删除上传文件
	const deletePic = () => {}
	const dFormRef = ref(null)
	// 提交
	const handleSubmit = () => {
		dFormRef.value.validate().then(valid => {
			if (valid) {
				submit(formData)
			}
		})
	}

	const setDataByKey = (key, value) => {
		formData[key] = value || null
	}

	const setData = (data) => {
		list.forEach(item => {
			const { key } = item
			formData[key] = data[key] || null
		})
	}

	const getData = () => {
		return formData
	}

	const validate = () => {
		return dFormRef.value.validate()
	}

	defineExpose({ setDataByKey, setData, getData, validate })
</script>

<style>
	.form-item {
		min-height: 90rpx;
		padding-top: 10rpx;
		width: 100%;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.flex-rowr {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.ml10 {
		margin-left: 10rpx;
	}
</style>