fix:菜单更改

src/components/DateMultiple.vue

+<script lang="ts" setup>
+import { onMounted, ref, reactive, computed } from 'vue';
+// import { date } from 'quasar';
+import { isEmpty } from 'src/common/utils';
+
+interface Props {
+  modelValue: string[] | null;
+  dense?: boolean;
+  config?: any;
+}
+const props = withDefaults(defineProps<Props>(), {
+  // modelValue: date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm'),
+  modelValue: null,
+  dense: false,
+  config: () => {
+    return {};
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const myDateMultiple = ref<any>(null);
+
+const dates = computed({
+  set(value: any) {
+    let arr = [];
+    if (value) {
+      arr = value.split(',');
+    }
+    emit('update:modelValue', arr);
+  },
+  get() {
+    return props.modelValue;
+  },
+});
+
+const dateMask = computed(() => {
+  let obj = {
+    date: 'YYYY/MM/DD',
+  };
+  if (!isEmpty(props.config) && props.config.dateMask) {
+    const maskList = props.config.dateMask.split(' ');
+    obj.date = maskList[0];
+  }
+  return obj;
+});
+
+const dateProxyDate = ref<any>([]);
+const dateLocale = reactive({
+  daysShort: '六_日_一_二_三_四_五'.split('_'),
+  months:
+    '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
+      '_'
+    ),
+  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  firstDayOfWeek: 1,
+  format24h: true,
+  pluralDay: 'dias',
+});
+
+onMounted(() => {
+  console.log('999', props.config);
+  console.log('元素', myDateMultiple.value.$el.firstElementChild);
+});
+
+function updateProxy() {
+  const _dates = dates.value;
+  if (!isEmpty(_dates)) {
+    dateProxyDate.value = _dates;
+  } else {
+    dateProxyDate.value = [];
+  }
+}
+
+function onClickDate() {
+  dates.value = dateProxyDate.value.join(',');
+}
+</script>
+<template>
+  <div class="hcy-datetime-pick">
+    <q-input v-model="dates" v-bind="config" ref="myDateMultiple">
+      <template v-slot:append>
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy
+            @before-show="updateProxy"
+            transition-show="scale"
+            transition-hide="scale"
+            class="row"
+          >
+            <q-date
+              flat
+              square
+              minimal
+              multiple
+              v-model="dateProxyDate"
+              :locale="dateLocale"
+              :mask="dateMask.date"
+              class="my-date"
+            >
+              <div class="row items-center justify-end q-gutter-sm">
+                <q-btn
+                  unelevated
+                  label="确定"
+                  size="sm"
+                  color="primary"
+                  @click="onClickDate"
+                  v-close-popup
+                />
+              </div>
+            </q-date>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-date {
+  :deep(.q-date__main .q-date__content .q-date__view .q-date__navigation) {
+    > .relative-position {
+      color: $primary;
+    }
+  }
+}
+.my-time {
+  :deep(.q-time__header) {
+    background-color: white;
+  }
+  :deep(.q-time__main
+      .q-time__content
+      .q-time__container-child
+      .q-time__clock
+      .q-time__clock-circle
+      .q-time__clock-position--active) {
+    color: white !important;
+  }
+}
+</style>

src/components/DateTimePick.vue

 <script lang="ts" setup>
 import { onMounted, ref, reactive, computed } from 'vue';
 import { date } from 'quasar';
+import { isEmpty } from 'src/common/utils';
 
 interface Props {
-  modelValue: string;
+  modelValue: string | null;
   format24h?: boolean;
-  withSeconds?: boolean;
+  dense?: boolean;
+  config?: any;
 }
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm'),
+  // modelValue: date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm'),
+  modelValue: null,
   format24h: false,
-  withSeconds: false,
+  dense: false,
+  config: () => {
+    return {};
+  },
 });
 
 const emit = defineEmits<{
@@ -18,35 +24,45 @@ const emit = defineEmits<{
 }>();
 
 const dates = computed({
-  set(value: string) {
+  set(value: any) {
     emit('update:modelValue', value);
   },
   get() {
+    // console.log('get', props.modelValue);
     return props.modelValue;
   },
 });
 
-const timeMask = computed(() => {
-  if (props.withSeconds) {
-    return 'HH:mm:ss';
-  } else {
-    return 'HH:mm';
+const dateMask = computed(() => {
+  let obj = {
+    date: 'YYYY/MM/DD',
+    time: 'HH:mm:ss',
+  };
+  if (!isEmpty(props.config) && props.config.dateMask) {
+    const maskList = props.config.dateMask.split(' ');
+    obj.date = maskList[0];
+    obj.time = maskList[1] || '';
   }
+  return obj;
 });
 
-const dateRules = computed(() => {
-  let dateRegular: RegExp;
-  if (props.withSeconds) {
-    dateRegular =
-      /^-?[\d]+\/[0-1]\d\/[0-3]\d ([0-1]?\d|2[0-3]):[0-5]\d:[0-5]\d$/;
-  } else {
-    dateRegular = /^-?[\d]+\/[0-1]\d\/[0-3]\d (\d{2}):(\d{2})$/;
-  }
-  return [(v: string) => dateRegular.test(v)];
+const isWithSeconds = computed(() => {
+  return dateMask.value.time.length > 6;
 });
 
-const dateProxyDate = ref('');
-const timeProxyDate = ref('');
+// const dateRules = computed(() => {
+//   let dateRegular: RegExp;
+//   if (props.withSeconds) {
+//     dateRegular =
+//       /^-?[\d]+\/[0-1]\d\/[0-3]\d ([0-1]?\d|2[0-3]):[0-5]\d:[0-5]\d$/;
+//   } else {
+//     dateRegular = /^-?[\d]+\/[0-1]\d\/[0-3]\d (\d{2}):(\d{2})$/;
+//   }
+//   return [(v: string) => dateRegular.test(v)];
+// });
+
+const dateProxyDate = ref<any>(null);
+const timeProxyDate = ref<any>(null);
 const dateLocale = reactive({
   daysShort: '六_日_一_二_三_四_五'.split('_'),
   months:
@@ -60,30 +76,40 @@ const dateLocale = reactive({
 });
 
 onMounted(() => {
+  console.log('999', props.config);
+
   getNowDate();
 });
 
 function getNowDate() {
-  dateProxyDate.value = date.formatDate(Date.now(), 'YYYY/MM/DD');
-  timeProxyDate.value = date.formatDate(Date.now(), timeMask.value);
+  dateProxyDate.value = date.formatDate(Date.now(), dateMask.value.date);
+  timeProxyDate.value = date.formatDate(Date.now(), dateMask.value.time);
 }
 
 function updateProxy() {
   const _dates = dates.value;
+  if (_dates) {
     const dateArr = _dates.split(' ');
 
     dateProxyDate.value = dateArr[0];
     timeProxyDate.value = dateArr[1];
+  } else {
+    dateProxyDate.value = null;
+    timeProxyDate.value = null;
+  }
 }
 
 function onClickDate() {
-  const datesStr = `${dateProxyDate.value} ${timeProxyDate.value}`;
+  let datesStr = dateProxyDate.value;
+  if (timeProxyDate.value) {
+    datesStr = `${dateProxyDate.value} ${timeProxyDate.value}`;
+  }
   dates.value = datesStr;
 }
 </script>
 <template>
   <div class="hcy-datetime-pick">
-    <q-input filled dense v-model="dates" :rules="dateRules">
+    <q-input v-model="dates" v-bind="config">
       <template v-slot:append>
         <q-icon name="event" class="cursor-pointer">
           <q-popup-proxy
@@ -98,17 +124,38 @@ function onClickDate() {
               minimal
               v-model="dateProxyDate"
               :locale="dateLocale"
-              mask="YYYY/MM/DD"
+              :mask="dateMask.date"
               class="my-date"
             >
+              <div
+                class="row items-center justify-end q-gutter-sm"
+                v-if="!dateMask.time"
+              >
+                <q-btn
+                  label="此刻"
+                  size="sm"
+                  color="primary"
+                  flat
+                  @click="getNowDate"
+                />
+                <q-btn
+                  unelevated
+                  label="确定"
+                  size="sm"
+                  color="primary"
+                  @click="onClickDate"
+                  v-close-popup
+                />
+              </div>
             </q-date>
             <q-time
+              v-if="dateMask.time"
               flat
               square
               v-model="timeProxyDate"
-              :mask="timeMask"
+              :mask="dateMask.time"
               :format24h="format24h"
-              :with-seconds="withSeconds"
+              :with-seconds="isWithSeconds"
               text-color="primary"
               class="my-time"
             >

src/components/EssentialLink.vue

 <template>
+  <q-expansion-item
+    v-if="children && children.length > 0"
+    expand-separator
+    :label="title"
+    :caption="caption"
+    switch-toggle-side
+  >
     <q-item
+      clickable
+      active-class="bg-primary-bg-light"
+      v-for="item in children"
+      @click="expansionClick(item)"
+      :key="item.link"
+      :active="pageStore.activeRouter?.path === item.link ? true : false"
+    >
+      <q-item-section v-if="item.icon" avatar>
+        <q-avatar size="md" square>
+          <img :src="item.icon" />
+        </q-avatar>
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ item.title }}</q-item-label>
+        <q-item-label caption v-if="item.caption">{{
+          item.caption
+        }}</q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-expansion-item>
+
+  <q-item
+    v-else
     clickable
     @click="onClick"
     :active="pageStore.activeRouter?.path === link ? true : false"
@@ -19,36 +49,38 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
+import { defineComponent, PropType, reactive, toRefs } from 'vue';
 import { useRouter } from 'vue-router';
 import { usePageStore } from 'src/common/hooks';
+import { EssentialLinkType } from 'src/components/models';
 
 export default defineComponent({
   name: 'EssentialLink',
   props: {
     active: {
       type: Boolean,
-      required: true,
+      default: false,
     },
     title: {
       type: String,
       required: true,
     },
-
     caption: {
       type: String,
       default: '',
     },
-
     link: {
       type: String,
       default: '#',
     },
-
     icon: {
       type: String,
       default: '',
     },
+    children: {
+      type: Array as PropType<EssentialLinkType[]>,
+      default: () => [],
+    },
   },
   setup(props) {
     const pageStore = usePageStore();
@@ -61,9 +93,15 @@ export default defineComponent({
       if (currentRouter === props.link) return;
       router.push(props.link);
     };
+    const expansionClick = (params: EssentialLinkType) => {
+      const currentRouter = router.currentRoute.value.path;
+      if (currentRouter === params.link) return;
+      router.push(params.link as string);
+    };
     return {
       ...toRefs(state),
       onClick,
+      expansionClick,
       pageStore,
     };
   },

src/components/MyForm.vue

@@ -10,6 +10,46 @@
           <slot :name="item.solt"></slot>
         </div>
       </template>
+      <template v-else-if="item.type === 'password'">
+        <q-input
+          :type="item.isPwd ? 'password' : 'text'"
+          v-model="formValue[item.fild]"
+          v-bind="item.bind"
+          :disable="
+            item.bind.disable === undefined ? state.disable : item.bind.disable
+          "
+          :readonly="
+            item.bind.readonly === undefined
+              ? state.readonly
+              : item.bind.readonly
+          "
+        >
+          <template v-slot:append>
+            <q-icon
+              :name="item.isPwd ? 'visibility_off' : 'visibility'"
+              class="cursor-pointer"
+              @click="item.isPwd = !item.isPwd"
+            />
+          </template>
+        </q-input>
+      </template>
+      <template v-else-if="item.type === 'date'">
+        <date-time-pick
+          format24h
+          v-model="formValue[item.fild]"
+          :config="item.bind"
+        />
+      </template>
+      <template v-else-if="item.type === 'time'">
+        <time-pick
+          format24h
+          v-model="formValue[item.fild]"
+          :config="item.bind"
+        />
+      </template>
+      <template v-else-if="item.type === 'dateMultiple'">
+        <date-multiple v-model="formValue[item.fild]" :config="item.bind" />
+      </template>
       <template v-else>
         <q-input
           v-if="item.type !== 'select'"
@@ -44,6 +84,9 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, reactive, ref, watch } from 'vue';
+import DateTimePick from './DateTimePick.vue';
+import TimePick from './TimePick.vue';
+import DateMultiple from './DateMultiple.vue';
 import { cloneDeep, isObjEqual } from 'src/common/utils';
 
 interface Props {

src/components/TimePick.vue

+<script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue';
+import { date } from 'quasar';
+import { isEmpty } from 'src/common/utils';
+
+interface Props {
+  modelValue: string | null;
+  format24h?: boolean;
+  dense?: boolean;
+  config?: any;
+}
+const props = withDefaults(defineProps<Props>(), {
+  // modelValue: date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm'),
+  modelValue: null,
+  format24h: false,
+  dense: false,
+  config: () => {
+    return {};
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const dates = computed({
+  set(value: any) {
+    emit('update:modelValue', value);
+  },
+  get() {
+    return props.modelValue;
+  },
+});
+
+const timeMask = computed(() => {
+  let obj = {
+    time: 'HH:mm:ss',
+  };
+  if (!isEmpty(props.config) && props.config.timeMask) {
+    obj.time = props.config.timeMask;
+  }
+  return obj;
+});
+
+const isWithSeconds = computed(() => {
+  return timeMask.value.time.length > 6;
+});
+
+const timeProxyDate = ref<any>(null);
+
+onMounted(() => {
+  getNowDate();
+});
+
+function getNowDate() {
+  timeProxyDate.value = date.formatDate(Date.now(), timeMask.value.time);
+}
+
+function updateProxy() {
+  timeProxyDate.value = dates.value;
+}
+
+function onClickDate() {
+  dates.value = timeProxyDate.value;
+}
+</script>
+<template>
+  <div class="hcy-datetime-pick">
+    <q-input v-model="dates" v-bind="config">
+      <template v-slot:append>
+        <q-icon name="access_time" class="cursor-pointer">
+          <q-popup-proxy
+            @before-show="updateProxy"
+            transition-show="scale"
+            transition-hide="scale"
+            class="row"
+          >
+            <q-time
+              flat
+              square
+              v-model="timeProxyDate"
+              :mask="timeMask.time"
+              :format24h="format24h"
+              :with-seconds="isWithSeconds"
+              text-color="primary"
+              class="my-time"
+            >
+              <div class="row items-center justify-end q-gutter-sm">
+                <q-btn
+                  label="此刻"
+                  size="sm"
+                  color="primary"
+                  flat
+                  @click="getNowDate"
+                />
+                <q-btn
+                  unelevated
+                  label="确定"
+                  size="sm"
+                  color="primary"
+                  @click="onClickDate"
+                  v-close-popup
+                />
+              </div>
+            </q-time>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-time {
+  :deep(.q-time__header) {
+    background-color: white;
+  }
+  :deep(.q-time__main
+      .q-time__content
+      .q-time__container-child
+      .q-time__clock
+      .q-time__clock-circle
+      .q-time__clock-position--active) {
+    color: white !important;
+  }
+}
+</style>

src/components/index.ts

 import DateTimePick from './DateTimePick.vue';
+import TimePick from './TimePick.vue';
+import DateMultiple from './DateMultiple.vue';
+
 import BaiduMap from './BaiduMap.vue';
 import MyForm from './MyForm.vue';
 import MyTooltip from './MyTooltip.vue';
@@ -12,6 +15,8 @@ import AgGridDateComponent from './ag-grid/DateComponent.vue';
 
 export {
   DateTimePick as ComDateTimePick,
+  TimePick as ComTimePick,
+  DateMultiple as ComDateMultiple,
   BaiduMap as ComBaiduMap,
   MyForm as ComForm,
   MyTooltip as ComTooltip,
@@ -26,6 +31,8 @@ export {
 
 export default {
   DateTimePick,
+  TimePick,
+  DateMultiple,
   BaiduMap,
   MyForm,
   MyTooltip,

src/components/models.ts

@@ -23,3 +23,11 @@ export interface CanvasData {
   data: CanvasRoute[];
   style?: CanvasStyle;
 }
+export interface EssentialLinkType {
+  title: string;
+  caption?: string;
+  icon?: string;
+  link?: string;
+  active?: boolean;
+  children?: Array<EssentialLinkType>;
+}

src/layouts/MainLayout.vue

@@ -76,26 +76,6 @@
           <TopLeftLoading />
         </q-item-label>
 
-        <q-expansion-item
-          expand-separator
-          icon="perm_identity"
-          label="菜单"
-          caption="正在开发..."
-        >
-          <q-item clickable active-class="bg-primary-bg-light">
-            <q-item-section>
-              <q-item-label>标题</q-item-label>
-              <q-item-label caption>备注</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item clickable active-class="bg-primary-bg-light">
-            <q-item-section>
-              <q-item-label>标题2</q-item-label>
-              <q-item-label caption>备注2</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-expansion-item>
-
         <EssentialLink
           v-for="link in essentialLinks"
           :key="link.title"
@@ -123,6 +103,7 @@ import { onBeforeRouteUpdate, useRouter } from 'vue-router';
 import { usePageStore } from 'src/common/hooks';
 import EssentialLink from 'components/EssentialLink.vue';
 // import TopLeftLoading from './TopLeftLoading.vue';
+import { MenuList } from './config';
 import TopLeftLoading from './TopLeftText.vue';
 import LanguageSelect from './element/LanguageSelect.vue';
 
@@ -176,86 +157,7 @@ export default defineComponent({
     });
 
     const getLinksList = () => {
-      const lists = [
-        {
-          title: '主页',
-          caption: null,
-          icon: require('./menuListIcons/home.svg'),
-          link: '/home',
-          active: false,
-        },
-        {
-          title: '一',
-          caption: '日历',
-          icon: require('./menuListIcons/page1.svg'),
-          link: '/page1',
-          active: false,
-        },
-        {
-          title: '贰',
-          caption: '2',
-          icon: require('./menuListIcons/page2.svg'),
-          link: '/page2',
-          active: false,
-        },
-        {
-          title: '叁',
-          caption: '3',
-          icon: require('./menuListIcons/page3.svg'),
-          link: '/page3',
-          active: false,
-        },
-        {
-          title: '四',
-          caption: '4',
-          icon: require('./menuListIcons/page4.svg'),
-          link: '/page4',
-          active: false,
-        },
-        {
-          title: '五',
-          caption: '5',
-          icon: require('./menuListIcons/page5.svg'),
-          link: '/page5',
-          active: false,
-        },
-        {
-          title: '六',
-          caption: '一些js练习',
-          icon: require('./menuListIcons/page6.png'),
-          link: '/page6',
-          active: false,
-        },
-        {
-          title: '七',
-          caption: '疫情防控',
-          icon: require('./menuListIcons/page7.svg'),
-          link: '/page7',
-          active: false,
-        },
-        {
-          title: '八',
-          caption: '动画',
-          icon: require('./menuListIcons/page8.svg'),
-          link: '/page8',
-          active: false,
-        },
-        {
-          title: '九',
-          caption: '动画2&表格',
-          icon: require('./menuListIcons/page9.svg'),
-          link: '/page9',
-          active: false,
-        },
-        {
-          title: '十',
-          caption: '设计',
-          icon: require('./menuListIcons/page10.svg'),
-          link: '/page10',
-          active: false,
-        },
-      ];
-
+      let lists = MenuList;
       for (const item of lists) {
         if (item.link === defaultRouter.value) {
           item.active = true;
@@ -263,7 +165,6 @@ export default defineComponent({
           item.active = false;
         }
       }
-
       linksList.value = lists;
     };
 

src/layouts/config.ts

+export const MenuList = [
+  {
+    title: '主页',
+    caption: null,
+    icon: require('./menuListIcons/home.svg'),
+    link: '/home',
+    active: false,
+  },
+  {
+    title: '一',
+    caption: '日历',
+    icon: require('./menuListIcons/page1.svg'),
+    link: '/page1',
+    active: false,
+  },
+  {
+    title: '贰',
+    caption: '表单',
+    icon: require('./menuListIcons/page2.svg'),
+    link: '/page2',
+    active: false,
+  },
+  {
+    title: '四',
+    caption: 'canvas小车动画',
+    icon: require('./menuListIcons/page4.svg'),
+    link: '/page4',
+    active: false,
+  },
+  {
+    title: '八',
+    caption: '动画',
+    icon: require('./menuListIcons/page8.svg'),
+    link: '/page8',
+    active: false,
+  },
+  {
+    title: '九',
+    caption: '动画2&表格',
+    icon: require('./menuListIcons/page9.svg'),
+    link: '/page9',
+    active: false,
+  },
+  {
+    title: '十',
+    caption: '设计',
+    icon: require('./menuListIcons/page10.svg'),
+    link: '/page10',
+    active: false,
+  },
+  {
+    title: '学习',
+    caption: '杂七杂八',
+    icon: '',
+    active: false,
+    children: [
+      {
+        title: '链表',
+        caption: '看控制台',
+        icon: require('./menuListIcons/page3.svg'),
+        link: '/js-page3',
+        active: false,
+      },
+      {
+        title: '五',
+        caption: '表格&防抖节流',
+        icon: require('./menuListIcons/page5.svg'),
+        link: '/page5',
+        active: false,
+      },
+      {
+        title: '六',
+        caption: '一些js练习',
+        icon: require('./menuListIcons/page6.png'),
+        link: '/js-page6',
+        active: false,
+      },
+    ],
+  },
+  {
+    title: '图表',
+    caption: '',
+    icon: '',
+    active: false,
+    children: [
+      {
+        title: '七',
+        caption: '疫情防控',
+        icon: require('./menuListIcons/page7.svg'),
+        link: '/page7',
+        active: false,
+      },
+    ],
+  },
+];

src/layouts/menuListIcons/usd.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1673240940500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4401" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512m-405.333333 0a405.333333 405.333333 0 1 0 810.666666 0 405.333333 405.333333 0 1 0-810.666666 0Z" fill="#4CAF50" p-id="4402"></path><path d="M576 621.44c0-45.226667-38.613333-57.386667-80-75.946667-57.6-25.386667-119.253333-47.146667-119.253333-136.96 0-29.226667 9.173333-110.506667 122.453333-125.013333v-66.346667h49.493333v67.2c100.266667 17.28 114.986667 92.373333 116.906667 144.213334H576c0-53.333333-24.32-74.026667-56.32-74.026667a50.133333 50.133333 0 0 0-53.333333 54.186667c0 93.013333 199.253333 58.453333 199.253333 212.053333 0 107.946667-104.746667 122.453333-123.306667 124.373333v61.653334h-49.92v-61.44a137.813333 137.813333 0 0 1-133.333333-146.986667H448c0 78.293333 59.306667 76.373333 67.84 76.373333a53.546667 53.546667 0 0 0 60.16-53.333333z" fill="#FDFDFD" p-id="4403"></path></svg>
\ No newline at end of file

src/modules/other/IndexPage.vue

+<!--
+ * other
+  -->
+<script lang="ts">
+export default {
+  name: 'OTHER',
+};
+</script>
+<script setup lang="ts"></script>
+<template>
+  <div>
+    <h1>其它</h1>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/modules/page1/IndexPage.vue

@@ -50,7 +50,7 @@
             style="width: 220px"
             v-model="dates"
             format24h
-            with-seconds
+            :config="{ filled: true, dense: true }"
           />
         </div>
       </q-item>

src/modules/page2/IndexPage.vue

@@ -30,8 +30,9 @@
             </template>
           </q-input>
         </template>
-
-        <template> 123 </template>
+        <template #test>
+          <div>测试</div>
+        </template>
       </Com.MyForm>
     </div>
   </div>
@@ -55,7 +56,9 @@ const colorPalette = ref<any>([]);
 
 const formState = reactive({
   config: form,
-  value: {} as any,
+  value: {
+    date1: '2022-12-31 12:30:30',
+  } as any,
 });
 
 onMounted(() => {
@@ -111,10 +114,9 @@ function onChange() {
 }
 
 function onSubmit() {
-  console.log('formValue', delEmptyObjkey(formState.value));
-
   myForm.value.validate().then((success: any) => {
     if (!success) return;
+    console.log('formValue', delEmptyObjkey(formState.value));
   });
 }
 
@@ -125,7 +127,9 @@ function onResetForm() {
 
 <style lang="scss" scoped>
 .page2-form {
+  margin-top: $padding-sm;
   width: 800px;
+  box-sizing: border-box;
   border: 1px solid $border-color;
 }
 </style>

src/modules/page2/config.ts

@@ -15,6 +15,7 @@ export const form = [
     fild: 'password',
     col: 'col-6',
     type: 'password',
+    isPwd: true,
     bind: {
       filled: true,
       label: '密码*',
@@ -83,4 +84,71 @@ export const form = [
       label: '备注',
     },
   },
+  {
+    solt: 'test',
+    col: 'col-6',
+  },
+  {
+    fild: 'aaa',
+    col: 'col-6',
+    type: 'text',
+    bind: {
+      label: '测试',
+    },
+  },
+  {
+    fild: 'date1',
+    col: 'col-6',
+    type: 'date',
+    bind: {
+      label: '日期1',
+      filled: true,
+      clearable: true,
+      dateMask: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    fild: 'date2',
+    col: 'col-6',
+    type: 'date',
+    bind: {
+      label: '日期2',
+      filled: true,
+      clearable: true,
+      dateMask: 'YYYY-MM-DD',
+    },
+  },
+  {
+    fild: 'dateMultiple',
+    col: 'col-6',
+    type: 'dateMultiple',
+    bind: {
+      label: '日期多选',
+      filled: true,
+      clearable: true,
+      dateMask: 'YYYY/MM/DD',
+    },
+  },
+  {
+    fild: 'dateRange',
+    col: 'col-6',
+    type: 'dateRange',
+    bind: {
+      label: '日期范围',
+      filled: true,
+      clearable: true,
+      dateMask: 'YYYY/MM/DD',
+    },
+  },
+  {
+    fild: 'time1',
+    col: 'col-6',
+    type: 'time',
+    bind: {
+      label: '时间1',
+      filled: true,
+      clearable: true,
+      timeMask: 'HH:mm',
+    },
+  },
 ];

src/router/routes.ts

@@ -42,16 +42,6 @@ const routes: RouteRecordRaw[] = [
               keepalive: true,
             },
           },
-          {
-            path: 'page3',
-            name: 'PAGE3',
-            component: () => import('../modules/page3/IndexPage.vue'),
-            meta: {
-              title: '页面3',
-              permission: ['*'],
-              keepalive: true,
-            },
-          },
           {
             path: 'page4',
             name: 'PAGE4',
@@ -72,16 +62,6 @@ const routes: RouteRecordRaw[] = [
               keepalive: true,
             },
           },
-          {
-            path: 'page6',
-            name: 'PAGE6',
-            component: () => import('../modules/page6/IndexPage.vue'),
-            meta: {
-              title: '一些js练习',
-              permission: ['*'],
-              keepalive: true,
-            },
-          },
           {
             path: 'page7',
             name: 'PAGE7',
@@ -122,6 +102,26 @@ const routes: RouteRecordRaw[] = [
               keepalive: true,
             },
           },
+          {
+            path: 'js-page3',
+            name: 'JS_PAGE3',
+            component: () => import('../modules/page3/IndexPage.vue'),
+            meta: {
+              title: '页面3',
+              permission: ['*'],
+              keepalive: true,
+            },
+          },
+          {
+            path: 'js-page6',
+            name: 'JS_PAGE6',
+            component: () => import('../modules/page6/IndexPage.vue'),
+            meta: {
+              title: '一些js练习',
+              permission: ['*'],
+              keepalive: true,
+            },
+          },
         ],
       },
     ],