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

src/components/Template/BaseInfoFormPackage.vue

@@ -114,6 +114,13 @@
                                     @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem"
                                     :value="formFields[key]" />
                             </div>
+                            <div v-else-if="sItem.type === 'checkboxTag'" class="flex1">
+                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
+                                    type="checkboxTag" :item="sItem" :value="formFields[key]"
+                                    @copy="onCopy(sItem, key)" @change="(e) => onAttachmentChange(key, e)"
+                                    :error="errors[key]" @update:error="errors[key] = false"
+                                    :orange-bg="orangeBgFields[key]" />
+                            </div>
                             <div v-else-if="sItem.type === 'checkboxList'" class="flex1">
                                 <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                     type="checkboxList" :item="sItem" :value="formFields[key]"
@@ -268,6 +275,12 @@
                                 @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem"
                                 :value="formFields[key]" />
                         </div>
+                        <div v-else-if="sItem.type === 'checkboxTag'" class="flex flex1">
+                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
+                                type="checkboxTag" :item="sItem" :value="formFields[key]" @copy="onCopy(sItem, key)"
+                                @change="(e) => onAttachmentChange(key, e)" :error="errors[key]"
+                                @update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" />
+                        </div>
                         <div v-else-if="sItem.type === 'checkboxList'" class="flex flex1">
                             <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                 type="checkboxList" :item="sItem" :value="formFields[key]" @copy="onCopy(sItem, key)"

src/components/Template/CustomTable.vue

@@ -109,10 +109,20 @@
 										{{ row[col.prop] }}
 									</div>
 								</template>
-								<template v-else-if="col.bodyType === 'span'">
-									<div class="body-span">
-										{{ row[col.prop] }}
+								<template v-else-if="col.bodyType === 'checkboxTag'">
+									<div class="flex flex-wrap">
+										<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)"
+											:error="hasError(rowIndex, colIndex, col.prop)"
+											@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
+											:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
 									</div>
+
 								</template>
 
 							</div>
@@ -130,7 +140,8 @@
 										:orange-bg="hasOrangeBg(rowIndex, colIndex, col.otherCode)" />
 								</div>
 							</div>
-							<div class="m-l-5" :class="{'flex1':col.bodySubType !== 'button'}" v-if="isShowBodySub(col, row)">
+							<div class="m-l-5" :class="{ 'flex1': col.bodySubType !== 'button' }"
+								v-if="isShowBodySub(col, row)">
 								<template v-if="col.bodySubType === 'inputNumber'">
 									<HandleFormItem :fieldKey="prefixKey + '_' + col.bodySubKey + '_' + rowIndex"
 										:fieldItemLabel="fieldItemLabel" type="inputNumber"
@@ -306,6 +317,9 @@ export default {
 		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,)
 		},
@@ -1013,4 +1027,7 @@ export default {
 	text-align: center;
 	width: 100px;
 }
+.flex-wrap{
+	flex-wrap: wrap;
+}
 </style>

src/components/Template/HandleFormItem.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex " :class="type !=='radio' ? 'flex1' : ''">
-        <div class="flex" :class="type !=='radio' ? 'flex1' : ''">
+    <div class="flex " :class="getFlexClass()">
+        <div class="flex" :class="getFlexClass()">
             <el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
                 :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" @blur="onBlur"
                 :placeholder="getPlaceholder()" v-model="inputValue" @input="onInputChange" @change="onInputChange" />
@@ -89,6 +89,30 @@
                     <div slot="tip" class="el-upload__tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg，文件大小不超过2MB</div>
                 </el-upload>
             </template>
+            <div v-else-if="type === 'checkboxTag'" class="flex1 checkbox-tag-container"
+                :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" 
+                                  v-model="tagValue" 
+                                  ref="tagInput"
+                                  :maxlength="item.maxlength || 20"
+                                  @blur="onTagBlur"
+                                  @keyup.enter.native="onTagBlur"
+                                  placeholder="请输入"
+                                  size="mini"
+                                  class="tag-input" />
+                        <el-tag v-else 
+                                :type="'info'"
+                                class="tag-display"
+                                :closable="false">
+                            {{ tagValue || '点击输入' }}
+                        </el-tag>
+                    </div>
+                    <i class="el-icon-close delete-icon" @click="onDeleteTag" v-if="tagValue"></i>
+                </div>
+            </div>
 
         </div>
         <div class="handle-row" v-if="isShowHandle()">
@@ -218,7 +242,7 @@ export default {
     },
     data() {
         let initialValue = this.value;
-        let initialOtherValues = {};
+        let initialOtherValues = {},checkboxTagChecked = false,tagValue = '';
         
         // 如果是checkboxList类型且value是对象格式
         if (this.type === 'checkboxList' && this.value && typeof this.value === 'object') {
@@ -226,6 +250,9 @@ export default {
             initialOtherValues = this.value.otherValues || {};
         } else if (this.type === 'checkboxList' && !Array.isArray(this.value)) {
             initialValue = [];
+        }else if (this.type === 'checkboxTag' && this.value && typeof this.value === 'object') {
+            checkboxTagChecked = this.value.checked || false;
+            tagValue = this.value.tagValue || '';
         }
         return {
             inputValue: initialValue,
@@ -241,6 +268,9 @@ export default {
             replyContent: '', // 回复内容
             visible: false,//是否显示弹窗
             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: {},//选择的试剂/仪器/供试品等信息
@@ -255,9 +285,13 @@ export default {
     },
     watch: {
         value(newVal) {
+            console.log(newVal,"newVal")
             if (this.type === 'checkboxList' && newVal && typeof newVal === 'object') {
                 this.inputValue = newVal.checkboxValues || [];
                 this.otherValues = newVal.otherValues || {};
+            } else if (this.type === 'checkboxTag' && newVal && typeof newVal === 'object') {
+                this.checkboxTagChecked = newVal.checked || false;
+                this.tagValue = newVal.tagValue || '';
             } else {
                 this.inputValue = this.type === 'checkboxList' && !Array.isArray(newVal) ? [] : newVal;
             }
@@ -294,6 +328,10 @@ export default {
         EventBus.$off("onMixReagentSubmit", this.onMixReagentSubmit)
     },
     methods: {
+        getFlexClass(){
+            const noFlexArr = ["radio","checkboxTag"]
+            return noFlexArr.includes(this.type) ? '' : 'flex1'
+        },
         getDecimalDigits(){
             const {precision} = this.item;
             if(!isNaN(precision)){
@@ -774,6 +812,40 @@ export default {
             this.otherValues[code] = value;
             this.onInputChange();
         },
+        // checkboxTag的checkbox变化处理
+        onCheckboxTagChange() {
+            this.emitCheckboxTagValue();
+        },
+        // 点击tag区域
+        onTagClick() {
+            this.isEditingTag = true;
+            this.$nextTick(() => {
+                this.$refs.tagInput && this.$refs.tagInput.focus();
+            });
+        },
+        // tag输入框失去焦点
+        onTagBlur() {
+            this.isEditingTag = false;
+            this.emitCheckboxTagValue();
+            // 触发保存记录
+            if (this.tagValue) {
+                this.onCommonHandleSaveRecord(this.tagValue);
+            }
+        },
+        // 删除tag
+        onDeleteTag() {
+            this.tagValue = '';
+            this.emitCheckboxTagValue();
+            this.onCommonHandleSaveRecord('');
+        },
+        // 发送checkboxTag的值
+        emitCheckboxTagValue() {
+            const value = {
+                checked: this.checkboxTagChecked,
+                tagValue: this.tagValue
+            };
+            this.$emit('change', value);
+        },
         // 统一处理失去焦点事件
         onBlur(e) {
             this.onCommonHandleSaveRecord(e.target.value);
@@ -1572,4 +1644,50 @@ export default {
         border-color: #f9c588;
     }
 }
+
+// checkboxTag样式
+.checkbox-tag-container {
+    border-radius: 4px;
+    // transition: all 0.3s;
+    margin-bottom: 5px;
+    margin-right: 5px;
+
+    &.error-border {
+        border-color: #ff5d5d !important;
+        box-shadow: 0 0 6px #ffc3c3 !important;
+    }
+
+    .checkbox-tag-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .tag-content {
+            cursor: pointer;
+
+            .tag-input {
+                width: 100px;
+            }
+
+            .tag-display {
+                cursor: pointer;
+                user-select: none;
+            }
+        }
+
+        .delete-icon {
+            cursor: pointer;
+            color: #909399;
+            font-size: 14px;
+            padding: 2px;
+            border-radius: 50%;
+            // transition: all 0.3s;
+
+            &:hover {
+                color: #ff5d5d;
+                background-color: #f5f5f5;
+            }
+        }
+    }
+}
 </style>

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

@@ -231,9 +231,14 @@ export default {
 			this.$refs.ImportExcelDialog.show()
 		},
 		onLoadExcelData(excelData) {
-			console.log(excelData)
 			const data = excelData.splice(1);
-			this.$refs.tableRef.updateDataSourceByRowIndex(this.currentRowIndex,data);
+			const tagData = data.map((item)=>{
+				return {
+					checked:false,
+					tagValue:item[0],
+				}
+			})
+			this.$refs.tableRef.updateDataSourceByRowIndex(this.currentRowIndex,{dwbh:tagData});
 			this.$refs.ImportExcelDialog.cancel()
 		},
 		downloadExcelTemplate(arr){