<template>
|
<tr class="m-color b-font" style="text-align: center">实验场所</tr>
|
<tr>
|
<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>
|
<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 selectRoomState.roomList" :key="index">
|
<td class="w-14">
|
<el-select :disabled="selectRoomState.disabled" filterable v-model="item.siteId" @change="giveOtherRoomValue($event, index)" @focus="checkAllRoom($event, index)">
|
<el-option
|
v-for="item in selectRoomState.allRoomList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.siteName"
|
>
|
</el-option>
|
</el-select>
|
</td>
|
<td class="w-14">
|
<el-input disabled v-model="item.floor" />
|
</td>
|
<td class="w-14">
|
<el-input disabled v-model="item.room" />
|
</td>
|
<td class="w-14">
|
<!-- <el-input :disabled="selectRoomState.disabled" v-model="item.stuffStorage" />-->
|
<div>{{item.fireFacilities== 1 ? '有' : item.fireFacilities== 2 ? '无' : ''}}</div>
|
</td>
|
<td class="w-14">
|
<!-- <el-input :disabled="selectRoomState.disabled" v-model="item.stuffUnit" />-->
|
<div>{{item.partitionStatus == 1 ? '有' : item.partitionStatus == 2 ? '无' : ''}}</div>
|
</td>
|
<td class="w-14">
|
<!-- <el-input type="number" :disabled="selectRoomState.disabled" v-model="item.stuffUseCount" />-->
|
<div>{{item.siteType}}</div>
|
</td>
|
<td class="w-14">
|
<el-button type="danger" :disabled="selectRoomState.disabled" @click="deleteRoomItem(index)">删除</el-button>
|
</td>
|
</tr>
|
<tr style="text-align: center" v-if="!selectRoomState.disabled">
|
<el-button type="primary" shape="round" @click="addMaterialItem()">
|
添加现有实验场所
|
</el-button>
|
<el-button shape="round" @click="addNewRoom('新增', {})">
|
新增实验场所配置
|
</el-button>
|
</tr>
|
<room-dialog ref="roomDialogRef" :memberList="selectRoomState.memberList" :typeList="selectRoomState.typeList"></room-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import {defineAsyncComponent, onMounted, reactive, ref, watchEffect} from "vue";
|
import { materialApi } from "/@/api/basic/material";
|
import {ElMessage} from "element-plus";
|
import {roomApi} from "/@/api/basic/room";
|
import {personApi} from "/@/api/basic/person";
|
let props = defineProps({
|
disabled: Boolean,
|
data: Array<roomListType>
|
});
|
const roomDialog = defineAsyncComponent(() => import('/@/views/basic/room/components/roomDialog.vue'));
|
const selectRoomState = reactive<SelectRoomType>({
|
disabled: false,
|
roomList: [],
|
allRoomList: [],
|
memberList: [],
|
typeList: [],
|
specialDeviceList: [
|
{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 roomDialogRef = ref();
|
|
const getAllMember = async ()=>{
|
const res = await personApi().getAllPerson();
|
if(res.data.code === 100){
|
selectRoomState.memberList = res.data.data
|
}
|
}
|
|
const getAllType = async ()=>{
|
const res = await roomApi().getAllType();
|
if(res.data.code === 100){
|
selectRoomState.typeList = res.data.data
|
}
|
}
|
|
const addMaterialItem = () => {
|
selectRoomState.roomList.push({siteId: null, siteName: '', floor: '',room:'',fireFacilities: null, partitionStatus: null, siteType: ''});
|
};
|
|
watchEffect(() => {
|
selectRoomState.roomList = props.data as Array<roomListType>
|
selectRoomState.disabled = props.disabled
|
});
|
|
const deleteRoomItem = (index: number) => {
|
selectRoomState.roomList.splice(index,1);
|
};
|
|
const addNewRoom = (title: string, value: RoomType) => {
|
roomDialogRef.value.showroomDialog(title, value, selectRoomState.specialDeviceList);
|
}
|
|
const checkAllRoom = () => {
|
getAllRoom()
|
}
|
|
const getAllRoom = async () => {
|
let res = await roomApi().getAllRoom();
|
if(res.data.code === 100){
|
selectRoomState.allRoomList = JSON.parse(JSON.stringify(res.data.data));
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
})
|
}
|
};
|
|
const giveOtherRoomValue = (value: number, index:number) => {
|
const data = selectRoomState.allRoomList.find(item => item.id === value) as allRoomListType
|
selectRoomState.roomList[index] = {
|
siteId: data.id,
|
siteName: data.siteName,
|
floor: data.floor,
|
room: data.room,
|
fireFacilities: data.fireFacilities,
|
partitionStatus: data.partitionStatus,
|
siteType: data.siteType
|
};
|
};
|
|
const formatList = (formatList: Array<roomListType>) => {
|
selectRoomState.roomList = formatList
|
};
|
|
defineExpose({
|
dataList: selectRoomState.roomList,
|
formatList
|
});
|
|
|
onMounted(() => {
|
getAllMember()
|
getAllType()
|
getAllRoom()
|
});
|
</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;
|
}
|
|
&.required {
|
&::before {
|
content: "*";
|
display: inline-block;
|
color: red;
|
}
|
}
|
|
&.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%;
|
}
|
:deep(.el-input__wrapper ){
|
box-shadow: none;
|
}
|
}
|
}
|
|
.b-font {
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
}
|
|
.m-color {
|
color: #0c4995;
|
}
|
</style>
|
