@skyfox2000/webui 1.0.0 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.0.0",
+   "version": "1.0.4",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],
@@ -26,6 +26,7 @@
    },
    "scripts": {
       "build": "pnpm i && vue-tsc -b && vite build",
+      "build:dev": "pnpm link ../502428_WebBase/ && vue-tsc -b && vite build",
       "build:dts": "vue-tsc -b && vite-dts-declaration",
       "build:types": "vue-tsc --declaration --emitDeclarationOnly"
    },
@@ -33,7 +34,7 @@
    "peerDependencies": {
       "@skyfox2000/fapi": "^1.1.17",
       "@skyfox2000/microbase": "^1.0.15",
-      "@skyfox2000/webbase": "^1.1.0",
+      "@skyfox2000/webbase": "^1.1.7",
       "ant-design-vue": "^4.2.6",
       "dayjs": "^1.11.13",
       "pinia": "^2.3.0",

package/src/components/content/form/formItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { EditorControl, ProviderKeys, useFormItemFactory } from '@skyfox2000/webbase';
-import { FormItem } from 'ant-design-vue';
+import { EditorControl, ProviderKeys, useFormItemFactory, ValidateRuleItem } from '@skyfox2000/webbase';
+import { FormItem, message } from 'ant-design-vue';
 import { Helper } from '../../common';
-import { inject, ref, useAttrs } from 'vue';
+import { computed, inject, ref, useAttrs } from 'vue';
 import { AnyData } from '@skyfox2000/fapi';
 
 const props = defineProps<{
@@ -39,6 +39,41 @@ setTimeout(() => {
    visible.value = true;
 }, 30);
 
+/**
+ * 递归获取规则
+ * - async-validator的语法规范
+ */
+const getRule = (rule: Array<string>, ruleObj: Record<string, any> | undefined): ValidateRuleItem | undefined => {
+   if (!ruleObj) {
+      return undefined;
+   }
+   const [key, ...rest] = rule;
+   if (rule.length === 1) {
+      return ruleObj[key];
+   }
+   return getRule(rest, ruleObj[key].fields as Record<string, any>);
+};
+/**
+ * 是否必填
+ * - 如果rule为空，则不显示必填标记
+ * - 如果rule不为空，则根据formRules中的required属性判断是否必填
+ */
+const required = computed(() => {
+   if (!props.rule) {
+      // 如果rule为空，则不显示必填标记
+      return false;
+   }
+   // 如果rule包含.，则表示是对象属性
+   const rule = getRule(props.rule.split('.'), editorCtrl?.formRules?.value);
+   if (!rule) {
+      message.error(`"${props.label}" 的验证规则 \`${props.rule}\` 不存在`);
+      errInfo.value.errClass = 'text-[#ff4d4f]';
+      errInfo.value.msg = `规则 \`${props.rule}\` 不存在，请检查代码！`;
+      return true;
+   }
+   return rule.required ?? true;
+});
+
 // 参考代码
 // this.$parent.$el.scrollIntoView({
 //     //滚动到指定节点
@@ -50,7 +85,7 @@ setTimeout(() => {
    <div :class="['w-full relative mb-1', width]">
       <FormItem
          v-if="visible"
-         :required="!!rule && editorCtrl?.formRules?.value?.[rule]?.required"
+         :required="required"
          class="!w-[95%] relative"
          v-bind="attrs"
          :class="[rule ? '' : 'mb-3']"

package/src/components/content/search/index.vue

@@ -29,6 +29,10 @@ const props = defineProps<{
     * 表格控制对象
     */
    gridCtrl: GridControl<AnyData>;
+   /**
+    * 模糊查询字段
+    */
+   likeFields?: string[];
 }>();
 
 // const pageData = props.gridData.page;
@@ -83,6 +87,14 @@ onMounted(() => {
 
 const onSearch = () => {
    let search = { ...props.search };
+   if (props.likeFields) {
+      for (const field of props.likeFields) {
+         if (search[field]) {
+            search[field] = { $like: '%' + search[field] + '%' };
+         }
+      }
+   }
+
    props.gridCtrl.gridQuery = {
       ...props.gridCtrl.gridQuery,
       Query: {

package/src/components/layout/header/headerExits.vue

@@ -18,7 +18,7 @@ const confirmExit = () => {
 };
 </script>
 <template>
-   <ToolIcon icon="icon-logout" @click="open = true" clickable class="w-5 h-5" />
+   <ToolIcon icon="icon-logout" @click="open = true" clickable class="w-5 h-5" title="退出系统" />
    <Modal v-model:open="open" title="确定退出？" ok-text="确定" cancel-text="取消" :width="380" @ok="confirmExit">
       <Flex align="center" justify="flex-start" :style="{ padding: '0 32px', margin: '20px 0' }">
          <ToolIcon icon="icon-question-circle" color="orange" class="w-[60px] h-[60px]" />

package/src/components/layout/header/index.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { LayoutHeader, Avatar, theme, Space } from 'ant-design-vue';
+import { LayoutHeader, theme, Space } from 'ant-design-vue';
 import { useSettingInfo } from '@skyfox2000/webbase';
 import { ToolIcon } from '../../common';
 import Breadcrumb from '../breadcrumb/index.vue';
 import HeaderExits from './headerExits.vue';
+import User from './user.vue';
 
 const { useToken } = theme;
 const { token } = useToken();
@@ -36,7 +37,7 @@ const onCollapseClick = () => {
       </div>
       <div>
          <Space size="middle" class="flex items-center">
-            <Avatar class="avatar" :style="{ backgroundColor: '#f56a00', fontSize: '14px' }" :size="24"> U </Avatar>
+            <User class="w-7 h-7" />
             <HeaderExits />
          </Space>
       </div>

package/src/components/layout/header/user.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Tooltip, AppIcon } from '../../common';
+import { useUserInfo } from '@skyfox2000/webbase';
+const userInfo = useUserInfo().userInfo;
+</script>
+<template>
+   <Tooltip :title="userInfo.Name">
+      <AppIcon icon="icon-account" />
+   </Tooltip>
+</template>

package/src/components/layout/menu/menuTabs.vue

@@ -1,13 +1,26 @@
 <script setup lang="ts">
 import { Tabs, TabPane, theme } from 'ant-design-vue';
 import { useAppInfo, usePageInfo } from '@skyfox2000/webbase';
-
+// import { useRouter } from 'vue-router';
 import { ToolIcon, Tooltip } from '../../common';
+// import { watch } from 'vue';
 
 const { useToken } = theme;
 const { token } = useToken();
 
 const pageInfoStore = usePageInfo();
+// const router = useRouter();
+
+// 通过路由设置当前激活页签
+// 避免通过浏览器后退按钮，导致页签不更新
+// watch(
+//    () => router.currentRoute.value.path,
+//    (newVal) => {
+//       if (newVal !== pageInfoStore.TabActive) {
+//          pageInfoStore.setTabActive(newVal);
+//       }
+//    },
+// );
 
 const onTabClicked = (tabKey: any) => {
    useAppInfo().push(tabKey as string);