- <template>
- <el-form class="tableForm" ref="tableForm" :model="formModel" :rules="rules" :disabled="props.disabled">
- <el-table :data="formModel.list" element-loading-text="数据加载中..." :span-method="objectSpanMethod" :border="true">
- <el-table-column label="设施类型" show-overflow-tooltip>
- <template #default>
- <span>渗透设施</span>
- </template>
- </el-table-column>
- <el-table-column label="设施名称" prop="itemName" show-overflow-tooltip />
- <el-table-column label="设施面积㎡" prop="facilityArea">
- <template #default="{ row, $index }">
- <el-form-item :prop="'list.' + $index + '.' + 'facilityArea'" :rules="rules['facilityArea']">
- <el-input v-model="row.facilityArea" />
- </el-form-item>
- </template>
- </el-table-column>
- <el-table-column label="有效调蓄深度m" prop="effectiveStorageDepth">
- <template #default="{ row, $index }">
- <el-form-item :prop="'list.' + $index + '.' + 'effectiveStorageDepth'" :rules="rules['effectiveStorageDepth']">
- <el-input v-model="row.effectiveStorageDepth" />
- </el-form-item>
- </template>
- </el-table-column>
- <el-table-column label="设施服务面积㎡" prop="facilityServiceArea">
- <template #default="{ row, $index }">
- <el-form-item :prop="'list.' + $index + '.' + 'facilityServiceArea'" :rules="rules['facilityServiceArea']">
- <el-input v-model="row.facilityServiceArea" />
- </el-form-item>
- </template>
- </el-table-column>
- <el-table-column label="污染去除率(%,以SS计)" prop="pollutionRemovalRate">
- <template #header>
- <span>污染去除率(%,以SS计)</span>
- <popover :width="280">
- <span style="font-weight: 700">说明</span>
- <br />
- <span>可输入参考值范围内的值,默认取污染去除率参考值下限</span>
- </popover>
- </template>
- <template #default="{ row, $index }">
- <el-form-item :prop="'list.' + $index + '.' + 'pollutionRemovalRate'" :rules="rules['pollutionRemovalRate']">
- <el-input v-model="row.pollutionRemovalRate" />
- </el-form-item>
- </template>
- </el-table-column>
- <el-table-column label="污染去除率推荐值(%,以SS计)" show-overflow-tooltip>
- <template #default="{ row }">
- <span>{{ `${row.downValue}-${row.upValue}` }}</span>
- </template>
- </el-table-column>
- </el-table>
- </el-form>
- </template>
-
- <script setup>
- import useTable from './mixins';
- import popover from '@/components/popover';
- const { proxy } = getCurrentInstance();
- const props = defineProps({
- list: {
- type: Array,
- default: () => {},
- },
- disabled: {
- type: Boolean,
- default: false,
- },
- });
-
- const { formModel, rules, objectSpanMethod, validate } = useTable(proxy);
-
- defineExpose({
- validate,
- });
- </script>
-
- <style lang="scss" scoped></style>