<template>
|
<tr class="m-color b-font" style="text-align: center">危废情况</tr>
|
<tr>
|
<td class="w-20 m-color">序号</td>
|
<td class="w-20 m-color">废弃物分类</td>
|
<td class="w-20 m-color">存储方式</td>
|
<td class="w-20 m-color">预估处理量</td>
|
<td class="w-20 m-color">操作</td>
|
</tr>
|
<tr v-for="(item,index) in selectDangerState.wasteList" :key="index">
|
<td class="w-20">
|
{{ index + 1 }}
|
</td>
|
<td class="w-20">
|
<el-select :disabled="selectDangerState.disabled" v-model="item.classify" clearable filterable>
|
<el-option v-for="item in selectDangerState.classifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</td>
|
<td class="w-20">
|
<el-select :disabled="selectDangerState.disabled" v-model="item.wasteStorage" clearable filterable>
|
<el-option v-for="item in selectDangerState.wasteStorageList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</td>
|
<td class="w-20">
|
<el-input type="number" v-model="item.handAmount"></el-input>
|
</td>
|
<td class="w-20">
|
<el-button :disabled="selectDangerState.disabled" type="danger" @click="deleteDangerItem(index)">删除</el-button>
|
</td>
|
</tr>
|
<tr style="text-align: center" v-if="!selectDangerState.disabled">
|
<el-button type="primary" shape="round" @click="addDangerItem()">
|
添加行
|
</el-button>
|
</tr>
|
</template>
|
|
<script setup lang="ts">
|
import {reactive, watchEffect} from "vue";
|
|
let props = defineProps({
|
disabled: Boolean,
|
data: Array<WasteType>
|
});
|
|
const selectDangerState = reactive<SelectDangerType>({
|
disabled: false,
|
wasteList: [
|
],
|
classifyList:[
|
{id:1, name: '有机'},
|
{id:2, name: '酸'},
|
{id:3, name: '碱性'},
|
{id:4, name: '固体废弃物'},
|
{id:5, name: '医疗废弃物'},
|
{id:6, name: '过期化学品'},
|
{id:7, name: '其他'}
|
],
|
wasteStorageList: [
|
{id:1, name: '吨袋'},
|
{id:2, name: '吨桶'},
|
{id:3, name: '小桶'},
|
{id:4, name: '托盘'},
|
{id:5, name: '其他'},
|
]
|
})
|
|
watchEffect(() => {
|
selectDangerState.wasteList = props.data as Array<WasteType>
|
selectDangerState.disabled = props.disabled
|
});
|
|
const addDangerItem = () => {
|
selectDangerState.wasteList.push({classify: null, wasteStorage: null, handAmount: null,});
|
};
|
|
const deleteDangerItem = (index: number) => {
|
selectDangerState.wasteList.splice(index,1);
|
};
|
|
const formatList = (formatList: Array<WasteType>) => {
|
selectDangerState.wasteList = formatList
|
}
|
|
defineExpose({
|
formatList,
|
dataList: selectDangerState.wasteList,
|
});
|
|
</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%;
|
}
|
}
|
}
|
|
.b-font {
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
}
|
|
.m-color {
|
color: #0c4995;
|
}
|
:deep(.el-input__wrapper ){
|
box-shadow: none;
|
}
|
</style>
|
