样式和保单附件上传改进

src/views/business/insuranceFirst-firstApproval.vue

@@ -15,217 +15,25 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <!-- <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>-->
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
-
       <el-container>
         <el-main>
-          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'100px'">
+          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'80px'">
             <table>
               <tr>
-                <td>当前步骤</td>
+                <td style="text-align:left">当前步骤</td>
                 <td>{{insureData.statusN}}</td>
               </tr>
               <tr>
                 <td colspan="2">
                   <el-form-item label="处理类型" prop="processStatus">
-                    <el-select v-model="formModel.processStatus" placeholder="请选择" filterable>
+                    <el-select
+                      v-model="formModel.processStatus"
+                      placeholder="请选择"
+                      filterable
+                      style="position: absolute;width: 70%;right: 0;"
+                    >
                       <el-option label="通过" value="正常"></el-option>
                       <el-option label="退回" value="回退"></el-option>
                     </el-select>
@@ -245,8 +53,8 @@
                 </td>
               </tr>
               <tr>
-                <td>下一步骤</td>
-                <td>复审</td>
+                <td style="padding-bottom:10px">下一步骤</td>
+                <td style="padding-bottom:10px">复审</td>
               </tr>
               <tr>
                 <td>
@@ -272,13 +80,18 @@
 import Constant from "@/constant";
 import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
+
+import leftTab from "./insuranceFirst-leftTab.vue";
+
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
-
     return {
       queryModel: {
         id: ""
@@ -390,7 +203,7 @@ export default {
           self.loading = false;
           if (jsonData.result) {
             self.insureData = jsonData.data;
-            
+
             this.definitionId = self.insureData.definitionId;
             this.policyId = self.insureData.insurancePolicy.id;
             this.acceptDetail();
@@ -584,7 +397,6 @@ export default {
     self.loading = true;
 
     self.id = this.$route.query.id;
-
     this.insureDetail();
   }
 };
@@ -608,4 +420,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>

src/views/business/insuranceFirst-issued.vue

@@ -15,205 +15,8 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
-
       <el-container>
         <el-main>
           <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'100px'">
@@ -273,20 +76,27 @@
               </tr>-->
               <tr>
                 <td colspan="2">
-                  <el-upload
-                    class="upload-demo"
-                    :action="uploadUrl()"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :before-remove="beforeRemove"
-                    :multiple="false"
-                    :limit="1"
-                    :on-exceed="handleExceed"
-                    :before-upload="beforeUpload"
-                  >
-                    <el-button size="small" type="primary">点击上传</el-button>
-                    <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
-                  </el-upload>
+                  <el-form-item label="上传保单">
+                    <el-upload
+                      class="upload-demo"
+                      :action="uploadUrl"
+                      :data="uploadData"
+                      :headers="headers"
+                      name="uploadFile"
+                      :on-preview="handlePreview"
+                      :on-remove="handleFileRemove"
+                      :before-remove="beforeRemove"
+                      :multiple="false"
+                      :limit="1"
+                      :on-exceed="handleExceed"
+                      :on-success="handleUploadFileSuccess"
+                      :on-error="handleUploadError"
+                      :file-list="fileList"
+                    >
+                      <el-button size="small" type="primary">点击上传</el-button>
+                      <div slot="tip" class="el-upload__tip"></div>
+                    </el-upload>
+                  </el-form-item>
                 </td>
               </tr>
               <tr>
@@ -319,10 +129,15 @@ import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
 import { getToken } from "@/utils/auth"; // get token from cookie
 
+import leftTab from "./insuranceFirst-leftTab.vue";
+
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
     var token = getToken;
@@ -369,10 +184,18 @@ export default {
       pageSizeRecord: 10,
       totalPagesRecord: 0,
       totalElementsRecord: 0,
-      filesData: [],
       fileList: [],
-      myHeaders: { Authorization: token },
-      insuranceAgentlist: ""
+      filesData: [],
+      insuranceAgentlist: "",
+      policy: "",
+      //上传地址
+      uploadUrl: Constant.serverUrl + "/base/attachment/upload",
+      uploadData: {
+        subFolder: "isuued"
+      },
+      headers: {
+        Authorization: getToken()
+      }
     };
   },
   methods: {
@@ -606,11 +429,21 @@ export default {
           // self.$message.error(error + "");
         });
     },
-    handleRemove(file, fileList) {
+    //上传文件
+    handleUploadFileSuccess(response, file, fileList) {
+      console.log(response);
+      this.fileUrl = response.data;
+    },
+    handleFileRemove(file, fileList) {
       console.log(file, fileList);
+      this.fileUrl = "";
+    },
+    handleUploadError(err, file, fileList) {
+      console.log(err);
     },
     handlePreview(file) {
       console.log(file);
+      window.open(file.url);
     },
     handleExceed(files, fileList) {
       this.$message.warning(
@@ -621,42 +454,6 @@ export default {
     },
     beforeRemove(file, fileList) {
       return this.$confirm(`确定移除 ${file.name}？`);
-    },
-    uploadUrl: function() {
-      var url = Constant.serverUrl + "/base/attachment/upload";
-      return url;
-    },
-    beforeUpload(file) {
-      var self = this;
-
-      self.loading = true;
-
-      const IMG_ALLOWD = ["image/jpeg", "image/jpg", "image/gif", "image/png"];
-      //const isLt2M = file.size / 1024 / 1024 < 2;
-      if (IMG_ALLOWD.indexOf(file.type) === -1) {
-        this.$message.error("上传文件只能为图片格式!");
-        self.loading = false;
-        return false;
-      } else {
-        var formData = new FormData();
-        formData.append("uploadFile", file);
-        formData.append("fileName", "");
-        formData.append("subFolder", "issued");
-
-        approvalApi
-          .uploadFiles(formData)
-          .then(function(response) {
-            self.loading = false;
-
-            var jsonData = response.data;
-
-            self.fileUrl = jsonData.data;
-          })
-          .catch(error => {
-            self.loading = false;
-            // self.$message.error(error + "");
-          });
-      }
     }
   },
   async mounted() {
@@ -688,4 +485,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>

src/views/business/insuranceFirst-leftTab.vue

@@ -0,0 +1,606 @@
+<template>
+  <el-tabs type="card" activeName="0" @tab-click="tabsClick">
+    <el-tab-pane label="投保信息" name="0">
+      <div>
+        <div class="application-panel" v-loading="loading">
+          <!-- 投保信息 -->
+          <div class="title-von">
+            <h4>投保信息</h4>
+          </div>
+          <table border="1" style="border-collapse:collapse;width: 100%;">
+            <tr>
+              <td colspan="2" class="table-bak">投保人名称</td>
+              <td colspan="3">{{insureData.insuredName}}</td>
+              <td width="90" class="table-bak">联系电话</td>
+              <td>{{insureData.insuredTel}}</td>
+            </tr>
+            <tr>
+              <td rowspan="5" width="25" class="table-bak">被保险人信息</td>
+              <td width="90" class="table-bak">企业名称</td>
+              <td colspan="3">{{insureData.companyName}}</td>
+              <td class="table-bak">营业性质</td>
+              <td>{{insureData.businessNature}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">证件类型</td>
+              <td colspan="3">{{insureData.insuredName}}</td>
+              <td class="table-bak">证件号码</td>
+              <td>{{insureData.usccCode}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">营业范围</td>
+              <td colspan="3">{{insureData.businessScope}}</td>
+              <td class="table-bak">行业类型</td>
+              <td>{{insureData.industryType}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">雇员人数</td>
+              <td width="110">{{insureData.employeesNumber}}</td>
+              <td width="90" class="table-bak">投保人数</td>
+              <td width="110">{{insureData.insuredNumber}}</td>
+              <td class="table-bak">联系电话</td>
+              <td>{{insureData.tel}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">联系地址</td>
+              <td colspan="3">{{insureData.companyAddress}}</td>
+              <td class="table-bak">邮编</td>
+              <td>{{insureData.postal}}</td>
+            </tr>
+            <tr>
+              <td colspan="2" class="table-bak">近三年损失情况（时间、原因、损失金额）</td>
+              <td colspan="5">{{insureData.lossInRecentYears}}</td>
+            </tr>
+          </table>
+        </div>
+        <div class="user-panel" v-loading="loading">
+          <!-- 被保险人信息 -->
+          <div class="title-von">
+            <h4>被保险人信息</h4>
+          </div>
+          <el-table
+            :data="memberData"
+            style="width: 100%"
+            v-loading="loading"
+            stripe
+            @sort-change="sortChange"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
+            <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
+            <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
+            <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
+            <el-table-column prop="companyMember.sex" label="性别" width="100">
+              <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
+            </el-table-column>
+            <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
+            <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
+            <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
+            <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
+              <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :current-page.sync="pageIndex"
+            :total="totalElements"
+            :page-sizes="pageSizeList"
+            @current-change="changePage"
+            @size-change="pageSizeChange"
+            layout="total, sizes, prev, pager, next, jumper"
+          ></el-pagination>
+        </div>
+        <div class="accept-panel" v-loading="loading">
+          <!-- 承保信息 -->
+          <div class="title-von">
+            <h4>承保信息</h4>
+          </div>
+          <table border="1" style="border-collapse:collapse;width:100%">
+            <tr>
+              <td width="100" class="table-bak">险种</td>
+              <td colspan="6" class="table-bak">限额名称</td>
+              <td colspan="3" class="table-bak">责任限额/免赔额</td>
+            </tr>
+            <tr>
+              <td rowspan="100">{{insureData.definitionName}}</td>
+            </tr>
+            <tr v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList" :key="index">
+              <td colspan="6">{{ acceot.name }}</td>
+              <td colspan="2">
+                {{ acceot.limit }}
+                {{ acceot.unit }}
+              </td>
+            </tr>
+          </table>
+          <table border="1" style="border-collapse:collapse;width:100%">
+            <tr>
+              <td colspan="2">行业/职业类型</td>
+              <td>收费标准(年)</td>
+              <td>收费标准(月)</td>
+              <td>投保人数</td>
+              <td>保险费</td>
+            </tr>
+            <tr v-for="(job,index) in acceptData.jobsList" :key="index">
+              <td colspan="2">{{ job.name }}({{job.content}})</td>
+              <td>{{ job.chargesY }}元/年/人</td>
+              <td>{{ job.charges }}元/月/人</td>
+              <td>{{ job.number }}</td>
+              <td>{{ job.money }}</td>
+            </tr>
+            <tr>
+              <td colspan="2">保险费合计(人民币)</td>
+              <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
+              <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
+            </tr>
+            <tr>
+              <td colspan="2">保险期间</td>
+              <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
+            </tr>
+          </table>
+        </div>
+        <div class="application-panel" v-loading="loading">
+          <!-- 附件信息 -->
+          <div class="title-von">
+            <h4>附件信息</h4>
+          </div>
+          <el-table
+            :data="filesData"
+            style="width: 100%"
+            v-loading="loading"
+            stripe
+            @sort-change="sortChange"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
+            <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
+            <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
+            <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
+          </el-table>
+        </div>
+        <div class="application-panel" v-loading="loading">
+          <!-- 推广信息 -->
+          <div class="title-von">
+            <h4>推广信息</h4>
+          </div>
+          <table border="1" style="border-collapse:collapse;">
+            <tr>
+              <td>人员类型</td>
+              <td>姓名</td>
+              <td>联系方式</td>
+              <td>注册账号</td>
+            </tr>
+            <tr>
+              <td>社会推广员</td>
+              <td>赵磊</td>
+              <td>18600001111</td>
+              <td>zhaolei001</td>
+            </tr>
+            <tr>
+              <td>保险代理人</td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="流程历史记录" name="20">
+      <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
+        <el-table-column label="序号" type="index" width="100" align="center">
+          <template slot-scope="scope">
+            <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
+        <el-table-column prop="statusN" label="审核步骤" width="100"></el-table-column>
+        <el-table-column prop="opinion" label="意见" width="500"></el-table-column>
+        <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
+      </el-table>
+
+      <el-pagination
+        :current-page.sync="pageIndexRecord"
+        :total="totalElementsRecord"
+        :page-sizes="pageSizeList"
+        @current-change="changePageRecord"
+        @size-change="pageSizeChangeRecord"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </el-tab-pane>
+    <el-tab-pane label="流程图" name="30"></el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+import Constant from "@/constant";
+import insuranceApplicationApi from "@/api/business/insuranceApplication";
+import approvalApi from "@/api/business/approval";
+
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  data() {
+    var self = this;
+    return {
+      queryModel: {
+        id: ""
+      },
+      ruleValidate: {
+        processStatus: [
+          {
+            required: true,
+            message: "请选择处理类型",
+            trigger: "blur"
+          }
+        ]
+      },
+      loading: false,
+      memberData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      showModal: false,
+      modalTitle: "",
+      businessKey: "",
+      id: "",
+      definitionId: "",
+      policyId: "",
+      insureData: "",
+      acceptData: [],
+      formModel: {
+        processStatus: "",
+        opinion: ""
+      },
+      recordData: [],
+      pageIndexRecord: 1,
+      pageSizeRecord: 10,
+      totalPagesRecord: 0,
+      totalElementsRecord: 0,
+      filesData: [],
+      insuranceAgentlist: ""
+    };
+  },
+  methods: {
+    changePage(pageIndex) {
+      var self = this;
+
+      self.loading = true;
+
+      self.pageIndex = pageIndex;
+      var formData = new FormData();
+
+      formData.append("pageIndex", self.pageIndex);
+      formData.append("pageSize", self.pageSize);
+
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      approvalApi
+        .pageList(formData)
+        .then(function(response) {
+          self.loading = false;
+          var jsonData = response.data.data;
+
+          self.memberData = jsonData.data;
+          self.totalPages = jsonData.totalPages;
+          self.totalElements = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    insureDetail() {
+      var self = this;
+      (function() {
+        if (self.id.length == 0) {
+          self.$message.error("没有传递ID");
+        } else {
+          var formData = new FormData();
+          formData.append("id", self.id);
+          formData.append("no", "1");
+          return insuranceApplicationApi.insureDetail(formData);
+        }
+      })()
+        .then(response => {
+          var jsonData = response.data;
+          self.loading = false;
+          if (jsonData.result) {
+            self.insureData = jsonData.data;
+
+            this.definitionId = self.insureData.definitionId;
+            this.policyId = self.insureData.insurancePolicy.id;
+            this.acceptDetail();
+            //this.loadInsuranceAgentlist();
+            this.changePage(1);
+          } else {
+            self.$message.error(jsonData.message + "");
+          }
+        })
+        .catch(error => {
+          self.$message.error(error + "");
+        });
+    },
+    acceptDetail(definitionId) {
+      var self = this;
+
+      var formData = new FormData();
+      formData.append("definitionId", self.definitionId);
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+
+      (function() {
+        if (self.definitionId.length == 0) {
+          self.$message.error("没有险种");
+        } else {
+          return approvalApi.acceptDetail(formData);
+        }
+      })()
+        .then(response => {
+          var jsonData = response.data;
+          self.loading = false;
+
+          if (jsonData.result) {
+            self.acceptData = jsonData.data;
+          } else {
+            self.$message.error(jsonData.message + "");
+          }
+        })
+        .catch(error => {
+          self.$message.error(error + "");
+        });
+    },
+    saveApproval() {
+      var self = this;
+
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          var self = this;
+          var formModel = this.formModel;
+          (function() {
+            var formData = new FormData();
+
+            formData.append("applicationId", self.id);
+            formData.append("policyId", self.policyId);
+            formData.append("processStatus", self.formModel.processStatus);
+            formData.append("opinion", self.formModel.opinion);
+
+            return approvalApi.firstApproval(formData);
+          })().then(function(response) {
+            var jsonData = response.data;
+
+            if (jsonData.result) {
+              self.$message({
+                message: "保存成功!",
+                type: "success"
+              });
+
+              self.$router.push("/business/insuranceFirst/list");
+            } else {
+              self.$message({
+                message: jsonData.message + "",
+                type: "warning"
+              });
+
+              self.$emit("close", false);
+            }
+          });
+        } else {
+          this.$emit("error");
+        }
+      });
+    },
+    downloadFiles() {},
+    changePageRecord(pageIndexRecord) {
+      var self = this;
+
+      self.loading = true;
+
+      self.pageIndexRecord = pageIndexRecord;
+      var formData = new FormData();
+
+      formData.append("pageIndex", self.pageIndexRecord);
+      formData.append("pageSize", self.pageSizeRecord);
+
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      approvalApi
+        .policyRecordPageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.recordData = jsonData.data;
+          self.totalPagesRecord = jsonData.totalPages;
+          self.totalElementsRecord = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChangeRecord(pageSize) {
+      this.pageSize = pageSize;
+    },
+    sortChangeRecord(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePageRecord(this.pageIndex);
+    },
+    handleSelectionChangeRecord(val) {
+      this.multipleSelection = val;
+    },
+    tabsClick(tab, event) {
+      if (tab.name == "20") {
+        this.changePageRecord(1);
+      }
+    },
+    attachmentList() {
+      var self = this;
+
+      self.loading = true;
+
+      var formData = new FormData();
+
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+      formData.append("id", self.policyId);
+
+      approvalApi
+        .attachmentList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.filesData = jsonData.data;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    loadInsuranceAgentlist() {
+      var self = this;
+
+      self.loading = true;
+      var formData = new FormData();
+
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+      formData.append("id", self.formData);
+
+      approvalApi
+        .loadInsuranceAgent(self.policyId)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.insuranceAgentlist = jsonData.data;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    }
+  },
+  async mounted() {
+    var self = this;
+    self.loading = true;
+
+    self.id = this.$route.query.id;
+    this.insureDetail();
+  }
+};
+</script>
+<style lang="scss" scoped>
+.el-breadcrumb {
+  margin: 10px;
+  line-height: 20px;
+}
+
+.el-divider {
+  margin: 5px 0;
+}
+
+.demo-form-inline {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.button-group {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
+</style>

src/views/business/insuranceFirst-secondApproval.vue

@@ -15,203 +15,7 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <!-- <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>-->
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
 
       <el-container>
@@ -272,10 +76,16 @@
 import Constant from "@/constant";
 import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
+
+import leftTab from "./insuranceFirst-leftTab.vue";
+
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
 
@@ -582,4 +392,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>

src/views/business/insuranceFirst-transfer.vue

@@ -15,208 +15,11 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <!-- <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>-->
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
-
       <el-container>
         <el-main>
-          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'100px'">
+          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'80px'">
             <table>
               <tr>
                 <td>当前步骤</td>
@@ -312,10 +115,16 @@
 import Constant from "@/constant";
 import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
+
+import leftTab from "./insuranceFirst-leftTab.vue";
+
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
 
@@ -324,27 +133,28 @@ export default {
         id: ""
       },
       ruleValidate: {
-        issuingBank: [
-          {
-            required: true,
-            message: "请填写出账银行",
-            trigger: "blur"
-          }
-        ],
-        accountBank: [
-          {
-            required: true,
-            message: "请填写入账银行",
-            trigger: "blur"
-          }
-        ],
-        singlNumber: [
-          {
-            required: true,
-            message: "请填写转账单号",
-            trigger: "blur"
-          }
-        ],
+
+        // issuingBank: [
+        //   {
+        //     required: true,
+        //     message: "请填写出账银行",
+        //     trigger: "blur"
+        //   }
+        // ],
+        // accountBank: [
+        //   {
+        //     required: true,
+        //     message: "请填写入账银行",
+        //     trigger: "blur"
+        //   }
+        // ],
+        // singlNumber: [
+        //   {
+        //     required: true,
+        //     message: "请填写转账单号",
+        //     trigger: "blur"
+        //   }
+        // ],
         processStatus: [
           {
             required: true,
@@ -651,4 +461,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>

src/views/business/insurancePolicy-firstApproval.vue

@@ -15,208 +15,11 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
-
       <el-container>
         <el-main>
-          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'100px'">
+          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'80px'">
             <table>
               <tr>
                 <td>当前步骤</td>
@@ -272,10 +75,14 @@
 import Constant from "@/constant";
 import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
+import leftTab from "./insurancePolicy-leftTab.vue";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
 
@@ -581,4 +388,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>

src/views/business/insurancePolicy-issued.vue

@@ -15,203 +15,7 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
 
       <el-container>
@@ -266,20 +70,27 @@
               </tr>
               <tr>
                 <td colspan="2">
-                  <el-upload
-                    class="upload-demo"
-                    :action="uploadUrl()"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :before-remove="beforeRemove"
-                    :multiple="false"
-                    :limit="1"
-                    :on-exceed="handleExceed"
-                    :before-upload="beforeUpload"
-                  >
-                    <el-button size="small" type="primary">点击上传</el-button>
-                    <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
-                  </el-upload>
+                  <el-form-item label="上传保单">
+                    <el-upload
+                      class="upload-demo"
+                      :action="uploadUrl"
+                      :data="uploadData"
+                      :headers="headers"
+                      name="uploadFile"
+                      :on-preview="handlePreview"
+                      :on-remove="handleFileRemove"
+                      :before-remove="beforeRemove"
+                      :multiple="false"
+                      :limit="1"
+                      :on-exceed="handleExceed"
+                      :on-success="handleUploadFileSuccess"
+                      :on-error="handleUploadError"
+                      :file-list="fileList"
+                    >
+                      <el-button size="small" type="primary">点击上传</el-button>
+                      <div slot="tip" class="el-upload__tip"></div>
+                    </el-upload>
+                  </el-form-item>
                 </td>
               </tr>
               <tr>
@@ -310,13 +121,18 @@
 import Constant from "@/constant";
 import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
+import leftTab from "./insurancePolicy-leftTab.vue";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
+import { getToken } from "@/utils/auth"; // get token from cookie
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
-
+    var token = getToken;
     return {
       queryModel: {
         id: ""
@@ -360,9 +176,18 @@ export default {
       pageSizeRecord: 10,
       totalPagesRecord: 0,
       totalElementsRecord: 0,
+      fileList: [],
       filesData: [],
       insuranceAgentlist: "",
-      policy: ""
+      policy: "",
+      //上传地址
+      uploadUrl: Constant.serverUrl + "/base/attachment/upload",
+      uploadData: {
+        subFolder: "isuued"
+      },
+      headers: {
+        Authorization: getToken()
+      }
     };
   },
   methods: {
@@ -498,7 +323,7 @@ export default {
             formData.append("policyId", self.policyId);
             formData.append("processStatus", self.formModel.processStatus);
             formData.append("opinion", self.formModel.opinion);
-            
+
             formData.append("insurancePolicyFile", self.fileUrl);
 
             return approvalApi.issued(formData);
@@ -607,11 +432,21 @@ export default {
           // self.$message.error(error + "");
         });
     },
-    handleRemove(file, fileList) {
+    //上传文件
+    handleUploadFileSuccess(response, file, fileList) {
+      console.log(response);
+      this.fileUrl = response.data;
+    },
+    handleFileRemove(file, fileList) {
       console.log(file, fileList);
+      this.fileUrl = "";
+    },
+    handleUploadError(err, file, fileList) {
+      console.log(err);
     },
     handlePreview(file) {
       console.log(file);
+      window.open(file.url);
     },
     handleExceed(files, fileList) {
       this.$message.warning(
@@ -622,48 +457,11 @@ export default {
     },
     beforeRemove(file, fileList) {
       return this.$confirm(`确定移除 ${file.name}？`);
-    },
-    uploadUrl: function() {
-      var url = Constant.serverUrl + "/base/attachment/upload";
-      return url;
-    },
-    beforeUpload(file) {
-      var self = this;
-
-      self.loading = true;
-
-      const IMG_ALLOWD = ["image/jpeg", "image/jpg", "image/gif", "image/png"];
-      //const isLt2M = file.size / 1024 / 1024 < 2;
-      if (IMG_ALLOWD.indexOf(file.type) === -1) {
-        this.$message.error("上传文件只能为图片格式!");
-        self.loading = false;
-        return false;
-      } else {
-        var formData = new FormData();
-        formData.append("uploadFile", file);
-        formData.append("fileName", "");
-        formData.append("subFolder", "issued");
-
-        approvalApi
-          .uploadFiles(formData)
-          .then(function(response) {
-            self.loading = false;
-
-            var jsonData = response.data;
-
-            self.fileUrl = jsonData.data;
-          })
-          .catch(error => {
-            self.loading = false;
-            // self.$message.error(error + "");
-          });
-      }
     }
   },
   async mounted() {
     var self = this;
     self.loading = true;
-
     self.id = this.$route.query.id;
     self.policyId = this.$route.query.policyId;
     this.insureDetail();
@@ -690,4 +488,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>

src/views/business/insurancePolicy-leftTab.vue

@@ -0,0 +1,580 @@
+<template>
+  <el-tabs type="card" activeName="0" @tab-click="tabsClick">
+    <el-tab-pane label="投保信息" name="0">
+      <div>
+        <div class="application-panel" v-loading="loading">
+          <!-- 投保信息 -->
+          <div class="title-von">
+            <h4>投保信息</h4>
+          </div>
+          <table border="1" style="border-collapse:collapse;width: 100%;">
+            <tr>
+              <td colspan="2" class="table-bak">投保人名称</td>
+              <td colspan="3">{{insureData.insuredName}}</td>
+              <td width="90" class="table-bak">联系电话</td>
+              <td>{{insureData.insuredTel}}</td>
+            </tr>
+            <tr>
+              <td rowspan="5" width="25" class="table-bak">被保险人信息</td>
+              <td width="90" class="table-bak">企业名称</td>
+              <td colspan="3">{{insureData.companyName}}</td>
+              <td class="table-bak">营业性质</td>
+              <td>{{insureData.businessNature}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">证件类型</td>
+              <td colspan="3">{{insureData.insuredName}}</td>
+              <td class="table-bak">证件号码</td>
+              <td>{{insureData.usccCode}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">营业范围</td>
+              <td colspan="3">{{insureData.businessScope}}</td>
+              <td class="table-bak">行业类型</td>
+              <td>{{insureData.industryType}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">雇员人数</td>
+              <td width="110">{{insureData.employeesNumber}}</td>
+              <td width="90" class="table-bak">投保人数</td>
+              <td width="110">{{insureData.insuredNumber}}</td>
+              <td class="table-bak">联系电话</td>
+              <td>{{insureData.tel}}</td>
+            </tr>
+            <tr>
+              <td class="table-bak">联系地址</td>
+              <td colspan="3">{{insureData.companyAddress}}</td>
+              <td class="table-bak">邮编</td>
+              <td>{{insureData.postal}}</td>
+            </tr>
+            <tr>
+              <td colspan="2" class="table-bak">近三年损失情况（时间、原因、损失金额）</td>
+              <td colspan="5">{{insureData.lossInRecentYears}}</td>
+            </tr>
+          </table>
+        </div>
+        <div class="user-panel" v-loading="loading">
+          <!-- 被保险人信息 -->
+          <div class="title-von">
+            <h4>被保险人信息</h4>
+          </div>
+          <el-table
+            :data="memberData"
+            style="width: 100%"
+            v-loading="loading"
+            stripe
+            @sort-change="sortChange"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
+            <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
+            <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
+            <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
+            <el-table-column prop="companyMember.sex" label="性别" width="100">
+              <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
+            </el-table-column>
+            <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
+            <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
+            <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
+            <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
+              <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :current-page.sync="pageIndex"
+            :total="totalElements"
+            :page-sizes="pageSizeList"
+            @current-change="changePage"
+            @size-change="pageSizeChange"
+            layout="total, sizes, prev, pager, next, jumper"
+          ></el-pagination>
+        </div>
+        <div class="accept-panel" v-loading="loading">
+          <!-- 承保信息 -->
+          <div class="title-von">
+            <h4>承保信息</h4>
+          </div>
+           <table border="1" style="border-collapse:collapse;width:100%">
+            <tr>
+              <td width="100" class="table-bak">险种</td>
+              <td colspan="6" class="table-bak">限额名称</td>
+              <td colspan="3" class="table-bak">责任限额/免赔额</td>
+            </tr>
+            <tr>
+              <td rowspan="100">{{insureData.definitionName}}</td>
+            </tr>
+            <tr v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList" :key="index">
+              <td colspan="6">{{ acceot.name }}</td>
+              <td colspan="2">
+                {{ acceot.limit }}
+                {{ acceot.unit }}
+              </td>
+            </tr>
+          </table>
+          <table border="1" style="border-collapse:collapse;width:100%">
+            <tr>
+              <td colspan="2">行业/职业类型</td>
+              <td>收费标准(年)</td>
+              <td>收费标准(月)</td>
+              <td>投保人数</td>
+              <td>保险费</td>
+            </tr>
+            <tr v-for="(job,index) in acceptData.jobsList" :key="index">
+              <td colspan="2">{{ job.name }}({{job.content}})</td>
+              <td>{{ job.chargesY }}元/年/人</td>
+              <td>{{ job.charges }}元/月/人</td>
+              <td>{{ job.number }}</td>
+              <td>{{ job.money }}</td>
+            </tr>
+            <tr>
+              <td colspan="2">保险费合计(人民币)</td>
+              <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
+              <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
+            </tr>
+            <tr>
+              <td colspan="2">保险期间</td>
+              <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
+            </tr>
+          </table>
+        </div>
+        <div class="application-panel" v-loading="loading">
+          <!-- 附件信息 -->
+          <div class="title-von">
+            <h4>附件信息</h4>
+          </div>
+          <el-table
+                  :data="filesData"
+                  style="width: 100%"
+                  v-loading="loading"
+                  stripe
+                  @sort-change="sortChange"
+                  @selection-change="handleSelectionChange"
+                >
+                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
+                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
+                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
+                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
+          </el-table>
+        </div>
+        <div class="application-panel" v-loading="loading">
+          <!-- 推广信息 -->
+          <div class="title-von">
+            <h4>推广信息</h4>
+          </div>
+          <table border="1" style="border-collapse:collapse;">
+            <tr>
+              <td>人员类型</td>
+              <td>姓名</td>
+              <td>联系方式</td>
+              <td>注册账号</td>
+            </tr>
+            <tr>
+              <td>社会推广员</td>
+              <td>赵磊</td>
+              <td>18600001111</td>
+              <td>zhaolei001</td>
+            </tr>
+            <tr>
+              <td>保险代理人</td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="流程历史记录" name="20">
+      <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
+        <el-table-column label="序号" type="index" width="100" align="center">
+          <template slot-scope="scope">
+            <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
+        <el-table-column prop="statusN" label="审核步骤" width="100"></el-table-column>
+        <el-table-column prop="opinion" label="意见" width="500"></el-table-column>
+        <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
+      </el-table>
+
+      <el-pagination
+        :current-page.sync="pageIndexRecord"
+        :total="totalElementsRecord"
+        :page-sizes="pageSizeList"
+        @current-change="changePageRecord"
+        @size-change="pageSizeChangeRecord"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </el-tab-pane>
+    <el-tab-pane label="流程图" name="30"></el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+import Constant from "@/constant";
+import insuranceApplicationApi from "@/api/business/insuranceApplication";
+import approvalApi from "@/api/business/approval";
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  data() {
+    var self = this;
+
+    return {
+      queryModel: {
+        id: ""
+      },
+      ruleValidate: {
+        processStatus: [
+          {
+            required: true,
+            message: "请选择处理类型",
+            trigger: "blur"
+          }
+        ]
+      },
+      loading: false,
+      memberData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      showModal: false,
+      modalTitle: "",
+      businessKey: "",
+      id: "",
+      definitionId: "",
+      policyId: "",
+      insureData: "",
+      acceptData: [],
+      formModel: {
+        processStatus: "",
+        opinion: ""
+      },
+      recordData: [],
+      pageIndexRecord: 1,
+      pageSizeRecord: 10,
+      totalPagesRecord: 0,
+      totalElementsRecord: 0,
+      filesData: [],
+      insuranceAgentlist: ""
+    };
+  },
+  methods: {
+    changePage(pageIndex) {
+      var self = this;
+
+      self.loading = true;
+
+      self.pageIndex = pageIndex;
+      var formData = new FormData();
+
+      formData.append("pageIndex", self.pageIndex);
+      formData.append("pageSize", self.pageSize);
+
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      approvalApi
+        .pageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.memberData = jsonData.data;
+          self.totalPages = jsonData.totalPages;
+          self.totalElements = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    insureDetail() {
+      var self = this;
+      self.definitionId = self.id;
+      (function() {
+        if (self.id.length == 0) {
+          self.$message.error("没有传递ID");
+        } else {
+          var formData = new FormData();
+          formData.append("id", self.id);
+          formData.append("no", "1");
+          return insuranceApplicationApi.insureDetail(formData);
+        }
+      })()
+        .then(response => {
+          var jsonData = response.data;
+          self.loading = false;
+          if (jsonData.result) {
+            self.insureData = jsonData.data;
+            this.acceptDetail();
+            this.changePage(1);
+          } else {
+            self.$message.error(jsonData.message + "");
+          }
+        })
+        .catch(error => {
+          self.$message.error(error + "");
+        });
+    },
+    acceptDetail() {
+      var self = this;
+
+      var formData = new FormData();
+      formData.append("definitionId", self.definitionId);
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+      (function() {
+        if (self.definitionId.length == 0) {
+          self.$message.error("没有险种");
+        } else {
+          return approvalApi.acceptDetail(formData);
+        }
+      })()
+        .then(response => {
+          var jsonData = response.data;
+          self.loading = false;
+
+          if (jsonData.result) {
+            self.acceptData = jsonData.data;
+          } else {
+            self.$message.error(jsonData.message + "");
+          }
+        })
+        .catch(error => {
+          self.$message.error(error + "");
+        });
+    },
+    saveApproval() {
+      var self = this;
+
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          var self = this;
+          var formModel = this.formModel;
+          (function() {
+            var formData = new FormData();
+
+            formData.append("applicationId", self.id);
+            formData.append("policyId", self.policyId);
+            formData.append("processStatus", self.formModel.processStatus);
+            formData.append("opinion", self.formModel.opinion);
+
+            return approvalApi.firstApproval(formData);
+          })().then(function(response) {
+            var jsonData = response.data;
+
+            if (jsonData.result) {
+              self.$message({
+                message: "保存成功!",
+                type: "success"
+              });
+
+              self.$router.push("/business/insurancePolicy/list");
+            } else {
+              self.$message({
+                message: jsonData.message + "",
+                type: "warning"
+              });
+
+              self.$emit("close", false);
+            }
+          });
+        } else {
+          this.$emit("error");
+        }
+      });
+    },
+    downloadFiles() {},
+    changePageRecord(pageIndexRecord) {
+      var self = this;
+
+      self.loading = true;
+
+      self.pageIndexRecord = pageIndexRecord;
+      var formData = new FormData();
+
+      formData.append("pageIndex", self.pageIndexRecord);
+      formData.append("pageSize", self.pageSizeRecord);
+
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      approvalApi
+        .policyRecordPageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.recordData = jsonData.data;
+          self.totalPagesRecord = jsonData.totalPages;
+          self.totalElementsRecord = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChangeRecord(pageSize) {
+      this.pageSize = pageSize;
+    },
+    sortChangeRecord(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePageRecord(this.pageIndex);
+    },
+    handleSelectionChangeRecord(val) {
+      this.multipleSelection = val;
+    },
+    tabsClick(tab, event) {
+      if (tab.name == "20") {
+        this.changePageRecord(1);
+      }
+    },
+    attachmentList() {
+      var self = this;
+
+      self.loading = true;
+
+      var formData = new FormData();
+
+      formData.append("applicationId", self.id);
+      formData.append("policyId", self.policyId);
+      formData.append("id", self.policyId);
+
+      approvalApi
+        .attachmentList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.filesData = jsonData.data;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    }
+  },
+  async mounted() {
+    var self = this;
+    //self.loading = true;
+
+    self.id = this.$route.query.id;
+    self.policyId = this.$route.query.policyId;
+    this.insureDetail();
+  }
+};
+</script>
+<style lang="scss" scoped>
+.el-breadcrumb {
+  margin: 10px;
+  line-height: 20px;
+}
+
+.el-divider {
+  margin: 5px 0;
+}
+
+.demo-form-inline {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.button-group {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
+</style>

src/views/business/insurancePolicy-secondApproval.vue

@@ -15,203 +15,7 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
 
       <el-container>
@@ -272,10 +76,14 @@
 import Constant from "@/constant";
 import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
+import leftTab from "./insurancePolicy-leftTab.vue";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
 
@@ -582,4 +390,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>

src/views/business/insurancePolicy-transfer.vue

@@ -15,203 +15,7 @@
     -->
     <el-container>
       <el-aside width="70%">
-        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
-          <el-tab-pane label="投保信息" name="0">
-            <div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 投保信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td colspan="2">投保人名称</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.insuredTel}}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="5">被保险人信息</td>
-                    <td>企业名称</td>
-                    <td colspan="3">{{insureData.companyName}}</td>
-                    <td>营业性质</td>
-                    <td>{{insureData.businessNature}}</td>
-                  </tr>
-                  <tr>
-                    <td>证件类型</td>
-                    <td colspan="3">{{insureData.insuredName}}</td>
-                    <td>证件号码</td>
-                    <td>{{insureData.usccCode}}</td>
-                  </tr>
-                  <tr>
-                    <td>营业范围</td>
-                    <td colspan="3">{{insureData.businessScope}}</td>
-                    <td>行业类型</td>
-                    <td>{{insureData.industryType}}</td>
-                  </tr>
-                  <tr>
-                    <td>雇员人数</td>
-                    <td>{{insureData.employeesNumber}}</td>
-                    <td>投保人数</td>
-                    <td>{{insureData.insuredNumber}}</td>
-                    <td>联系电话</td>
-                    <td>{{insureData.tel}}</td>
-                  </tr>
-                  <tr>
-                    <td>联系地址</td>
-                    <td colspan="3">{{insureData.companyAddress}}</td>
-                    <td>邮编</td>
-                    <td>{{insureData.postal}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
-                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="user-panel" v-loading="loading">
-                <!-- 被保险人信息 -->
-                <el-table
-                  :data="memberData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
-                  <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.status" label="审核状态" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.sex" label="性别" width="100">
-                    <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
-                  </el-table-column>
-                  <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
-                  <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
-                  <el-table-column prop="companyMember.cardFiles" label="身份证正面照" width="120">
-                    <template slot-scope="{row}">{{row.companyMember.cardFiles}}</template>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  :current-page.sync="pageIndex"
-                  :total="totalElements"
-                  :page-sizes="pageSizeList"
-                  @current-change="changePage"
-                  @size-change="pageSizeChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-                ></el-pagination>
-              </div>
-              <div class="accept-panel" v-loading="loading">
-                <!-- 承保信息 -->
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">险种</td>
-                    <td colspan="2">限额名称</td>
-                    <td colspan="2">责任限额/免赔额</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="6" colspan="2">{{insureData.definitionName}}</td>
-                  </tr>
-                  <tr
-                    v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList"
-                    :key="index"
-                  >
-                    <td colspan="2">{{ acceot.name }}</td>
-                    <td colspan="2">
-                      {{ acceot.limit }}
-                      {{ acceot.unit }}
-                    </td>
-                  </tr>
-                </table>
-                <table border="1" style="border-collapse:collapse;" width="800px;">
-                  <tr>
-                    <td colspan="2">行业/职业类型</td>
-                    <td>收费标准(年)</td>
-                    <td>收费标准(月)</td>
-                    <td>投保人数</td>
-                    <td>保险费</td>
-                  </tr>
-                  <tr v-for="(job,index) in acceptData.jobsList" :key="index">
-                    <td colspan="2">{{ job.name }}({{job.content}})</td>
-                    <td>{{ job.chargesY }}元/年/人</td>
-                    <td>{{ job.charges }}元/月/人</td>
-                    <td>{{ job.number }}</td>
-                    <td>{{ job.money }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险费合计(人民币)</td>
-                    <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
-                    <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">保险期间</td>
-                    <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 附件信息 -->
-                <!-- <el-table
-                  :data="filesData"
-                  style="width: 100%"
-                  v-loading="loading"
-                  stripe
-                  @sort-change="sortChange"
-                  @selection-change="handleSelectionChange"
-                >
-                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
-                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
-                </el-table>-->
-              </div>
-              <div class="application-panel" v-loading="loading">
-                <!-- 推广信息 -->
-                <table border="1" style="border-collapse:collapse;">
-                  <tr>
-                    <td>人员类型</td>
-                    <td>姓名</td>
-                    <td>联系方式</td>
-                    <td>注册账号</td>
-                  </tr>
-                  <tr>
-                    <td>社会推广员</td>
-                    <td>赵磊</td>
-                    <td>18600001111</td>
-                    <td>zhaolei001</td>
-                  </tr>
-                  <tr>
-                    <td>保险代理人</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="流程历史记录" name="20">
-            <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column label="序号" type="index" width="100" align="center">
-                <template slot-scope="scope">
-                  <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
-              <el-table-column prop="opinion" label="意见" width="250"></el-table-column>
-              <el-table-column prop="status" label="审核步骤" width="100"></el-table-column>
-              <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
-            </el-table>
-
-            <el-pagination
-              :current-page.sync="pageIndexRecord"
-              :total="totalElementsRecord"
-              :page-sizes="pageSizeList"
-              @current-change="changePageRecord"
-              @size-change="pageSizeChangeRecord"
-              layout="total, sizes, prev, pager, next, jumper"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="流程图" name="30"></el-tab-pane>
-        </el-tabs>
+        <leftTab></leftTab>
       </el-aside>
 
       <el-container>
@@ -312,10 +116,14 @@
 import Constant from "@/constant";
 import insuranceApplicationApi from "@/api/business/insuranceApplication";
 import approvalApi from "@/api/business/approval";
+import leftTab from "./insurancePolicy-leftTab.vue";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
 
 export default {
+  components: {
+    leftTab: leftTab
+  },
   data() {
     var self = this;
 
@@ -324,27 +132,27 @@ export default {
         id: ""
       },
       ruleValidate: {
-        issuingBank: [
-          {
-            required: true,
-            message: "请填写出账银行",
-            trigger: "blur"
-          }
-        ],
-        accountBank: [
-          {
-            required: true,
-            message: "请填写入账银行",
-            trigger: "blur"
-          }
-        ],
-        singlNumber: [
-          {
-            required: true,
-            message: "请填写转账单号",
-            trigger: "blur"
-          }
-        ],
+        // issuingBank: [
+        //   {
+        //     required: true,
+        //     message: "请填写出账银行",
+        //     trigger: "blur"
+        //   }
+        // ],
+        // accountBank: [
+        //   {
+        //     required: true,
+        //     message: "请填写入账银行",
+        //     trigger: "blur"
+        //   }
+        // ],
+        // singlNumber: [
+        //   {
+        //     required: true,
+        //     message: "请填写转账单号",
+        //     trigger: "blur"
+        //   }
+        // ],
         processStatus: [
           {
             required: true,
@@ -385,7 +193,7 @@ export default {
       totalElementsRecord: 0,
       filesData: [],
       insuranceAgentlist: "",
-      policy:""
+      policy: ""
     };
   },
   methods: {
@@ -661,4 +469,59 @@ export default {
   margin-left: 10px;
   text-align: left;
 }
+
+.application-panel td,
+.accept-panel td {
+  padding: 10px 0;
+  font-size: 14px;
+  border: 1px solid #efefef;
+}
+
+.el-tabs.el-tabs--card.el-tabs--top {
+  padding: 20px;
+}
+
+.table-bak {
+  background: #f6f6f6;
+}
+
+.el-tab-pane .title-von {
+  text-align: left;
+  padding: 10px 0;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
+}
+
+.el-tab-pane h4 {
+  margin: 0;
+  border-left: 2px solid red;
+  padding-left: 10px;
+}
+
+.user-panel,
+.application-panel,
+.accept-panel {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  padding: 10px 15px;
+}
+
+.accept-panel td p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.application-panel table {
+  width: 100%;
+}
+
+.el-container {
+  border-left: 1px solid #efefef;
+}
+
+.el-form td {
+  font-size: 14px;
+}
 </style>