feat: 布局完善,列表配置

src/components/Headers/Headers.vue

@@ -0,0 +1,35 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 16:28:07
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-11 18:15:01
+ * @Description:
+-->
+<template>
+  <div class="headers">
+    {{ title }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Headers',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .headers {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    height: 40px;
+    background: #fff;
+    border-bottom: 1px solid #dcdee2;
+  }
+</style>

src/components/Headers/index.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-11 17:54:09
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-11 17:55:09
+ * @Description:
+ */
+import Headers from './Headers.vue'
+
+export default Headers

src/components/MainContent/MainContent.vue

@@ -0,0 +1,32 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-11 18:15:35
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-12 15:35:46
+ * @Description:
+-->
+<template>
+  <div class="main-content">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainContent',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .main-content {
+    margin: 8px;
+    padding: 12px;
+    background: #fff;
+  }
+</style>

src/components/MainContent/index.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-11 18:15:28
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-12 15:01:34
+ * @Description:
+ */
+import MainContent from './MainContent.vue'
+
+export default MainContent

src/layouts/DefaultLayout/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-06 17:24:30
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-10 16:15:51
+ * @LastEditTime: 2021-05-11 18:16:38
  * @Description:
 -->
 <template>
@@ -52,5 +52,7 @@ export default {
   .layout-main {
     width: 100%;
     height: calc(100% - 60px);
+    padding: 0;
+    background: #e6e6e6;
   }
 </style>

src/views/Page/Edit/FormConfig.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-11 17:37:33
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-12 16:16:05
+ * @Description: 表单配置
+-->
+<template>
+  <div class="form-config">
+    <el-form
+      :model="formData"
+      label-width="100px"
+    >
+      <el-form-item label="表单模型" prop="formModel">
+        <el-select v-model="formData.formModel" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表单模型预览">
+
+      </el-form-item>
+      <el-form-item label="查询接口" prop="searchApi">
+        <el-input v-model="formData.searchApi" />
+      </el-form-item>
+      <el-form-item label="请求方式" prop="apiMethod">
+        <el-input v-model="formData.searchApi" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'FormConfig',
+  components: {
+  },
+  data() {
+    return {
+      formData: {},
+      options: [
+        {
+          value: '1',
+          label: '表单1'
+        },
+        {
+          value: '2',
+          label: '表单2'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/views/Page/Edit/ListConfig.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-12 15:36:33
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-12 17:59:24
+ * @Description:
+-->
+<template>
+  <div class="form-config">
+    <el-form
+      :model="formData"
+      label-width="100px"
+    >
+      <el-form-item label="列表模型" prop="listModel">
+        <el-select v-model="formData.listModel" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- TODO: 是否可以打通yapi接口，提供接口选择 -->
+      <el-form-item label="列表接口">
+        <el-input
+          v-model="formData.listApi"
+        />
+      </el-form-item>
+      <el-form-item label="请求方式">
+        <el-input
+          v-model="formData.apiMethod"
+        />
+      </el-form-item>
+      <el-form-item label="表头列配置">
+        <el-table
+          border
+          :data="tableData"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="type"
+            label="类型"
+            width="180"
+          >
+            <template slot-scope="{row}">
+              <el-select v-model="row.type" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="列名称"
+            width="180"
+          >
+            <template slot-scope="{row}">
+              <el-input
+                v-model="row.name"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="fields"
+            label="列字段"
+            width="180"
+          >
+            <template slot-scope="{row}">
+              <el-input
+                v-model="row.fields"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="minWidth"
+            label="最小宽度"
+            width="180"
+          >
+            <template slot-scope="{row}">
+              <el-input
+                v-model="row.minWidth"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="width"
+            label="宽度"
+            width="180"
+          >
+            <template slot-scope="{row}">
+              <el-input
+                v-model="row.width"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="fixed"
+            label="固定"
+            width="80"
+          >
+            <template slot-scope="{row}">
+              <el-switch
+                v-model="row.fixed"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="filter"
+            label="表头过滤"
+            width="180"
+          />
+          <el-table-column
+            prop="edit"
+            label="操作"
+            width="180"
+          />
+        </el-table>
+        <el-button
+          type="primary"
+          style="margin-top: 8px"
+          @click="addCol"
+        >
+          新增列
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ListConfig',
+  components: {
+  },
+  data() {
+    return {
+      formData: {},
+      options: [
+        {
+          value: '1',
+          label: '列表1'
+        },
+        {
+          value: '2',
+          label: '列表2'
+        }
+      ],
+      tableData: [
+        {
+          type: '',
+          name: '',
+          fields: '',
+          minWidth: '',
+          width: '',
+          fixed: false,
+          filter: ''
+        }
+      ]
+    }
+  },
+  methods: {
+    addCol() {
+      this.tableData.push({
+        type: '',
+        name: '',
+        fields: '',
+        minWidth: '',
+        width: '',
+        fixed: false,
+        filter: ''
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/views/Page/Edit/PageConfig.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-11 11:18:32
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-11 17:18:41
+ * @Description: 页面配置
+-->
+<template>
+  <div class="page-edit">
+    <el-form
+      :model="formData"
+      label-width="100px"
+    >
+      <el-form-item label="页面Tab名称" prop="tabName">
+        <el-input v-model="formData.tabName" />
+      </el-form-item>
+      <el-form-item label="Header 描述" prop="headerDesc">
+        <el-input v-model="formData.headerDesc" />
+      </el-form-item>
+      <el-form-item label="Header 按钮">
+        <el-tag
+          v-for="tag in dynamicTags"
+          :key="tag"
+          closable
+          :disable-transitions="false"
+          @close="handleClose(tag)"
+        >
+          {{ tag }}
+        </el-tag>
+        <el-input
+          v-if="inputVisible"
+          ref="saveTagInput"
+          v-model="inputValue"
+          class="input-new-tag"
+          size="small"
+          @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm"
+        />
+        <el-button v-else class="button-new-tag" size="small" @click="showInput">
+          添加按钮
+        </el-button>
+      </el-form-item>
+      <el-form-item label="路由" prop="route">
+        <el-input v-model="formData.route" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageConfig',
+  data() {
+    return {
+      formData: {},
+      dynamicTags: [],
+      inputVisible: false,
+      inputValue: ''
+    }
+  },
+  methods: {
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+    },
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+    handleInputConfirm() {
+      const { inputValue } = this
+      if (inputValue) {
+        this.dynamicTags.push(inputValue)
+      }
+      this.inputVisible = false
+      this.inputValue = ''
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .page-edit {
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+    .button-new-tag {
+      margin-left: 10px;
+      height: 32px;
+      line-height: 30px;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    .input-new-tag {
+      width: 90px;
+      margin-left: 10px;
+      vertical-align: bottom;
+    }
+  }
+</style>

src/components/Headers/index.vue → src/views/Page/Edit/Preview.vue

@@ -1,19 +1,19 @@
 <!--
  * @Author: WangJiaCheng
- * @Date: 2021-05-10 16:28:07
+ * @Date: 2021-05-12 15:45:40
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-10 16:28:56
+ * @LastEditTime: 2021-05-12 15:46:26
  * @Description:
 -->
 <template>
-  <div>
-    123
+  <div class="preview">
+    预览
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Headers'
+  name: 'Preview'
 }
 </script>
 

src/views/Page/Edit/index.vue

@@ -2,15 +2,61 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-10 17:25:15
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-10 17:25:34
+ * @LastEditTime: 2021-05-12 16:17:33
  * @Description:
 -->
 <template>
-  <div>页面编辑</div>
+  <div>
+    <headers
+      title="页面编辑"
+    />
+    <main-content>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="页面配置" name="first">
+          <page-config />
+        </el-tab-pane>
+        <el-tab-pane label="表单配置" name="second">
+          <form-config />
+        </el-tab-pane>
+        <el-tab-pane label="列表配置" name="third">
+          <list-config />
+        </el-tab-pane>
+        <el-tab-pane label="详情页配置" name="fourth">详情页配置</el-tab-pane>
+        <el-tab-pane label="预览页面" name="preview">
+          <preview />
+        </el-tab-pane>
+      </el-tabs>
+    </main-content>
+  </div>
 </template>
 
 <script>
+import Headers from '@/components/Headers'
+import MainContent from '@/components/MainContent'
+
+import PageConfig from './PageConfig.vue'
+import FormConfig from './FormConfig.vue'
+import ListConfig from './ListConfig.vue'
+import Preview from './Preview.vue'
+
 export default {
-  name: 'PageEdit'
+  name: 'PageEdit',
+  components: {
+    Headers,
+    MainContent,
+    PageConfig,
+    FormConfig,
+    ListConfig,
+    Preview
+  },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+    }
+  }
 }
 </script>