pro 1.请假审批、加班审批的申请人展示不一致 2.无形资产编辑已摊销完毕状态后，还是展示在用状态

gaoluyang

96 分钟以前 0071c1757fced132b83d1110f7c59543fe891392

 src/views/officeProcessAutomation/ApproveManage/approve-list/components/FormPayloadFields.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,152 @@
<!-- å¡«æŠ¥é¡¹ï¼šç¼–辑为表单控件，详情为 descriptions è¡¨æ ¼ï¼ˆä¸Žä¸Šæ–¹åŸºç¡€ä¿¡æ¯ä¸€è‡´ï¼‰ -->
<template>
  <template v-if="fields?.length">
    <el-descriptions
      v-if="readonly"
      :column="2"
      border
      class="form-payload-desc"
    >
      <el-descriptions-item
        v-for="field in fields"
        :key="field.key"
        :label="field.label"
        :span="field.type === 'textarea' || field.type === 'datetimerange' ? 2 : 1"
      >
        <span class="field-value">{{ displayValue(field) }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <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'"
          v-model="formPayload[field.key]"
          :placeholder="`请输入${field.label}`"
          maxlength="200"
        />
        <el-input
          v-else-if="field.type === 'textarea'"
          v-model="formPayload[field.key]"
          type="textarea"
          :rows="field.rows || 3"
          :placeholder="`请填写${field.label}`"
          maxlength="2000"
          show-word-limit
        />
        <el-input-number
          v-else-if="field.type === 'number'"
          v-model="formPayload[field.key]"
          :min="field.min ?? 0"
          :precision="field.precision ?? 0"
          controls-position="right"
          style="width: 100%"
        />
        <el-date-picker
          v-else-if="field.type === 'date'"
          v-model="formPayload[field.key]"
          type="date"
          :placeholder="`请选择${field.label}`"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
        <el-date-picker
          v-else-if="field.type === 'datetimerange'"
          v-model="formPayload[field.key]"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
        <el-select
          v-else-if="field.type === 'select'"
          v-model="formPayload[field.key]"
          :placeholder="`请选择${field.label}`"
          style="width: 100%"
          clearable
          filterable
        >
          <el-option
            v-for="o in getOptions(field)"
            :key="String(o.value)"
            :label="o.label"
            :value="o.value"
          />
        </el-select>
        <span v-else class="field-value">{{ displayValue(field) }}</span>
      </el-form-item>
    </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 },
});

const { loading: optionSourceLoading, ensureForFields, getOptions, getDisplayLabel } =
  useSelectOptionSources();

async function loadOptionCaches() {
  await ensureForFields(props.fields);
}

onMounted(() => {
  loadOptionCaches();
});

watch(
  () => props.fields,
  () => {
    loadOptionCaches();
  },
  { deep: true }
);

function displayValue(field) {
  const val = props.formPayload?.[field.key];
  if (field.type === "select" && field.optionSource && field.optionSource !== "static") {
    return getDisplayLabel(field, val);
  }
  return formatFieldDisplayValue(field, val);
}
</script>

<style scoped>
.form-payload-desc {
  width: 100%;
}
.form-payload-desc :deep(.el-descriptions__label) {
  width: 120px;
  font-weight: 500;
}
.field-value {
  color: var(--el-text-color-primary);
  line-height: 1.6;
  word-break: break-word;
}
.form-payload-edit {
  width: 100%;
}
</style>