feat: 完成表单列表代码配置

src/components/generator/config.js

@@ -1,6 +1,7 @@
 // 表单属性【右面板】
 export const formConf = {
   formRef: 'elForm',
+  inline: false,
   formModel: 'formData',
   size: 'medium',
   labelPosition: 'right',

src/components/generator/html.js

@@ -49,7 +49,7 @@ function buildFromBtns(scheme, type) {
   let str = ''
   if (scheme.formBtns && type === 'file') {
     str = `<el-form-item size="large">
-          <el-button type="primary" @click="submitForm">提交</el-button>
+          <el-button type="primary" @click="submitForm">查询</el-button>
           <el-button @click="resetForm">重置</el-button>
         </el-form-item>`
     if (someSpanIsNot24) {

src/components/generator/table.js

@@ -0,0 +1,54 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-07-26 14:27:27
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-07-27 15:37:03
+ * @Description: table生成
+ */
+import { exportDefault, titleCase, deepClone } from '@/utils/index'
+
+export function buildTable(formData) {
+  const { list = [] } = formData
+  const child = list.map(item => `<el-table-column prop="${item.field}" label="${item.name}"></el-table-column>`)
+  const str = `<w-table
+    v-loading="tableLoading"
+    :data="tableData"
+    @size-change="sizeChange"
+    @page-change="currentChange"
+  >${child}</w-table>`
+  return str
+}
+
+export function makeTableJs(formData) {
+  const str = `
+    ${exportDefault} {
+    name: 'DataTable',
+    props: {
+      loading: Boolean,
+      tableData: {
+        type: Object,
+        default () {
+          return {
+            list: [],
+            pageSize: 20,
+            pageNum: 1,
+            total: 0
+          }
+        }
+      }
+    },
+    data () {
+      return {
+      }
+    },
+    methods: {
+      sizeChange (pageSize) {
+        this.$emit('page', { pageSize })
+      },
+      currentChange (pageNum) {
+        this.$emit('page', { pageNum })
+      }
+    }
+  }`
+  return str
+}

src/views/Form/FormDesign/Home.vue

@@ -41,6 +41,9 @@
 
     <div class="center-board">
       <div class="action-bar">
+        <el-button icon="el-icon-folder" type="text" @click="save">
+          保存为模板
+        </el-button>
         <el-button icon="el-icon-video-play" type="text" @click="run">
           运行
         </el-button>
@@ -61,6 +64,7 @@
         <el-row class="center-board-row" :gutter="formConf.gutter">
           <el-form
             :size="formConf.size"
+            :inline="formConf.inline"
             :label-position="formConf.labelPosition"
             :disabled="formConf.disabled"
             :label-width="formConf.labelWidth + 'px'"
@@ -418,6 +422,15 @@ export default {
       this.showFileName = false
       this.operationType = 'run'
     },
+    save() {
+      this.AssembleFormData()
+      localStorage.setItem('formModel', JSON.stringify(this.formData))
+      this.$notify({
+        title: '成功',
+        message: '表单已保存为模型',
+        type: 'success'
+      })
+    },
     copy() {
       this.dialogVisible = true
       this.showFileName = false

src/views/Form/FormDesign/RightPanel.vue

@@ -598,6 +598,9 @@
           <el-form-item label="校验模型">
             <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
           </el-form-item>
+          <el-form-item label="行内表单">
+            <el-switch v-model="formConf.inline" />
+          </el-form-item>
           <el-form-item label="表单尺寸">
             <el-radio-group v-model="formConf.size">
               <el-radio-button label="medium">

src/views/Page/Edit/FormConfig.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-11 17:37:33
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-07-16 15:23:32
+ * @LastEditTime: 2021-07-27 17:21:19
  * @Description: 表单配置
 -->
 <template>
@@ -16,14 +16,14 @@
         <el-select v-model="formData.formModel" placeholder="请选择">
           <el-option
             v-for="item in options"
-            :key="item.value"
+            :key="item.label"
             :label="item.label"
             :value="item.value"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="表单模型预览">
-
+        123
       </el-form-item>
       <el-form-item label="查询接口" prop="searchApi">
         <el-input v-model="formData.searchApi" />
@@ -33,6 +33,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="next">下一步</el-button>
+        <el-button type="primary" @click="previewCode">预览代码</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -48,16 +49,16 @@ export default {
   data() {
     return {
       formData: {},
-      options: [
-        {
-          value: '1',
-          label: '表单1'
-        },
-        {
-          value: '2',
-          label: '表单2'
-        }
-      ]
+      options: []
+    }
+  },
+  mounted() {
+    const formModel = localStorage.getItem('formModel')
+    if (formModel) {
+      this.options.push({
+        value: JSON.parse(formModel),
+        label: '表单模型1'
+      })
     }
   },
   methods: {
@@ -69,6 +70,9 @@ export default {
           this.setActiveTab('list')
         }
       })
+    },
+    previewCode() {
+      this.$emit('preview', { ...this.formData, list: this.tableData }, 'form')
     }
   }
 }

src/views/Page/Edit/ListConfig.vue

@@ -2,12 +2,14 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-12 15:36:33
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-12 17:59:24
+ * @LastEditTime: 2021-07-27 10:17:04
  * @Description:
 -->
 <template>
   <div class="form-config">
     <el-form
+      ref="listForm"
+      :rules="rules"
       :model="formData"
       label-width="100px"
     >
@@ -32,7 +34,7 @@
           v-model="formData.apiMethod"
         />
       </el-form-item>
-      <el-form-item label="表头列配置">
+      <el-form-item label="表格列配置">
         <el-table
           border
           :data="tableData"
@@ -55,24 +57,24 @@
             </template>
           </el-table-column>
           <el-table-column
-            prop="name"
-            label="列名称"
+            prop="field"
+            label="列字段"
             width="180"
           >
             <template slot-scope="{row}">
               <el-input
-                v-model="row.name"
+                v-model="row.field"
               />
             </template>
           </el-table-column>
           <el-table-column
-            prop="fields"
-            label="列字段"
+            prop="name"
+            label="列名称"
             width="180"
           >
             <template slot-scope="{row}">
               <el-input
-                v-model="row.fields"
+                v-model="row.name"
               />
             </template>
           </el-table-column>
@@ -121,18 +123,22 @@
           />
         </el-table>
         <el-button
-          type="primary"
           style="margin-top: 8px"
           @click="addCol"
         >
           新增列
         </el-button>
       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="next">下一步</el-button>
+        <el-button type="primary" @click="previewCode">预览代码</el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 
 export default {
   name: 'ListConfig',
@@ -141,6 +147,7 @@ export default {
   data() {
     return {
       formData: {},
+      rules: {},
       options: [
         {
           value: '1',
@@ -155,7 +162,7 @@ export default {
         {
           type: '',
           name: '',
-          fields: '',
+          field: '',
           minWidth: '',
           width: '',
           fixed: false,
@@ -165,11 +172,19 @@ export default {
     }
   },
   methods: {
+    ...mapMutations('page', ['setListConfig', 'setActiveTab']),
+    next() {
+      this.setListConfig({ ...this.formData, list: this.tableData })
+      this.setActiveTab('detail')
+    },
+    previewCode() {
+      this.$emit('preview', { ...this.formData, list: this.tableData }, 'list')
+    },
     addCol() {
       this.tableData.push({
         type: '',
         name: '',
-        fields: '',
+        field: '',
         minWidth: '',
         width: '',
         fixed: false,

src/views/Page/Edit/PageConfig.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-11 11:18:32
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-07-23 15:28:44
+ * @LastEditTime: 2021-07-26 10:47:11
  * @Description: 页面配置
 -->
 <template>
@@ -47,7 +47,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="next">下一步</el-button>
-        <el-button type="primary" @click="previewCode">预览代码</el-button>
+        <el-button type="primary" @click="previewCode">预览入口组件代码</el-button>
       </el-form-item>
     </el-form>
   </div>

src/views/Page/Edit/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-10 17:25:15
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-07-23 15:25:24
+ * @LastEditTime: 2021-07-27 10:23:43
  * @Description:
 -->
 <template>
@@ -18,10 +18,14 @@
           />
         </el-tab-pane>
         <el-tab-pane label="表单配置" name="form">
-          <form-config />
+          <form-config
+            @preview="handlePreview"
+          />
         </el-tab-pane>
         <el-tab-pane label="列表配置" name="list">
-          <list-config />
+          <list-config
+            @preview="handlePreview"
+          />
         </el-tab-pane>
         <el-tab-pane label="详情页配置" name="detail">
           详情页配置
@@ -31,6 +35,7 @@
         </el-tab-pane>
       </el-tabs>
       <preview-code
+        :code-type="codeType"
         :visible.sync="previewVisible"
         :form-data="formData"
         size="80%"
@@ -66,6 +71,7 @@ export default {
   data() {
     return {
       formData: {},
+      codeType: 'page',
       previewVisible: false
     }
   },
@@ -79,8 +85,9 @@ export default {
     handleClick(tab, event) {
       this.setActiveTab(tab.name)
     },
-    handlePreview(d) {
+    handlePreview(d, type = 'page') {
       this.formData = d
+      this.codeType = type
       this.previewVisible = true
     }
   }

src/views/components/previewCode.vue

@@ -73,6 +73,7 @@ import {
   makeUpHtml, vueTemplate, vueScript, cssStyle, makeUpWcHtml
 } from '@/components/generator/html'
 import { makeUpJs, makeUpWcJs } from '@/components/generator/js'
+import { buildTable, makeTableJs } from '@/components/generator/table'
 import { makeUpCss } from '@/components/generator/css'
 import { exportDefault, beautifierConf } from '@/utils/index'
 import loadMonaco from '@/utils/loadMonaco'
@@ -95,6 +96,10 @@ export default {
   name: 'PreviewCode',
   components: {},
   props: {
+    codeType: {
+      type: String,
+      default: 'page'
+    },
     formData: {
       type: Object,
       default() {
@@ -156,9 +161,21 @@ export default {
     },
     onOpen() {
       const { type = 'file' } = this.generateConf
-      this.htmlCode = makeUpWcHtml(this.formData, type)
-      this.jsCode = makeUpWcJs(this.formData, type)
-      this.cssCode = makeUpCss(this.formData)
+      if (this.codeType === 'page') {
+        this.htmlCode = makeUpWcHtml(this.formData, type)
+        this.jsCode = makeUpWcJs(this.formData, type)
+        this.cssCode = makeUpCss(this.formData)
+      }
+      if (this.codeType === 'list') {
+        this.htmlCode = buildTable(this.formData, type)
+        this.jsCode = makeTableJs(this.formData, type)
+        this.cssCode = makeUpCss(this.formData)
+      }
+      if (this.codeType === 'form') {
+        this.htmlCode = makeUpHtml(this.formData.formModel, type)
+        this.jsCode = makeUpJs(this.formData.formModel, type)
+        this.cssCode = makeUpCss(this.formData.formModel)
+      }
 
       loadBeautifier(btf => {
         beautifier = btf