code-gen

magic-boot-ui/src/views/examples/editor-table.vue

@@ -6,31 +6,145 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive,getCurrentInstance } from 'vue'
+import genCode from '@/scripts/gen/gen-mb-list.js'
+const { proxy } = getCurrentInstance()
+const tableDatas = reactive([])
 
-export default {
-  name: 'EditorTable',
-  data() {
-    return {
-      tableDatas: [],
-      cols: [{
-        type: 'input',
-        field: 'name',
-        title: '名称'
-      }, {
-        type: 'select',
-        field: 'role',
-        title: '角色',
-        properties: {
-          type: 'dict_type'
-        }
-      }]
-    }
-  },
-  methods: {
-    getData() {
-      console.log(this.tableDatas)
-    }
+proxy.$get('/code/gen/columns', { tableName: 'sys_user' }).then(res => {
+  var columns = res.data.columns
+  var primary = res.data.primary
+  columns.forEach(it => {
+    tableDatas.push({
+      columnName: it.columnName,
+      columnComment: it.columnComment,
+      dataType: it.dataType
+    })
+  })
+  console.log(tableDatas)
+})
+
+const cols = reactive([{
+  field: 'columnName',
+  label: '列名'
+}, {
+  field: 'columnComment',
+  label: '列说明',
+  component: 'input'
+}, {
+  field: 'dataType',
+  label: '字段类型'
+}, {
+  field: 'save',
+  label: '保存',
+  component: 'switch',
+  width: '80px'
+}, {
+  field: 'list',
+  label: '列表',
+  component: 'switch',
+  width: '80px'
+}, {
+  field: 'query',
+  label: '查询',
+  component: 'switch',
+  width: '80px'
+}, {
+  field: 'where',
+  label: '匹配方式',
+  component: 'select',
+  props: {
+    options: [{
+      label: '=',
+      value: '='
+    },{
+      label: '!=',
+      value: '!='
+    },{
+      label: '>',
+      value: '>'
+    },{
+      label: '>=',
+      value: '>='
+    },{
+      label: '<',
+      value: '<'
+    },{
+      label: '<=',
+      value: '<='
+    },{
+      label: 'Between',
+      value: 'Between'
+    },{
+      label: 'Like',
+      value: 'Like'
+    },{
+      label: '左Like',
+      value: '左Like'
+    },{
+      label: '右Like',
+      value: '右Like'
+    }]
   }
+}, {
+  field: 'required',
+  label: '必填',
+  component: 'switch',
+  width: '80px'
+}, {
+  field: 'component',
+  label: '控件类型',
+  component: 'select',
+  props: {
+    options: [{
+      label: '单行文本框',
+      value: 'input'
+    },{
+      label: '多行文本框',
+      value: 'textarea'
+    },{
+      label: '单选下拉框',
+      value: 'radioSelect'
+    },{
+      label: '多选下拉框',
+      value: 'multipleSelect'
+    },{
+      label: '单选按钮',
+      value: 'radio'
+    },{
+      label: '复选框',
+      value: 'checkbox'
+    },{
+      label: '日期选择',
+      value: 'date'
+    },{
+      label: '日期时间',
+      value: 'datetime'
+    },{
+      label: '图片上传',
+      value: 'uploadImage'
+    },{
+      label: '文件上传',
+      value: 'uploadFile'
+    }]
+  }
+}, {
+  component: 'select',
+  field: 'dictType',
+  label: '字典类型',
+  props: {
+    url: 'dict/all',
+    showValue: true
+  }
+}])
+
+function gen(){
+  genCode('user', tableDatas)
 }
+
+function getData(){
+  console.log(tableDatas)
+}
+
 </script>

magic-boot-ui/src/views/lowcode/code-gen-form.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tab-pane label="基本信息" name="basic">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="分组名称">
+            <el-input v-model="formData.groupName"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-tab-pane>
+    <el-tab-pane label="字段信息" name="field">
+
+    </el-tab-pane>
+    <el-tab-pane label="生成信息" name="gen">
+
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+  import {reactive, ref} from 'vue'
+  const activeName = ref('basic')
+  const formData = reactive({
+    groupName: ''
+  })
+</script>

magic-boot-ui/src/views/lowcode/code-gen-list.vue

@@ -0,0 +1,66 @@
+<template>
+  <mb-list ref="magicList" v-bind="listOptions" />
+  <mb-dialog ref="formDialog" title="配置" @confirm-click="magicForm.save($event)" width="50%">
+    <template #content>
+      <code-gen-form />
+    </template>
+  </mb-dialog>
+</template>
+
+<script setup>
+  import codeGenForm from './code-gen-form.vue'
+  import { ref, reactive, getCurrentInstance } from 'vue'
+  const { proxy } = getCurrentInstance()
+  const formDialog = ref()
+  const magicList = ref()
+  const magicForm = ref()
+  const listOptions = reactive({
+    tools: [{
+      type: 'add',
+      permission: 'code:gen:save',
+      click: () => {
+        formDialog.value.show()
+      }
+    }],
+    table: {
+      url: 'code/gen/list',
+      cols: [
+        {
+          field: 'tableName',
+          label: '表名'
+        },{
+          field: 'tableComment',
+          label: '描述'
+        }, {
+          label: '操作',
+          type: 'btns',
+          width: 140,
+          fixed: 'right',
+          btns: [
+            {
+              permission: 'code:gen:save',
+              label: '修改',
+              type: 'text',
+              icon: 'ElEdit',
+              click: (row) => {
+                formDialog.value.show()
+              }
+            }, {
+              permission: 'code:gen:delete',
+              label: '删除',
+              type: 'text',
+              icon: 'ElDelete',
+              click: (row) => {
+                // proxy.$common.handleDelete({
+                //   url: 'user/delete',
+                //   id: row.id,
+                //   done: () => magicList.value.reload()
+                // })
+              }
+            }
+          ]
+        }
+      ]
+    }
+  })
+</script>