Merge pull request #100 from DaiZero/master

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

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

@@ -1,196 +1,195 @@
 <template>
-    <div>
-        <!-- 初始版本自动化代码工具 -->
-        <el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true">
-            <el-form-item label="Struct名称" prop="structName">
-                <el-input v-model="form.structName" placeholder="首字母自动转换大写"></el-input>
-            </el-form-item>
-            <el-form-item label="Struct简称" prop="abbreviation">
-                <el-input v-model="form.abbreviation" placeholder="简称会作为入参对象名和路由group"></el-input>
-            </el-form-item>
-            <el-form-item label="文件名称" prop="packageName">
-                <el-input v-model="form.packageName"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-checkbox v-model="form.autoCreateApiToSql">自动创建api</el-checkbox>
-            </el-form-item>
-        </el-form>
-        <!-- 组件列表 -->
-        <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-column>
-            <el-table-column
-                prop="fieldName"
-                label="Field名"
-                width="280">
-            </el-table-column>
-             <el-table-column
-                prop="fieldDesc"
-                label="中文名"
-                width="280">
-            </el-table-column>
-            <el-table-column
-                prop="fieldJson"
-                label="FieldJson"
-                width="280">
-            </el-table-column>
-            <el-table-column
-                prop="fieldType"
-                label="Field数据类型"
-                width="280">
-            </el-table-column>
-            <el-table-column
-                label="操作">
-                <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>
-                    <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>
-                    </div>
-                    <el-button type="danger" slot="reference">删除</el-button>
-                    </el-popover>
-                </template>
-            </el-table-column>
-            </el-table>
-            <!-- 组件列表 -->
-        <div class="button-box clearflex">
-            <el-button @click="enterForm" type="primary">生成代码包</el-button>
-        </div>
-    <!-- 组件弹窗 -->
-            <el-dialog title="组件内容" :visible.sync="dialogFlag">
-                <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>
-                </div>
-            </el-dialog>
+  <div>
+    <!-- 初始版本自动化代码工具 -->
+    <el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true">
+      <el-form-item label="Struct名称" prop="structName">
+        <el-input v-model="form.structName" placeholder="首字母自动转换大写"></el-input>
+      </el-form-item>
+      <el-form-item label="Struct简称" prop="abbreviation">
+        <el-input v-model="form.abbreviation" placeholder="简称会作为入参对象名和路由group"></el-input>
+      </el-form-item>
+      <el-form-item label="文件名称" prop="packageName">
+        <el-input v-model="form.packageName"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox v-model="form.autoCreateApiToSql">自动创建api</el-checkbox>
+      </el-form-item>
+    </el-form>
+    <!-- 组件列表 -->
+    <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="100">
+      </el-table-column>
+      <el-table-column prop="fieldName" label="Field名">
+      </el-table-column>
+      <el-table-column prop="fieldDesc" label="中文名">
+      </el-table-column>
+      <el-table-column prop="fieldJson" label="FieldJson">
+      </el-table-column>
+      <el-table-column prop="fieldType" label="Field数据类型" width="130">
+      </el-table-column>
+      <el-table-column label="操作" width="250">
+        <template slot-scope="scope">
+          <el-button type="primary" @click="editAndAddField(scope.row)">编辑</el-button>
+          <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>
+            </div>
+            <el-button type="danger" slot="reference">删除</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 组件列表 -->
+    <div class="button-box clearflex">
+      <el-button @click="enterForm" type="primary">生成代码包</el-button>
     </div>
+    <!-- 组件弹窗 -->
+    <el-dialog title="组件内容" :visible.sync="dialogFlag">
+      <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>
+      </div>
+    </el-dialog>
+  </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:[]
-            },
-            rules:{
-                structName:[{required: true, message: '请输入结构体名称', trigger: 'blur'}],
-                abbreviation:[{required: true, message: '请输入结构体简称', trigger: 'blur'}],
-                packageName:[{required: true, message: '请输入包名称', trigger: 'blur'}]
-            },
-            dialogMiddle:{},
-            bk:{},
-            dialogFlag:false
+  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' }],
+      },
+      dialogMiddle: {},
+      bk: {},
+      dialogFlag: false,
+    }
+  },
+  components: {
+    FieldDialog,
+  },
+  methods: {
+    editAndAddField(item) {
+      this.dialogFlag = true
+      if (item) {
+        this.addFlag = 'edit'
+        this.bk = JSON.parse(JSON.stringify(item))
+        this.dialogMiddle = item
+      } else {
+        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') {
+            this.form.fields.push(this.dialogMiddle)
+          }
+          this.dialogFlag = false
+        } else {
+          return false
         }
+      })
     },
-    components:{
-        FieldDialog
+    closeDialog() {
+      if (this.addFlag == 'edit') {
+        this.dialogMiddle = this.bk
+      }
+      this.dialogFlag = false
     },
-    methods:{
-        editAndAddField(item){
-            this.dialogFlag = true
-            if(item){
-                this.addFlag="edit"
-                 this.bk=JSON.parse(JSON.stringify(item))
-                 this.dialogMiddle = item
-            }else{
-                this.addFlag="add"
-                this.dialogMiddle = JSON.parse(JSON.stringify(fieldTemplate))
-            }
-        },
-        enterDialog(){
-            this.$refs.fieldDialog.$refs.fieldDialogFrom.validate((valid) => {
-          if (valid) {
-            this.dialogMiddle.fieldName = toUpperCase(this.dialogMiddle.fieldName)
-            if(this.addFlag=="add"){
-                this.form.fields.push(this.dialogMiddle)
-            }
-            this.dialogFlag = false
-          } else {
-            return false;
+    deleteField(index) {
+      this.form.fields.splice(index, 1)
+    },
+    async enterForm() {
+      if (this.form.fields.length <= 0) {
+        this.$message({
+          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) {
+            this.$message({
+              type: 'error',
+              message: 'structName和struct简称不能相同',
+            })
+            return false
           }
-        });
-            
-        },
-        closeDialog(){
-            if(this.addFlag=="edit"){
-                this.dialogMiddle = this.bk
-            }
-            this.dialogFlag = false
-        },
-        deleteField(index){
-            this.form.fields.splice(index,1)
-        },
-        async enterForm(){
-            if(this.form.fields.length<=0){
-                this.$message({
-                    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){
-                this.$message({
-                    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浏览器
-                let url = window.URL.createObjectURL(blob)
-                let link = document.createElement('a')
-                link.style.display = 'none'
-                link.href = url
-                link.setAttribute('download', fileName)
-                document.body.appendChild(link)
-                link.click()
-                document.body.removeChild(link) // 下载完成移除元素
-                window.URL.revokeObjectURL(url) // 释放掉blob对象
-            } else { // IE 10+
-                window.navigator.msSaveBlob(blob, fileName)
-            }
+          const data = await createTemp(this.form)
+          const blob = new Blob([data])
+          const fileName = 'ginvueadmin.zip'
+          if ('download' in document.createElement('a')) {
+            // 不是IE浏览器
+            let url = window.URL.createObjectURL(blob)
+            let link = document.createElement('a')
+            link.style.display = 'none'
+            link.href = url
+            link.setAttribute('download', fileName)
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link) // 下载完成移除元素
+            window.URL.revokeObjectURL(url) // 释放掉blob对象
           } else {
-            return false;
+            // IE 10+
+            window.navigator.msSaveBlob(blob, fileName)
           }
-        });
+        } else {
+          return false
         }
-    }
+      })
+    },
+  },
 }
 </script>
 <style scope lang="scss">
@@ -200,4 +199,4 @@ export default {
     float: right;
   }
 }
-</style>
+</style>