fix: xtForm 演示

src/components/XTForm/src/XTForm.vue

@@ -1,26 +1,30 @@
 <template>
   <div v-if="formShow">
-    <Form :model="formRef">
-      <div v-for="item in formData" :key="item.name">
+    <Form :model="formRef" class="flex justify-end">
+      <div class="ml-2" v-for="item in formData" :key="item.name">
         <FormItem class="flex">
           <template #label v-if="item.label">
             <span :title="item.label">
               {{ item.label }}
             </span>
           </template>
-          <div v-if="item.componentType == ComponentEnum.normalText">
+          <div v-if="item.componentType == ComponentEnum.Input">
             <Input
               v-model:value="formRef[item.name]"
               :placeholder="item.placeholder"
               :disabled="item.disabled ? true : false"
+              :style="{ width: item.width + 'px' }"
+              :defaultValue="item.defaultValue"
               @change="handleChange"
             />
           </div>
-          <div v-if="item.componentType == ComponentEnum.select">
+          <div v-if="item.componentType == ComponentEnum.Select">
             <Select
               v-model:value="formRef[item.name]"
               :placeholder="item.placeholder"
               :mode="item.allowMultiple ? 'multiple' : undefined"
+              :style="{ width: item.width + 'px' }"
+              :defaultValue="item.defaultValue"
               @change="handleChange"
             >
               <SelectOption
@@ -29,18 +33,28 @@
                 :value="r?.value"
                 :disabled="r.disabled ? true : false"
               >
-                {{ r.label }}
+                <div class="flex items-center">
+                  <div
+                    v-if="r.prefixColor"
+                    class="select-prefix"
+                    :style="{ background: r.prefixColor }"
+                  />
+                  <div>{{ r.label }}</div>
+                </div>
               </SelectOption>
             </Select>
           </div>
-          <div v-if="item.componentType == ComponentEnum.date">
+          <div v-if="item.componentType == ComponentEnum.DatePicker">
             <DatePicker
               v-model:value="formRef[item.name]"
               :placeholder="item.placeholder"
-              show-time
-              format="YYYY-MM-DD HH:mm:ss"
-              value-format="YYYY-MM-DD HH:mm:ss"
+              :show-time="false"
+              :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
+              :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
               :disabled="item.disabled ? true : false"
+              :style="{ width: item.width + 'px' }"
+              :defaultValue="item.defaultValue"
+              @change="handleChange"
             />
           </div>
         </FormItem>
@@ -79,13 +93,17 @@
     formData: Array<{
       name: string;
       label?: string;
+      width?: string | number;
       componentType: string;
       placeholder?: string;
       allowMultiple?: boolean;
+      format?: string;
+      valueFormat?: string;
       dicts?: Array<{
         label: string;
         value: string | number;
         disabled?: boolean;
+        prefixColor?: string;
       }>;
       disabled?: boolean;
       defaultValue?: string;
@@ -103,8 +121,17 @@
   }
   // 防抖
   const debouncedFn = useDebounceFn(() => {
+    console.log('🚀 ~ file: XTForm.vue:109 ~ debouncedFn ~ formRef.value:', formRef.value);
+
     emit('change', formRef.value);
   }, 1000);
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .select-prefix {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 4px;
+  }
+</style>

src/components/XTForm/src/componentEnum.ts

@@ -1,32 +1,24 @@
 export enum ComponentEnum {
-  // 可复制
-  copyableText = '0',
-  // htmI文本
-  htmlText = '1',
+  // 自动完成
+  AutoComplete = 'AutoComplete',
+  // 级联选择
+  Cascader = 'Cascader',
   // 正常文本
-  normalText = '2',
-  // markdown文本
-  markdownText = '3',
-  // 富文本
-  editText = '4',
-  // 密码框
-  pswText = '5',
-  // 单选框
-  radio = '6',
-  // 下拉框
-  select = '7',
-  // 多选框
-  checkbox = '8',
-  // 日期
-  date = '9',
-  // 上传
-  imageUrl = '10',
-  // 字段组
-  filedGroup = '11',
-  // 数字框
-  numText = '12',
-  // 文本域
-  areaText = '13',
+  Input = 'Input',
+  // DatePicker 日期选择框
+  DatePicker = 'DatePicker',
+  // InputNumber 数字输入框
+  InputNumber = 'InputNumber',
+  // Radio 单选框
+  Radio = 'Radio',
+  // Checkbox 多选框
+  Checkbox = 'Checkbox',
+  // Select 选择器
+  Select = 'Select',
+  // TreeSelect 树选择
+  TreeSelect = 'TreeSelect',
+  // Upload 上传
+  Upload = 'Upload',
 }
 
 /**

src/components/XTTab/src/XTTab.vue

@@ -6,6 +6,7 @@
         v-for="item in data"
         :key="item.key"
         @click="handleClick(item)"
+        :style="{ width: width + 'px' }"
       >
         <div
           v-if="item.prefixColor"
@@ -28,6 +29,8 @@
 
 <script setup lang="ts">
   interface Props {
+    // 宽度
+    width?: number;
     // 类型
     type: string | null;
     // 选中
@@ -52,6 +55,7 @@
   }
   const props = withDefaults(defineProps<Props>(), {
     type: null,
+    width: 100,
     selected: '0',
     data: () => [],
   });

src/design/index.less

@@ -154,3 +154,7 @@ span {
     width: calc(100% - 182px);
   }
 }
+
+.ant-back-top-icon {
+  line-height: 40px;
+}

src/views/biz/visit/ready/data.ts

@@ -0,0 +1,83 @@
+import { FormSchema } from '/@/components/Form';
+import { radioBoolean } from '/@/utils/filters';
+
+export const dataFormSchema: FormSchema[] = [
+  {
+    field: 'configName',
+    label: '参数名称',
+    labelColor: '#818694',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入参数名称',
+      extra: '123123',
+    },
+  },
+  {
+    field: 'configKey',
+    label: '参数键名',
+    labelColor: '#818694',
+    subLabel: '测试',
+    subLabelColor: '#FF5D39',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: '请输入参数键名',
+      // style: { width: '200px' },
+    },
+  },
+  {
+    field: 'configValue',
+    label: '参数键值',
+    component: 'InputNumberGroup',
+    componentProps: ({ formModel }) => {
+      return {
+        options: [
+          { min: 0, max: 200, placeholder: '最小值 0', field: 'min' },
+          { min: 0, max: 200, placeholder: '最大值 200', field: 'max' },
+        ],
+        onChange: e => {
+          return (formModel['configValue'] = e);
+        },
+      };
+    },
+  },
+  {
+    field: 'sort',
+    label: '排序',
+    component: 'InputNumber',
+    required: true,
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请输入排序',
+      min: 1,
+    },
+  },
+  {
+    field: 'sysInner',
+    label: '系统内置',
+    component: 'RadioGroup',
+    componentProps: {
+      options: radioBoolean,
+      disabled: true,
+    },
+    defaultValue: '1',
+  },
+  // {
+  //   field: 'disable',
+  //   label: '状态',
+  //   component: 'RadioGroup',
+  //   required: true,
+  //   componentProps: {
+  //     options: radioSwitch,
+  //   },
+  //   defaultValue: '0',
+  // },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+];

src/views/biz/visit/ready/index.vue

@@ -1,10 +1,17 @@
 <template>
   <div>
     透前准备
-    <XTTab type="illness" :selected="tabSelected" :data="tabData" @item-click="callTab" />
+    <XTTab
+      type="illness"
+      :width="120"
+      :selected="tabSelected"
+      :data="tabData"
+      @item-click="callTab"
+    />
     <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>
       <XTForm :form-data="formData" />
     </div>
@@ -23,7 +30,32 @@
   import { XTCard } from '/@/components/XTCard/index';
   import { XTForm } from '/@/components/XTForm/index';
   import { ColorEnum } from '/@/enums/colorEnum';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { dataFormSchema } from './data';
+
   const tabSelected = ref('0');
+  const [registerForm] = useForm({
+    layout: 'vertical',
+    labelWidth: '100%',
+    baseColProps: {
+      span: 8,
+    },
+    baseRowGutter: [16, 8],
+    schemas: dataFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 8,
+    },
+    showResetButton: false,
+    submitButtonOptions: {
+      text: '添加',
+    },
+  });
+
+  function filedChange(key, value) {
+    console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ value:', value);
+    console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ key:', key);
+  }
   const tabData = [
     {
       key: '0',
@@ -67,25 +99,44 @@
   // formdata
   const formData = [
     {
-      name: 'text1',
-      componentType: '2',
-      placeholder: '请输入',
-    },
-    {
-      name: 'text2',
-      componentType: '9',
-      placeholder: '请输入',
+      name: 'text',
+      componentType: 'Select',
+      placeholder: '请选择',
+      width: 80,
+      defaultValue: '1',
+      dicts: [
+        { label: '全部', value: '1' },
+        { label: '未称量', value: '2', prefixColor: '#1BC1B3' },
+        { label: '待确认', value: '3', prefixColor: '#854AFF' },
+        { label: '可打印', value: '4', prefixColor: '#1BC1B3' },
+        { label: '完成', value: '5', prefixColor: '#854AFF' },
+      ],
     },
     {
-      name: 'text',
-      componentType: '7',
+      name: 'text22',
+      componentType: 'Select',
       placeholder: '请选择',
+      width: 120,
+      defaultValue: '1',
       dicts: [
-        { label: '123', value: '123' },
-        { label: '13', value: '13' },
-        { label: '12', value: '12' },
+        { label: '第一班', value: '1' },
+        { label: '第二班', value: '2' },
+        { label: '第三班', value: '3' },
       ],
     },
+    {
+      name: 'text1',
+      componentType: 'Input',
+      placeholder: '请输入',
+      width: 200,
+    },
+    {
+      name: 'text233',
+      componentType: 'DatePicker',
+      placeholder: '请输入',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
   ];
   // card 标签组
   const cardData = [
@@ -219,4 +270,8 @@
   }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  ::v-deep(.ant-form-item-label > label) {
+    width: 100% !important;
+  }
+</style>