luojie
1 week ago
21 changed files with 2328 additions and 174 deletions
Split View
Diff Options
-
+112 -88src/components/Template/BaseInfoFormPcakge.vue
-
+82 -20src/components/Template/HandleFormItem.vue
-
+202 -55src/components/Template/Input.vue
-
+353 -0src/components/Template/Step.vue
-
+66 -0src/components/Template/StepComponents/AddSolutionStep.vue
-
+89 -0src/components/Template/StepComponents/AutoWeighStep.vue
-
+62 -0src/components/Template/StepComponents/CentrifugeStep.vue
-
+152 -0src/components/Template/StepComponents/CoatStep.vue
-
+70 -0src/components/Template/StepComponents/ContainerStep.vue
-
+84 -0src/components/Template/StepComponents/FiltrationStep.vue
-
+50 -0src/components/Template/StepComponents/ManualWeighStep.vue
-
+59 -0src/components/Template/StepComponents/MixStep.vue
-
+90 -0src/components/Template/StepComponents/PackageStep.vue
-
+113 -0src/components/Template/StepComponents/Seal2Step.vue
-
+114 -0src/components/Template/StepComponents/Seal3Step.vue
-
+144 -0src/components/Template/StepComponents/StaticEndStep.vue
-
+142 -0src/components/Template/StepComponents/StaticStartStep.vue
-
+147 -0src/components/Template/StepComponents/TakePlateStep.vue
-
+50 -0src/components/Template/StepComponents/UltrasoundStep.vue
-
+124 -0src/components/Template/StepComponents/VortexStep.vue
-
+23 -11src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+ 112
- 88
src/components/Template/BaseInfoFormPcakge.vue
View File
+ 82
- 20
src/components/Template/HandleFormItem.vue
View File
+ 202
- 55
src/components/Template/Input.vue
View File
| @ -1,111 +1,258 @@ | |||
| <template> | |||
| <HandleWrapper v-on="$listeners"> | |||
| <el-input | |||
| :maxlength="item.maxlength || 30" | |||
| :disabled="item.disabled" | |||
| :class="item.borderType | getBorderType" | |||
| :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" | |||
| :value = "value" | |||
| @input = "onInput" | |||
| /> | |||
| </HandleWrapper> | |||
| <el-input | |||
| v-model="inputValue" | |||
| :maxlength="maxLength" | |||
| :disabled="disabled" | |||
| :readonly="readonly" | |||
| :clearable="clearable" | |||
| :show-password="showPassword" | |||
| :placeholder="placeholder || ('请输入' + label)" | |||
| :class="borderClass" | |||
| @blur="onBlur" | |||
| @focus="onFocus" | |||
| @change="onChange" | |||
| @clear="onClear" | |||
| @keyup.enter="onEnter" | |||
| /> | |||
| </template> | |||
| <script> | |||
| import HandleWrapper from './HandleFormItem.vue' | |||
| export default { | |||
| components:{ | |||
| HandleWrapper | |||
| }, | |||
| props:{ | |||
| borderType: { | |||
| name: 'CustomInput', | |||
| props: { | |||
| // v-model 值 | |||
| value: { | |||
| type: [String, Number], | |||
| default: '' | |||
| }, | |||
| // 标签名称 | |||
| label: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| // 最大长度 | |||
| maxLength: { | |||
| type: Number, | |||
| default: null | |||
| }, | |||
| // 是否禁用 | |||
| disabled: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| // 是否只读 | |||
| readonly: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| // 是否显示清除按钮 | |||
| clearable: { | |||
| type: Boolean, | |||
| default: true | |||
| }, | |||
| // 是否显示密码 | |||
| showPassword: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| // 占位符 | |||
| placeholder: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| item:{ | |||
| type:Object, | |||
| default:()=>{ | |||
| return{ | |||
| placeholder:"", | |||
| maxlength:30, | |||
| label:"", | |||
| disabled:false, | |||
| } | |||
| default: '' | |||
| }, | |||
| // 边框类型 | |||
| fillType: { | |||
| type: String, | |||
| default: '', | |||
| validator: value => { | |||
| return ['', 'actFill', 'green', 'preFill'].includes(value) | |||
| } | |||
| }, | |||
| value:{ | |||
| type:String, | |||
| value:"", | |||
| // 输入框尺寸 | |||
| size: { | |||
| type: String, | |||
| default: 'default', | |||
| validator: value => { | |||
| return ['large', 'default', 'small'].includes(value) | |||
| } | |||
| } | |||
| }, | |||
| data(){ | |||
| data() { | |||
| return { | |||
| inputValue: this.$attrs.modelValue | |||
| inputValue: this.value | |||
| } | |||
| }, | |||
| filters: { | |||
| getBorderType(type) { | |||
| const typeObj = { | |||
| orange: "orange-border", | |||
| green: "green-border", | |||
| blue: "blue-border", | |||
| computed: { | |||
| borderClass() { | |||
| const typeMap = { | |||
| actFill: 'orange-border', | |||
| green: 'green-border', | |||
| preFill: 'blue-border' | |||
| } | |||
| return typeObj[type] || "" | |||
| return typeMap[this.fillType] || '' | |||
| } | |||
| }, | |||
| watch: { | |||
| value(newVal) { | |||
| this.inputValue = newVal | |||
| }, | |||
| inputValue(newVal) { | |||
| this.$emit('input', newVal) | |||
| } | |||
| }, | |||
| methods:{ | |||
| onInput(val){ | |||
| this.$emit("input",val) | |||
| methods: { | |||
| onBlur(event) { | |||
| this.$emit('blur', event) | |||
| }, | |||
| onFocus(event) { | |||
| this.$emit('focus', event) | |||
| }, | |||
| onChange(value) { | |||
| this.$emit('change', value) | |||
| }, | |||
| onClear() { | |||
| this.$emit('clear') | |||
| }, | |||
| onEnter(event) { | |||
| this.$emit('enter', event) | |||
| }, | |||
| // 公开方法：清除输入 | |||
| clear() { | |||
| this.inputValue = '' | |||
| this.$emit('input', '') | |||
| this.$emit('clear') | |||
| }, | |||
| // 公开方法：聚焦 | |||
| focus() { | |||
| this.$el.querySelector('input').focus() | |||
| }, | |||
| // 公开方法：失焦 | |||
| blur() { | |||
| this.$el.querySelector('input').blur() | |||
| } | |||
| }, | |||
| filters: { | |||
| getFillType(type) { | |||
| const typeMap = { | |||
| actFill: 'orange-border', | |||
| green: 'green-border', | |||
| preFill: 'blue-border' | |||
| } | |||
| return typeMap[type] || '' | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| // 基础样式增强 | |||
| :deep(.el-input) { | |||
| .el-input__inner { | |||
| transition: border-color 0.2s ease, box-shadow 0.2s ease; | |||
| &:focus { | |||
| box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); | |||
| } | |||
| } | |||
| } | |||
| // 橙色边框样式 | |||
| .orange-border { | |||
| input { | |||
| :deep(.el-input__inner) { | |||
| border-color: #f9c588; | |||
| &:focus { | |||
| border-color: #f9c588; | |||
| box-shadow: 0 0 0 2px rgba(249, 197, 136, 0.2); | |||
| } | |||
| &:hover { | |||
| border-color: #f9c588; | |||
| } | |||
| } | |||
| } | |||
| // 绿色边框样式 | |||
| .green-border { | |||
| input { | |||
| border-color: green; | |||
| :deep(.el-input__inner) { | |||
| border-color: #67c23a; | |||
| &:focus { | |||
| border-color: green; | |||
| border-color: #67c23a; | |||
| box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2); | |||
| } | |||
| &:hover { | |||
| border-color: green; | |||
| border-color: #67c23a; | |||
| } | |||
| } | |||
| } | |||
| // 蓝色边框样式 | |||
| .blue-border { | |||
| input { | |||
| border-color: #4ea2ff; | |||
| :deep(.el-input__inner) { | |||
| border-color: #409eff; | |||
| &:focus { | |||
| border-color: #4ea2ff; | |||
| border-color: #409eff; | |||
| box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); | |||
| } | |||
| &:hover { | |||
| border-color: #4ea2ff; | |||
| border-color: #409eff; | |||
| } | |||
| } | |||
| } | |||
| // 禁用状态样式 | |||
| :deep(.el-input.is-disabled) { | |||
| .el-input__inner { | |||
| background-color: #f5f7fa; | |||
| border-color: #e4e7ed; | |||
| color: #c0c4cc; | |||
| } | |||
| } | |||
| // 只读状态样式 | |||
| :deep(.el-input.is-readonly) { | |||
| .el-input__inner { | |||
| background-color: #fafafa; | |||
| cursor: not-allowed; | |||
| } | |||
| } | |||
| // 清除按钮样式 | |||
| :deep(.el-input__clear) { | |||
| color: #909399; | |||
| transition: color 0.2s ease; | |||
| &:hover { | |||
| color: #409eff; | |||
| } | |||
| } | |||
| // 密码显示按钮样式 | |||
| :deep(.el-input__password) { | |||
| color: #909399; | |||
| transition: color 0.2s ease; | |||
| &:hover { | |||
| color: #409eff; | |||
| } | |||
| } | |||
| // 输入框尺寸样式 | |||
| :deep(.el-input--large) { | |||
| .el-input__inner { | |||
| height: 40px; | |||
| font-size: 16px; | |||
| } | |||
| } | |||
| :deep(.el-input--small) { | |||
| .el-input__inner { | |||
| height: 32px; | |||
| font-size: 13px; | |||
| } | |||
| } | |||
| </style> | |||
+ 353
- 0
src/components/Template/Step.vue
View File
| @ -0,0 +1,353 @@ | |||
| <template> | |||
| <div class="step-container"> | |||
| <div class="step-header"> | |||
| <el-button type="primary" @click="addStep" icon="el-icon-plus">添加步骤</el-button> | |||
| </div> | |||
| <div class="step-list"> | |||
| <div | |||
| v-for="(step, index) in steps" | |||
| :key="step.id" | |||
| class="step-item" | |||
| > | |||
| <div class="step-header-item"> | |||
| <el-button | |||
| type="text" | |||
| @click="removeStep(index)" | |||
| icon="el-icon-delete" | |||
| class="delete-btn" | |||
| :disabled="steps.length === 1" | |||
| ></el-button> | |||
| </div> | |||
| <div class="step-content"> | |||
| <span class="step-title">步骤{{ index + 1 }}</span> | |||
| <el-select | |||
| class = "step-type-select" | |||
| v-model="step.type" | |||
| @change="onTypeChange(index)" | |||
| placeholder="请选择" | |||
| > | |||
| <el-option | |||
| v-for="option in stepTypes" | |||
| :key="option.value" | |||
| :label="option.label" | |||
| :value="option.value" | |||
| ></el-option> | |||
| </el-select> | |||
| <!-- 根据步骤类型显示对应的表单 --> | |||
| <component :is="getStepComponent(step.type)" | |||
| :step-data="step.formData" | |||
| @update="onFormUpdate(index, $event)"> | |||
| </component> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import ContainerStep from './StepComponents/ContainerStep.vue' | |||
| import CentrifugeStep from './StepComponents/CentrifugeStep.vue' | |||
| import AutoWeighStep from './StepComponents/AutoWeighStep.vue' | |||
| import ManualWeighStep from './StepComponents/ManualWeighStep.vue' | |||
| import AddSolutionStep from './StepComponents/AddSolutionStep.vue' | |||
| import MixStep from './StepComponents/MixStep.vue' | |||
| import UltrasoundStep from './StepComponents/UltrasoundStep.vue' | |||
| import FiltrationStep from './StepComponents/FiltrationStep.vue' | |||
| import PackageStep from './StepComponents/PackageStep.vue' | |||
| import Seal2Step from './StepComponents/Seal2Step.vue' | |||
| import Seal3Step from './StepComponents/Seal3Step.vue' | |||
| import VortexStep from './StepComponents/VortexStep.vue' | |||
| import CoatStep from './StepComponents/CoatStep.vue' | |||
| import StaticStartStep from './StepComponents/StaticStartStep.vue' | |||
| import StaticEndStep from './StepComponents/StaticEndStep.vue' | |||
| import TakePlateStep from './StepComponents/TakePlateStep.vue' | |||
| export default { | |||
| name: 'Step', | |||
| props: { | |||
| value: { | |||
| type: Array, | |||
| default: () => [] | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| stepTypes: [ | |||
| { label: '容器选择', value: 'container' }, | |||
| { label: '离心', value: 'centrifuge' }, | |||
| { label: '自动称量', value: 'autoWeigh' }, | |||
| { label: '手动称量', value: 'manualWeigh' }, | |||
| { label: '加入溶液', value: 'addSolution' }, | |||
| { label: '混合', value: 'mix' }, | |||
| { label: '超声', value: 'ultrasound' }, | |||
| { label: '抽滤', value: 'filtration' }, | |||
| { label: '分装', value: 'package' }, | |||
| { label: '封装2管', value: 'seal2' }, | |||
| { label: '封装3管', value: 'seal3' }, | |||
| { label: '漩涡混匀', value: 'vortex' }, | |||
| { label: '包被', value: 'coat' }, | |||
| { label: '静置开始', value: 'staticStart' }, | |||
| { label: '静置结束', value: 'staticEnd' }, | |||
| { label: '取板', value: 'takePlate' } | |||
| ], | |||
| steps: [], | |||
| stepId: 1, | |||
| componentMap: null | |||
| } | |||
| }, | |||
| computed: { | |||
| stepComponentMap() { | |||
| if (!this.componentMap) { | |||
| this.componentMap = { | |||
| 'container': 'ContainerStep', | |||
| 'centrifuge': 'CentrifugeStep', | |||
| 'autoWeigh': 'AutoWeighStep', | |||
| 'manualWeigh': 'ManualWeighStep', | |||
| 'addSolution': 'AddSolutionStep', | |||
| 'mix': 'MixStep', | |||
| 'ultrasound': 'UltrasoundStep', | |||
| 'filtration': 'FiltrationStep', | |||
| 'package': 'PackageStep', | |||
| 'seal2': 'Seal2Step', | |||
| 'seal3': 'Seal3Step', | |||
| 'vortex': 'VortexStep', | |||
| 'coat': 'CoatStep', | |||
| 'staticStart': 'StaticStartStep', | |||
| 'staticEnd': 'StaticEndStep', | |||
| 'takePlate': 'TakePlateStep' | |||
| } | |||
| } | |||
| return this.componentMap | |||
| } | |||
| }, | |||
| components: { | |||
| ContainerStep, | |||
| CentrifugeStep, | |||
| AutoWeighStep, | |||
| ManualWeighStep, | |||
| AddSolutionStep, | |||
| MixStep, | |||
| UltrasoundStep, | |||
| FiltrationStep, | |||
| PackageStep, | |||
| Seal2Step, | |||
| Seal3Step, | |||
| VortexStep, | |||
| CoatStep, | |||
| StaticStartStep, | |||
| StaticEndStep, | |||
| TakePlateStep | |||
| }, | |||
| created() { | |||
| // 初始化步骤数据 | |||
| if (this.value && this.value.length > 0) { | |||
| this.steps = this.value.map((step) => ({ | |||
| id: this.stepId++, | |||
| type: step.type || '', | |||
| formData: step.formData || {} | |||
| })) | |||
| } else { | |||
| // 默认添加一个步骤 | |||
| this.addStep() | |||
| } | |||
| }, | |||
| watch: { | |||
| steps: { | |||
| handler(newVal) { | |||
| this.$emit('input', newVal.map(step => ({ | |||
| type: step.type, | |||
| formData: step.formData | |||
| }))) | |||
| }, | |||
| deep: true | |||
| } | |||
| }, | |||
| methods: { | |||
| addStep() { | |||
| try { | |||
| this.steps.push({ | |||
| id: this.stepId++, | |||
| type: '', | |||
| formData: {} | |||
| }) | |||
| this.$emit('step-added', this.steps.length) | |||
| } catch (error) { | |||
| console.error('添加步骤失败:', error) | |||
| this.$message.error('添加步骤失败，请重试') | |||
| } | |||
| }, | |||
| removeStep(index) { | |||
| if (this.steps.length > 1) { | |||
| const removedStep = this.steps.splice(index, 1)[0] | |||
| this.$emit('step-removed', { index, step: removedStep, remaining: this.steps.length }) | |||
| } else { | |||
| this.$message.warning('至少需要保留一个步骤') | |||
| } | |||
| }, | |||
| onTypeChange(index) { | |||
| // 切换步骤类型时重置表单数据，并确保数据更新 | |||
| const oldType = this.steps[index].type | |||
| this.$set(this.steps[index], 'formData', {}) | |||
| // 可选：添加类型变化的回调 | |||
| this.$emit('step-type-changed', { | |||
| index, | |||
| newType: this.steps[index].type, | |||
| oldType | |||
| }) | |||
| }, | |||
| onFormUpdate(stepIndex, formData) { | |||
| this.steps[stepIndex].formData = formData | |||
| }, | |||
| getStepComponent(type) { | |||
| // 使用计算属性中的映射，提高性能 | |||
| return this.stepComponentMap[type] | |||
| }, | |||
| // 公共方法：获取所有步骤数据 | |||
| getFormData() { | |||
| return new Promise((resolve, reject) => { | |||
| const stepData = this.steps.map(step => ({ | |||
| type: step.type, | |||
| ...step.formData | |||
| })) | |||
| resolve(stepData) | |||
| }) | |||
| }, | |||
| // 公共方法：设置步骤数据 | |||
| setStepData(data) { | |||
| if (Array.isArray(data)) { | |||
| this.steps = data.map(step => ({ | |||
| id: this.stepId++, | |||
| type: step.type || '', | |||
| formData: step.formData || {} | |||
| })) | |||
| } | |||
| }, | |||
| // 公共方法：重置所有步骤 | |||
| resetSteps() { | |||
| this.steps = [{ | |||
| id: this.stepId++, | |||
| type: '', | |||
| formData: {} | |||
| }] | |||
| this.$emit('steps-reset') | |||
| }, | |||
| // 公共方法：获取指定步骤的数据 | |||
| getStepDataByIndex(index) { | |||
| if (index >= 0 && index < this.steps.length) { | |||
| return { | |||
| type: this.steps[index].type, | |||
| formData: this.steps[index].formData | |||
| } | |||
| } | |||
| return null | |||
| }, | |||
| // 公共方法：验证所有步骤 | |||
| validateSteps() { | |||
| const errors = [] | |||
| this.steps.forEach((step, index) => { | |||
| if (!step.type) { | |||
| errors.push(`步骤 ${index + 1}: 请选择步骤类型`) | |||
| } | |||
| // 可以在这里添加更具体的表单验证逻辑 | |||
| }) | |||
| return { | |||
| isValid: errors.length === 0, | |||
| errors | |||
| } | |||
| }, | |||
| // 公共方法：批量导入步骤数据 | |||
| importSteps(stepDataArray) { | |||
| if (Array.isArray(stepDataArray)) { | |||
| this.steps = stepDataArray.map((step, index) => ({ | |||
| id: this.stepId++, | |||
| type: step.type || '', | |||
| formData: step.formData || {} | |||
| })) | |||
| this.$emit('steps-imported', this.steps.length) | |||
| } | |||
| }, | |||
| // 公共方法：获取步骤统计信息 | |||
| getStepStatistics() { | |||
| const stats = { | |||
| total: this.steps.length, | |||
| byType: {}, | |||
| filled: 0 | |||
| } | |||
| this.steps.forEach(step => { | |||
| // 统计各类型数量 | |||
| if (step.type) { | |||
| stats.byType[step.type] = (stats.byType[step.type] || 0) + 1 | |||
| } | |||
| // 统计已填写的步骤 | |||
| if (step.type && Object.keys(step.formData).length > 0) { | |||
| stats.filled++ | |||
| } | |||
| }) | |||
| return stats | |||
| } | |||
| }, | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .step-container { | |||
| .step-header { | |||
| margin-bottom: 20px; | |||
| padding: 15px; | |||
| background: #f5f7fa; | |||
| border-radius: 6px; | |||
| } | |||
| .step-list { | |||
| .step-item { | |||
| margin-bottom: 20px; | |||
| border: 1px solid #e4e7ed; | |||
| border-radius: 6px; | |||
| overflow: hidden; | |||
| .step-title { | |||
| margin-right: 10px; | |||
| } | |||
| .step-type-select{ | |||
| width: 200px; | |||
| margin-right: 10px; | |||
| } | |||
| .delete-btn { | |||
| color: #f56c6c; | |||
| &:hover { | |||
| color: #f78989; | |||
| } | |||
| &:disabled { | |||
| color: #c0c4cc; | |||
| } | |||
| } | |||
| .step-content { | |||
| padding: 20px; | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 66
- 0
src/components/Template/StepComponents/AddSolutionStep.vue
View File
| @ -0,0 +1,66 @@ | |||
| <template> | |||
| <div class="add-solution-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="溶液名称"> | |||
| <el-input v-model="formData.solutionName" placeholder="请输入溶液名称"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="加入体积"> | |||
| <div style="display: flex; gap: 10px;"> | |||
| <el-input v-model="formData.volume" placeholder="体积"></el-input> | |||
| <el-select v-model="formData.unit" style="width: 80px;"> | |||
| <el-option label="μl" value="μl"></el-option> | |||
| <el-option label="ml" value="ml"></el-option> | |||
| <el-option label="l" value="l"></el-option> | |||
| </el-select> | |||
| </div> | |||
| </el-form-item> | |||
| <el-form-item label="浓度"> | |||
| <el-input v-model="formData.concentration" placeholder="请输入浓度"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度(℃)"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="加入速度"> | |||
| <el-select v-model="formData.additionSpeed" placeholder="请选择加入速度"> | |||
| <el-option label="慢速" value="slow"></el-option> | |||
| <el-option label="中速" value="medium"></el-option> | |||
| <el-option label="快速" value="fast"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'AddSolutionStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| solutionName: '', | |||
| volume: '', | |||
| unit: 'ml', | |||
| concentration: '', | |||
| temperature: '', | |||
| additionSpeed: '', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 89
- 0
src/components/Template/StepComponents/AutoWeighStep.vue
View File
| @ -0,0 +1,89 @@ | |||
| <!-- 自动称重步骤表单 --> | |||
| <template> | |||
| <div class="flex"> | |||
| <div class="form-label">选择</div> | |||
| <HandleFormItem | |||
| class = "w-120" | |||
| :item="fieldConfigs.notes" | |||
| v-model="formData.notes" | |||
| /> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import HandleFormItem from '../HandleFormItem.vue' | |||
| import Input from '../Input.vue' | |||
| export default { | |||
| name: 'AutoWeighStep', | |||
| components: { | |||
| HandleFormItem, | |||
| Input | |||
| }, | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| targetWeight: '123', | |||
| tolerance: '', | |||
| sampleName: '', | |||
| containerWeight: '', | |||
| notes: '' | |||
| }, | |||
| // 字段配置 | |||
| fieldConfigs: { | |||
| targetWeight: { | |||
| label: '目标重量', | |||
| placeholder: '请输入目标重量', | |||
| maxlength: 50 | |||
| }, | |||
| tolerance: { | |||
| label: '允许误差', | |||
| placeholder: '请输入允许误差', | |||
| maxlength: 20 | |||
| }, | |||
| sampleName: { | |||
| label: '样品名称', | |||
| placeholder: '请输入样品名称', | |||
| maxlength: 100 | |||
| }, | |||
| containerWeight: { | |||
| label: '容器重量', | |||
| placeholder: '请输入容器重量', | |||
| maxlength: 20 | |||
| }, | |||
| notes: { | |||
| label: '备注', | |||
| placeholder: '请输入备注信息', | |||
| maxlength: 500 | |||
| } | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| // 合并传入的数据 | |||
| if (this.stepData) { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| }, | |||
| methods: { | |||
| onFieldChange(field, value) { | |||
| this.formData[field] = value | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .w-120{ | |||
| width: 120px; | |||
| } | |||
| </style> | |||
+ 62
- 0
src/components/Template/StepComponents/CentrifugeStep.vue
View File
| @ -0,0 +1,62 @@ | |||
| <template> | |||
| <div class="centrifuge-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="转速(rpm)"> | |||
| <el-input v-model="formData.speed" placeholder="请输入转速"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="时间(min)"> | |||
| <el-input v-model="formData.time" placeholder="请输入时间"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度(℃)"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="加速度"> | |||
| <el-select v-model="formData.acceleration" placeholder="请选择加速度"> | |||
| <el-option label="慢" value="slow"></el-option> | |||
| <el-option label="中" value="medium"></el-option> | |||
| <el-option label="快" value="fast"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="减速度"> | |||
| <el-select v-model="formData.deceleration" placeholder="请选择减速度"> | |||
| <el-option label="慢" value="slow"></el-option> | |||
| <el-option label="中" value="medium"></el-option> | |||
| <el-option label="快" value="fast"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'CentrifugeStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| speed: '', | |||
| time: '', | |||
| temperature: '', | |||
| acceleration: '', | |||
| deceleration: '', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 152
- 0
src/components/Template/StepComponents/CoatStep.vue
View File
| @ -0,0 +1,152 @@ | |||
| <template> | |||
| <div class="coat-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="包被物质"> | |||
| <el-input v-model="formData.coatMaterial" placeholder="请输入包被物质名称"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="包被浓度"> | |||
| <el-input v-model="formData.concentration" placeholder="请输入浓度值"> | |||
| <el-select v-model="formData.concentrationUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="mg/ml" value="mg/ml"></el-option> | |||
| <el-option label="μg/ml" value="μg/ml"></el-option> | |||
| <el-option label="ng/ml" value="ng/ml"></el-option> | |||
| <el-option label="%" value="%"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="包被体积"> | |||
| <el-input v-model="formData.volume" placeholder="请输入体积"> | |||
| <el-select v-model="formData.unit" slot="append" style="width: 80px;"> | |||
| <el-option label="ml" value="ml"></el-option> | |||
| <el-option label="μl" value="μl"></el-option> | |||
| <el-option label="l" value="l"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="包被时间"> | |||
| <el-input v-model="formData.time" placeholder="请输入时间"> | |||
| <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| <el-option label="d" value="d"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度条件"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"> | |||
| <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="pH值"> | |||
| <el-input-number | |||
| v-model="formData.pH" | |||
| :min="1" | |||
| :max="14" | |||
| :step="0.1" | |||
| :precision="1" | |||
| placeholder="请输入pH值" | |||
| ></el-input-number> | |||
| </el-form-item> | |||
| <el-form-item label="容器类型"> | |||
| <el-select v-model="formData.containerType" placeholder="请选择容器类型"> | |||
| <el-option label="微孔板" value="microplate"></el-option> | |||
| <el-option label="培养皿" value="petriDish"></el-option> | |||
| <el-option label="载玻片" value="slide"></el-option> | |||
| <el-option label="试管" value="testTube"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="包被方法"> | |||
| <el-radio-group v-model="formData.method"> | |||
| <el-radio label="passive">被动吸附</el-radio> | |||
| <el-radio label="active">共价结合</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| <el-form-item label="洗涤步骤"> | |||
| <el-checkbox-group v-model="formData.washSteps"> | |||
| <el-checkbox label="包被前洗涤">包被前洗涤</el-checkbox> | |||
| <el-checkbox label="包被后洗涤">包被后洗涤</el-checkbox> | |||
| <el-checkbox label="封闭前洗涤">封闭前洗涤</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="封闭处理"> | |||
| <el-switch v-model="formData.blocking"></el-switch> | |||
| </el-form-item> | |||
| <el-form-item v-if="formData.blocking" label="封闭剂"> | |||
| <el-input v-model="formData.blockingAgent" placeholder="请输入封闭剂名称"></el-input> | |||
| </el-form-item> | |||
| <el-form-item v-if="formData.blocking" label="封闭时间"> | |||
| <el-input v-model="formData.blockingTime" placeholder="请输入封闭时间"> | |||
| <el-select v-model="formData.blockingTimeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'CoatStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| coatMaterial: '', | |||
| concentration: '', | |||
| concentrationUnit: 'mg/ml', | |||
| volume: '', | |||
| unit: 'ml', | |||
| time: '', | |||
| timeUnit: 'h', | |||
| temperature: '', | |||
| temperatureUnit: '℃', | |||
| pH: '', | |||
| containerType: '', | |||
| method: 'passive', | |||
| washSteps: [], | |||
| blocking: false, | |||
| blockingAgent: '', | |||
| blockingTime: '', | |||
| blockingTimeUnit: 'min', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 70
- 0
src/components/Template/StepComponents/ContainerStep.vue
View File
| @ -0,0 +1,70 @@ | |||
| <!-- 容器步骤表单 --> | |||
| <template> | |||
| <div class="flex items-center"> | |||
| <div>容器选择</div> | |||
| <HandleFormItem class="w-auto" type="select" :item="fieldConfigs.containerType" | |||
| @change="onContainerTypeChange" | |||
| v-model="formData.containerType" /> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import HandleFormItem from '../HandleFormItem.vue' | |||
| export default { | |||
| name: 'ContainerStep', | |||
| components: { | |||
| HandleFormItem | |||
| }, | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| containerType: '', | |||
| }, | |||
| // 字段配置 | |||
| fieldConfigs: { | |||
| containerType: { | |||
| label: '容器选择', | |||
| placeholder: '请选择', | |||
| options: [ | |||
| { label: '离心管', value: 'centrifugeTube' }, | |||
| { label: '试管', value: 'testTube' }, | |||
| { label: '烧杯', value: 'beaker' }, | |||
| { label: '容量瓶', value: 'volumetricFlask' }, | |||
| { label: '培养皿', value: 'petriDish' } | |||
| ] | |||
| } | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| console.log(newVal,"newVal") | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| }, | |||
| methods: { | |||
| onContainerTypeChange(val) { | |||
| this.formData.containerType = val | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .flex { | |||
| display: flex; | |||
| } | |||
| .items-center { | |||
| align-items: center; | |||
| } | |||
| .w-auto { | |||
| width: auto; | |||
| } | |||
| </style> | |||
+ 84
- 0
src/components/Template/StepComponents/FiltrationStep.vue
View File
| @ -0,0 +1,84 @@ | |||
| <template> | |||
| <div class="filtration-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="滤膜类型"> | |||
| <el-select v-model="formData.filterType" placeholder="请选择滤膜类型"> | |||
| <el-option label="0.22μm" value="0.22"></el-option> | |||
| <el-option label="0.45μm" value="0.45"></el-option> | |||
| <el-option label="0.8μm" value="0.8"></el-option> | |||
| <el-option label="1.2μm" value="1.2"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="压力"> | |||
| <el-input v-model="formData.pressure" placeholder="请输入压力值"> | |||
| <el-select v-model="formData.pressureUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="kPa" value="kPa"></el-option> | |||
| <el-option label="bar" value="bar"></el-option> | |||
| <el-option label="psi" value="psi"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="过滤时间"> | |||
| <el-input v-model="formData.time" placeholder="请输入时间"> | |||
| <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="s" value="s"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"> | |||
| <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'FiltrationStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| filterType: '', | |||
| pressure: '', | |||
| pressureUnit: 'kPa', | |||
| time: '', | |||
| timeUnit: 'min', | |||
| temperature: '', | |||
| temperatureUnit: '℃', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 50
- 0
src/components/Template/StepComponents/ManualWeighStep.vue
View File
| @ -0,0 +1,50 @@ | |||
| <template> | |||
| <div class="manual-weigh-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="实际重量(g)"> | |||
| <el-input v-model="formData.actualWeight" placeholder="请输入实际重量"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="目标重量(g)"> | |||
| <el-input v-model="formData.targetWeight" placeholder="请输入目标重量"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="差值(g)"> | |||
| <el-input v-model="formData.difference" placeholder="自动计算"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="样品名称"> | |||
| <el-input v-model="formData.sampleName" placeholder="请输入样品名称"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'ManualWeighStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| actualWeight: '', | |||
| targetWeight: '', | |||
| difference: '', | |||
| sampleName: '', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 59
- 0
src/components/Template/StepComponents/MixStep.vue
View File
| @ -0,0 +1,59 @@ | |||
| <template> | |||
| <div class="mix-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="混合方式"> | |||
| <el-select v-model="formData.method" placeholder="请选择混合方式"> | |||
| <el-option label="涡旋混匀" value="vortex"></el-option> | |||
| <el-option label="颠倒混匀" value="invert"></el-option> | |||
| <el-option label="移液器吹打" value="pipette"></el-option> | |||
| <el-option label="磁力搅拌" value="magnetic"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="混合时间(s)"> | |||
| <el-input v-model="formData.time" placeholder="请输入混合时间"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="混合速度"> | |||
| <el-select v-model="formData.speed" placeholder="请选择混合速度"> | |||
| <el-option label="低速" value="low"></el-option> | |||
| <el-option label="中速" value="medium"></el-option> | |||
| <el-option label="高速" value="high"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="温度(℃)"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'MixStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| method: '', | |||
| time: '', | |||
| speed: '', | |||
| temperature: '', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 90
- 0
src/components/Template/StepComponents/PackageStep.vue
View File
| @ -0,0 +1,90 @@ | |||
| <template> | |||
| <div class="package-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="分装容器"> | |||
| <el-select v-model="formData.containerType" placeholder="请选择分装容器"> | |||
| <el-option label="离心管" value="centrifugeTube"></el-option> | |||
| <el-option label="试管" value="testTube"></el-option> | |||
| <el-option label="样品瓶" value="vial"></el-option> | |||
| <el-option label="微孔板" value="microplate"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="分装数量"> | |||
| <el-input-number | |||
| v-model="formData.quantity" | |||
| :min="1" | |||
| :max="100" | |||
| :step="1" | |||
| ></el-input-number> | |||
| </el-form-item> | |||
| <el-form-item label="每份体积"> | |||
| <el-input v-model="formData.volume" placeholder="请输入体积"> | |||
| <el-select v-model="formData.unit" slot="append" style="width: 80px;"> | |||
| <el-option label="ml" value="ml"></el-option> | |||
| <el-option label="μl" value="μl"></el-option> | |||
| <el-option label="l" value="l"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="分装方式"> | |||
| <el-radio-group v-model="formData.method"> | |||
| <el-radio label="manual">手动分装</el-radio> | |||
| <el-radio label="auto">自动分装</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| <el-form-item label="温度要求"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"> | |||
| <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'PackageStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| containerType: '', | |||
| quantity: 1, | |||
| volume: '', | |||
| unit: 'ml', | |||
| method: 'manual', | |||
| temperature: '', | |||
| temperatureUnit: '℃', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 113
- 0
src/components/Template/StepComponents/Seal2Step.vue
View File
| @ -0,0 +1,113 @@ | |||
| <template> | |||
| <div class="seal2-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="封装方式"> | |||
| <el-select v-model="formData.method" placeholder="请选择封装方式"> | |||
| <el-option label="热封" value="heat"></el-option> | |||
| <el-option label="机械封" value="mechanical"></el-option> | |||
| <el-option label="封膜" value="membrane"></el-option> | |||
| <el-option label="盖子封" value="cap"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="密封材料"> | |||
| <el-select v-model="formData.material" placeholder="请选择密封材料"> | |||
| <el-option label="铝箔" value="aluminum"></el-option> | |||
| <el-option label="塑料膜" value="plastic"></el-option> | |||
| <el-option label="橡胶塞" value="rubber"></el-option> | |||
| <el-option label="螺旋盖" value="screwCap"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="压力参数"> | |||
| <el-input v-model="formData.pressure" placeholder="请输入压力值"> | |||
| <el-select v-model="formData.pressureUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="kPa" value="kPa"></el-option> | |||
| <el-option label="bar" value="bar"></el-option> | |||
| <el-option label="psi" value="psi"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度参数"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"> | |||
| <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="时间参数"> | |||
| <el-input v-model="formData.time" placeholder="请输入时间"> | |||
| <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="s" value="s"></el-option> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="封管数量"> | |||
| <el-input-number | |||
| v-model="formData.tubeCount" | |||
| :min="2" | |||
| :max="2" | |||
| :step="1" | |||
| ></el-input-number> | |||
| </el-form-item> | |||
| <el-form-item label="质量检查"> | |||
| <el-checkbox-group v-model="formData.qualityChecks"> | |||
| <el-checkbox label="密封性检查">密封性检查</el-checkbox> | |||
| <el-checkbox label="外观检查">外观检查</el-checkbox> | |||
| <el-checkbox label="标识检查">标识检查</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'Seal2Step', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| method: '', | |||
| material: '', | |||
| pressure: '', | |||
| pressureUnit: 'kPa', | |||
| temperature: '', | |||
| temperatureUnit: '℃', | |||
| time: '', | |||
| timeUnit: 's', | |||
| tubeCount: 2, | |||
| qualityChecks: [], | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 114
- 0
src/components/Template/StepComponents/Seal3Step.vue
View File
| @ -0,0 +1,114 @@ | |||
| <template> | |||
| <div class="seal3-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="封装方式"> | |||
| <el-select v-model="formData.method" placeholder="请选择封装方式"> | |||
| <el-option label="热封" value="heat"></el-option> | |||
| <el-option label="机械封" value="mechanical"></el-option> | |||
| <el-option label="封膜" value="membrane"></el-option> | |||
| <el-option label="盖子封" value="cap"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="密封材料"> | |||
| <el-select v-model="formData.material" placeholder="请选择密封材料"> | |||
| <el-option label="铝箔" value="aluminum"></el-option> | |||
| <el-option label="塑料膜" value="plastic"></el-option> | |||
| <el-option label="橡胶塞" value="rubber"></el-option> | |||
| <el-option label="螺旋盖" value="screwCap"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="压力参数"> | |||
| <el-input v-model="formData.pressure" placeholder="请输入压力值"> | |||
| <el-select v-model="formData.pressureUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="kPa" value="kPa"></el-option> | |||
| <el-option label="bar" value="bar"></el-option> | |||
| <el-option label="psi" value="psi"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度参数"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"> | |||
| <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="时间参数"> | |||
| <el-input v-model="formData.time" placeholder="请输入时间"> | |||
| <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="s" value="s"></el-option> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="封管数量"> | |||
| <el-input-number | |||
| v-model="formData.tubeCount" | |||
| :min="3" | |||
| :max="3" | |||
| :step="1" | |||
| ></el-input-number> | |||
| </el-form-item> | |||
| <el-form-item label="质量检查"> | |||
| <el-checkbox-group v-model="formData.qualityChecks"> | |||
| <el-checkbox label="密封性检查">密封性检查</el-checkbox> | |||
| <el-checkbox label="外观检查">外观检查</el-checkbox> | |||
| <el-checkbox label="标识检查">标识检查</el-checkbox> | |||
| <el-checkbox label="批次检查">批次检查</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'Seal3Step', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| method: '', | |||
| material: '', | |||
| pressure: '', | |||
| pressureUnit: 'kPa', | |||
| temperature: '', | |||
| temperatureUnit: '℃', | |||
| time: '', | |||
| timeUnit: 's', | |||
| tubeCount: 3, | |||
| qualityChecks: [], | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 144
- 0
src/components/Template/StepComponents/StaticEndStep.vue
View File
| @ -0,0 +1,144 @@ | |||
| <template> | |||
| <div class="static-end-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="实际时间"> | |||
| <el-input v-model="formData.actualDuration" placeholder="请输入实际静置时间"> | |||
| <el-select v-model="formData.actualDurationUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| <el-option label="d" value="d"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="结束时间"> | |||
| <el-date-picker | |||
| v-model="formData.endTime" | |||
| type="datetime" | |||
| placeholder="请选择结束时间" | |||
| format="yyyy-MM-dd HH:mm" | |||
| value-format="yyyy-MM-dd HH:mm:ss" | |||
| ></el-date-picker> | |||
| </el-form-item> | |||
| <el-form-item label="实际温度"> | |||
| <el-input v-model="formData.actualTemperature" placeholder="请输入实际温度"> | |||
| <el-select v-model="formData.actualTemperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="样品状态"> | |||
| <el-select v-model="formData.sampleState" placeholder="请选择样品状态"> | |||
| <el-option label="正常" value="normal"></el-option> | |||
| <el-option label="异常" value="abnormal"></el-option> | |||
| <el-option label="有变化" value="changed"></el-option> | |||
| <el-option label="无变化" value="unchanged"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="观察结果"> | |||
| <el-checkbox-group v-model="formData.observationResults"> | |||
| <el-checkbox label="颜色变化">颜色变化</el-checkbox> | |||
| <el-checkbox label="沉淀形成">沉淀形成</el-checkbox> | |||
| <el-checkbox label="相分离">相分离</el-checkbox> | |||
| <el-checkbox label="结晶">结晶</el-checkbox> | |||
| <el-checkbox label="无异常">无异常</el-checkbox> | |||
| <el-checkbox label="其他">其他</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="容器状态"> | |||
| <el-select v-model="formData.finalContainerState" placeholder="请选择最终容器状态"> | |||
| <el-option label="密封" value="sealed"></el-option> | |||
| <el-option label="半密封" value="semiSealed"></el-option> | |||
| <el-option label="开放" value="open"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="后续处理"> | |||
| <el-checkbox-group v-model="formData.nextSteps"> | |||
| <el-checkbox label="直接进行下一步">直接进行下一步</el-checkbox> | |||
| <el-checkbox label="需要预处理">需要预处理</el-checkbox> | |||
| <el-checkbox label="需要检测">需要检测</el-checkbox> | |||
| <el-checkbox label="需要储存">需要储存</el-checkbox> | |||
| <el-checkbox label="需要转移">需要转移</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="处理结果"> | |||
| <el-radio-group v-model="formData.processResult"> | |||
| <el-radio label="success">静置成功</el-radio> | |||
| <el-radio label="partial">部分成功</el-radio> | |||
| <el-radio label="failed">静置失败</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| <el-form-item v-if="formData.processResult !== 'success'" label="失败原因"> | |||
| <el-input v-model="formData.failureReason" placeholder="请输入失败原因"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="质量评估"> | |||
| <el-rate v-model="formData.qualityScore" show-text></el-rate> | |||
| </el-form-item> | |||
| <el-form-item label="最终观察"> | |||
| <el-input | |||
| v-model="formData.finalObservation" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入最终观察结果" | |||
| ></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'StaticEndStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| actualDuration: '', | |||
| actualDurationUnit: 'h', | |||
| endTime: '', | |||
| actualTemperature: '', | |||
| actualTemperatureUnit: '℃', | |||
| sampleState: '', | |||
| observationResults: [], | |||
| finalContainerState: '', | |||
| nextSteps: [], | |||
| processResult: 'success', | |||
| failureReason: '', | |||
| qualityScore: 5, | |||
| finalObservation: '', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 142
- 0
src/components/Template/StepComponents/StaticStartStep.vue
View File
| @ -0,0 +1,142 @@ | |||
| <template> | |||
| <div class="static-start-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="静置目的"> | |||
| <el-input v-model="formData.purpose" placeholder="请输入静置目的"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="预计时间"> | |||
| <el-input v-model="formData.duration" placeholder="请输入预计时间"> | |||
| <el-select v-model="formData.durationUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| <el-option label="d" value="d"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度要求"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"> | |||
| <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="容器状态"> | |||
| <el-select v-model="formData.containerState" placeholder="请选择容器状态"> | |||
| <el-option label="密封" value="sealed"></el-option> | |||
| <el-option label="半密封" value="semiSealed"></el-option> | |||
| <el-option label="开放" value="open"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="环境条件"> | |||
| <el-checkbox-group v-model="formData.environmentConditions"> | |||
| <el-checkbox label="避光">避光</el-checkbox> | |||
| <el-checkbox label="恒温">恒温</el-checkbox> | |||
| <el-checkbox label="静置">静置</el-checkbox> | |||
| <el-checkbox label="无震动">无震动</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="静置位置"> | |||
| <el-select v-model="formData.position" placeholder="请选择静置位置"> | |||
| <el-option label="室温" value="roomTemp"></el-option> | |||
| <el-option label="冷藏" value="refrigerated"></el-option> | |||
| <el-option label="冷冻" value="frozen"></el-option> | |||
| <el-option label="恒温箱" value="incubator"></el-option> | |||
| <el-option label="水浴" value="waterBath"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="容器类型"> | |||
| <el-select v-model="formData.containerType" placeholder="请选择容器类型"> | |||
| <el-option label="离心管" value="centrifugeTube"></el-option> | |||
| <el-option label="试管" value="testTube"></el-option> | |||
| <el-option label="烧杯" value="beaker"></el-option> | |||
| <el-option label="培养皿" value="petriDish"></el-option> | |||
| <el-option label="容量瓶" value="volumetricFlask"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="体积范围"> | |||
| <el-input v-model="formData.volume" placeholder="请输入体积"> | |||
| <el-select v-model="formData.volumeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="ml" value="ml"></el-option> | |||
| <el-option label="μl" value="μl"></el-option> | |||
| <el-option label="l" value="l"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="开始时间"> | |||
| <el-date-picker | |||
| v-model="formData.startTime" | |||
| type="datetime" | |||
| placeholder="请选择开始时间" | |||
| format="yyyy-MM-dd HH:mm" | |||
| value-format="yyyy-MM-dd HH:mm:ss" | |||
| ></el-date-picker> | |||
| </el-form-item> | |||
| <el-form-item label="观察记录"> | |||
| <el-checkbox-group v-model="formData.observationRecords"> | |||
| <el-checkbox label="颜色变化">颜色变化</el-checkbox> | |||
| <el-checkbox label="沉淀形成">沉淀形成</el-checkbox> | |||
| <el-checkbox label="相分离">相分离</el-checkbox> | |||
| <el-checkbox label="结晶">结晶</el-checkbox> | |||
| <el-checkbox label="其他">其他</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'StaticStartStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| purpose: '', | |||
| duration: '', | |||
| durationUnit: 'h', | |||
| temperature: '', | |||
| temperatureUnit: '℃', | |||
| containerState: '', | |||
| environmentConditions: [], | |||
| position: '', | |||
| containerType: '', | |||
| volume: '', | |||
| volumeUnit: 'ml', | |||
| startTime: '', | |||
| observationRecords: [], | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 147
- 0
src/components/Template/StepComponents/TakePlateStep.vue
View File
| @ -0,0 +1,147 @@ | |||
| <template> | |||
| <div class="take-plate-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="取板目的"> | |||
| <el-input v-model="formData.purpose" placeholder="请输入取板目的"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="微孔板类型"> | |||
| <el-select v-model="formData.plateType" placeholder="请选择微孔板类型"> | |||
| <el-option label="96孔板" value="96well"></el-option> | |||
| <el-option label="48孔板" value="48well"></el-option> | |||
| <el-option label="24孔板" value="24well"></el-option> | |||
| <el-option label="12孔板" value="12well"></el-option> | |||
| <el-option label="6孔板" value="6well"></el-option> | |||
| <el-option label="384孔板" value="384well"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="取板位置"> | |||
| <el-select v-model="formData.location" placeholder="请选择取板位置"> | |||
| <el-option label="培养箱" value="incubator"></el-option> | |||
| <el-option label="冷藏" value="refrigerator"></el-option> | |||
| <el-option label="室温" value="roomTemp"></el-option> | |||
| <el-option label="水浴" value="waterBath"></el-option> | |||
| <el-option label="摇床" value="shaker"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="取板时间"> | |||
| <el-date-picker | |||
| v-model="formData.takeTime" | |||
| type="datetime" | |||
| placeholder="请选择取板时间" | |||
| format="yyyy-MM-dd HH:mm" | |||
| value-format="yyyy-MM-dd HH:mm:ss" | |||
| ></el-date-picker> | |||
| </el-form-item> | |||
| <el-form-item label="板子状态"> | |||
| <el-select v-model="formData.plateState" placeholder="请选择板子状态"> | |||
| <el-option label="正常" value="normal"></el-option> | |||
| <el-option label="有污染" value="contaminated"></el-option> | |||
| <el-option label="干燥" value="dry"></el-option> | |||
| <el-option label="湿润" value="wet"></el-option> | |||
| <el-option label="有沉淀" value="precipitate"></el-option> | |||
| <el-option label="有结晶" value="crystal"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="处理要求"> | |||
| <el-checkbox-group v-model="formData.processRequirements"> | |||
| <el-checkbox label="立即处理">立即处理</el-checkbox> | |||
| <el-checkbox label="室温放置">室温放置</el-checkbox> | |||
| <el-checkbox label="冷藏保存">冷藏保存</el-checkbox> | |||
| <el-checkbox label="冷冻保存">冷冻保存</el-checkbox> | |||
| <el-checkbox label="避光保存">避光保存</el-checkbox> | |||
| <el-checkbox label="需要检测">需要检测</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="取板数量"> | |||
| <el-input-number | |||
| v-model="formData.quantity" | |||
| :min="1" | |||
| :max="10" | |||
| :step="1" | |||
| ></el-input-number> | |||
| </el-form-item> | |||
| <el-form-item label="操作者"> | |||
| <el-input v-model="formData.operator" placeholder="请输入操作者姓名"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="后续处理"> | |||
| <el-radio-group v-model="formData.nextAction"> | |||
| <el-radio label="immediate">立即处理</el-radio> | |||
| <el-radio label="delayed">延迟处理</el-radio> | |||
| <el-radio label="storage">储存待处理</el-radio> | |||
| <el-radio label="discard">丢弃</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| <el-form-item label="质量检查"> | |||
| <el-checkbox-group v-model="formData.qualityChecks"> | |||
| <el-checkbox label="外观检查">外观检查</el-checkbox> | |||
| <el-checkbox label="标识检查">标识检查</el-checkbox> | |||
| <el-checkbox label="完整性检查">完整性检查</el-checkbox> | |||
| <el-checkbox label="污染检查">污染检查</el-checkbox> | |||
| </el-checkbox-group> | |||
| </el-form-item> | |||
| <el-form-item label="特殊要求"> | |||
| <el-input | |||
| v-model="formData.specialRequirements" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入特殊要求或注意事项" | |||
| ></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'TakePlateStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| purpose: '', | |||
| plateType: '', | |||
| location: '', | |||
| takeTime: '', | |||
| plateState: '', | |||
| processRequirements: [], | |||
| quantity: 1, | |||
| operator: '', | |||
| nextAction: 'immediate', | |||
| qualityChecks: [], | |||
| specialRequirements: '', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 50
- 0
src/components/Template/StepComponents/UltrasoundStep.vue
View File
| @ -0,0 +1,50 @@ | |||
| <template> | |||
| <div class="ultrasound-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="功率(%)"> | |||
| <el-input v-model="formData.power" placeholder="请输入功率百分比"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="时间(min)"> | |||
| <el-input v-model="formData.time" placeholder="请输入超声时间"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度(℃)"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="频率(kHz)"> | |||
| <el-input v-model="formData.frequency" placeholder="请输入频率"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'UltrasoundStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| power: '', | |||
| time: '', | |||
| temperature: '', | |||
| frequency: '', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
+ 124
- 0
src/components/Template/StepComponents/VortexStep.vue
View File
| @ -0,0 +1,124 @@ | |||
| <template> | |||
| <div class="vortex-step"> | |||
| <el-form label-width="120px"> | |||
| <el-form-item label="混匀方式"> | |||
| <el-select v-model="formData.method" placeholder="请选择混匀方式"> | |||
| <el-option label="漩涡混匀" value="vortex"></el-option> | |||
| <el-option label="摇床混匀" value="shaker"></el-option> | |||
| <el-option label="磁力搅拌" value="magnetic"></el-option> | |||
| <el-option label="机械搅拌" value="mechanical"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="混匀时间"> | |||
| <el-input v-model="formData.time" placeholder="请输入时间"> | |||
| <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="s" value="s"></el-option> | |||
| <el-option label="min" value="min"></el-option> | |||
| <el-option label="h" value="h"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="转速设置"> | |||
| <el-input v-model="formData.speed" placeholder="请输入转速"> | |||
| <el-select v-model="formData.speedUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="rpm" value="rpm"></el-option> | |||
| <el-option label="Hz" value="Hz"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="体积范围"> | |||
| <el-input v-model="formData.volume" placeholder="请输入体积"> | |||
| <el-select v-model="formData.unit" slot="append" style="width: 80px;"> | |||
| <el-option label="ml" value="ml"></el-option> | |||
| <el-option label="μl" value="μl"></el-option> | |||
| <el-option label="l" value="l"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="温度控制"> | |||
| <el-input v-model="formData.temperature" placeholder="请输入温度"> | |||
| <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;"> | |||
| <el-option label="℃" value="℃"></el-option> | |||
| <el-option label="℉" value="℉"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="容器类型"> | |||
| <el-select v-model="formData.containerType" placeholder="请选择容器类型"> | |||
| <el-option label="离心管" value="centrifugeTube"></el-option> | |||
| <el-option label="试管" value="testTube"></el-option> | |||
| <el-option label="烧杯" value="beaker"></el-option> | |||
| <el-option label="培养皿" value="petriDish"></el-option> | |||
| </el-select> | |||
| </el-form-item> | |||
| <el-form-item label="混匀模式"> | |||
| <el-radio-group v-model="formData.mode"> | |||
| <el-radio label="continuous">连续混匀</el-radio> | |||
| <el-radio label="interval">间歇混匀</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| <el-form-item v-if="formData.mode === 'interval'" label="间歇时间"> | |||
| <el-input v-model="formData.intervalTime" placeholder="请输入间歇时间"> | |||
| <el-select v-model="formData.intervalTimeUnit" slot="append" style="width: 80px;"> | |||
| <el-option label="s" value="s"></el-option> | |||
| <el-option label="min" value="min"></el-option> | |||
| </el-select> | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item label="备注"> | |||
| <el-input | |||
| v-model="formData.notes" | |||
| type="textarea" | |||
| :rows="3" | |||
| placeholder="请输入备注信息" | |||
| ></el-input> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'VortexStep', | |||
| props: ['stepData'], | |||
| data() { | |||
| return { | |||
| formData: { | |||
| method: '', | |||
| time: '', | |||
| timeUnit: 's', | |||
| speed: '', | |||
| speedUnit: 'rpm', | |||
| volume: '', | |||
| unit: 'ml', | |||
| temperature: '', | |||
| temperatureUnit: '℃', | |||
| containerType: '', | |||
| mode: 'continuous', | |||
| intervalTime: '', | |||
| intervalTimeUnit: 's', | |||
| notes: '' | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| this.formData = { ...this.formData, ...this.stepData } | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| handler(newVal) { | |||
| this.$emit('update', newVal) | |||
| }, | |||
| deep: true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||