拖拽test

ruoyi-ui/src/views/statistics/daily/index.vue

@@ -97,6 +97,15 @@
         <el-form-item label="模版名称" prop="templateName">
           <el-input v-model="form.templateName" placeholder="请输入模版名称" />
         </el-form-item>
+        <draggable v-model="attrConfigList" @end="onDragEnd">
+          <el-form-item
+            v-for="(item, index) in attrConfigList"
+            :key="item.id"
+            :label="`Item ${index + 1}`"
+          >
+            <el-input v-model="item.attrName"></el-input>
+          </el-form-item>
+        </draggable>
         <el-form-item label="选择内容">
           <el-tag v-for="item in attrConfigList" 
             :key="item.id" 
@@ -108,10 +117,14 @@
           </el-tag> 
         </el-form-item>
         <el-form-item label="内容">
-          <editor v-model="form.templateContent" :min-height="192"/>
+          <editor v-model="form.templateContent" :min-height="192" readOnly="true"/>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
-          <el-input v-model="form.sort" placeholder="请输入排序" />
+          <el-input
+          type="textarea"
+           v-model="form.sort" 
+           placeholder="请输入排序" 
+           />
         </el-form-item>
         <el-form-item label="状态" prop="templateStatus">
           <!-- <el-input v-model="form.templateStatus" placeholder="请输入状态" /> -->
@@ -134,8 +147,11 @@
 
 <script>
 import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate,listTemplateAttr } from "@/api/statistics/template";
-
+import draggable from 'vuedraggable'
 export default {
+  components: {
+    draggable
+  },
   name: "Template",
   dicts: ['bus_template_status'],
   data() {
@@ -184,7 +200,11 @@ export default {
     this.getList();
     this.listTemplateAttr();
   },
-  methods: {
+  methods: {onDragEnd(event) {
+      // 拖拽结束后的处理逻辑，例如更新items的顺序
+      const movedItem = this.form.items.splice(event.oldIndex, 1)[0];
+      this.form.items.splice(event.newIndex, 0, movedItem);
+    },
     /** 查询模版列表 */
     getList() {
       this.loading = true;