feat: 表单表格显示,属性面板构造

package.json

@@ -24,7 +24,7 @@
     "vue-router": "^3.5.1",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.6.2",
-    "wisdom-ui": "^1.0.1"
+    "wisdom-ui": "1.0.2-beta.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

src/components/generator/config.js

@@ -527,8 +527,8 @@ export const layoutComponents = [
   {
     __config__: {
       label: '按钮',
-      showLabel: true,
-      changeTag: true,
+      showLabel: false,
+      changeTag: false,
       labelWidth: null,
       tag: 'el-button',
       tagIcon: 'button',
@@ -537,12 +537,12 @@ export const layoutComponents = [
       document: 'https://element.eleme.cn/#/zh-CN/component/button'
     },
     __slot__: {
-      default: '主要按钮'
+      default: '查询'
     },
     type: 'primary',
-    icon: 'el-icon-search',
+    icon: '',
     round: false,
-    size: 'medium',
+    size: 'small',
     plain: false,
     circle: false,
     disabled: false

src/components/generator/wisdomUiComp.js

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2021-09-15 17:46:28
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-18 14:20:04
+ * @LastEditTime: 2021-09-23 16:07:46
  * @Description: wisdom ui 组件
  */
 
@@ -75,5 +75,90 @@ export const wLayoutComponents = [
     inline: true,
     labelWidth: '',
     type: 'default'
+  },
+  {
+    __config__: {
+      layout: 'raw',
+      tagIcon: 'table',
+      tag: 'w-table',
+      document: 'https://element.eleme.cn/#/zh-CN/component/table',
+      span: 24,
+      formId: 101,
+      renderKey: 1595761764203,
+      componentName: 'row101',
+      showLabel: true,
+      changeTag: true,
+      labelWidth: null,
+      label: '表格',
+      dataType: 'static',
+      // method: 'get',
+      // dataPath: 'list',
+      // dataConsumer: 'data',
+      // url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
+      children: [{
+        __config__: {
+          layout: 'raw',
+          tag: 'el-table-column',
+          renderKey: 15957617660153
+        },
+        prop: 'date',
+        label: '日期'
+      }, {
+        __config__: {
+          layout: 'raw',
+          tag: 'el-table-column',
+          renderKey: 15957617660152
+        },
+        prop: 'address',
+        label: '地址'
+      }, {
+        __config__: {
+          layout: 'raw',
+          tag: 'el-table-column',
+          renderKey: 15957617660151
+        },
+        prop: 'name',
+        label: '名称'
+      }, {
+        __config__: {
+          layout: 'raw',
+          tag: 'el-table-column',
+          renderKey: 1595774496335,
+          children: [
+            {
+              __config__: {
+                label: '按钮',
+                tag: 'el-button',
+                tagIcon: 'button',
+                layout: 'raw',
+                renderKey: 1595779809901
+              },
+              __slot__: {
+                default: '主要按钮'
+              },
+              type: 'primary',
+              icon: 'el-icon-search',
+              round: false,
+              size: 'medium'
+            }
+          ]
+        },
+        label: '操作'
+      }]
+    },
+    data: {
+      list: [],
+      pageSize: 20,
+      pageNum: 1,
+      total: 0
+    },
+    directives: [{
+      name: 'loading',
+      value: false
+    }],
+    border: true,
+    type: 'default',
+    justify: 'start',
+    align: 'top'
   }
 ]

src/views/app/components/AttributePanel/AttributePanel.vue

@@ -8,7 +8,7 @@
 <template>
   <div class="attribute-panel">
     <form-attribute-panel
-      :show-field="!!dragList.length"
+      :show-field="true"
       :active-data="activeData"
       :form-conf="formConf"
       @fetch-data="fetchData"

src/views/app/components/AttributePanel/FormAttributePanel.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2021-09-17 15:19:48
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-18 10:07:12
+ * @LastEditTime: 2021-09-23 16:39:34
  * @Description: 表单属性面包
 -->
 <template>
@@ -14,7 +14,7 @@
     <div class="field-box">
       <el-scrollbar class="right-scrollbar">
         <!-- 组件属性 -->
-        <el-form v-if="currentTab==='field' && showField" size="small" label-width="90px">
+        <el-form v-if="currentTab==='field' && showField && activeData.__config__" size="small" label-width="90px">
           <el-form-item v-if="activeData.__vModel__!==undefined" label="字段名">
             <el-input v-model="activeData.__vModel__" placeholder="请输入字段名（v-model）" />
           </el-form-item>
@@ -228,6 +228,7 @@
               <el-option label="danger" value="danger" />
               <el-option label="info" value="info" />
               <el-option label="text" value="text" />
+              <el-option label="默认" value="" />
             </el-select>
           </el-form-item>
           <el-form-item
@@ -243,6 +244,12 @@
           >
             <el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字" />
           </el-form-item>
+          <el-form-item
+            v-if="activeData['icon']!==undefined && activeData.__config__.tag === 'el-button'"
+            label="按钮图标"
+          >
+            <el-input v-model="activeData['icon']" placeholder="请输入按钮图标名称" />
+          </el-form-item>
           <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
             <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
           </el-form-item>

src/views/app/components/WisdomUiPanel/WisdomUiPanel.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2021-09-15 16:03:17
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-18 15:14:43
+ * @LastEditTime: 2021-09-23 15:55:57
  * @Description:
 -->
 <template>
@@ -86,7 +86,7 @@ export default {
     // 拖动组件后，给组件数据添加额外属性
     createIdAndKey(item) {
       const config = item.__config__
-      config.formId = this.activeId
+      config.formId = ++this.activeId
       config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
       if (config.layout === 'colFormItem') {
         item.__vModel__ = `field${this.activeId}`

src/views/app/editor/EditorArea/EditorArea.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2021-09-16 10:55:40
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-23 11:16:31
+ * @LastEditTime: 2021-09-23 17:08:47
  * @Description:
 -->
 <template>
@@ -97,6 +97,9 @@ export default {
     height: 100%;
     .drag-board {
       height: 500px;
+      .w-table {
+        padding: 0 20px 20px;
+      }
       .active-from-item {
         background: @selectedColor;
         border-radius: 6px;
@@ -114,21 +117,11 @@ export default {
         position: relative;
         cursor: move;
         box-sizing: border-box;
-        border: 1px dashed #ccc;
-        border-radius: 3px;
         padding: 0 2px;
-        margin-bottom: 15px;
-        margin-bottom: 2px;
+        margin: 0 20px;
         .el-col{
           margin-top: 22px;
         }
-        .el-form-item{
-          margin-bottom: 0;
-        }
-        .drag-wrapper{
-          min-height: 80px;
-          padding: 8px
-        }
         .component-name{
           top: 0;
           left: 0;
@@ -143,6 +136,11 @@ export default {
     }
     .drawing-form-item {
       &:hover {
+        border: 1px dashed #ccc;
+        border-radius: 3px;
+        .drag-wrapper {
+          padding: 8px;
+        }
         & > .drawing-item-copy, & > .drawing-item-delete{
           display: initial;
         }

src/views/app/editor/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-08-20 09:10:36
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-23 10:15:22
+ * @LastEditTime: 2021-09-23 15:19:06
  * @Description: 编辑器
 -->
 <template>
@@ -36,6 +36,7 @@
     </div>
     <div class="editor-main">
       <editor-area
+        ref="editorArea"
         :active-id="activeId"
         @active-item="handleActiveItem"
       />

yarn.lock

@@ -8013,9 +8013,9 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-wisdom-ui@^1.0.1:
-  version "1.0.1"
-  resolved "http://nexus.wisdomcity.com.cn/repository/wisdomcity-npm-group/wisdom-ui/-/wisdom-ui-1.0.1.tgz#fe379e11959b19d09f18d40800457176547555fe"
+wisdom-ui@1.0.2-beta.14:
+  version "1.0.2-beta.14"
+  resolved "http://nexus.wisdomcity.com.cn/repository/wisdomcity-npm-group/wisdom-ui/-/wisdom-ui-1.0.2-beta.14.tgz#aa2cafc63d8d8f91286880478e817a3a8b0f46d2"
   dependencies:
     "@riophae/vue-treeselect" "^0.4.0"
     core-js "^3.6.4"