feature:调整前端代码生成器

.env

@@ -1,11 +1,2 @@
 VUE_GITHUB_USER_NAME=test
 VUE_APP_SECRET_KEY=preview
-
-# 租户码
-VUE_APP_TENANT=default
-# 登录验证微服务名称
-VUE_APP_AdminPath=dashoo.opms.admin-0.0.1
-VUE_APP_MicroSrvProxy_API=http://127.0.0.1:9981/
-
-SSO_LOGIN=''
-SSO_HREF=''

.env.development

@@ -0,0 +1,9 @@
+# 租户码
+VUE_APP_TENANT=default
+
+# GateWay地址
+VUE_APP_MicroSrvProxy_API=http://127.0.0.1:9981/
+
+# 登录验证微服务名称
+VUE_APP_AdminPath=dashoo.opms.admin-0.0.1
+

.env.production

@@ -0,0 +1,5 @@
+# 租户码
+VUE_APP_TENANT=default
+# 登录验证微服务名称
+VUE_APP_AdminPath=dashoo.opms.admin-0.0.1
+VUE_APP_MicroSrvProxy_API=http://127.0.0.1:9981/

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "author": "chuzhixin",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build -mode production",
     "lint": "vue-cli-service lint",
     "lint:eslint": "eslint {src,mock}/**/*.{vue,js} --fix",
     "lint:prettier": "prettier {src,mock}/**/*.{html,vue,css,sass,scss,js,md} --write",
@@ -23,6 +23,7 @@
     "jsplumb": "^2.15.6",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
+    "mysql": "^2.18.1",
     "nprogress": "^0.2.0",
     "qs": "^6.10.2",
     "resize-detector": "^0.3.0",

plopfile.js

@@ -1,13 +1,35 @@
-const viewGenerator = require('vab-templates/view/prompt')
-const curdGenerator = require('vab-templates/curd/prompt')
-const componentGenerator = require('vab-templates/component/prompt')
-const mockGenerator = require('vab-templates/mock/prompt')
-const vuexGenerator = require('vab-templates/vuex/prompt')
+const moduleGenerator = require('./template/prompt')
+const mysql = require('mysql')
 
 module.exports = (plop) => {
-  plop.setGenerator('view', viewGenerator)
-  plop.setGenerator('curd', curdGenerator)
-  plop.setGenerator('component', componentGenerator)
-  plop.setGenerator('mock&api', mockGenerator)
-  plop.setGenerator('vuex', vuexGenerator)
+  plop.setHelper('upperCase', (txt) => txt.toUpperCase())
+
+  plop.setHelper('toJson', function (obj) {
+    return JSON.stringify(obj)
+  })
+
+  const connection = mysql.createConnection({
+    host: '192.168.0.252',
+    port: 3306,
+    user: 'root',
+    password: 'Dashoo#190801@ali',
+    database: 'dashoo_crm',
+  })
+  // or do async things inside of an action
+  // eslint-disable-next-line no-unused-vars
+  plop.setActionType('queryTableColumns', function (answers, config, plop) {
+    return new Promise((resolve, reject) => {
+      const sql =
+        'select column_name prop,column_comment label,data_type type,"auto" width,1 sortable from information_schema.columns where table_name=? and table_schema="dashoo_crm"'
+      connection.query(sql, answers['table'], function (err, result) {
+        if (err) {
+          return reject(err)
+        }
+        answers['columns'] = result
+        resolve(result)
+      })
+      connection.end()
+    })
+  })
+  plop.setGenerator('module', moduleGenerator)
 }

template/api.hbs

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/{{ name }}/getList',
+    method: 'get',
+    params,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/{{ name }}/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/{{ name }}/doDelete',
+    method: 'post',
+    data,
+  })
+}

template/edit.hbs

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="500px"
+    @close="close"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="form.title" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/{{moduleName}}/{{ camelCase name }}'
+
+  export default {
+    name: '{{ properCase name }}Edit',
+    data() {
+      return {
+        form: {
+          title: '',
+        },
+        rules: {
+          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>

template/index.hbs

@@ -0,0 +1,172 @@
+<template>
+  <div class="{{ dashCase name }}-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+          添加
+        </el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
+          批量删除
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+       <el-popover popper-class="custom-table-checkbox" trigger="hover">
+          <el-checkbox-group v-model="checkList">
+            <vab-draggable v-bind="dragOptions" :list="columns">
+              <div v-for="(item, index) in columns" :key="item + index">
+                <vab-icon icon="drag-drop-line" />
+                <el-checkbox
+                  :disabled="item.disableCheck === true"
+                  :label="item.label"
+                >
+                  {{ item.label }}
+                </el-checkbox>
+              </div>
+            </vab-draggable>
+          </el-checkbox-group>
+          <template #reference>
+            <el-button
+              icon="el-icon-setting"
+              style="margin: 0 0 10px 0 !important"
+              type="primary"
+            >
+              可拖拽列设置
+            </el-button>
+          </template>
+        </el-popover>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      v-loading="listLoading"
+      border
+      :data="list"
+      :height="$baseTableHeight(1)"
+      @selection-change="setSelectRows"
+    >
+      <el-table-column align="center" show-overflow-tooltip type="selection" />
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        :sortable="item.sortable"
+        :width="item.width"
+      >
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="85">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <edit ref="edit" @fetch-data="fetchData" />
+  </div>
+</template>
+
+<script>
+  import { getList, doDelete } from '@/api/{{moduleName}}/{{ camelCase name }}'
+  import Edit from './components/{{ properCase name }}Edit'
+
+  export default {
+    name: '{{ properCase name }}',
+    components: { Edit },
+    data() {
+      return {
+        checkList: [],
+        columns: [],
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          title: '',
+        },
+      }
+    },
+    computed: {
+      dragOptions() {
+        return {
+          animation: 600,
+          group: 'description',
+        }
+      },
+      finallyColumns() {
+        return this.columns.filter((item) =>
+          this.checkList.includes(item.label)
+        )
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            await this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids })
+              this.$baseMessage(msg, 'success')
+              await this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getList(this.queryForm)
+        const { list, total } = data
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+    },
+  }
+</script>

template/prompt.js

@@ -0,0 +1,79 @@
+const { notEmpty } = require('./utils.js')
+const fs = require('fs')
+const path = require('path')
+
+function getFolder(path) {
+  let components = []
+  const files = fs.readdirSync(path)
+  files.forEach(function (item) {
+    let stat = fs.lstatSync(path + '/' + item)
+    if (stat.isDirectory() === true && item != 'components') {
+      components.push(path + '/' + item)
+      components.push.apply(components, getFolder(path + '/' + item))
+    }
+  })
+  return components
+}
+
+module.exports = {
+  description: '创建前端模块',
+  prompts: [
+    {
+      type: 'list',
+      name: 'path',
+      message: '请选择页面创建目录',
+      choices: getFolder('src/views'),
+    },
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入view名称',
+      validate: notEmpty('name'),
+    },
+    {
+      type: 'input',
+      name: 'table',
+      message: '请输入Table名称',
+      validate: notEmpty('table'),
+    },
+  ],
+  actions: (data) => {
+    let moduleName = path.relative('src/views', data.path)
+    const pathCaseName = '{{ pathCase name }}'
+    const properCaseName = '{{ properCase name }}'
+    const camelCaseName = '{{ camelCase name }}'
+    return [
+      {
+        type: 'queryTableColumns',
+        speed: 'slow',
+      },
+      {
+        type: 'add',
+        path: `src/views/${moduleName}/${pathCaseName}/index.vue`,
+        templateFile: './template/index.hbs',
+        force: true,
+        data: {
+          moduleName: moduleName,
+        },
+      },
+      {
+        type: 'add',
+        path: `src/views/${moduleName}/${pathCaseName}/components/${properCaseName}Edit.vue`,
+        templateFile: './template/edit.hbs',
+        force: true,
+        data: {
+          moduleName: moduleName,
+        },
+      },
+      {
+        type: 'add',
+        path: `src/api/${moduleName}/${camelCaseName}.js`,
+        templateFile: './template/api.hbs',
+        force: true,
+        data: {
+          moduleName: moduleName,
+        },
+      },
+    ]
+  },
+}

template/utils.js

@@ -0,0 +1,6 @@
+exports.notEmpty = (name) => {
+  return (v) => {
+    if (!v || v.trim === '') return `${name}为必填项`
+    else return true
+  }
+}