优化:组件功能

Bailun.DC.Models/Component/DTO/TableDTO.cs

@@ -57,6 +57,11 @@ namespace Bailun.DC.Models.Component.DTO
         public bool? IsShowSequenceColumn { get; set; }
 
         /// <summary>
+        /// 导入接口
+        /// </summary>
+        public string ImportApi { get; set; }
+
+        /// <summary>
         /// 操作控件位置：NULL/1：换行，2：同行
         /// </summary>
         public int? OperateControlsPosition { get; set; }

Bailun.DC.Models/Component/Entity/dc_component_table.cs

@@ -70,6 +70,11 @@ namespace Bailun.DC.Models.Component.Entity
         public bool is_show_import_button { get; set; }
 
         /// <summary>
+        /// 导入接口
+        /// </summary>
+        public string import_api { get; set; }
+
+        /// <summary>
         /// 操作控件
         /// </summary>
         public string operate_controls { get; set; }

Bailun.DC.Services/Component/TableService.cs

@@ -53,6 +53,7 @@ namespace Bailun.DC.Services.Component
                         IsShowImportButton = entity.is_show_import_button,
                         IsShowSequenceColumn = entity.is_show_sequence_column,
                         OperateControlsPosition = entity.operate_controls_position,
+                        ImportApi = entity.import_api,
                         ColumnType = entity.column_type,
                         ColumnValue = entity.column_value,
                         DataType = entity.data_type,
@@ -539,6 +540,7 @@ namespace Bailun.DC.Services.Component
                     is_show_import_button = dto.IsShowImportButton ?? false,
                     is_show_sequence_column = dto.IsShowSequenceColumn ?? false,
                     is_show_column_search = dto.IsShowColumnSearch ?? false,
+                    import_api = dto.ImportApi,
                     column_type = dto.ColumnType,
                     column_value = dto.ColumnType == ColumnTypeEnum.Config && dto.ListColumn?.Count() > 0 ? JsonConvert.SerializeObject(dto.ListColumn) : dto.ColumnValue,
                     data_type = dto.DataType,

Bailun.DC.Web/Areas/Component/Controllers/TableController.cs

@@ -8,6 +8,7 @@ using System.Linq;
 using System.Collections.Generic;
 using System.IO;
 using System.Text;
+using Microsoft.AspNetCore.Http;
 
 namespace Bailun.DC.Web.Areas.Component.Controllers
 {
@@ -180,6 +181,22 @@ namespace Bailun.DC.Web.Areas.Component.Controllers
             return Json(result);
         }
 
+        [HttpPost]
+        public JsonResult Import(IFormFile file)
+        {
+            ResultDTO result = default(ResultDTO);
+            try
+            {
+                result = new ResultDTO { Result = true };
+            }
+            catch (Exception ex)
+            {
+                result = new ResultDTO() { Message = ex.Message };
+            }
+
+            return Json(result);
+        }
+
         private class IgnoreJsonAttributesResolver : DefaultContractResolver
         {
             private string Id { get; set; }

Bailun.DC.Web/Areas/Component/Views/Form/Control.cshtml

@@ -9,7 +9,8 @@
               v-bind:size="item.size || 'small'"
               v-bind:maxlength="item.maxlength"
               v-bind:type="item.type == 'textarea' ? 'textarea' : 'text'"
-              v-bind:show-word-limit="item.maxlength > 0">
+              v-bind:show-word-limit="item.maxlength > 0"
+              v-bind:readonly="item.readonly == true ? 'readonly' : false">
     </el-input>
     <el-input-number v-else-if="item.type == 'number'"
                      v-model="item_value"
@@ -119,14 +120,24 @@
              v-on:click="$emit('click')">
         {{item.name}}
     </el-link>
-    <el-upload-form ref="upload"
-                    v-else-if="item.type == 'file'"
-                    v-bind:multiple="item.multiple"
-                    v-bind:action="item.api"
-                    v-bind:accept="item.accept"
-                    v-on:upload-success="(response,file) => $emit('upload-success',response,file)"
-                    v-on:change="javaScript.call(this,item.onchange,$event)">
-    </el-upload-form>
+    <el-upload ref="upload" class="el-upload"
+               v-else-if="item.type == 'file'"
+               v-bind:action="item.action"
+               v-bind:data="item.data"
+               v-bind:auto-upload="false"
+               v-bind:show-file-list="false"
+               v-bind:multiple="item.multiple"
+               v-bind:accept="item.accept"
+               v-bind:on-change="onFileChange"
+               v-bind:on-success="onSuccess"
+               v-bind:on-error="onError">
+        <el-button v-bind:icon="item.icon"
+                   v-bind:size="item.size || 'small'"
+                   v-bind:type="item.buttonType"
+                   v-bind:disabled="disabled != null ? disabled :(item.disabled == true || javaScript.call(this,item.disabled))">
+            {{ item.name || '浏览' }}
+        </el-button>
+    </el-upload>
     <el-breadcrumb v-else-if="item.type == 'breadcrumb'"
                    v-bind:size="item.size || 'small'"
                    separator-class="el-icon-arrow-right">

Bailun.DC.Web/Areas/Component/Views/Form/Filter.cshtml

@@ -12,7 +12,10 @@
             <el-form-control v-if="filter.isShowSearchButton" v-bind:item="{type: 'button',name:'查询',buttonType:'primary',icon:'el-icon-search'}" v-on:click="onSearch"></el-form-control>
             <el-form-control v-if="filter.isShowResetButton" v-bind:item="{type: 'button',name:'重置',icon:'el-icon-refresh-right'}" v-on:click="onReset"></el-form-control>
             <el-form-control v-if="filter.isShowExportButton" v-bind:item="{type: 'button',name:'导出',buttonType:'success',icon:'el-icon-download'}" v-on:click="onExport"></el-form-control>
-            <el-form-control v-if="filter.isShowImportButton" v-bind:item="{type: 'button',name:'导入',icon:'el-icon-upload2'}" v-on:click="onImport"></el-form-control>
+            <el-form-control v-if="filter.isShowImportButton" v-show="!filter.file || !filter.file.name" ref="file" v-bind:item="{type: 'file',name:'导入',action:filter.importApi,buttonType:'warning',icon:'el-icon-upload2',accept:'.xls,.xlsx'}" v-model="filter.file" v-on:import="onImport"></el-form-control>
+            <el-form-control v-if="filter.isShowImportButton && filter.file && filter.file.name" class="el-upload-input" v-bind:item="{type: 'input',readonly:true}" v-model="filter.file.name"></el-form-control>
+            <el-form-control v-if="filter.isShowImportButton && filter.file && filter.file.name" v-bind:item="{type: 'button',name:'上传',buttonType:'warning',icon:'el-icon-upload2'}" v-on:click="$refs.file.upLoad"></el-form-control>
+            <el-form-control v-if="filter.isShowImportButton && filter.file && filter.file.name" v-bind:item="{type: 'button',name:'取消',buttonType:'warning',icon:'el-icon-refresh-right'}" v-on:click="$refs.file.clearFiles"></el-form-control>
             <template v-if="filter.operateControlsPosition == 2">
                 <el-form-control v-for="(item,index) in filter.listOperateControl" v-bind:item="item" v-bind:key="index" v-on:click="onClick(item.click)"></el-form-control>
             </template>

Bailun.DC.Web/wwwroot/css/component/el-form-control.css

@@ -81,3 +81,11 @@
 .el-form-control .el-textarea.el-input--small span {
     height: 25px;
 }
+
+.el-form-control .div-el-upload {
+    display: inline;
+}
+
+.el-form-control .el-upload input[type=file] {
+    display: none;
+}
\ No newline at end of file

Bailun.DC.Web/wwwroot/css/component/el-form-filter.css

@@ -54,3 +54,7 @@
     .el-form-filter .el-select__caret.el-input__icon.el-icon-circle-close {
         height: 90%;
     }
+
+.el-form-filter .el-upload-input .el-input {
+    width: auto;
+}
\ No newline at end of file

Bailun.DC.Web/wwwroot/js/component/el-form-control.js

@@ -66,7 +66,7 @@
             //表单标题
             formTitle: null,
             //表单编码
-            formCode: null,
+            formCode: null
         }
     },
     created() {
@@ -209,7 +209,50 @@
             var that = this;
             Vue.set(that, 'item_value', []);
             that.item_value.push(value);
-        }
+        },
+        //上传文件
+        upLoad() {
+            this.$refs.upload.submit();
+        },
+        //清除文件
+        clearFiles() {
+            this.$refs.upload.clearFiles()
+            this.$set(this, "item_value", {})
+        },
+        //添加文件事件
+        onFileChange(file, listFile) {
+            if (file.status == "ready") {
+                var that = this
+                if (this.item.accept.includes(file.name.substr(file.name.lastIndexOf(".")))) {
+                    if (listFile.length > 1) {
+                        listFile.splice(0, 1)
+                    }
+                    that.$set(that, "item_value", file)
+                    that.$emit("change", file)
+                } else {
+                    listFile.splice(listFile.length - 1, 1)
+                    that.$message.error('上传文件只能是' + that.item.accept + '格式!')
+                }
+            }
+        },
+        //文件上传成功
+        onSuccess(response, file, listFile) {
+            var that = this;
+            if (response.code = 200) {
+                listFile.splice(listFile.length - 1, 1)
+                that.$emit("import", true, file)
+            } else {
+                file.status = "ready"
+                that.loading = false
+                that.$emit("import", false, file, response.message || "上传文件失败!")
+            }
+        },
+        //文件上传失败
+        onError(err, file, listFile) {
+            file.status = "ready"
+            this.loading = false
+            this.$emit("import", false, file, err)
+        },
     },
     template: '#elFormControl'
 });
\ No newline at end of file

Bailun.DC.Web/wwwroot/js/component/el-form-filter.js

@@ -118,8 +118,13 @@
             this.$emit("export", this.getFilter());
         },
         //导入
-        onImport: function () {
-            this.$emit("import");
+        onImport: function (result, file, message) {
+            if (result) {
+                this.$message("导入成功!")
+                this.$refs.file.clearFiles();
+            } else { 
+                this.$message.error(message)
+            }
         },
         //单击事件
         onClick: function (fn) {

Bailun.DC.Web/wwwroot/js/component/el-table-query.js

@@ -182,7 +182,7 @@
             }
         },
         //导入
-        onImport: function () {
+        onImport: function (file) {
             debugger;
         },
         //单击事件