搭建拉取本行信息弹窗骨架

ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue

@@ -204,6 +204,54 @@
       </span>
     </el-dialog>
 
+    <el-dialog
+      title="拉取本行信息"
+      :visible.sync="pullBankInfoDialogVisible"
+      :close-on-click-modal="false"
+      width="640px"
+    >
+      <el-form :model="pullBankInfoForm" label-width="100px">
+        <el-form-item label="证件号码">
+          <el-input
+            v-model="pullBankInfoForm.idCardText"
+            type="textarea"
+            :rows="5"
+            placeholder="支持逗号、中文逗号、换行分隔"
+          />
+        </el-form-item>
+        <el-form-item label="身份证文件">
+          <el-upload
+            action="#"
+            :auto-upload="false"
+            :limit="1"
+            :file-list="idCardFileList"
+          >
+            <el-button size="small" type="primary">选择文件</el-button>
+            <div slot="tip" class="el-upload__tip">
+              支持 .xls、.xlsx 文件
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="时间跨度">
+          <el-date-picker
+            v-model="pullBankInfoForm.dateRange"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="pullBankInfoDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="pullBankInfoLoading">
+          确认拉取
+        </el-button>
+      </span>
+    </el-dialog>
+
     <!-- 批量上传弹窗 -->
     <el-dialog
       title="批量上传流水文件"
@@ -312,6 +360,14 @@ export default {
       uploadFileTypes: "",
       fileList: [],
       uploading: false,
+      pullBankInfoDialogVisible: false,
+      pullBankInfoLoading: false,
+      parsingIdCardFile: false,
+      idCardFileList: [],
+      pullBankInfoForm: {
+        idCardText: "",
+        dateRange: [],
+      },
       // 名单选择弹窗
       showNameListDialog: false,
       nameListForm: {
@@ -690,9 +746,22 @@ export default {
         })
         .catch(() => {});
     },
+    openPullBankInfoDialog() {
+      this.pullBankInfoDialogVisible = true;
+    },
+    resetPullBankInfoForm() {
+      this.pullBankInfoForm = {
+        idCardText: "",
+        dateRange: [],
+      };
+      this.idCardFileList = [];
+      this.parsingIdCardFile = false;
+      this.pullBankInfoLoading = false;
+    },
     /** 拉取本行信息 */
     handleFetchBankInfo() {
-      this.pullBankInfoDialogVisible = true;
+      this.resetPullBankInfoForm();
+      this.openPullBankInfoDialog();
     },
     /** 获取进度条偏移 */
     getProgressOffset(value) {