1
0
Эх сурвалжийг харах

perf👌: 升级代码生成工具

zhangwenjian 4 жил өмнө
parent
commit
45a6d02ba9

+ 2 - 1
package.json

@@ -50,7 +50,7 @@
     "awe-dnd": "^0.3.4",
     "axios": "0.21.1",
     "clipboard": "2.0.6",
-    "codemirror": "5.56.0",
+    "codemirror": "5.62.0",
     "core-js": "^3.6.5",
     "driver.js": "0.9.8",
     "dropzone": "5.7.2",
@@ -75,6 +75,7 @@
     "uuid": "^8.3.0",
     "viser-vue": "^2.4.8",
     "vue": "2.6.11",
+    "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-cropper": "^0.5.5",
     "vue-particles": "^1.0.9",

+ 0 - 72
src/components/JsonEditor/index.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="json-editor">
-    <textarea ref="textarea" />
-  </div>
-</template>
-
-<script>
-import CodeMirror from 'codemirror'
-import 'codemirror/addon/lint/lint.css'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/rubyblue.css'
-require('script-loader!jsonlint')
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/lint/json-lint'
-
-export default {
-  name: 'JsonEditor',
-  /* eslint-disable vue/require-prop-types */
-  props: ['value'],
-  data() {
-    return {
-      jsonEditor: false
-    }
-  },
-  watch: {
-    value(value) {
-      const editorValue = this.jsonEditor.getValue()
-      if (value !== editorValue) {
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
-      }
-    }
-  },
-  mounted() {
-    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
-      lineNumbers: true,
-      mode: 'application/json',
-      gutters: ['CodeMirror-lint-markers'],
-      theme: 'rubyblue',
-      lint: true
-    })
-
-    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
-    this.jsonEditor.on('change', cm => {
-      this.$emit('changed', cm.getValue())
-      this.$emit('input', cm.getValue())
-    })
-  },
-  methods: {
-    getValue() {
-      return this.jsonEditor.getValue()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.json-editor{
-  height: 100%;
-  position: relative;
-}
-.json-editor >>> .CodeMirror {
-  height: auto;
-  min-height: 300px;
-}
-.json-editor >>> .CodeMirror-scroll{
-  min-height: 300px;
-}
-.json-editor >>> .cm-s-rubyblue span.cm-string {
-  color: #F08047;
-}
-</style>

+ 4 - 0
src/main.js

@@ -10,6 +10,10 @@ import './styles/element-variables.scss'
 import '@/styles/index.scss' // global css
 import '@/styles/admin.scss'
 
+import VueCodemirror from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+Vue.use(VueCodemirror)
+
 import App from './App'
 import store from './store'
 import router from './router'

+ 4 - 0
src/styles/admin.css

@@ -207,3 +207,7 @@
 .el-tabs__item {
   font-size: 13px;
 }
+
+.delete-popconfirm{
+  margin-left: 10px;
+  }

+ 3 - 0
src/styles/admin.scss

@@ -289,4 +289,7 @@
 .el-drawer {
   overflow-y: scroll;
   
+}
+.delete-popconfirm{
+margin-left: 10px;
 }

+ 1 - 1
src/styles/variables.css

@@ -7,7 +7,7 @@
   menuLightHover: #f0f1f5;
   subMenuBg: #000c17;
   subMenuHover: #001528;
-  sideBarWidth: 256px;
+  sideBarWidth: 210px;
   sidebarTitle: #ffffff;
   sidebarLightTitle: #001529;
 }

+ 1 - 1
src/styles/variables.scss

@@ -24,7 +24,7 @@ $sidebarLightTitle: #001529;
 $subMenuBg:#000c17;
 $subMenuHover:#001528;
 
-$sideBarWidth: 256px;
+$sideBarWidth: 210px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

+ 25 - 7
src/views/dev-tools/gen/basicInfoForm.vue

@@ -2,17 +2,35 @@
   <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
     <el-row>
       <el-col :span="12">
-        <el-form-item label="表名称" prop="tableName">
+        <el-form-item prop="tableName">
+          <span slot="label">
+            数据表名称
+            <el-tooltip content="数据库表名称,针对gorm对应的table()使用,⚠️这里必须是蛇形结构" placement="top">
+              <i class="el-icon-question" />
+            </el-tooltip>
+          </span>
           <el-input v-model="info.tableName" placeholder="请输入表名称" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="菜单名称" prop="tableComment">
+        <el-form-item prop="tableComment">
+          <span slot="label">
+            菜单名称
+            <el-tooltip content="同步的数据库表名称,生成配置数据时,用作菜单名称" placement="top">
+              <i class="el-icon-question" />
+            </el-tooltip>
+          </span>
           <el-input v-model="info.tableComment" placeholder="请输入菜单名称" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="模型名称" prop="className">
+        <el-form-item prop="className">
+          <span slot="label">
+            结构体模型名称
+            <el-tooltip content="结构体模型名称,代码中的struct名称定义使用" placement="top">
+              <i class="el-icon-question" />
+            </el-tooltip>
+          </span>
           <el-input v-model="info.className" placeholder="请输入" />
         </el-form-item>
       </el-col>
@@ -21,7 +39,7 @@
           <el-input v-model="info.functionAuthor" placeholder="请输入作者名称" />
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <!-- <el-col :span="12">
         <el-form-item prop="isLogicalDelete">
           <span slot="label">
             是否逻辑删除
@@ -40,7 +58,7 @@
         <el-form-item v-if="info.isLogicalDelete == '1'" label="逻辑删除字段" prop="logicalDeleteColumn">
           <el-input v-model="info.logicalDeleteColumn" placeholder="请输入" />
         </el-form-item>
-      </el-col>
+      </el-col> -->
       <el-col :span="24">
         <el-form-item label="备注" prop="remark">
           <el-input v-model="info.remark" type="textarea" :rows="3" />
@@ -63,14 +81,14 @@ export default {
       rules: {
         tableName: [
           { required: true, message: '请输入表名称', trigger: 'blur' },
-          { pattern: /^[a-z\._]*$/g, trigger: 'blur', message: '只允许小写字母,例 sys_demo 格式' }
+          { pattern: /^[a-z\._]*$/g, trigger: 'blur', message: '只允许小写字母,例 sys_demo 格式' }
         ],
         tableComment: [
           { required: true, message: '请输入菜单名称', trigger: 'blur' }
         ],
         className: [
           { required: true, message: '请输入模型名称', trigger: 'blur' },
-          { pattern: /^[A-Z][A-z0-9]*$/g, trigger: 'blur', message: '必须以大写字母开头,例 SysDemo 格式' }
+          { pattern: /^[A-Z][A-z0-9]*$/g, trigger: 'blur', message: '必须以大写字母开头,例 SysDemo 格式' }
         ],
         functionAuthor: [
           { required: true, message: '请输入作者', trigger: 'blur' },

+ 5 - 0
src/views/dev-tools/gen/editTable.vue

@@ -5,6 +5,11 @@
         <basic-info-form ref="basicInfo" :info="info" />
       </el-tab-pane>
       <el-tab-pane label="字段信息" name="cloum">
+        <el-alert
+          title="⚠️表字段中的id、create_by、update_by、created_at、updated_at、deleted_at的字段在此列表中已经隐藏"
+          type="warning"
+          show-icon
+        />
         <el-table :data="columns" :max-height="tableHeight" style="width: 100%">
           <el-table-column fixed label="序号" type="index" width="50" />
           <el-table-column

+ 37 - 27
src/views/dev-tools/gen/genInfoForm.vue

@@ -15,7 +15,7 @@
       <el-col :span="12">
         <el-form-item prop="packageName">
           <span slot="label">
-            指定应用名
+            应用名
             <el-tooltip content="应用名,例如:在app文件夹下将该功能发到那个应用中,默认:admin" placement="top">
               <i class="el-icon-question" />
             </el-tooltip>
@@ -24,19 +24,7 @@
         </el-form-item>
       </el-col>
 
-      <el-col :span="12">
-        <el-form-item prop="moduleName">
-          <span slot="label">
-            服务端文件名
-            <el-tooltip content="服务端项目文件名,例如 sys_user.go" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.moduleName" />
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12">
+      <!-- <el-col :span="12">
         <el-form-item prop="moduleFrontName">
           <span slot="label">
             前端文件名
@@ -46,12 +34,12 @@
           </span>
           <el-input v-model="info.moduleFrontName" />
         </el-form-item>
-      </el-col>
+      </el-col> -->
 
       <el-col :span="12">
         <el-form-item prop="businessName">
           <span slot="label">
-            生成业务名
+            业务名
             <el-tooltip content="可理解为功能英文名,例如 user" placement="top">
               <i class="el-icon-question" />
             </el-tooltip>
@@ -63,8 +51,8 @@
       <el-col :span="12">
         <el-form-item prop="functionName">
           <span slot="label">
-            生成功能名
-            <el-tooltip content="用作类描述,例如 用户" placement="top">
+            功能描述
+            <el-tooltip content="同步的数据库表备注,用作类描述,例如:用户" placement="top">
               <i class="el-icon-question" />
             </el-tooltip>
           </span>
@@ -72,6 +60,26 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <span slot="label">
+            接口路径
+            <el-tooltip content="接口路径,例如:api/v1/{sys-user}" placement="top">
+              <i class="el-icon-question" />
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.moduleName">
+            <template slot="prepend">api/{version}/</template>
+            <template slot="append">...</template>
+          </el-input>
+        </el-form-item>
+        <el-alert
+          title="接口地址示例"
+          description="[get]api/{version}/{接口路径} \r\n [post]"
+          type="success"
+          show-icon
+        />
+      </el-col>
+      <!-- <el-col :span="12">
         <el-form-item prop="isDataScope">
           <span slot="label">
             是否认证
@@ -84,8 +92,8 @@
             <el-option label="false" value="2" />
           </el-select>
         </el-form-item>
-      </el-col>
-      <el-col :span="12">
+      </el-col> -->
+      <!-- <el-col :span="12">
         <el-form-item prop="isDataScope">
           <span slot="label">
             数据权限
@@ -98,8 +106,8 @@
             <el-option label="false" value="2" />
           </el-select>
         </el-form-item>
-      </el-col>
-      <el-col :span="12">
+      </el-col> -->
+      <!-- <el-col :span="12">
         <el-form-item prop="isActions">
           <span slot="label">
             是否actions
@@ -108,11 +116,10 @@
             </el-tooltip>
           </span>
           <el-select v-model="info.isActions" disabled>
-            <!-- <el-option label="true" value="1" /> -->
             <el-option label="false" value="2" />
           </el-select>
         </el-form-item>
-      </el-col>
+      </el-col> -->
     </el-row>
 
     <el-row v-show="info.tplCategory == 'tree'">
@@ -190,13 +197,16 @@ export default {
           { required: true, message: '请选择生成模板', trigger: 'blur' }
         ],
         packageName: [
-          { required: true, message: '请输入生成包路径', trigger: 'blur' }
+          { required: true, message: '请输入生成包路径', trigger: 'blur' },
+          { pattern: /^[a-z]*$/g, trigger: 'blur', message: '只允许小写字母,例如 system 格式' }
         ],
         moduleName: [
-          { required: true, message: '请输入生成模块名', trigger: 'blur' }
+          { required: true, message: '请输入生成模块名', trigger: 'blur' },
+          { pattern: /^[a-z\-]*[a-z]$/g, trigger: 'blur', message: '只允许小写字母,例如 sys-demo 格式' }
         ],
         businessName: [
-          { required: true, message: '请输入生成业务名', trigger: 'blur' }
+          { required: true, message: '请输入生成业务名', trigger: 'blur' },
+          { pattern: /^[a-z][A-Za-z]+$/, trigger: 'blur', message: '校验规则:  只允许输入字母 a-z 或大写 A-Z ,并且小写字母开头' }
         ],
         functionName: [
           { required: true, message: '请输入生成功能名', trigger: 'blur' }

+ 143 - 63
src/views/dev-tools/gen/index.vue

@@ -98,47 +98,71 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button
-
-                type="text"
-                size="small"
-                icon="el-icon-view"
-                @click="handlePreview(scope.row)"
-              >预览</el-button>
-              <el-button
-
                 type="text"
                 size="small"
-                icon="el-icon-view"
-                @click="handleToProject(scope.row)"
-              >代码生成</el-button>
+                icon="el-icon-edit"
+                @click="handleEditTable(scope.row)"
+              >编辑</el-button>
               <el-button
-
                 type="text"
                 size="small"
                 icon="el-icon-view"
-                @click="handleToApiFile(scope.row)"
-              >配置迁移脚本</el-button>
-              <el-button
+                @click="handlePreview(scope.row)"
+              >预览</el-button>
+              <el-popconfirm
+                class="delete-popconfirm"
+                title="正在使用代码生成请确认?"
+                confirm-button-text="生成"
+                @onConfirm="handleToProject(scope.row)"
+              >
+                <el-button
+                  slot="reference"
+                  type="text"
+                  size="small"
+                  icon="el-icon-view"
+                >代码生成</el-button>
+              </el-popconfirm>
 
-                type="text"
-                size="small"
-                icon="el-icon-view"
-                @click="handleToDB(scope.row)"
-              >配置生成</el-button>
-              <el-button
+              <el-popconfirm
+                class="delete-popconfirm"
+                title="正在使用代码生成配置迁移脚本请确认?"
+                confirm-button-text="生成"
+                @onConfirm="handleToApiFile(scope.row)"
+              >
+                <el-button
+                  slot="reference"
+                  type="text"
+                  size="small"
+                  icon="el-icon-view"
+                >配置迁移脚本</el-button>
+              </el-popconfirm>
 
-                type="text"
-                size="small"
-                icon="el-icon-edit"
-                @click="handleEditTable(scope.row)"
-              >编辑</el-button>
-              <el-button
+              <el-popconfirm
+                class="delete-popconfirm"
+                title="正在使用【菜单以及API生成到数据库】请确认?"
+                confirm-button-text="写入DB"
+                @onConfirm="handleToDB(scope.row)"
+              >
+                <el-button
+                  slot="reference"
+                  type="text"
+                  size="small"
+                  icon="el-icon-view"
+                >配置生成</el-button>
+              </el-popconfirm>
 
-                type="text"
-                size="small"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
+              <el-popconfirm
+                class="delete-popconfirm"
+                title="确认删除数据项?"
+                @onConfirm="handleSingleDelete(scope.row)"
+              >
+                <el-button
+                  slot="reference"
+                  type="text"
+                  size="small"
+                  icon="el-icon-delete"
+                >删除</el-button>
+              </el-popconfirm>
             </template>
           </el-table-column>
         </el-table>
@@ -153,9 +177,20 @@
 
       <!-- 预览界面 -->
 
-      <el-dialog :title="preview.title" :visible.sync="preview.open" top="5vh">
+      <el-dialog class="preview" :title="preview.title" :visible.sync="preview.open" fullscreen>
         <div class="el-dialog-container">
-          <el-tabs v-model="preview.activeName">
+          <div class="tag-group">
+            <!-- eslint-disable-next-line vue/valid-v-for -->
+            <el-tag v-for="(value, key) in preview.data" @click="codeChange(key)">
+              <template>
+                {{ key.substring(key.lastIndexOf('/')+1,key.indexOf('.go.template')) }}
+              </template>
+            </el-tag>
+          </div>
+          <div id="codemirror">
+            <codemirror ref="cmEditor" :value="codestr" :options="cmOptions" />
+          </div>
+          <!-- <el-tabs v-model="preview.activeName" tab-position="left">
             <el-tab-pane
               v-for="(value, key) in preview.data"
               :key="key"
@@ -163,14 +198,10 @@
               :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.template'))"
             >
 
-              <pre class="pre">
-                <el-scrollbar>
-                 {{ value }}
-                 </el-scrollbar>
-              </pre>
+              <pre class="pre"/>
 
             </el-tab-pane>
-          </el-tabs>
+            </el-tabs> -->
         </div>
 
       </el-dialog>
@@ -183,12 +214,28 @@
 import { listTable, previewTable, delTable, toDBTable, toProjectTableCheckRole, apiToFile } from '@/api/tools/gen'
 import importTable from './importTable'
 import { downLoadFile } from '@/utils/zipdownload'
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/theme/material-palenight.css'
+
+require('codemirror/mode/javascript/javascript')
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/go/go'
+import 'codemirror/mode/vue/vue'
 
 export default {
   name: 'Gen',
-  components: { importTable },
+  components: { importTable, codemirror },
   data() {
     return {
+      cmOptions: {
+        tabSize: 4,
+        theme: 'material-palenight',
+        mode: 'text/javascript',
+        lineNumbers: true,
+        line: true
+        // more CodeMirror options...
+      },
+      codestr: '',
       // 遮罩层
       loading: true,
       // 唯一标识符
@@ -244,6 +291,22 @@ export default {
       }
       )
     },
+    // onCmCodeChange(newCode) {
+    //   console.log('this is new code', newCode)
+    //   this.code = newCode
+    // },
+    codeChange(e) {
+      if (e.indexOf('js') > -1) {
+        this.cmOptions.mode = 'text/javascript'
+      }
+      if (e.indexOf('model') > -1 || e.indexOf('router') > -1 || e.indexOf('api') > -1 || e.indexOf('service') > -1 || e.indexOf('dto') > -1) {
+        this.cmOptions.mode = 'text/x-go'
+      }
+      if (e.indexOf('vue') > -1) {
+        this.cmOptions.mode = 'text/x-vue'
+      }
+      this.codestr = this.preview.data[e]
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageIndex = 1
@@ -273,38 +336,21 @@ export default {
       previewTable(row.tableId).then(response => {
         this.preview.data = response.data
         this.preview.open = true
+        this.codeChange('template/api.go')
       })
     },
     handleToProject(row) {
-      this.$confirm('正在使用代码生成请确认?', '提示', {
-        confirmButtonText: '生成',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        return toProjectTableCheckRole(row.tableId, false)
-      }).then((response) => {
+      toProjectTableCheckRole(row.tableId, false).then((response) => {
         this.msgSuccess(response.msg)
       }).catch(function() {})
     },
     handleToApiFile(row) {
-      this.$confirm('正在使用代码生成配置迁移脚本请确认?', '提示', {
-        confirmButtonText: '生成',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        return apiToFile(row.tableId, true)
-      }).then((response) => {
+      apiToFile(row.tableId, true).then((response) => {
         this.msgSuccess(response.msg)
       }).catch(function() {})
     },
     handleToDB(row) {
-      this.$confirm('正在使用【菜单以及API生成到数据库】请确认?', '提示', {
-        confirmButtonText: '写入DB',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        return toDBTable(row.tableId)
-      }).then((response) => {
+      toDBTable(row.tableId).then((response) => {
         this.msgSuccess(response.msg)
       }).catch(function() {})
     },
@@ -338,13 +384,25 @@ export default {
           this.msgError(response.msg)
         }
       }).catch(function() {})
+    },
+    handleSingleDelete(row) {
+      const tableIds = row.tableId || this.ids
+      delTable(tableIds).then((response) => {
+        if (response.code === 200) {
+          this.msgSuccess(response.msg)
+          this.open = false
+          this.getList()
+        } else {
+          this.msgError(response.msg)
+        }
+      }).catch(function() {})
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
- .el-dialog-container /deep/{
+ .el-dialog-container ::deep{
    height:600px;
    overflow: hidden;
    .el-scrollbar__view{
@@ -361,4 +419,26 @@ export default {
      display: none;
    }
  }
+ ::deep .el-dialog__body{
+    padding: 0;
+    margin:0;
+  }
+
+   .tag-group .el-tag{
+    margin-left: 10px;
+  }
+
+</style>
+
+<style lang="scss">
+  #codemirror {
+      height: auto;
+      margin: 0;
+      overflow: auto;
+    }
+  .CodeMirror {
+      overflow:auto;
+      border: 1px solid #eee;
+      height: 600px;
+    }
 </style>

+ 3 - 3
src/views/sys-tools/monitor.vue

@@ -42,11 +42,11 @@
               </div>
               <div class="monitor">
                 <div class="monitor-header">
-                  <el-progress :color="$store.state.settings.theme" type="circle" :percentage=" Number(( info.disk.free / info.disk.total * 100).toFixed(2))" />
+                  <el-progress :color="$store.state.settings.theme" type="circle" :percentage=" Number(( (info.disk.total-info.disk.free) / info.disk.total * 100).toFixed(2))" />
                 </div>
                 <div class="monitor-footer">
                   <Cell label="总磁盘" :value="info.disk.total+'G'" border />
-                  <Cell label="已用磁盘" :value="info.disk.free+'G'" />
+                  <Cell label="已用磁盘" :value="info.disk.total-info.disk.free+'G'" />
                 </div>
               </div>
             </el-card>
@@ -74,7 +74,7 @@
             <Cell label="服务器IP" :value="info.os.ip" border />
             <Cell label="系统架构" :value="info.os.arch" border />
             <Cell label="CPU" :value="info.cpu.cpuInfo[0].modelName" border />
-            <Cell label="当前时间" :value="info.os.time"/>
+            <Cell label="当前时间" :value="info.os.time" />
           </div>
         </el-card>