src/views/officeProcessAutomation/ApproveManage/approve-list/components/FormPayloadFields.vue
@@ -17,12 +17,17 @@
      </el-descriptions-item>
    </el-descriptions>
    <el-form v-else label-width="120px" class="form-payload-edit">
    <div
      v-else
      class="form-payload-edit"
      v-loading="optionSourceLoading"
    >
      <el-form-item
        v-for="field in fields"
        :key="field.key"
        :label="field.label"
        :prop="`formPayload.${field.key}`"
        :required="Boolean(field.required)"
      >
        <el-input
          v-if="field.type === 'text'"
@@ -73,27 +78,59 @@
          :placeholder="`请选择${field.label}`"
          style="width: 100%"
          clearable
          filterable
        >
          <el-option v-for="o in field.options" :key="o.value" :label="o.label" :value="o.value" />
        <el-option
          v-for="o in getOptions(field, { moduleKey: props.moduleKey })"
          :key="String(o.value)"
          :label="o.label"
          :value="o.value"
        />
        </el-select>
        <span v-else class="field-value">{{ displayValue(field) }}</span>
      </el-form-item>
    </el-form>
    </div>
  </template>
  <el-empty v-else description="暂无填报项" :image-size="48" />
</template>
<script setup>
import { onMounted, watch } from "vue";
import { useSelectOptionSources } from "../../approve-template/useSelectOptionSources.js";
import { formatFieldDisplayValue } from "../approveListConstants.js";
const props = defineProps({
  fields: { type: Array, default: () => [] },
  formPayload: { type: Object, default: () => ({}) },
  readonly: { type: Boolean, default: false },
  moduleKey: { type: String, default: "" },
});
const { loading: optionSourceLoading, ensureForFields, getOptions, getDisplayLabel } =
  useSelectOptionSources();
async function loadOptionCaches() {
  await ensureForFields(props.fields, { moduleKey: props.moduleKey });
}
onMounted(() => {
  loadOptionCaches();
});
watch(
  () => props.fields,
  () => {
    loadOptionCaches();
  },
  { deep: true }
);
function displayValue(field) {
  return formatFieldDisplayValue(field, props.formPayload?.[field.key]);
  const val = props.formPayload?.[field.key];
  if (field.type === "select" && field.optionSource && field.optionSource !== "static") {
    return getDisplayLabel(field, val, { moduleKey: props.moduleKey });
  }
  return formatFieldDisplayValue(field, val);
}
</script>