From 18357486a9f327fba9d02dfe451c6ea3fc035a1b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 10 六月 2026 15:23:41 +0800
Subject: [PATCH] pro 1.凭证页面分页查询问题
---
src/views/officeProcessAutomation/ApproveManage/approve-list/components/FormPayloadFields.vue | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 152 insertions(+), 0 deletions(-)
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-list/components/FormPayloadFields.vue b/src/views/officeProcessAutomation/ApproveManage/approve-list/components/FormPayloadFields.vue
new file mode 100644
index 0000000..7933db5
--- /dev/null
+++ b/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>
--
Gitblit v1.9.3