完善附件上传组件加入附件分类优化表单设计器细节

BoBoooooo · Feb 8, 2019 · f8c0a11 · f8c0a11
1 parent 5f6df47
commit f8c0a11
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 66 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,11 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>AnshareAdmin</title>
-    <style>
-      html,body{margin:0}
-      a{text-decoration: none;color:black}
-    </style>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
   </head>
   <body>
 

diff --git a/src/api/Public/file.js b/src/api/Public/file.js
@@ -1,12 +1,13 @@
 import fetch from '@/utils/fetch'
 
-export function upload(MasterID) {
+export function upload(data) {
   return fetch({
     url: '/file/Upload',
     method: 'post',
     contentType: false,
     params: {
-      MasterID,
+      MasterID: data.MasterID,
+      Type: data.Type,
     },
   })
 }
@@ -30,13 +31,13 @@ export function deletefile(AffixID) {
   })
 }
 
-export function GetFileList(MasterID) {
+export function GetFileList(data) {
   return fetch({
     url: '/file/list',
     method: 'post',
-
     params: {
-      MasterID,
+      MasterID: data.MasterID,
+      Type: data.Type,
     },
   })
 }
diff --git a/src/components/CommonTable/index.vue b/src/components/CommonTable/index.vue
@@ -114,8 +114,6 @@ export default {
       this.$emit('handleCurrentChange', this.listQuery)
     },
     handleOperation(eventName, id) {
-      console.log(eventName);
-      console.log(id);
       this.$emit(eventName, id)
     },
   },

diff --git a/src/components/CrudTable/index.vue b/src/components/CrudTable/index.vue
@@ -40,7 +40,6 @@
         ref="generateForm"
         :data="jsonData"
         :value="entity"
-        :upload_params="uploadParams"
       />
 
       <div
@@ -114,17 +113,10 @@ export default {
           },
         ],
       },
-      uploadParams: {
-        Param: {
-          MasterID: '',
-        },
-        IsDetail: false,
-      },
       dialogFormVisible: false,
       dialogStatus: '',
       list: null,
       listLoading: true,
-      filelist: null,
       id: '',
     };
   },
@@ -134,7 +126,6 @@ export default {
     this.getObj();
     GetFormDetail(this.tableName).then((res) => {
       this.jsonData = JSON.parse(res.data.formJson);
-      console.log(this.jsonData);
     });
   },
 
@@ -168,8 +159,6 @@ export default {
 
     New() {
       this.dialogStatus = 'create';
-      this.uploadParams.Param.MasterID = '';
-      this.filelist = null;
       this.dialogFormVisible = true;
       Object.keys(this.entity).forEach((k) => {
         this.entity[k] = ''
@@ -209,8 +198,6 @@ export default {
       }).then((response) => {
         this.fetchData(this.listQuery);
         this.entity = response.data;
-        this.id = id;
-        this.uploadParams.Param.MasterID = id;
         this.dialogFormVisible = true;
       });
     },
@@ -242,7 +229,7 @@ export default {
         .getData()
         .then((data) => {
           this.entity = data;
-          this.entity.id = this.id;
+          // this.entity.id = this.id;
           this.axios({
             url: `/${this.tableName}/update`,
             method: 'post',

diff --git a/src/components/FormDesigner/GenerateForm.vue b/src/components/FormDesigner/GenerateForm.vue
@@ -26,27 +26,19 @@
                 <genetate-form-item
                   :key="citem.key"
                   :models.sync="models"
-                  :remote="remote"
                   :rules="rules"
                   :widget="citem"/>
               </template>
             </el-col>
           </el-row>
         </template>
-
-        <template v-else-if="item.type == 'upload'">
-          <upload-affix
-            :key="item.key"
-            :params="upload_params||item.options.uploadParams"/>
-        </template>
-
         <template v-else>
           <genetate-form-item
             :key="item.key"
             :models.sync="models"
             :rules="rules"
             :widget="item"
-            :remote="remote"/>
+            />
         </template>
 
       </template>
@@ -58,22 +50,16 @@
 // 常规组件
 import GenetateFormItem from './GenerateFormItem';
 
-// /自定义组件
-import UploadAffix from '@/components/UploadAffix'; // 上传模块
-
 export default {
   name: 'FmGenerateForm',
   components: {
     GenetateFormItem,
-    UploadAffix,
   },
-  props: ['data', 'remote', 'value', 'disabled', 'upload_params'],
+  props: ['data', 'value', 'disabled', 'clear'],
   // data 初始化表单
-  // remote 异步远程请求方法
   // value 表单赋值
   // clear 清空表单
   // disabled 表单只读
-  // upload_params 自定义 文件上传模块的参数
   data() {
     return {
       models: {},
@@ -94,6 +80,19 @@ export default {
   },
   methods: {
     generateModle(genList) {
+      // 添加一个ID隐藏域
+      const obj = {
+        model: 'id',
+        type: 'hidden',
+        options: {
+          defaultValue: '',
+          remote: false,
+        },
+        rules: [],
+      }
+
+      genList.push({ ...obj })
+      console.log(genList)
       for (let i = 0; i < genList.length; i++) {
         if (genList[i].type === 'grid') {
           genList[i].columns.forEach((item) => {
@@ -102,16 +101,11 @@ export default {
         } else {
           if (Object.keys(this.value).indexOf(genList[i].model) >= 0) {
             this.models[genList[i].model] = this.value[genList[i].model];
-          } else if (genList[i].type === 'blank') {
-            this.models[genList[i].model] = genList[i].options.defaultType === 'String'
-              ? ''
-              : genList[i].options.defaultType === 'Object'
-                ? {}
-                : [];
           } else {
             this.models[genList[i].model] = genList[i].options.defaultValue;
           }
 
+
           if (this.rules[genList[i].model]) {
             this.rules[genList[i].model] = [
               ...this.rules[genList[i].model],

diff --git a/src/components/FormDesigner/GenerateFormItem.vue b/src/components/FormDesigner/GenerateFormItem.vue
@@ -166,19 +166,25 @@
                 <Tinymce  :height="400"  v-model="dataModel"></Tinymce>
 
     </template>
+      <template v-if="widget.type == 'upload'">
+          <upload-affix
+            :params="widget.options.uploadParams"/>
+        </template>
 
 
   </el-form-item>
 </template>
 
 <script>
 import Tinymce from '@/components/Tinymce' // 富文本编辑器
+import UploadAffix from '@/components/UploadAffix'; // 上传模块
 
 export default {
   components: {
     Tinymce,
+    UploadAffix,
   },
-  props: ['widget', 'models', 'rules', 'remote'],
+  props: ['widget', 'models', 'rules'],
   data() {
     return {
       dataModel: this.models[this.widget.model],
@@ -197,20 +203,16 @@ export default {
     },
     models: {
       deep: true,
+      immediate: true,
       handler(val) {
         this.dataModel = val[this.widget.model]
+        if (this.widget.options.uploadParams) {
+          this.widget.options.uploadParams.Param.MasterID = this.models.id
+        }
       },
     },
   },
   created() {
-    // if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
-    //   this.remote[this.widget.options.remoteFunc]((data) => {
-    //     this.widget.options.remoteOptions = data.map(item => ({
-    //       value: item[this.widget.options.props.value],
-    //       label: item[this.widget.options.props.label],
-    //     }))
-    //   })
-    // }
     if (this.widget.options.remote && this.widget.options.remoteOptions) {
       if (this.widget.options.remoteFunc !== '') {
         this.axios({

diff --git a/src/components/FormDesigner/WidgetForm.vue b/src/components/FormDesigner/WidgetForm.vue
@@ -43,8 +43,7 @@
                       @add="handleWidgetColAdd($event, element, colIndex)"
                     >
                       <widget-form-item
-                        v-for="(el, i) in col.list"
-                        v-if="el.key"
+                        v-for="(el, i) in col.list.filter(item=>item.key===true)"
                         :key="el.key"
                         :element="el"
                         :select.sync="selectWidget"

diff --git a/src/components/UploadAffix/index.vue b/src/components/UploadAffix/index.vue
@@ -89,14 +89,14 @@ export default {
         auth: getToken(),
       },
       listLoading: false,
-      baseUrl: `${process.env.BASE_API}file/upload`,
+      baseUrl: `${process.env.VUE_APP_BASE_URL}file/upload`,
     };
   },
   watch: {
     'Params.Param.MasterID': {
-      handler(id) {
+      handler() {
         this.$nextTick(() => {
-          this.fetchData_File(id);
+          this.fetchData_File(this.Params.Param);
         });
       },
       immediate: true,
@@ -113,18 +113,18 @@ export default {
         type: 'warning',
       }).then(() => {
         deletefile(id).then(() => {
-          this.fetchData_File(id);
+          this.fetchData_File(this.Params.Param);
         });
       });
     },
     uploadSuccess() {
-      this.fetchData_File(this.Params.Param.MasterID);
+      this.fetchData_File(this.Params.Param);
       this.$refs.upload.clearFiles();
     },
-    fetchData_File(id) {
+    fetchData_File(param) {
       this.listLoading = true;
 
-      GetFileList(id).then((response) => {
+      GetFileList(param).then((response) => {
         this.filelist = response.data.list;
         this.listLoading = false;
       });

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -21,6 +21,7 @@ body {
 label {
   font-weight: 700;
 }
+html,body{margin:0}
 
 html {
   height: 100%;
@@ -49,6 +50,7 @@ a:focus,
 a:active {
   outline: none;
 }
+a{text-decoration: none;color:black}
 
 a,
 a:focus,
@@ -172,6 +174,7 @@ code {
 }
 
 
+
 .widget-box{
   background: #fff!important;
   margin-bottom: 1.875rem;

diff --git a/vue.config.js b/vue.config.js
@@ -117,6 +117,8 @@ module.exports = {
   },
 
   configureWebpack: (config) => {
+    config.name = 'AnshareAdmin'
+
     if (process.env.NODE_ENV === 'production') {
       // 为生产环境修改配置...
       if (process.env.npm_lifecycle_event === 'analyze') {