pms-iot-vue/src/views/pms/constructionDailyReport/components/ConstructionDailyReportFormSection.vue

<script setup lang="ts">
import { getStrDictOptions } from '@/utils/dict'
import type {
  ConstructionDailyReportField,
  ConstructionDailyReportRow,
  ConstructionDailyReportSection
} from './report-config'

const props = defineProps<{
  model: ConstructionDailyReportRow
  section: ConstructionDailyReportSection
  disabled: boolean
}>()

const emits = defineEmits<{
  (e: 'update:model', value: ConstructionDailyReportRow): void
}>()

function isNumberField(value: unknown) {
  return value === null || value === undefined || typeof value === 'number'
}

function updateField(prop: keyof ConstructionDailyReportRow, value: unknown) {
  emits('update:model', {
    ...props.model,
    [prop]: value
  })
}

function getNumberValue(prop: keyof ConstructionDailyReportRow) {
  const value = props.model[prop]
  return typeof value === 'number' ? value : undefined
}

function isFieldDisabled(field: ConstructionDailyReportField) {
  return props.disabled || !field.editableInEdit
}

function getDictOptions(field: ConstructionDailyReportField) {
  return field.dictType ? getStrDictOptions(field.dictType) : []
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
      <div class="h-5 w-1 rounded-full bg-[var(--el-color-primary)]"></div>
      <div class="text-lg font-medium text-[var(--el-text-color-primary)]">
        {{ props.section.title }}
      </div>
    </div>
    <div class="grid grid-cols-2 gap-4">
      <el-form-item
        v-for="field in props.section.fields"
        :key="`${props.section.title}-${String(field.prop)}-${field.label}`"
        :label="field.label"
        :prop="field.prop"
        :class="{ 'col-span-2': field.span === 2 }"
      >
        <el-input
          v-if="field.type === 'textarea'"
          size="default"
          :model-value="props.model[field.prop]"
          type="textarea"
          :autosize="{ minRows: 3 }"
          resize="none"
          :disabled="isFieldDisabled(field)"
          @update:model-value="updateField(field.prop, $event)"
        />
        <el-select
          v-else-if="field.type === 'select'"
          size="default"
          :model-value="props.model[field.prop]"
          :options="getDictOptions(field)"
          class="w-full"
          clearable
          placeholder="请选择"
          :disabled="isFieldDisabled(field)"
          @update:model-value="updateField(field.prop, $event)"
        />
        <el-input-number
          v-else-if="field.type === 'number' || isNumberField(props.model[field.prop])"
          :model-value="getNumberValue(field.prop)"
          class="!w-full"
          :controls="false"
          :min="0"
          size="default"
          :precision="field.precision"
          :disabled="isFieldDisabled(field)"
          @update:model-value="updateField(field.prop, $event)"
        />
        <el-input
          v-else
          size="default"
          :model-value="props.model[field.prop]"
          :disabled="isFieldDisabled(field)"
          @update:model-value="updateField(field.prop, $event)"
        />
      </el-form-item>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>