保单查询增加详情页面

src/components/TemplateForm/index.vue

@@ -1,18 +1,18 @@
 <template>
     <el-form :model="formData" 
-    :rules="rules"
      ref="publicForm" :inline="true" size="small" >
         <el-row :gutter="20"> 
             <el-col :span="8" v-for="f in ruleForm" :key="f.prop">
-                <el-form-item :label="f.label" :prop="f.prop" label-width="120px" >
+                <el-form-item :label="f.label" :prop="f.prop" :label-width="labelWidth||'120px'" >
                     <template>
                         <template v-if="f.type === 'input'">
                             <el-input
+                                size="small"
                                 v-model="formData[f.prop]"
                                 :readonly="f.readonly"
-                                :type="f.type ?? 'text'"
+                                :type="f.type ?f.type: ''"
                                 :placeholder="'请输入' + f.label"
-                                :disabled="f.disabled" 
+                                :disabled="f.disabled || false"
                                 :showPassword="f.showPassword"
                                 :clearable="f.clearable||true"/>
                         </template>
@@ -79,7 +79,7 @@
                             ></el-date-picker>
                             </template>
                         <!-- 日期范围选择器 -->
-                        <template v-else-if="item.type === 'daterange'">
+                        <template v-else-if="f.type === 'daterange'">
                             <el-date-picker
                                 type="daterange"
                                 :placeholder="'请输入' + f.label"
@@ -155,9 +155,9 @@ export default {
             type: Object,
             default: {}
         },
-        rules: {
-            type: Object,
-            default: {}
+        labelWidth: {
+            type: String,
+            default: ''
         },
     },
     data() {

src/views/FinancialManagement/OfflinePolicy/PolicyInquiry.vue

@@ -20,16 +20,258 @@
      ></el-cascader>
     </template>
     </templateTable>
+    <el-dialog
+      title="详情"
+      width="1400px"
+      :visible.sync="dialogVisible"
+     >
+     <templateForm :ruleForm="ruleForm" :formData="formData" :labelWidth="labelWidth"></templateForm>
+    </el-dialog>
   </div>
 </template>
 <script>
 import templateTable from "@/components/TemplateTable/index.vue";
+import templateForm from "@/components/TemplateForm/index.vue";
+
 export default {
   name: "policyImport",
-  components: { templateTable },
+  components: { templateTable,templateForm },
   data() {
     return {
       deptId:'',
+      formData:{},
+      labelWidth:'180px',
+      ruleForm:[
+        {
+          label:'保险公司编码',
+          prop:'companyId',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'保险公司名称',
+          prop:'companyName',
+          type:'input',
+          disabled:true
+        }, {
+          label:'协议号',
+          prop:'agreementId',
+          type:'input',
+          disabled:true
+        }, {
+          label:'订单号',
+          prop:'orderno',
+          type:'input',
+          disabled:true
+        }, {
+          label:'保单号',
+          prop:'policyno',
+          type:'input',
+          disabled:true
+        }, {
+          label:'机构代码',
+          prop:'deptId',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'机构名称',
+          prop:'deptName',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'业务员工号',
+          prop:'userId',
+          type:'input',
+          disabled:true
+        }, {
+          label:'业务员姓名',
+          prop:'userName',
+          type:'input',
+          disabled:true
+        }, {
+          label:'险种',
+          prop:'riskcode',
+          type:'input',
+          disabled:true
+        }, {
+          label:'车牌号',
+          prop:'licenseno',
+          type:'input',
+          disabled:true
+        }, {
+          label:'投保人',
+          prop:'applyname',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'投保人联系方式',
+          prop:'applyphone',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'被保人',
+          prop:'insurername',
+          type:'input',
+          disabled:true
+        }, {
+          label:'被保人联系方式',
+          prop:'insurerphone',
+          type:'input',
+          disabled:true
+        }, {
+          label:'出单时间',
+          prop:'payDate',
+          type:'input',
+          disabled:true
+        }, {
+          label:'起保时间',
+          prop:'startDate',
+          type:'input',
+          disabled:true
+        }, {
+          label:'终保时间',
+          prop:'endDate',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'车船税',
+          prop:'taxamount',
+          type:'input',
+          disabled:true
+        }, {
+          label:'保费',
+          prop:'premium',
+          type:'input',
+          disabled:true
+        }, {
+          label:'不含税保费',
+          prop:'noTaxPremium',
+          type:'input',
+          disabled:true
+        }, {
+          label:'手续费费用比例（%）',
+          prop:'commissionFeerate',
+          type:'input',
+          disabled:true
+        }, {
+          label:'手续费费用',
+          prop:'commissionFeevalue',
+          type:'input',
+          disabled:true
+        }, {
+          label:'其他费用比例（%）',
+          prop:'otherFeerate',
+          type:'input',
+          disabled:true
+        }, {
+          label:'其他费用',
+          prop:'otherFeevalue',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'一级机构管理费比例（%）',
+          prop:'firstDeptProportion',
+          type:'input',
+          disabled:true
+        }, {
+          label:'一级机构管理费',
+          prop:'firstDeptPremiums',
+          type:'input',
+          disabled:true
+        }, {
+          label:'二级机构管理费比例（%）',
+          prop:'secondDeptProportion',
+          type:'input',
+          disabled:true
+        }, 
+        {
+          label:'二级机构管理费',
+          prop:'secondDeptPremiums',
+          type:'input',
+          disabled:true
+        }, {
+          label:'三级机构管理费比例（%）',
+          prop:'thirdDeptProportion',
+          type:'input',
+          disabled:true
+        }, {
+          label:'三级机构管理费',
+          prop:'thirdDeptPremiums',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'四级机构管理费比例（%）',
+          prop:'forthDeptProportion',
+          type:'input',
+          disabled:true
+        }, {
+          label:'四级机构管理费',
+          prop:'forthDeptPremiums',
+          type:'input',
+          disabled:true
+        }, {
+          label:'五级机构管理费比例（%）',
+          prop:'fifthDeptProportion',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'五级机构管理费',
+          prop:'fifthDeptPremiums',
+          type:'input',
+          disabled:true
+        }, {
+          label:'一级分销费比例（%）',
+          prop:'firstDetailProportion',
+          type:'input',
+          disabled:true
+        }, {
+          label:'一级分销费',
+          prop:'firstDetailPremiums',
+          type:'input',
+          disabled:true
+        }, {
+          label:'二级分销费比例（%）',
+          prop:'secondDetailProportion',
+          type:'input',
+          disabled:true
+        }, {
+          label:'二级分销费',
+          prop:'secondDetailPremiums',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'三级分销费比例（%）',
+          prop:'thirdDetailProportion',
+          type:'input',
+          disabled:true
+        },
+        {
+          label:'三级分销费',
+          prop:'thirdDetailPremiums',
+          type:'input',
+          disabled:true
+        }, {
+          label:'业务员结算比例（%）',
+          prop:'userFeeProportion',
+          type:'input',
+          disabled:true
+        }, {
+          label:'业务员结算金额',
+          prop:'userFeelPremiums',
+          type:'input',
+          disabled:true
+        }, 
+      ],
+      dialogVisible: false,
       formList: [
         {
           label: "保险公司",
@@ -67,6 +309,11 @@ export default {
       tableData: [],
       tableConfig: {
         columns: [
+          {
+            prop: "policyno",
+            label: "保单号",
+            type: "text"
+          },
           {
             prop: "companyName",
             label: "保险公司名称",
@@ -102,12 +349,18 @@ export default {
             label: "出单时间",
             type: "text"
           },
-         
-       
-         
         ],
         loading: true,
-        isPaginationShow: true
+        isPaginationShow: true,
+        optBtns: [
+          {
+            type: "primary",
+            label: "详情",
+            click: (row, index) => {
+              return this.handleTableView(row);
+            },
+          },
+        ],
       },
       options:[]
     };
@@ -145,6 +398,10 @@ export default {
     },
     handleBaseValue(val){
       this.deptId= val[val.length - 1];
+    },
+    handleTableView(row){
+      this.formData=row
+      this.dialogVisible=true
     }
   }
 };