feat:[模板管理][update]

src/components/Template/CustomTable.vue

@@ -30,10 +30,11 @@
 											:item="getHeaderColumnItem(headerCol)"
 											:value="headerFields[`${colIndex}_${headerIndex}`]"
 											:error="hasHeaderError(colIndex, headerIndex, headerCol.key)"
-											@update:error="onHeaderColumnErrorUpdate(colIndex, headerIndex, headerCol.key, $event)" 
+											@update:error="onHeaderColumnErrorUpdate(colIndex, headerIndex, headerCol.key, $event)"
 											@onRegentSubmit="(data, inputValue) => onHeaderRegentSubmit(data, inputValue, colIndex, headerIndex)" />
 									</template>
-									<template v-else-if="headerCol.type === 'input' || headerCol.type === 'select'|| headerCol.type === 'inputNumber'">
+									<template
+										v-else-if="headerCol.type === 'input' || headerCol.type === 'select' || headerCol.type === 'inputNumber'">
 										<HandleFormItem
 											:fieldKey="prefixKey + '_header_' + colIndex + '_' + headerIndex"
 											:fieldItemLabel="fieldItemLabel" :type="headerCol.type"
@@ -105,21 +106,31 @@
 									</div>
 
 								</template>
-								<!--
-								<template v-else-if="col.bodyType === 'select'">
-									<div class="flex flex1">
-										<HandleFormItem :fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
-											:fieldItemLabel="fieldItemLabel" type="select" class="body-select"
-											@blur="onBlur(rowIndex, col.prop, $event)"
-											:item="getBodyItem(col, rowIndex)" v-model="row[col.prop]"
-											@change="onBodyValueChange(rowIndex, colIndex, $event, row, 'select')"
-											:error="hasError(rowIndex, colIndex, col.prop)"
-											@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
-											:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
-
+								<div v-else-if="col.bodyType === 'operableInput'" class="flex flex1">
+									<div class="flex1 grid-container">
+										<div class="flex"
+											:class="{ 'full-row': row[col.prop] && row[col.prop].length == 1 }"
+											v-for="(opItem, itemIndex) in row[col.prop]" :key="itemIndex">
+											<HandleFormItem
+												:fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex + '_' + itemIndex"
+												:fieldItemLabel="fieldItemLabel" type="input"
+												@blur="onOperableInputBlur(opItem, $event)" class="body-input"
+												:item="getBodyItem(col, rowIndex)" :value="opItem.value"
+												:error="hasError(rowIndex, colIndex, rowIndex+col.prop+itemIndex)"
+												@update:error="onErrorUpdate(rowIndex, colIndex, rowIndex+col.prop+itemIndex, $event)"
+												:orange-bg="hasOrangeBg(rowIndex, colIndex, rowIndex+col.prop+itemIndex)" />
+											<el-popconfirm confirm-button-text='确认' cancel-button-text='取消'
+												icon="el-icon-info" icon-color="red" title="确认删除当前输入框？"
+												@confirm="removeOperableInput(rowIndex, colIndex, col.prop, itemIndex)">
+												<i slot="reference" class="el-icon-remove-outline remove-icon"
+													v-if="itemIndex > 0 && templateFillType === 'actFill' && !row.isComplete"></i>
+											</el-popconfirm>
+										</div>
 									</div>
+									<i class="el-icon-circle-plus add-icon" v-if="templateFillType === 'actFill' && !row.isComplete"
+										@click="addOperableInput(rowIndex, colIndex, col.prop)"></i>
+								</div>
 
-								</template> -->
 								<div class="flex flex1" v-else-if="col.bodyType === 'clickable'">
 									<HandleFormItem :fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
 										:fieldItemLabel="fieldItemLabel" type="clickable" class="body-clickable"
@@ -183,7 +194,8 @@
 							</div>
 							<div class="m-l-5" :class="{ 'flex1': col.bodySubType !== 'button' }"
 								v-if="isShowBodySub(col, row)">
-								<template v-if="col.bodySubType === 'inputNumber' || col.bodySubType === 'input' || col.bodySubType === 'select'">
+								<template
+									v-if="col.bodySubType === 'inputNumber' || col.bodySubType === 'input' || col.bodySubType === 'select'">
 									<HandleFormItem :fieldKey="prefixKey + '_' + col.bodySubKey + '_' + rowIndex"
 										:fieldItemLabel="fieldItemLabel" :type="col.bodySubType"
 										@blur="onSubBlur(rowIndex, col.bodySubKey, $event)"
@@ -208,7 +220,8 @@
 									<HandleFormItem :fieldKey="prefixKey + '_' + col.bodySubKey + '_' + rowIndex"
 										:fieldItemLabel="fieldItemLabel" :type="col.bodySubType" class="body-clickable"
 										sourceFrom="customTable" :item="getBodySubItem(col, rowIndex)"
-										:value="row[col.bodySubKey]" :error="hasError(rowIndex, colIndex, col.bodySubKey)"
+										:value="row[col.bodySubKey]"
+										:error="hasError(rowIndex, colIndex, col.bodySubKey)"
 										@onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row, col.bodySubKey)"
 										@beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, col, row)"
 										@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
@@ -362,6 +375,19 @@ export default {
 		this.oldLocalDataSource = [];
 	},
 	methods: {
+		// 删除operableInput
+		removeOperableInput(rowIndex, colIndex, prop, itemIndex) {
+			this.localDataSource[rowIndex][prop].splice(itemIndex, 1);
+			justUpdateFilledFormData();
+		},
+		// 添加operableInput
+		addOperableInput(rowIndex, colIndex, prop) {
+			this.localDataSource[rowIndex][prop].push({ value: undefined });
+			justUpdateFilledFormData();
+		},
+		onOperableInputBlur(opItem, e) {
+			opItem.value = e;
+		},
 		getHeaderColumnItem(headerCol) {
 			return {
 				label: headerCol.label || '',
@@ -387,7 +413,7 @@ export default {
 		},
 
 		hasHeaderError(colIndex, headerIndex, key) {
-			console.log(colIndex, headerIndex, key,this.formErrors,"headerError")
+			console.log(colIndex, headerIndex, key, this.formErrors, "headerError")
 			return this.formErrors.some(error =>
 				error.rowIndex === -1 &&
 				error.colIndex === colIndex &&
@@ -499,11 +525,11 @@ export default {
 		},
 		onHeaderRegentSubmit(data, inputValue, colIndex, headerIndex) {
 			this.headerFields[`${colIndex}_${headerIndex}`] = inputValue;
-			console.log("onHeaderRegentSubmit", data, inputValue, colIndex, headerIndex,this.headerFields)
+			console.log("onHeaderRegentSubmit", data, inputValue, colIndex, headerIndex, this.headerFields)
 
 			this.$emit("onHeaderRegentSubmit", { selectInfo: data, headerIndex, colIndex, headerFields: this.headerFields })
 		},
-		onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row,key) {
+		onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row, key) {
 			// if (this.templateFillType !== 'actFill') {
 			// 	return
 			// }
@@ -669,7 +695,22 @@ export default {
 									this.formErrors.push(errorItem);
 								}
 							}
-						} else {
+						} else if(col.bodyType === "operableInput"){
+							mainValue.forEach((itemItem, itemIndex) => {
+								if (isValueEmpty(itemItem.value)) {
+									const errorItem = {
+										rowIndex,
+										colIndex,
+										field: rowIndex+col.prop+itemIndex,
+										label: this.$t(col.label),
+										error: `请填写${this.$t(col.label)}`
+									};
+									errors.push(errorItem);
+									this.formErrors.push(errorItem);
+								}
+							})
+
+						}else {
 							if (isValueEmpty(mainValue) && !col.bodyDisabled && col.bodyType !== 'span' && col.bodyType !== 'button') {
 								const errorItem = {
 									rowIndex,
@@ -682,7 +723,7 @@ export default {
 								this.formErrors.push(errorItem);
 							}
 							// 检查子字段（如果有）
-							if (col.bodySubKey && !col.bodySubDisabled &&col.bodySubFillType === this.templateFillType&& col.bodySubType !== 'span' && col.bodySubType !== "button") {
+							if (col.bodySubKey && !col.bodySubDisabled && col.bodySubFillType === this.templateFillType && col.bodySubType !== 'span' && col.bodySubType !== "button") {
 								const subValue = row[col.bodySubKey];
 								if (isValueEmpty(subValue)) {
 									const errorItem = {
@@ -729,7 +770,7 @@ export default {
 				errors: errors
 			};
 		},
-	
+
 		// 表头选择器变化
 		onHeaderSelectChange(col, value) {
 			if (col.headerSelectTo) {
@@ -884,6 +925,13 @@ export default {
 				// 否则使用列配置的checkboxLabel
 				item.checkboxLabel = this.$t(col.checkboxLabel);
 			}
+			if (col.bodyType === "operableInput" ) {
+				if(currentItem.isComplete){
+					item.disabled = true;
+				}else{
+					item.disabled = false;
+				}
+			}
 			return item
 		},
 		getBodyButtonItem(col,) {
@@ -922,14 +970,14 @@ export default {
 			});
 
 		},
-		deleteSelectedRows(rowsIndex){
+		deleteSelectedRows(rowsIndex) {
 			this.deleteRows(rowsIndex);
 			this.selectedRows = [];
 			this.isIndeterminate = false;
 			this.$emit('selectionChange', this.selectedRows);
 		},
 		updateHeaderSelectFields(fields) {
-			this.headerSelectFields = {...this.headerSelectFields, ...fields};
+			this.headerSelectFields = { ...this.headerSelectFields, ...fields };
 		},
 		// 更新数据方法，可在formData变更时调用，也可由父组件调用
 		updateDataSource(dataSource = []) {
@@ -1330,4 +1378,32 @@ export default {
 	width: -webkit-fill-available;
 	text-align: center;
 }
+
+.add-icon {
+	color: #409eff;
+	font-size: 20px;
+	margin-left: 10px;
+	cursor: pointer;
+}
+
+.remove-icon {
+	color: #ff4949;
+	font-size: 20px;
+	margin-left: 5px;
+	cursor: pointer;
+}
+
+.full-row {
+	grid-column: span 2;
+}
+
+.grid-container {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	/* 默认2列 */
+	gap: 5px;
+	/* 防止网格容器被分割到不同页面 */
+	page-break-inside: avoid;
+	break-inside: avoid;
+}
 </style>

src/components/Template/operation/TableOpertaion.vue

@@ -146,9 +146,7 @@ export default {
             EventBus.$emit("showSubPackageDialog", {...defaultData,uuid:this.uuid})
         },
         onSubPackageSubmit(data) {
-            console.log(data,"submit")
             if (data.uuid === this.uuid) {
-                console.log(data,"inner submit")
                 this.innerRow.fzsj = data;
                 //通知后端保存数据
                 const params = {

src/views/business/comps/template/comps/dl/DL022.vue

@@ -10,32 +10,29 @@
 						ref="baseInfoRef" :formConfig="baseInfoFormConfig" :formData="formData" />
 					<TableList label="template.common.instrumentInfo" :columns="yqColumns" :dataSource="yqResource" />
 
-          <LineLabel label="template.dl.dl022.gcqk" />
-          <!-- 观察情况 -->
-          <div class="template-form-item">
+					<LineLabel label="template.dl.dl022.gcqk" />
+					<!-- 观察情况 -->
+					<div class="template-form-item">
 						<BaseInfoFormPackage ref="swypyjInfoRef" fieldItemLabel="template.common.operationSteps"
-							@onRegentSubmit="onRegentSubmit"
-							:formConfig="stepFormConfig" @blur="onHandleBlur"
+							@onRegentSubmit="onRegentSubmit" :formConfig="stepFormConfig" @blur="onHandleBlur"
 							:formData="formData" />
-              <div style="color:#999;font-size:14px;">畸变类型以代号填写：断片(b)、裂隙(g)、互换及射体(t)、环状染色体(r)、多倍体(p)、双着丝点染色体(d)、内复制(e)、染色体碎化(z)、缺失(l)、粘着(s)、微小体(m)。</div>
-						<CustomTable
-              :ref="`tableRef`"
-              :columns="tableColumns"
-              :formData="formData"
-              operationWidth = "80px"
-              :prefixKey = "`table`"
-              fieldItemLabel = "template.dl.dl022.gcqk"
-              :showAddRow="fillType === 'actFill'"
-              :showOperation="fillType === 'actFill'"
-            >
-              <template slot="operation" slot-scope="{ row, rowIndex, columns }">
-                <TableOpertaionDelete  :row="row" :rowIndex="rowIndex" :columns="columns"  @deleteRow="deleteRow" ></TableOpertaionDelete>
-              </template>
-            </CustomTable>
+						<div style="color:#999;font-size:14px;">
+							畸变类型以代号填写：断片(b)、裂隙(g)、互换及射体(t)、环状染色体(r)、多倍体(p)、双着丝点染色体(d)、内复制(e)、染色体碎化(z)、缺失(l)、粘着(s)、微小体(m)。
+						</div>
+						<CustomTable :ref="`tableRef`" :columns="tableColumns" :formData="formData"
+							operationWidth="120px" :prefixKey="`table`" fieldItemLabel="template.dl.dl022.gcqk"
+							@onAddRow = "onAddRow"
+							:showAddRow="fillType === 'actFill'" :showOperation="fillType === 'actFill'">
+							<template slot="operation" slot-scope="{ row, rowIndex, columns }">
+								<TableOpertaionDelete :row="row" :rowIndex="rowIndex" :columns="columns"
+									@deleteRow="deleteRow"></TableOpertaionDelete>
+								<div v-if="fillType === 'actFill'" class="edit-button" @click="onEditClick(row, rowIndex)">
+									{{ row.isComplete ? '编辑' : '完成' }}
+								</div>
+							</template>
+						</CustomTable>
 					</div>
 
-
-
 					<BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark"
 						ref="remarkRef" :formConfig="remarkConig" :formData="formData" />
 				</div>
@@ -56,13 +53,13 @@ import { EventBus } from "@/utils/eventBus";
 import { uniqeResource } from "@/utils/calUnitTools";
 import { debounce } from 'lodash-es'
 import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue"
-
+import { getuuid } from "@/utils/index.js";
 export default {
 	name: "DL022",
-  dicts: [
-        'business_dl_xbmc'
-    ],
-	components: { BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable,TableOpertaionDelete },
+	dicts: [
+		'business_dl_xbmc'
+	],
+	components: { BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable, TableOpertaionDelete },
 	mixins: [templateMixin],
 	props: {
 		fillType: {
@@ -126,21 +123,21 @@ export default {
 		},
 
 
-    // 观察情况
+		// 观察情况
 		stepFormConfig() {
 			return [
 				{
 					type: "step",
 					config: {
-            xbmc: {
+						xbmc: {
 							label: 'template.dl.dl022.xbmc',
 							type: 'select',
 							fillType: 'actFill',
 							options: this.getDictOptions('business_dl_xbmc'),
 							otherCode: 'xbmcOther',
-              showOtherLabel:false
+							showOtherLabel: false
 						},
-            xwj: {
+						xwj: {
 							// span:1,
 							label: 'template.dl.dl022.xwj',
 							type: 'yq',
@@ -150,7 +147,7 @@ export default {
 				}
 			]
 		},
-    // 观察情况
+		// 观察情况
 		tableColumns() {
 			return [{
 				label: 'template.dl.dl022.bpbh',
@@ -159,47 +156,47 @@ export default {
 				bodyFillType: 'actFill',
 				width: 100,
 				bodyMaxlength: 50,
-			},{
+			}, {
 				label: 'template.dl.dl022.gcxps',
 				prop: 'gcxps',
 				bodyType: 'inputNumber',
 				bodyFillType: 'actFill',
 				width: 100,
-        bodyMaxlength: 10,
-			},{
+				bodyMaxlength: 10,
+			}, {
 				label: 'template.dl.dl022.jgjxjbs',
 				prop: 'jgjxjbs',
 				bodyType: 'inputNumber',
 				bodyFillType: 'actFill',
 				width: 80,
-        disabled: true
-			},{
+				disabled: true
+			}, {
 				label: 'template.dl.dl022.lxjbs',
 				prop: 'lxjbs',
 				bodyType: 'inputNumber',
 				bodyFillType: 'actFill',
 				width: 100,
 				disabled: true
-			},{
+			}, {
 				label: 'template.dl.dl022.dbtjbs',
 				prop: 'dbtjbs',
 				bodyType: 'inputNumber',
 				bodyFillType: 'actFill',
 				width: 100,
-        disabled: true
-			},{
+				disabled: true
+			}, {
 				label: 'template.dl.dl022.nfzjbs',
 				prop: 'nfzjbs',
 				bodyType: 'inputNumber',
 				bodyFillType: 'actFill',
 				width: 80,
-        disabled: true
-			},{
+				disabled: true
+			}, {
 				label: 'template.dl.dl022.jblx',
 				prop: 'jblx',
-				bodyType: 'input',
+				bodyType: 'operableInput',
 				bodyFillType: 'actFill',
-				width: 100,
+				width: 380,
 				bodyMaxlength: 50,
 			}]
 		},
@@ -207,51 +204,90 @@ export default {
 	data() {
 		return {
 			formData: {},
+			 uuid:getuuid(),//事件id
+			 currentItem: {},
+			 currentRowIndex: -1,
 		};
 	},
-	mounted() {
+	 mounted() {
+        EventBus.$on('onEditSignCallback', this.handleEditSignCallback);
+    },
+    unmounted() {
+		EventBus.$off('onEditSignCallback', this.handleEditSignCallback);
 	},
 	methods: {
-    // 选择显微镜预留
-    onRegentSubmit(e) {
-      const { selectInfo, key, rowIndex } = e
-      const { row } = selectInfo
-      console.log('选择显微镜预留===',row)
-      // if (key === 'yqbh' && this.$refs.yqsyTableRef) {
-      //   const params = {
-      //     yqmc: row.mc,
-      //     yqxh: row.xh,
-      //     xccsjzjdrq: row.jzrq
-      //   }
-      //   this.$refs.yqsyTableRef.updateDataSourceByRowIndex(rowIndex, params)
-      // }
-    },
-    onFormSelect(fields){
+		handleEditSignCallback(data){
+			if (data.uuid === this.uuid) {
+				this.handleEdit();
+			}
+		},
+		handleEdit(){
+			const {currentItem, currentRowIndex} = this;
+			
+			
+			currentItem.isComplete = !currentItem.isComplete;
+			this.$refs.tableRef.updateDataSourceByRowIndex(currentRowIndex, currentItem)
+		},
+
+		// 编辑/完成
+		onEditClick(item, rowIndex) {
+			const { jblx=[] } = item;
+			const flag = jblx.every(it => !!it.value)
+			if(!item.isComplete && !flag){
+				this.$message.error('畸变类型还未填写完，请填写完成后再操作')
+				return
+			}
+			EventBus.$emit('showEditSignDialog', { uuid: this.uuid });
+			this.currentItem = item;
+			this.currentRowIndex = rowIndex;
+			
+		},
+		// 新增行
+		onAddRow() {
+			this.$refs.tableRef.addRow({
+				jblx: [{value: undefined}],
+			})
+		},
+		// 选择显微镜预留
+		onRegentSubmit(e) {
+			const { selectInfo, key, rowIndex } = e
+			const { row } = selectInfo
+			console.log('选择显微镜预留===', row)
+			// if (key === 'yqbh' && this.$refs.yqsyTableRef) {
+			//   const params = {
+			//     yqmc: row.mc,
+			//     yqxh: row.xh,
+			//     xccsjzjdrq: row.jzrq
+			//   }
+			//   this.$refs.yqsyTableRef.updateDataSourceByRowIndex(rowIndex, params)
+			// }
+		},
+		onFormSelect(fields) {
 			this.onHandleBlur(fields)
 		},
-    //选择table header下拉框也要更新体积
-		onHeaderSelectChange(data){
-			const {key, headerSelectFields,dataSource=[]} = data;
+		//选择table header下拉框也要更新体积
+		onHeaderSelectChange(data) {
+			const { key, headerSelectFields, dataSource = [] } = data;
 			const keys = [
 				'targetStartSolutionVolumeUnit',
 				'targetDiluentVolumeUnit',
 				'targetSolutionConcentrationUnit',
 				'targetSolutionVolumeUnit',
 			]
-			if(keys.includes(key)){
-				const {targetStartSolution,subTargetStartSolution} = this.$refs.swypyjInfoRef?.getFilledFormData();
+			if (keys.includes(key)) {
+				const { targetStartSolution, subTargetStartSolution } = this.$refs.swypyjInfoRef?.getFilledFormData();
 				const params = {
 					subTargetStartSolution,
 					headerSelectFields
 				}
-				this.batchUpdateTargetStartSolutionVolume(dataSource,targetStartSolution,params)
+				this.batchUpdateTargetStartSolutionVolume(dataSource, targetStartSolution, params)
 			}
 		},
-    beforeSaveRecord(data){
+		beforeSaveRecord(data) {
 			const formFields = this.$refs.swypyjInfoRef?.getFilledFormData();
-			this.onCommonVerifyNdException(formFields,data);
+			this.onCommonVerifyNdException(formFields, data);
 		},
-    configComplete(val) {
+		configComplete(val) {
 			const { rowData, headerSelectFields } = val;
 			//计算实际目标溶液体积(实际起始溶液体积+实际稀释液体积)
 			const { total, unit } = addTj([rowData.actStartSolutionVolume, rowData.actDiluentVolume], [headerSelectFields.actStartSolutionVolumeUnit, headerSelectFields.actDiluentVolumeUnit])
@@ -261,14 +297,14 @@ export default {
 				nd: rowData.actSolutionConcentration,//实际目标溶液浓度
 				nddw: headerSelectFields.actSolutionConcentrationUnit,
 				studySubjectId: this.formData.studySubjectId,
-				studyFormId:this.formData.id,
-				studyId:this.formData.studyId,
+				studyFormId: this.formData.id,
+				studyId: this.formData.studyId,
 				kc: total,
 				kcdw: unit,
 			}
 			this.configCompleteRequest(postData);
 		},
-    //分装回调
+		//分装回调
 		subPackageSubmit(data) {
 			const { fzsj, rowData, headerSelectFields } = data;
 			const { fzList = [], dw = "", mybh } = fzsj;
@@ -287,7 +323,7 @@ export default {
 					nd: rowData.actSolutionConcentration || 0,
 					nddw: headerSelectFields.actSolutionConcentrationUnit,
 					studySubjectId: this.formData.studySubjectId,
-			     	studyFormId:this.formData.id,
+					studyFormId: this.formData.id,
 					list: list
 				}
 				this.subPackageRequest(postData);
@@ -295,11 +331,11 @@ export default {
 		},
 		//获取已填写的表单数据
 		getFilledFormData() {
-			return this.getFilledFormDataByRefs(["baseInfoRef",  "swypyjInfoRef","remarkRef","tableRef"])
+			return this.getFilledFormDataByRefs(["baseInfoRef", "swypyjInfoRef", "remarkRef", "tableRef"])
 		},
 		//获取填写完成的表单数据
 		async getFormData() {
-			let content = await this.validFormFields(["baseInfoRef",  "swypyjInfoRef","remarkRef","tableRef"]);
+			let content = await this.validFormFields(["baseInfoRef", "swypyjInfoRef", "remarkRef", "tableRef"]);
 			return content;
 		},
 		getResource() {
@@ -325,4 +361,9 @@ export default {
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
+.edit-button{
+  color: #409eff;
+  margin-left: 10px;
+  cursor: pointer;
+}
 </style>