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

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 style="display: inline-flex">
-            <div class="infoIcon"></div>
-            <div class="caseInfo2">仲裁申请书:</div>
+        <div>
+          <div style="display: inline-flex">
+              <div class="infoIcon"></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>
-        <el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
+      
+      <div v-show="activeName=='second'" style="margin-top:20px;">
+        <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>