申请人机构改为申请人页面优化,缴费界面的优化,详情页和修改页面加tab页面，展示抓取内容页面的开发

src/views/caseManagement/caseList.vue

@@ -4,7 +4,7 @@
       <el-form-item label="案件编号" prop="caseNum">
         <el-input v-model="queryParams.caseNum" placeholder="请输入案件编号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="申请人(机构)" prop="applicantName">
+      <el-form-item label="申请人" prop="applicantName">
         <!-- <el-input
           v-model="queryParams.applicantName"
           placeholder="请输入机构名称"
@@ -74,7 +74,7 @@
         </template>
       </el-table-column>
       <el-table-column label="案件编号" align="center" prop="caseNum" :show-overflow-tooltip="true" />
-      <el-table-column label="申请人(机构)" align="center" prop="applicantName" :show-overflow-tooltip="true" />
+      <el-table-column label="申请人" align="center" prop="applicantName" :show-overflow-tooltip="true" />
       <el-table-column label="案件标的" align="center" prop="caseSubjectAmount" />
       <el-table-column label="仲裁方式" align="center" prop="arbitratMethodName" :show-overflow-tooltip="true" />
       <!-- 仲裁员 -->
@@ -179,7 +179,7 @@
     <!-- 立案申请弹框 -->
     <caseentryDialog :visible="visible" @cancel="cancel" :form="form" :queryParams="queryParams"
       :dialogtitle="dialogtitle" :getcaseApply="getcaseApply" :flag="flag" :caseAttachList="caseAttachList"
-      :initpaymentArr="initpaymentArr" :initpaymentArr1="initpaymentArr1"></caseentryDialog>
+      :initpaymentArr="initpaymentArr" :initpaymentArr1="initpaymentArr1" :columnValues="columnValues"></caseentryDialog>
     <!-- 批量申请弹框 openbatch-->
     <batchDialog :openbatch="openbatch" :queryParams="queryParams" @cancelBatch="cancelBatch"
       :getcaseApply="getcaseApply"></batchDialog>
@@ -312,6 +312,8 @@ export default {
       isapply: "申请人：",
       // 表格数据
       dataList: [],
+      // 抓取数据
+      columnValues:[],
       // 查询参数
       queryParams: {
         caseNum: undefined,
@@ -670,6 +672,7 @@ export default {
           res.data.caseStatusName = "待缴费";
         }
         this.form = res.data;
+        console.log(this.form)
         this.payForm.feePayable = res.data.feePayable;
         this.payForm.caseId = res.data.id;
       });
@@ -806,6 +809,8 @@ export default {
             this.initpaymentArr1.push(item);
           }
         });
+        this.columnValues = res.data.columnValues;
+        console.log(res.data.columnValues)
         this.caseAttachList = res.data.caseAttachList;
         // console.log(this.caseAttachList,"caseAttachList")
         this.form.requestRule = res.data.requestRule;

src/views/caseManagement/components/caseentryDialog.vue

@@ -2,7 +2,13 @@
   <div>
     <el-dialog :title="dialogtitle" :visible="visible" @close="cancel" width="1000px" append-to-body
       :destroy-on-close="true" center>
-      <!-- 案件信息 -->
+      <!-- tab页 -->
+       <el-tabs v-model="activeName" @tab-click="handleClick" v-show="form.id != undefined && form.id != null">
+          <el-tab-pane label="案件基本信息" name="first"></el-tab-pane>
+          <el-tab-pane label="抓取内容" name="second"></el-tab-pane>
+      </el-tabs>
+      <div v-show="activeName=='first'">
+           <!-- 案件信息 -->
       <el-form ref="form" :model="formData" :rules="rules" label-width="150px" :disabled="flag == '0'">
         <div style="display: inline-flex">
           <div class="infoIcon"></div>
@@ -583,19 +589,47 @@
         @click="generateForm1()"
         >新增被申请人主体信息</el-button
       > -->
-      <div>
+        <div>
-         <div style="display: inline-flex">
+          <div style="display: inline-flex">
-            <div class="infoIcon"></div>
+              <div class="infoIcon"></div>
-            <div class="caseInfo2">仲裁申请书:</div>
+              <div class="caseInfo2">仲裁申请书:</div>
+            </div>
+          <div v-for="item in caseAttachList" :key ="item.annexId" v-if="item.annexType==1" style="margin-top:-25px;margin-left:100px;">
+            <el-link target="_blank" type="primary" :href="fileURL+item.annexPath">{{item.annexName}}</el-link>
           </div>
-        <div v-for="item in caseAttachList" :key ="item.annexId" v-if="item.annexType==1" style="margin-top:-25px;margin-left:100px;">
-          <el-link target="_blank" type="primary" :href="fileURL+item.annexPath">{{item.annexName}}</el-link>
         </div>
+            <div slot="footer" class="dialog-footer" style="text-align:center;margin-top:20px;">
+            <el-button type="primary" @click="submitForm" v-if="flag != 0" class="endbutton"><span>确 定</span></el-button>
+            <el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
+          </div>
+        
       </div>
-      <div slot="footer" class="dialog-footer">
+      
-        <el-button type="primary" @click="submitForm" v-if="flag != 0" class="endbutton"><span>确 定</span></el-button>
+      <div v-show="activeName=='second'" style="margin-top:20px;">
-        <el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
+        <el-form :model="formGrab" ref="formGrabRef" label-width="120px" :disabled ="flag == '0'">
+          <el-col :span="15">
+            <el-form-item  v-for="(item,index) in formGrab.list" :prop="'list.' + index + '.value'" :label="item.column" :key="item.id" 
+           :rules="{
+                  required: true,
+                  message: '内容不能为空',
+                  trigger: 'blur'
+                }"
+            >
+                <el-input type="textarea" v-model="item.value"></el-input>
+            </el-form-item>
+          </el-col>   
+        </el-form>  
+        <el-col :span="24">
+          <div style="text-align:center;margin-top:50px;">
+            <el-button type="primary" @click="submitFormGrab" v-if="flag != 0" class="endbutton"><span>确 定</span></el-button>
+            <el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
+          </div>
+        </el-col>
+          
+        
       </div>
+      
+     
     </el-dialog>
   </div>
 </template>
@@ -615,9 +649,11 @@ export default {
     "initpaymentArr1",
     "queryParams",
     "caseAttachList",
+    "columnValues"
   ],
   data() {
     return {
+      activeName: 'first',
       fileURL: window.location.origin + "/API",
       formData: this.form,
       filedata: {
@@ -664,6 +700,10 @@ export default {
           },
         ],
       }, //被申请人主体信息
+      // 抓取内容
+      formGrab:{
+        list:[]
+      },
       // 表单校验
       rules: {
         // caseNum: [
@@ -772,6 +812,8 @@ export default {
   watch: {
     initpaymentArr: {
       handler(val) {
+        this.activeName = "first"
+        this.formGrab.list = this.columnValues
          this.caseAttachListArr = []
         if (val) {
           this.applicateArr = [];
@@ -781,6 +823,7 @@ export default {
           if (this.flag == "1" || this.flag == "0") {
             this.form2.paymentArr = this.initpaymentArr;
             this.form3.paymentArr1 = this.initpaymentArr1;
+            console.log(this.caseAttachList)
             this.caseAttachList.forEach((item) => {
               if (item.annexType == 2) {
                 this.applicateArr.push({
@@ -1021,6 +1064,12 @@ export default {
         }
       });
     },
+    // 提交抓取内容修改
+    submitFormGrab(){
+      this.$refs['formGrabRef'].validate((valid) => {
+         console.log(this.formGrab.list,valid)
+      });
+    },
     // 详情显示，展示申请人案件文件
     toFile(item, index) {
       window.open(
@@ -1035,6 +1084,10 @@ export default {
         "_black"
       );
     },
+    // tabs页
+     handleClick(tab, event) {
+        // console.log(tab, event);
+    }
   },
 };
 </script>

src/views/caseManagement/components/payDialog.vue

@@ -23,8 +23,11 @@
             {{ form.caseStatusName }}
           </el-tag>
         </el-descriptions-item>
-        <el-descriptions-item label="申请人仲裁诉求">{{
+        <!-- <el-descriptions-item label="申请人仲裁诉求">{{
           form.arbitratClaims
+        }}</el-descriptions-item> -->
+        <el-descriptions-item label="案件理由">{{
+          form.facts
         }}</el-descriptions-item>
       </el-descriptions>
       <div class="paySelectType">