<!-- 填报项：编辑为表单控件，详情为 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>
|
|
<el-form v-else label-width="120px" class="form-payload-edit">
|
<el-form-item
|
v-for="field in fields"
|
:key="field.key"
|
:label="field.label"
|
:prop="`formPayload.${field.key}`"
|
>
|
<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
|
>
|
<el-option v-for="o in field.options" :key="o.value" :label="o.label" :value="o.value" />
|
</el-select>
|
<span v-else class="field-value">{{ displayValue(field) }}</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
<el-empty v-else description="暂无填报项" :image-size="48" />
|
</template>
|
|
<script setup>
|
import { formatFieldDisplayValue } from "../approveListConstants.js";
|
|
const props = defineProps({
|
fields: { type: Array, default: () => [] },
|
formPayload: { type: Object, default: () => ({}) },
|
readonly: { type: Boolean, default: false },
|
});
|
|
function displayValue(field) {
|
return formatFieldDisplayValue(field, props.formPayload?.[field.key]);
|
}
|
</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>
|
