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

packages/base/data/modify-form.vue

@@ -1,111 +1,167 @@
 <template>
-    <div class="modify-form">
+  <div class="modify-form">
-        <el-form label-position="right" :class="class" :label-width="width ? width + 'px' : ''" :model="param"
+    <el-form
-            ref="modifyForm" :rules="rules">
+      label-position="right"
-            <template v-for="item in items">
+      :class="class"
-                <el-form-item :label="item.name || t(item.i18n)" :prop="item.code"
+      :label-width="width ? width + 'px' : ''"
-                    v-if="!modify || (modify && !item.noModify)">
+      :model="param"
-                    <NoobSelect v-if="item.dict || item.maxValue" v-model="param[item.code]" :dict="item.dict"
+      ref="modifyForm"
-                        :max-value="item.maxValue" full
+      :rules="rules"
-                        :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
+      <template v-for="item in items">
-                        :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)">
-                    <slot v-else-if="item.slot" :name="item.code" />
+          <template v-if="item.dict || item.maxValue">
-                    <NoobInput v-else v-model="param[item.code]" full :type="item.type" :rows="item.rows"
+            <NoobSelect
-                        :placeholder="t('rule.pleaseEnter') + (item.name || t(item.i18n))" :disabled="item.disabled" />
+              v-if="!item.readonly"
-                </el-form-item>
+              v-model="param[item.code]"
-            </template>
+              :dict="item.dict"
-            <slot></slot>
+              :max-value="item.maxValue"
-            <el-form-item class="form-btns">
+              full
-                <NoobButton type="primary" @click="formConfirm">{{ t(confirm) }}</NoobButton>
+              :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))"
-                <NoobButton type="info" @click="emit('cancel')">{{ t(cancel) }}</NoobButton>
+              :disabled="item.disabled"
-            </el-form-item>
+            />
-        </el-form>
+            <el-input v-else readonly :model-value="sysDict[item.dict as string][param[item.code]]" />
-    </div>
+          </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 { useI18n } from "vue3-i18n";
-import { NoobSelect, NoobInput, NoobDate, NoobButton } from "noob-mengyxu";
+import { NoobSelect, NoobInput, NoobDate, NoobButton, TzDateTime } from "noob-mengyxu";
+import { useSysDict } from "@/composables/useSysDict";
+
 const { t } = useI18n();
+const { sysDict, updateDict } = useSysDict();
 
-const prop = defineProps({
+interface FormItem {
-    width: {
+  code: string;
-        type: Number,
+  name?: string;
-        default: 80,
+  i18n?: string;
-    },
+  dict?: string;
-    param: {
+  maxValue?: number;
-        type: Object,
+  date?: boolean;
-        default: {},
+  formater?: string;
-    },
+  slot?: boolean;
-    rules: {
+  type?: string;
-        type: Object,
+  rows?: number;
-        default: {},
+  disabled?: boolean;
-    },
+  noModify?: boolean;
-    class: {
+  readonly?: boolean;
-        type: String,
+}
-        default: '',
+
-    },
+interface Props {
-    type: {
+  width?: number;
-        type: String,
+  param?: Record<string, any>;
-        default: null,
+  rules?: Record<string, any>;
-    },
+  class?: string;
-    modify: {
+  type?: string | null;
-        type: Boolean,
+  modify?: boolean;
-        default: false,
+  items?: FormItem[];
-    },
+  confirm?: string;
-    items: {
+  cancel?: string;
-        type: Array<any>(),
+}
-        default: [],
+
-    },
+const prop = withDefaults(defineProps<Props>(), {
-    confirm: {
+  width: 80,
-        type: String,
+  param: () => ({}),
-        default: 'base.confirm'
+  rules: () => ({}),
-    },
+  class: "",
-    cancel: {
+  type: null,
-        type: String,
+  modify: false,
-        default: 'base.cancel'
+  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;
+  if (!modifyForm.value) return;
-    modifyForm.value?.validate((valid, fields) => {
+  modifyForm.value?.validate((valid, fields) => {
-        if (valid) {
+    if (valid) {
-            emit("confirm");
+      emit("confirm");
-            modifyForm.value?.clearValidate();
+      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 {
+:deep(.el-select) {
-    width: 100%;
+  width: 100%;
 }
 
-::v-deep .el-date-editor {
+:deep(.el-date-editor) {
-    width: 100% !important;
+  width: 100% !important;
 }
 
-::v-deep .el-autocomplete {
+:deep(.el-autocomplete) {
-    width: 100%;
+  width: 100%;
 }
-</style>
+</style>