From cbb23429b8beed72b58cbb57f9b3c56a0fb2b5d2 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 09 五月 2025 13:31:26 +0800
Subject: [PATCH] 修改
---
src/views/experiment/project/components/selectMaterial.vue | 74 ++++++++++++++++++++++++++++---------
1 files changed, 56 insertions(+), 18 deletions(-)
diff --git a/src/views/experiment/project/components/selectMaterial.vue b/src/views/experiment/project/components/selectMaterial.vue
index bb29d5f..bce7bb4 100644
--- a/src/views/experiment/project/components/selectMaterial.vue
+++ b/src/views/experiment/project/components/selectMaterial.vue
@@ -1,17 +1,17 @@
<template>
<tr class="m-color b-font" style="text-align: center">实验所用的试剂或材料</tr>
<tr>
- <td class="w-14 m-color">实验材料</td>
+ <td class="w-14 m-color required">实验材料</td>
<td class="w-14 m-color">耗材ID</td>
<td class="w-14 m-color">材料类型</td>
<td class="w-14 m-color">材料储存</td>
<td class="w-14 m-color">计量单位</td>
- <td class="w-14 m-color">使用数量</td>
+ <td class="w-14 m-color required">使用数量</td>
<td class="w-14 m-color">操作</td>
</tr>
<tr v-for="(item,index) in selectMaterialState.materialList" :key="index">
<td class="w-14">
- <el-select :disabled="selectMaterialState.disabled" filterable v-model="item.stuffId" @change="giveOtherMaterialValue($event, index)">
+ <el-select :disabled="selectMaterialState.disabled" filterable v-model="item.stuffId" @change="giveOtherMaterialValue($event, index)" @focus="checkAllMaterial($event, index)">
<el-option
v-for="item in selectMaterialState.allMaterialList"
:key="item.id"
@@ -22,45 +22,67 @@
</el-select>
</td>
<td class="w-14">
- <el-input :disabled="selectMaterialState.disabled" v-model="item.stuffCode" />
+ <el-input disabled v-model="item.stuffCode" />
</td>
<td class="w-14">
- <el-input :disabled="selectMaterialState.disabled" v-model="item.stuffType" />
+<!-- <el-input :disabled="selectMaterialState.disabled" v-model="item.stuffType" />-->
+ <div>{{selectMaterialState.stuffTypeList.find(i=>i.id == item.stuffType)?.name}}</div>
</td>
<td class="w-14">
- <el-input :disabled="selectMaterialState.disabled" v-model="item.stuffStorage" />
+<!-- <el-input :disabled="selectMaterialState.disabled" v-model="item.stuffStorage" />-->
+ <div>{{selectMaterialState.stuffStorageList.find(i=>i.id == item.stuffStorage)?.name}}</div>
</td>
<td class="w-14">
- <el-input :disabled="selectMaterialState.disabled" v-model="item.stuffUnit" />
+<!-- <el-input :disabled="selectMaterialState.disabled" v-model="item.stuffUnit" />-->
+ <div>{{selectMaterialState.stuffUnitList.find(i=>i.id == item.stuffUnit)?.name}}</div>
</td>
<td class="w-14">
- <el-input type="number" v-model="item.stuffUseCount" />
+ <el-input type="number" :disabled="selectMaterialState.disabled" v-model="item.stuffUseCount" />
</td>
<td class="w-14">
<el-button type="danger" :disabled="selectMaterialState.disabled" @click="deleteMaterialItem(index)">删除</el-button>
</td>
</tr>
- <tr style="text-align: center">
- <el-button :disabled="selectMaterialState.disabled" type="primary" shape="round" @click="addMaterialItem()">
- 选择实验材料
+ <tr style="text-align: center" v-if="!selectMaterialState.disabled">
+ <el-button type="primary" shape="round" @click="addMaterialItem()">
+ 添加现有实验材料
+ </el-button>
+ <el-button shape="round" @click="addNewMaterial('新增', {})">
+ 新增实验材料配置
</el-button>
</tr>
+ <material-dialog ref="materialDialogRef"></material-dialog>
</template>
<script setup lang="ts">
-import {onMounted, reactive, watchEffect} from "vue";
+import {defineAsyncComponent, onMounted, reactive, ref, watchEffect} from "vue";
import { materialApi } from "/@/api/basic/material";
import {ElMessage} from "element-plus";
let props = defineProps({
disabled: Boolean,
data: Array<AllMaterialListType>
});
-
+const MaterialDialog = defineAsyncComponent(() => import('/@/views/basic/material/components/materialDialog.vue'));
const selectMaterialState = reactive<SelectMaterialType>({
disabled: false,
materialList: [],
allMaterialList: [],
+ stuffTypeList: [
+ {id: 1, name: '化学试剂'},
+ {id:2, name: '基础材料'}
+ ],
+ stuffStorageList: [
+ {id:1, name: '智能试剂柜'},
+ {id:2, name: '普通储存柜'},
+ ],
+ stuffUnitList: [
+ {id:1, name: 'g'},
+ {id:2, name: 'kg'},
+ {id:3, name: 'ml'},
+ {id:4, name: 'l'},
+ ]
})
+const materialDialogRef = ref();
const addMaterialItem = () => {
selectMaterialState.materialList.push({stuffId: null, stuffUseCount: null, stuffName: '',stuffCode:'',stuffType: '', stuffStorage: '', stuffUnit: ''});
@@ -75,7 +97,15 @@
selectMaterialState.materialList.splice(index,1);
};
-const getAllPersonList = async () => {
+const addNewMaterial = (title: string, value: MaterialType) => {
+ materialDialogRef.value.showMaterialDialog(title, value);
+}
+
+const checkAllMaterial = () => {
+ getAllMaterial()
+}
+
+const getAllMaterial = async () => {
let res = await materialApi().getAllMaterial();
if(res.data.code === 100){
selectMaterialState.allMaterialList = JSON.parse(JSON.stringify(res.data.data));
@@ -111,7 +141,7 @@
onMounted(() => {
- getAllPersonList();
+ getAllMaterial();
});
</script>
@@ -154,6 +184,14 @@
border-right: none;
}
+ &.required {
+ &::before {
+ content: "*";
+ display: inline-block;
+ color: red;
+ }
+ }
+
&.w-14 {
width: calc((100/7)/100 * 100%);
}
@@ -192,6 +230,9 @@
width: 100%;
height: 100%;
}
+ :deep(.el-input__wrapper ){
+ box-shadow: none;
+ }
}
}
@@ -203,8 +244,5 @@
.m-color {
color: #0c4995;
-}
-:deep(.el-input__wrapper ){
- box-shadow: none;
}
</style>
--
Gitblit v1.9.2