<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">年龄</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">操作</td>
|
</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-option
|
v-for="item in selectPersonState.allPersonList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.personName"
|
>
|
</el-option>
|
</el-select>
|
</td>
|
<td class="w-14">
|
<el-input :disabled="selectPersonState.disabled" v-model="item.personAge" />
|
</td>
|
<td class="w-14">
|
<el-input :disabled="selectPersonState.disabled" v-model="item.personGender" />
|
</td>
|
<td class="w-14">
|
<el-input :disabled="selectPersonState.disabled" v-model="item.personMajor" />
|
</td>
|
<td class="w-14">
|
<el-input :disabled="selectPersonState.disabled" v-model="item.depName" />
|
</td>
|
<td class="w-14">
|
<el-input :disabled="selectPersonState.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()">
|
选择实验人员
|
</el-button>
|
</tr>
|
</template>
|
|
<script setup lang="ts">
|
import {nextTick, onMounted, reactive, watchEffect} from "vue";
|
import { personApi } from "/@/api/basic/person";
|
import {ElMessage} from "element-plus";
|
|
let props = defineProps({
|
disabled: Boolean,
|
data: Array<AllPersonListType>
|
|
});
|
|
const selectPersonState = reactive<SelectPersonType>({
|
disabled: false,
|
personList: [],
|
allPersonList: [
|
],
|
});
|
|
watchEffect(() => {
|
selectPersonState.personList = props.data as Array<AllPersonListType>
|
selectPersonState.disabled = props.disabled
|
});
|
|
const addPersonItem = () => {
|
selectPersonState.personList.push({personId: null, personName: null, personAge: null, personGender:'',personMajor:'',depName:'',phone:'',aptitude:'',training:''});
|
};
|
|
const deletePersonItem = (index: number) => {
|
selectPersonState.personList.splice(index,1);
|
};
|
|
const getAllPersonList = async () => {
|
let res = await personApi().getAllPerson();
|
if(res.data.code === 100){
|
selectPersonState.allPersonList = JSON.parse(JSON.stringify(res.data.data));
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
})
|
}
|
};
|
|
const giveOtherPersonValue = (value: number, index:number) => {
|
// selectPersonState.personList[index] = selectPersonState.allPersonList.find(item => item.id === value) as AllPersonListType
|
const data = selectPersonState.allPersonList.find(item => item.id === value) as AllPersonListType
|
selectPersonState.personList[index] = {
|
personId: data.id,
|
personName: data.personName,
|
personAge: data.personAge,
|
personGender: data.personGender,
|
personMajor: data.personMajor,
|
depName: data.depName,
|
phone: data.phone,
|
aptitude: data.aptitude,
|
training: data.training,
|
};
|
};
|
|
const formatList = (formatList: Array<AllPersonListType>) => {
|
nextTick(() => {
|
selectPersonState.personList = formatList
|
})
|
|
};
|
|
defineExpose({
|
formatList,
|
dataList: selectPersonState.personList,
|
});
|
|
onMounted(() => {
|
getAllPersonList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.site-layout-background {
|
background: #fff;
|
}
|
|
.report-table {
|
width: 100%;
|
border-collapse: collapse;
|
border: 1px solid #337ecc;
|
margin: 20px 0;
|
|
th {
|
padding: 10px 0;
|
border: 1px solid #337ecc;
|
border-left: none;
|
}
|
|
tr {
|
width: 100%;
|
height: 44px;
|
line-height: 42px;
|
border-bottom: 1px solid #ccc;
|
|
&:last-of-type {
|
border-bottom: none;
|
}
|
|
td {
|
border-right: 1px solid #ccc;
|
display: inline-block;
|
height: 44px;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 42px;
|
|
&:last-of-type {
|
border-right: none;
|
}
|
|
&.w-14 {
|
width: calc((100/7)/100 * 100%);
|
}
|
|
&.w-16 {
|
width: calc((100/6)/100 * 100%);
|
}
|
|
&.w-18 {
|
width: 16.59%;
|
}
|
|
&.w-20 {
|
width: 20%;
|
}
|
|
&.w-25 {
|
width: 25%;
|
}
|
|
&.w-50 {
|
width: 50%;
|
}
|
|
&.w-75 {
|
width: 75%;
|
}
|
|
.ant-input {
|
height: 100%;
|
border: none;
|
background: #f5f7fa;
|
}
|
|
.ant-picker {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.b-font {
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
}
|
|
.m-color {
|
color: #0c4995;
|
}
|
:deep(.el-input__wrapper ){
|
box-shadow: none;
|
}
|
</style>
|
