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,93 +29,44 @@
               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-table-header
-          <ns-tree v-if="getTreeData.length" v-bind="getTreeBindValue" @select="treeSelect" />
+              v-if="!isEmpty(headerActions) || tableTitle"
-        </a-col> -->
+              :headerActions="headerActions"
-            <a-col flex="auto">
+              :searchData="formModel"
-              <ns-table-header
+              :tableTitle="tableTitle"
-                v-if="!isEmpty(headerActions) || tableTitle"
+              :data="tableState.selectedRows">
-                :headerActions="headerActions"
+              <template #header="data">
-                :searchData="formModel"
+                <slot name="header" v-bind="data || {}"></slot>
-                :tableTitle="tableTitle"
+              </template>
-                :data="tableState.selectedRows">
+            </ns-table-header>
-                <template #header="data">
+            <ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData">
-                  <slot name="header" v-bind="data || {}"></slot>
+              <template #emptyText>
+                <template v-if="tableState.loadError">
+                  <div class="ns-table-content">
+                    <div class="fetch-error">
+                      <p>{{ tableState.loadErrorMessage }}</p>
+                      <ns-button type="primary" ghost @click="reload">重新加载</ns-button></div
+                    ></div
+                  >
                 </template>
-              </ns-table-header>
+                <template v-else-if="tableState.loading"
-              <ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData">
+                  ><div class="ns-table-content"></div
-                <template #emptyText>
+                ></template>
-                  <template v-if="tableState.loadError">
+                <template v-else>
-                    <div class="ns-table-content">
+                  <div class="ns-table-content"> <a-empty /> </div>
-                      <div class="fetch-error">
-                        <p>{{ tableState.loadErrorMessage }}</p>
-                        <ns-button type="primary" ghost @click="reload">重新加载</ns-button></div
-                      ></div
-                    >
-                  </template>
-                  <template v-else-if="tableState.loading"
-                    ><div class="ns-table-content"></div
-                  ></template>
-                  <template v-else>
-                    <div class="ns-table-content"> <a-empty /> </div>
-                  </template>
                 </template>
+              </template>
 
-                <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+              <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
-                  <slot :name="item" v-bind="data || {}"></slot>
+                <slot :name="item" v-bind="data || {}"></slot>
-                  <template v-if="item === 'bodyCell'">
+                <template v-if="item === 'bodyCell'">
-                    <template v-if="data?.column?.textEllipsis">
+                  <template v-if="data?.column?.textEllipsis">
-                      <span
-                        class="tool-tips"
-                        :style="{ width: `${data.column.textWidth || data.column.width}px` }">
-                        <ns-tooltip
-                          placement="top"
-                          v-if="
-                            data.column.customRender
-                              ? data.column.customRender(data)
-                              : data.record[data.column.dataIndex]
-                          ">
-                          <template #title>
-                            <span>{{
-                              data.column.customRender
-                                ? data.column.customRender(data)
-                                : data.record[data.column.dataIndex] || '-'
-                            }}</span>
-                          </template>
-                          <span class="text-ellipsis">{{
-                            data.column.customRender
-                              ? data.column.customRender(data)
-                              : data.record[data.column.dataIndex] || '-'
-                          }}</span>
-                        </ns-tooltip>
-                        <span class="text-ellipsis" v-else> - </span>
-                      </span>
-                    </template>
-                    <template v-if="data.column.dataIndex === 'tableAction'">
-                      <ns-table-action
-                        :data="data.record"
-                        :searchData="formModel"
-                        :columnActions="getColumnActions" />
-                    </template>
-                    <template v-if="data.column.edit">
-                      <ns-table-cell
-                        :value="data.text"
-                        :record="data.record"
-                        :column="data.column"
-                        :index="data.index" />
-                    </template>
-                  </template>
-                  <template v-if="item === 'footer'">
-                    <ns-table-footer :footerActions="footerActions" :data="ediRowData" />
-                  </template>
-                </template>
-
-                <template #bodyCell="data" v-if="!Object.keys($slots).includes('bodyCell')">
-                  <template v-if="data.column.textEllipsis">
                     <span
                       class="tool-tips"
                       :style="{ width: `${data.column.textWidth || data.column.width}px` }">
@@ -155,15 +107,61 @@
                       :index="data.index" />
                   </template>
                 </template>
-
+                <template v-if="item === 'footer'">
-                <template
-                  #footer
-                  v-if="!Object.keys($slots).includes('footer') && !isEmpty(footerActions)">
                   <ns-table-footer :footerActions="footerActions" :data="ediRowData" />
                 </template>
-              </ns-basic-table>
+              </template>
-            </a-col>
+
-          </a-row>
+              <template #bodyCell="data" v-if="!Object.keys($slots).includes('bodyCell')">
+                <template v-if="data.column.textEllipsis">
+                  <span
+                    class="tool-tips"
+                    :style="{ width: `${data.column.textWidth || data.column.width}px` }">
+                    <ns-tooltip
+                      placement="top"
+                      v-if="
+                        data.column.customRender
+                          ? data.column.customRender(data)
+                          : data.record[data.column.dataIndex]
+                      ">
+                      <template #title>
+                        <span>{{
+                          data.column.customRender
+                            ? data.column.customRender(data)
+                            : data.record[data.column.dataIndex] || '-'
+                        }}</span>
+                      </template>
+                      <span class="text-ellipsis">{{
+                        data.column.customRender
+                          ? data.column.customRender(data)
+                          : data.record[data.column.dataIndex] || '-'
+                      }}</span>
+                    </ns-tooltip>
+                    <span class="text-ellipsis" v-else> - </span>
+                  </span>
+                </template>
+                <template v-if="data.column.dataIndex === 'tableAction'">
+                  <ns-table-action
+                    :data="data.record"
+                    :searchData="formModel"
+                    :columnActions="getColumnActions" />
+                </template>
+                <template v-if="data.column.edit">
+                  <ns-table-cell
+                    :value="data.text"
+                    :record="data.record"
+                    :column="data.column"
+                    :index="data.index" />
+                </template>
+              </template>
+
+              <template
+                #footer
+                v-if="!Object.keys($slots).includes('footer') && !isEmpty(footerActions)">
+                <ns-table-footer :footerActions="footerActions" :data="ediRowData" />
+              </template>
+            </ns-basic-table>
+          </div>
         </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,46 +102,62 @@
 <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 {
-      border-radius: @ns-border-radius;
-    }
-  }
 
-  :deep(.ns-table) {
+  // 以防样式串
-    .ns-part-tree {
+  .ns-list-table:not(.ant-drawer-body > *):not(.ant-form > *) {
-      border-right: @border-gap;
+    height: 100%;
-      height: calc(100vh - 158px);
+    background-color: @ns-content-bg;
-    }
+    :deep(.ns-table) {
-    .ns-table-main {
+      height: inherit;
-      padding: 0px @gap;
+      .ns-table-container,
-      border-top: @border-gap;
+      .ns-part-tree,
-      // margin: 16px;
+      .ant-spin-container {
-      // background-color: #fff;
+        height: inherit;
-    }
+      }
-    .ns-table-search {
+
-      padding: @gap @gap 0;
+      .ns-part-tree,
-      // margin: 16px;
+      .ns-table-search,
-      background: #fff;
+      .ns-table-main {
-      // border-width: 16px 0 16px 0px;
+        background-color: @white;
-      // border-color: #e5ebf0;
+        border-radius: @ns-border-radius;
-      // border-style: solid;
+        box-shadow: @ns-content-box-shadow;
-      // border-top: 16px solid #e5ebf0;
+      }
-    }
+
-    .ns-table-header {
+      .ns-table-container {
-      // position: sticky;
+        gap: @ns-gap;
-      z-index: 3;
+      }
-      top: 0;
+      .ns-part-tree {
-      left: 0;
+      }
-      background-color: @white;
+      .ns-part-table {
-    }
+        border-radius: @ns-border-radius;
-    .ant-table-sticky-scroll {
+      }
-      display: none !important;
+      .ns-table-main {
-    }
+        padding: 0px @gap;
-    .ns-basic-table {
+        margin-top: @ns-gap;
-      padding-top: @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;
+      }
+      .ns-table-header {
+        // position: sticky;
+        z-index: 3;
+        top: 0;
+        left: 0;
+        background-color: @white;
+      }
+      .ant-table-sticky-scroll {
+        display: none !important;
+      }
+      .ns-basic-table {
+        padding-top: @gap;
+      }
     }
   }
 

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 {