平台授信管理融资方列表详情导入链属弹窗使用upload-import组件

front-vue/src/main.js

@@ -38,6 +38,8 @@ import StatisticalData from "@/components/StatisticalData"
 import Attachments from "@/components/Attachments"
 // 表单纯展示文本
 import TextItem from "@/components/TextItem"
+// 导入
+import UploadImport from '@/components/UploadImport/index.vue'
 // 日期过滤器
 import "@/filters/date.js"
 
@@ -76,6 +78,7 @@ Vue.component('HeaderBar', HeaderBar)
 Vue.component('StatisticalData', StatisticalData)
 Vue.component('Attachments', Attachments)
 Vue.component('TextItem', TextItem)
+Vue.component('UploadImport', UploadImport)
 
 Vue.use(permission)
 

front-vue/src/views/service/creditLine/supplierCreditLine.vue

@@ -48,64 +48,44 @@
 
     <!-- 添加或修改供应商授信额度对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-        <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="auto">
-            <el-form-item label="企业名称:" prop="zfsqCompanyId" size="large">
+        <el-row class="zap-form">
+          <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="auto">
+            <el-form-item label="企业名称:" prop="zfsqCompanyId">
                 <el-select v-model="form.zfsqCompanyId" style="width : 300px" clearable :disabled="isDisabled">
                     <el-option v-for="(item,index) in gysCompanyList" :key="index" :label="item.scyName" :value="item.scyId" @click.native="code(item)"></el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="企业统一代码:" prop="scySocialCode" size="large">
+            <el-form-item label="企业统一代码:" prop="scySocialCode">
                 <el-input v-model="form.scySocialCode" :disabled="true" placeholder="请输入企业统一代码" style="width:300px" />
             </el-form-item>
-            <el-form-item label="还款账户:" prop="zfsqAccount" size="large">
+            <el-form-item label="还款账户:" prop="zfsqAccount">
                 <el-input v-model="form.zfsqAccount" placeholder="请输入还款账户" style="width:300px" maxlength="50" />
             </el-form-item>
-            <el-form-item label="还款账户开户行:" prop="zfsqAccountBank" size="large">
+            <el-form-item label="还款账户开户行:" prop="zfsqAccountBank">
                 <el-input v-model="form.zfsqAccountBank" placeholder="请输入还款账户开户行" style="width:300px" maxlength="30" />
             </el-form-item>
-            <el-form-item label="授信额度:" prop="zfsqAmount" size="large">
+            <el-form-item label="授信额度:" prop="zfsqAmount">
                 <el-input v-model="form.zfsqAmount" @input.native="changeRate($event,form.zfsqAmount)" placeholder="请输入授信额度" style="width:300px">
                     <template slot="append">元</template>
                 </el-input>
             </el-form-item>
-        </el-form>
+          </el-form>
+        </el-row>
         <el-row style="height: 109px;" type="flex" align="middle" justify="center">
             <el-button type="primary" plain @click="cancel">取 消</el-button>
             <el-button type="primary" @click="submitForm">确 定</el-button>
         </el-row>
     </el-dialog>
-    <!-- 导入 -->
-    <el-dialog class="zap-upload-invoice" :visible.sync="upload.open" :rules="rules" width="600px" :show-close="false" append-to-body>
-        <el-row slot="title" class="zap-upload-invoice__title" type="flex" align="middle" justify="space-between">
-            <span class="title">{{upload.title}}</span>
-            <i class="el-icon-close" @click="bindClickCloseUploadInvoice"></i>
-        </el-row>
-        <el-row class="zap-upload-invoice__top">
-            <span class="zap-upload-invoice__top-text">提示：仅允许导入“xls”或“xlsx”格式文件！</span>
-        </el-row>
-        <el-row type="flex" align="middle" justify="center">
-            <el-upload class="zap-upload-invoice__form" ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-                <div class="zap-upload-invoce__inner">
-                    <i class="el-icon-upload" style="font-size: 64px;color: #21b24b"></i>
-                    <div class="zap-upload-invoice__text">
-                        将文件拖到此处，或
-                        <span>点击上传</span>
-                    </div>
-                    <div class="zap-upload-invoice__tip">按住Ctrl可同时多选，单个文件不能超过2mb</div>
-                    <div class="zap-upload-invoice__tip">严禁上传包含色情、暴力、反动等相关违法信息的文件。</div>
-                </div>
-                <div class="el-upload__tip" slot="tip">
-                    <!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据 -->
-                    <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
-                </div>
-            </el-upload>
-        </el-row>
-
-        <el-row style="height: 109px;" type="flex" align="middle" justify="center">
-            <el-button type="primary" plain @click="upload.open = false">取 消</el-button>
-            <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        </el-row>
-    </el-dialog>
+     <!-- 导入窗口 -->
+    <upload-import
+        :upload="upload"
+        :visible.sync="upload.open"
+        append-to-body
+        :handleFileUploadProgress="handleFileUploadProgress"
+        :handleFileSuccess="handleFileSuccess"
+        @importTemplate="importTemplate"
+        @submitFileForm="submitFileForm">
+    </upload-import>
 </div>
 </template>
 
@@ -488,12 +468,6 @@ export default {
                     return $1 + ",";
                 })
                 .replace(/\.$/, "");
-        },
-        /**
-         * 点击关闭上传发票弹窗
-         */
-        bindClickCloseUploadInvoice() {
-            this.uploadOpen = false;
         }
     }
 };

front-vue/src/views/service/financeRecord/financeRecord.vue

@@ -286,7 +286,7 @@
 
                 <!--查看内部审批流程-->
                 <el-dialog title="流程进度" :visible.sync="hisTaskForm">
-                    <div>
+                    <div class="zap-form">
                         <el-steps direction="vertical" :active="histaskList[histaskList.length-1] && histaskList[histaskList.length-1].activityType == 'endEvent' ? histaskList.length : histaskList.length-1" finish-status="success" space="60px">
                             <el-step :title="item.name" v-for="(item,index) in histaskList" :key="index">
                                 <template slot="description">