From d6f3960860a57569f13661aeb2cdbd7f430fc66f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E6=A2=93=E5=BD=AD?= <tianbohe0@163.com>
Date: Thu, 23 Apr 2026 09:28:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=82=E4=B8=8E=E5=8D=95=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/match/manage/Steps/Step2Units.vue | 318 ++++++++++++++------
 1 file changed, 232 insertions(+), 86 deletions(-)

diff --git a/src/views/match/manage/Steps/Step2Units.vue b/src/views/match/manage/Steps/Step2Units.vue
index 7d7a4ad..71d9114 100644
--- a/src/views/match/manage/Steps/Step2Units.vue
+++ b/src/views/match/manage/Steps/Step2Units.vue
@@ -1,69 +1,90 @@
 <template>
 	<div class="step-units">
-		<el-form ref="formRef" :model="localFormData" :rules="rules" label-position="right" label-width="0px">
-			<el-table :data="localFormData.units" border stripe style="width: 100%">
-				<el-table-column label="序号" width="80" align="center">
-					<template #default="{ $index }">{{ $index + 1 }}</template>
-				</el-table-column>
+		<el-table :data="unitList" border stripe style="width: 100%" row-key="tempId">
+			<el-table-column label="序号" width="80" align="center">
+				<template #default="{ $index }">{{ $index + 1 }}</template>
+			</el-table-column>
 
-				<el-table-column label="单位类型" width="180" align="center">
-					<template #default="{ row, $index }">
-						<el-form-item v-if="!readonly" :prop="`units.${$index}.unitType`" :rules="[{ required: true, message: '请选择单位类型', trigger: 'change' }]" style="margin: 0;width: 100%;">
-							<el-select v-model="row.unitType" placeholder="请选择" style="width: 100%" :disabled="readonly">
-								<el-option label="主办单位" :value="0" />
-								<el-option label="承办单位" :value="1" />
-								<el-option label="协办单位" :value="2" />
-								<el-option label="赞助单位" :value="3" />
-							</el-select>
-						</el-form-item>
-						<span v-else>
-							{{ row.unitType === 0 ? '主办单位' : row.unitType === 1 ? '承办单位' : row.unitType === 2 ? '协办单位' : row.unitType === 3 ? '赞助单位' : '-' }}
-						</span>
+			<el-table-column label="单位类型" width="200" align="center">
+				<template #default="{ row, $index }">
+					<!-- 编辑模式 -->
+					<template v-if="!readonly">
+						<!-- 自定义类型：显示文本输入框 -->
+						<el-input 
+							v-if="shouldShowCustomInput(row)" 
+							v-model="row.customUnitType" 
+							placeholder="请输入单位类型"
+							style="width: 100%"
+							:disabled="readonly"
+							@change="syncToParent"
+						/>
+						<!-- 固定类型：显示下拉框 -->
+						<el-select 
+							v-else 
+							v-model="row.unitType" 
+							placeholder="请选择"
+							style="width: 100%"
+							:disabled="readonly"
+							@change="syncToParent"
+						>
+							<el-option label="主办单位" :value="0" />
+							<el-option label="承办单位" :value="1" />
+							<el-option label="协办单位" :value="2" />
+							<el-option label="赞助单位" :value="3" />
+						</el-select>
 					</template>
-				</el-table-column>
+					<!-- 只读模式 -->
+					<span v-else>
+						{{ row.customUnitType || getUnitTypeLabel(row.unitType) }}
+					</span>
+				</template>
+			</el-table-column>
 
-				<el-table-column label="单位名称" min-width="220" align="center">
-					<template #default="{ row, $index }">
-						<el-form-item v-if="!readonly" :prop="`units.${$index}.unitName`" :rules="[{ required: true, message: '请输入单位名称', trigger: 'blur' }]" style="margin: 0">
-							<el-input v-model="row.unitName" placeholder="请输入单位名称" :disabled="readonly" />
-						</el-form-item>
-						<span v-else>{{ row.unitName }}</span>
-					</template>
-				</el-table-column>
+			<el-table-column label="单位名称" min-width="220" align="center">
+				<template #default="{ row, $index }">
+					<el-input v-if="!readonly" v-model="row.unitName" placeholder="请输入单位名称" :disabled="readonly" @change="syncToParent" />
+					<span v-else>{{ row.unitName }}</span>
+				</template>
+			</el-table-column>
 
-				<el-table-column label="LogoUrl" min-width="120" align="center">
-					<template #default="{ row ,$index }">
-						<img v-if="row.logoUrl" :src="row.logoUrl" style="height: 120px;" />
-						<el-upload v-else-if="!readonly" class="avatar-uploader" action="/api/file/upload" :show-file-list="false" :on-success=" (response) => handleAvatarSuccess(response, $index)">
-							<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
-						</el-upload>
-						<span v-else>-</span>
-					</template>
-				</el-table-column>
+			<el-table-column label="LogoUrl" min-width="120" align="center">
+				<template #default="{ row, $index }">
+					<img v-if="row.logoUrl" :src="row.logoUrl" style="height: 120px;" />
+					<el-upload v-else-if="!readonly" class="avatar-uploader" action="/api/file/upload" :show-file-list="false" :on-success=" (response) => handleAvatarSuccess(response, $index)">
+						<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+					</el-upload>
+					<span v-else>-</span>
+				</template>
+			</el-table-column>
 
-				<el-table-column label="排序" width="180" align="center">
-					<template #default="{ row }">
-						<el-input-number v-if="!readonly" v-model="row.sort" :min="0" :step="1" :disabled="readonly" />
-						<span v-else>{{ row.sort }}</span>
-					</template>
-				</el-table-column>
+			<el-table-column label="排序" width="180" align="center">
+				<template #default="{ row }">
+					<el-input-number v-if="!readonly" v-model="row.sort" :min="0" :step="1" :disabled="readonly" @change="syncToParent" />
+					<span v-else>{{ row.sort }}</span>
+				</template>
+			</el-table-column>
 
-				<el-table-column v-if="!readonly" label="操作" width="120" align="center">
-					<template #default="{ $index }">
-						<el-button text type="danger" icon="ele-Delete" @click="remove($index)" :disabled="localFormData.units.length <= 1">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
+			<el-table-column v-if="!readonly" label="操作" width="150" align="center">
+				<template #default="{ $index }">
+					<el-button text type="primary" @click="toggleTypeMode($index)">
+						{{ shouldShowCustomInput(unitList[$index]) ? '固定类型' : '自定义类型' }}
+					</el-button>
+					<el-button text type="danger" icon="ele-Delete" @click="remove($index)" :disabled="unitList.length <= 1">删除</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
 
-			<div v-if="!readonly" style="display: flex; justify-content: center; margin-top: 16px">
-				<el-button type="primary" plain icon="ele-Plus" @click="add">添加单位</el-button>
-			</div>
-		</el-form>
+		<div v-if="!readonly" style="display: flex; justify-content: center; gap: 12px; margin-top: 16px">
+			<el-button type="primary" plain icon="ele-Plus" @click="addPresetUnit">添加预设单位</el-button>
+			<el-button type="success" plain icon="ele-Edit" @click="addCustomUnit">添加自定义单位</el-button>
+		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Plus } from '@element-plus/icons-vue';
 
 const props = defineProps({ 
 	modelValue: { type: Object, required: true },
@@ -71,53 +92,178 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:modelValue']);
 
-const formRef = ref(null);
-const localFormData = ref({ units: [] });
-const add = () => {
-	localFormData.value.units.push({ unitType: '', unitName: '', logoUrl: '', sort: localFormData.value.units.length });
+const unitList = ref([]);
+const tempIdCounter = ref(0);
+
+// 判断是否应该显示自定义输入框 - 只受 isCustomType 布尔值控制
+const shouldShowCustomInput = (row) => {
+	if (!row) return false;
+	// 完全只根据 isCustomType 布尔值判断，不受输入内容影响
+	return row.isCustomType === true;
 };
-const setting = ref(false)
+
+// 获取临时唯一 ID
+const getNextTempId = () => {
+	return `unit_${Date.now()}_${tempIdCounter.value++}`;
+};
+
+// 获取单位类型标签
+const getUnitTypeLabel = (type) => {
+	const labels = {
+		0: '主办单位',
+		1: '承办单位',
+		2: '协办单位',
+		3: '赞助单位'
+	};
+	return labels[type] || '-';
+};
+
+// 同步数据到父组件 - 立即同步
+const syncToParent = () => {
+	// 移除临时标记，只保留业务字段
+	const units = unitList.value.map(({ tempId, isCustomType, ...rest }) => rest);
+	
+	emit('update:modelValue', {
+		...props.modelValue,
+		units
+	});
+};
+
+// 创建新单位对象
+const createUnitObj = (isCustom = false) => ({
+	tempId: getNextTempId(),
+	unitType: 0,
+	unitName: '',
+	logoUrl: '',
+	sort: unitList.value.length,
+	customUnitType: isCustom ? '' : undefined,
+	isCustomType: isCustom
+});
+
+// 添加预设单位（下拉选择）
+const addPresetUnit = () => {
+	const newUnit = createUnitObj(false);
+	unitList.value.push(newUnit);
+	nextTick(() => {
+		syncToParent();
+	});
+};
+
+// 添加自定义单位（文本输入）
+const addCustomUnit = () => {
+	const newUnit = createUnitObj(true);
+	unitList.value.push(newUnit);
+	ElMessage.success('已添加自定义单位行，请填写信息');
+	nextTick(() => {
+		syncToParent();
+	});
+};
+
+// 切换输入模式
+const toggleTypeMode = (index) => {
+	const unit = unitList.value[index];
+	
+	if (shouldShowCustomInput(unit)) {
+		// 切换到固定类型模式
+		unit.isCustomType = false;
+		// 如果有自定义类型文本，尝试匹配预设类型
+		const typeMap = {
+			'主办单位': 0,
+			'承办单位': 1,
+			'协办单位': 2,
+			'赞助单位': 3
+		};
+		if (unit.customUnitType && typeMap[unit.customUnitType] !== undefined) {
+			unit.unitType = typeMap[unit.customUnitType];
+		}
+	} else {
+		// 切换到自定义类型模式
+		unit.isCustomType = true;
+		// 如果没有自定义类型文本，用当前预设类型作为默认值
+		if (!unit.customUnitType) {
+			unit.customUnitType = getUnitTypeLabel(unit.unitType);
+		}
+	}
+	
+	nextTick(() => {
+		syncToParent();
+	});
+};
+
+// 删除单位
+const remove = (idx) => {
+	unitList.value.splice(idx, 1);
+	// 重新计算排序
+	unitList.value.forEach((unit, index) => {
+		unit.sort = index;
+	});
+	nextTick(() => {
+		syncToParent();
+	});
+};
+
+// 初始化或重置数据
+const initData = (data) => {
+	if (!data || !data.units || data.units.length === 0) {
+		// 空数据，添加一个默认预设单位
+		unitList.value = [createUnitObj(false)];
+	} else {
+		// 处理数据回显
+		unitList.value = data.units.map(unit => {
+			// 只根据是否存在 customUnitType 属性来判断，不考虑其值是否为空
+			const isCustom = unit.customUnitType !== undefined && unit.customUnitType !== null;
+			const newUnit = {
+				...unit,
+				tempId: getNextTempId(),
+				isCustomType: isCustom
+			};
+			return newUnit;
+		});
+	}
+};
+
+// 监听父组件传入的 modelValue 变化 - 总是响应，但要避免循环更新
 watch(
 	() => props.modelValue,
-	async (v) => {
-		if (!v) return;
-		setting.value = true;
-		localFormData.value.units = v.units;
-		if (!localFormData.value.units.length ) add();
-		setting.value = false;
+	(newVal) => {
+		const currentUnits = unitList.value.map(({ tempId, isCustomType, ...rest }) => rest);
+		const newUnits = newVal?.units || [];
+		
+		// 只有当数据真正不同时才更新
+		if (JSON.stringify(currentUnits) !== JSON.stringify(newUnits)) {
+			initData(newVal);
+		}
 	},
 	{ deep: true, immediate: true }
 );
 
-watch(
-	localFormData,
-	(v) => {
-		if(!setting.value){
-			emit('update:modelValue', { ...props.modelValue, ...v })
-		}
-	},
-	{ deep: true }
-);
-
-
 const handleAvatarSuccess = (response, index) => {
-	console.log('handleAvatarSuccess', response,index);
-	localFormData.value.units[index].logoUrl = response?.[0]?.url;
-};
-const remove = (idx) => localFormData.value.units.splice(idx, 1);
-
-const rules = {
-	units: [{ type: 'array', required: true, message: '请至少添加一个参与单位', trigger: 'change' }],
+	if (unitList.value[index]) {
+		unitList.value[index].logoUrl = response?.[0]?.url;
+		nextTick(() => {
+			syncToParent();
+		});
+	}
 };
 
 const validate = async () => {
-	console.log('validate', formRef.value);
-	if (!formRef.value) return false;
-	if(!localFormData.value.units.length){
+	if (!unitList.value || unitList.value.length === 0) {
 		ElMessage.error('请至少添加一个参与单位');
 		return false;
 	}
-	return await formRef.value.validate();
+	
+	// 手动验证每个行的必填字段
+	let isValid = true;
+	for (let i = 0; i < unitList.value.length; i++) {
+		const unit = unitList.value[i];
+		if (!unit.unitName || unit.unitName.trim() === '') {
+			ElMessage.error(`第${i + 1}行的单位名称不能为空`);
+			isValid = false;
+			break;
+		}
+	}
+	
+	return isValid;
 };
 
 defineExpose({ validate });