修改

马宇豪

2025-05-09 cbb23429b8beed72b58cbb57f9b3c56a0fb2b5d2

 src/views/experiment/project/components/selectEquipment.vue

@@ -1,16 +1,16 @@
<template>
    <tr class="m-color b-font" style="text-align: center">实验所用的仪器/设备</tr>
    <tr>
        <td class="w-16 m-color">设备名称</td>
        <td class="w-16 m-color required">设备名称</td>
        <td class="w-16 m-color">编号</td>
        <td class="w-16 m-color">设备功率</td>
        <td class="w-16 m-color">额定功率</td>
        <td class="w-16 m-color">是否特种</td>
        <td class="w-16 m-color">设备数量</td>
        <td class="w-16 m-color required">设备数量</td>
        <td class="w-16 m-color">操作</td>
    </tr>
    <tr v-for="(item,index) in selectEquipmentState.equipmentList" :key="index">
        <td class="w-16">
            <el-select :disabled="selectEquipmentState.disabled" filterable v-model="item.deviceId" @change="giveOtherEquipmentValue($event, index)">
            <el-select :disabled="selectEquipmentState.disabled" filterable v-model="item.deviceId" @change="giveOtherEquipmentValue($event, index)" @focus="checkAllEquipment($event, index)">
                <el-option
                    v-for="item in selectEquipmentState.allEquipmentList"
                    :key="item.id"
@@ -21,33 +21,38 @@
            </el-select>
        </td>
        <td class="w-16">
            <el-input :disabled="selectEquipmentState.disabled" v-model="item.deviceCode" placeholder="请输入数量" />
            <el-input disabled v-model="item.deviceCode"/>
        </td>
        <td class="w-16">
            <el-input :disabled="selectEquipmentState.disabled" v-model="item.devicePower" />
            <el-input disabled v-model="item.devicePower" />
        </td>
        <td class="w-16">
            <el-radio-group :disabled="selectEquipmentState.disabled" v-model="item.specialDevice">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
<!--            <el-radio-group disabled v-model="item.specialDevice">-->
<!--                <el-radio :label="1">是</el-radio>-->
<!--                <el-radio :label="2">否</el-radio>-->
<!--            </el-radio-group>-->
          <div>{{item.specialDevice == 1 ? '是' : item.specialDevice == 2 ? '否' : ''}}</div>
        </td>
        <td class="w-16">
            <el-input type="number" v-model="item.deviceUseCount" />
            <el-input :disabled="selectEquipmentState.disabled" type="number" v-model="item.deviceUseCount" />
        </td>
        <td class="w-16">
            <el-button :disabled="selectEquipmentState.disabled" type="danger" @click="deleteEquipmentItem(index)">删除</el-button>
        </td>
    </tr>
    <tr style="text-align: center">
        <el-button :disabled="selectEquipmentState.disabled" type="primary" shape="round" @click="addEquipmentItem()">
            选择实验仪器
    <tr style="text-align: center" v-if="!selectEquipmentState.disabled">
        <el-button type="primary" shape="round" @click="addEquipmentItem()">
            添加现有实验仪器/设备
        </el-button>
        <el-button shape="round" @click="addNewEquipment('新增', {})">
            新增实验仪器/设备配置
        </el-button>
    </tr>
    <equipment-dialog ref="equipmentDialogRef" :equipmentTypeList="selectEquipmentState.equipmentTypeList"></equipment-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, watchEffect} from "vue";
import {defineAsyncComponent, onMounted, reactive, ref, watchEffect} from "vue";
import {ElMessage} from "element-plus";
import { equipmentApi } from "/@/api/basic/equipement";

@@ -55,11 +60,16 @@
    disabled: Boolean,
    data: Array<AllEquipmentListType>
});

const equipmentDialog = defineAsyncComponent(() => import('/@/views/basic/equipment/components/equipmentDialog.vue'));
const selectEquipmentState = reactive<SelectEquipmentType>({
    disabled: false,
    equipmentList: [],
    allEquipmentList: [],
    equipmentTypeList: [],
    specialDeviceList: [
      {id: 1, name: '是'},
      {id:2, name: '否'}
    ]
});

watchEffect(() => {
@@ -67,9 +77,26 @@
    selectEquipmentState.disabled = props.disabled
});

const equipmentDialogRef = ref();

const getAllType = async ()=>{
  const res = await equipmentApi().getAllType();
  if(res.data.code === 100){
    selectEquipmentState.equipmentTypeList = res.data.data
  }
}

const checkAllEquipment = () => {
  getAllEquipmentList()
}

const addEquipmentItem = () => {
    selectEquipmentState.equipmentList.push({deviceId: null, deviceUseCount: null, deviceCode: '', deviceName: '', devicePower: '', specialDevice: '',});
    selectEquipmentState.equipmentList.push({deviceId: null, deviceUseCount: null, deviceCode: '', deviceName: '', devicePower: '', specialDevice: '',deviceUnit: null, safeProtect: null});
};

const addNewEquipment = (title: string, value: EquipmentType) => {
  equipmentDialogRef.value.showEquipmentDialog(title, value, selectEquipmentState.specialDeviceList);
}

const deleteEquipmentItem = (index: number) => {
    selectEquipmentState.equipmentList.splice(index,1);
@@ -95,7 +122,9 @@
        deviceCode: data.deviceCode,
        deviceName: data.deviceName,
        devicePower: data.devicePower,
        specialDevice: data.specialDevice
        specialDevice: data.specialDevice,
        deviceUnit: data.deviceUnit,
        safeProtect: data.safeProtect,
    }
};

@@ -109,6 +138,7 @@
});

onMounted(() => {
    getAllType();
    getAllEquipmentList();
});
</script>
@@ -148,8 +178,20 @@
            text-align: center;
            line-height: 42px;

            :deep(.el-input__wrapper ){
              box-shadow: none;
            }

            &:last-of-type {
                border-right: none;
            }

            &.required {
              &::before {
                content: "*";
                display: inline-block;
                color: red;
              }
            }

            &.w-14 {
@@ -201,8 +243,5 @@

.m-color {
    color: #0c4995;
}
:deep(.el-input__wrapper ){
    box-shadow: none;
}
</style>