修改

马宇豪

2025-05-09 cbb23429b8beed72b58cbb57f9b3c56a0fb2b5d2

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

@@ -1,7 +1,7 @@
<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">年龄</td>
        <td class="w-14 m-color">性别</td>
        <td class="w-14 m-color">专业</td>
@@ -11,7 +11,7 @@
    </tr>
    <tr v-for="(item,index) in selectPersonState.personList" :key="index">
        <td class="w-14">
            <el-select filterable :disabled="selectPersonState.disabled" v-model="item.personId" @change="giveOtherPersonValue($event, index)">
            <el-select filterable :disabled="selectPersonState.disabled" v-model="item.personId" @change="giveOtherPersonValue($event, index)" @focus="checkAllPerson($event, index)">
                <el-option
                v-for="item in selectPersonState.allPersonList"
                :key="item.id"
@@ -22,33 +22,38 @@
            </el-select>
        </td>
        <td class="w-14">
            <el-input :disabled="selectPersonState.disabled" v-model="item.personAge" />
            <el-input disabled v-model="item.personAge" />
        </td>
        <td class="w-14">
            <el-input :disabled="selectPersonState.disabled" v-model="item.personGender" />
<!--            <el-input disabled v-model="item.personGender" />-->
          <div>{{item.personGender == 1 ? '男' : item.personGender == 2 ? '女' : ''}}</div>
        </td>
        <td class="w-14">
            <el-input :disabled="selectPersonState.disabled" v-model="item.personMajor" />
            <el-input disabled v-model="item.personMajor" />
        </td>
        <td class="w-14">
            <el-input :disabled="selectPersonState.disabled" v-model="item.depName" />
            <el-input disabled v-model="item.depName" />
        </td>
        <td class="w-14">
            <el-input :disabled="selectPersonState.disabled" v-model="item.aptitude" />
            <el-input disabled v-model="item.aptitude" />
        </td>
        <td class="w-14">
            <el-button type="danger" :disabled="selectPersonState.disabled" @click="deletePersonItem(index)">删除</el-button>
        </td>
    </tr>
    <tr style="text-align: center">
        <el-button :disabled="selectPersonState.disabled" type="primary" shape="round" @click="addPersonItem()">
            选择实验人员
    <tr style="text-align: center" v-if="!selectPersonState.disabled">
        <el-button type="primary" shape="round" @click="addPersonItem()">
            添加现有实验人员
        </el-button>
        <el-button shape="round" @click="addNewPerson('新增', {})">
            新增实验人员配置
        </el-button>
    </tr>
    <person-dialog ref="personDialogRef"></person-dialog>
</template>

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

@@ -58,12 +63,16 @@

});

const personDialog = defineAsyncComponent(() => import('/@/views/basic/person/components/personDialog.vue'));

const selectPersonState = reactive<SelectPersonType>({
    disabled: false,
    personList: [],
    allPersonList: [
    ],
});

const personDialogRef = ref();

watchEffect(() => {
    selectPersonState.personList = props.data as Array<AllPersonListType>
@@ -73,6 +82,14 @@
const addPersonItem = () => {
    selectPersonState.personList.push({personId: null, personName: null, personAge: null, personGender:'',personMajor:'',depName:'',phone:'',aptitude:'',training:''});
};

const addNewPerson = (title: string, value: PersonType) => {
  personDialogRef.value.showPersonDialog(title, value);
}

const checkAllPerson = () => {
  getAllPersonList()
}

const deletePersonItem = (index: number) => {
    selectPersonState.personList.splice(index,1);
@@ -162,6 +179,18 @@
                border-right: none;
            }

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

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

            &.w-14 {
                width: calc((100/7)/100 * 100%);
            }
@@ -211,8 +240,5 @@

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