Merge branch 'dev' of http://www.baoxianzhanggui.com:8090/sxzgd/vue-insagent-pc into dev

src/http/moudules/dept.js

@@ -201,4 +201,13 @@ export const deptDelete = (data) => {
         method: 'post',
         data
     })
+}
+
+// 提现
+export const withdraw = (data) => {
+    return axios({
+        url: '/sysUserAccount/withdraw',
+        method: 'post',
+        data
+    })
 }

src/http/moudules/task.js

@@ -178,7 +178,7 @@ export const payAccount = (data) => {
 //推广账户清单查询
 export const queryCommission = (data) => {
   return axios({
-    url: '/insFeeDetail/queryCommission',
+    url: '/ins/feeOrderNewDistribution/queryPage',
     method: 'post',
     data
   })

src/views/FinancialManagement/AcountWithdrawal/AcountBalance.vue

@@ -1,71 +1,167 @@
 <template>
   <div>
-    <div class="queryFrom" title="检索区">
-      <el-form ref="queryFormRef" :model="queryFrom" label-width="80px">
-        <el-row>
-          <el-col :span="5">
-            <el-form-item label="工号">
-              <el-input
-                clearable
-                size="small"
-                placeholder="工号"
-                v-model="queryFrom.userId"
-              ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="5">
-            <el-form-item label="机构名称">
-              <el-cascader
-                class="widths"
-                size="small"
-                :options="institutionOptions"
-                v-model="queryFrom.deptId"
-                :props="{
-                  checkStrictly: true,
-                  value: 'id',
-                  label: 'name',
-                }"
-                @change="handleChange"
-                clearable
-              ></el-cascader>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-          <el-form-item label-width="20px">
-            <el-button @click="queryBalance" type="primary" size="small">查询</el-button>
-          </el-form-item>
-        </el-col>
-        </el-row>
-      </el-form>
+    <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+      <!-- 左侧树Start -->
+      <SplitArea :size="leftSplitWidth" :minSize="240">
+        <div>
+          <el-divider></el-divider>
+          <tree
+            :setting="ztreeSetting"
+            :nodes="ztreeNodes"
+            @onClick="onZTreeClick"
+            @onCreated="onZTreeCreated"
+          />
+        </div>
+      </SplitArea>
+      <!-- 左侧树End -->
+      <!-- 右侧列表页面Start -->
+      <SplitArea :size="rightSplitWidth">
+        <div class="queryFrom" title="检索区">
+          <el-form ref="queryFormRef" :model="pageRequest" label-width="80px">
+            <el-row>
+              <el-col :span="5">
+                <el-form-item label="工号">
+                  <el-input
+                    clearable
+                    size="small"
+                    placeholder="工号"
+                    v-model="pageRequest.userId"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="机构名称">
+                  <el-cascader
+                    class="widths"
+                    size="small"
+                    :options="institutionOptions"
+                    v-model="pageRequest.deptId"
+                    :props="{
+                      checkStrictly: true,
+                      value: 'id',
+                      label: 'name',
+                    }"
+                    @change="handleChange"
+                    clearable
+                  ></el-cascader>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label-width="20px">
+                  <el-button @click="queryBalance" type="primary" size="small"
+                    >查询</el-button
+                  >
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <kt-common-table
+          :showBatchDelete="false"
+          :showBatchPrint="false"
+          :showOperation="true"
+          :data="pageResult"
+          :columns="columns"
+          @findPage="queryBalance"
+          :isshowpagination="true"
+          button2Name="提现"
+          button2Background="#409eff"
+          permsButton1="expenseManagement:expenseRequest:details"
+          @handleButton2="withdraw"
+        >
+        </kt-common-table>
+      </SplitArea>
+    </Split>
+    <div class="popupBox">
+      <el-dialog
+        :visible.sync="dialogVisible"
+        title="提现"
+        @close="dialogVisible = false"
+      >
+        <el-select v-model="selectedValue" placeholder="请选择提现费用">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-input
+          v-model="amount"
+          placeholder="请输入提现金额"
+          style="margin-top: 20px"
+        ></el-input>
+        <el-input
+          v-model="fromBankCardId"
+          placeholder="请输入提现银行卡号"
+          style="margin-top: 20px"
+        ></el-input>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleConfirm">确 定</el-button>
+        </span>
+      </el-dialog>
     </div>
-    <kt-common-table
-      :showBatchDelete="false"
-      :showBatchPrint="false"
-      :showOperation="false"
-      :data="pageResult"
-      :columns="columns"
-      @findPage="queryBalance"
-    >
-    </kt-common-table>
   </div>
 </template>
 
 <script>
 import KtCommonTable from "@/views/Core/KtCommonTable.vue";
+import tree from "@/components/ztree.vue"; // 机构树组件
+import { withdraw } from "../../../http/moudules/dept";
 export default {
   components: {
     KtCommonTable,
+    tree,
   },
   data() {
     return {
-      institutionOptions: [], //机构字典
-      pageResult: {
-        
+      //提现弹窗相关
+      dialogVisible: false, //弹窗是否出现
+      selectedValue: "", //提现类型
+      amount: "", //体现金额
+      userId: "", //提现id
+      fromBankCardId: "", //提现银行卡号
+      options: [
+        { value: "1", label: "手续费佣金" },
+        { value: "2", label: "非跟单佣金" },
+        { value: "3", label: "推广佣金" },
+        // ...更多选项
+      ],
+      withdrawalAmount: "",
+      /**Split 开始 */
+      leftSplitWidth: 15,
+      rightSplitWidth: 85,
+      /**Split 结束 */
+
+      //----ztreeLeft begin---------
+      ztreeObj: null,
+      ztreeSetting: {
+        check: {
+          enable: false,
+        },
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId",
+          },
+        },
+        view: {
+          showIcon: false,
+        },
       },
+      ztreeNodes: [],
+      currentTreeNode: null,
+      //----ztreeLeft end---------
+      institutionOptions: [], //机构字典
+      pageResult: {},
       pageRequest: {
         //查询的默认条件
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 20,
+        deptId: "",
+        userId: "",
       },
       queryFrom: {
         userId: "", //工号
@@ -80,15 +176,51 @@ export default {
         { prop: "handlingFee", label: "手续费", minWidth: 100 },
         { prop: "documentary", label: "非跟单费", minWidth: 100 },
         { prop: "promotion", label: "分销费 （推广费）", minWidth: 100 },
-        { prop: "handlingAmountWithdrawal", label: "手续费提现总金额", minWidth: 120 },
-        { prop: "handlingAmountAccount", label: "手续费已到账金额", minWidth: 120 },
-        { prop: "handlingAmountPayment", label: "手续费支付中金额", minWidth: 120 },
-        { prop: "documentaryAmountWithdrawal", label: "非跟单费提现总金额", minWidth: 120 },
-        { prop: "documentaryAmountAccount", label: "非跟单费已到账金额", minWidth: 120 },
-        { prop: "documentaryAmountpayment", label: "非跟单费支付中金额", minWidth: 120 },
-        { prop: "promotionAmountWithdrawal", label: "推广费提现总金额", minWidth: 120 },
-        { prop: "promotionAmountAccount", label: "推广费已到账总金额", minWidth: 130 },
-        { prop: "promotionAmountPayment", label: "推广费支付中金额", minWidth: 120 },
+        {
+          prop: "handlingAmountWithdrawal",
+          label: "手续费提现总金额",
+          minWidth: 120,
+        },
+        {
+          prop: "handlingAmountAccount",
+          label: "手续费已到账金额",
+          minWidth: 120,
+        },
+        {
+          prop: "handlingAmountPayment",
+          label: "手续费支付中金额",
+          minWidth: 120,
+        },
+        {
+          prop: "documentaryAmountWithdrawal",
+          label: "非跟单费提现总金额",
+          minWidth: 120,
+        },
+        {
+          prop: "documentaryAmountAccount",
+          label: "非跟单费已到账金额",
+          minWidth: 120,
+        },
+        {
+          prop: "documentaryAmountpayment",
+          label: "非跟单费支付中金额",
+          minWidth: 120,
+        },
+        {
+          prop: "promotionAmountWithdrawal",
+          label: "推广费提现总金额",
+          minWidth: 120,
+        },
+        {
+          prop: "promotionAmountAccount",
+          label: "推广费已到账总金额",
+          minWidth: 130,
+        },
+        {
+          prop: "promotionAmountPayment",
+          label: "推广费支付中金额",
+          minWidth: 120,
+        },
       ],
     };
   },
@@ -97,30 +229,72 @@ export default {
     this.$api.dept.findDeptTree().then((res) => {
       this.institutionOptions = res.data;
     });
+    this.findLeftTreeData(); // 获取机构树的数据
+  },
+  mounted() {
+    this.changeTreeWidth(240); // 初始化树的宽度
   },
-  mounted() {},
 
   methods: {
+    //弹窗是否出现
+    showDialog() {
+      this.dialogVisible = !this.dialogVisible;
+    },
+    //体现操作
+    handleConfirm() {
+      this.dialogVisible = false;
+      let data = {};
+      data.userId = this.userId;
+      data.amountStatus = this.selectedValue;
+      data.amount = this.amount;
+      data.fromBankCardId = this.fromBankCardId;
+      this.$api.dept.withdraw(data).then((res) => {
+        if (res.code == 200) {
+          this.$message({
+            showClose: true,
+            message: "提现成功",
+          });
+        }else{
+          this.$message({
+          showClose: true,
+          message: res.msg,
+          type: 'error'
+        });
+        }
+        (this.userId = ""),
+          (this.selectedValue = ""),
+          (this.amount = ""),
+          (this.fromBankCardId = "");
+      });
+    },
+    //提现条件
+    withdraw(index) {
+      let row = index.row;
+      this.userId = row.userId;
+      this.dialogVisible = !this.dialogVisible;
+    },
     //联级选择器触发事件
     handleChange(val) {
       if (val.length !== 0) {
-        this.queryFrom.deptId = val.at(-1);
+        this.pageRequest.deptId = val.at(-1);
       } else {
-        this.queryFrom.deptId = "";
+        this.pageRequest.deptId = "";
       }
     },
     queryBalance(data) {
       if (data && data.pageRequest) {
         this.pageRequest.pageNum = data.pageRequest.pageNum;
         this.pageRequest.pageSize = data.pageRequest.pageSize;
+        this.pageRequest.deptId = this.pageRequest.deptId;
+        this.pageRequest.userId = this.pageRequest.userId;
       }
       this.$api.task
         .findPageAccountPro({
           ...this.pageRequest,
-          columnFilters: {
-            deptId: { name: "deptId", value: this.queryFrom.deptId },
-            userId: { name: "userId", value: this.queryFrom.userId },
-          },
+          // columnFilters: {
+          //   deptId: { name: "deptId", value: this.queryFrom.deptId },
+          //   userId: { name: "userId", value: this.queryFrom.userId },
+          // },
         })
         .then((res) => {
           if (res.code == 200) {
@@ -128,6 +302,34 @@ export default {
           }
         });
     },
+    /**Split 开始 */
+    changeTreeWidth(widthVal){
+        // 初始化树的宽度
+        // this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
+        // this.rightSplitWidth = 100-(this.leftSplitWidth)
+      },
+      /**Split 结束 */
+
+      //--left tree start-------
+      findLeftTreeData: function() {
+        // 获取数据
+        this.$api.dept.findTree().then(res => {
+          this.ztreeNodes = res.data;
+        });
+      },
+      onZTreeCreated: function(ztreeObj) {
+        this.ztreeObj = ztreeObj;
+        // onCreated 中操作ztreeObj对象展开第一个节点
+        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+        this.currentTreeNode=ztreeObj.getNodes()[0];
+      },
+      onZTreeClick: function(evt, treeId, treeNode) {
+        // 点击事件
+        this.currentTreeNode = treeNode;
+        this.pageRequest.deptId = this.currentTreeNode.id;
+        this.queryBalance();
+      },
+    //--left tree end-------
   },
 };
 </script>

src/views/FinancialManagement/AcountWithdrawal/ExtendFee.vue

@@ -1,114 +1,159 @@
 <template>
   <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-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" style="height: 40px;">
-              <el-form-item label="结算状态">
-                <el-select v-model="queryForm.settlestatus" placeholder="请选择" style="width: 100%;" clearable>
-                    <el-option label="未结算" value="0"></el-option>
-                    <el-option label="已结算" value="1"></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.signDate"
-                type="daterange"
-                @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="queryEsmInfo" type="primary" 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 ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+           <!-- 左侧树Start -->
+           <SplitArea :size="leftSplitWidth" :minSize="240">
+          <div>
+            <el-divider></el-divider>
+            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
+          </div>
+        </SplitArea>
+        <!-- 左侧树End -->
+    <!-- 搜索区域Start -->
+     <!-- 右侧列表页面Start -->
+     <SplitArea :size="rightSplitWidth">
+    <el-form
+      class="queryForm"
+      ref="queryFormRef"
+      :inline="true"
+      size="small"
+      :model="queryForm"
+      label-width="80px"
+    >
+      <el-row>
+        <el-col :span="7">
+          <el-form-item label="订单号">
+            <el-input
+              style="width: 220px"
+              clearable
+              placeholder="订单号"
+              v-model="queryForm.orderNo"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="7">
+          <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="7">
+          <el-form-item label="交强保单号">
+            <el-input
+              style="width: 220px"
+              clearable
+              placeholder="交强保单号"
+              v-model="queryForm.jqPolicyNo"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="7">
+          <el-form-item label="商业保单号">
+            <el-input
+              style="width: 220px"
+              clearable
+              placeholder="商业保单号"
+              v-model="queryForm.syPolicyNo"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="7">
+          <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="7">
+          <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="7">
+          <el-form-item label="保险公司">
+            <el-input
+              style="width: 220px"
+              clearable
+              placeholder="请输入保险公司"
+              v-model="queryForm.insCompany"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="8" style="height: 40px">
+          <el-form-item label="结算状态">
+            <el-select
+              v-model="queryForm.settlestatus"
+              placeholder="请选择"
+              style="width: 100%"
+              clearable
+            >
+              <el-option label="未结算" value="0"></el-option>
+              <el-option label="已结算" value="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="11">
+          <el-form-item label="签单时间">
+            <!-- <el-date-picker
+              style="width: 220px"
+              size="small"
+              v-model="queryForm.signDate"
+              type="daterange"
+              @change="dateChange"
+              range-separator="至"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker> -->
+            <el-date-picker
+              v-model="queryForm.signTimeStart"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button @click="queryEsmInfo" type="primary" 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>
+     </SplitArea>
+    </Split>
+    </el-main>
   </div>
 </template>
 <script>
@@ -116,10 +161,12 @@ 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";
+import tree from "@/components/ztree.vue";  // 机构树组件
 export default {
   components: {
     KtCommonTable,
     KtButton,
+    tree
   },
   data() {
     return {
@@ -130,75 +177,74 @@ export default {
         //查询的默认条件
         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: "",
-          },
-          settlestatus: {
-            name: "settlestatus",
-            value: "",
-          },
-          enddate: {
-            name: "enddate",
-            value: "",
-          },
-        },
+        deptid: "",
+        userId: "",
+        orderNo: "",
+        userName: "",
+        licenseNo: "",
+        insCompany: "",
+        startdate: "",
+        startdate: "",
+        settlestatus: "",
+        enddate: "",
+        signTimeStart :''
       },
       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: "settlestatus", label: "结算状态"},
-        { prop: "signDate", label: "签单时间"},
-        { 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 },
+        { prop: "orderNo", label: "订单号", minWidth: 120 },
+        // { prop: "policyno", label: "保单号", minWidth: 100 },
+        { prop: "jqPolicyNo", label: "交强保单号", minWidth: 100 },
+        { prop: "syPolicyNo", label: "商业保单号", minWidth: 100 },
+        { prop: "licenseNo", label: "车牌号", minWidth: 100 },
+        { prop: "product", label: "险种", minWidth: 100 },
+        { prop: "deptName", label: "机构", minWidth: 100 },
+        // { prop: "settlestatus", label: "结算状态"},
+        { prop: "signTime", label: "签单时间" },
+        { prop: "insCompany", label: "保险公司", minWidth: 100 },
+        { prop: "userId", label: "工号", minWidth: 100 },
+        { prop: "userName", label: "姓名", minWidth: 100 },
+        { prop: "commissionRate", label: "佣金比例", minWidth: 100 },
+        { prop: "commissionAmount", label: "佣金金额", minWidth: 100 },
+        { prop: "commissionLevel", label: "佣金级别", minWidth: 100 },
       ],
       //------------协议下拉框数据   begin-----------------
       agreementtypeoptions: [], //协议类型
       //------------协议下拉框数据   end-----------------
+       /**Split 开始 */
+       leftSplitWidth: 15,
+        rightSplitWidth: 85,
+        /**Split 结束 */
+
+        //----ztreeLeft begin---------
+        ztreeObj: null,
+        ztreeSetting: {
+          check: {
+            enable: false
+          },
+          data: {
+            simpleData: {
+              enable: true,
+              pIdKey: "parentId"
+            }
+          },
+          view: {
+            showIcon: false
+          }
+        },
+        ztreeNodes: [],
+        currentTreeNode: null,
+        //----ztreeLeft end---------
     };
   },
   created() {
     //获取所有下拉框数据
     this.getDictItems("agreementtype");
+    this.findLeftTreeData();// 获取机构树的数据
   },
   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为例
@@ -219,14 +265,14 @@ export default {
       return "提现成功";
     },
     //-- formatter end--
-    dateChange(e){
+    dateChange(e) {
       if (e == null) {
-          this.pageRequest.columnFilters.startdate.value = ''
-          this.pageRequest.columnFilters.enddate.value = ''
-        } else {
-      this.pageRequest.columnFilters.startdate.value=e[0];
-      this.pageRequest.columnFilters.enddate.value=e[1];
-        }
+        this.pageRequest.startdate.value = "";
+        this.pageRequest.enddate.value = "";
+      } else {
+        this.pageRequest.startdate.value = e[0];
+        this.pageRequest.enddate.value = e[1];
+      }
     },
     //--数据字典 begin --
     getDictItems: function (typeName) {
@@ -242,13 +288,18 @@ export default {
     },
     //--数据字典 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.columnFilters.settlestatus.value = this.queryForm.settlestatus;
+      this.pageRequest.orderNo = this.queryForm.orderNo;
+      this.pageRequest.userId = this.queryForm.userId;
+      this.pageRequest.jqPolicyNo = this.queryForm.jqPolicyNo;
+      this.pageRequest.syPolicyNo = this.queryForm.syPolicyNo;
+      this.pageRequest.userName = this.queryForm.userName;
+      this.pageRequest.licenseNo = this.queryForm.licenseNo;
+      this.pageRequest.insCompany = this.queryForm.insCompany;
+      this.pageRequest.settlestatus = this.queryForm.settlestatus;
+      if(this.queryForm.signTimeStart){
+        this.pageRequest.signTimeStart = this.queryForm.signTimeStart[0]
+        this.pageRequest.signTimeEnd = this.queryForm.signTimeStart[1]
+      }
       this.pageRequest.pageNum = 1;
       this.findPage();
     },
@@ -259,20 +310,66 @@ export default {
       if (data && data.pageRequest) {
         this.pageRequest.pageNum = data.pageRequest.pageNum;
         this.pageRequest.pageSize = data.pageRequest.pageSize;
-      }
+      } 
+      // else  {
+      //   this.pageRequest.pageNum = 1; 
+      //   this.pageRequest.pageSize = 20;
+      // }
+
       that.$api.task
-        .queryCommission(that.pageRequest)
+        .queryCommission(this.pageRequest)
         .then((res) => {
-          res.data.content.forEach(row=>{
-            row.settlestatus=row.settlestatus==='1'?'已结算':'未结算'
-          })
-          that.pageResult = res.data;
+          let pageList = {
+            content: res.data.records,
+            pageNum: res.data.current,
+            pageSize: res.data.size,
+            totalPages: res.data.pages,
+            totalSize: res.data.total,
+          };
+          pageList.content.forEach((row) => {
+            row.settlestatus = row.settlestatus === "1" ? "已结算" : "未结算";
+          });
+          that.pageResult = pageList;
         })
         .then(data != null ? data.callback : "");
     },
+     /**Split 开始 */
+     changeTreeWidth(widthVal){
+        // 初始化树的宽度
+        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
+        this.rightSplitWidth = 100-(this.leftSplitWidth)
+      },
+      /**Split 结束 */
+
+      //--left tree start-------
+      findLeftTreeData: function() {
+        // 获取数据
+        this.$api.dept.findTree().then(res => {
+          this.ztreeNodes = res.data;
+        });
+      },
+      onZTreeCreated: function(ztreeObj) {
+        this.ztreeObj = ztreeObj;
+        // onCreated 中操作ztreeObj对象展开第一个节点
+        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+        this.currentTreeNode=ztreeObj.getNodes()[0];
+      },
+      onZTreeClick: function(evt, treeId, treeNode) {
+        // 点击事件
+        this.currentTreeNode = treeNode;
+        this.pageRequest.deptId = this.currentTreeNode.id;
+        this.findPage();
+      },
+      //--left tree end-------
   },
 };
 </script>
 <style scoped>
-
+/deep/ .el-form-item__label{
+  width: 90px !important;
+  text-align:left;
+}
+.el-form{
+  padding-left: 10px;
+}
 </style>

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

@@ -1,43 +1,88 @@
 <template>
   <div>
-    <el-form class="queryForm" ref="queryFormRef" :model="pageRequest" label-width="80px" size="small">
-      <el-row style="margin-bottom: 15px">
-        <el-col :span="5">
-          <el-form-item label="机构名称">
-            <el-input  clearable style="width:220px" placeholder="请输入机构名称"
-              v-model="pageRequest.deptName"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item label="类型">
-            <el-select style="width: 220px;" clearable v-model="pageRequest.documentary" placeholder="选择类型">
-              <el-option label="提现" value="1"></el-option>
-              <el-option label="收入" value="2"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="签单时间">
-            <el-date-picker size="small" v-model="pageRequest.signDate" type="daterange" @change="dateChange"
-              range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
+    <el-main ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+         <!-- 左侧树Start -->
+         <SplitArea :size="leftSplitWidth" :minSize="240">
+          <div>
+            <el-divider></el-divider>
+            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
+          </div>
+        </SplitArea>
+        <!-- 左侧树End -->
+         <!-- 右侧列表页面Start -->
+         <SplitArea :size="rightSplitWidth">
+        <el-form
+          class="queryForm"
+          ref="queryFormRef"
+          :model="pageRequest"
+          label-width="80px"
+          size="small"
+        >
+          <el-row style="margin-bottom: 15px">
+            <el-col :span="5">
+              <el-form-item label="机构名称">
+                <el-input
+                  clearable
+                  style="width: 220px"
+                  placeholder="请输入机构名称"
+                  v-model="pageRequest.deptName"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="类型">
+                <el-select
+                  style="width: 220px"
+                  clearable
+                  v-model="pageRequest.documentary"
+                  placeholder="选择类型"
+                >
+                  <el-option label="提现" value="1"></el-option>
+                  <el-option label="收入" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="签单时间">
+                <el-date-picker
+                  size="small"
+                  v-model="pageRequest.signDate"
+                  type="daterange"
+                  @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 label-width="20px">
-            <el-button @click="getOrderList" type="primary" size="small">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+            <el-col :span="4">
+              <el-form-item label-width="20px">
+                <el-button @click="getOrderList" type="primary" size="small"
+                  >查询</el-button
+                >
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
 
-    <kt-common-table permsDelete="sys:user:delete" :showBatchDelete="false" :showBatchPrint="false"
-      permsButton3="sys:user:edit" :data="pageResult" :columns="columns" @findPage="findPage" :showOperation="false"
-      @handlePrint="handlePrint">
-    </kt-common-table>
+        <kt-common-table
+          permsDelete="sys:user:delete"
+          :showBatchDelete="false"
+          :showBatchPrint="false"
+          permsButton3="sys:user:edit"
+          :data="pageResult"
+          :columns="columns"
+          @findPage="findPage"
+          :showOperation="false"
+          @handlePrint="handlePrint"
+        >
+        </kt-common-table>
 
-    <!-- <el-dialog
+        <!-- <el-dialog
       v-dialogDrag
       title="提现"
       :visible.sync="dialogVisible"
@@ -73,14 +118,19 @@
         >
       </span>
     </el-dialog> -->
+         </SplitArea>    
+  </Split>
+    </el-main>
   </div>
 </template>
 <script>
 import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import tree from "@/components/ztree.vue";  // 机构树组件
 import Cookies from "js-cookie";
 export default {
   components: {
     KtCommonTable,
+    tree
   },
   data() {
     return {
@@ -94,11 +144,12 @@ export default {
       queryForm: {},
       pageResult: {},
       pageRequest: {
-        deptName:"",
-        documentary:"",
+        deptName: "",
+        documentary: "",
         //查询的默认条件
         pageNo: 1,
         pageSize: 10,
+        
       },
       columns: [
         //数据列
@@ -108,9 +159,33 @@ export default {
         { prop: "surplusAmount", label: "账户剩余金额" },
         { prop: "documentary", label: "类型" },
         { prop: "suborder", label: "来源订单" },
-        { prop: "remark", label: "备注", },
-        { prop: "createTime", label: "创建时间", },
+        { prop: "remark", label: "备注" },
+        { prop: "createTime", label: "创建时间" },
       ],
+       /**Split 开始 */
+       leftSplitWidth: 20,
+        rightSplitWidth: 80,
+        /**Split 结束 */
+
+        //----ztreeLeft begin---------
+        ztreeObj: null,
+        ztreeSetting: {
+          check: {
+            enable: false
+          },
+          data: {
+            simpleData: {
+              enable: true,
+              pIdKey: "parentId"
+            }
+          },
+          view: {
+            showIcon: false
+          }
+        },
+        ztreeNodes: [],
+        currentTreeNode: null,
+        //----ztreeLeft end---------
     };
   },
   created() {
@@ -123,8 +198,12 @@ export default {
     //   this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
     // }
     this.deptAccount();
+    this.findLeftTreeData();// 获取机构树的数据
+  },
+  mounted() {
+    //用像素初始化左边的split的宽度
+    this.changeTreeWidth(240);// 初始化树的宽度
   },
-  mounted() { },
   methods: {
     handlePrint() {
       this.$api.task.excelExport(this.pageRequest).then((res) => {
@@ -154,8 +233,8 @@ export default {
     },
     dateChange(e) {
       if (e == null) {
-        this.pageRequest.createTimeStart = ''
-        this.pageRequest.createTimeEnd = ''
+        this.pageRequest.createTimeStart = "";
+        this.pageRequest.createTimeEnd = "";
       } else {
         this.pageRequest.createTimeStart = e[0];
         this.pageRequest.createTimeEnd = e[1];
@@ -167,7 +246,7 @@ export default {
         .then((_) => {
           done();
         })
-        .catch((_) => { });
+        .catch((_) => {});
     },
     closeVisible() {
       this.withdrawal = "";
@@ -214,13 +293,43 @@ export default {
             pageSize: res.data.size,
             totalPages: res.data.pages,
             totalSize: res.data.total,
-          }
-          pageList.content.forEach(val => val.documentary = val.documentary == '1' ? '提现' : '收入')
+          };
+          pageList.content.forEach(
+            (val) =>
+              (val.documentary = val.documentary == "1" ? "提现" : "收入")
+          );
           that.pageResult = pageList;
-
         })
         .then(data != null ? data.callback : "");
     },
+       /**Split 开始 */
+       changeTreeWidth(widthVal){
+        // 初始化树的宽度
+        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
+        this.rightSplitWidth = 100-(this.leftSplitWidth)
+      },
+      /**Split 结束 */
+
+      //--left tree start-------
+      findLeftTreeData: function() {
+        // 获取数据
+        this.$api.dept.findTree().then(res => {
+          this.ztreeNodes = res.data;
+        });
+      },
+      onZTreeCreated: function(ztreeObj) {
+        this.ztreeObj = ztreeObj;
+        // onCreated 中操作ztreeObj对象展开第一个节点
+        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+        this.currentTreeNode=ztreeObj.getNodes()[0];
+      },
+      onZTreeClick: function(evt, treeId, treeNode) {
+        // 点击事件
+        this.currentTreeNode = treeNode;
+        this.pageRequest.deptId = this.currentTreeNode.id;
+        this.findPage();
+      },
+      //--left tree end-------
   },
 };
 </script>
@@ -235,7 +344,7 @@ export default {
   height: 110px;
 }
 
-.basicdata>div {
+.basicdata > div {
   height: 100%;
 }
 

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

@@ -1,209 +1,358 @@
 <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;">
-          <el-col :span="8">
-            <el-form-item label="录入时间">
-              <el-date-picker  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 label-width="20px">
-            <el-button @click="findPage" type="primary" size="small">查询</el-button>
-          </el-form-item>
-        </el-col>
-        </el-row>
-      </el-form>
+    <el-main ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+         <!-- 左侧树Start -->
+         <SplitArea :size="leftSplitWidth" :minSize="240">
+          <div>
+            <el-divider></el-divider>
+            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
+          </div>
+        </SplitArea>
+        <!-- 左侧树End -->
+         <!-- 右侧列表页面Start -->
+         <SplitArea :size="rightSplitWidth">
+        <el-form
+          class="queryForm"
+          ref="queryFormRef"
+          :model="pageRequest"
+          label-width="80px"
+          size="small"
+        >
+          <el-row style="margin-bottom: 15px">
+            <el-col :span="5">
+              <el-form-item label="机构名称">
+                <el-input
+                  clearable
+                  style="width: 220px"
+                  placeholder="请输入机构名称"
+                  v-model="pageRequest.deptName"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="类型">
+                <el-select
+                  style="width: 220px"
+                  clearable
+                  v-model="pageRequest.documentary"
+                  placeholder="选择类型"
+                >
+                  <el-option label="提现" value="1"></el-option>
+                  <el-option label="收入" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="签单时间">
+                <el-date-picker
+                  size="small"
+                  v-model="pageRequest.signDate"
+                  type="daterange"
+                  @change="dateChange"
+                  range-separator="至"
+                  value-format="yyyy-MM-dd"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
 
-      <kt-common-table :showOperation="false" :showBatchDelete="false" :showBatchPrint="false"  :data="pageResult" :columns="columns" @findPage="findPage" @handlePrint="handlePrint"></kt-common-table>
-    </el-main>
+            <el-col :span="4">
+              <el-form-item label-width="20px">
+                <el-button @click="getOrderList" type="primary" size="small"
+                  >查询</el-button
+                >
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
 
+        <kt-common-table
+          permsDelete="sys:user:delete"
+          :showBatchDelete="false"
+          :showBatchPrint="false"
+          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> -->
+         </SplitArea>    
+  </Split>
+    </el-main>
   </div>
 </template>
 <script>
-  import Cookies from "js-cookie"
-  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 {
-        peopleid:"",
-        peopledeptid:"",
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import tree from "@/components/ztree.vue";  // 机构树组件
+import Cookies from "js-cookie";
+export default {
+  components: {
+    KtCommonTable,
+    tree
+  },
+  data() {
+    return {
+      canwithdrawal: "",
+      withdrawal: "",
+
+      peopleid: "",
+      peopledeptid: "",
+
+      dialogVisible: false, //提现对话框
+      queryForm: {},
+      pageResult: {},
+      pageRequest: {
+        deptName: "",
+        documentary: "",
+        //查询的默认条件
+        pageNo: 1,
+        pageSize: 10,
+        
+      },
+      columns: [
+        //数据列
+        { prop: "deptId", label: "机构代码" },
+        { prop: "deptName", label: "机构名称" },
+        { prop: "amount", label: "金额" },
+        { prop: "surplusAmount", label: "账户剩余金额" },
+        { prop: "documentary", label: "类型" },
+        { prop: "suborder", label: "来源订单" },
+        { prop: "remark", label: "备注" },
+        { prop: "createTime", label: "创建时间" },
+      ],
+       /**Split 开始 */
+       leftSplitWidth: 20,
+        rightSplitWidth: 80,
+        /**Split 结束 */
 
-        // 右侧列表查询数据Start
-        queryForm: {},
-        pageResult: {},
-        pageRequest: { //查询的默认条件
-          pageNo: 1,
-          pageSize: 10,
-          status:'1'
+        //----ztreeLeft begin---------
+        ztreeObj: null,
+        ztreeSetting: {
+          check: {
+            enable: false
+          },
+          data: {
+            simpleData: {
+              enable: true,
+              pIdKey: "parentId"
+            }
+          },
+          view: {
+            showIcon: false
+          }
         },
-        columns: [ //数据列
-          {prop: "id",label: "提现单号",},
-          {prop: "deptId",label: "机构代码",},
-          {prop: "name",label: "机构名称"},
-          {prop: "amount",label: "提现金额"},
-          {prop: "voucherId",label: "凭证号"},
-          {prop: "createTime",label: "申请时间"}
-        ],
-        //------------协议下拉框数据   begin-----------------
-        agreementtypeoptions: [], //协议类型
-        //------------协议下拉框数据   end-----------------
-      };
+        ztreeNodes: [],
+        currentTreeNode: null,
+        //----ztreeLeft end---------
+    };
+  },
+  created() {
+    // 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 = "";
+    //   this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
+    // }
+    this.deptAccount();
+    this.findLeftTreeData();// 获取机构树的数据
+  },
+  mounted() {
+    //用像素初始化左边的split的宽度
+    this.changeTreeWidth(240);// 初始化树的宽度
+  },
+  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);
+      });
     },
-    created() {
-      // 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 = '9';
-      //   this.pageRequest.columnFilters.deptid.value=this.peopledeptid;
-      // }
-      //获取所有下拉框数据
-      this.getDictItems("agreementtype");
+    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.columnFilters.settlestatus.value = this.queryForm.settlestatus;
+      this.pageRequest.pageNum = 1;
+      this.findPage();
     },
-    mounted() {
-
+    dateChange(e) {
+      if (e == null) {
+        this.pageRequest.createTimeStart = "";
+        this.pageRequest.createTimeEnd = "";
+      } else {
+        this.pageRequest.createTimeStart = e[0];
+        this.pageRequest.createTimeEnd = e[1];
+      }
     },
-    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
+    //确认是否关闭对话框
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
         })
-      },
-      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--
-
-
-      //--数据字典 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.pageNo = data.pageRequest.pageNum;
-          this.pageRequest.pageSize = data.pageRequest.pageSize;
+        .catch((_) => {});
+    },
+    closeVisible() {
+      this.withdrawal = "";
+    },
+    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();
+        }
+      });
+      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;
         }
-        that.$api.task.WithdrawqueryStatus(that.pageRequest)
-          .then(res => {
-            let pageList = {
+      });
+    },
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNo = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      that.$api.task
+        .sysDeptAccountHistoryPage(that.pageRequest)
+        .then((res) => {
+          let pageList = {
             content: res.data.records,
             pageNum: res.data.current,
             pageSize: res.data.size,
             totalPages: res.data.pages,
             totalSize: res.data.total,
-          }
+          };
+          pageList.content.forEach(
+            (val) =>
+              (val.documentary = val.documentary == "1" ? "提现" : "收入")
+          );
           that.pageResult = pageList;
-          })
-          .then(data != null ? data.callback : "");
-      },
-      dateChange(e){
-      if (e == null) {
-        this.pageRequest.createTimeStart = ''
-        this.pageRequest.createTimeEnd = ''
-      } else {
-        this.pageRequest.createTimeStart=e[0];
-        this.pageRequest.createTimeEnd=e[1];
-      }
+        })
+        .then(data != null ? data.callback : "");
     },
-      // 格式化日期，如月、日、时、分、秒保证为2位数
-      formatNumber(n) {
-       n = n.toString()
-       return n[1] ? n : '0' + n;
+       /**Split 开始 */
+       changeTreeWidth(widthVal){
+        // 初始化树的宽度
+        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
+        this.rightSplitWidth = 100-(this.leftSplitWidth)
       },
-      // 参数number为毫秒时间戳，format为需要转换成的日期格式
-      formatTime(number, format) {
-       let time = new Date(number)
-       let newArr = []
-       let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
-       newArr.push(time.getFullYear())
-       newArr.push(this.formatNumber(time.getMonth() + 1))
-       newArr.push(this.formatNumber(time.getDate()))
-
-       newArr.push(this.formatNumber(time.getHours()))
-       newArr.push(this.formatNumber(time.getMinutes()))
-       newArr.push(this.formatNumber(time.getSeconds()))
-
-       for (let i in newArr) {
-        format = format.replace(formatArr[i], newArr[i])
-       }
-       return format;
-      }
+      /**Split 结束 */
 
-    }
-  };
+      //--left tree start-------
+      findLeftTreeData: function() {
+        // 获取数据
+        this.$api.dept.findTree().then(res => {
+          this.ztreeNodes = res.data;
+        });
+      },
+      onZTreeCreated: function(ztreeObj) {
+        this.ztreeObj = ztreeObj;
+        // onCreated 中操作ztreeObj对象展开第一个节点
+        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+        this.currentTreeNode=ztreeObj.getNodes()[0];
+      },
+      onZTreeClick: function(evt, treeId, treeNode) {
+        // 点击事件
+        this.currentTreeNode = treeNode;
+        this.pageRequest.deptId = this.currentTreeNode.id;
+        this.findPage();
+      },
+      //--left tree end-------
+  },
+};
 </script>
 
 
 <style scoped>
-  .el-divider {
-    margin: 10px 0px 15px !important;
-  }
+.basicdata {
+  border-radius: 5px;
+  background-color: #ffffff;
+  box-shadow: -1px -1px 5px 0 rgb(0 0 0 / 10%);
+  margin: 15px 8px;
+  height: 110px;
+}
+
+.basicdata > div {
+  height: 100%;
+}
 
-  .queryForm .el-row {
-    margin: 0px;
-  }
+.queryForm .el-row {
+  margin: 0px;
+}
 
-  .queryForm .el-form-item {
-    margin-bottom: 0px;
-  }
+.queryForm .el-form-item {
+  margin-bottom: 0px;
+}
 </style>

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

@@ -1,216 +1,319 @@
 <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;">
-          <el-col :span="8">
-            <el-form-item label="录入时间">
-              <el-date-picker  size="small" v-model="queryForm.date" type="daterange"  @change="dateChange"  value-format="yyyy-MM-dd"
-                align="left" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-          <el-form-item label-width="20px">
-            <el-button @click="findPage" type="primary" size="small">查询</el-button>
-          </el-form-item>
-        </el-col>
-          <!-- <el-col :span="4">
+    <el-main ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+        <!-- 左侧树Start -->
+        <SplitArea :size="leftSplitWidth" :minSize="240">
+          <div>
+            <el-divider></el-divider>
+            <tree
+              :setting="ztreeSetting"
+              :nodes="ztreeNodes"
+              @onClick="onZTreeClick"
+              @onCreated="onZTreeCreated"
+            />
+          </div>
+        </SplitArea>
+        <!-- 左侧树End -->
+        <!-- 搜索区域Start -->
+        <SplitArea :size="rightSplitWidth">
+          <el-form
+            class="queryForm"
+            ref="queryFormRef"
+            :model="queryForm"
+            label-width="80px"
+          >
+            <el-row style="margin-bottom: 15px">
+              <el-col :span="8">
+                <el-form-item label="申请时间">
+                  <el-date-picker
+                    size="small"
+                    v-model="queryForm.date"
+                    type="daterange"
+                    @change="dateChange"
+                    value-format="yyyy-MM-dd"
+                    align="left"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label-width="20px">
+                  <el-button @click="findPage" type="primary" size="small"
+                    >查询</el-button
+                  >
+                </el-form-item>
+              </el-col>
+              <!-- <el-col :span="4">
             <el-form-item>
               <el-button @click="findPage" size="small">查询</el-button>
             </el-form-item>
           </el-col> -->
-        </el-row>
-      </el-form>
+            </el-row>
+          </el-form>
 
-      <kt-common-table :showOperation="false" :showBatchDelete="false" :showBatchPrint="false"  :data="pageResult" :columns="columns" @findPage="findPage" @handlePrint="handlePrint">
-      </kt-common-table>
+          <kt-common-table
+            :showOperation="false"
+            :showBatchDelete="false"
+            :showBatchPrint="false"
+            :data="pageResult"
+            :columns="columns"
+            @findPage="findPage"
+            @handlePrint="handlePrint"
+          >
+          </kt-common-table>
+        </SplitArea>
+      </Split>
     </el-main>
-
-
   </div>
 </template>
 <script>
-  import Cookies from "js-cookie"
-  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 {
-        peopleid:"",
-        peopledeptid:"",
-        // 右侧列表查询数据Start
-        queryForm: {},
-        pageResult: {},
-        pageRequest: { //查询的默认条件
-          pageNo: 1,
-          pageSize: 10,
-          status:'2'
+import Cookies from "js-cookie";
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import tree from "@/components/ztree.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,
+    tree,
+  },
+  data() {
+    return {
+      peopleid: "",
+      peopledeptid: "",
+      // 右侧列表查询数据Start
+      queryForm: {},
+      pageResult: {},
+      pageRequest: {
+        //查询的默认条件
+        pageNo: 1,
+        pageSize: 10,
+        status: "2",
+      },
+      columns: [
+        //数据列
+        { prop: "id", label: "提现单号" },
+        { prop: "deptId", label: "机构代码" },
+        { prop: "name", label: "机构名称" },
+        { prop: "amount", label: "提现金额" },
+        { prop: "remark", label: "驳回原因" },
+        { prop: "createTime", label: "申请时间" },
+      ],
+      //------------协议下拉框数据   begin-----------------
+      agreementtypeoptions: [], //协议类型
+      //------------协议下拉框数据   end-----------------
+      /**Split 开始 */
+      leftSplitWidth: 20,
+      rightSplitWidth: 80,
+      /**Split 结束 */
+      //----ztreeLeft begin---------
+      ztreeObj: null,
+      ztreeSetting: {
+        check: {
+          enable: false,
         },
-        columns: [ //数据列
-        {prop: "id",label: "提现单号",},
-          {prop: "deptId",label: "机构代码",},
-          {prop: "name",label: "机构名称"},
-          {prop: "amount",label: "提现金额"},
-          {prop: "remark",label: "驳回原因"},
-          {prop: "createTime",label: "申请时间"}
-        ],
-        //------------协议下拉框数据   begin-----------------
-        agreementtypeoptions: [], //协议类型
-        //------------协议下拉框数据   end-----------------
-      };
-    },
-    created() {
-      // 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 = '9';
-      //   this.pageRequest.columnFilters.deptid.value=this.peopledeptid;
-      // }
-      //获取所有下拉框数据
-      this.getDictItems("agreementtype");
-    },
-    mounted() {
-
-    },
-    methods: {
-      dateChange(e){
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId",
+          },
+        },
+        view: {
+          showIcon: false,
+        },
+      },
+      ztreeNodes: [],
+      currentTreeNode: null,
+      //----ztreeLeft end---------
+    };
+  },
+  created() {
+    // 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 = '9';
+    //   this.pageRequest.columnFilters.deptid.value=this.peopledeptid;
+    // }
+    //获取所有下拉框数据
+    this.getDictItems("agreementtype");
+    this.findLeftTreeData(); // 获取机构树的数据
+  },
+  mounted() {
+    //用像素初始化左边的split的宽度
+    this.changeTreeWidth(240);// 初始化树的宽度
+  },
+  methods: {
+    dateChange(e) {
       if (e == null) {
-        this.pageRequest.createTimeStart = ''
-        this.pageRequest.createTimeEnd = ''
+        this.pageRequest.createTimeStart = "";
+        this.pageRequest.createTimeEnd = "";
       } else {
-        this.pageRequest.createTimeStart=e[0];
-        this.pageRequest.createTimeEnd=e[1];
+        this.pageRequest.createTimeStart = e[0];
+        this.pageRequest.createTimeEnd = e[1];
       }
     },
-		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--
-
+    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--
 
-      //--数据字典 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 --
+    //--数据字典 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.pageNo = data.pageRequest.pageNum;
-          this.pageRequest.pageSize = data.pageRequest.pageSize;
-        }
-        that.$api.task.WithdrawqueryStatus(that.pageRequest)
-          .then(res => {
-            let pageList = {
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNo = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      that.$api.task
+        .WithdrawqueryStatus(that.pageRequest)
+        .then((res) => {
+          let pageList = {
             content: res.data.records,
             pageNum: res.data.current,
             pageSize: res.data.size,
             totalPages: res.data.pages,
             totalSize: res.data.total,
-          }
+          };
           that.pageResult = pageList;
-          })
-          .then(data != null ? data.callback : "");
-      },
+        })
+        .then(data != null ? data.callback : "");
+    },
 
-      // 格式化日期，如月、日、时、分、秒保证为2位数
-      formatNumber(n) {
-       n = n.toString()
-       return n[1] ? n : '0' + n;
-      },
-      // 参数number为毫秒时间戳，format为需要转换成的日期格式
-      formatTime(number, format) {
-       let time = new Date(number)
-       let newArr = []
-       let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
-       newArr.push(time.getFullYear())
-       newArr.push(this.formatNumber(time.getMonth() + 1))
-       newArr.push(this.formatNumber(time.getDate()))
+    // 格式化日期，如月、日、时、分、秒保证为2位数
+    formatNumber(n) {
+      n = n.toString();
+      return n[1] ? n : "0" + n;
+    },
+    // 参数number为毫秒时间戳，format为需要转换成的日期格式
+    formatTime(number, format) {
+      let time = new Date(number);
+      let newArr = [];
+      let formatArr = ["Y", "M", "D", "h", "m", "s"];
+      newArr.push(time.getFullYear());
+      newArr.push(this.formatNumber(time.getMonth() + 1));
+      newArr.push(this.formatNumber(time.getDate()));
 
-       newArr.push(this.formatNumber(time.getHours()))
-       newArr.push(this.formatNumber(time.getMinutes()))
-       newArr.push(this.formatNumber(time.getSeconds()))
+      newArr.push(this.formatNumber(time.getHours()));
+      newArr.push(this.formatNumber(time.getMinutes()));
+      newArr.push(this.formatNumber(time.getSeconds()));
 
-       for (let i in newArr) {
-        format = format.replace(formatArr[i], newArr[i])
-       }
-       return format;
+      for (let i in newArr) {
+        format = format.replace(formatArr[i], newArr[i]);
       }
-
-    }
-  };
+      return format;
+    },
+    /**Split 开始 */
+    changeTreeWidth(widthVal) {
+      // 初始化树的宽度
+      this.leftSplitWidth = Math.ceil(
+        (widthVal / this.$refs.elMain.$el.clientWidth) * 100
+      );
+      this.rightSplitWidth = 100 - this.leftSplitWidth;
+    },
+    /**Split 结束 */
+    //--left tree start-------
+    findLeftTreeData: function () {
+      // 获取数据
+      this.$api.dept.findTree().then((res) => {
+        this.ztreeNodes = res.data;
+      });
+    },
+    onZTreeCreated: function (ztreeObj) {
+      this.ztreeObj = ztreeObj;
+      // onCreated 中操作ztreeObj对象展开第一个节点
+      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+      this.currentTreeNode = ztreeObj.getNodes()[0];
+    },
+    onZTreeClick: function (evt, treeId, treeNode) {
+      // 点击事件
+      this.currentTreeNode = treeNode;
+      this.pageRequest.deptId = this.currentTreeNode.id;
+      this.findPage();
+    },
+    //--left tree end-------
+    findLeftTreeData: function () {
+      // 获取数据
+      this.$api.dept.findTree().then((res) => {
+        this.ztreeNodes = res.data;
+      });
+    },
+  },
+};
 </script>
 
 
 <style scoped>
-  .el-divider {
-    margin: 10px 0px 15px !important;
-  }
+.el-divider {
+  margin: 10px 0px 15px !important;
+}
 
-  .queryForm .el-row {
-    margin: 0px;
-  }
+.queryForm .el-row {
+  margin: 0px;
+}
 
-  .queryForm .el-form-item {
-    margin-bottom: 0px;
-  }
+.queryForm .el-form-item {
+  margin-bottom: 0px;
+}
 </style>

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

@@ -1,11 +1,23 @@
 <template>
   <div>
     <el-main ref="elMain" style="padding: 0px;">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px);">
+         <!-- 左侧树Start -->
+         <SplitArea :size="leftSplitWidth" :minSize="240">
+          <div>
+            <el-divider></el-divider>
+            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
+          </div>
+        </SplitArea>
+        <!-- 左侧树End -->
+
       <!-- 搜索区域Start -->
+      <!-- 右侧列表页面Start -->
+      <SplitArea :size="rightSplitWidth">
       <el-form class="queryForm" ref="queryFormRef" :model="queryForm" label-width="80px">
         <el-row style="margin-bottom: 15px;">
           <el-col :span="8">
-            <el-form-item label="录入时间">
+            <el-form-item label="申请时间">
               <el-date-picker size="small" v-model="queryForm.date" value-format="yyyy-MM-dd" type="daterange"
                 @change="dateChange" align="left" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
               </el-date-picker>
@@ -24,6 +36,8 @@
         button3Name="审核驳回" button3Type="text"  @handleButton3="handleButton3"
         button4Type="text"  button4Name="审核通过"  @handleButton4="handleButton4" @handlePrint="handlePrint">
       </kt-common-table>
+      </SplitArea>
+      </Split>
     </el-main>
     <el-dialog
       :visible.sync="dialogVisibleBatch"
@@ -50,12 +64,14 @@
 <script>
 import Cookies from "js-cookie"
 import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+  import tree from "@/components/ztree.vue";  // 机构树组件
 import KtButton from "@/views/Core/KtButton";
 import CommonUtil from "@/utils/comutil.js";
 export default {
   components: {
     KtCommonTable,
-    KtButton
+    KtButton,
+    tree
   },
   data() {
     return {
@@ -82,13 +98,39 @@ export default {
         { prop: "createTime", label: "申请时间" }
       ],
       agreementtypeoptions: [], //协议类型
+       /**Split 开始 */
+       leftSplitWidth: 20,
+        rightSplitWidth: 80,
+        /**Split 结束 */
+
+        //----ztreeLeft begin---------
+        ztreeObj: null,
+        ztreeSetting: {
+          check: {
+            enable: false
+          },
+          data: {
+            simpleData: {
+              enable: true,
+              pIdKey: "parentId"
+            }
+          },
+          view: {
+            showIcon: false
+          }
+        },
+        ztreeNodes: [],
+        currentTreeNode: null,
+        //----ztreeLeft end---------
     };
   },
   created() {
     // this.getDictItems("agreementtype");
+      this.findLeftTreeData();// 获取机构树的数据
   },
   mounted() {
-
+//用像素初始化左边的split的宽度
+this.changeTreeWidth(240);// 初始化树的宽度
   },
   methods: {
     BatchClose(){
@@ -297,7 +339,35 @@ export default {
         format = format.replace(formatArr[i], newArr[i])
       }
       return format;
-    }
+    },
+    /**Split 开始 */
+    changeTreeWidth(widthVal){
+        // 初始化树的宽度
+        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
+        this.rightSplitWidth = 100-(this.leftSplitWidth)
+      },
+      /**Split 结束 */
+
+      //--left tree start-------
+      findLeftTreeData: function() {
+        // 获取数据
+        this.$api.dept.findTree().then(res => {
+          this.ztreeNodes = res.data;
+        });
+      },
+      onZTreeCreated: function(ztreeObj) {
+        this.ztreeObj = ztreeObj;
+        // onCreated 中操作ztreeObj对象展开第一个节点
+        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+        this.currentTreeNode=ztreeObj.getNodes()[0];
+      },
+      onZTreeClick: function(evt, treeId, treeNode) {
+        // 点击事件
+        this.currentTreeNode = treeNode;
+        this.pageRequest.deptId = this.currentTreeNode.id;
+        this.findPage();
+      },
+      //--left tree end-------
 
   }
 };