- <template>
- <el-form
- class="tableForm"
- ref="tableForm"
- :model="formModel"
- :disabled="props.disabled"
- >
- <el-table
- :data="formModel.list"
- v-loading="loading"
- stripe
- element-loading-text="数据加载中..."
- :span-method="objectSpanMethod"
- :border="true"
-
- >
- <el-table-column label="设施类型" align="center" show-overflow-tooltip>
- <template #default>
- <span>{{ props.name }}</span>
- </template>
- </el-table-column>
- <el-table-column label="设施名称" align="center" prop="itemName" show-overflow-tooltip />
- <el-table-column label="设施面积㎡" align="center" 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="props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m'" align="center" 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="设施服务面积㎡" align="center" 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计)" align="center" prop="pollutionRemovalRate">
- <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计)" align="center" show-overflow-tooltip>
- <template #default="{ row }">
- <span>{{ `${row.downValue}-${row.upValue}` }}</span>
- </template>
- </el-table-column>
- </el-table>
- </el-form>
- </template>
-
- <script setup>
- import { reactive } from 'vue'
- import { isNumber, isScope } from '@/utils/validate-helper'
- const { proxy } = getCurrentInstance()
- import useTable from './mixins'
- const { loading, formModel, validate, objectSpanMethod } = useTable(proxy)
- const props = defineProps({
- name: {
- type: String,
- default: ''
- },
- list: {
- type: Array,
- default: () => {}
- },
- disabled: {
- type: Boolean,
- default: false
- }
- })
-
- const rules = reactive({
- facilityArea: isNumber('设施面积', { required: false, min: 0 }),
- effectiveStorageDepth: isNumber(props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m', { required: false, min: 0 }),
- facilityServiceArea: isNumber('设施服务面积', { required: false, min: 0 }),
- pollutionRemovalRate: isScope('污染去除率', { required: false, data: formModel })
- })
-
- defineExpose({
- validate
- })
- </script>
-
- <style lang="scss" scoped></style>