snowy/snowy-admin-web/src/views/dev/slideshow/subForm.vue

<template>
	<a-form
		:model="formData"
		ref="formRef"
		name="basic"
		autocomplete="off"
	>
		<a-table :columns="columns" :dataSource="formData" size="middle">
			<template #bodyCell="{text, record, index, column}">
				<template v-if="column.dataIndex === 'whetherToClick'">
					<a-form-item :validate-status="validateStatus(record, 'whetherToClick')">
						<a-radio-group v-model:value="record.whetherToClick" placeholder="请选择跳转方式" :options="whetherToClickOptions" />
					</a-form-item>
				</template>
				<template v-if="column.dataIndex === 'skipMode'">
					<a-form-item :validate-status="validateStatus(record, 'skipMode')">
						<a-select v-model:value="record.skipMode" placeholder="请选择跳转方式" :disabled="record.whetherToClick === 'DISABLE'" :options="skipModeOptions" />
					</a-form-item>
				</template>
				<template v-if="column.dataIndex === 'url'">
					<a-form-item :validate-status="validateStatus(record, 'url')">
						<a-input v-model:value="formData[index].url" :disabled="record.whetherToClick === 'DISABLE'" placeholder="请输入URL或路由地址"/>
					</a-form-item>
				</template>
			</template>
		</a-table>
	</a-form>
</template>

<script name="subForm" setup>
	import tool from "@/utils/tool"
	import { remove, isEmpty, cloneDeep } from 'lodash-es'
	const formRef = ref()
	const formData = ref([])
	const skipModeOptions = ref(tool.dictList('SKIP_MODE'))
	const whetherToClickOptions = ref(tool.dictList('WHETHER_TO_CLICK'))
	const props = defineProps({
		dataArray: {
			type: Object,
			default: []
		},
		place: {
			type: Object,
			default: []
		}
	})
	const columns = ref([
		{
			title: '位置',
			dataIndex: 'label',
			width: '20%',
		},
		{
			title: '点击事件',
			dataIndex: 'whetherToClick',
			width: '25%',
		},
		{
			title: '跳转方式',
			dataIndex: 'skipMode',
			width: '20%',
		},
		{
			title: 'URL',
			dataIndex: 'url'
		}
	])
	// 每行的校验
	const validateStatus = (record, name) => {
		if (record[name]) {
			return 'success'
		} else {
			return 'error'
		}
	}
	// 返回多的数据，用于增减行
	const dataFiltrate = (newVal, oldVal) => {
		let result = ''
		oldVal.forEach((data) => {
			if (!newVal.some(item => item === data)) {
				result = data
			}
		})
		return result
	}
	watch(
		() => props.place,
		(newVal, oldVal) => {
			if (!isEmpty(props.dataArray) && isEmpty(formData.value)) {
				formData.value = cloneDeep(props.dataArray)
			} else {
				if (typeof newVal === "object") {
					if (!isEmpty(formData.value)) {
						formData.value.forEach(() => {
							// 如果包含
							if (!newVal.some(item => item === item.key)) {
								// 需要减少的
								if (formData.value.length > newVal.length) {
									const deleteData = dataFiltrate(newVal, oldVal)
									remove(formData.value, (item) => item.key === deleteData)
								}
								// 需要增加的
								if (formData.value.length < newVal.length) {
									const deleteData = dataFiltrate(oldVal, newVal)
									// 如果没有，就不增加
									if (!formData.value.some(item => item === deleteData)) {
										const obj = {
											key: deleteData,
											label: tool.dictTypeData('DEV_SLIDESHOW_PLACE' , deleteData),
											whetherToClick: 'DISABLE',
											skipMode: 'URL',
											url: ''
										}
										formData.value.push(obj)
									}
								}
							}
						})
					} else {
						newVal.forEach((item) => {
							const obj = {
								key: item,
								label: tool.dictTypeData('DEV_SLIDESHOW_PLACE' , item),
								whetherToClick: 'DISABLE',
								skipMode: 'URL',
								url: ''
							}
							formData.value.push(obj)
						})
					}
				}
			}
		},
		{ immediate: true, deep: true }
	)
	// 获取值，校验不通过返回false
	const getData = () => {
		if (isEmpty(formData.value)) {
			return false
		} else {
			let result = true
			formData.value.forEach((item) => {
				if (item.whetherToClick === 'ENABLE' && isEmpty(item.url)) {
					result = false
				}
			})
			if (result === false) {
				return false
			} else {
				return formData.value
			}
		}
	}
	defineExpose({
		getData
	})
</script>
<style lang="less" scoped>
	.ant-form-item {
		margin-bottom: 0 !important;
	}
</style>