代码生成相关代码

magic-boot-ui/src/components/magic/basic/mb-editor-table.vue

@@ -43,12 +43,17 @@ const props = defineProps({
   operation: {
     type: Boolean,
     default: true
+  },
+  page: {
+    type: Boolean,
+    default: false
   }
 })
 
 const tableOptions = reactive({
   data: props.modelValue,
   cols: [],
+  page: props.page,
   showNo: props.showNo
 })
 

magic-boot-ui/src/components/magic/form/mb-select.vue

@@ -5,7 +5,10 @@
       :key="item.value"
       :label="item.label"
       :value="item.value"
-    />
+    >
+      <span style="float: left">{{ item.label }}</span>
+      <span v-if="showValue" style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.value }}</span>
+    </el-option>
   </el-select>
 </template>
 
@@ -69,6 +72,10 @@ const props = defineProps({
   join: {
     type: Boolean,
     default: true
+  },
+  showValue: {
+    type: Boolean,
+    default: false
   }
 })
 

magic-boot-ui/src/scripts/gen/gen-mb-list.js

@@ -0,0 +1,91 @@
+function gen(groupPath, data){
+    var permissionPrefix = groupPath.replace('/', ':')
+    var html = `
+    <template>
+      <mb-list ref="magicList" v-bind="listOptions" />
+      <mb-dialog ref="formDialog" @confirm-click="magicForm.save($event)" width="50%">
+        <template #content>
+          <mb-form ref="magicForm" @reload="magicList.reload" v-bind="formOptions" />
+        </template>
+      </mb-dialog>
+    </template>
+    <script setup>
+    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: '${permissionPrefix}:save',
+            click: () => {
+                formOptions.detail.formData = null
+                formDialog.value.show()
+            }
+        }],
+        table: {
+            url: '${groupPath}/list',
+            where: {
+    `
+    for(var i in data){
+        var d = data[i]
+        if(d.query){
+            html += `
+                ${d.columnName}: {
+                    label: '${d.columnComment}'
+                },
+            `
+        }
+    }
+    html += `
+            },
+            cols: [
+    `
+    for(var i in data){
+        var d = data[i]
+        if(d.list){
+            html += `
+                {
+                    field: '${d.columnName}',
+                    label: '${d.columnComment}'
+                },
+            `
+        }
+    }
+    html += `
+                {
+                    label: '操作',
+                    type: 'btns',
+                    width: 140,
+                    fixed: 'right',
+                    btns: [
+                        {
+                            permission: '${permissionPrefix}:save',
+                            label: '修改',
+                            type: 'text',
+                            icon: 'ElEdit',
+                            click: (row) => {
+                                magicForm.value.getDetail(row.id)
+                                formDialog.value.show()
+                            }
+                        }, {
+                            permission: '${permissionPrefix}:delete',
+                            label: '删除',
+                            type: 'text',
+                            icon: 'ElDelete',
+                            click: (row) => {
+                                proxy.$common.handleDelete({
+                                    url: '${groupPath}/delete',
+                                    id: row.id,
+                                    done: () => magicList.value.reload()
+                                })
+                            }
+                        }
+                    ]
+                }
+            ]
+    `
+    console.log(html)
+}
+export default gen

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

@@ -1,6 +1,7 @@
 <template>
   <div style="padding: 50px;">
     <el-button type="primary" @click="getData" style="margin-bottom: 10px">获取数据</el-button>
+    <el-button type="primary" @click="gen" style="margin-bottom: 10px">代码生成</el-button>
     <mb-editor-table v-model="tableDatas" :cols="cols" :show-no="false" :operation="false" />
   </div>
 </template>