修改

马宇豪

2025-05-09 cbb23429b8beed72b58cbb57f9b3c56a0fb2b5d2

 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>