:recycle: 重构代码。 强化表单设计

src/api/gen/gen.js

@@ -92,9 +92,18 @@ export function handleDown(table) {
 }
 
 
-export function getForm(tableName) {
+export function getForm(tableName, dsId) {
   return request({
-    url: '/gen/form/info/' + tableName,
+    url: '/gen/form/info',
+    params: {tableName: tableName, dsId: dsId},
     method: 'get'
   })
 }
+
+export function postForm(formInfo, tableName, dsId) {
+  return request({
+    url: '/gen/form/',
+    method: 'post',
+    data: Object.assign({formInfo, tableName, dsId})
+  })
+}

src/config/env.js

@@ -3,7 +3,7 @@
 const env = process.env
 const baseUrl = ''
 // 图表库为avue和pig2套地址
-const iconfontVersion = ['567566_qo5lxgtishg', '667895_1q6ow8soi2m']
+const iconfontVersion = ['567566_qo5lxgtishg', '667895_w5qqtkhezap']
 const iconfontUrl = '//at.alicdn.com/t/font_$key.css'
 const codeUrl = `${window.location.origin}/code`
 const actUrl = `${window.location.origin}/act/modeler.html?modelId=`

src/const/crud/gen/form.js

@@ -31,11 +31,6 @@ export const tableOption = {
       prop: 'id',
       hide: true,
     },
-    {
-      label: '数据源',
-      prop: 'dsName',
-      search: true
-    },
     {
       label: '表名称',
       prop: 'tableName'
@@ -51,6 +46,7 @@ export const tableOption = {
       label: '表单信息',
       prop: 'formInfo',
       overHidden: true,
+      width: 500,
       type: 'textarea',
       minRows: 3,
       row: true,

src/views/gen/datasource.vue

@@ -39,75 +39,71 @@
   import {formOption, tableDsOption, tableOption} from '@/const/crud/gen/gen'
 
   export default {
-  name: 'CodeGenerator',
-  data() {
-    return {
-      dataSourceList: [],
-      tableDsData: [],
-      box: false,
-      dsPage: {
-        total: 0, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: 20 // 每页显示多少条
-      },
-      dsForm: {},
-      tableLoading: false,
-      tableOption: tableOption,
-      tableDsOption: tableDsOption,
-      formOption: formOption
-    }
-  },
-  created() {
-  },
-  methods: {
-    rowDel: function(row, index) {
-      this.$confirm('是否确认删除ID为' + row.id, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        return delObj(row.id)
-      }).then(() => {
-        this.tableData.splice(index, 1)
-        this.$message.success('删除成功')
-        this.getDsList(this.page)
-      }).catch(function() {
-      })
-    },
-    handleOpenBefore: function(show) {
-      this.dsForm.password = undefined
-      show()
-    },
-    handleUpdate: function(row, index, done) {
-      putObj(row).then(() => {
-        this.tableData.splice(index, 1, Object.assign({}, row))
-        this.$message.success('修改成功')
-        done()
-        this.getDsList(this.page)
-      })
-    },
-    handleSave: function(row, done) {
-      addObj(row).then(() => {
-        this.tableData.push(Object.assign({}, row))
-        this.$message.success('添加成功')
-        done()
-        this.getDsList(this.page)
-      })
+    name: 'CodeGenerator',
+    data() {
+      return {
+        dataSourceList: [],
+        tableDsData: [],
+        box: false,
+        dsPage: {
+          total: 0, // 总页数
+          currentPage: 1, // 当前页数
+          pageSize: 20 // 每页显示多少条
+        },
+        dsForm: {},
+        tableLoading: false,
+        tableOption: tableOption,
+        tableDsOption: tableDsOption,
+        formOption: formOption
+      }
     },
-    getDsList(page, params) {
-      fetchDsList(Object.assign({
-        current: page.currentPage,
-        size: page.pageSize
-      }, params)).then(response => {
-        this.tableDsData = response.data.data.records
-        this.dsPage.total = response.data.data.total
-      })
+    created() {
     },
-    refreshDsChange() {
-      this.getDsList(this.page)
+    methods: {
+      rowDel: function (row, index) {
+        this.$confirm('是否确认删除ID为' + row.id, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function () {
+          return delObj(row.id)
+        }).then(() => {
+          this.$message.success('删除成功')
+          this.getDsList(this.dsPage)
+        })
+      },
+      handleOpenBefore: function (show) {
+        this.dsForm.password = undefined
+        show()
+      },
+      handleUpdate: function (row, index, done) {
+        putObj(row).then(() => {
+          this.$message.success('修改成功')
+          done()
+          this.getDsList(this.dsPage)
+        })
+      },
+      handleSave: function (row, done) {
+        addObj(row).then(() => {
+          this.$message.success('添加成功')
+          done()
+          this.getDsList(this.dsPage)
+        })
+      },
+      getDsList(page, params) {
+        fetchDsList(Object.assign({
+          current: page.currentPage,
+          size: page.pageSize
+        }, params)).then(response => {
+          this.tableDsData = response.data.data.records
+          this.dsPage.total = response.data.data.total
+        })
+      },
+      refreshDsChange() {
+        this.getDsList(this.dsPage)
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>

src/views/gen/design.vue

@@ -10,47 +10,60 @@
 
 
 <script>
-import { getForm } from '@/api/gen/gen'
-import { validatenull } from "../../util/validate";
+  import {getForm, postForm} from '@/api/gen/gen'
+  import {validatenull} from "../../util/validate";
 
-export default {
-  data () {
-    return {
-      box: true,
-      option: {
-        column: []
+  export default {
+    data() {
+      return {
+        box: true,
+        option: {
+          column: []
+        }
       }
-    }
-  },
-  created () {
-    this.getFormInfo()
-  },
-  methods: {
-    handleSubmit (json) {
-      console.log(json)
     },
-    getFormInfo () {
-      let params = this.$route.query;
-      getForm(params.tableName).then(response => {
-        if (!validatenull(response.data.data)) {
-          this.option = JSON.parse(response.data.data.formInfo)
+    created() {
+      this.getFormInfo()
+    },
+    methods: {
+      handleSubmit(json) {
+        let params = this.$route.query;
+        if (validatenull(params)) {
+          return false
         }
-      })
+        let result = JSON.stringify(json)
+        postForm(result, params.tableName, params.dsId).then(response => {
+          this.$message.success('生成并保存成功')
+        })
+      },
+      getFormInfo() {
+        let params = this.$route.query;
+        if (validatenull(params)) {
+          return false
+        }
+        getForm(params.tableName, params.dsId).then(response => {
+          if (!validatenull(response.data.data)) {
+            console.log(response.data.data)
+            this.option = JSON.parse(response.data.data)
+          }
+        })
+      }
     }
   }
-}
 </script>
 <style lang="scss">
-.webapp {
-  background-color: #fff;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  .form-designer {
-    height: 700px;
-  }
-  .form-designer .widget-config-container .el-tabs__header {
+  .webapp {
+    background-color: #fff;
     position: relative;
+    width: 100%;
+    height: 100%;
+
+    .form-designer {
+      height: 800px;
+    }
+
+    .form-designer .widget-config-container .el-tabs__header {
+      position: relative;
+    }
   }
-}
 </style>

src/views/gen/index.vue

@@ -58,6 +58,11 @@
             icon="el-icon-check"
             @click="handleDown(scope.row,scope.index)">生成
           </el-button>
+          <el-button
+            type="text"
+            icon="icon-sheji"
+            @click="handleDesign(scope.row,scope.index)">设计
+          </el-button>
         </template>
       </avue-crud>
 
@@ -71,7 +76,7 @@
             ref="formData"
             :option="formOption"
             v-model="formData"
-            @submit="gen()"/>
+            @submit="gen"/>
         </div>
       </el-dialog>
       <el-dialog
@@ -84,7 +89,7 @@
             ref="formBatchData"
             :option="formBatchOption"
             v-model="formBatchData"
-            @submit="batchGen()"/>
+            @submit="batchGen"/>
         </div>
       </el-dialog>
 
@@ -133,17 +138,20 @@
           this.tableLoading = false
         })
       },
+      handleDesign: function (row) {
+        this.$router.push({path: '/gen/design', query: {tableName: row.tableName, dsId: this.q.id}})
+      },
       handleDown: function (row) {
-        this.$router.push({path: '/gen/design', query: {tableName: row.tableName}})
-        // this.formData.tableName = row.tableName
-        // this.box = true
+        this.formData.tableName = row.tableName
+        this.box = true
       },
       refreshChange() {
         this.getList(this.page)
       },
-      gen() {
+      gen(form,done) {
         this.formData.id = this.q.id
         handleDown(this.formData).then(() => {
+          done()
           this.box = false
         })
       },
@@ -167,9 +175,10 @@
         this.formBatchData.tableName = tableName.join('-')
         this.boxBatch = true
       },
-      batchGen() {
+      batchGen(form,done) {
         this.formBatchData.id = this.q.id
         handleDown(this.formBatchData).then(() => {
+          done()
           this.boxBatch = false
         })
       }