类型优化

src/components/common-autocomplete/index.vue

@@ -1,42 +1,4 @@
 <script setup>
-/**
- * @typedef {Object} CommonAutocompleteOption 自动完成的配置信息
- * @property {[CommonTableColumn]} columns 表格显示列配置
- * @property {string} emptyMessage 没有数据的提示信息
- * @method searchMethod 搜索方法
- */
-/**
- * @typedef {Object} CommonSelectPageOption 默认选择页面配置信息
- * @property {[{ id:string, label:string }]} tabs 显示tabs配置
- * @method searchMethod 搜索方法
- */
-/**
- * @typedef {Object} CommonSelectPageOption 默认选择页配置
- */
-/**
- * @typedef {Object} CommonAutocompleteProps
- * @property {CommonAutocompleteOption} autocompleteConfig 自动完成配置
- * @property {string} modelValue 输出数据
- * @property {boolean} useIdModel 输出对象还是id
- * @property {boolean} clearable 是否可以显示清空
- * @property {boolean} readonly 只读
- * @property {boolean} disabled 是否禁用
- * @property {boolean} emptySearchEnabled 没有关键字时是否点击就开始搜索
- * @property {string} title popover标题
- * @property {string} placeholder placeholder占位符
- * @property {string} defaultLabel 自动完成默认label
- * @property {string} idKey id字段名
- * @property {string} labelKey label字段名
- * @property {number} debounceTime 防抖时间
- * @property {string} autocompleteWidth 宽度
- * @property {string} inputWidth input宽度
- * @property {CommonSelectPageOption} selectPageConfig 分页
- * @property {Number} colSize 显示几列
- * @property {string} loadingText 加载提示loading
- * @property {string} minHeight 高度自定义
- * @property {Object} inputAttrs 输入框配置项
- * @property {boolean} validateEvent 验证事件
- */
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { debounce, isObject } from 'lodash'
 import { onClickOutside, onKeyStroke, useVModel } from '@vueuse/core'
@@ -139,7 +101,13 @@ const keywords = ref(props.defaultLabel)
 // 上次搜索记录
 const lastAutocompleteLabel = ref(props.defaultLabel)
 // 分页条
+/**
+ * @type {PaginationProps}
+ */
 const pageAttrs = { layout: 'total, prev, pager, next', small: true, background: true }
+/**
+ * @type {PaginationProps}
+ */
 const selectPageAttrs = { layout: 'prev, pager, next', small: true, background: true }
 // 自动完成数据
 const dataList = ref([])

src/components/common-autocomplete/public.d.ts

@@ -0,0 +1,78 @@
+import {CommonPage} from "../public";
+import {CommonTableColumn} from "../common-table/public";
+
+export interface CommonAutocompleteProps {
+    // 自动完成配置
+    autocompleteConfig: CommonAutocompleteOption;
+    // 数据值
+    modelValue?: string;
+    // 默认选择label
+    defaultLabel?: string;
+    // 是否已id为默认输出
+    useIdModel?: boolean;
+    // 情空选项
+    clearable?: boolean;
+    // 只读选项
+    readonly?: boolean;
+    // 禁用选项
+    disabled?: boolean;
+    // 没有输入时是否可以搜索
+    emptySearchEnabled?: boolean;
+    // 自动完成标题
+    title?: string;
+    // 占位符
+    placeholder?: string;
+    // id字段名
+    idKey?: string;
+    // label字段名
+    labelKey?: string;
+    // 防抖延时
+    debounceTime?: number;
+    // 自动完成宽度
+    autocompleteWidth?: string;
+    // 输入框宽度
+    inputWidth?: string;
+    // 可选项页配置
+    selectPageConfig?: CommonSelectPageOption;
+    // 可选项列默认显示几列
+    colSize?: number;
+    // 加载提示loading
+    loadingText?: string;
+    // 最低高度
+    minHeight?: string;
+    // input自定义属性
+    inputAttrs?: any;
+    // 验证事件
+    validateEvent?: boolean;
+}
+
+export interface CommonSelectPageOption {
+    tabs: Array<{ id: string, label: string }>;
+    /**搜索方法*/
+    searchMethod: (tabId: string, callback: (items: Array<any>) => void) => Promise<any>;
+}
+
+export interface CommonAutocompleteOption {
+    /**自动完成表格列配置*/
+    columns: Array<CommonTableColumn>;
+    /**空数据提示信息*/
+    emptyMessage?: string;
+    /**搜索方法*/
+    searchMethod: (param: CommonSearchParam,
+                   callback: (result: {
+                       /**返回分分页*/
+                       page: CommonPage,
+                       /**返回的数据*/
+                       items: Array<any>
+                   }) => void) => Promise<any>;
+}
+
+/**
+ * 搜索参数
+ */
+export interface CommonSearchParam {
+    /** 搜索关键字 */
+    query: string;
+    /**分页信息*/
+    page: CommonPage;
+}

src/components/common-form-control/index.vue

@@ -4,28 +4,6 @@ import { $i18nBundle } from '@/messages'
 import ControlChild from '@/components/common-form-control/control-child.vue'
 import { useInputType } from '@/components/utils'
 
-/**
- * 定义一些注释属性，方便代码提示
- * @typedef {Object} CommonFormOption
- * @property {'input'|'input-number'|'cascader'|'radio'
- * |'radio-group'|'radio-button'|'checkbox'|'checkbox-group'|'checkbox-button'|'date-picker'
- * |'time-picker'|'switch'|'select'|'option'|'slider'|'transfer'|'upload'} type 类型
- * @property {any} value 数据值
- * @property {string|[string]} prop 属性
- * @property {string} label 标签
- * @property {string} labelKey 用于国际化的label
- * @property {boolean} required 是否必填,后面解析成为rules的一部分
- * @property {string|RegExp} pattern 正则表达式验证，解析成为rules的一部分
- * @property {string} patternMsg 正则表达式验证消息
- * @property {boolean} common 自定义组件
- * @property {boolean} disabled 禁用
- * @property {boolean} readonly 只读
- * @property {string} placeholder 占位提示符
- * @property {{clearable:boolean,disabled:boolean,showPassword:boolean}} attrs
- * @property {[CommonFormOption]} children 子节点
- * @property {Array<RuleItem>} rules 验证规则
- */
-
 /**
  * @type {{option:CommonFormOption}}
  */

src/components/common-form/index.vue

@@ -4,14 +4,6 @@ import cloneDeep from 'lodash/cloneDeep'
 import { $i18nBundle } from '@/messages'
 import { useVModel } from '@vueuse/core'
 
-/**
- * @typedef {FormProps} CommonFormProps
- * @property {[CommonFormOption]} options 配置选项
- * @property {boolean} showButtons 是否显示按钮区域
- * @property {boolean} showSubmit 是否显示提交按钮
- * @property {boolean} showReset 是否显示重置按钮
- * @method submitForm 提交逻辑
- */
 /**
  * @type {CommonFormProps}
  */

src/components/common-form/public.d.ts

@@ -0,0 +1,65 @@
+import {RuleItem} from "async-validator/dist-types/interface";
+import {FormInstance, FormProps} from "element-plus";
+
+export interface CommonFormProps extends FormProps {
+    /**配置选项*/
+    options: Array<CommonFormOption>;
+    /**label宽度*/
+    labelWidth: string;
+    /**model对象*/
+    model: any;
+    /**是否在rule改变时执行验证*/
+    validateOnRuleChange: boolean;
+    /**提交按钮的label*/
+    submitLabel: string;
+    /**重置按钮label*/
+    resetLabel: string;
+    /**返回按钮label*/
+    backLabel: string;
+    /**是否显示按钮区域*/
+    showButtons: boolean;
+    /**是否显示提交按钮*/
+    showSubmit: boolean;
+    /**是否显示重置按钮*/
+    showReset: boolean;
+    /**提交逻辑*/
+    submitForm: (form: FormInstance) => void;
+    /**返回地址*/
+    backUrl: string;
+}
+
+export interface CommonFormOption {
+    /**表单类型*/
+    type: 'input' | 'input-number' | 'cascader' | 'radio'
+        | 'radio-group' | 'radio-button' | 'checkbox' | 'checkbox-group' | 'checkbox-button' | 'date-picker'
+        | 'time-picker' | 'switch' | 'select' | 'option' | 'slider' | 'transfer' | 'upload' | 'common-icon-select' | 'common-autocomplete';
+    /**数据值*/
+    value?: any;
+    /**属性名*/
+    prop: string | string[];
+    /**表单标签*/
+    label?: string;
+    /**用于国际化的label*/
+    labelKey?: string;
+    /**是否必填,后面解析成为rules的一部分*/
+    required?: boolean;
+    /**正则表达式验证，解析成为rules的一部分*/
+    pattern?: string | RegExp;
+    /**正则表达式验证消息*/
+    patternMsg?: string;
+    /**是否禁用*/
+    disabled?: boolean;
+    /**是否只读*/
+    readonly?: boolean;
+    /**占位提示符*/
+    placeholder?: string;
+    /**其他可用属性*/
+    attrs?: {
+        showPassword: boolean,
+        [key: string]: any
+    };
+    /**有些控件柚子节点*/
+    children?: Array<CommonFormOption>;
+    /**async-validator验证器*/
+    rules: Array<RuleItem>;
+}

src/components/common-menu-item/index.vue

@@ -3,26 +3,12 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 /**
- * @typedef {Object} CommonMenuItem 菜单对象
+ * @type {CommonMenuItemProps}
- * @property {boolean} isDropdown 是否是下拉Dropdown样式
- * @property {boolean} isSplit 是否是分割元素
- * @property {string} menuCls 自定义样式
- * @property {string} index 路由地址
- * @property {Object} route 路由
- * @property {string} icon 图标
- * @property {number} iconSize 图标大小
- * @property {string} label 菜单显示名称
- * @property {string} labelKey 菜单显示名称的Key，国际化需要
- * @method iconIf 图标计算函数
- * @method click 点击事件
- * @property {[CommonMenuItem]} children 子菜单
- */
-/**
- * @type {Object}
- * @property {CommonMenuItem} menuItem 菜单对象
- * @property index 序号
  */
 const props = defineProps({
+  /**
+   * @type {CommonMenuItem}
+   */
   menuItem: {
     type: Object,
     required: true
@@ -57,6 +43,7 @@ const dropdownClick = (menuItem, $event) => {
     }
   }
 }
+
 </script>
 
 <template>

src/components/common-menu/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import { filterMenus } from '@/components/utils'
+import { filterMenus, useParentRoute } from '@/components/utils'
 import { useRoute } from 'vue-router'
 
 const props = defineProps({
@@ -13,7 +13,8 @@ const menuItems = computed(() => {
   return filterMenus(props.menus)
 })
 const activeRoutePath = computed(() => {
-  const route = useRoute()
+  let route = useRoute()
+  route = useParentRoute(route)
   return route && route.path !== '/' ? route.path : ''
 })
 </script>

src/components/common-menu/public.d.ts

@@ -0,0 +1,42 @@
+import {RouteRecordRaw} from "vue-router";
+
+export interface CommonMenuItemProps {
+    /**menu配置*/
+    menuItem: CommonMenuItem;
+    /**index序号*/
+    index: number | string;
+}
+
+/**
+ * 菜单对象
+ */
+export interface CommonMenuItem {
+    /**是否是下拉Dropdown样式*/
+    isDropdown?: boolean;
+    /**是否是分割元素*/
+    isSplit?: boolean;
+    /**自定义样式*/
+    menuCls?: string;
+    /**路由地址*/
+    index?: string;
+    /** 路由 */
+    route?: RouteRecordRaw;
+    /** 图标 */
+    icon?: string;
+    /** 图标大小 */
+    iconSize?: number | string;
+    /** 菜单显示名称 */
+    label?: string;
+    /** 菜单显示名称的Key，国际化需要 */
+    labelKey?: string;
+    /** 图标计算函数 */
+    iconIf?: () => string;
+    /** click事件 */
+    click?: () => string;
+    /**子菜单*/
+    children?: Array<CommonMenuItem>;
+    /**自定义属性*/
+    attrs: {
+        [key: string]: any
+    }
+}

src/components/common-table/common-table-column.vue

@@ -1,23 +1,7 @@
 <script setup>
-/**
- * 表格列配置信息，对应el-table-column数据
- * @typedef {Object} CommonTableColumn
- * @property {string} label 标签头
- * @property {string} labelKey 国际化
- * @property {string} property 数据属性
- * @property {string} width 宽度
- * @property {boolean} isOperation 是否是操作列
- * @property {string} slot 自定义插槽
- * @property [ButtonProps] buttons 自定义按钮
- * @property {Object} attrs 其他属性
- * @property {Object} linkAttrs 链接配置
- * @method click 点击事件
- * @method formatter 格式化
- */
 /**
  * 配置信息
- * @property {CommonTableColumn[]} columns 表格显示列配置
+ * @type {CommonTableColumnProps}
- * @buttonSize {''|'large'|'small'|'default'}
  */
 const props = defineProps({
   /**

src/components/common-table/index.vue

@@ -2,10 +2,6 @@
 import CommonTableColumn from '@/components/common-table/common-table-column.vue'
 import { computed, ref } from 'vue'
 
-/**
- * @typedef {TableProps} CommonTableProps
- * @property {[CommonTableColumn]} columns
- */
 /**
  * @type CommonTableProps
  */
@@ -60,6 +56,9 @@ const props = defineProps({
     type: Object,
     default: null
   },
+  /**
+   * @type {CommonPage}
+   */
   page: {
     type: Object,
     default: null

src/components/common-table/public.d.ts

@@ -0,0 +1,74 @@
+import {ButtonProps, TableProps} from "element-plus";
+import {CommonPage} from "../public";
+import {PaginationProps} from "element-plus/es/components/pagination/src/pagination";
+
+/**
+ * 表格列定义
+ */
+export interface CommonTableColumn {
+    // 表格头
+    label: string;
+    // 表格头国际化key
+    labelKey: string;
+    // 属性名
+    property: string;
+    // 属性名，同property
+    prop: string;
+    // 宽度
+    width: string;
+    // 是否是可操作列
+    isOperation: boolean;
+    // 自定义插槽名称，用于自定义显示数据
+    slot: string;
+    // 自定义按钮
+    buttons: Array<ButtonProps>
+    // 可选属性
+    attrs: any;
+    // 链接可选属性
+    linkAttrs: any;
+    // 点击事件
+    click: (data: any) => any;
+    // 格式化函数
+    formatter: (data: any, scope: any) => string;
+}
+
+/**
+ * 表格配置
+ */
+export interface CommonTableProps extends TableProps<any> {
+    /** 列配置 */
+    columns: Array<CommonTableColumn>;
+    /** 显示数据 */
+    data: Array<any>;
+    /** 高亮当前行 */
+    highlightCurrentRow: boolean;
+    /** stripe */
+    stripe: boolean;
+    /** 边框配置 */
+    border: boolean;
+    /** 自定义按钮配置 */
+    buttons?: Array<ButtonProps>;
+    /** buttons插槽 */
+    buttonsSlot?: string;
+    /** 默认的按钮大小 */
+    buttonSize?: string;
+    /** 按钮列配置 */
+    buttonsColumnAttrs?: {
+        [key: string]: any
+    };
+    /** 分页配置 */
+    page?: CommonPage;
+    /** 分页对齐 */
+    pageAlign?: 'left' | 'center' | 'right';
+    /** 其他分页配置项 */
+    pageAttrs?: PaginationProps;
+    /**loading状态*/
+    loading?: boolean;
+    /**loading显示消息*/
+    loadingText?: string;
+}
+
+export interface CommonTableColumnProps {
+    column: CommonTableColumn,
+    buttonSize: '' | 'small' | 'large' | 'default'
+}

src/components/public.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 分页参数
+ */
+export interface CommonPage {
+    /** 当前第几页 */
+    pageNumber: number;
+    /** 每页数量 */
+    pageSize: number;
+    /** 总页数 */
+    pageCount?: number;
+    /** 数据总数 */
+    totalCount?: number;
+}
+

src/components/utils/index.js

@@ -54,3 +54,22 @@ export const filterMenus = menus => menus.filter(menu => !menu.disabled)
     }
     return menu
   })
+
+/**
+ * 如果有replaceTabHistory，获取上级菜单
+ * @function useParentRoute
+ * @param route {RouteRecordMultipleViewsWithChildren} 路由信息
+ */
+export const useParentRoute = function (route) {
+  const parentName = route.meta?.replaceTabHistory
+  if (parentName) {
+    const routes = route.matched || []
+    for (let i = routes.length - 1; i > 0; i--) {
+      const r = routes[i]
+      if ((!r.meta || !r.meta.replaceTabHistory) && r.path !== '/') {
+        return r
+      }
+    }
+  }
+  return route
+}

src/config.js

@@ -4,14 +4,6 @@
  */
 export const PAGE_SIZE = 10
 
-/**
- * @typedef {Object} CommonPage
- * @property {number} pageSize 单页数量
- * @property {number} pageNumber 当前第几页
- * @property {number} totalCount 总数
- * @property {number} pageCount 总页数
- */
-
 /**
  * 默认分页数据
  *

src/services/city/CityService.js

@@ -23,6 +23,7 @@ export const loadAutoCities = (data, config) => {
 }
 /**
  * 城市自动完成配置
+ * @return {CommonAutocompleteOption}
  */
 export const useCityAutocompleteConfig = () => {
   return {