feat: form 组件样式调整

2024-06-25 11:21:35 +08:00
parent cecd3a0325
commit 15fce86265
14 changed files with 241 additions and 163 deletions
--- a/lib/component/form/form-util.ts
+++ b/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'];

 /**
 * 是否时间组件
--- a/lib/component/form/form/form-item.vue
+++ b/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;
          },
        };
--- a/lib/component/form/form/form.vue
+++ b/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>
--- a/lib/component/form/form/props.ts
+++ b/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), // 是否展示右上角的全部收起展开
 };
--- a/lib/component/table/props.ts
+++ b/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), // 是否展示右上角的全部收起展开
 };
--- a/lib/component/table/table-header.vue
+++ b/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;
--- a/lib/component/table/table.vue
+++ b/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;