Newer
Older
Nanping_sponge_GCYPG / src / views / preassess / noopReview / components / facilityTable.vue
@liyingjing liyingjing on 25 Oct 2023 3 KB 工程预评估
  1. <template>
  2. <el-form
  3. class="tableForm"
  4. ref="tableForm"
  5. :model="formModel"
  6. :disabled="props.disabled"
  7. >
  8. <el-table
  9. :data="formModel.list"
  10. v-loading="loading"
  11. stripe
  12. element-loading-text="数据加载中..."
  13. :span-method="objectSpanMethod"
  14. :border="true"
  15.  
  16. >
  17. <el-table-column label="设施类型" align="center" show-overflow-tooltip>
  18. <template #default>
  19. <span>{{ props.name }}</span>
  20. </template>
  21. </el-table-column>
  22. <el-table-column label="设施名称" align="center" prop="itemName" show-overflow-tooltip />
  23. <el-table-column label="设施面积㎡" align="center" prop="facilityArea">
  24. <template #default="{ row, $index }">
  25. <el-form-item
  26. :prop="'list.' + $index + '.' + 'facilityArea'"
  27. :rules="rules['facilityArea']"
  28. >
  29. <el-input v-model="row.facilityArea" />
  30. </el-form-item>
  31. </template>
  32. </el-table-column>
  33. <el-table-column :label="props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m'" align="center" prop="effectiveStorageDepth">
  34. <template #default="{ row, $index }">
  35. <el-form-item
  36. :prop="'list.' + $index + '.' + 'effectiveStorageDepth'"
  37. :rules="rules['effectiveStorageDepth']"
  38. >
  39. <el-input v-model="row.effectiveStorageDepth" />
  40. </el-form-item>
  41. </template>
  42. </el-table-column>
  43. <el-table-column label="设施服务面积㎡" align="center" prop="facilityServiceArea">
  44. <template #default="{ row, $index }">
  45. <el-form-item
  46. :prop="'list.' + $index + '.' + 'facilityServiceArea'"
  47. :rules="rules['facilityServiceArea']"
  48. >
  49. <el-input v-model="row.facilityServiceArea" />
  50. </el-form-item>
  51. </template>
  52. </el-table-column>
  53. <el-table-column label="污染去除率(%,以SS计)" align="center" prop="pollutionRemovalRate">
  54. <template #default="{ row, $index }">
  55. <el-form-item
  56. :prop="'list.' + $index + '.' + 'pollutionRemovalRate'"
  57. :rules="rules['pollutionRemovalRate']"
  58. >
  59. <el-input v-model="row.pollutionRemovalRate" />
  60. </el-form-item>
  61. </template>
  62. </el-table-column>
  63. <el-table-column label="污染去除率推荐值(%,以SS计)" align="center" show-overflow-tooltip>
  64. <template #default="{ row }">
  65. <span>{{ `${row.downValue}-${row.upValue}` }}</span>
  66. </template>
  67. </el-table-column>
  68. </el-table>
  69. </el-form>
  70. </template>
  71.  
  72. <script setup>
  73. import { reactive } from 'vue'
  74. import { isNumber, isScope } from '@/utils/validate-helper'
  75. const { proxy } = getCurrentInstance()
  76. import useTable from './mixins'
  77. const { loading, formModel, validate, objectSpanMethod } = useTable(proxy)
  78. const props = defineProps({
  79. name: {
  80. type: String,
  81. default: ''
  82. },
  83. list: {
  84. type: Array,
  85. default: () => {}
  86. },
  87. disabled: {
  88. type: Boolean,
  89. default: false
  90. }
  91. })
  92.  
  93. const rules = reactive({
  94. facilityArea: isNumber('设施面积', { required: false, min: 0 }),
  95. effectiveStorageDepth: isNumber(props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m', { required: false, min: 0 }),
  96. facilityServiceArea: isNumber('设施服务面积', { required: false, min: 0 }),
  97. pollutionRemovalRate: isScope('污染去除率', { required: false, data: formModel })
  98. })
  99.  
  100. defineExpose({
  101. validate
  102. })
  103. </script>
  104.  
  105. <style lang="scss" scoped></style>