1.4.0

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Pending
 
+## 1.4.0 (2023-11-25)
+
+- 🌟 新增 `BasicForm.schemas` 支持 `hidden`，可配置成函数，示例：组件示例-表单-基础使用
+- 💎 优化 `useECharts` 方法，考虑菜单收起宽度变化
+- `依赖升级`
+
 ## 1.3.9 (2023-07-26)
 
 - 🐞 修复 `mock` 配置异常

mock/system/dictionary.ts

@@ -136,12 +136,14 @@ export default [
           return item.label.indexOf(keywords) != -1;
         });
       }
-      const count = list.length > Number(pageSize) ? Math.ceil(list.length / Number(pageSize)) : 0;
+      const count =
+        list.length > Number(pageSize) ? Math.ceil(list.length / Number(pageSize)) : list.length;
+      const itemCount = count > Number(pageSize) ? count * Number(pageSize) : count;
       return resultSuccess({
         page: Number(page),
         pageSize: Number(pageSize),
         pageCount: count,
-        itemCount: count * Number(pageSize),
+        itemCount,
         list,
       });
     },

package.json

@@ -40,67 +40,67 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^0.27.2",
     "blueimp-md5": "^2.19.0",
-    "cropperjs": "^1.5.13",
-    "dayjs": "^1.11.9",
+    "cropperjs": "^1.6.1",
+    "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
-    "element-plus": "^2.3.8",
+    "element-plus": "^2.4.2",
     "element-resize-detector": "^1.2.4",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "perfect-scrollbar": "^1.5.5",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.7",
     "print-js": "^1.6.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5",
     "vue-types": "^4.2.1",
     "vuedraggable": "^4.1.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^17.6.7",
-    "@types/element-resize-detector": "^1.1.3",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@types/element-resize-detector": "^1.1.6",
     "@types/intro.js": "^3.0.2",
-    "@types/lodash-es": "^4.17.8",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^17.0.45",
-    "@types/qrcode": "^1.5.1",
+    "@types/qrcode": "^1.5.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-vue": "^2.3.4",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vue/compiler-sfc": "^3.3.4",
-    "autoprefixer": "^10.4.14",
+    "@vue/compiler-sfc": "^3.3.8",
+    "autoprefixer": "^10.4.16",
     "colors": "^1.4.0",
     "commitizen": "^4.3.0",
-    "core-js": "^3.31.1",
+    "core-js": "^3.33.3",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-define-config": "^1.21.0",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-define-config": "^1.24.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^8.7.1",
     "esno": "^0.16.3",
     "fs-extra": "^10.1.0",
     "gh-pages": "^4.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^13.3.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.31",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
     "rimraf": "^3.0.2",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.64.1",
+    "rollup-plugin-visualizer": "^5.9.3",
+    "sass": "^1.69.5",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.7.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
     "vite": "^3.2.7",
@@ -109,7 +109,7 @@
     "vite-plugin-mock": "^2.9.8",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-eslint-parser": "^9.3.1",
+    "vue-eslint-parser": "^9.3.2",
     "vue-tsc": "^0.35.2"
   },
   "lint-staged": {

src/components/Form/src/BasicForm.vue

@@ -5,14 +5,14 @@
         v-bind="getCol"
         v-for="schema in getSchema"
         :key="schema.field"
-        :span="schema.hidden ? 0 : getCol.span"
+        :span="getHidden(schema) ? 0 : getCol.span"
       >
         <el-form-item
           v-bind="schema"
           :label="schema.label"
           :prop="schema.field"
           :showFeedback="schema.showFeedback"
-          v-if="!schema.hidden"
+          v-if="!getHidden(schema)"
         >
           <!--标签名右侧温馨提示-->
           <template #label v-if="schema.labelMessage">
@@ -170,7 +170,7 @@
   import type { Ref } from 'vue';
   import type { FormSchema, FormProps, FormActionType } from './types/form';
 
-  import { isArray } from '@/utils/is/index';
+  import { isArray, isBoolean, isFunction } from '@/utils/is/index';
   import { deepMerge } from '@/utils';
 
   const props = defineProps({ ...basicProps });
@@ -217,6 +217,19 @@
     };
   }
 
+  function getHidden(schema): boolean {
+    const hidden = schema.hidden;
+    const field = schema.field;
+    if (isBoolean(hidden)) return hidden;
+
+    if (isFunction(hidden)) {
+      const values = getFieldsValue();
+      const status = hidden({ schema, values, model: formModel, field });
+      return status;
+    }
+    return false;
+  }
+
   function getSpecComponentProps(schema) {
     const compProps = schema.componentProps ?? {};
     return {

src/components/Form/src/types/form.ts

@@ -4,6 +4,13 @@ import type { CSSProperties } from 'vue';
 import type { ColProps } from 'element-plus/es/components/col/src/col';
 import type { ButtonProps } from 'element-plus/es/components/button/src/button';
 
+export interface RenderReturnParams {
+  schema: FormSchema;
+  values: Recordable;
+  model: Recordable;
+  field: string;
+}
+
 export interface componentProps {
   options?: any[];
   placeholder?: string;
@@ -29,7 +36,7 @@ export interface FormSchema {
   showFeedback?: boolean;
   showLabel?: boolean;
   requireMarkPlacement?: string;
-  hidden?: boolean;
+  hidden?: boolean | ((renderCallbackParams: RenderReturnParams) => boolean);
 }
 
 export interface FormProps {

src/hooks/web/useECharts.ts

@@ -10,12 +10,14 @@ import { useBreakpoint } from '@/hooks/event/useBreakpoint';
 
 import echarts from '@/utils/lib/echarts';
 import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
 export function useECharts(
   elRef: Ref<HTMLDivElement>,
   theme: 'light' | 'dark' | 'default' = 'light',
 ) {
   const { getDarkTheme } = useDesignSetting();
+  const { getMenuSetting } = useProjectSetting();
 
   const getDarkMode = computed(() => {
     const appTheme = getDarkTheme.value ? 'dark' : 'light';
@@ -62,23 +64,26 @@ export function useECharts(
 
   function setOptions(options: EChartsOption, clear = true) {
     cacheOptions.value = options;
-    if (unref(elRef)?.offsetHeight === 0) {
-      useTimeoutFn(() => {
-        setOptions(unref(getOptions));
-      }, 30);
-      return;
-    }
-    nextTick(() => {
-      useTimeoutFn(() => {
-        if (!chartInstance) {
-          initCharts(getDarkMode.value as 'default');
-
-          if (!chartInstance) return;
-        }
-        clear && chartInstance?.clear();
-
-        chartInstance?.setOption(unref(getOptions));
-      }, 30);
+    return new Promise((resolve) => {
+      if (unref(elRef)?.offsetHeight === 0) {
+        useTimeoutFn(() => {
+          setOptions(unref(getOptions));
+          resolve(null);
+        }, 30);
+      }
+      nextTick(() => {
+        useTimeoutFn(() => {
+          if (!chartInstance) {
+            initCharts(getDarkMode.value as 'default');
+
+            if (!chartInstance) return;
+          }
+          clear && chartInstance?.clear();
+
+          chartInstance?.setOption(unref(getOptions));
+          resolve(null);
+        }, 30);
+      });
     });
   }
 
@@ -111,6 +116,12 @@ export function useECharts(
     return chartInstance;
   }
 
+  watch(getMenuSetting.value, (_) => {
+    useTimeoutFn(() => {
+      resizeFn();
+    }, 300);
+  });
+
   return {
     setOptions,
     resize,

src/hooks/web/useTags.ts

@@ -1,5 +1,5 @@
 import { unref } from 'vue';
-import { useRouter } from 'vue-router';
+import { RouteLocationNormalized, useRouter } from 'vue-router';
 import type { Router } from 'vue-router';
 import { useTabsViewStore } from '@/store/modules/tabsView';
 import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
@@ -23,7 +23,7 @@ export function useTabs(_router?: Router) {
   }
 
   //更新tab标题
-  async function updateTabTitle(title: string, tab?: object) {
+  async function updateTabTitle(title: string, tab?: RouteLocationNormalized) {
     const targetTab = tab || getCurrentTab();
     await tabsViewStore.setTabTitle(title, targetTab);
   }

src/views/comp/form/basic.vue

@@ -92,8 +92,10 @@
       field: 'type',
       component: 'Select',
       label: '类型',
+      labelMessage: '选择类型会出现预约时间表单',
       componentProps: {
         placeholder: '请选择类型',
+        clearable: true,
         options: [
           {
             label: '舒适性',
@@ -133,6 +135,12 @@
           console.log(e);
         },
       },
+      // 根据 上面选择的类型，获取页面其他逻辑字段 处理显示表单
+      // 可用字段 schema, values, model, field
+      hidden: ({ model }) => {
+        return !model.type;
+      },
+      rules: [{ required: true, type: 'number', message: '请选择预约时间', trigger: ['change'] }],
     },
     {
       field: 'makeTime',

src/views/list/basicList/index.vue

@@ -21,7 +21,6 @@
         :actionColumn="actionColumn"
         @checked-row-change="onCheckedRow"
         :scroll-x="1090"
-        :pagination="false"
       >
         <template #tableTitle>
           <el-button type="primary" @click="addTable">