代码生成器优化

src/views/generator/config.vue

@@ -1,119 +1,176 @@
 <template>
-  <el-tabs v-model="activeName" style="padding-left: 5px;">
-    <el-tab-pane label="基本配置" name="first">
-      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px">
-        <el-form-item label="模块名称" prop="moduleName">
-          <el-input v-model="form.moduleName"/>
-        </el-form-item>
-        <el-form-item label="至于包下" prop="pack">
-          <el-input v-model="form.pack"/>
-        </el-form-item>
-        <el-form-item label="前端路径" prop="path">
-          <el-input v-model="form.path"/>
-        </el-form-item>
-        <el-form-item label="作者名称" prop="author">
-          <el-input v-model="form.author"/>
-        </el-form-item>
-        <el-form-item label="去表前缀" prop="prefix">
-          <el-input v-model="form.prefix" placeholder="默认不去除表前缀"/>
-        </el-form-item>
-        <!--        <el-form-item label="Api路径">-->
-        <!--          <el-input v-model="form.apiPath"/>-->
-        <!--        </el-form-item>-->
-        <el-form-item label="是否覆盖" prop="cover">
-          <el-radio-group v-model="form.cover" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-    </el-tab-pane>
-    <el-tab-pane label="字段配置" name="second">
-      <el-form size="small" label-width="90px">
-        <el-table v-loading="loading" :data="data" :height="tableHeight" size="small" style="width: 100%;margin-bottom: 15px">
-          <el-table-column label="序号" width="80" align="center">
-            <template slot-scope="scope">
-              <div>{{ scope.$index + 1 }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="columnName" label="字段名称"/>
-          <el-table-column prop="columnType" label="字段类型"/>
-          <el-table-column prop="columnComment" label="字段描述">
-            <template slot-scope="scope">
-              <el-input v-model="data[scope.$index].columnComment" size="mini" class="edit-input"/>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="columnShow" label="必填">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="data[scope.$index].columnShow"
-                active-color="#409EFF"
-                inactive-color="#F56C6C"
-                active-value="true"
-                inactive-value="false"/>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="columnShow" label="表单">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="data[scope.$index].columnShow"
-                active-color="#409EFF"
-                inactive-color="#F56C6C"
-                active-value="true"
-                inactive-value="false"/>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="columnShow" label="列表">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="data[scope.$index].columnShow"
-                active-color="#409EFF"
-                inactive-color="#F56C6C"
-                active-value="true"
-                inactive-value="false"/>
-            </template>
-          </el-table-column>
-          <el-table-column label="查询方式">
-            <template slot-scope="scope">
-              <el-select v-model="data[scope.$index].columnQuery" class="edit-input" clearable size="mini" placeholder="请选择">
-                <el-option
-                  label="模糊查询"
-                  value="1"/>
-                <el-option
-                  label="精确查询"
-                  value="2"/>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="关联字典">
-            <template slot-scope="scope">
-              <el-select v-model="data[scope.$index].columnQuery" class="edit-input" clearable size="mini" placeholder="请选择">
-                <el-option
-                  label="模糊查询"
-                  value="1"/>
-                <el-option
-                  label="精确查询"
-                  value="2"/>
-              </el-select>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form>
-    </el-tab-pane>
-  </el-tabs>
+  <div class="app-container">
+    <el-row :gutter="15">
+      <!--角色管理-->
+      <el-col style="margin-bottom: 10px">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <span class="role-span">字段配置</span>
+            <el-button
+              :loading="columnLoading"
+              icon="el-icon-check"
+              size="mini"
+              style="float: right; padding: 6px 9px"
+              type="primary"
+              @click="saveColumnConfig">保存</el-button>
+          </div>
+          <el-form size="small" label-width="90px">
+            <el-table v-loading="loading" :data="data" :max-height="tableHeight" size="small" style="width: 100%;margin-bottom: 15px">
+              <el-table-column prop="tableName" label="表名"/>
+              <el-table-column prop="columnName" label="字段名称"/>
+              <el-table-column prop="columnType" label="字段类型"/>
+              <el-table-column prop="remark" label="字段描述">
+                <template slot-scope="scope">
+                  <el-input v-model="data[scope.$index].remark" size="mini" class="edit-input"/>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="必填">
+                <template slot-scope="scope">
+                  <el-checkbox v-model="data[scope.$index].notNull"/>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="列表">
+                <template slot-scope="scope">
+                  <el-checkbox v-model="data[scope.$index].listShow"/>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="表单">
+                <template slot-scope="scope">
+                  <el-checkbox v-model="data[scope.$index].formShow"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="表单类型">
+                <template slot-scope="scope">
+                  <el-select v-model="data[scope.$index].formType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
+                    <el-option
+                      label="文本框"
+                      value="Input"/>
+                    <el-option
+                      label="文本域"
+                      value="Textarea"/>
+                    <el-option
+                      label="单选框"
+                      value="Radio"/>
+                    <el-option
+                      label="下拉框"
+                      value="Select"/>
+                    <el-option
+                      label="复选框"
+                      value="Checkbox"/>
+                    <el-option
+                      label="日期框"
+                      value="Date"/>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="查询方式">
+                <template slot-scope="scope">
+                  <el-select v-model="data[scope.$index].queryType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
+                    <el-option
+                      label="="
+                      value="="/>
+                    <el-option
+                      label="!="
+                      value="!="/>
+                    <el-option
+                      label=">="
+                      value=">="/>
+                    <el-option
+                      label="<="
+                      value="<="/>
+                    <el-option
+                      label="Like"
+                      value="Like"/>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="关联字典">
+                <template slot-scope="scope">
+                  <el-select v-model="data[scope.$index].dictName" filterable class="edit-input" clearable size="mini" placeholder="请选择">
+                    <el-option v-for="item in dicts" :key="item.id" :label="item.remark === '' ? item.name : item.remark" :value="item.name"/>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="实体关联">
+                <template slot-scope="scope">
+                  <el-select v-model="data[scope.$index].joinName" filterable class="edit-input" clearable size="mini" placeholder="请选择">
+                    <el-option
+                      label="模糊查询"
+                      value="1"/>
+                    <el-option
+                      label="精确查询"
+                      value="2"/>
+                  </el-select>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form>
+        </el-card>
+      </el-col>
+      <el-col>
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <span class="role-span">生成配置</span>
+            <el-button
+              :loading="configLoading"
+              icon="el-icon-check"
+              size="mini"
+              style="float: right; padding: 6px 9px"
+              type="primary"
+              @click="doSubmit">保存</el-button>
+          </div>
+          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="78px">
+            <el-form-item label="作者名称" prop="author">
+              <el-input v-model="form.author" style="width: 40%"/>
+              <span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
+            </el-form-item>
+            <el-form-item label="模块名称" prop="moduleName">
+              <el-input v-model="form.moduleName" style="width: 40%"/>
+              <span style="color: #C0C0C0;margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span>
+            </el-form-item>
+            <el-form-item label="至于包下" prop="pack">
+              <el-input v-model="form.pack" style="width: 40%"/>
+              <span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
+            </el-form-item>
+            <el-form-item label="前端路径" prop="path">
+              <el-input v-model="form.path" style="width: 40%"/>
+              <span style="color: #C0C0C0;margin-left: 10px;">输入views文件夹下的目录，不存在即创建</span>
+            </el-form-item>
+            <el-form-item label="去表前缀" prop="prefix">
+              <el-input v-model="form.prefix" placeholder="默认不去除表前缀" style="width: 40%"/>
+              <span style="color: #C0C0C0;margin-left: 10px;">默认不去除表前缀，可自定义</span>
+            </el-form-item>
+            <!--            <el-form-item label="Api路径">-->
+            <!--              <el-input v-model="form.apiPath"/>-->
+            <!--              <span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>-->
+            <!--            </el-form-item>-->
+            <el-form-item label="是否覆盖" prop="cover">
+              <el-radio-group v-model="form.cover" size="mini" style="width: 40%">
+                <el-radio-button label="true">是</el-radio-button>
+                <el-radio-button label="false">否</el-radio-button>
+              </el-radio-group>
+              <span style="color: #C0C0C0;margin-left: 10px;">危险选型，请考虑后选择</span>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
 import initData from '@/mixins/initData'
 import { update, get } from '@/api/genConfig'
+import { save } from '@/api/generator'
+import { getDicts } from '@/api/dict'
 export default {
   name: 'GeneratorConfig',
   components: {},
   mixins: [initData],
   data() {
     return {
-      activeName: 'second', tableName: '', tableHeight: 550,
-      form: { author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '' },
+      activeName: 'first', tableName: '', tableHeight: 550, columnLoading: false, configLoading: false, dicts: [],
+      form: { id: null, tableName: '', author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '' },
       rules: {
         author: [
           { required: true, message: '作者不能为空', trigger: 'blur' }
@@ -134,14 +191,17 @@ export default {
     }
   },
   created() {
-    this.tableHeight = document.documentElement.clientHeight - 260
+    this.tableHeight = document.documentElement.clientHeight - 385
     this.tableName = this.$route.params.tableName
     this.$nextTick(() => {
       this.init()
-      get().then(data => {
+      get(this.tableName).then(data => {
         this.form = data
         this.form.cover = this.form.cover.toString()
       })
+      getDicts().then(data => {
+        this.dicts = data
+      })
     })
   },
   methods: {
@@ -151,19 +211,37 @@ export default {
       this.params = { tableName }
       return true
     },
-    cancel() {
-      this.$refs['form'].resetFields()
+    saveColumnConfig() {
+      this.columnLoading = true
+      save(this.data).then(res => {
+        this.$notify({
+          title: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.columnLoading = false
+      }).catch(err => {
+        this.columnLoading = false
+        console.log(err.response.data.message)
+      })
     },
     doSubmit() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
+          this.configLoading = true
           update(this.form).then(res => {
+            this.$notify({
+              title: '保存成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.form = res
+            this.form.cover = this.form.cover.toString()
+            this.configLoading = false
           }).catch(err => {
-            this.cancel()
+            this.configLoading = false
             console.log(err.response.data.message)
           })
-        } else {
-          return false
         }
       })
     }