vben全局表单样式调整

src/components/Basic/src/BasicTitle.vue

@@ -1,3 +1,8 @@
+<!--
+ * @Description: 
+ * @Author: lijj
+ * @Date: 2024-04-15 17:08:07
+-->
 <template>
   <span :class="getClass">
     <slot></slot>
@@ -45,9 +50,9 @@
   .@{prefix-cls} {
     position: relative;
     display: flex;
-    padding-left: 7px;
     font-size: 16px;
-    font-weight: 500;
+    font-family: 'PingFang SC';
+    font-weight: 600;
     line-height: 24px;
     color: @text-color-base;
     cursor: pointer;

src/components/Form/src/BasicForm.vue

@@ -4,9 +4,10 @@
     ref="formElRef"
     :class="getFormClass"
     :model="formModel"
+    layout="vertical"
     @keypress.enter="handleEnterPress"
   >
-    <Row v-bind="getRow">
+    <Row v-bind="getRow" :gutter="15">
       <slot name="formHeader"></slot>
       <template v-for="schema in getSchema" :key="schema.field">
         <FormItem
@@ -318,13 +319,20 @@
       &-label label::after {
         margin: 0 6px 0 2px;
       }
-
+      &-label {
+        padding-bottom: 1px;
+      }
+      &-no-colon {
+        font-size: 12px;
+        color: #262626;
+        font-weight: 600;
+      }
       &-with-help {
         margin-bottom: 0;
       }
 
       &:not(.ant-form-item-with-help) {
-        margin-bottom: 20px;
+        margin-bottom: 15px;
       }
 
       &.suffix-item {

src/components/Form/src/hooks/useLabelWidth.ts

@@ -15,7 +15,6 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<
       wrapperCol: globWrapperCol,
       layout,
     } = unref(propsRef)
-
     // If labelWidth is set globally, all items setting
     if ((!globalLabelWidth && !labelWidth && !globalLabelCol) || disabledLabelWidth) {
       labelCol.style = {
@@ -34,7 +33,8 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<
     return {
       labelCol: { style: { width }, ...col },
       wrapperCol: {
-        style: { width: layout === 'vertical' ? '100%' : `calc(100% - ${width})` },
+        // style: { width: layout === 'vertical' ? '100%' : `calc(100% - ${width})` },
+        style: { width: '100%' },
         ...wrapCol,
       },
     }

src/hooks/component/costomForm.ts

@@ -10,7 +10,6 @@ import { getFormSetInfoByModule } from '/@/views/baseinfo/formset/api'
 import { getColumnSetInfoByModule } from '/@/views/baseinfo/columnset/api'
 // 引入表格权限信息（包含id和name）
 import { permissionsInfo } from '/@/hooks/web/usePermission'
-
 /**
  * @description: 调用接口更新设置后的表单
  * @param {*} updateSchema (vben提供的更新表单接口)

src/hooks/web/usePermission.ts

@@ -24,19 +24,29 @@ import { useMultipleTabStore } from '/@/store/modules/multipleTab'
 export function permissionsInfo() {
   let permissionId: string = ''
   let permissionName: string = ''
-  const fullPath = ref(router.currentRoute.value.fullPath)
+  const fullPath = ref(router.currentRoute.value.path)
-  usePermissionStore().getWrouteList.forEach((item: Record<any, any>) => {
+  const routerList = treeOptionData(usePermissionStore().getWrouteList)
-    item.children[0].children?.forEach((row: Record<any, any>) => {
+  routerList.forEach(item => {
-      if (fullPath.value.indexOf(row.path) != -1) {
+    if (item.path === fullPath.value) {
-        permissionId = row.id
+      console.log(fullPath.value)
-        permissionName = row.name
+      permissionId = item.id
-        console.log(permissionId)
+      permissionName = item.name
-      }
+    }
-    })
   })
   return { permissionId, permissionName }
 }
 
+// 递归查找路由中path与当前path完全相同的路由
+function treeOptionData(array, result = []) {
+  array.forEach(item => {
+    result.push({ name: item.name, id: item.id, path: item.path })
+    if (item.children && item.children.length) {
+      treeOptionData(item.children, result)
+    }
+  })
+  return JSON.parse(JSON.stringify(result))
+}
+
 // User permissions related operations
 export function usePermission() {
   const userStore = useUserStore()