fix: 修复布局错误/处理接口json

src/components/Headers/Headers.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangJiaCheng
  * @Date: 2021-05-10 16:28:07
- * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-11 18:15:01
+ * @LastEditors: wjc
+ * @LastEditTime: 2021-12-02 17:11:36
  * @Description:
 -->
 <template>
@@ -31,5 +31,6 @@ export default {
     height: 40px;
     background: #fff;
     border-bottom: 1px solid #dcdee2;
+    flex-shrink: 0;
   }
 </style>

src/components/MainContent/MainContent.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangJiaCheng
  * @Date: 2021-05-11 18:15:35
- * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-12 15:35:46
+ * @LastEditors: wjc
+ * @LastEditTime: 2021-12-02 17:14:32
  * @Description:
 -->
 <template>
@@ -28,5 +28,8 @@ export default {
     margin: 8px;
     padding: 12px;
     background: #fff;
+    overflow-y: auto;
+    height: ~"calc(100% - 40px)";
+    flex-grow: 1;
   }
 </style>

src/layouts/DefaultLayout/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-06 17:24:30
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-24 15:12:20
+ * @LastEditTime: 2021-12-02 17:39:38
  * @Description:
 -->
 <template>
@@ -33,7 +33,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
   .default-layout {
     width: 100%;
     height: 100%;
@@ -43,11 +43,15 @@ export default {
     color: #333;
   }
   .layout-main {
-    width: 100%;
-    height: 100%;
     display: flex;
-    justify-content: space-between;
+    position: relative;
+    flex-flow: column;
+    flex-grow: 1;
+    overflow-y: auto;
+    /* justify-content: space-between; */
     padding: 0;
     background: #fff;
+    width: 100%;
+    height: ~"calc(100vh - 40px)";
   }
 </style>

src/views/Page/Edit/ListConfig.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangJiaCheng
  * @Date: 2021-05-12 15:36:33
- * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-07-27 10:17:04
+ * @LastEditors: wjc
+ * @LastEditTime: 2021-12-02 17:41:33
  * @Description:
 -->
 <template>
@@ -29,9 +29,12 @@
           v-model="formData.listApi"
         />
       </el-form-item>
-      <el-form-item label="请求方式">
+      <el-form-item label="接口JSON">
         <el-input
-          v-model="formData.apiMethod"
+          v-model="formData.apiJson"
+          type="textarea"
+          :rows="6"
+          @change="apiJsonInput"
         />
       </el-form-item>
       <el-form-item label="表格列配置">
@@ -111,15 +114,9 @@
               />
             </template>
           </el-table-column>
-          <el-table-column
-            prop="filter"
-            label="表头过滤"
-            width="180"
-          />
           <el-table-column
             prop="edit"
             label="操作"
-            width="180"
           />
         </el-table>
         <el-button
@@ -130,8 +127,12 @@
         </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-button type="primary" @click="next">
+          下一步
+        </el-button>
+        <el-button type="primary" @click="previewCode">
+          预览代码
+        </el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -158,21 +159,27 @@ export default {
           label: '列表2'
         }
       ],
-      tableData: [
-        {
-          type: '',
-          name: '',
-          field: '',
-          minWidth: '',
-          width: '',
-          fixed: false,
-          filter: ''
-        }
-      ]
+      tableData: []
     }
   },
   methods: {
     ...mapMutations('page', ['setListConfig', 'setActiveTab']),
+    apiJsonInput(data) {
+      if (data) {
+        const formatApiJson = JSON.parse(data)
+        const resBody = JSON.parse(formatApiJson.res_body)
+        const { properties: { list: { items: { properties: propertyDta = {} } } } } = resBody
+        if (propertyDta) {
+          for (const key of Object.keys(propertyDta)) {
+            this.tableData.push({
+              type: propertyDta[key].type,
+              name: propertyDta[key].description.replace(/\((.+)\)/g, ''),
+              field: key
+            })
+          }
+        }
+      }
+    },
     next() {
       this.setListConfig({ ...this.formData, list: this.tableData })
       this.setActiveTab('detail')

src/views/Page/Edit/index.vue

@@ -1,12 +1,12 @@
 <!--
  * @Author: WangJiaCheng
  * @Date: 2021-05-10 17:25:15
- * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-08-20 15:39:14
+ * @LastEditors: wjc
+ * @LastEditTime: 2021-12-02 17:31:18
  * @Description:
 -->
 <template>
-  <div>
+  <div class="render-code">
     <headers
       title="代码生成"
     />
@@ -93,3 +93,15 @@ export default {
   }
 }
 </script>
+
+<style lang="less">
+  .render-code {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: auto;
+    flex: 1;
+  }
+</style>

src/views/dashboard/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangJiaCheng
  * @Date: 2021-05-07 12:09:58
- * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-08-20 17:58:46
+ * @LastEditors: wjc
+ * @LastEditTime: 2021-11-16 18:12:19
  * @Description:
 -->
 <template>
@@ -60,6 +60,9 @@ export default {
 </script>
 
 <style lang="less">
+  .dashboard {
+    width: 100%;
+  }
   .entry {
     margin: 20px auto;
     width: 90%;

vue.config.js

@@ -44,6 +44,16 @@ module.exports = {
     }
   },
   devServer: {
+    proxy: {
+      '/api': {
+        target: 'https://wy-test.huiguanjia.cn/9ad134a361f8d778/', // 对应自己的接口
+        changeOrigin: true,
+        ws: false,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    },
     overlay: {
       // 错误信息显示到浏览器上
       warnings: false,