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

src/components/Template/CustomTable.vue

@@ -203,7 +203,7 @@ import HandleFormItem from "./HandleFormItem.vue";
 import { isEqual } from "@/utils/index.js";
 import { isShowOther } from "@/utils/formPackageCommon.js";
 import { EventBus } from "@/utils/eventBus";
-import { getuuid } from "@/utils/index.js";
+import { getuuid,justUpdateFilledFormData } from "@/utils/index.js";
 import { isRegent } from "@/utils/index.js";
 import { isValueEmpty } from '@/utils/index.js';
 
@@ -322,7 +322,7 @@ export default {
 		onDeleteCheckboxTag(rowIndex, col, tagIndex) {
 			this.localDataSource[rowIndex][col.prop].splice(tagIndex, 1);
 			this.$emit("onDeleteTag", rowIndex, col, tagIndex);
-			this.justUpdateFilledFormData();
+			justUpdateFilledFormData();
 		},
 		onCheckboxTagChange(rowIndex, colIndex, col, value) {
 			// value 现在是整个数组
@@ -349,7 +349,7 @@ export default {
 					error.field === col.prop)
 			);
 			this.$emit("onCheckboxChange", rowIndex, col, value);
-			this.justUpdateFilledFormData();
+			justUpdateFilledFormData();
 		},
 		handleClickButton(e, data, key, rowIndex, colIndex) {
 			this.$emit("clickButton", key, rowIndex, colIndex, e, data,)
@@ -836,7 +836,7 @@ export default {
 			this.localDataSource[rowIndex] = { ...this.localDataSource[rowIndex], ...data };
 			this.localDataSource = [...this.localDataSource];
 			this.checkCompareToOnDataLoad();
-			this.justUpdateFilledFormData();
+			justUpdateFilledFormData();
 		},
 		// 比较newData和oldData的值是否相等，只要有一对不相等就返回false
 		compareOldAndCurrentFormFields(newData, oldData) {
@@ -852,15 +852,6 @@ export default {
 
 			return true;
 		},
-		// 只是更新已填写的表单数据，不触发校验
-		justUpdateFilledFormData() {
-			const params = {
-				type: "fieldChanged",
-				newRecord: null,
-				resourceList: null,
-			}
-			EventBus.$emit('onModifyRecord', params,)
-		},
 		// 处理全选
 		handleCheckAllChange(val) {
 			this.localDataSource.forEach(row => {
@@ -898,7 +889,7 @@ export default {
 				targetDiluentVolumePrecision: 3,//小数点精度默认为3
 				targetStartSolutionVolumePrecision: 3,//小数点精度默认为3
 			});
-			this.justUpdateFilledFormData()
+			justUpdateFilledFormData()
 		},
 
 		// 添加行

src/components/Template/Step.vue

@@ -2,36 +2,36 @@
 	<div class="step-container">
 		<el-button v-if="isShowAddStep()" type="primary" @click="addStep" icon="el-icon-plus">添加步骤</el-button>
 		<div class="step-list">
-			<div v-for="(step, index) in steps" :key="step.id" class="step-list-item">
-
-
-				<div class="step-content">
-					<span class="step-title">{{ index + 1 }}</span>
-					<HandleFormItem type="select" placeholder="请选择" class="step-type-select" :item="stepSelectConfig"
-						v-model="step.type" @change="onTypeChange(index)" />
-
-					<!-- 根据步骤类型显示对应的表单 -->
-					<!-- 根据步骤类型显示对应的表单 -->
-					<component class="flex1" :sn="step.type" :is="getStepComponent(step.type)" :formData="step.formData"
-						@update="onFormUpdate(index, $event)" :stepIndex = "index" :ref="'stepCompRef_' + index">
-					</component>
-					<div v-if="templateFillType === 'preFill'" class="step-header-item">
-						<el-popconfirm
-						@confirm="removeStep(index)"
-						title="确定删除当前步骤吗？"
-						>
-						<el-button type="text" slot="reference" icon="el-icon-delete"
-							class="delete-btn"></el-button>
-						</el-popconfirm>
+			<draggable v-model="steps"  ghost-class="ghost" handle=".drag-handle" @end="onDragEnd" :animation="200">
+				<div v-for="(step, index) in steps" :key="step.id" class="step-list-item">
+					<div class="step-content">
+						<i class="el-icon-rank drag-handle" style="cursor: move; margin-right: 10px; margin-top: 6px;"></i>
+						<span class="step-title">{{ index + 1 }}</span>
+						<HandleFormItem type="select" placeholder="请选择" class="step-type-select" :item="stepSelectConfig"
+							v-model="step.type" @change="onTypeChange(index)" />
+						<!-- 根据步骤类型显示对应的表单 -->
+						<component class="flex1" :sn="step.type" :is="getStepComponent(step.type)" :formData="step.formData"
+							@update="onFormUpdate(index, $event)" :stepIndex = "index" :ref="'stepCompRef_' + index">
+						</component>
+						<div v-if="templateFillType === 'preFill'" class="step-header-item">
+							<el-popconfirm
+							@confirm="removeStep(index)"
+							title="确定删除当前步骤吗？"
+							>
+							<el-button type="text" slot="reference" icon="el-icon-delete"
+								class="delete-btn"></el-button>
+							</el-popconfirm>
+						</div>
 					</div>
 				</div>
-			</div>
+			</draggable>
 		</div>
 	</div>
 </template>
 
 <script>
-import { duplicateResource } from '@/utils/index.js';
+import draggable from 'vuedraggable';
+import { duplicateResource,justUpdateFilledFormData } from '@/utils/index.js';
 import HandleFormItem from './HandleFormItem.vue';
 import Czdd from './StepComponents/ry/czdd.vue';//溶液-操作地点
 import Czhj from './StepComponents/ry/czhj.vue';//溶液-操作方法
@@ -197,6 +197,7 @@ export default {
 		}
 	},
 	components: {
+		draggable,
 		HandleFormItem,
 		Czdd,
 		Czhj,
@@ -373,10 +374,7 @@ export default {
 	watch: {
 		// steps: {
 		// 	handler(newVal) {
-		// 		this.$emit('input', newVal.map(step => ({
-		// 			type: step.type,
-		// 			formData: step.formData
-		// 		})))
+		// 		this.$emit('input', newVal);
 		// 	},
 		// 	deep: true
 		// },
@@ -390,6 +388,10 @@ export default {
 		}
 	},
 	methods: {
+		onDragEnd(evt) {
+			justUpdateFilledFormData();
+		},
+
 		getStepList(){
 			public_templateStepList({templateId:this.templateData.templateId}).then(response => {
 				let options = []
@@ -637,6 +639,24 @@ export default {
 			padding-top: 10px;
 			border-radius: 6px;
 			overflow: hidden;
+			transition: background-color 0.2s;
+
+			&:hover {
+				// background-color: #f5f7fa;
+			}
+
+			&.ghost {
+				background-color: transparent !important;
+			}
+
+			.drag-handle {
+				color: #909399;
+				transition: color 0.2s;
+
+				&:hover {
+					color: #409eff;
+				}
+			}
 
 			.step-title {
 				margin-right: 10px;

src/utils/index.js

@@ -1,6 +1,7 @@
 import { parseTime } from './ruoyi'
 import { encrypt, decrypt } from '@/utils/encryptUtil'
 import moment from 'moment'
+import {EventBus} from './eventBus'
 /**
  * 表格时间格式化
  */
@@ -441,7 +442,7 @@ export function isValueEmpty(value) {
   if (Array.isArray(value) && value.length === 0) {
     return true
   }
-  if (Object.keys(value).length === 0 && typeof value=='object') {
+  if (Object.keys(value).length === 0 && typeof value == 'object') {
     return true;
   }
   return false
@@ -600,4 +601,14 @@ export const getDefaultValueByOptions = (options = []) => {
     }
   })
   return arr;
+}
+
+// 只是更新已填写的表单数据，不触发其他事件
+export const justUpdateFilledFormData = () => {
+  const params = {
+    type: "fieldChanged",
+    newRecord: null,
+    resourceList: null,
+  }
+  EventBus.$emit('onModifyRecord', params,)
 }