多选框组新增拖动排序功能---单页面表单

src/components/DesignForm/formControlAttr.vue

@@ -27,7 +27,7 @@
 
 	import { Plus } from '@element-plus/icons-vue'
 
-
+    import Draggable from 'vuedraggable-es'
 	
     
     
@@ -1155,6 +1155,14 @@
         let delflag = true
         let breakFlag = 0
         if(controlData.value.type === 'checkbox'&& controlData.value.config.optionsType==0){
+            //多选删除时,当前index并不是索引而是value,需找出选择的多选框实际的索引作为index    liwenxuan     多选选择框选项拖动功能 20240815 start 
+            for(let i = 0;i<controlData.value.options.length;i++){
+                if(controlData.value.options[i].value==index){
+                    index = i
+                    break
+                }
+            }
+            //多选删除时,当前index并不是索引而是value,需找出选择的多选框实际的索引作为index     liwenxuan    多选选择框选项拖动功能 20240815 end
             for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
                 if(breakFlag>0){
                     break
@@ -3204,7 +3212,7 @@ const disabledIstrue = (val:string) => {
                                 </el-select>
                             </el-form-item>
                             <template v-if="controlData.config.optionsType === 0">
-                                <div v-if="controlData.type !== 'cascader'">
+                                <div v-if="controlData.type !== 'cascader'&&controlData.type !== 'checkbox'">
                                     <el-form-item
                                         v-for="(item, index) in controlData.options"
                                         :key="index"
@@ -3225,6 +3233,42 @@ const disabledIstrue = (val:string) => {
                                         </el-col>
                                     </el-form-item>
                                 </div>
+                                <!-- 多选选择框选项拖动功能 liwenxuan 20240815 start -->
+                                <div v-if="controlData.type !== 'cascader'&&controlData.type == 'checkbox'">
+                                    <draggable
+                                        :list="controlData.options" 
+                                        :force-fallback="true" 
+                                        chosen-class="chosenClass" 
+                                        animation="300"
+                                        
+                                    >
+                                    
+                                        <template #item="{ element }">
+                                            <div class="item form_cont">
+                                                <el-form-item>
+                                                    <el-col :span="2" style="padding-top:4px;cursor: move;color: #66B1FF">
+                                                        <i class="icon-move" ></i>
+                                                    </el-col>
+                                                    <el-col :span="6" style="cursor: move;">
+                                                        选项标签
+                                                    </el-col>
+                                                    <el-col :span="10">
+                                                        <el-input v-model="element.label" placeholder="选项标签" />
+                                                        
+                                                    </el-col>
+                                                    <el-col :span="2" :offset="1">
+                                                        <i
+                                                            class="icon-del"
+                                                            @click="delSelectOption(element.value as number)"
+                                                        ></i>
+                                                    </el-col>
+                                                </el-form-item>
+                                                
+                                            </div>
+                                        </template>
+                                    </draggable>
+                                </div>
+                                <!-- 多选选择框选项拖动功能 liwenxuan 20240815 end -->
                                 <el-form-item class="form_cont">
                                     <el-button @click="addSelectOption">{{ controlData.type === 'cascader' ? '编辑' : '新增' }}</el-button>
                                 </el-form-item>