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>
@@ -71,7 +52,7 @@
     </div>
     <!-- 组件弹窗 -->
     <el-dialog title="组件内容" :visible.sync="dialogFlag">
-                <FieldDialog :dialogMiddle="dialogMiddle" ref="fieldDialog"/>
+      <FieldDialog :dialogMiddle="dialogMiddle" ref="fieldDialog" />
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeDialog">取 消</el-button>
         <el-button type="primary" @click="enterDialog">确 定</el-button>
@@ -80,99 +61,116 @@
   </div>
 </template>
 <script>
-const fieldTemplate={
-            fieldName:"",
-            fieldDesc:"",
-            fieldType:"",
-            fieldJson:"",
-            columnName:"",
-        }
+const fieldTemplate = {
+  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",
-    data(){
-        return{
-            addFlag:"",
-            form:{
-                structName:"",
-                packageName:"",
-                abbreviation:"",
-                autoCreateApiToSql:false,
-                fields:[]
+  name: 'autoCode',
+  data() {
+    return {
+      addFlag: '',
+      form: {
+        structName: '',
+        packageName: '',
+        abbreviation: '',
+        autoCreateApiToSql: false,
+        fields: [],
       },
-            rules:{
-                structName:[{required: true, message: '请输入结构体名称', trigger: 'blur'}],
-                abbreviation:[{required: true, message: '请输入结构体简称', trigger: 'blur'}],
-                packageName:[{required: true, message: '请输入包名称', trigger: 'blur'}]
+      rules: {
+        structName: [{ required: true, message: '请输入结构体名称', trigger: 'blur' }],
+        abbreviation: [{ required: true, message: '请输入结构体简称', trigger: 'blur' }],
+        packageName: [{ required: true, message: '请输入包名称', trigger: 'blur' }],
       },
-            dialogMiddle:{},
-            bk:{},
-            dialogFlag:false
+      dialogMiddle: {},
+      bk: {},
+      dialogFlag: false,
     }
   },
-    components:{
-        FieldDialog
+  components: {
+    FieldDialog,
   },
-    methods:{
-        editAndAddField(item){
+  methods: {
+    editAndAddField(item) {
       this.dialogFlag = true
-            if(item){
-                this.addFlag="edit"
-                 this.bk=JSON.parse(JSON.stringify(item))
+      if (item) {
+        this.addFlag = 'edit'
+        this.bk = JSON.parse(JSON.stringify(item))
         this.dialogMiddle = item
-            }else{
-                this.addFlag="add"
+      } else {
+        this.addFlag = 'add'
         this.dialogMiddle = JSON.parse(JSON.stringify(fieldTemplate))
       }
     },
-        enterDialog(){
+    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"){
+    closeDialog() {
+      if (this.addFlag == 'edit') {
         this.dialogMiddle = this.bk
       }
       this.dialogFlag = false
     },
-        deleteField(index){
-            this.form.fields.splice(index,1)
+    deleteField(index) {
+      this.form.fields.splice(index, 1)
     },
-        async enterForm(){
-            if(this.form.fields.length<=0){
+    async enterForm() {
+      if (this.form.fields.length <= 0) {
         this.$message({
-                    type:"error",
-                    message:"请填写至少一个field"
+          type: 'error',
+          message: '请填写至少一个field',
         })
         return false
       }
       this.$refs.autoCodeForm.validate(async (valid) => {
         if (valid) {
           this.form.structName = toUpperCase(this.form.structName)
-            if(this.form.structName == this.form.abbreviation){
+          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">