field列表添加上移和下移的功能

web/src/view/systemTools/autoCode/index.vue

@@ -19,43 +19,24 @@
     <div class="button-box clearflex">
       <el-button @click="editAndAddField()" type="primary">新增Field</el-button>
     </div>
-         <el-table
-            :data="form.fields"
-             border stripe>
-             <el-table-column
-                type="index"
-                label="序列"
-                width="280">
+    <el-table :data="form.fields" border stripe>
+      <el-table-column type="index" label="序列" width="100">
       </el-table-column>
-            <el-table-column
-                prop="fieldName"
-                label="Field名"
-                width="280">
+      <el-table-column prop="fieldName" label="Field名">
       </el-table-column>
-             <el-table-column
-                prop="fieldDesc"
-                label="中文名"
-                width="280">
+      <el-table-column prop="fieldDesc" label="中文名">
       </el-table-column>
-            <el-table-column
-                prop="fieldJson"
-                label="FieldJson"
-                width="280">
+      <el-table-column prop="fieldJson" label="FieldJson">
       </el-table-column>
-            <el-table-column
-                prop="fieldType"
-                label="Field数据类型"
-                width="280">
+      <el-table-column prop="fieldType" label="Field数据类型" width="130">
       </el-table-column>
-            <el-table-column
-                label="操作">
+      <el-table-column label="操作" width="250">
         <template slot-scope="scope">
           <el-button type="primary" @click="editAndAddField(scope.row)">编辑</el-button>
-                    <el-popover
-                    placement="top"
-                    width="280"
-                    v-model="scope.row.visible">
-                    <p>这是一段内容这是一段内容确定删除吗？</p>
+          <el-button type="success" :disabled="scope.$index == 0" @click="moveUpField(scope.$index)">上移</el-button>
+          <el-button type="warning" :disabled="(scope.$index + 1) == form.fields.length" @click="moveDownField(scope.$index)">下移</el-button>
+          <el-popover placement="top" v-model="scope.row.visible">
+            <p>确定删除吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
               <el-button type="primary" size="mini" @click="deleteField(scope.$index)">确定</el-button>
@@ -81,69 +62,85 @@
 </template>
 <script>
 const fieldTemplate = {
-            fieldName:"",
-            fieldDesc:"",
-            fieldType:"",
-            fieldJson:"",
-            columnName:"",
+  fieldName: '',
+  fieldDesc: '',
+  fieldType: '',
+  fieldJson: '',
+  columnName: '',
 }
 
-import FieldDialog from "@/view/systemTools/autoCode/component/fieldDialog.vue"
-import {toUpperCase} from "@/utils/stringFun.js"
-import {createTemp} from "@/api/autoCode.js"
+import FieldDialog from '@/view/systemTools/autoCode/component/fieldDialog.vue'
+import { toUpperCase } from '@/utils/stringFun.js'
+import { createTemp } from '@/api/autoCode.js'
 export default {
-    name:"autoCode",
+  name: 'autoCode',
   data() {
     return {
-            addFlag:"",
+      addFlag: '',
       form: {
-                structName:"",
-                packageName:"",
-                abbreviation:"",
+        structName: '',
+        packageName: '',
+        abbreviation: '',
         autoCreateApiToSql: false,
-                fields:[]
+        fields: [],
       },
       rules: {
         structName: [{ required: true, message: '请输入结构体名称', trigger: 'blur' }],
         abbreviation: [{ required: true, message: '请输入结构体简称', trigger: 'blur' }],
-                packageName:[{required: true, message: '请输入包名称', trigger: 'blur'}]
+        packageName: [{ required: true, message: '请输入包名称', trigger: 'blur' }],
       },
       dialogMiddle: {},
       bk: {},
-            dialogFlag:false
+      dialogFlag: false,
     }
   },
   components: {
-        FieldDialog
+    FieldDialog,
   },
   methods: {
     editAndAddField(item) {
       this.dialogFlag = true
       if (item) {
-                this.addFlag="edit"
+        this.addFlag = 'edit'
         this.bk = JSON.parse(JSON.stringify(item))
         this.dialogMiddle = item
       } else {
-                this.addFlag="add"
+        this.addFlag = 'add'
         this.dialogMiddle = JSON.parse(JSON.stringify(fieldTemplate))
       }
     },
+    moveUpField(index) {
+      if (index == 0) {
+        return
+      }
+      const oldUpField = this.form.fields[index - 1]
+      this.form.fields.splice(index - 1, 1)
+      this.form.fields.splice(index, 0, oldUpField)
+    },
+    moveDownField(index) {
+      const fCount = this.form.fields.length
+      if (index == fCount - 1) {
+        return
+      }
+      const oldDownField = this.form.fields[index + 1]
+      this.form.fields.splice(index + 1, 1)
+      this.form.fields.splice(index, 0, oldDownField)
+    },
     enterDialog() {
       this.$refs.fieldDialog.$refs.fieldDialogFrom.validate((valid) => {
         if (valid) {
           this.dialogMiddle.fieldName = toUpperCase(this.dialogMiddle.fieldName)
-            if(this.addFlag=="add"){
+          if (this.addFlag == 'add') {
             this.form.fields.push(this.dialogMiddle)
           }
           this.dialogFlag = false
         } else {
-            return false;
+          return false
         }
-        });
-            
+      })
     },
     closeDialog() {
-            if(this.addFlag=="edit"){
+      if (this.addFlag == 'edit') {
         this.dialogMiddle = this.bk
       }
       this.dialogFlag = false
@@ -154,8 +151,8 @@ export default {
     async enterForm() {
       if (this.form.fields.length <= 0) {
         this.$message({
-                    type:"error",
-                    message:"请填写至少一个field"
+          type: 'error',
+          message: '请填写至少一个field',
         })
         return false
       }
@@ -164,15 +161,16 @@ export default {
           this.form.structName = toUpperCase(this.form.structName)
           if (this.form.structName == this.form.abbreviation) {
             this.$message({
-                    type:"error",
-                    message:"structName和struct简称不能相同"
+              type: 'error',
+              message: 'structName和struct简称不能相同',
             })
             return false
           }
           const data = await createTemp(this.form)
           const blob = new Blob([data])
           const fileName = 'ginvueadmin.zip'
-            if ('download' in document.createElement('a')) { // 不是IE浏览器
+          if ('download' in document.createElement('a')) {
+            // 不是IE浏览器
             let url = window.URL.createObjectURL(blob)
             let link = document.createElement('a')
             link.style.display = 'none'
@@ -182,15 +180,16 @@ export default {
             link.click()
             document.body.removeChild(link) // 下载完成移除元素
             window.URL.revokeObjectURL(url) // 释放掉blob对象
-            } else { // IE 10+
+          } else {
+            // IE 10+
             window.navigator.msSaveBlob(blob, fileName)
           }
         } else {
-            return false;
-          }
-        });
-        }
+          return false
         }
+      })
+    },
+  },
 }
 </script>
 <style scope lang="scss">