feat: 新增子表单组件,支持行内编辑.调整代码格式等

BoBoooooo · Jan 4, 2021 · 6f3ad48 · 6f3ad48
1 parent e2996e1
commit 6f3ad48
Show file tree

Hide file tree

Showing 11 changed files with 1,111 additions and 638 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 200,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always"
+}
diff --git a/examples/api/axios.ts b/examples/api/axios.ts
@@ -76,7 +76,7 @@ service.interceptors.response.use(
     // http状态码200以外的情况
     // 请检查网络链接或联系管理员
     const msg = '请检查网络链接或联系管理员。';
-    ElMessageBox.alert(`${error.message}，${msg}`, '网络异常', {
+    ElMessageBox.alert(error.response.data.message, '服务器异常', {
       confirmButtonText: '重试',
       type: 'warning',
     }).then(() => {

diff --git a/packages/form-designer/src/FormDesignerDialog.vue b/packages/form-designer/src/FormDesignerDialog.vue
@@ -143,11 +143,11 @@
         </el-header>
         <!-- 中间区域中央设计区域，data:widgetForm用于保存生成后的json -->
         <el-main :class="{ 'widget-empty': widgetForm.list.length == 0 }">
-          <widget-form
+          <WidgetForm
             ref="widgetForm"
             :data="widgetForm"
             :select.sync="widgetFormSelect"
-          ></widget-form>
+          ></WidgetForm>
         </el-main>
       </el-container>
       <!-- 右侧边栏 -->
@@ -170,14 +170,14 @@
             </div>
           </el-header>
           <el-main class="config-content">
-            <widget-config
+            <WidgetConfig
               v-show="configTab == 'widget'"
-              :data="widgetFormSelect"
-            ></widget-config>
-            <form-config
+              :elementConfig="widgetFormSelect"
+            ></WidgetConfig>
+            <FormConfig
               v-show="configTab == 'form'"
               :data="widgetForm.config"
-            ></form-config>
+            ></FormConfig>
           </el-main>
         </el-container>
       </el-aside>
@@ -364,7 +364,7 @@ export default {
         },
       },
       configTab: 'widget',
-      widgetFormSelect: '',
+      widgetFormSelect: null,
       // 预览 对话框显示/隐藏
       previewVisible: false,
       // 生成json 对话框显示/隐藏
@@ -580,7 +580,7 @@ export default {
         };
       }
       // 初始化右侧的配置区域
-      this.widgetFormSelect = '';
+      this.widgetFormSelect = {};
       // 请求数据库所有表名
       if (this.$PROCRUD.getTables) {
         const { data } = await this.$PROCRUD.getTables();

diff --git a/packages/form-designer/src/GenerateFormItem.vue b/packages/form-designer/src/GenerateFormItem.vue
@@ -301,6 +301,9 @@
                   showPagination
                   :resourceid="models[widget.options.resourceId]"></FileUpload>
     </template>
+    <template v-if="widget.type === 'form'">
+      <GenerateSubForm :widget="widget"></GenerateSubForm>
+    </template>
   </el-form-item>
 </template>
 
@@ -312,6 +315,8 @@ import TreeSelect from '@riophae/vue-treeselect';
 import { DML } from '@/types/common';
 import Tinymce from './components/Tinymce/index.vue'; // 富文本编辑器
 import FileUpload from './components/FileUpload/FileUpload.vue';
+import GenerateSubForm from './components/SubForm/GenerateSubForm.vue';
+
 // 高级查询单个查询内容
 import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 
@@ -320,6 +325,11 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css';
     TreeSelect,
     Tinymce,
     FileUpload,
+    GenerateSubForm,
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
   },
   name: 'GenerateFormItem',
 })
@@ -358,6 +368,14 @@ export default class GenerateFormItem extends Vue {
   })
   readOnly: any;
 
+  // 子表单单个组件value
+  @Prop()
+  value: any;
+
+  // 子表单单个组件初始值model
+  @Prop()
+  model: any;
+
   // 当前组件对象
   dataModel: string | number | null | object = this.models[this.widget.model] || null;
 
@@ -368,6 +386,15 @@ export default class GenerateFormItem extends Vue {
   normalizer: any;
 
   initData() {
+    // 如果是子表单
+    if (this.model) {
+      if (this.widget.options.multiple || 'cascader,checkbox'.includes(this.widget.type)) {
+        this.dataModel = typeof this.model === 'string' ? this.model.split(',') : this.model;
+      } else {
+        this.dataModel = this.model;
+      }
+      return;
+    }
     let normalizer;
     if (this.widget.type === 'treeselect') {
       const { value, label } = this.widget.options.props;
@@ -378,8 +405,8 @@ export default class GenerateFormItem extends Vue {
         }
         // 此处暂时写反了...暂时不做修改
         return {
-          id: node[label],
-          label: node[value],
+          id: node[value],
+          label: node[label],
         };
       };
     }
@@ -689,6 +716,7 @@ export default class GenerateFormItem extends Vue {
   @Watch('dataModel')
   dataModelHandler(val) {
     this.$set(this.models, this.widget.model, val);
+    this.$emit('change', val);
   }
 
   @Watch('models', {