feat: form 组件样式调整

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),
-  showExpand: PropTypes.bool.def(true),
+  expand: 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">
-            <!-- <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"
-                :searchData="formModel"
-                :tableTitle="tableTitle"
-                :data="tableState.selectedRows">
-                <template #header="data">
-                  <slot name="header" v-bind="data || {}"></slot>
+          <div class="ns-table-main">
+            <ns-table-header
+              v-if="!isEmpty(headerActions) || tableTitle"
+              :headerActions="headerActions"
+              :searchData="formModel"
+              :tableTitle="tableTitle"
+              :data="tableState.selectedRows">
+              <template #header="data">
+                <slot name="header" v-bind="data || {}"></slot>
+              </template>
+            </ns-table-header>
+            <ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData">
+              <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>
-              <ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData">
-                <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>
-                  <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 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 #[item]="data" v-for="item in Object.keys($slots)" :key="item">
-                  <slot :name="item" v-bind="data || {}"></slot>
-                  <template v-if="item === '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 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">
+              <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+                <slot :name="item" v-bind="data || {}"></slot>
+                <template v-if="item === '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
-                  #footer
-                  v-if="!Object.keys($slots).includes('footer') && !isEmpty(footerActions)">
+                <template v-if="item === 'footer'">
                   <ns-table-footer :footerActions="footerActions" :data="ediRowData" />
                 </template>
-              </ns-basic-table>
-            </a-col>
-          </a-row>
+              </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` }">
+                    <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;