布局字段尺寸从0-24的数字全部变成滑块,拖动时显示百分比

src/components/DesignForm/formControlPropertiNew.vue

@@ -500,14 +500,7 @@ const attrList = computed(() => {
         ],
       },
 
-      {
-        label: "表单栅格",
-        value: config.span,
-        placeholder: "表单区域栅格宽，0为自动宽",
-        path: "config.span",
-        vHide: ["gridChild"],
-        isNum: true,
-      },
+      
       /*{
                 label: '行类样式',
                 value: config.inline,
@@ -695,38 +688,7 @@ const attrList = computed(() => {
         eventName: "setInputSlot",
       },
 
-      {
-        label: "占据的列数span",
-        value: attr.span,
-        path: "attr.span",
-        vShow: ["gridChild"],
-        eventName: "formatNumber",
-        isNum: true,
-      },
-      {
-        label: "左侧的间隔格数offset",
-        value: attr.offset,
-        path: "attr.offset",
-        vShow: ["gridChild"],
-        eventName: "formatNumber",
-        isNum: true,
-      },
-      {
-        label: "向右移动格数push",
-        value: attr.push,
-        path: "attr.push",
-        vShow: ["gridChild"],
-        eventName: "formatNumber",
-        isNum: true,
-      },
-      {
-        label: "向左移动格数pull",
-        value: attr.pull,
-        path: "attr.pull",
-        vShow: ["gridChild"],
-        eventName: "formatNumber",
-        isNum: true,
-      },
+      
       {
         label: "序号列",
         value: columnIndex,
@@ -861,6 +823,58 @@ const attrList = computed(() => {
         vIf: state.isSearch,
         vShow: ["expand-user"],
       },
+      /* {
+        label: "表单栅格",
+        value: config.span,
+        placeholder: "表单区域栅格宽，0为自动宽",
+        path: "config.span",
+        vHide: ["gridChild"],
+        isNum: true,
+      }, */
+      {
+        label: "表单栅格",
+        value: config.span,
+        path: "config.span",
+        type: "span",
+        vHide: ["gridChild"],
+        isNum: true,
+      },
+      {
+        label: "占据的列数span",
+        value: attr.span,
+        type: "attrSpan",
+        path: "attr.span",
+        vShow: ["gridChild"],
+        eventName: "formatNumber",
+        isNum: true,
+      },
+      {
+        label: "左侧的间隔格数offset",
+        value: attr.offset,
+        type: "attrOffset",
+        path: "attr.offset",
+        vShow: ["gridChild"],
+        eventName: "formatNumber",
+        isNum: true,
+      },
+      {
+        label: "向右移动格数push",
+        value: attr.push,
+        type: "attrPush",
+        path: "attr.push",
+        vShow: ["gridChild"],
+        eventName: "formatNumber",
+        isNum: true,
+      },
+      {
+        label: "向左移动格数pull",
+        value: attr.pull,
+        type: "attrPull",
+        path: "attr.pull",
+        vShow: ["gridChild"],
+        eventName: "formatNumber",
+        isNum: true,
+      },
       /* {
         label: "添加时间水印",
         value: config.lowcodeImage,
@@ -4352,6 +4366,13 @@ const aiAgentList = ref([
   //   value: 3,
   // },
 ]);
+
+
+const formatTooltip = (val: number) => {
+  //console.log("zhidhfasidhais----->",val)
+  const result = ((val / 24) * 100).toFixed(2);
+  return `${result}%`;
+}
 </script>
 <template>
   <DataSourcePage
@@ -4702,6 +4723,41 @@ const aiAgentList = ref([
                   <el-button @click="handleUserRangeDialogFlag">可选用户设置</el-button>
               </el-row>
 
+              <el-row v-else-if="item.type === 'span'" >
+                  <div style="width:190px;margin-left: 10px;">
+                    <el-slider v-model="controlData.config.span" :format-tooltip="formatTooltip"   :max="24" />
+                  </div>
+              </el-row>
+              <!-- 
+                attrSpan
+                attrOffset
+                attrPush
+                attrPull
+              -->
+              <el-row v-else-if="item.type === 'attrSpan'" >
+                  <div style="width:150px;margin-left: 10px;">
+                    <el-slider v-model="controlData.attr.span" :format-tooltip="formatTooltip"   :max="24" />
+                  </div>
+              </el-row>
+              
+              <el-row v-else-if="item.type === 'attrOffset'" >
+                  <div style="width:131px">
+                    <!-- <el-slider v-model="controlData.attr.offset" :format-tooltip="formatTooltip"   :max="24" /> -->
+                    <el-input-number v-model="controlData.attr.offset" :min="0" :max="23" />
+                  </div>
+              </el-row>
+              <el-row v-else-if="item.type === 'attrPush'" >
+                  <div style="width:131px">
+                    <!-- <el-slider v-model="controlData.attr.offset" :format-tooltip="formatTooltip"   :max="24" /> -->
+                    <el-input-number v-model="controlData.attr.push" :min="0" :max="23" />
+                  </div>
+              </el-row>
+              <el-row v-else-if="item.type === 'attrPull'" >
+                  <div style="width:131px">
+                    <!-- <el-slider v-model="controlData.attr.offset" :format-tooltip="formatTooltip"   :max="24" /> -->
+                    <el-input-number v-model="controlData.attr.pull" :min="0" :max="23" />
+                  </div>
+              </el-row>