package.json

@@ -15,6 +15,7 @@
     "js-cookie": "^2.2.1",
     "nprogress": "0.2.0",
     "vue": "^2.6.10",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
     "vuex": "^3.1.2"
   },
@@ -25,9 +26,9 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10",
     "node-sass": "^4.12.0",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,

src/api/business/commission.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+function pageList(formData) {
+  //佣金
+  return request.post(constant.serverUrl + "/insurancePolicy/insuranceHistoryPageList", formData);
+}
+
+
+function edit(id) {
+  return request.get(constant.serverUrl + "/insurancePolicy/edit/" + id);
+}
+
+function update(formModel) {
+  return request.post(constant.serverUrl + "/insurancePolicy/update", formModel, {
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+export default {
+  pageList, update, edit
+}

src/api/business/historicalInsurance.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+function pageList(formData) {
+  //历史投保单
+  return request.post(constant.serverUrl + "/insurancePolicy/insuranceHistoryPageList", formData);
+}
+
+export default {
+  pageList
+}

src/main.js

@@ -5,9 +5,15 @@ import store from './store'
 import './plugins/element.js'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import './assets/iconfont/iconfont.css'
+import VueQuillEditor from 'vue-quill-editor';
+
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
 
 Vue.config.productionTip = false
 Vue.use(AxiosPlugin)
+Vue.use(VueQuillEditor);
 
 new Vue({
   router,

src/routers/modules/business.js

@@ -152,6 +152,42 @@ var routers = [
                 meta: {
                         roles: ["admin"]
                 }
+        },
+        {
+                //历史投保管理
+                path: '/business/historicalInsurance/list',
+                name: 'business-historicalInsurance-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/business/historicalInsurance-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                //佣金-人才超市
+                path: '/business/commissionRccs/list',
+                name: 'business-commissionRccs-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/business/commissionRccs-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                //佣金-PICC
+                path: '/business/commissionPicc/list',
+                name: 'business-commissionPicc-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/business/commissionPicc-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
         }
 ]
 

src/views/Login.vue

@@ -5,7 +5,7 @@
         <img src="../assets/logo.png" width="250" height="38"/>
       </h3>
       <el-card class="box-card">
-        <h3 class="title">PICC参保管理系统-管理端</h3>
+        <h3 class="title">荆州人才超市保险服务平台-管理端</h3>
         <el-form
           class="card-box"
           autocomplete="on"

src/views/base/insuranceDefinition-detail.vue

@@ -13,7 +13,7 @@
   >
     <div class="user-panel" v-loading="loading">
       <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'150px'">
-        <el-form-item label="险种" prop="name">
+        <el-form-item label="险种1" prop="name">
           <el-input v-model="formModel.name" placeholder="请输入险种" style="width:300px"></el-input>
         </el-form-item>
         <el-form-item label="每月截止日期" prop="cutOffTime">
@@ -37,6 +37,9 @@
             style="width:300px"
           ></el-input>
         </el-form-item>
+        <el-form-item label="理赔须知" prop="notice">
+          <quill-editor v-model="formModel.notice" :options="editorOption"></quill-editor>
+        </el-form-item>
       </el-form>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -48,6 +51,7 @@
 <script>
 import Constant from "@/constant";
 import insuranceDefinitionApi from "@/api/base/insuranceDefinition";
+import { quillEditor } from "vue-quill-editor";
 
 export default {
   props: ["businessKey", "modalTitle"],
@@ -78,7 +82,14 @@ export default {
       showDialog: true,
       loading: false,
       submitting: false,
-      queryResult: []
+      queryResult: [],
+      editorOption: {
+        modules: {
+          toolbar: "title" // 设置文本编辑器的头部是否展示
+        },
+        placeholder: "请输入通知内容", // 文本框为空时 , 占位文本
+        theme: "snow" // 或者为 `bubble`
+      }
     };
   },
   methods: {

src/views/business/commission-detail.vue

@@ -0,0 +1,133 @@
+
+<style scoped>
+.user-panel {
+  margin: 10px auto;
+}
+</style>
+<template>
+  <el-dialog
+    :visible.sync="showDialog"
+    :title="modalTitle"
+    :modal-append-to-body="false"
+    style="text-align:left;"
+    @close="closeDialog"
+  >
+    <div class="user-panel" v-loading="loading">
+      <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'200px'">
+        <el-form-item label="保险代理人" prop="sortNo">
+          <b v-text="formModel.agent.name"></b>
+        </el-form-item>
+        <el-form-item label="银行卡号">
+          <b v-text="字典表添加"></b>
+        </el-form-item>
+        <el-form-item label="保单金额" prop="insuranceFee">
+          <b v-text="formModel.insuranceFee"></b>
+        </el-form-item>
+        <el-form-item label="佣金收益" prop="commission">
+          <el-input v-model="formModel.commission" placeholder="请输入佣金收益" style="width:200px"></el-input>
+        </el-form-item>
+        <el-form-item label="佣金打款时间" prop="commissionTime">
+          <el-date-picker
+            v-model="formModel.commissionTime"
+            type="date"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择日期"
+            style="width:200px"
+          ></el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import Constant from "@/constant";
+import commissionApi from "@/api/business/commission";
+
+export default {
+  props: ["businessKey", "modalTitle"],
+  data() {
+    return {
+      formModel: {},
+      ruleValidate: {
+        commission: [
+          { required: true, message: "不能为空", trigger: "blur" },
+          { type: 'number', message: '请输入正确数据', trigger: 'blur' }
+        ],
+        commissionTime: [
+          { required: true, message: "不能为空", trigger: "blur" }
+        ]
+      },
+      showDialog: true,
+      loading: false,
+      submitting: false,
+      queryResult: []
+    };
+  },
+  methods: {
+    closeDialog() {
+      this.$emit("close", false);
+    },
+    handleSubmit() {
+      var self = this;
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          (function() {
+            var id = self.formModel.id;
+            if (id == null || id.length == 0) {
+              return commissionApi.add(self.formModel);
+            } else {
+              return commissionApi.update(self.formModel);
+            }
+          })().then(function(response) {
+            var jsonData = response.data;
+
+            if (jsonData.result) {
+              self.$message({
+                message: "保存成功!",
+                type: "success"
+              });
+
+              self.$emit("close", true);
+            } else {
+              self.$message({
+                message: jsonData.message + "",
+                type: "warning"
+              });
+
+              self.$emit("close", false);
+            }
+          });
+        }
+      });
+    }
+  },
+  async mounted() {
+    var self = this;
+    self.loading = true;
+    (function() {
+      if (self.businessKey.length == 0) {
+        return commissionApi.create();
+      } else {
+        return commissionApi.edit(self.businessKey);
+      }
+    })()
+      .then(response => {
+        var jsonData = response.data;
+        self.loading = false;
+
+        if (jsonData.result) {
+          self.formModel = jsonData.data;
+        } else {
+          self.$message.error(jsonData.message + "");
+        }
+      })
+      .catch(error => {
+        self.$message.error(error + "");
+      });
+  }
+};
+</script>

src/views/business/commissionPicc-list.vue

@@ -0,0 +1,349 @@
+<template>
+  <div>
+    <el-breadcrumb separator=">">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="#">系统管理</a>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="/insuranceJobs">佣金管理</a>
+        <!-- 佣金管理 PICC -->
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-divider></el-divider>
+    <!--
+      要resetFields起作用，必须配置:model和prop
+    -->
+    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
+      <el-row>
+        <el-col>
+          <el-form-item label="投保险种" prop="definitionId">
+            <el-select
+              v-model="queryModel.definitionId"
+              filterable
+              placeholder="请选择"
+              style="width:200px"
+            >
+              <el-option
+                v-for="result in queryResult"
+                :key="result.id"
+                :label="result.name"
+                :value="result.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="企业名称" prop="companyName">
+            <el-input type="text" v-model="queryModel.companyName"></el-input>
+          </el-form-item>
+          <el-form-item label="推广员" prop="promoter">
+            <el-input type="text" v-model="queryModel.promoter"></el-input>
+          </el-form-item>
+          <el-form-item label="保险代理人" prop="agentId">
+            <el-select
+              v-model="queryModel.agentId"
+              filterable
+              placeholder="请选择"
+              style="width:200px"
+            >
+              <el-option
+                v-for="agent in agentData"
+                :key="agent.id "
+                :label="agent.name"
+                :value="agent.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col>
+          <el-form-item label="创建时间" prop="createTimes">
+            <el-date-picker
+              v-model="queryModel.createTimes"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="出单时间" prop="fisinhTimes">
+            <el-date-picker
+              v-model="queryModel.fisinhTimes"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="ios-search" @click="changePage(1)" :loading="loading">查询</el-button>&nbsp;
+            <el-button type="info" style="margin-left: 8px" @click="handleReset('queryForm')">重置</el-button>&nbsp;
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-divider></el-divider>
+    <el-tabs v-model="activeName" type="card" activeName @tab-click="handleClick">
+      <el-tab-pane name="all">
+        <span slot="label">全部</span>
+      </el-tab-pane>
+      <el-tab-pane name="0">
+        <span slot="label">未录入佣金信息</span>
+      </el-tab-pane>
+      <el-tab-pane name="1">
+        <span slot="label">已录入佣金信息</span>
+      </el-tab-pane>
+      <el-table
+        :data="tableData"
+        style="min-height:400px;"
+        v-loading="loading"
+        stripe
+        @sort-change="sortChange"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="index" label="序号" :index="1"></el-table-column>
+        <el-table-column prop="policyNo" label="投保单号" width="200"></el-table-column>
+        <el-table-column prop="definition.name" label="投保险种" width="150"></el-table-column>
+        <el-table-column prop="company.name" label="企业名称" width="150"></el-table-column>
+        <el-table-column prop="insuranceFee" label="投保金额" width="100"></el-table-column>
+        <el-table-column label="投保期间" width="200">
+          <template slot-scope="{row}">{{row.startTime}}至{{row.endTime}}</template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
+        <el-table-column prop="finishTime" label="出单时间" width="180"></el-table-column>
+        <el-table-column prop="commissionTime" label="佣金打款时间" width="180"></el-table-column>
+        <el-table-column prop="agent.name" label="保险代理人" width="100"></el-table-column>
+        <el-table-column prop="commission" label="佣金收益" width="100"></el-table-column>
+        <el-table-column label="操作" width="250px">
+          <template slot-scope="{row}">
+            <el-row>
+              <el-col :span="12">
+                <el-button size="mini" type="info" @click="downloadFile(row)">下载电子保单</el-button>
+              </el-col>
+              <el-col :span="12">
+                <span v-if="row.commissionTime == null || row.commissionTime == ''">
+                  <el-button size="mini" type="success" @click="commissionView(row)">录入佣金信息</el-button>
+                </span>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tabs>
+    <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>
+    <insuranceJobs-detail
+      v-if="showModal"
+      :id="businessKey"
+      :policyId="policyId"
+      @close="onDetailModalClose"
+    ></insuranceJobs-detail>
+    <commission-detail
+      v-if="showCommissionModal"
+      :businessKey="businessKey"
+      @close="onDetailModalClose"
+    ></commission-detail>
+  </div>
+</template>
+<script>
+import Constant from "@/constant";
+import insuranceJobsDetail from "./insurancePolicy-firstDetails";
+import commissionDetail from "./commission-detail";
+import commissionApi from "@/api/business/commission";
+
+import insuranceAgentApi from "@/api/base/insuranceAgent";
+import insuranceDefinitionApi from "@/api/base/insuranceDefinition";
+
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  components: {
+    "insuranceJobs-detail": insuranceJobsDetail,
+    "commission-detail": commissionDetail
+  },
+  data() {
+    var self = this;
+
+    return {
+      queryModel: {
+        definitionId: "",
+        companyName: "",
+        promoter: "",
+        agentId: "",
+        createTimes: "",
+        fisinhTimes: "",
+        startTimes: ""
+      },
+      loading: false,
+      tableData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      showModal: false,
+      showCommissionModal: false,
+      modalTitle: "",
+      businessKey: "",
+      queryResult: [],
+      agentData: [],
+      tabStatus: "",
+      activeName: "all"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      if (tab.name == "all") {
+        this.tabStatus = "";
+      } else {
+        this.tabStatus = tab.name;
+      }
+      this.changePage(1);
+    },
+    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("isCommission", self.tabStatus);
+
+      formData.append("definitionId", self.queryModel.definitionId);
+      formData.append("companyName", self.queryModel.companyName);
+      formData.append("promoter", self.queryModel.promoter);
+      formData.append("agentId", self.queryModel.agentId);
+      var createTimes = self.queryModel.createTimes + "";
+      if (createTimes != null && createTimes != "") {
+        createTimes = createTimes.split(",");
+        formData.append("startCreat", createTimes[0]);
+        formData.append("endCreat", createTimes[1]);
+      }
+
+      var fisinhTimes = self.queryModel.fisinhTimes + "";
+      if (fisinhTimes != null && fisinhTimes != "") {
+        fisinhTimes = fisinhTimes.split(",");
+        formData.append("startFinish", fisinhTimes[0]);
+        formData.append("endFinish", fisinhTimes[1]);
+      }
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      commissionApi
+        .pageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.tableData = jsonData.data;
+          self.totalPages = jsonData.totalPage;
+          self.totalElements = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+
+      this.$nextTick(() => {
+        this.changePage(this.pageIndex);
+      });
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleReset(name) {
+      this.$refs[name].resetFields();
+    },
+    onDetailModalClose(refreshed) {
+      //保存成功后回调
+      this.showModal = false;
+      this.showCommissionModal = false;
+
+      if (refreshed) {
+        this.changePage(this.pageIndex);
+      }
+    },
+    loadSelectList() {
+      var formData = new FormData();
+
+      formData.append("type", "1");
+
+      insuranceAgentApi.list(formData).then(response => {
+        var jsonData = response.data;
+        this.agentData = jsonData.data;
+      });
+
+      insuranceDefinitionApi.list().then(response => {
+        var jsonData = response.data;
+        this.queryResult = jsonData.data;
+      });
+    },
+    commissionView(record) {
+      //查看详细信息
+      this.businessKey = record.id;
+      this.showCommissionModal = true;
+    },
+    downloadFile(record) {
+      //下载单子保单
+      var policyFile = record.insurancePolicyFile;
+      window.open(policyFile);
+    }
+  },
+  mounted: function() {
+    this.changePage(1);
+    this.loadSelectList();
+  }
+};
+</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;
+}
+</style>

src/views/business/commissionRccs-list.vue

@@ -0,0 +1,351 @@
+<template>
+  <div>
+    <el-breadcrumb separator=">">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="#">系统管理</a>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="/insuranceJobs">佣金管理</a>
+        <!-- 佣金管理 人才超市 -->
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-divider></el-divider>
+    <!--
+      要resetFields起作用，必须配置:model和prop
+    -->
+    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
+      <el-row>
+        <el-col>
+          <el-form-item label="投保险种" prop="definitionId">
+            <el-select
+              v-model="queryModel.definitionId"
+              filterable
+              placeholder="请选择"
+              style="width:200px"
+            >
+              <el-option
+                v-for="result in queryResult"
+                :key="result.id"
+                :label="result.name"
+                :value="result.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="企业名称" prop="companyName">
+            <el-input type="text" v-model="queryModel.companyName"></el-input>
+          </el-form-item>
+          <el-form-item label="推广员" prop="promoter">
+            <el-input type="text" v-model="queryModel.promoter"></el-input>
+          </el-form-item>
+          <el-form-item label="保险代理人" prop="agentId">
+            <el-select
+              v-model="queryModel.agentId"
+              filterable
+              placeholder="请选择"
+              style="width:200px"
+            >
+              <el-option
+                v-for="agent in agentData"
+                :key="agent.id "
+                :label="agent.name"
+                :value="agent.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col>
+          <el-form-item label="创建时间" prop="createTimes">
+            <el-date-picker
+              v-model="queryModel.createTimes"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="出单时间" prop="fisinhTimes">
+            <el-date-picker
+              v-model="queryModel.fisinhTimes"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="ios-search" @click="changePage(1)" :loading="loading">查询</el-button>&nbsp;
+            <el-button type="info" style="margin-left: 8px" @click="handleReset('queryForm')">重置</el-button>&nbsp;
+            <!-- <el-button type="primary" style="margin-left: 8px" @click="exportMessage">导出数据</el-button> -->
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-divider></el-divider>
+    <el-tabs v-model="activeName" type="card" activeName @tab-click="handleClick">
+      <el-tab-pane name="all">
+        <span slot="label">全部</span>
+      </el-tab-pane>
+      <el-tab-pane name="0">
+        <span slot="label">未录入佣金信息</span>
+      </el-tab-pane>
+      <el-tab-pane name="1">
+        <span slot="label">已录入佣金信息</span>
+      </el-tab-pane>
+      <el-table
+        :data="tableData"
+        style="min-height:400px;"
+        v-loading="loading"
+        stripe
+        @sort-change="sortChange"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="index" label="序号" :index="1"></el-table-column>
+        <el-table-column prop="policyNo" label="投保单号" width="200"></el-table-column>
+        <el-table-column prop="definition.name" label="投保险种" width="150"></el-table-column>
+        <el-table-column prop="company.name" label="企业名称" width="150"></el-table-column>
+        <el-table-column prop="insuranceFee" label="投保金额" width="100"></el-table-column>
+        <el-table-column  label="投保期间" width="200">
+          <template slot-scope="{row}">{{row.startTime}}至{{row.endTime}}</template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
+        <el-table-column prop="finishTime" label="出单时间" width="180"></el-table-column>
+        <el-table-column prop="commissionTime" label="佣金打款时间" width="180"></el-table-column>
+        <el-table-column prop="commission" label="佣金收益" width="100"></el-table-column>
+        <el-table-column prop="agent.name" label="保险代理人" width="100">
+          <template slot-scope="{row}">
+            {{row.agent.name}}
+            <p style="color:red">{{row.agentFee}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="company.promoter" label="社会推广员" width="100">
+          <template slot-scope="{row}">
+            {{row.company.promoter}}
+
+            <p style="color:red">{{row.promoterFee}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="250px">
+          <template slot-scope="{row}">
+            <el-button size="mini" type="info" @click="downloadFile(row)">下载电子保单</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tabs>
+    <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>
+    <insuranceJobs-detail
+      v-if="showModal"
+      :id="businessKey"
+      :policyId="policyId"
+      @close="onDetailModalClose"
+    ></insuranceJobs-detail>
+    <commission-detail
+      v-if="showCommissionModal"
+      :businessKey="businessKey"
+      @close="onDetailModalClose"
+    ></commission-detail>
+  </div>
+</template>
+<script>
+import Constant from "@/constant";
+import insuranceJobsDetail from "./insurancePolicy-firstDetails";
+import commissionDetail from "./commission-detail";
+import commissionApi from "@/api/business/commission";
+
+import insuranceAgentApi from "@/api/base/insuranceAgent";
+import insuranceDefinitionApi from "@/api/base/insuranceDefinition";
+
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  components: {
+    "insuranceJobs-detail": insuranceJobsDetail,
+    "commission-detail":commissionDetail
+  },
+  data() {
+    var self = this;
+
+    return {
+      queryModel: {
+        definitionId: "",
+        companyName: "",
+        promoter: "",
+        agentId: "",
+        createTimes:"",
+        fisinhTimes:"",
+        startTimes:""
+      },
+      loading: false,
+      tableData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      showModal: false,
+      showCommissionModal: false,
+      modalTitle: "",
+      businessKey: "",
+      queryResult: [],
+      agentData: [],
+      tabStatus: "",
+      activeName:"all"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      if (tab.name == "all") {
+        this.tabStatus = "";
+      } else {
+        this.tabStatus = tab.name;
+      }
+      this.changePage(1);
+    },
+    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("isCommission", self.tabStatus);
+
+      formData.append("definitionId", self.queryModel.definitionId);
+      formData.append("companyName", self.queryModel.companyName);
+      formData.append("promoter", self.queryModel.promoter);
+      formData.append("agentId", self.queryModel.agentId);
+      var createTimes = self.queryModel.createTimes + "";
+      if(createTimes != null && createTimes != ""){
+          createTimes = createTimes.split(",");
+          formData.append("startCreat", createTimes[0]);
+          formData.append("endCreat", createTimes[1]);
+      }
+      
+      var fisinhTimes = self.queryModel.fisinhTimes + "";
+      if(fisinhTimes != null && fisinhTimes != ""){
+          fisinhTimes = fisinhTimes.split(",");
+          formData.append("startFinish", fisinhTimes[0]);
+          formData.append("endFinish", fisinhTimes[1]);
+      }
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      commissionApi
+        .pageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.tableData = jsonData.data;
+          self.totalPages = jsonData.totalPage;
+          self.totalElements = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+
+      this.$nextTick(() => {
+        this.changePage(this.pageIndex);
+      });
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleReset(name) {
+      this.$refs[name].resetFields();
+    },
+    onDetailModalClose(refreshed) {
+      //保存成功后回调
+      this.showModal = false;
+      this.showCommissionModal = false;
+
+      if (refreshed) {
+        this.changePage(this.pageIndex);
+      }
+    },
+    loadSelectList() {
+      var formData = new FormData();
+
+      formData.append("type", "1");
+
+      insuranceAgentApi.list(formData).then(response => {
+        var jsonData = response.data;
+        this.agentData = jsonData.data;
+      });
+
+      insuranceDefinitionApi.list().then(response => {
+        var jsonData = response.data;
+        this.queryResult = jsonData.data;
+      });
+    },
+    downloadFile(record) {
+      //下载单子保单
+      var policyFile = record.insurancePolicyFile;
+      window.open(policyFile);
+    },
+    exportMessage(){
+      //导出
+    }
+  },
+  mounted: function() {
+    this.changePage(1);
+    this.loadSelectList();
+  }
+};
+</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;
+}
+</style>

src/views/business/historicalInsurance-list.vue

@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <el-breadcrumb separator=">">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="#">系统管理</a>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="/insuranceJobs">历史投保管理</a>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-divider></el-divider>
+    <!--
+      要resetFields起作用，必须配置:model和prop
+    -->
+    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
+      <el-row>
+        <el-col>
+          <el-form-item label="投保险种" prop="definitionId">
+            <el-select
+              v-model="queryModel.definitionId"
+              filterable
+              placeholder="请选择"
+              style="width:200px"
+            >
+              <el-option
+                v-for="result in queryResult"
+                :key="result.id"
+                :label="result.name"
+                :value="result.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="企业名称" prop="companyName">
+            <el-input type="text" v-model="queryModel.companyName"></el-input>
+          </el-form-item>
+          <el-form-item label="推广员" prop="promoter">
+            <el-input type="text" v-model="queryModel.promoter"></el-input>
+          </el-form-item>
+          <el-form-item label="保险代理人" prop="agentId">
+            <el-select
+              v-model="queryModel.agentId"
+              filterable
+              placeholder="请选择"
+              style="width:200px"
+            >
+              <el-option
+                v-for="agent in agentData"
+                :key="agent.id "
+                :label="agent.name"
+                :value="agent.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col>
+          <el-form-item label="创建时间" prop="createTimes">
+            <el-date-picker
+              v-model="queryModel.createTimes"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="出单时间" prop="fisinhTimes">
+            <el-date-picker
+              v-model="queryModel.fisinhTimes"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="ios-search" @click="changePage(1)" :loading="loading">查询</el-button>&nbsp;
+            <el-button type="info" style="margin-left: 8px" @click="handleReset('queryForm')">重置</el-button>&nbsp;
+            <!-- <el-button type="primary" style="margin-left: 8px" @click="exportMessage">导出数据</el-button> -->
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-divider></el-divider>
+    <el-table
+      :data="tableData"
+      style="min-height:400px;"
+      v-loading="loading"
+      show-summary
+      stripe
+      @sort-change="sortChange"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="index" label="序号" :index="1" width="80"></el-table-column>
+      <el-table-column prop="policyNo" label="投保单号" width="200"></el-table-column>
+      <el-table-column prop="definition.name" label="投保险种" width="150"></el-table-column>
+      <el-table-column prop="company.name" label="企业名称" width="150"></el-table-column>
+      <el-table-column prop="company.promoter" label="社会推广员" width="100"></el-table-column>
+      <el-table-column prop="agent.name" label="保险代理人" width="100"></el-table-column>
+      <el-table-column prop="jobs.name" label="投保期间" width="200">
+        <template slot-scope="{row}">{{row.startTime}}-{{row.endTime}}</template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
+      <el-table-column prop="finishTime" label="出单时间" width="200"></el-table-column>
+      <el-table-column prop="insuranceFee" label="保单金额" width="100"></el-table-column>
+      <el-table-column prop="commission" label="佣金金额" width="100"></el-table-column>
+      <el-table-column label="操作" width="250px">
+        <template slot-scope="{row}">
+          <el-row>
+            <el-col :span="9">
+              <el-button size="mini" type="success" @click="openView(row)">保单详情</el-button>
+            </el-col>
+            <el-col :span="9">
+              <el-button size="mini" type="info" @click="downloadFile(row)">下载电子保单</el-button>
+            </el-col>
+          </el-row>
+        </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>
+    <insuranceJobs-detail
+      v-if="showModal"
+      :id="id"
+      :policyId="policyId"
+      @close="onDetailModalClose"
+    ></insuranceJobs-detail>
+  </div>
+</template>
+<script>
+import Constant from "@/constant";
+import insuranceJobsDetail from "./insurancePolicy-firstDetails";
+import historicalInsuranceApi from "@/api/business/historicalInsurance";
+import insuranceAgentApi from "@/api/base/insuranceAgent";
+import insuranceDefinitionApi from "@/api/base/insuranceDefinition";
+
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  components: {
+    "insuranceJobs-detail": insuranceJobsDetail
+  },
+  data() {
+    var self = this;
+
+    return {
+      queryModel: {
+        definitionId: "",
+        companyName: "",
+        promoter: "",
+        agentId: "",
+        createTimes: "",
+        fisinhTimes: "",
+        startTimes: ""
+      },
+      loading: false,
+      tableData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      showModal: false,
+      modalTitle: "",
+      businessKey: "",
+      queryResult: [],
+      agentData: []
+    };
+  },
+  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("definitionId", self.queryModel.definitionId);
+      formData.append("companyName", self.queryModel.companyName);
+      formData.append("promoter", self.queryModel.promoter);
+      formData.append("agentId", self.queryModel.agentId);
+      var createTimes = self.queryModel.createTimes + "";
+      if (createTimes != null && createTimes != "") {
+        createTimes = createTimes.split(",");
+        formData.append("startCreat", createTimes[0]);
+        formData.append("endCreat", createTimes[1]);
+      }
+
+      var fisinhTimes = self.queryModel.fisinhTimes + "";
+      if (fisinhTimes != null && fisinhTimes != "") {
+        fisinhTimes = fisinhTimes.split(",");
+        formData.append("startFinish", fisinhTimes[0]);
+        formData.append("endFinish", fisinhTimes[1]);
+      }
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      historicalInsuranceApi
+        .pageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.tableData = jsonData.data;
+          self.totalPages = jsonData.totalPage;
+          self.totalElements = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+
+      this.$nextTick(() => {
+        this.changePage(this.pageIndex);
+      });
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleReset(name) {
+      this.$refs[name].resetFields();
+    },
+    onDetailModalClose(refreshed) {
+      //保存成功后回调
+      this.showModal = false;
+
+      if (refreshed) {
+        this.changePage(this.pageIndex);
+      }
+    },
+    loadSelectList() {
+      var formData = new FormData();
+
+      formData.append("type", "1");
+
+      insuranceAgentApi.list(formData).then(response => {
+        var jsonData = response.data;
+        this.agentData = jsonData.data;
+      });
+
+      insuranceDefinitionApi.list().then(response => {
+        var jsonData = response.data;
+        this.queryResult = jsonData.data;
+      });
+    },
+    openView(record) {
+      //查看详细信息
+      this.id = record.latestApplicationId;
+      this.policyId = record.id;
+      this.showModal = true;
+    },
+    downloadFile(record) {
+      //下载单子保单
+      var policyFile = record.insurancePolicyFile;
+      window.open(policyFile);
+    },
+    exportMessage() {}
+  },
+  mounted: function() {
+    this.changePage(1);
+    this.loadSelectList();
+  }
+};
+</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;
+}
+</style>

yarn.lock

@@ -2178,6 +2178,11 @@ clone@^1.0.2:
   resolved "https://registry.npm.taobao.org/clone/download/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npm.taobao.org/coa/download/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -3301,6 +3306,11 @@ event-pubsub@4.3.0:
   resolved "https://registry.npm.taobao.org/event-pubsub/download/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
   integrity sha1-9o2Ba8KfHsAsU53FjI3UDOcss24=
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+
 eventemitter3@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
@@ -3432,7 +3442,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=
@@ -3475,6 +3485,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-2.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
 fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.npm.taobao.org/fast-glob/download/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -6047,6 +6062,11 @@ param-case@2.1.x:
   dependencies:
     no-case "^2.2.0"
 
+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6777,6 +6797,27 @@ querystringify@^2.1.1:
   resolved "https://registry.npm.taobao.org/querystringify/download/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
   integrity sha1-YOWl/WSn+L+k0qsu1v30yFutFU4=
 
+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill@^1.3.4:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -8410,6 +8451,14 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-quill-editor@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz#1f85646211d68a31a80a72cb7f45bb2f119bc8fb"
+  integrity sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==
+  dependencies:
+    object-assign "^4.1.1"
+    quill "^1.3.4"
+
 vue-router@^3.0.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.3.tgz#e6b14fabc0c0ee9fda0e2cbbda74b350e28e412b"