Newer
Older
KaiFengPC / src / views / preassess / calculate / tables / infiltration.vue
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. <template>
  2. <el-form class="tableForm" ref="tableForm" :model="formModel" :rules="rules" :disabled="props.disabled">
  3. <el-table :data="formModel.list" element-loading-text="数据加载中..." :span-method="objectSpanMethod" :border="true">
  4. <el-table-column label="设施类型" show-overflow-tooltip>
  5. <template #default>
  6. <span>渗透设施</span>
  7. </template>
  8. </el-table-column>
  9. <el-table-column label="设施名称" prop="itemName" show-overflow-tooltip />
  10. <el-table-column label="设施面积㎡" prop="facilityArea">
  11. <template #default="{ row, $index }">
  12. <el-form-item :prop="'list.' + $index + '.' + 'facilityArea'" :rules="rules['facilityArea']">
  13. <el-input v-model="row.facilityArea" />
  14. </el-form-item>
  15. </template>
  16. </el-table-column>
  17. <el-table-column label="有效调蓄深度m" prop="effectiveStorageDepth">
  18. <template #default="{ row, $index }">
  19. <el-form-item :prop="'list.' + $index + '.' + 'effectiveStorageDepth'" :rules="rules['effectiveStorageDepth']">
  20. <el-input v-model="row.effectiveStorageDepth" />
  21. </el-form-item>
  22. </template>
  23. </el-table-column>
  24. <el-table-column label="设施服务面积㎡" prop="facilityServiceArea">
  25. <template #default="{ row, $index }">
  26. <el-form-item :prop="'list.' + $index + '.' + 'facilityServiceArea'" :rules="rules['facilityServiceArea']">
  27. <el-input v-model="row.facilityServiceArea" />
  28. </el-form-item>
  29. </template>
  30. </el-table-column>
  31. <el-table-column label="污染去除率(%,以SS计)" prop="pollutionRemovalRate">
  32. <template #header>
  33. <span>污染去除率(%,以SS计)</span>
  34. <popover :width="280">
  35. <span style="font-weight: 700">说明</span>
  36. <br />
  37. <span>可输入参考值范围内的值,默认取污染去除率参考值下限</span>
  38. </popover>
  39. </template>
  40. <template #default="{ row, $index }">
  41. <el-form-item :prop="'list.' + $index + '.' + 'pollutionRemovalRate'" :rules="rules['pollutionRemovalRate']">
  42. <el-input v-model="row.pollutionRemovalRate" />
  43. </el-form-item>
  44. </template>
  45. </el-table-column>
  46. <el-table-column label="污染去除率推荐值(%,以SS计)" show-overflow-tooltip>
  47. <template #default="{ row }">
  48. <span>{{ `${row.downValue}-${row.upValue}` }}</span>
  49. </template>
  50. </el-table-column>
  51. </el-table>
  52. </el-form>
  53. </template>
  54.  
  55. <script setup>
  56. import useTable from './mixins';
  57. import popover from '@/components/popover';
  58. const { proxy } = getCurrentInstance();
  59. const props = defineProps({
  60. list: {
  61. type: Array,
  62. default: () => {},
  63. },
  64. disabled: {
  65. type: Boolean,
  66. default: false,
  67. },
  68. });
  69.  
  70. const { formModel, rules, objectSpanMethod, validate } = useTable(proxy);
  71.  
  72. defineExpose({
  73. validate,
  74. });
  75. </script>
  76.  
  77. <style lang="scss" scoped></style>