feat: form 组件样式调整

hx-ai-intelligent/src/theme/global.less

@@ -182,3 +182,7 @@
     background-color: #AEAEAE;
   }
 }
+
+#app {
+  min-width: 1200px;
+}

hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue

@@ -439,7 +439,7 @@
               label: '账号名',
               component: 'NsInput',
               componentProps: {
-                placeholder: '请输入账号名',
+                // placeholder: '请输入账号名',
                 maxLength: 30,
               },
             },
@@ -448,7 +448,7 @@
               label: '姓名',
               component: 'NsInput',
               componentProps: {
-                placeholder: '请输入姓名',
+                // placeholder: '请输入姓名',
                 maxLength: 30,
               },
             },
@@ -457,7 +457,7 @@
               label: '手机号',
               component: 'NsInput',
               componentProps: {
-                placeholder: '请输入手机号',
+                // placeholder: '请输入手机号',
                 maxLength: 11,
               },
             },
@@ -475,7 +475,6 @@
               label: '用户状态',
               component: 'NsSelect',
               componentProps: {
-                placeholder: '请选择',
                 allowClear: true,
                 options: [
                   {

lib/component/form/form-util.ts

@@ -13,7 +13,7 @@ const DATE_TYPE = [
   'ARangePicker',
 ];
 
-const INPUT_TYPE = ['NsInput', 'AInput'];
+const INPUT_TYPE = ['NsInput', 'AInput', 'NsTextarea', 'ATextarea'];
 
 /**
  * 是否时间组件

lib/component/form/form/form-item.vue

@@ -51,6 +51,11 @@
   import { isInputType } from '/nerv-lib/component/form/form-util';
   import { useParams } from '/nerv-lib/use/use-params';
 
+  enum prefix {
+    '请选择',
+    '请输入',
+  }
+
   export default defineComponent({
     name: 'NsFormItem',
     components: {},
@@ -221,21 +226,28 @@
         const {
           component,
           field,
+          label,
           dynamicParams,
           changeEvent = 'change',
           valueField,
           addModel = [],
           autoAddLink = false,
           autoSubmit = false,
+          componentProps,
         } = props.schema;
         const isCheck =
           component && ['NsSwitch', 'NsCheckbox', 'Switch', 'Checkbox'].includes(component);
         const eventKey = `on${upperFirst(changeEvent)}`;
         const attr: Recordable = {};
-        if (isInputType(component)) {
+        const isInput = isInputType(component);
+        if (isInput) {
           attr.allowClear = true;
         }
 
+        // const { placeholder } = componentProps;
+        // // 赋予初始提示符
+        // componentProps['placeholder'] = placeholder || `${prefix[Number(isInput)]}${label}`;
+
         const propsData: Recordable = {
           field,
           dynamicParams,
@@ -293,8 +305,6 @@
           },
           onValidateChange: (text: Object | undefined) => {
             if (isUndefined(text)) text = {};
-            console.error(text, 'onValidateChange');
-
             validateRef.value = text;
           },
         };

lib/component/form/form/form.vue

@@ -7,7 +7,24 @@
     v-bind="getBindValue"
     ref="formElRef"
     :model="formModel">
-    <a-row class="ns-form-body" :justify="getFormClass.justify" :gutter="getFormClass.gutter">
+    <div v-if="showAction && showExpandAll" class="ns-form-title ns-title-extra-box">
+      <span>查询</span>
+      <a-button type="link" class="ns-operate-expand" @click="expandAll = !expandAll">
+        <template v-if="expandAll">
+          收起筛选
+          <UpOutlined />
+        </template>
+        <template v-else>
+          展开筛选
+          <DownOutlined />
+        </template>
+      </a-button>
+    </div>
+    <a-row
+      v-show="expandAll"
+      class="ns-form-body"
+      :justify="getFormClass.justify"
+      :gutter="getFormClass.gutter">
       <template v-for="(schema, index) in getSchema" :key="schema.field">
         <ns-form-item
           :show="expandRef || index < splitNumber"
@@ -89,6 +106,7 @@
       const { schemas } = toRefs(props);
       const isInitDefaultValueRef = ref(false);
       const expandRef = ref(props.expand);
+      const expandAll = ref(props.expandAll);
       const formModel = computed(() => {
         return props.model;
       });
@@ -97,7 +115,7 @@
       function addChildForm(form: any) {
         childForms.value.push(form);
       }
-      let splitNumber = ref(3);
+      let splitNumber = ref(4);
       const { width: formWidth } = useElementSize(formElRef);
       provide('addChildForm', addChildForm);
 
@@ -302,17 +320,19 @@
         getComponentSpan,
         splitNumber,
         finish,
+        expandAll,
       };
     },
   });
 </script>
 <style lang="less" scoped>
+  @gap: 16px;
   .ns-form {
     .ant-row {
       flex: 1;
     }
     .ns-operate {
-      margin-bottom: 16px;
+      margin-bottom: @gap;
       text-align: right;
       margin-left: auto;
 
@@ -334,5 +354,20 @@
         margin-left: 6px;
       }
     }
+    .ns-form-title {
+      text-align: left;
+      height: 22px;
+      // line-height: 32px;
+      //font-size: 16px;
+      font-weight: bold;
+      user-select: text;
+      margin-bottom: calc(@gap - 0px);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      :deep(.ant-btn) {
+        padding: 0;
+      }
+    }
   }
 </style>

lib/component/form/form/props.ts

@@ -15,4 +15,7 @@ export const formProps = {
   formLayout: PropTypes.string.def('flex'),
   expand: PropTypes.bool.def(true),
   showExpand: PropTypes.bool.def(false),
+  // 收起全部
+  expandAll: PropTypes.bool.def(true), // 默认是否全部展开
+  showExpandAll: PropTypes.bool.def(true), // 是否展示右上角的全部收起展开
 };

lib/component/table/props.ts

@@ -56,6 +56,9 @@ export const tableProps = {
   rowKey: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).def('key'),
   refreshTime: PropTypes.number.def(0),
   enableTableSession: PropTypes.bool.def(false),
-  expand: PropTypes.bool.def(true),
+  expand: PropTypes.bool.def(true), // 默认是否展开
-  showExpand: PropTypes.bool.def(true),
+  showExpand: PropTypes.bool.def(false), // 是否展示右下角的收起展开
+  // 收起全部
+  expandAll: PropTypes.bool.def(true), // 默认是否全部展开
+  showExpandAll: PropTypes.bool.def(true), // 是否展示右上角的全部收起展开
 };

lib/component/table/table-header.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="ns-table-header" v-if="!isEmpty(getActions)">
-    <div class="ns-table-title extra-title-box" v-if="tableTitle">{{ tableTitle }}</div>
+    <div class="ns-table-title ns-title-extra-box" v-if="tableTitle">{{ tableTitle }}</div>
     <div class="ns-table-header-action">
       <slot name="header" :data="data"></slot>
       <template v-for="item in getActions" :key="item.name">
@@ -75,21 +75,6 @@
 </script>
 
 <style lang="less" scoped>
-  .extra-title-box {
-    position: relative;
-    padding-left: 9px;
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 13px;
-      width: 3px;
-      border-radius: 1px;
-      background-color: @primary-color;
-    }
-  }
   .ns-table-header {
     min-width: fit-content;
     user-select: none;

lib/component/table/table.vue

@@ -15,6 +15,7 @@
     </div> -->
     <div class="ns-table-container">
       <!-- todo drag -->
+
       <div class="ns-part-tree" v-if="!isEmpty(treeConfig)">
         <ns-tree-api v-bind="getTreeBindValue" @select="treeSelect" />
       </div>
@@ -28,14 +29,12 @@
               v-bind="formConfig"
               :expand="expand"
               :showExpand="showExpand"
+              :expandAll="expandAll"
+              :showExpandAll="showExpandAll"
               :model="formModel"
               @finish="formFinish" />
           </div>
-          <a-row type="flex" class="ns-table-main">
+          <div class="ns-table-main">
-            <!-- <a-col :flex="getTreeWidth" v-if="!isEmpty(treeConfig)">
-          <ns-tree v-if="getTreeData.length" v-bind="getTreeBindValue" @select="treeSelect" />
-        </a-col> -->
-            <a-col flex="auto">
             <ns-table-header
               v-if="!isEmpty(headerActions) || tableTitle"
               :headerActions="headerActions"
@@ -162,8 +161,7 @@
                 <ns-table-footer :footerActions="footerActions" :data="ediRowData" />
               </template>
             </ns-basic-table>
-            </a-col>
+          </div>
-          </a-row>
         </a-spin>
       </div>
     </div>
@@ -677,6 +675,13 @@
       min-width: 0;
     }
   }
+  :deep(.ant-spin-container) {
+    display: flex;
+    flex-direction: column;
+    .ns-table-main {
+      height: 100%;
+    }
+  }
   .ns-table-content {
     // background: #e5ebf0;
     margin: 16px;

lib/saas/config/form.config.ts

@@ -14,11 +14,12 @@ export const formConfig = {
     flex: {
       // layout: 'horizontal',
       class: 'ns-flex-form ns-flex-form-horizontal',
-      wrapperCol: { span: 16 },
+      wrapperCol: { span: 24 },
-      span: 7,
+      labelCol: { span: 0 },
+      span: 6,
       sm: null, //≥576px <=768
       lg: null, //>= 768
-      gutter: [0, 0],
+      gutter: [20, 0],
       justify: 'space-between',
     },
     flexv2: {

lib/saas/theme/global.less

@@ -163,6 +163,24 @@ a {
   color: @primary-color;
 }
 
+
+// 自定义的title样式
+.ns-title-extra-box {
+  position: relative;
+  padding-left: 9px;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: @primary-color;
+  }
+}
+
 //状态颜色
 .commonStatus {
   &::before {

lib/saas/theme/variable.less

@@ -61,5 +61,6 @@
 // main-content
 @ns-content-bg: #f1f2f6;
 @ns-box-shadow: 0px 5px 16px #e4e6e8;
+@ns-content-box-shadow: 0px 0px 16px #e4e6e8;
 @ns-gap: 20px;
 @ns-border-radius: 12px;

lib/saas/view/service/list-table.vue

@@ -15,8 +15,6 @@
   import { tableProps } from '/nerv-lib/component/table/props';
   import { PropTypes } from '/nerv-lib/util/type';
   import { cloneDeep, get, isArray } from 'lodash-es';
-  tableProps.expand = PropTypes.bool.def(false);
-
   export default defineComponent({
     name: 'NsViewListTable',
     props: {
@@ -104,33 +102,48 @@
 <style lang="less" scoped>
   //关闭 sticky 模式 底部滚动条
   @gap: 16px;
-  @border-gap: @gap solid #e5ebf0;
+  @border-gap: @gap solid @ns-content-bg;
-  :deep(.ns-table-container) {
+
-    // border-top: @border-gap;
+  // 以防样式串
-    .ns-table-search {
+  .ns-list-table:not(.ant-drawer-body > *):not(.ant-form > *) {
-      border-radius: @ns-border-radius;
+    height: 100%;
+    background-color: @ns-content-bg;
+    :deep(.ns-table) {
+      height: inherit;
+      .ns-table-container,
+      .ns-part-tree,
+      .ant-spin-container {
+        height: inherit;
       }
+
+      .ns-part-tree,
+      .ns-table-search,
+      .ns-table-main {
+        background-color: @white;
+        border-radius: @ns-border-radius;
+        box-shadow: @ns-content-box-shadow;
       }
 
-  :deep(.ns-table) {
+      .ns-table-container {
+        gap: @ns-gap;
+      }
       .ns-part-tree {
-      border-right: @border-gap;
+      }
-      height: calc(100vh - 158px);
+      .ns-part-table {
+        border-radius: @ns-border-radius;
       }
       .ns-table-main {
         padding: 0px @gap;
-      border-top: @border-gap;
+        margin-top: @ns-gap;
+        background-color: @white;
+        box-shadow: @ns-content-box-shadow;
+
+        // border-top: @border-gap;
         // margin: 16px;
         // background-color: #fff;
       }
       .ns-table-search {
         padding: @gap @gap 0;
-      // margin: 16px;
-      background: #fff;
-      // border-width: 16px 0 16px 0px;
-      // border-color: #e5ebf0;
-      // border-style: solid;
-      // border-top: 16px solid #e5ebf0;
       }
       .ns-table-header {
         // position: sticky;
@@ -146,6 +159,7 @@
         padding-top: @gap;
       }
     }
+  }
 
   :deep(.ns-form::after) {
     background-color: #f0f2f5;

lib/saas/view/system/application.vue

@@ -339,8 +339,8 @@
       height: 100%;
       background-color: @white;
       border-radius: @ns-border-radius;
-      overflow-y: auto;
+      // overflow-y: auto;
-      overflow-x: hidden;
+      // overflow-x: hidden;
       // margin: 0 16px 16px 16px;
     }
     .ns-content-main {