iteration：代发合同管理联动发薪主题

src/views/business/outContract/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
+    <div class="EDMMain">
+      <div class="themeMain">
+        <div class="head-container">
+          <el-input v-model="deptName" placeholder="请输入发薪主题" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree :data="companyInfoList" :props="defaultProps" :expand-on-click-node="false"
+            :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current
+            @node-click="handleNodeClick" />
+        </div>
+      </div>
+      <div class="listMain">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="80px">
           <el-form-item label="合同名称" prop="contractName">
             <el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable
               @keyup.enter.native="handleQuery" />
@@ -10,7 +24,8 @@
               @keyup.enter.native="handleQuery" />
           </el-form-item>
           <el-form-item label="单位名称" prop="groupName">
-        <el-input v-model="queryParams.groupName" placeholder="请输入单位名称" clearable @keyup.enter.native="handleQuery" />
+            <el-input v-model="queryParams.groupName" placeholder="请输入单位名称" clearable
+              @keyup.enter.native="handleQuery" />
           </el-form-item>
           <!--      <el-form-item label="单位编码(社会信用代码)" prop="groupCode">-->
           <!--        <el-input-->
@@ -52,8 +67,8 @@
 
         <el-table v-loading="loading" :data="outContractList" @selection-change="handleSelectionChange" height="650">
           <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="合同名称" align="center" prop="contractName" fixed />
           <el-table-column label="合同编号" align="center" prop="contractCode" fixed />
+          <el-table-column label="合同名称" align="center" prop="contractName" fixed />
           <el-table-column label="用工单位" align="center" prop="groupName" fixed />
           <el-table-column label="信用代码" align="center" prop="groupCode" />
           <el-table-column label="五险一金承担方式" align="center" prop="bearType" width="110">
@@ -62,34 +77,35 @@
             </template>
           </el-table-column>
           <el-table-column label="发薪主体" align="center" prop="payerCompanyName" />
-      <el-table-column label="保险缴纳基数">
+          <!-- <el-table-column label="保险缴纳基数">
             <el-table-column label="失业保险(￥)" align="center" prop="sybxBase" />
             <el-table-column label="养老保险(￥)" align="center" prop="ylbxBase" />
             <el-table-column label="工伤保险(￥)" align="center" prop="gsbxBase" />
             <el-table-column label="医疗保险(￥)" align="center" prop="ysbxBase" />
             <el-table-column label="生育保险(￥)" align="center" prop="syubxBase" />
             <el-table-column label="公积金(￥)" align="center" prop="providentFundBase" />
-      </el-table-column>
-      <el-table-column label="单位缴纳保险比例">
+          </el-table-column> -->
+          <!-- <el-table-column label="单位缴纳保险比例">
             <el-table-column label="失业保险(%)" align="center" prop="sybxCompanyRate" />
             <el-table-column label="养老保险(%)" align="center" prop="ylbxCompanyRate" />
             <el-table-column label="工伤保险(%)" align="center" prop="gsbxCompanyRate" />
             <el-table-column label="医疗保险(%)" align="center" prop="ysbxCompanyRate" />
             <el-table-column label="生育保险(%)" align="center" prop="syubxCompanyRate" />
             <el-table-column label="公积金(%)" align="center" prop="providentFundCompanyRate" />
-      </el-table-column>
-      <el-table-column label="个人缴纳保险比例">
+          </el-table-column> -->
+          <!-- <el-table-column label="个人缴纳保险比例">
             <el-table-column label="失业保险(%)" align="center" prop="sybxPersonalRate" />
             <el-table-column label="养老保险(%)" align="center" prop="ylbxPersonalRate" />
             <el-table-column label="工伤保险(%)" align="center" prop="gsbxPersonalRate" />
             <el-table-column label="医疗保险(%)" align="center" prop="ysbxPersonalRate" />
             <el-table-column label="生育保险(%)" align="center" prop="syubxPersonalRate" />
             <el-table-column label="公积金(%)" align="center" prop="providentFundPersonalRate" />
-      </el-table-column>
+          </el-table-column> -->
           <el-table-column label="管理费" align="center" prop="operationCost" />
           <el-table-column label="操作" align="center" width="120px" class-name="small-padding fixed-width" fixed="right">
             <template slot-scope="scope">
-          <el-button size="mini" type="text" v-if="scope.row.annex" icon="el-icon-link" @click="viewAnnex(scope.row.annex)">查看附件</el-button>
+              <el-button size="mini" type="text" v-if="scope.row.annex" icon="el-icon-link"
+                @click="viewAnnex(scope.row.annex)">查看附件</el-button>
               <el-button size="mini" type="text" icon="el-icon-user" @click="staffManage(scope.row)"
                 v-hasPermi="['business:outContract:manage']">员工管理</el-button>
               <el-button type="text" icon="el-icon-s-help" size="mini" @click="createBatchTaskOne(scope.row)"
@@ -102,8 +118,11 @@
           </el-table-column>
         </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </div>
+    </div>
+
 
     <!-- 生成发薪任务窗口 -->
     <el-dialog title="生成发薪任务" :visible.sync="bcoOpen" width="500px" append-to-body>
@@ -128,6 +147,7 @@
 </template>
 
 <script>
+import { listCompanyInfo } from "@/api/business/companyInfo";
 import { listOutContract, delOutContract, addOutContract, updateOutContract } from "@/api/business/outContract";
 import { buildPayOutRecord } from '@/api/business/payOutRecord'
 
@@ -182,6 +202,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        payerCompanyId: null,
         contractName: null,
         contractCode: null,
         groupName: null,
@@ -210,16 +231,56 @@ export default {
       },
       // 表单参数
       form: {},
+      // 发薪主题列表数据
+      companyInfoList: [],
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      deptName: null,
     };
   },
   created() {
 
   },
   mounted() {
-
+    this.getThemeList()
     this.getList();
   },
+  watch: {
+    deptName() {
+      this.getThemeList()
+    }
+
+  },
   methods: {
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.payerCompanyId = data.id;
+      this.getList();
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      // console.log(value);
+
+      return
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    /** 查询付款主体信息列表 */
+    getThemeList() {
+      listCompanyInfo({ pageNum: 1, pageSize: 999, companyName: this.deptName }).then(response => {
+
+        let arr = []
+        response.rows.forEach(item => {
+          arr.push({
+            id: item.id,
+            label: item.companyName
+          })
+        })
+        this.companyInfoList = [{ id: null, label: '发薪主体', children: arr }]
+      });
+    },
     /** 员工管理 */
     staffManage(row) {
       // console.log('表格数据', row);
@@ -372,3 +433,17 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+.EDMMain {
+  display: flex;
+
+  .themeMain {
+    width: 290px;
+  }
+
+  .listMain {
+    margin-left: 10px;
+    width: calc(100% - 300px);
+  }
+}
+</style>
\ No newline at end of file