优化病案首页数据导入

src/views/recordsImport/index.vue

@@ -4,12 +4,18 @@
 
       <div class="titlebox">
         <div class="titlebox-text">病案首页数据导入</div>
-        <div>1</div>
+        <div class="switch-box">
+          <el-switch v-model="switch_value" active-color="#185da6"></el-switch>
+          <div class="switch-text">{{ switch_value?'上传 + 质控':'上传' }}</div>
+        </div>
       </div>
       <!-- 上传拖拽区域模块 开始 -->
       <div class="upload-blockCon-box">
-        
-      
+        <el-upload class="upload-demo" drag :action="actionUrl" multiple>
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip">支持excel、csv</div>
+        </el-upload>
       </div>
       <!-- 上传拖拽区域模块 结束 -->
 
@@ -47,6 +53,8 @@ export default {
   name:'recordsImport',
   data() {
     return {
+      switch_value: true,
+      actionUrl:'https://jsonplaceholder.typicode.com/posts/',
       tableData: [],
       paginationData: {
         total: 10,
@@ -116,6 +124,13 @@ export default {
     margin-top: 10px;
   }
 
+  .upload-demo::v-deep .el-upload-dragger{
+    width: 650px;
+    height: 220px;
+  }
+  .upload-demo::v-deep .el-upload-dragger .el-icon-upload{
+    font-size: 120px;
+  }
   .tableBox {
     background: #fff;
     padding: 16px;
@@ -124,4 +139,18 @@ export default {
   .table-block{
     margin-top: 10px;
   }
+  .switch-box{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    justify-content: center;
+  }
+  .switch-box .switch-text{
+    text-align: left;
+    width: 100px;
+    padding-left: 10px;
+  }
 </style>