feat:[模板管理][暂存]

src/components/Template/CustomTable.vue

@@ -27,7 +27,7 @@
 
 					</div>
 					<!-- 默认操作栏 -->
-					<div class="custom-table-cell header-cell" :style="{ width: '245px' }" v-if="showOperation">
+					<div class="custom-table-cell header-cell" :style="{ width: operationWidth }" v-if="showOperation">
 						<div class="header-cell-content">
 							<div>操作</div>
 						</div>
@@ -110,17 +110,16 @@
 									</div>
 								</template>
 								<template v-else-if="col.bodyType === 'checkboxTag'">
-									<div class="flex flex-wrap">
+									<div class="flex flex-wrap" :class="{'error-border':hasError(rowIndex, colIndex, col.prop)}">
 										<HandleFormItem v-for="(tag, tagIndex) in row[col.prop]" :key="tagIndex"
 											:fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex + '_' + tagIndex"
 											:fieldItemLabel="fieldItemLabel" type="checkboxTag"
-											@blur="onBlur(rowIndex, col.prop, $event)" 
 											:value="tag"
 											:item="getBodyItem(col, rowIndex)"
-											@change="onCheckboxTagChange(rowIndex, colIndex,tagIndex, $event)"
+											@change="onCheckboxTagChange(rowIndex, col,tagIndex, $event)"
+											@deleteTag="onDeleteCheckboxTag(rowIndex, col, tagIndex)"
 											:error="hasError(rowIndex, colIndex, col.prop)"
-											@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
-											:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
+											@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"/>
 									</div>
 
 								</template>
@@ -190,7 +189,7 @@
 					</div>
 
 					<!-- 默认操作栏 -->
-					<div class="custom-table-cell body-cell" :style="{ width: isBorder ? '245px' : 'auto' }"
+					<div class="custom-table-cell body-cell" :style="{ width: isBorder ? operationWidth : 'auto' }"
 						v-if="showOperation">
 						<div class="inner-table-cell">
 							<slot name="operation" :row="row" :rowIndex="rowIndex" :columns="getOperationColumns()">
@@ -227,6 +226,10 @@ export default {
 		HandleFormItem
 	},
 	props: {
+		operationWidth: {
+			type: String,
+			default: '245px',
+		},
 		// 是否显示表头选择器
 		showHeaderSelect: {
 			type: Boolean,
@@ -316,14 +319,26 @@ export default {
 	unmounted() {
 		this.oldLocalDataSource = [];
 	},
-	methods: {
-		onCheckboxTagChange(rowIndex, colIndex,tagIndex, e) {
-			console.log(e,"eee")
-		},
-		handleClickButton(e, data, key, rowIndex, colIndex) {
-			this.$emit("clickButton", key, rowIndex, colIndex, e, data,)
-		},
-		beforeSaveRecord(data, callback, rowIndex, col, row) {
+		methods: {
+			// 删除checkboxTag
+			onDeleteCheckboxTag(rowIndex, col, tagIndex) {
+				this.localDataSource[rowIndex][col.prop].splice(tagIndex, 1);
+				this.$emit("onDeleteTag", rowIndex, col,tagIndex);
+				const params = {
+					type: "fieldChanged",
+					newRecord:null,
+					resourceList: null,
+				}
+				EventBus.$emit('onModifyRecord', params,)
+			},
+			onCheckboxTagChange(rowIndex, col,tagIndex, value) {
+				this.localDataSource[rowIndex][col.prop][tagIndex] = value;
+				this.$emit("onCheckboxTagChange", rowIndex, col,tagIndex, value)
+			},
+			handleClickButton(e, data, key, rowIndex, colIndex) {
+				this.$emit("clickButton", key, rowIndex, colIndex, e, data,)
+			},
+			beforeSaveRecord(data, callback, rowIndex, col, row) {
 			this.$emit("beforeSaveRecord", { inputData: data, callback, rowIndex, key: col.prop, rowData: row, dataSource: this.localDataSource })
 		},
 		getCellWidth(col) {
@@ -471,7 +486,8 @@ export default {
 					if (col.bodyFillType === this.templateFillType || col.bodySubFillType === this.templateFillType) {
 						// 检查主字段
 						const mainValue = row[col.prop];
-						if (this.isValueEmpty(mainValue) && !col.bodyDisabled && col.bodyType !== 'span') {
+						console.log(mainValue,"mainValue")
+						if (this.isValueEmpty(mainValue) && !col.bodyDisabled && col.bodyType !== 'span'&& col.bodyType !== 'button') {
 							const errorItem = {
 								rowIndex,
 								colIndex,
@@ -484,7 +500,7 @@ export default {
 						}
 
 						// 检查子字段（如果有）
-						if (col.bodySubKey && !col.bodySubDisabled && col.bodySubType !== 'span') {
+						if (col.bodySubKey && !col.bodySubDisabled && col.bodySubType !== 'span'&&col.bodySubType!=="button") {
 							const subValue = row[col.bodySubKey];
 							console.log(col, subValue, "subValue")
 							if (this.isValueEmpty(subValue)) {
@@ -884,7 +900,8 @@ export default {
 }
 
 .custom-table-body {
-	max-height: 300px;
+	max-height: 500px;
+	overflow-y: auto;
 	/* 可根据需要调整或由父组件控制 */
 }
 
@@ -1030,4 +1047,11 @@ export default {
 .flex-wrap{
 	flex-wrap: wrap;
 }
+.error-border{
+	border-color: #ff5d5d ;
+    box-shadow: 0 0 6px #ffc3c3 ;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid;
+}
 </style>

src/components/Template/HandleFormItem.vue

@@ -93,8 +93,9 @@
                 :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')">
                 <div class="checkbox-tag-item">
                     <el-checkbox v-model="checkboxTagChecked" :disabled="getDisabled()" @change="onCheckboxTagChange"></el-checkbox>
-                    <div class="tag-content blue-border" @click="onTagClick">
-                        <el-input v-if="isEditingTag" 
+                    <div class="tag-content blue-border">
+                        <el-input 
+                                v-if = "templateFillType === 'preFill'"
                                   v-model="tagValue" 
                                   ref="tagInput"
                                   :maxlength="item.maxlength || 20"
@@ -103,14 +104,19 @@
                                   placeholder="请输入"
                                   size="mini"
                                   class="tag-input" />
-                        <el-tag v-else 
+                        <el-tag 
+                                v-else
                                 :type="'info'"
                                 class="tag-display"
                                 :closable="false">
-                            {{ tagValue || '点击输入' }}
+                            {{ tagValue}}
                         </el-tag>
+                        <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
+                            title="确认删除当前编号？" @confirm="onDeleteTag">
+                            <i slot="reference" v-if = "templateFillType === 'preFill'" class="el-icon-close delete-icon"></i>
+                        </el-popconfirm>
+
                     </div>
-                    <i class="el-icon-close delete-icon" @click="onDeleteTag" v-if="tagValue"></i>
                 </div>
             </div>
 
@@ -270,7 +276,6 @@ export default {
             checkboxValue: this.getChecked(),//是否选中
             checkboxTagChecked: checkboxTagChecked, // checkboxTag类型的checkbox选中状态
             tagValue: tagValue, // checkboxTag类型的tag值
-            isEditingTag: false, // 是否正在编辑tag
             uuid: getuuid(), // 唯一标识符，用于EventBus事件匹配
             regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'],  //试剂/仪器/供试品等类型
             selectRegentInfo: {},//选择的试剂/仪器/供试品等信息
@@ -654,7 +659,7 @@ export default {
                 preFill: "blue-border",//预填写的边框颜色
             }
             // 如果有错误状态，返回红色边框样式，覆盖原有的边框颜色
-            if (this.error && this.type !== "attachment") {
+            if (this.error && this.type !== "attachment" && this.type !== "checkboxTag") {
                 return "error-border";
             }
             return typeObj[fillType] || ""
@@ -816,16 +821,11 @@ export default {
         onCheckboxTagChange() {
             this.emitCheckboxTagValue();
         },
-        // 点击tag区域
-        onTagClick() {
-            this.isEditingTag = true;
-            this.$nextTick(() => {
-                this.$refs.tagInput && this.$refs.tagInput.focus();
-            });
-        },
+
         // tag输入框失去焦点
-        onTagBlur() {
-            this.isEditingTag = false;
+        onTagBlur(e) {
+            const value = e.target.value;
+            this.tagValue = value;
             this.emitCheckboxTagValue();
             // 触发保存记录
             if (this.tagValue) {
@@ -834,9 +834,7 @@ export default {
         },
         // 删除tag
         onDeleteTag() {
-            this.tagValue = '';
-            this.emitCheckboxTagValue();
-            this.onCommonHandleSaveRecord('');
+            this.$emit("deleteTag");
         },
         // 发送checkboxTag的值
         emitCheckboxTagValue() {
@@ -844,7 +842,7 @@ export default {
                 checked: this.checkboxTagChecked,
                 tagValue: this.tagValue
             };
-            this.$emit('change', value);
+            this.inputValue = value;
         },
         // 统一处理失去焦点事件
         onBlur(e) {
@@ -1649,8 +1647,8 @@ export default {
 .checkbox-tag-container {
     border-radius: 4px;
     // transition: all 0.3s;
-    margin-bottom: 5px;
-    margin-right: 5px;
+    margin-bottom: 10px;
+    margin-right: 10px;
 
     &.error-border {
         border-color: #ff5d5d !important;
@@ -1664,7 +1662,7 @@ export default {
 
         .tag-content {
             cursor: pointer;
-
+            position: relative;
             .tag-input {
                 width: 100px;
             }
@@ -1678,15 +1676,18 @@ export default {
         .delete-icon {
             cursor: pointer;
             color: #909399;
-            font-size: 14px;
+            font-size: 12px;
             padding: 2px;
             border-radius: 50%;
+            position: absolute;
+            top:6px;
+            right:5px;
             // transition: all 0.3s;
 
-            &:hover {
-                color: #ff5d5d;
+            // &:hover {
+                color: red;
                 background-color: #f5f5f5;
-            }
+            // }
         }
     }
 }

src/views/business/comps/template/comps/yp/YP003.vue

@@ -17,6 +17,7 @@
 						:ref="`tableRef`"
 						:columns="tableColumns"
 						:formData="formData"
+						operationWidth = "80px"
 						:prefixKey = "`table`"
 						fieldItemLabel = "template.common.operationSteps"
 						@clickButton="handleClickButton"
@@ -159,7 +160,7 @@ export default {
 				prop: 'cyd',
 				bodyType: 'input',
 				bodyFillType: 'actFill',
-				width: 280,
+				width: 100,
 				bodyMaxlength: 50,
 			},{
 				label: 'template.yp.yp003.dwbh',
@@ -177,7 +178,7 @@ export default {
 				prop: 'ypsl',
 				bodyType: 'input',
 				bodyFillType: 'actFill',
-				width: 280,
+				width: 80,
 			}]
 		},
 	},
@@ -234,7 +235,7 @@ export default {
 			const data = excelData.splice(1);
 			const tagData = data.map((item)=>{
 				return {
-					checked:false,
+					checked:undefined,
 					tagValue:item[0],
 				}
 			})