表单设计添加自定义组件模块

BoBoooooo · Nov 7, 2018 · 2f62525 · 2f62525
1 parent 9499a54
commit 2f62525
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 14 deletions.
diff --git a/src/components/FormDesigner/Container.vue b/src/components/FormDesigner/Container.vue
@@ -172,6 +172,8 @@ import 'vue-awesome/icons/toggle-off'
 import 'vue-awesome/icons/sliders-h'
 import 'vue-awesome/icons/regular/image'
 import 'vue-awesome/icons/chalkboard'
+import 'vue-awesome/icons/upload'
+
 import GenerateForm from './GenerateForm'
 // import JSONEditor from 'jsoneditor'
 // import 'jsoneditor/dist/jsoneditor.min.css'

diff --git a/src/components/FormDesigner/GenerateForm.vue b/src/components/FormDesigner/GenerateForm.vue
@@ -24,10 +24,8 @@
           </el-row>
         </template>
 
-        <template v-else-if="item.type == 'blank'">
-          <el-form-item :label="item.name" :prop="item.model" :key="item.key">
-            <slot :name="item.model" :model="models"></slot>
-          </el-form-item>
+        <template v-else-if="item.type == 'upload'">
+          <upload-affix :key="item.key" :Params="upload_params||item.options.uploadParams"></upload-affix>
         </template>
 
         <template v-else>
@@ -40,14 +38,26 @@
 </template>
 
 <script>
+//常规组件
 import GenetateFormItem from './GenerateFormItem'
 
+
+///自定义组件
+import UploadAffix from '@/components/UploadAffix'  //上传模块
+
 export default {
   name: 'fm-generate-form',
   components: {
-    GenetateFormItem
+    GenetateFormItem,
+    UploadAffix
   },
-  props: ['data', 'remote', 'value','clear','disabled'],
+  props: ['data', 'remote', 'value','clear','disabled','upload_params'],  
+   //data 初始化表单
+   //remote 异步远程请求方法
+   //value 表单赋值
+   //clear 清空表单
+   //disabled 表单只读
+   //upload_params 自定义 文件上传模块的参数  
   data () {
     return {
       models: {},

diff --git a/src/components/FormDesigner/WidgetFormItem.vue b/src/components/FormDesigner/WidgetFormItem.vue
@@ -139,10 +139,12 @@
             :style="{width: element.options.width}"
           ></el-slider>
         </template>
-
-        <template v-if="element.type=='blank'">
-          <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">自定义区域</div>
+ <template v-if="element.type=='upload'">
+   <upload-affix :Params="element.options.uploadParams"></upload-affix>
         </template>
+        <!-- <template v-if="element.type=='blank'">
+          <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">自定义区域</div>
+        </template> -->
 
         <el-button title="删除" @click.stop="handleWidgetDelete(index)" class="widget-action-delete" v-if="selectWidget.key == element.key" circle plain type="danger">
           <icon name="regular/trash-alt" style="width: 12px;height: 12px;"></icon>
@@ -173,10 +175,13 @@ import 'vue-awesome/icons/toggle-off'
 import 'vue-awesome/icons/sliders-h'
 import 'vue-awesome/icons/regular/image'
 import 'vue-awesome/icons/chalkboard'
+import UploadAffix from '@/components/UploadAffix'  //上传模块
+
 export default {
   props: ['element', 'select', 'index', 'data'],
   components: {
-    icon
+    icon,
+    UploadAffix
   },
   data () {
     return {

diff --git a/src/components/FormDesigner/componentsConfig.js b/src/components/FormDesigner/componentsConfig.js
@@ -233,6 +233,19 @@ export const advanceComponents = [
     options: {
       defaultType: 'String'
     }
+  },
+  {
+    type: 'upload',
+    name: '文件上传',
+    icon: 'upload',
+    options: {
+      uploadParams: {
+        Param: {
+          MasterID: ""
+        },
+        IsDetail: false
+      }
+    }
   }
 ]
 

diff --git a/src/views/Archive/person_edit.vue b/src/views/Archive/person_edit.vue
@@ -70,15 +70,15 @@
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="80%" >
 
-
 <generate-form
     :data="jsonData"
     ref="generateForm"
     :value="temp_obj"
-    :clear="Clear">
+    :clear="Clear"
+    :upload_params="uploadParams">
 </generate-form>
 
-    <upload-affix :Params="uploadParams" ></upload-affix>
+    <!-- <upload-affix :Params="uploadParams" ></upload-affix> -->
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button v-if="dialogStatus=='create'" type="primary" @click="create">新 增</el-button>

diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tags-view-container">
     <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
-      <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
+      <router-link style="border-radius:4px" ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
         {{tag.title}}
         <span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
       </router-link>