Quellcode durchsuchen

fix: 添加 From 中 PlainTitle 组件

fan vor 2 Jahren
Ursprung
Commit
8282682e3d

+ 29 - 1
src/components/Form/src/BasicForm.vue

@@ -9,7 +9,15 @@
     <Row v-bind="getRow" :gutter="getProps.baseRowGutter">
       <slot name="formHeader" />
       <template v-for="schema in getSchema" :key="schema.field">
+        <div
+          v-if="schema.component == 'PlainTitle'"
+          :class="['form-plainTit ant-col', 'ant-col-' + (schema.colProps?.span || '24')]"
+          style="padding-left: 8px; padding-right: 8px"
+        >
+          {{ schema.defaultValue }}
+        </div>
         <FormItem
+          v-else
           :isAdvanced="fieldsIsAdvancedMap[schema.field]"
           :tableAction="tableAction"
           :formActionType="formActionType"
@@ -321,7 +329,7 @@
       }
 
       &:not(.ant-form-item-with-help) {
-        margin-bottom: 20px;
+        margin-bottom: 12px !important;
       }
 
       &.suffix-item {
@@ -343,6 +351,26 @@
       }
     }
 
+    .form-plainTit {
+      position: relative;
+      font-size: 14px;
+      font-weight: 600;
+      color: #000a18;
+      line-height: 16px;
+      margin-top: 16px;
+      // margin-left: 30px;
+      &::after {
+        position: absolute;
+        content: '';
+        top: 2px;
+        left: 0;
+        height: 12px;
+        width: 2px;
+        background: #000a18;
+        border-radius: 1px;
+      }
+    }
+
     .ant-form-explain {
       font-size: 14px;
     }

+ 1 - 1
src/components/Form/src/props.ts

@@ -37,7 +37,7 @@ export const basicProps = {
   },
   baseRowGutter: {
     type: Array,
-    default: () => [16, 8],
+    default: () => [16, 0],
   },
   baseColProps: {
     type: Object as PropType<Partial<ColEx>>,

+ 0 - 3
src/components/Form/src/types/form.ts

@@ -74,7 +74,6 @@ export interface FormProps {
   baseRowGutter?: [number, number];
   // General col configuration
   baseColProps?: Partial<ColEx>;
-
   // Form configuration rules
   schemas?: FormSchema[];
   // Function values used to merge into dynamic control form items
@@ -142,8 +141,6 @@ export interface FormSchema {
   subLabel?: string;
   // Auxiliary text color
   subLabelColor?: string;
-  // Auxiliary type
-  subLabelType?: string;
   // Help text on the right side of the text
   helpMessage?:
     | string

+ 1 - 0
src/components/Form/src/types/index.ts

@@ -117,6 +117,7 @@ export type ComponentType =
   | 'ApiTransfer'
   | 'TextEditor'
   | 'PlainText'
+  | 'PlainTitle'
   | 'FormColorPicker'
   | 'InputNumberGroup'
   | 'Cron';

+ 37 - 0
src/views/biz/visit/ready/data.ts

@@ -2,6 +2,23 @@ import { FormSchema } from '/@/components/Form';
 import { radioBoolean } from '/@/utils/filters';
 
 export const dataFormSchema: FormSchema[] = [
+  {
+    field: 'PlainTitle',
+    component: 'PlainTitle',
+    defaultValue: '检测时间',
+    colProps: {
+      span: 24,
+    },
+  },
+  // {
+  //   field: 'PlainText',
+  //   component: 'PlainText',
+  //   label: '检测时间',
+  //   defaultValue: '2023-12-12 12:12:12',
+  //   colProps: {
+  //     span: 24,
+  //   },
+  // },
   {
     field: 'configName',
     label: '参数名称',
@@ -12,6 +29,26 @@ export const dataFormSchema: FormSchema[] = [
       extra: '123123',
     },
   },
+  {
+    field: 'configName1',
+    label: '参数名称',
+    labelColor: '#818694',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入参数名称',
+      extra: '123123',
+    },
+  },
+  {
+    field: 'configName22',
+    label: '参数名称',
+    labelColor: '#818694',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入参数名称',
+      extra: '123123',
+    },
+  },
   {
     field: 'configKey',
     label: '参数键名',

+ 3 - 1
src/views/biz/visit/ready/index.vue

@@ -11,7 +11,9 @@
     <div class="mt-6" />
     <XTTab type="illness11" :selected="tabSelected" :data="tabData1" @item-click="callTab" />
     <div class="mt-6" />
-    <BasicForm @register="registerForm" @field-value-change="filedChange" />
+    <div class="m-6">
+      <BasicForm @register="registerForm" @field-value-change="filedChange" />
+    </div>
     <div>
       <XTForm :form-data="formData" />
     </div>