费用结算模块测试问题修改

src/views/FinancialManagement/AcountWithdrawal/ExtendFee.vue

@@ -1,147 +1,256 @@
 <template>
-	<div>
-		<el-main ref="elMain" style="padding: 0px;">
-		  <!-- 搜索区域Start -->
-      <el-form class="queryForm" ref="queryFormRef" :model="queryForm" label-width="80px">
-        <el-row style="margin-bottom: 15px;">
+  <div>
+      <!-- 搜索区域Start -->
+      <el-form
+        class="queryForm"
+        ref="queryFormRef"
+        :inline="true"
+        size="small"
+        :model="queryForm"
+        label-width="80px"
+      >
+        <el-row >
           <el-col :span="8">
-            <el-form-item label="录入时间">
-              <el-date-picker style="margin-left: 20px;width:90%" size="small" v-model="queryForm.date" type="daterange" align="left"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-                  </el-date-picker>
+            <el-form-item label="机构编码">
+              <el-input style="width: 220px;"
+                clearable
+                placeholder="机构编码"
+                v-model="queryForm.deptid"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="工号">
+              <el-input style="width: 220px;"
+                clearable
+                placeholder="工号"
+                v-model="queryForm.userid"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="保单号">
+              <el-input style="width: 220px;"
+                clearable
+                placeholder="保单号"
+                v-model="queryForm.policyno"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="姓名">
+              <el-input style="width: 220px;"
+                clearable
+                placeholder="姓名"
+                v-model="queryForm.username"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="车牌号">
+              <el-input style="width: 220px;"
+                clearable
+                placeholder="车牌号"
+                v-model="queryForm.licenseNo"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="保险公司">
+              <el-select style="width: 220px;"
+                v-model="queryForm.inscompany"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option label="华农财险" value="华农财险"></el-option>
+                <el-option label="恒邦财险" value="恒邦财险"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出单时间">
+              <el-date-picker style="width: 220px;"
+                size="small"
+                v-model="queryForm.date"
+                type="daterange"
+                align="left"
+                @change="dateChange"
+                range-separator="至"
+                value-format="yyyy-MM-dd"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item>
-              <el-button @click="findPage" size="small">查询</el-button>
+              <el-button @click="queryEsmInfo" size="small">查询</el-button>
             </el-form-item>
           </el-col>
         </el-row>
-       </el-form>
-
-       <kt-common-table permsDelete="sys:user:delete"  :showBatchDelete="false"  :showBatchPrint="true"   permsButton3="sys:user:edit" :data="pageResult" :columns="columns" @findPage="findPage" :showOperation="false" @handlePrint="handlePrint">
-        </kt-common-table>
-		</el-main>
-
-
-	</div>
+      </el-form>
+      <kt-common-table
+        permsDelete="sys:user:delete"
+        :showBatchDelete="false"
+        :showBatchPrint="true"
+        permsButton3="sys:user:edit"
+        :data="pageResult"
+        :columns="columns"
+        @findPage="findPage"
+        :showOperation="false"
+        @handlePrint="handlePrint"
+      >
+      </kt-common-table>
+  </div>
 </template>
 <script>
-	import KtCommonTable from "@/views/Core/KtCommonTable.vue";//表格组件
-	import KtButton from "@/views/Core/KtButton";
-  import CommonUtil from "@/utils/comutil.js";
-  import { formatWithSeperator,format } from "@/utils/datetime.js";
-	export default {
-		components: {
-			KtCommonTable,
-			KtButton
-		},
-		data() {
-			return {
-        // 右侧列表查询数据Start
-        queryForm:{},
-        pageResult: {},
-        pageRequest: {  //查询的默认条件
-          pageNum: 1,
-          pageSize: 10,
-          columnFilters: {
-            "userid": {
-              "name": "userid",
-              "value": ""
-            },
-            "orderno": {
-              "name": "orderno",
-              "value": ""
-            },
-          }
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import KtButton from "@/views/Core/KtButton";
+import CommonUtil from "@/utils/comutil.js";
+import { formatWithSeperator, format } from "@/utils/datetime.js";
+export default {
+  components: {
+    KtCommonTable,
+    KtButton,
+  },
+  data() {
+    return {
+      // 右侧列表查询数据Start
+      queryForm: {},
+      pageResult: {},
+      pageRequest: {
+        //查询的默认条件
+        pageNum: 1,
+        pageSize: 10,
+        columnFilters: {
+          deptid: {
+            name: "deptid",
+            value: "",
+          },
+          userid: {
+            name: "userid",
+            value: "",
+          },
+          policyno: {
+            name: "policyno",
+            value: "",
+          },
+          username: {
+            name: "username",
+            value: "",
+          },
+          licenseNo: {
+            name: "licenseNo",
+            value: "",
+          },
+          inscompany: {
+            name: "inscompany",
+            value: "",
+          },
+          startdate: {
+            name: "startdate",
+            value: "",
+          },
+          enddate: {
+            name: "enddate",
+            value: "",
+          },
         },
-        columns:[ //数据列
-          {prop: "orderno",label: "订单号",minWidth: 120},
-          {prop: "quoteno",label: "报价号",minWidth: 100},
-          {prop: "refereescode",label: "工号",minWidth: 100},
-          {prop: "refereesname",label: "姓名",minWidth: 100},
-          {prop: "commissionrate",label: "佣金比例",minWidth: 100},
-          {prop: "commissionamount",label: "佣金金额",minWidth: 100},
-          {prop: "level",label: "佣金级别",minWidth: 100}
-        ],
-        //------------协议下拉框数据   begin-----------------
-        agreementtypeoptions: [], //协议类型
-        //------------协议下拉框数据   end-----------------
-			};
-		},
-    created() {
-        //获取所有下拉框数据
-        this.getDictItems("agreementtype");
-    },
-	mounted() {
-
-	},
-	methods: {
-		handlePrint(){
-			this.$api.task.excelExport(this.pageRequest).then(res=>{
-				console.log(res)
-					let blob = new Blob([res], {
-						type: "application/vnd.ms-excel"
-					}); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
-					let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
-					// 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
-					let a = document.createElement("a");
-					a.href = url;
-					a.download = "推广费用清单.xlsx";
-					a.click();
-					// 5.释放这个临时的对象url
-					window.URL.revokeObjectURL(url);					
-			})
-		},
-			
-      //-- formatter begin--
-      statusFormatter(row, column) { //协议类型
-          return "提现成功"
-      },
-      //-- formatter end--
-
-
-      //--数据字典 begin --
-      getDictItems: function(typeName) {
-        let that = this;
-        that.$api.dict.findByLableName(typeName)
-          .then(function(res) {
-            that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
-          })
-          .catch(function(error) {
-            that[typeName + "options"] = [];
-          });
       },
-      //--数据字典 end --
+      columns: [
+        //数据列
+        { prop: "orderno", label: "订单号", minWidth: 120 },
+        { prop: "policyno", label: "保单号", minWidth: 100 },
+        { prop: "licenseno", label: "车牌号", minWidth: 100 },
+        { prop: "riskcode", label: "险种", minWidth: 100 },
+        { prop: "deptname", label: "机构", minWidth: 100 },
+        { prop: "inscompany", label: "保险公司", minWidth: 100 },
+        { prop: "refereescode", label: "工号", minWidth: 100 },
+        { prop: "refereesname", label: "姓名", minWidth: 100 },
+        { prop: "commissionrate", label: "佣金比例", minWidth: 100 },
+        { prop: "commissionamount", label: "佣金金额", minWidth: 100 },
+        { prop: "level", label: "佣金级别", minWidth: 100 },
+      ],
+      //------------协议下拉框数据   begin-----------------
+      agreementtypeoptions: [], //协议类型
+      //------------协议下拉框数据   end-----------------
+    };
+  },
+  created() {
+    //获取所有下拉框数据
+    this.getDictItems("agreementtype");
+  },
+  mounted() {},
+  methods: {
+    handlePrint() {
+      this.$api.task.excelExport(this.pageRequest).then((res) => {
+        console.log(res);
+        let blob = new Blob([res], {
+          type: "application/vnd.ms-excel",
+        }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
+        let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
+        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = "推广费用清单.xlsx";
+        a.click();
+        // 5.释放这个临时的对象url
+        window.URL.revokeObjectURL(url);
+      });
+    },
 
-      // 右侧列表的方法Start
-      findPage(data) {
-        // 获取分页数据
-       let that = this;
-       if(data && data.pageRequest){
-         this.pageRequest.pageNum = data.pageRequest.pageNum;
-         this.pageRequest.pageSize = data.pageRequest.pageSize;
-       }
-       that.$api.task.queryCommission(that.pageRequest)
-         .then(res => {
-           console.log(res.data)
-           that.pageResult = res.data;
-         })
-         .then(data != null ? data.callback : "");
+    //-- formatter begin--
+    statusFormatter(row, column) {
+      //协议类型
+      return "提现成功";
+    },
+    //-- formatter end--
+    dateChange(e){
+      this.pageRequest.columnFilters.startdate.value=e[0];
+      this.pageRequest.columnFilters.enddate.value=e[1];
+    },
+    //--数据字典 begin --
+    getDictItems: function (typeName) {
+      let that = this;
+      that.$api.dict
+        .findByLableName(typeName)
+        .then(function (res) {
+          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
+        })
+        .catch(function (error) {
+          that[typeName + "options"] = [];
+        });
+    },
+    //--数据字典 end --
+    queryEsmInfo() {
+      this.pageRequest.columnFilters.deptid.value = this.queryForm.deptid;
+      this.pageRequest.columnFilters.userid.value = this.queryForm.userid;
+      this.pageRequest.columnFilters.policyno.value = this.queryForm.policyno;
+      this.pageRequest.columnFilters.username.value = this.queryForm.username;
+      this.pageRequest.columnFilters.licenseNo.value = this.queryForm.licenseNo;
+      this.pageRequest.columnFilters.inscompany.value = this.queryForm.inscompany;
+      this.pageRequest.pageNum = 1;
+      this.findPage();
+    },
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNum = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
       }
-		}
-	};
+      that.$api.task
+        .queryCommission(that.pageRequest)
+        .then((res) => {
+          that.pageResult = res.data;
+        })
+        .then(data != null ? data.callback : "");
+    },
+  },
+};
 </script>
-
-
 <style scoped>
-  .el-divider{
-    margin: 10px 0px 15px!important;
-  }
-  .queryForm .el-row {
-    margin:0px;
-  }
 
-  .queryForm .el-form-item {
-    margin-bottom: 0px;
-  }
 </style>

src/views/FinancialManagement/CarInsurance/DeptSettlement/CommissionList.vue

@@ -1,265 +1,351 @@
 <template>
-	<div>
-    <div class="basicdata u-f u-f-ajc" v-if="peopleid!='admin'">
-      <div class="u-f-ajc u-f1 u-f-column" :style="'background:'+basicItem.bgColor" v-for="(basicItem,basicIndex) in basicdata" :key="basicIndex">
-        <div style="font-size: 14px;color: #666;line-height: 1;color: #fff;">{{basicItem.title}}</div>
-        <div style="font-size: 22px;font-weight: 700;color: #333;line-height: 1;margin-top: 15px;color: #fff;">￥{{basicItem.money}}</div>
+  <div>
+    <div class="basicdata u-f u-f-ajc" v-if="peopleid != 'admin'">
+      <div
+        class="u-f-ajc u-f1 u-f-column"
+        :style="'background:' + basicItem.bgColor"
+        v-for="(basicItem, basicIndex) in basicdata"
+        :key="basicIndex"
+      >
+        <div style="font-size: 14px; color: #666; line-height: 1; color: #fff">
+          {{ basicItem.title }}
+        </div>
+        <div
+          style="
+            font-size: 22px;
+            font-weight: 700;
+            color: #333;
+            line-height: 1;
+            margin-top: 15px;
+            color: #fff;
+          "
+        >
+          ￥{{ basicItem.money }}
+        </div>
+      </div>
+      <div
+        class="u-f-ajc"
+        style="width: 150px; flex-shrink: 1; background: #e3e3e3"
+      >
+        <el-button type="primary" size="small" @click="openVisible"
+          >提现</el-button
+        >
       </div>
-      <div class="u-f-ajc" style="width: 150px;flex-shrink: 1;background: #e3e3e3;"><el-button type="primary" size="small" @click="openVisible">提现</el-button></div>
     </div>
 
-    <el-form class="queryForm" ref="queryFormRef" :model="queryForm" label-width="80px">
-     <el-row style="margin-bottom: 15px;">
-       <el-col :span="4">
-         <el-form-item label="订单号">
-           <el-input size="small" clearable placeholder="订单号" v-model="queryForm.orderno"></el-input>
-         </el-form-item>
-       </el-col>
-	   <el-col :span="4">
-	     <el-form-item label="机构编码">
-	       <el-input size="small" clearable placeholder="机构编码" v-model="queryForm.comcode"></el-input>
-	     </el-form-item>
-	   </el-col>
-	   <el-col :span="4">
-	     <el-form-item label="机构级别">
-			 <el-select size="small"  v-model="queryForm.comlevel" placeholder="请选择"  >
-			   <el-option label="一级" value="一级"></el-option>
-			   <el-option label="二级" value="二级"></el-option>
-			   <el-option label="三级" value="三级"></el-option>
-			   <el-option label="四级" value="四级"></el-option>
-			   <el-option label="五级" value="五级"></el-option>
-			 </el-select>
-	     </el-form-item>
-	   </el-col>
-	   <el-col :span="4">
-	     <el-form-item label="车牌号">
-	       <el-input size="small" clearable placeholder="车牌号" v-model="queryForm.licenseno"></el-input>
-	     </el-form-item>
-	   </el-col>
-       <el-col :span="4">
-         <el-form-item label-width="20px">
-           <el-button @click="getOrderList" size="small">查询</el-button>
-         </el-form-item>
-       </el-col>
-     </el-row>
+    <el-form
+      class="queryForm"
+      ref="queryFormRef"
+      :model="queryForm"
+      label-width="80px"
+    >
+      <el-row style="margin-bottom: 15px">
+        <el-col :span="4">
+          <el-form-item label="订单号">
+            <el-input
+              size="small"
+              clearable
+              placeholder="订单号"
+              v-model="queryForm.orderno"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="机构编码">
+            <el-input
+              size="small"
+              clearable
+              placeholder="机构编码"
+              v-model="queryForm.comcode"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="机构级别">
+            <el-select
+              size="small"
+              v-model="queryForm.comlevel"
+              placeholder="请选择"
+            >
+              <el-option label="一级" value="一级"></el-option>
+              <el-option label="二级" value="二级"></el-option>
+              <el-option label="三级" value="三级"></el-option>
+              <el-option label="四级" value="四级"></el-option>
+              <el-option label="五级" value="五级"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="保单号">
+            <el-input
+              size="small"
+              clearable
+              placeholder="车牌号"
+              v-model="queryForm.policyno"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="车牌号">
+            <el-input
+              size="small"
+              clearable
+              placeholder="车牌号"
+              v-model="queryForm.licenseno"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label-width="20px">
+            <el-button @click="getOrderList" size="small">查询</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
-    <kt-common-table permsDelete="sys:user:delete"  :showBatchDelete="false"  :showBatchPrint="true"   permsButton3="sys:user:edit" :data="pageResult" :columns="columns" @findPage="findPage" :showOperation="false" @handlePrint="handlePrint">
-     </kt-common-table>
-
-
-
-     <el-dialog v-dialogDrag title="提现" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" @close="closeVisible">
-       <div style="color: red;">提现最低100元，最高不超过可提现金额（只可提取整数部分）</div>
-       <div>
-         <div style="font-size: 16px;margin: 20px 0;">
-           提现工号：{{peopleid}}
-         </div>
-         <div style="font-size: 16px;margin: 20px 0;">
-           可提现金额：{{canwithdrawal}}
-         </div>
-         <div style="font-size: 16px;margin: 20px 0;">
-           提现金额：<el-input-number size="medium" v-model="withdrawal" :precision="0" :min="100" :max="canwithdrawal"  :step="1000" ></el-input-number>
-         </div>
-       </div>
-       <span slot="footer" class="dialog-footer">
-         <el-button size="small" @click="dialogVisible = false">取 消</el-button>
-         <el-button size="small" type="primary" @click="toWithdrawal">确 定</el-button>
-       </span>
-     </el-dialog>
+    <kt-common-table
+      permsDelete="sys:user:delete"
+      :showBatchDelete="false"
+      :showBatchPrint="true"
+      permsButton3="sys:user:edit"
+      :data="pageResult"
+      :columns="columns"
+      @findPage="findPage"
+      :showOperation="false"
+      @handlePrint="handlePrint"
+    >
+    </kt-common-table>
 
-
-
-	</div>
+    <el-dialog
+      v-dialogDrag
+      title="提现"
+      :visible.sync="dialogVisible"
+      width="600px"
+      :before-close="handleClose"
+      @close="closeVisible"
+    >
+      <div style="color: red">
+        提现最低100元，最高不超过可提现金额（只可提取整数部分）
+      </div>
+      <div>
+        <div style="font-size: 16px; margin: 20px 0">
+          提现工号：{{ peopleid }}
+        </div>
+        <div style="font-size: 16px; margin: 20px 0">
+          可提现金额：{{ canwithdrawal }}
+        </div>
+        <div style="font-size: 16px; margin: 20px 0">
+          提现金额：<el-input-number
+            size="medium"
+            v-model="withdrawal"
+            :precision="0"
+            :min="100"
+            :max="canwithdrawal"
+            :step="1000"
+          ></el-input-number>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="toWithdrawal"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
-import KtCommonTable from "@/views/Core/KtCommonTable.vue";//表格组件
-import Cookies from "js-cookie"
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import Cookies from "js-cookie";
 export default {
   components: {
-    KtCommonTable
+    KtCommonTable,
   },
   data() {
     return {
-      canwithdrawal:"",
-      withdrawal:"",
+      canwithdrawal: "",
+      withdrawal: "",
 
-      peopleid:"",
-      peopledeptid:"",
+      peopleid: "",
+      peopledeptid: "",
 
-      dialogVisible: false,//提现对话框
+      dialogVisible: false, //提现对话框
 
-      basicdata:[
-        {title:"可提现余额",money:"0.00",bgColor:'#FFC958',color:'#fff'},
-        {title:"提现中",money:"0.00",bgColor:'#9DC9F2',color:'#fff'},
-        {title:"累计提现",money:"0.00",bgColor:'#C464E0',color:'#fff'},
-        {title:"已到账",money:"0.00",bgColor:'#64AF1C',color:'#fff'},
+      basicdata: [
+        {
+          title: "可提现余额",
+          money: "0.00",
+          bgColor: "#FFC958",
+          color: "#fff",
+        },
+        { title: "提现中", money: "0.00", bgColor: "#9DC9F2", color: "#fff" },
+        { title: "累计提现", money: "0.00", bgColor: "#C464E0", color: "#fff" },
+        { title: "已到账", money: "0.00", bgColor: "#64AF1C", color: "#fff" },
       ],
 
-      queryForm:{},
+      queryForm: {},
       pageResult: {},
-      pageRequest: {  //查询的默认条件
+      pageRequest: {
+        //查询的默认条件
         pageNum: 1,
         pageSize: 10,
         columnFilters: {
-          "orderno": {
-            "name": "orderno",
-            "value": ""
+          orderno: {
+            name: "orderno",
+            value: "",
           },
-          "auditstatus": {
-            "name": "auditstatus",
-            "value": "1"
+          policyno: {
+            name: "policyno",
+            value: "",
           },
-          "deptid": {
-            "name": "deptid",
-            "value": ""
+
+          comcode: {
+            name: "comcode",
+            value: "",
           },
-		  "comcode": {
-		    "name": "comcode",
-		    "value": ""
-		  },
-		  "comlevel": {
-		    "name": "comlevel",
-		    "value": ""
-		  },
-		  "licenseno": {
-		    "name": "licenseno",
-		    "value": ""
-		  }
-        }
+          comlevel: {
+            name: "comlevel",
+            value: "",
+          },
+          licenseno: {
+            name: "licenseno",
+            value: "",
+          },
+        },
       },
-      columns:[ //数据列
-        {prop: "orderno",label: "订单号",minWidth: 160},
-        {prop: "quoteno",label: "报价号",minWidth: 120},
-        {prop: "licenseno",label: "车牌号",minWidth: 90},
-        {prop: "agreeid",label: "协议号",minWidth: 160},
-        {prop: "comlevel",label: "机构级别",minWidth: 100},
-        {prop: "comcode",label: "机构编码",minWidth: 120},
-        {prop: "keeprate",label: "佣金费用",minWidth: 100},
-        {prop: "keepamount",label: "佣金金额",minWidth: 100},
-        {prop: "addrate",label: "追加比例",minWidth: 100},
-        {prop: "addamount",label: "追加金额",minWidth: 100}
+      columns: [
+        //数据列
+        { prop: "orderno", label: "订单号", minWidth: 160 },
+        { prop: "policyno", label: "保单号", minWidth: 160 },
+        { prop: "licenseno", label: "车牌号", minWidth: 90 },
+        { prop: "riskcode", label: "险种", minWidth: 90 },
+        { prop: "inscompany", label: "保险公司", minWidth: 90 },
+        { prop: "agreeid", label: "协议号", minWidth: 160 },
+        { prop: "comlevel", label: "机构级别", minWidth: 100 },
+        { prop: "comcode", label: "机构编码", minWidth: 120 },
+        { prop: "keeprate", label: "佣金费用", minWidth: 100 },
+        { prop: "keepamount", label: "佣金金额", minWidth: 100 },
+        { prop: "addrate", label: "追加比例", minWidth: 100 },
+        { prop: "addamount", label: "追加金额", minWidth: 100 },
       ],
     };
   },
   created() {
-    this.peopleid = Cookies.get('user');
-    if(this.peopleid!='admin'){
-      this.peopledeptid = Cookies.get('user').split('D')[0];
+    this.peopleid = Cookies.get("user");
+    if (this.peopleid != "admin") {
+      this.peopledeptid = Cookies.get("user").split("D")[0];
       this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
-    }else{
-      this.peopledeptid = '';
+    } else {
+      this.peopledeptid = "";
       this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
     }
     this.deptAccount();
   },
-  mounted() {
-
-  },
+  mounted() {},
   methods: {
-	handlePrint(){
-		this.$api.task.excelExport(this.pageRequest).then(res=>{
-			console.log(res)
-				let blob = new Blob([res], {
-					type: "application/vnd.ms-excel"
-				}); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
-				let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
-				// 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
-				let a = document.createElement("a");
-				a.href = url;
-				a.download = "可提现余额清单.xlsx";
-				a.click();
-				// 5.释放这个临时的对象url
-				window.URL.revokeObjectURL(url);					
-		})
-	},
-    getOrderList(){
+    handlePrint() {
+      this.$api.task.excelExport(this.pageRequest).then((res) => {
+        console.log(res);
+        let blob = new Blob([res], {
+          type: "application/vnd.ms-excel",
+        }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
+        let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
+        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = "可提现余额清单.xlsx";
+        a.click();
+        // 5.释放这个临时的对象url
+        window.URL.revokeObjectURL(url);
+      });
+    },
+    getOrderList() {
       this.pageRequest.columnFilters.orderno.value = this.queryForm.orderno;
       this.pageRequest.columnFilters.comlevel.value = this.queryForm.comlevel;
       this.pageRequest.columnFilters.comcode.value = this.queryForm.comcode;
       this.pageRequest.columnFilters.licenseno.value = this.queryForm.licenseno;
+      this.pageRequest.columnFilters.policyno.value = this.queryForm.policyno;
       this.pageRequest.pageNum = 1;
       this.findPage();
     },
 
     //确认是否关闭对话框
     handleClose(done) {
-      this.$confirm('确认关闭？')
-        .then(_ => {
+      this.$confirm("确认关闭？")
+        .then((_) => {
           done();
         })
-        .catch(_ => {});
+        .catch((_) => {});
     },
 
-    openVisible(){
+    openVisible() {
       this.deptAccount();
-      this.dialogVisible = true
+      this.dialogVisible = true;
     },
 
-    closeVisible(){
+    closeVisible() {
       this.withdrawal = "";
     },
-
-    toWithdrawal(){
+    toWithdrawal() {
       let param = {
-        amount:this.withdrawal,
-        deptid:this.peopledeptid
-      }
-      this.$api.task.deptApply(param).then(res => {
-          if(res.code == 200){
-            this.$message.success("提现申请已提交")
-            this.deptAccount();
-          }
-        });
-
+        amount: this.withdrawal,
+        deptid: this.peopledeptid,
+      };
+      this.$api.task.deptApply(param).then((res) => {
+        if (res.code == 200) {
+          this.$message.success("提现申请已提交");
+          this.deptAccount();
+        }
+      });
 
       this.dialogVisible = false;
     },
     // 机构账户余额查询
-    deptAccount(){
-      this.$api.task.deptAccount(this.peopledeptid).then(res => {
-          if(res.code == 200){
-            this.basicdata[0].money = res.data.accountBalance;
-            this.basicdata[1].money = res.data.applyAmount;
-            this.basicdata[2].money = res.data.totalAmount;
-            this.basicdata[3].money = res.data.payamount;
-            this.canwithdrawal = res.data.accountBalance;
-          }
-        });
+    deptAccount() {
+      this.$api.task.deptAccount(this.peopledeptid).then((res) => {
+        if (res.code == 200) {
+          this.basicdata[0].money = res.data.accountBalance;
+          this.basicdata[1].money = res.data.applyAmount;
+          this.basicdata[2].money = res.data.totalAmount;
+          this.basicdata[3].money = res.data.payamount;
+          this.canwithdrawal = res.data.accountBalance;
+        }
+      });
     },
     // 右侧列表的方法Start
     findPage(data) {
       // 获取分页数据
-     let that = this;
-     if(data && data.pageRequest){
-       this.pageRequest.pageNum = data.pageRequest.pageNum;
-       this.pageRequest.pageSize = data.pageRequest.pageSize;
-     }
-     that.$api.task.queryDeptFee(that.pageRequest)
-       .then(res => {
-         console.log(res.data)
-         that.pageResult = res.data;
-       })
-       .then(data != null ? data.callback : "");
-    }
-  }
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNum = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      that.$api.task
+        .queryDeptFee(that.pageRequest)
+        .then((res) => {
+          console.log(res.data);
+          that.pageResult = res.data;
+        })
+        .then(data != null ? data.callback : "");
+    },
+  },
 };
 </script>
 
 
 <style scoped>
-.basicdata{
+.basicdata {
   border-radius: 5px;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   box-shadow: -1px -1px 5px 0 rgb(0 0 0 / 10%);
   margin: 15px 8px;
   height: 110px;
 }
-.basicdata>div{
+.basicdata > div {
   height: 100%;
 }
 .queryForm .el-row {
-  margin:0px;
+  margin: 0px;
 }
 .queryForm .el-form-item {
   margin-bottom: 0px;

src/views/FinancialManagement/CarInsurance/PersonSettlement/CommissionList.vue

@@ -15,6 +15,11 @@
 			    <el-input clearable placeholder="工号" v-model="queryForm.userid"></el-input>
 			  </el-form-item>
 			</el-col>
+      <el-col :span="6" style="height: 40px;">
+			  <el-form-item label="保单号">
+			    <el-input clearable placeholder="保单号" v-model="queryForm.policyno"></el-input>
+			  </el-form-item>
+			</el-col>
 			<el-col :span="6" style="height: 40px;">
 			  <el-form-item label="姓名">
 			    <el-input clearable placeholder="姓名" v-model="queryForm.username"></el-input>
@@ -33,24 +38,13 @@
                   </el-select>
               </el-form-item>
             </el-col>
-      				<el-col :span="6" style="height: 40px;">
-      				  <el-form-item label="投保险种">
-      					<el-select v-model="queryForm.riskCode" placeholder="请选择" style="width: 100%;" clearable>
-      						<el-option label="单交强" value="单交强"></el-option>
-      						<el-option label="单商业" value="单商业"></el-option>
-      						<el-option label="单三者" value="单三者"></el-option>
-      						<el-option label="交强+商业" value="交强+商业"></el-option>
-      						<el-option label="交强+三者" value="交强+三者"></el-option>
-      					  </el-select>
-      				  </el-form-item>
-      				</el-col>
+
             <el-col :span="12" style="height: 40px;">
-              <el-form-item label="承保时间">
+              <el-form-item label="出单时间">
                 <el-date-picker v-model="queryForm.date" style="width:100%"  type="daterange" align="left" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
               </el-form-item>
             </el-col>
-      
-            <el-col :span="24" class="u-f u-f-je" style="height: 40px;">
+            <el-col :span="24" class="u-f u-f-je" style="height:40px;">
               <div class="u-f" style="margin-bottom: 20px; width: 60px;height: 32px; border-radius: 5px;overflow: hidden;" @click="queryEsmInfo" >
                   <div class="u-f u-f1 u-f-ajc" style="background: #409EFF;color:#fff">查询</div>
               </div>
@@ -58,8 +52,7 @@
           </el-row>
         </el-form>
       </div>
-
-       <kt-common-table :operationWidth="260" permsDelete="sys:user:delete"  :showBatchDelete="false" :showBatchSettled="true" :showBatchPrint="true" permsButton1="sys:user:edit" permsButton2="sys:user:edit" permsButton3="sys:user:edit" :data="pageResult" :columns="columns" @findPage="findPage" button1Name="未结算" button1Background="#92D050"   @handleButton1="handleButton1" button2Name="已结算" button2Background="#FF0000"   @handleButton2="handleButton2" button3Name="查看" button3Background="#00B0F0"   @handleButton3="handleButton3" @handleSettled="handleTableSettled" @handlePrint="handlePrint">
+      <kt-common-table  permsDelete="sys:user:delete" :showOperation="false" :showBatchDelete="false" :showBatchSettled="true" :showBatchPrint="true" permsButton1="sys:user:edit" permsButton2="sys:user:edit" permsButton3="sys:user:edit" :data="pageResult" :columns="columns" @findPage="findPage" @handleSettled="handleTableSettled" @handlePrint="handlePrint">
         </kt-common-table>
 		</el-main>
 
@@ -105,11 +98,11 @@
         <el-button size="small"  type="primary" @click="dialogSubmit">确 定</el-button>
       </span>
     </el-dialog>
-		
+
 		<el-dialog fullscreen lock-scroll title="车辆报价信息详情" :visible.sync="infoDialogVisible" width="40%" center>
 		  <!-- 这是报价信息区域 -->
 		  <el-container>
-		
+
 		    <el-row class="leftContainer">
 		      <el-col id="level1">
 		        <a href="#demo1" @click="jump('level1')">
@@ -193,8 +186,8 @@
 		      </el-col>
 		    </el-row>
 		    <el-row class="rightContainer">
-		
-		
+
+
 		     <el-card id="demo1">
 		       <el-row class="header">
 		         <el-col>车辆信息</el-col>
@@ -268,7 +261,7 @@
 		           <el-col :span="5">
 		             <el-input size="medium" disabled v-model="orderInfo.carinfo.registerDate"></el-input>
 		           </el-col>
-		
+
 		         </el-row>
 		         <el-row>
 		           <el-col :span="2">
@@ -312,7 +305,7 @@
 		         </el-row>
 		       </el-row>
 		     </el-card>
-		
+
 		      <!-- 关系人 -->
 		      <el-card id="demo2">
 		        <el-row class="header">
@@ -362,7 +355,7 @@
 		              </el-col>
 		            </el-row>
 		          </el-row>
-		
+
 		          <el-row class="u-f-ac bodyTitle"><label>投保人</label></el-row>
 		          <el-row class="body">
 		            <el-row>
@@ -405,7 +398,7 @@
 		              </el-col>
 		            </el-row>
 		          </el-row>
-		
+
 		          <el-row class="u-f-ac bodyTitle"><label>被保险人</label></el-row>
 		          <el-row class="body">
 		            <el-row>
@@ -450,14 +443,14 @@
 		          </el-row>
 		        </div>
 		      </el-card>
-		
+
 		      <!-- 代理人 -->
 		      <el-card id="demo3">
 		        <el-row class="header">
 		          <el-col>代理人信息</el-col>
 		        </el-row>
 		        <el-divider></el-divider>
-		
+
 		        <el-row class="body">
 		          <el-row>
 		            <el-col :span="2">
@@ -501,7 +494,7 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		      <!-- 优惠政策 -->
 		      <el-card id="demo4">
 		        <el-row class="header">
@@ -514,7 +507,7 @@
 		            <el-col class="u-f-ajc" :span="8">优惠比例</el-col>
 		            <el-col class="u-f-ajc" :span="8">优惠金额</el-col>
 		          </el-row>
-		
+
 		          <el-row v-for="(riskItem,riskIndex) in orderInfo.riskinfo" :key="riskItem.riskCode" v-if="riskItem.riskCode == '0507'" class="u-f-ac" style="border-bottom: 1px solid #DDDDDD;height:40px;margin-bottom: 0;">
 		            <el-col class="u-f-ajc" :span="8">交强险</el-col>
 		            <el-col class="u-f-ajc" :span="8">{{orderInfo.jqdiscountrate}}%</el-col>
@@ -525,10 +518,10 @@
 		            <el-col class="u-f-ajc" :span="8">{{orderInfo.sydiscountrate}}%</el-col>
 		            <el-col class="u-f-ajc" :span="8">{{(riskItem.premium*orderInfo.sydiscountrate/100).toFixed(2)}}</el-col>
 		          </el-row>
-		
+
 		        </el-row>
 		      </el-card>
-		
+
 		      <!-- 保单 -->
 		      <el-card id="demo5">
 		        <el-row class="header">
@@ -562,7 +555,7 @@
 		              </el-col>
 		            </el-row>
 		          </el-row>
-		
+
 		          <el-row class="u-f-ac bodyTitle"><label>车船税</label></el-row>
 		          <el-row  class="body">
 		            <el-row>
@@ -615,7 +608,7 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		      <!-- 特约 -->
 		      <template v-if="(!!(orderInfo.jqappoint)) && (!!(orderInfo.syappoint))">
 		        <el-card id="demo6">
@@ -649,7 +642,7 @@
 		          </template>
 		        </el-card>
 		      </template>
-		
+
 		      <!-- 影像 -->
 		      <el-card id="demo7">
 		        <el-row class="header">
@@ -707,13 +700,13 @@
 		        </el-row>
 		        </div>
 		      </el-card>
-		
+
 		      <el-card id="demo8">
 		        <el-row class="header">
 		          <el-col>投保单号</el-col>
 		        </el-row>
 		        <el-divider></el-divider>
-		
+
 		        <el-row class="u-f-ac bodyTitle"><label>投保单号</label></el-row>
 		        <el-row class="body">
 		          <el-row>
@@ -749,7 +742,7 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		      <el-card id="demo9">
 		        <el-row class="header">
 		          <el-col>电子保单</el-col>
@@ -771,7 +764,7 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		      <el-card id="demo13">
 		        <el-row class="header">
 		          <el-col>收款方式</el-col>
@@ -806,7 +799,7 @@
 		                </el-col>
 		              </template>
 		            </div>
-		
+
 		              <el-col :span="2">
 		                <label>合计</label>
 		              </el-col>
@@ -897,7 +890,7 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		      <!-- 机构费用 -->
 		      <el-card id="demo10">
 		        <el-row class="header">
@@ -939,13 +932,13 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		      <el-card id="demo11">
 		        <el-row class="header">
 		          <el-col>推荐人费用</el-col>
 		        </el-row>
 		        <el-divider></el-divider>
-		
+
 		        <el-row class="body">
 		          <el-row v-for="(commission,commissionIndex) in feeDetail.commissions" :key="commissionIndex">
 		            <el-col :span="2">
@@ -975,13 +968,13 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		      <el-card id="demo12">
 		        <el-row class="header">
 		          <el-col>协议信息</el-col>
 		        </el-row>
 		        <el-divider></el-divider>
-		
+
 		        <el-row class="body">
 		          <el-row>
 		            <el-col :span="2">
@@ -1045,10 +1038,10 @@
 		          </el-row>
 		        </el-row>
 		      </el-card>
-		
+
 		    </el-row>
 		  </el-container>
-		
+
 		  <span slot="footer" class="dialog-footer" style="position: fixed;bottom: 0px;left:0px;background: #fff;width: 100%;padding: 10px 0px;box-shadow: 0 -1px 0 0 #ddd;">
 		    <el-button size="small" type="primary" style="background-color: #DE504C; border: 1px solid #DE504C;" @click="infoDialogVisible = false">关 闭</el-button>
 		  </span>
@@ -1057,483 +1050,543 @@
 	</div>
 </template>
 <script>
-	import KtCommonTable from "@/views/Core/KtCommonTable.vue";//表格组件
-	import KtButton from "@/views/Core/KtButton";
-  import CommonUtil from "@/utils/comutil.js";
-  import { formatWithSeperator,format } from "@/utils/datetime.js";
-	export default {
-		components: {
-			KtCommonTable,
-			KtButton
-		},
-		data() {
-			return {
-        dialogVisible:false,
-        dataForm:{
-          ordernos:"",
-          settleno:"",
-          settletime:"",
-          remark:"",
-        },
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import KtButton from "@/views/Core/KtButton";
+import CommonUtil from "@/utils/comutil.js";
+import { formatWithSeperator, format } from "@/utils/datetime.js";
+export default {
+  components: {
+    KtCommonTable,
+    KtButton,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dataForm: {
+        ordernos: "",
+        settleno: "",
+        settletime: "",
+        remark: "",
+      },
 
-        // 右侧列表查询数据Start
-        queryForm:{},
-        pageResult: {},
-        pageRequest: {  //查询的默认条件
-          pageNum: 1,
-          pageSize: 10,
-          columnFilters: {
-            "agreetype": {
-              "name": "agreetype",
-              "value": ""
-            },
-            "settletype":{
-              "name": "settletype",
-              "value": "B"
-            },
-            "settlestatus":{
-              "name": "settlestatus",
-              "value": ""
-            },
-			"userid":{
-			  "name": "userid",
-			  "value": ""
-			},
-			"username":{
-			  "name": "username",
-			  "value": ""
-			},
-			"deptid":{
-			  "name": "deptid",
-			  "value": ""
-			},
-			"inscompany":{
-			  "name": "inscompany",
-			  "value": ""
-			},
-			"licenseNo":{
-			  "name": "licenseNo",
-			  "value": ""
-			},
-			"riskCode":{
-			  "name": "riskCode",
-			  "value": ""
-			},
-			"startdate":{
-			  "name": "startdate",
-			  "value": ""
-			},
-			"enddate":{
-			  "name": "enddate",
-			  "value": ""
-			}
-          }
+      // 右侧列表查询数据Start
+      queryForm: {},
+      pageResult: {},
+      pageRequest: {
+        //查询的默认条件
+        pageNum: 1,
+        pageSize: 10,
+        columnFilters: {
+          agreetype: {
+            name: "agreetype",
+            value: "",
+          },
+          settletype: {
+            name: "settletype",
+            value: "B",
+          },
+          settlestatus: {
+            name: "settlestatus",
+            value: "",
+          },
+          userid: {
+            name: "userid",
+            value: "",
+          },
+          policyno: {
+            name: "policyno",
+            value: "",
+          },
+          username: {
+            name: "username",
+            value: "",
+          },
+          deptid: {
+            name: "deptid",
+            value: "",
+          },
+          inscompany: {
+            name: "inscompany",
+            value: "",
+          },
+          licenseNo: {
+            name: "licenseNo",
+            value: "",
+          },
+          startdate: {
+            name: "startdate",
+            value: "",
+          },
+          enddate: {
+            name: "enddate",
+            value: "",
+          },
         },
-        columns:[ //数据列
-          {prop: "orderno",label: "订单号",minWidth: 160},
-          {prop: "userid",label: "工号",minWidth: 160},
-          {prop: "username",label: "姓名",minWidth: 160},
-          {prop: "deptid",label: "机构代码",minWidth: 160},
-          {prop: "deptname",label: "机构名称",minWidth: 160},
-          {prop: "createtime",label: "出单日期",minWidth: 160},
-          {prop: "inscompany",label: "保险公司",minWidth: 100,formatter: this.inscompanyFormatter},
-          {prop: "licenseNo",label: "车牌号",minWidth: 100},
-          {prop: "producname",label: "险种",minWidth: 100},
-          {prop: "agreeid",label: "协议号",minWidth: 160},
-          {prop: "agreetype",label: "协议类型",minWidth: 100,formatter: this.agreetypeFormatter},
-          {prop: "agreementcode",label: "协议编码",minWidth: 130},
-          {prop: "jqpremium",label: "交强险保费(元)",minWidth: 100},
-          {prop: "feerate",label: "交强险手续费比例(%)",minWidth: 100 },
-          {prop: "feeamount",label: "交强险手续费金额(元)",minWidth: 100},
-          // {prop: "updatetime",label: "交强险手续费金额(元)",minWidth: 150,formatter: this.updatetimeFormatter},
-          {prop: "sypremium",label: "商业险保费(元)",minWidth: 100},
-          {prop: "disrate",label: "商业险手续费比例(%)",minWidth: 100},
-          {prop: "disamount",label: "商业险手续费金额(元)",minWidth: 100},
-          {prop: "totalmoeny",label: "应结算总金额(元)",minWidth: 120,formatter: this.totalmoenyFormatter},
-          {prop: "settletime",label: "结算时间",minWidth: 120},
-        ],
-        //------------协议下拉框数据   begin-----------------
-        agreementtypeoptions: [], //协议类型
-        channeloptions: [], //合作渠道
-        //------------协议下拉框数据   end-----------------
-        
-        infoDialogVisible:false,
-        //文件上传的文件
-        oldfileList: [],
-        
-        feeDetail:{
-          commissions:[],
-          deptFees:[]
-        },//费用详情（不包括订单信息）
-        orderInfo: { //选中的订单
-          ownerinfo:{},
-          carinfo:{},
-          applyinfo:{},
-          insureinfo:{},
-          kindinfo:[],
-          riskinfo:[],
-          ownerinfo:{}
+      },
+      columns: [
+        //数据列
+        { prop: "orderno", label: "订单号", minWidth: 160 },
+        { prop: "userid", label: "工号", minWidth: 160 },
+        { prop: "username", label: "姓名", minWidth: 160 },
+        { prop: "deptid", label: "机构代码", minWidth: 160 },
+        { prop: "deptname", label: "机构名称", minWidth: 160 },
+        { prop: "createtime", label: "出单日期", minWidth: 160 },
+        {
+          prop: "inscompany",
+          label: "保险公司",
+          minWidth: 100,
+          formatter: this.inscompanyFormatter,
         },
-        
-        carImageList:[],//车辆影像
-        ownerImageList:[],//车主影像
-        policyImageList:[],//投保人影像
-        insuredImageList:[],//被保人影像
-        carCheckImageList:[],//验车照影像
-        // 影像控制
-        pic1Control:false,
-        pic2Control:false,
-        pic3Control:false,
-        pic4Control:false,
-        pic5Control:false,
-        
-        payMoney:"",//合计金额
-			};
-		},
-    created() {
-        //获取所有下拉框数据
-        this.getDictItems("agreementtype");
-				this.getDictItems("channel");
-    },
-	mounted() {
+        { prop: "licenseNo", label: "车牌号", minWidth: 100 },
+        { prop: "producname", label: "险种", minWidth: 100 },
+        { prop: "agreeid", label: "协议号", minWidth: 160 },
+        { prop: "jqpremium", label: "交强险保费(元)", minWidth: 100 },
+        { prop: "feerate", label: "交强险手续费比例(%)", minWidth: 100 },
+        { prop: "feeamount", label: "交强险手续费金额(元)", minWidth: 100 },
+        // {prop: "updatetime",label: "交强险手续费金额(元)",minWidth: 150,formatter: this.updatetimeFormatter},
+        { prop: "sypremium", label: "商业险保费(元)", minWidth: 100 },
+        { prop: "disrate", label: "商业险手续费比例(%)", minWidth: 100 },
+        { prop: "disamount", label: "商业险手续费金额(元)", minWidth: 100 },
+        {
+          prop: "totalmoeny",
+          label: "应结算总金额(元)",
+          minWidth: 120,
+          formatter: this.totalmoenyFormatter,
+        },
+        { prop: "settletime", label: "结算时间", minWidth: 120 },
+      ],
+      //------------协议下拉框数据   begin-----------------
+      agreementtypeoptions: [], //协议类型
+      channeloptions: [], //合作渠道
+      //------------协议下拉框数据   end-----------------
 
-	},
-	methods: {
-		handlePrint(){
-			this.$api.task.excelExport(this.pageRequest).then(res=>{
-				console.log(res)
-					let blob = new Blob([res], {
-						type: "application/vnd.ms-excel"
-					}); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
-					let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
-					// 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
-					let a = document.createElement("a");
-					a.href = url;
-					a.download = "业务人员佣金管理清单.xlsx";
-					a.click();
-					// 5.释放这个临时的对象url
-					window.URL.revokeObjectURL(url);					
-			})
-		},
-      //-- formatter begin--
-      agreetypeFormatter(row, column) { //协议类型
-          let agreetype = row.agreetype;
-          return CommonUtil.getDataName({dataList: this.agreementtypeoptions, value: 'value', label: 'label', data: agreetype})
-      },
-      inscompanyFormatter(row, column) { //协议类型
-          let inscompany = row.inscompany;
-          return CommonUtil.getDataName({dataList: this.global.insCompanyList, value: 'code', label: 'name', data: inscompany})
-      },
-      totalmoenyFormatter(row, column) { //协议类型
-          let inscompany = row.inscompany;
-          return (row.feeamount+row.disamount).toFixed(2);
+      infoDialogVisible: false,
+      //文件上传的文件
+      oldfileList: [],
+
+      feeDetail: {
+        commissions: [],
+        deptFees: [],
+      }, //费用详情（不包括订单信息）
+      orderInfo: {
+        //选中的订单
+        ownerinfo: {},
+        carinfo: {},
+        applyinfo: {},
+        insureinfo: {},
+        kindinfo: [],
+        riskinfo: [],
+        ownerinfo: {},
       },
-      //-- formatter end--
-	  
-	  queryEsmInfo(){
-	  		  if(this.queryForm.date != null ){
-	  			var startdate =formatWithSeperator(this.queryForm.date[0],'-',':').split(' ')[0];
-	  			var enddate = formatWithSeperator(this.queryForm.date[1],'-',':').split(' ')[0];
-	  			this.pageRequest.columnFilters.startdate.value = startdate;
-	  			this.pageRequest.columnFilters.enddate.value = enddate;
-	  		  }else{
-	  			this.pageRequest.columnFilters.startdate.value = '';
-	  			this.pageRequest.columnFilters.enddate.value = '';
-	  		  }
-	  		  this.pageRequest.columnFilters.userid.value = this.queryForm.userid;
-			  this.pageRequest.columnFilters.username.value = this.queryForm.username;
-			  this.pageRequest.columnFilters.deptid.value = this.queryForm.deptid;
-			  this.pageRequest.columnFilters.inscompany.value = this.queryForm.inscompany;
-	  		  this.pageRequest.columnFilters.licenseNo.value = this.queryForm.licenseNo;
-	  		  this.pageRequest.columnFilters.riskCode.value = this.queryForm.riskCode;
-	  		  
-	  		  this.pageRequest.pageNum = 1;
-	  		  this.findPage();
-	  },
 
+      carImageList: [], //车辆影像
+      ownerImageList: [], //车主影像
+      policyImageList: [], //投保人影像
+      insuredImageList: [], //被保人影像
+      carCheckImageList: [], //验车照影像
+      // 影像控制
+      pic1Control: false,
+      pic2Control: false,
+      pic3Control: false,
+      pic4Control: false,
+      pic5Control: false,
 
-      //--数据字典 begin --
-      getDictItems: function(typeName) {
-        let that = this;
-        that.$api.dict.findByLableName(typeName)
-          .then(function(res) {
-            that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
-          })
-          .catch(function(error) {
-            that[typeName + "options"] = [];
-          });
-      },
-      //--数据字典 end --
+      payMoney: "", //合计金额
+    };
+  },
+  created() {
+    //获取所有下拉框数据
+    this.getDictItems("agreementtype");
+    this.getDictItems("channel");
+  },
+  mounted() {},
+  methods: {
+    handlePrint() {
+      this.$api.task.excelExport(this.pageRequest).then((res) => {
+        console.log(res);
+        let blob = new Blob([res], {
+          type: "application/vnd.ms-excel",
+        }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
+        let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
+        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = "业务人员佣金管理清单.xlsx";
+        a.click();
+        // 5.释放这个临时的对象url
+        window.URL.revokeObjectURL(url);
+      });
+    },
+    //-- formatter begin--
+    agreetypeFormatter(row, column) {
+      //协议类型
+      let agreetype = row.agreetype;
+      return CommonUtil.getDataName({
+        dataList: this.agreementtypeoptions,
+        value: "value",
+        label: "label",
+        data: agreetype,
+      });
+    },
+    inscompanyFormatter(row, column) {
+      //协议类型
+      let inscompany = row.inscompany;
+      return CommonUtil.getDataName({
+        dataList: this.global.insCompanyList,
+        value: "code",
+        label: "name",
+        data: inscompany,
+      });
+    },
+    totalmoenyFormatter(row, column) {
+      //协议类型
+      let inscompany = row.inscompany;
+      return (row.feeamount + row.disamount).toFixed(2);
+    },
+    //-- formatter end--
 
-      // 右侧列表的方法Start
-      findPage(data) {
-        // 获取分页数据
-       let that = this;
-       if(data && data.pageRequest){
-         this.pageRequest.pageNum = data.pageRequest.pageNum;
-         this.pageRequest.pageSize = data.pageRequest.pageSize;
-       }
-       that.$api.task.queryInsCompanyFee(that.pageRequest)
-         .then(res => {
-           that.pageResult = res.data;
-         })
-         .then(data != null ? data.callback : "");
-      },
-      handleButton1({row,index}){
-        this.dialogVisible= true;
-        this.dataForm.ordernos = row.orderno;
-      },
-      handleButton2(){
+    queryEsmInfo() {
+      if (this.queryForm.date != null) {
+        var startdate = formatWithSeperator(
+          this.queryForm.date[0],
+          "-",
+          ":"
+        ).split(" ")[0];
+        var enddate = formatWithSeperator(
+          this.queryForm.date[1],
+          "-",
+          ":"
+        ).split(" ")[0];
+        this.pageRequest.columnFilters.startdate.value = startdate;
+        this.pageRequest.columnFilters.enddate.value = enddate;
+      } else {
+        this.pageRequest.columnFilters.startdate.value = "";
+        this.pageRequest.columnFilters.enddate.value = "";
+      }
+      this.pageRequest.columnFilters.userid.value = this.queryForm.userid;
+      this.pageRequest.columnFilters.username.value = this.queryForm.username;
+      this.pageRequest.columnFilters.deptid.value = this.queryForm.deptid;
+      this.pageRequest.columnFilters.inscompany.value =
+        this.queryForm.inscompany;
+      this.pageRequest.columnFilters.licenseNo.value = this.queryForm.licenseNo;
+      this.pageRequest.columnFilters.policyno.value = this.queryForm.policyno;
+      this.pageRequest.pageNum = 1;
+      this.findPage();
+    },
 
-      },
-      handleButton3({row,index}) {
-      		 let orderno = row.orderno;
-        for(let i=0;i< this.global.insureList.length;i++){
-          this.global.insureList[i].coveragePremium = "";
-          this.global.insureList[i].amount = 0;
-        }
-        this.$api.task.insFeeQueryDetail(orderno).then(res => {
-          Object.assign(this.feeDetail,res.data);
-          if(res.code ==200){
-            Object.assign(this.orderInfo,res.data.insOrder);
-            if(!this.orderInfo.jqpayamount){
-              this.orderInfo.jqpayamount = 0;
-            }
-            if(!this.orderInfo.sypayamount){
-              this.orderInfo.sypayamount = 0;
-            }
-            if(!this.orderInfo.taxpayamount){
-              this.orderInfo.taxpayamount = 0
-            }
-            this.payMoney = ((this.orderInfo.jqpayamount-0)+(this.orderInfo.sypayamount-0)+(this.orderInfo.taxpayamount-0)).toFixed(2)
-      
-            for(let i=0;i< this.orderInfo.riskinfo.length;i++){
-            	if(this.orderInfo.riskinfo[i].riskCode=='0510'){
-            		for(let j=0;j<this.orderInfo.kindinfo.length;j++){
-            			for(let m =0;m<this.global.insureList.length;m++){
-            				if(this.orderInfo.kindinfo[j].kindCode == this.global.insureList[m].kindCode){
-            					this.global.insureList[m].coveragePremium = this.orderInfo.kindinfo[j].coveragePremium;
-            					if(this.orderInfo.kindinfo[j].kindCode == 'B'){
-            						this.global.insureList[9].amtList[0].value=this.orderInfo.kindinfo[j].amount;
-            					}
-            					if(this.orderInfo.kindinfo[j].kindCode == 'A'){
-            						this.global.insureList[m].amount = '1';
-            					}else if(this.global.insureList[m].kindCode == 'D4'){
-            						this.global.insureList[m].amount = this.orderInfo.kindinfo[j].unitAmount;
-            					}else if(this.global.insureList[m].isMainRisk ||(this.global.insureList[m].kindCode=='BD')|| (this.global.insureList[m].kindCode=='L')){
-            						this.global.insureList[m].amount = this.orderInfo.kindinfo[j].amount;
-            					}else{
-            						this.global.insureList[m].amount = this.orderInfo.kindinfo[j].deductibleRate;
-            					}
-      
-            				}
-            			}
-            		}
-            	}
+    //--数据字典 begin --
+    getDictItems: function (typeName) {
+      let that = this;
+      that.$api.dict
+        .findByLableName(typeName)
+        .then(function (res) {
+          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
+        })
+        .catch(function (error) {
+          that[typeName + "options"] = [];
+        });
+    },
+    //--数据字典 end --
+
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNum = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      that.$api.task
+        .queryInsCompanyFee(that.pageRequest)
+        .then((res) => {
+          that.pageResult = res.data;
+        })
+        .then(data != null ? data.callback : "");
+    },
+    handleButton1({ row, index }) {
+      this.dialogVisible = true;
+      this.dataForm.ordernos = row.orderno;
+    },
+    handleButton2() {},
+    handleButton3({ row, index }) {
+      let orderno = row.orderno;
+      for (let i = 0; i < this.global.insureList.length; i++) {
+        this.global.insureList[i].coveragePremium = "";
+        this.global.insureList[i].amount = 0;
+      }
+      this.$api.task.insFeeQueryDetail(orderno).then((res) => {
+        Object.assign(this.feeDetail, res.data);
+        if (res.code == 200) {
+          Object.assign(this.orderInfo, res.data.insOrder);
+          if (!this.orderInfo.jqpayamount) {
+            this.orderInfo.jqpayamount = 0;
+          }
+          if (!this.orderInfo.sypayamount) {
+            this.orderInfo.sypayamount = 0;
+          }
+          if (!this.orderInfo.taxpayamount) {
+            this.orderInfo.taxpayamount = 0;
+          }
+          this.payMoney = (
+            this.orderInfo.jqpayamount -
+            0 +
+            (this.orderInfo.sypayamount - 0) +
+            (this.orderInfo.taxpayamount - 0)
+          ).toFixed(2);
+
+          for (let i = 0; i < this.orderInfo.riskinfo.length; i++) {
+            if (this.orderInfo.riskinfo[i].riskCode == "0510") {
+              for (let j = 0; j < this.orderInfo.kindinfo.length; j++) {
+                for (let m = 0; m < this.global.insureList.length; m++) {
+                  if (
+                    this.orderInfo.kindinfo[j].kindCode ==
+                    this.global.insureList[m].kindCode
+                  ) {
+                    this.global.insureList[m].coveragePremium =
+                      this.orderInfo.kindinfo[j].coveragePremium;
+                    if (this.orderInfo.kindinfo[j].kindCode == "B") {
+                      this.global.insureList[9].amtList[0].value =
+                        this.orderInfo.kindinfo[j].amount;
+                    }
+                    if (this.orderInfo.kindinfo[j].kindCode == "A") {
+                      this.global.insureList[m].amount = "1";
+                    } else if (this.global.insureList[m].kindCode == "D4") {
+                      this.global.insureList[m].amount =
+                        this.orderInfo.kindinfo[j].unitAmount;
+                    } else if (
+                      this.global.insureList[m].isMainRisk ||
+                      this.global.insureList[m].kindCode == "BD" ||
+                      this.global.insureList[m].kindCode == "L"
+                    ) {
+                      this.global.insureList[m].amount =
+                        this.orderInfo.kindinfo[j].amount;
+                    } else {
+                      this.global.insureList[m].amount =
+                        this.orderInfo.kindinfo[j].deductibleRate;
+                    }
+                  }
+                }
+              }
             }
-            // 获取影像
-            this.$api.task.findTaskImage({
-              taskid:this.orderInfo.orderno,
-              imgtype:"C01"
-            }).then((resImage)=>{
-              this.carImageList=resImage.data.imgList
+          }
+          // 获取影像
+          this.$api.task
+            .findTaskImage({
+              taskid: this.orderInfo.orderno,
+              imgtype: "C01",
             })
-            this.$api.task.findTaskImage({
-              taskid:this.orderInfo.orderno,
-              imgtype:"C02"
-            }).then((resImage)=>{
-              this.ownerImageList=resImage.data.imgList
+            .then((resImage) => {
+              this.carImageList = resImage.data.imgList;
+            });
+          this.$api.task
+            .findTaskImage({
+              taskid: this.orderInfo.orderno,
+              imgtype: "C02",
             })
-            this.$api.task.findTaskImage({
-              taskid:this.orderInfo.orderno,
-              imgtype:"C03"
-            }).then((resImage)=>{
-              this.policyImageList=resImage.data.imgList
+            .then((resImage) => {
+              this.ownerImageList = resImage.data.imgList;
+            });
+          this.$api.task
+            .findTaskImage({
+              taskid: this.orderInfo.orderno,
+              imgtype: "C03",
             })
-            this.$api.task.findTaskImage({
-              taskid:this.orderInfo.orderno,
-              imgtype:"C04"
-            }).then((resImage)=>{
-              this.insuredImageList=resImage.data.imgList
+            .then((resImage) => {
+              this.policyImageList = resImage.data.imgList;
+            });
+          this.$api.task
+            .findTaskImage({
+              taskid: this.orderInfo.orderno,
+              imgtype: "C04",
             })
-            this.$api.task.findTaskImage({
-              taskid:this.orderInfo.orderno,
-              imgtype:"C05"
-            }).then((resImage)=>{
-              this.carCheckImageList=resImage.data.imgList
+            .then((resImage) => {
+              this.insuredImageList = resImage.data.imgList;
+            });
+          this.$api.task
+            .findTaskImage({
+              taskid: this.orderInfo.orderno,
+              imgtype: "C05",
             })
-            this.pic1Control=false;
-            this.pic2Control=false;
-            this.pic3Control=false;
-            this.pic4Control=false;
-            this.pic5Control=false;
-            this.oldfileList=[];
-            this.$api.task.queryUploadList(this.orderInfo.orderno).then((resUpload)=>{
+            .then((resImage) => {
+              this.carCheckImageList = resImage.data.imgList;
+            });
+          this.pic1Control = false;
+          this.pic2Control = false;
+          this.pic3Control = false;
+          this.pic4Control = false;
+          this.pic5Control = false;
+          this.oldfileList = [];
+          this.$api.task
+            .queryUploadList(this.orderInfo.orderno)
+            .then((resUpload) => {
               this.oldfileList = resUpload.data;
-            })
-      
-            this.infoDialogVisible = true; //在页面上显示订单
-          }else{
-            this.$message.error("订单获取失败");
-          }
-        })
-      },
-      handleTableSettled(ids){
-        this.dialogVisible= true;
-        this.dataForm.ordernos = ids;
-      },
-      dialogSubmit(){
-        if(!this.dataForm.settleno){
-          return this.$message.error("请输入凭证号");
-        }
-        this.$api.task.userFeeSettle(this.dataForm.ordernos)
-          .then(res => {
-            this.$message.success("凭证号保存成功");
-            this.dialogVisible = false;
-            this.findPage()
-          })
+            });
 
-      },
-      closeDialog(){
-          this.$refs['dataForm'].resetFields()
-          for (let key in this.dataForm) {
-            this.dataForm[key] = "";
-          }
-      },
-
-		}
-	};
+          this.infoDialogVisible = true; //在页面上显示订单
+        } else {
+          this.$message.error("订单获取失败");
+        }
+      });
+    },
+    handleTableSettled(ids) {
+      this.dialogVisible = true;
+      this.dataForm.ordernos = ids;
+    },
+    dialogSubmit() {
+      if (!this.dataForm.settleno) {
+        return this.$message.error("请输入凭证号");
+      }
+      this.$api.task.userFeeSettle(this.dataForm.ordernos).then((res) => {
+        this.$message.success("凭证号保存成功");
+        this.dialogVisible = false;
+        this.findPage();
+      });
+    },
+    closeDialog() {
+      this.$refs["dataForm"].resetFields();
+      for (let key in this.dataForm) {
+        this.dataForm[key] = "";
+      }
+    },
+  },
+};
 </script>
 
 
 <style scoped>
-  .el-divider{
-    margin: 10px 0px 15px!important;
-  }
-  .queryForm .el-row {
-    margin:0px;
-  }
+.el-divider {
+  margin: 10px 0px 15px !important;
+}
+.queryForm .el-row {
+  margin: 0px;
+}
+
+.queryForm .el-form-item {
+  margin-bottom: 0px;
+}
+
+.queryForm {
+  background: #f2f7fc;
+  position: relative;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  padding: 10px 20px 0;
+}
+.queryForm:before {
+  content: attr(title);
+  position: absolute;
+  left: 10%;
+  transform: translate(-50%, -120%);
+  /* -webkit-transform:translate(-50%,-50%); */
+  padding: 0 10px;
+  background-color: #fff;
+}
+
+/* 弹出窗口(订单详情)Start */
+.leftContainer {
+  width: 80px;
+  position: fixed;
+  top: 0px;
+  left: 30px;
+}
+.leftContainer .el-col {
+  width: 80px;
+  height: 80px;
+  border-bottom: 1px solid #4d5c6f;
+  background: #526176;
+  cursor: pointer;
+  color: #a6aeb9;
+  border-radius: 0;
+}
+.leftContainer .el-col a {
+  display: block;
+  color: #a6aeb9;
+  text-decoration: none;
+}
+.leftContainer .el-col a:hover {
+  color: #fff;
+}
+.leftContainer .el-col a.active {
+  color: #fff;
+}
+.leftContainer .el-col i {
+  font-size: 30px;
+  margin: 15px 0px 5px;
+}
+.rightContainer {
+  width: calc(100vw - 160px);
+  margin-left: 100px;
+}
+.rightContainer .header .el-col {
+  font-size: 18px;
+  font-weight: bold;
+}
+.rightContainer .bodyTitle {
+  height: 40px;
+  background: #f3f3f3;
+  border: 1px solid #dddddd;
+}
+.rightContainer .bodyTitle > label {
+  margin: 0px 15px;
+  font-weight: bold;
+}
+.rightContainer #demo2 .body,
+.rightContainer #demo5 .body,
+.rightContainer #demo6 .body,
+.rightContainer #demo7 .body,
+.rightContainer #demo8 .body,
+.rightContainer #demo9 .body,
+.rightContainer #demo13 .body {
+  border: 1px solid #ddd;
+  padding: 15px;
+  border-top: none;
+}
+.rightContainer .el-card {
+  margin-bottom: 15px;
+}
+.imageStyle {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  box-shadow: #ddd 0px 0px 5px;
+  margin-left: 20px;
+}
+/* 弹出窗口(订单详情)End */
+
+/* 退回修改的穿梭框Start(没效果，不能够更改el-transfer-panel的样式) */
+.el-transfer {
+}
+.el-transfer-panel {
+  width: calc(100% / 3) !important;
+}
+/* 退回修改的穿梭框End */
+
+.body .el-row {
+  margin-bottom: 15px;
+}
+
+.body .el-row .el-col label {
+  text-align: right;
+  width: 80px;
+  font-size: 14px;
+  width: 100%;
+  line-height: 36px;
+  display: inline-block;
+  box-sizing: border-box;
+  padding-right: 15px;
+}
 
-  .queryForm .el-form-item {
-    margin-bottom: 0px;
-  }
-	
-	.queryForm{
-	    background: #F2F7FC;
-	    position:relative;
-	    border:1px solid #ddd;
-	    border-radius: 10px;
-	    margin-top: 15px;
-	    margin-bottom: 15px;
-	    padding: 10px 20px 0;
-	}
-	.queryForm:before{
-	    content:attr(title);
-	    position:absolute;
-	    left:10%;
-	    transform:translate(-50%,-120%);
-	    /* -webkit-transform:translate(-50%,-50%); */
-	    padding:0 10px;
-	    background-color:#fff;
-	}
-	
-	/* 弹出窗口(订单详情)Start */
-	 .leftContainer {
-	   width: 80px;
-	   position: fixed;
-	   top: 0px;
-	   left: 30px;
-	 }
-	 .leftContainer .el-col {
-	   width: 80px;
-	   height: 80px;
-	   border-bottom: 1px solid #4D5C6F;
-	   background: #526176;
-	   cursor: pointer;
-	   color: #A6AEB9;
-	   border-radius: 0;
-	 }
-	 .leftContainer .el-col a {
-	   display: block;
-	   color: #A6AEB9;
-	   text-decoration: none;
-	 }
-	 .leftContainer .el-col a:hover {
-	   color: #fff;
-	 }
-	 .leftContainer .el-col a.active {
-	   color: #fff;
-	 }
-	 .leftContainer .el-col i {
-	   font-size: 30px;
-	   margin: 15px 0px 5px;
-	 }
-	 .rightContainer {
-	   width: calc(100vw - 160px);
-	   margin-left: 100px;
-	 }
-	 .rightContainer .header .el-col{
-	   font-size:18px;
-	   font-weight: bold;
-	 }
-	 .rightContainer .bodyTitle{
-	   height: 40px;
-	   background: #F3F3F3;
-	   border:1px solid #DDDDDD
-	 }
-	 .rightContainer .bodyTitle>label{
-	   margin: 0px 15px;
-	   font-weight: bold;
-	 }
-	 .rightContainer #demo2 .body,.rightContainer #demo5 .body,.rightContainer #demo6 .body,.rightContainer #demo7 .body,.rightContainer #demo8 .body,.rightContainer #demo9 .body,.rightContainer #demo13 .body{
-	   border: 1px solid #DDD;
-	   padding: 15px;
-	   border-top: none;
-	 }
-	 .rightContainer .el-card {
-	   margin-bottom: 15px;
-	 }
-	 .imageStyle{
-	   display: inline-block;
-	   width: 100px;
-	   height: 100px;
-	   box-shadow:#ddd 0px 0px 5px;
-	   margin-left: 20px;
-	 }
-	 /* 弹出窗口(订单详情)End */
-	
-	 /* 退回修改的穿梭框Start(没效果，不能够更改el-transfer-panel的样式) */
-	.el-transfer {
-	 }
-	 .el-transfer-panel{
-	   width: calc(100%/3)!important;
-	 }
-	 /* 退回修改的穿梭框End */
-	 
-	 .body .el-row {
-	   margin-bottom: 15px;
-	 }
-	
-	 .body .el-row .el-col label {
-	   text-align: right;
-	   width: 80px;
-	   font-size: 14px;
-	   width: 100%;
-	   line-height: 36px;
-	   display: inline-block;
-	   box-sizing: border-box;
-	   padding-right: 15px;
-	 }
-	
-	 .disabledInput{
-	   background-color: #F5F7FA;
-	   text-align: left!important;
-	   border: 1px solid #E4E7ED;
-	   color: #C0C4CC;
-	   cursor: not-allowed;
-	   border-radius: 4px;
-	   box-sizing: border-box;
-	   padding: 0px 10px;
-	   height: 36px;
-	 }
+.disabledInput {
+  background-color: #f5f7fa;
+  text-align: left !important;
+  border: 1px solid #e4e7ed;
+  color: #c0c4cc;
+  cursor: not-allowed;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 0px 10px;
+  height: 36px;
+}
 </style>