From e9bdf0a2330495a62f10ce54ec1738c20cd91831 Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Fri, 26 Dec 2025 17:56:18 +0800
Subject: [PATCH] feat: updated modify-form for better display of readonly form
 fields

---
 packages/base/data/modify-form.vue | 222 ++++++++++++++++++-----------
 1 file changed, 139 insertions(+), 83 deletions(-)

diff --git a/packages/base/data/modify-form.vue b/packages/base/data/modify-form.vue
index 022a029..1eb3ff4 100644
--- a/packages/base/data/modify-form.vue
+++ b/packages/base/data/modify-form.vue
@@ -1,111 +1,167 @@
 <template>
-    <div class="modify-form">
-        <el-form label-position="right" :class="class" :label-width="width ? width + 'px' : ''" :model="param"
-            ref="modifyForm" :rules="rules">
-            <template v-for="item in items">
-                <el-form-item :label="item.name || t(item.i18n)" :prop="item.code"
-                    v-if="!modify || (modify && !item.noModify)">
-                    <NoobSelect v-if="item.dict || item.maxValue" v-model="param[item.code]" :dict="item.dict"
-                        :max-value="item.maxValue" full
-                        :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))" :disabled="item.disabled" />
-                    <NoobDate v-else-if="item.date" v-model="param[item.code]" :formater="item.formater" full
-                        :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))" :disabled="item.disabled" />
-                    <slot v-else-if="item.slot" :name="item.code" />
-                    <NoobInput v-else v-model="param[item.code]" full :type="item.type" :rows="item.rows"
-                        :placeholder="t('rule.pleaseEnter') + (item.name || t(item.i18n))" :disabled="item.disabled" />
-                </el-form-item>
-            </template>
-            <slot></slot>
-            <el-form-item class="form-btns">
-                <NoobButton type="primary" @click="formConfirm">{{ t(confirm) }}</NoobButton>
-                <NoobButton type="info" @click="emit('cancel')">{{ t(cancel) }}</NoobButton>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="modify-form">
+    <el-form
+      label-position="right"
+      :class="class"
+      :label-width="width ? width + 'px' : ''"
+      :model="param"
+      ref="modifyForm"
+      :rules="rules"
+    >
+      <template v-for="item in items">
+        <el-form-item :label="item.name || t(item.i18n)" :prop="item.code" v-if="!modify || (modify && !item.noModify)">
+          <template v-if="item.dict || item.maxValue">
+            <NoobSelect
+              v-if="!item.readonly"
+              v-model="param[item.code]"
+              :dict="item.dict"
+              :max-value="item.maxValue"
+              full
+              :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))"
+              :disabled="item.disabled"
+            />
+            <el-input v-else readonly :model-value="sysDict[item.dict as string][param[item.code]]" />
+          </template>
+          <template v-else-if="item.date">
+            <NoobDate
+              v-if="!item.readonly"
+              v-model="param[item.code]"
+              :formater="item.formater"
+              full
+              :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))"
+              :disabled="item.disabled || item.readonly"
+            />
+            <TzDateTime
+              v-else
+              :value="param[item.code]"
+              :value-format="item.formater"
+              display-format="YYYY-MM-DD HH:mm:ss"
+              slot
+            >
+              <template #default="{ display }">
+                <el-input :model-value="display" readonly />
+              </template>
+            </TzDateTime>
+            <!--            <span>{{ param[item.code].toString() }}</span>-->
+          </template>
+          <slot v-else-if="item.slot" :name="item.code" />
+          <NoobInput
+            v-else
+            v-model="param[item.code]"
+            full
+            :type="item.type"
+            :rows="item.rows"
+            :placeholder="item.readonly || item.disabled ? '空' : t('rule.pleaseEnter') + (item.name || t(item.i18n))"
+            :disabled="item.disabled"
+            :readonly="item.readonly"
+          />
+        </el-form-item>
+      </template>
+      <slot></slot>
+      <el-form-item class="form-btns">
+        <NoobButton type="primary" @click="formConfirm">{{ t(confirm) }}</NoobButton>
+        <NoobButton type="info" @click="emit('cancel')">{{ t(cancel) }}</NoobButton>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue";
 import { FormInstance } from "element-plus";
-import { useI18n } from 'vue3-i18n';
-import { NoobSelect, NoobInput, NoobDate, NoobButton } from "noob-mengyxu";
+import { useI18n } from "vue3-i18n";
+import { NoobSelect, NoobInput, NoobDate, NoobButton, TzDateTime } from "noob-mengyxu";
+import { useSysDict } from "@/composables/useSysDict";
+
 const { t } = useI18n();
+const { sysDict, updateDict } = useSysDict();
 
-const prop = defineProps({
-    width: {
-        type: Number,
-        default: 80,
-    },
-    param: {
-        type: Object,
-        default: {},
-    },
-    rules: {
-        type: Object,
-        default: {},
-    },
-    class: {
-        type: String,
-        default: '',
-    },
-    type: {
-        type: String,
-        default: null,
-    },
-    modify: {
-        type: Boolean,
-        default: false,
-    },
-    items: {
-        type: Array<any>(),
-        default: [],
-    },
-    confirm: {
-        type: String,
-        default: 'base.confirm'
-    },
-    cancel: {
-        type: String,
-        default: 'base.cancel'
-    }
+interface FormItem {
+  code: string;
+  name?: string;
+  i18n?: string;
+  dict?: string;
+  maxValue?: number;
+  date?: boolean;
+  formater?: string;
+  slot?: boolean;
+  type?: string;
+  rows?: number;
+  disabled?: boolean;
+  noModify?: boolean;
+  readonly?: boolean;
+}
+
+interface Props {
+  width?: number;
+  param?: Record<string, any>;
+  rules?: Record<string, any>;
+  class?: string;
+  type?: string | null;
+  modify?: boolean;
+  items?: FormItem[];
+  confirm?: string;
+  cancel?: string;
+}
+
+const prop = withDefaults(defineProps<Props>(), {
+  width: 80,
+  param: () => ({}),
+  rules: () => ({}),
+  class: "",
+  type: null,
+  modify: false,
+  items: () => [],
+  confirm: "base.confirm",
+  cancel: "base.cancel",
 });
-const emit = defineEmits(["confirm", "cancel"]);
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
 const modifyForm = ref<FormInstance>();
 
 const formConfirm = () => {
-    if (!modifyForm.value) return;
-    modifyForm.value?.validate((valid, fields) => {
-        if (valid) {
-            emit("confirm");
-            modifyForm.value?.clearValidate();
-        }
-    });
+  if (!modifyForm.value) return;
+  modifyForm.value?.validate((valid, fields) => {
+    if (valid) {
+      emit("confirm");
+      modifyForm.value?.clearValidate();
+    }
+  });
 };
 
 const clearValidate = () => {
-    modifyForm.value?.clearValidate();
-}
+  modifyForm.value?.clearValidate();
+};
 
-watch(() => prop.param, () => {
+watch(
+  () => prop.param,
+  () => {
     modifyForm.value?.clearValidate();
-});
+  },
+);
 
-defineExpose({ clearValidate })
+defineExpose({ clearValidate });
 
-onMounted(() => {
+onMounted(async () => {
+  await updateDict(prop.items.map((item) => item.dict).filter(Boolean) as string[]);
 });
 </script>
+
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
-::v-deep .el-select {
-    width: 100%;
+:deep(.el-select) {
+  width: 100%;
 }
 
-::v-deep .el-date-editor {
-    width: 100% !important;
+:deep(.el-date-editor) {
+  width: 100% !important;
 }
 
-::v-deep .el-autocomplete {
-    width: 100%;
+:deep(.el-autocomplete) {
+  width: 100%;
 }
-</style>
\ No newline at end of file
+</style>