融资方列表详情样式优化

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

@@ -59,7 +59,13 @@
       >导入</el-button>
     </div>
 
-    <el-table class="zap-table" v-loading="loading" :data="quotaList" @selection-change="handleSelectionChange" stripe>
+    <el-table
+      class="zap-table"
+      v-loading="loading"
+      :data="quotaList"
+      @selection-change="handleSelectionChange"
+      stripe
+    >
       <el-table-column label="序号" type="index" width="50" align="center">
         <template slot-scope="scope">
           <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
@@ -116,16 +122,15 @@
     />
 
     <!-- 添加或修改供应商授信额度对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form
         :inline="true"
         ref="form"
         :model="form"
         :rules="rules"
-        label-width="80px"
-        :label-position="labelPosition"
+        label-width="auto"
       >
-        <el-form-item label="企业名称:" prop="zfsqCompanyId">
+        <el-form-item label="企业名称:" prop="zfsqCompanyId" size="large">
           <el-select
             v-model="form.zfsqCompanyId"
             style="width : 300px"
@@ -141,7 +146,7 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="企业统一代码:" prop="scySocialCode">
+        <el-form-item label="企业统一代码:" prop="scySocialCode" size="large">
           <el-input
             v-model="form.scySocialCode"
             :disabled="true"
@@ -149,7 +154,7 @@
             style="width:300px"
           />
         </el-form-item>
-        <el-form-item label="还款账户:" prop="zfsqAccount">
+        <el-form-item label="还款账户:" prop="zfsqAccount" size="large">
           <el-input
             v-model="form.zfsqAccount"
             placeholder="请输入还款账户"
@@ -157,7 +162,7 @@
             maxlength="50"
           />
         </el-form-item>
-        <el-form-item label="还款账户开户行:" prop="zfsqAccountBank">
+        <el-form-item label="还款账户开户行:" prop="zfsqAccountBank" size="large">
           <el-input
             v-model="form.zfsqAccountBank"
             placeholder="请输入还款账户开户行"
@@ -165,7 +170,7 @@
             maxlength="30"
           />
         </el-form-item>
-        <el-form-item label="授信额度:" prop="zfsqAmount">
+        <el-form-item label="授信额度:" prop="zfsqAmount" size="large">
           <el-input
             v-model="form.zfsqAmount"
             @input.native="changeRate($event,form.zfsqAmount)"
@@ -176,46 +181,67 @@
           </el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <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-button @click="cancel">取 消</el-button>
-      </div>
+      </el-row>
     </el-dialog>
     <!-- 导入 -->
     <el-dialog
-      :title="upload.title"
+      class="zap-upload-invoice"
       :visible.sync="upload.open"
       :rules="rules"
-      width="400px"
+      width="600px"
+      :show-close="false"
       append-to-body
     >
-      <el-upload
-        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
+      <el-row
+        slot="title"
+        class="zap-upload-invoice__title"
+        type="flex"
+        align="middle"
+        justify="space-between"
       >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">
-          将文件拖到此处，或
-          <em>点击上传</em>
-        </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>
-        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
+        <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;"></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-button @click="upload.open = false">取 消</el-button>
-      </div>
+      </el-row>
     </el-dialog>
   </div>
 </template>
@@ -604,7 +630,14 @@ export default {
           return $1 + ",";
         })
         .replace(/\.$/, "");
+    },
+    /**
+     * 点击关闭上传发票弹窗
+     */
+    bindClickCloseUploadInvoice() {
+      this.uploadOpen = false;
     }
   }
 };
 </script>
+