feat: form 组件样式调整

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), // 是否展示右上角的全部收起展开
 };