feat: updated modify-form for better display of readonly form fields

packages/base/data/modify-form.vue

@@ -1,18 +1,60 @@
 <template>
   <div class="modify-form">
-        <el-form label-position="right" :class="class" :label-width="width ? width + 'px' : ''" :model="param"
-            ref="modifyForm" :rules="rules">
+    <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" />
+        <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="t('rule.pleaseEnter') + (item.name || t(item.i18n))" :disabled="item.disabled" />
+          <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>
@@ -27,49 +69,58 @@
 <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 = () => {
@@ -84,28 +135,33 @@ const formConfirm = () => {
 
 const 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 {
+:deep(.el-select) {
   width: 100%;
 }
 
-::v-deep .el-date-editor {
+:deep(.el-date-editor) {
   width: 100% !important;
 }
 
-::v-deep .el-autocomplete {
+:deep(.el-autocomplete) {
   width: 100%;
 }
 </style>