案件批量录入接口联调

src/api/caseAccess/caseEntry.js

@@ -4,8 +4,8 @@ import request from '@/utils/request'
 export function caseApply(data) {
   return request({
     url: '/caseApplication/list',
-    method: 'post',
-    data: data
+    method: 'get',
+    params: data
   })
 }
 
@@ -49,3 +49,12 @@ export function submitCaseApply(data) {
     data: data
   })
 }
+
+// 下载模板
+export function importTemplate(data) {
+  return request({
+    url: '/caseApplication/importTemplate',
+    method: 'post',
+    data: data
+  })
+}

src/views/caseAccessAll/caseEntry.vue

@@ -152,9 +152,11 @@
       :initpaymentArr1="initpaymentArr1"
     ></caseentryDialog>
     <!-- 批量申请弹框 openbatch-->
-    <!-- <batchDialog
+    <batchDialog
     :openbatch="openbatch"
-    ></batchDialog> -->
+    @cancelBatch="cancelBatch"
+    :getcaseApply="getcaseApply"
+    ></batchDialog>
   </div>
 </template>
 
@@ -172,7 +174,7 @@ export default {
   dicts: ["sys_identity_type"],
   components: {
     caseentryDialog,
-    // batchDialog
+    batchDialog
   },
   data() {
     return {
@@ -211,6 +213,9 @@ export default {
     cancel() {
       this.visible = false;
     },
+    cancelBatch() {
+      this.openbatch = false
+    },
     /** 查询登录日志列表 */
     getcaseApply() {
       this.loading = true;
@@ -236,6 +241,35 @@ export default {
     // 立案申请
     filingApplication() {
       this.form = {};
+        this.paymentArr = [
+        {
+          identityType: 1,
+          name: "",
+          identityNum: "",
+          contactTelphone: "",
+          workAddress: "",
+          workTelphone: "",
+          contactAddress: "",
+          nameAgent: "",
+          contactTelphoneAgent: "",
+          contactAddressAgent: "",
+        },
+      ];
+        this.paymentArr1 = [
+        {
+          identityType: 2,
+          name: "",
+          identityNum: "",
+          contactTelphone: "",
+          workAddress: "",
+          workTelphone: "",
+          contactAddress: "",
+          nameAgent: "",
+          contactTelphoneAgent: "",
+          contactAddressAgent: "",
+        },
+      ]
+
       this.visible = true;
       this.dialogtitle = "立案申请";
       this.flag = "2"

src/views/caseAccessAll/components/batchDialog.vue

@@ -2,44 +2,52 @@
   <div>
     <!-- 立案申请弹框 -->
     <el-dialog
-      :title="dialogtitle"
-      :visible.sync="openbatch"
-      width="800px"
+      title="批量立案"
+      :visible="openbatch"
+      width="600px"
       append-to-body
+      @close="cancel"
     >
       <el-form ref="form" :model="form" :rules="rules" label-width="150px">
-        <!-- <el-row> -->
+        <el-row>
           <!-- <el-col :span="16">
             <el-form-item label="申请人姓名：" prop="applyName">
               <el-input v-model="form.jobName" placeholder="请输入姓名" />
             </el-form-item>
-          </el-col>
+          </el-col>-->
           <el-col :span="8">
-            <el-button type="primary" @click="downloadTemplate"
-              >下载模板</el-button
-            >
-          </el-col> -->
+            <div class="download" style="margin-bottom: 20px">
+              <span> 下载： </span>
+              <a href="#">
+                <el-button class="uploadlink" @click="downloadTemplate">批量导入模板</el-button>
+              </a>
+            </div>
+          </el-col>
           <!-- <el-col :span="12">
             <el-form-item label="立案申请书：" prop="applybook"> </el-form-item>
           </el-col>
           <el-col :span="12"> </el-col> -->
-        <!-- </el-row> -->
+        </el-row>
         <el-row>
           <el-form-item :span="24" label="批量立案信息上传：" prop="upload">
             <el-upload
               class="upload-demo"
-              action="https://jsonplaceholder.typicode.com/posts/"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :before-remove="beforeRemove"
-              multiple
-              :limit="3"
-              :on-exceed="handleExceed"
-              :file-list="fileList"
+              ref="uploadbatch"
+              :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-button size="small" type="primary">点击上传</el-button>
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
               <div slot="tip" class="el-upload__tip">
-                只能上传文件，且不超过500kb
+                只接收.xlsx, .xls格式文件
               </div>
             </el-upload>
           </el-form-item>
@@ -54,22 +62,98 @@
 </template>
 
 <script>
+import { importTemplate } from "@/api/caseAccess/caseEntry";
+import { getToken } from "@/utils/auth";
 export default {
+  props: ["openbatch","getcaseApply"],
   data() {
     return {
-      key: value,
+      //   key: value,
+      form: {},
+      fileList: [],
+      rules: {
+        upload: [
+          { required: true, message: "批量立案文件不能为空", trigger: "blur" },
+        ],
+      },
+      // 案件批量导入
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/caseApplication/importData",
+      },
     };
   },
   methods: {
-    // 提交立案申请
-    submitForm() {},
+    // 批量提交立案申请
+    submitForm() {
+        this.$refs.uploadbatch.submit();
+    },
     // 取消
     cancel() {
-      this.openbatch = false;
+      //   this.openbatch = false;
+      this.$emit("cancelBatch");
+    },
+    handleRemove(file, fileList) {},
+    handlePreview(file) {},
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    // 下载模板 importTemplate
+    downloadTemplate() {
+    //   console.log("下载模板");
+      this.download(
+        "caseApplication/importTemplate",
+        {},
+        `case_batch_${new Date().getTime()}.xlsx`
+      );
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+    //   this.upload.open = false;
+      this.$emit("cancelBatch");
+      this.upload.isUploading = false;
+      this.$refs.uploadbatch.clearFiles();
+      this.$alert(
+        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
+          response.msg +
+          "</div>",
+        "导入结果",
+        { dangerouslyUseHTMLString: true }
+      );
+      this.getcaseApply();
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.download {
+  a {
+    .uploadlink{
+        border: none;
+        color: #2092c7;
+    }
+  }
+}
 </style>

src/views/caseAccessAll/components/caseentryDialog.vue

@@ -375,12 +375,17 @@
 
 <script>
 import moment from "moment"; //导入文件
-import {
-  addCaseApply,
-  editCaseApply,
-} from "@/api/caseAccess/caseEntry";
+import { addCaseApply, editCaseApply } from "@/api/caseAccess/caseEntry";
 export default {
-  props: ["visible", "dialogtitle", "form", "getcaseApply", "flag","initpaymentArr","initpaymentArr1"],
+  props: [
+    "visible",
+    "dialogtitle",
+    "form",
+    "getcaseApply",
+    "flag",
+    "initpaymentArr",
+    "initpaymentArr1",
+  ],
   data() {
     return {
       formData: this.form,
@@ -395,8 +400,9 @@ export default {
           {
             required: true,
             message: "案件标的不能为空",
-            trigger: "blur",
+            trigger: ["change", "blur"],
           },
+          // { type: "Number", message: "案件标的必须为数字值" },
         ],
         loanStartDate: [
           {
@@ -432,6 +438,7 @@ export default {
             message: "申请人主张欠本金不能为空",
             trigger: "blur",
           },
+          // { type: 'number', message: '申请人主张欠本金必须为数字值'}
         ],
         claimInterestOwed: [
           {
@@ -439,6 +446,7 @@ export default {
             message: "申请人主张欠利息不能为空",
             trigger: "blur",
           },
+          // { type: 'number', message: '申请人主张欠利息必须为数字值'}
         ],
         Overduedays: [
           {
@@ -446,6 +454,7 @@ export default {
             message: "逾期天数不能为空",
             trigger: "blur",
           },
+          // { type: 'number', message: '逾期天数必须为数字值'}
         ],
         claimLiquidDamag: [
           {
@@ -453,9 +462,10 @@ export default {
             message: "申请人主张违约金不能为空",
             trigger: "blur",
           },
+          // { type: 'number', message: '申请人主张违约金必须为数字值'}
         ],
       },
-      rules2: {
+      rulesmain: {
         name: [
           {
             required: true,
@@ -476,6 +486,11 @@ export default {
             message: "联系电话不能为空",
             trigger: "blur",
           },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur",
+          },
         ],
         workAddress: [
           {
@@ -490,6 +505,11 @@ export default {
             message: "单位电话不能为空",
             trigger: "blur",
           },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur",
+          },
         ],
         contactAddress: [
           {
@@ -518,6 +538,11 @@ export default {
             message: "联系电话不能为空",
             trigger: "blur",
           },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur",
+          },
         ],
         contactAddressAgent: [
           {
@@ -559,44 +584,13 @@ export default {
     };
   },
   watch: {
-    initpaymentArr: {
+    visible: {
       handler(val) {
         if (val) {
           this.formData = this.form;
           if (this.flag == "1" || this.flag == "0") {
-            // this.getInfo(this.formData);
-            this.paymentArr = this.initpaymentArr
-            this.paymentArr1 = this.initpaymentArr1
-          }
-          if(this.flag == "2") {
-            this.paymentArr = [
-        {
-          identityType: 1,
-          name: "",
-          identityNum: "",
-          contactTelphone: "",
-          workAddress: "",
-          workTelphone: "",
-          contactAddress: "",
-          nameAgent: "",
-          contactTelphoneAgent: "",
-          contactAddressAgent: "",
-        },
-      ]
-            this.paymentArr1 = [
-        {
-          identityType: 2,
-          name: "",
-          identityNum: "",
-          contactTelphone: "",
-          workAddress: "",
-          workTelphone: "",
-          contactAddress: "",
-          nameAgent: "",
-          contactTelphoneAgent: "",
-          contactAddressAgent: "",
-        },
-      ]
+            this.paymentArr = this.initpaymentArr;
+            this.paymentArr1 = this.initpaymentArr1;
           }
         }
       },
@@ -604,10 +598,8 @@ export default {
     },
   },
   methods: {
-    handleRemove(file, fileList) {
-    },
-    handlePreview(file) {
-    },
+    handleRemove(file, fileList) {},
+    handlePreview(file) {},
     handleExceed(files, fileList) {
       this.$message.warning(
         `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
@@ -652,25 +644,7 @@ export default {
         contactTelphoneAgent: "",
         contactAddressAgent: "",
       });
-      
     },
-    // // 查找主体信息数据
-    // getInfo(row) {
-    //   const id = row.id;
-    //   selectCaseApply({ id }).then((res) => {
-    //     this.visible = true;
-    //     this.formData = res.data;
-    //     this.paymentArr = [];
-    //     this.paymentArr1 = [];
-    //     res.data.caseAffiliates.forEach((item) => {
-    //       if (item.identityType == 1) {
-    //         this.paymentArr.push(item);
-    //       } else {
-    //         this.paymentArr1.push(item);
-    //       }
-    //     });
-    //   });
-    // },
     // 删除申请人主体信息
     deleteData(index) {
       this.paymentArr.splice(index, 1);