stage：分配代发账户-企业信息

src/views/business/taxUnit/LaborAcc.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" v-show="showSearch" label-width="80px">
+    <!-- <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="代发账户" prop="payAccNo">
-        <el-input
-          v-model="queryParams.payAccNo"
-          placeholder="请输入账户"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.payAccNo" placeholder="请输入账户" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="支付通道" prop="channelCode">
         <el-select v-model="queryParams.channelCode" placeholder="请选择支付通道" clearable>
-          <el-option v-for="(item, index) in taxUnitPayChannelList"
-                     :label="item.channelName" :value="item.channelCode"
-                     :disabled="!item.isEnter || item.isEnter < 3 || !item.status || item.status !== 1"/>
+          <el-option v-for="(item, index) in taxUnitPayChannelList" :key="index" :label="item.channelName"
+            :value="item.channelCode"
+            :disabled="!item.isEnter || item.isEnter < 3 || !item.status || item.status !== 1" />
         </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
-    </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
-          </el-col>
-<!--          <el-col :span="1.5">-->
-<!--            <el-button-->
-<!--              type="warning"-->
-<!--              icon="el-icon-download"-->
-<!--              size="mini"-->
-<!--              @click="handleExport"-->
-<!--              v-hasPermi="['system:post:export']"-->
-<!--            >导出</el-button>-->
-<!--          </el-col>-->
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+    </el-form> -->
+    <div class="infoMain">
+      <div class="employmentEnterprises">
+        <el-descriptions title="用工企业" :column="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
+          <el-descriptions-item label="企业名称">{{ employmentEnterprisesData.companyName }}</el-descriptions-item>
+          <el-descriptions-item label="机构代码">{{ employmentEnterprisesData.companyCode }}</el-descriptions-item>
+          <el-descriptions-item label="联系人">{{ employmentEnterprisesData.legalName }}</el-descriptions-item>
+          <el-descriptions-item label="联系方式">{{ employmentEnterprisesData.legalPhone }}</el-descriptions-item>
+          <el-descriptions-item label="所在通道">
+            {{ employmentEnterprisesData.channelName }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="proxyCompany">
+        <el-descriptions title="代发企业" :column="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
+          <el-descriptions-item label="企业名称">{{ proxyCompanyData.unitName }}</el-descriptions-item>
+          <el-descriptions-item label="机构代码">{{ proxyCompanyData.unitCode }}</el-descriptions-item>
+          <el-descriptions-item label="联系人">{{ proxyCompanyData.legalPersonName }}</el-descriptions-item>
+          <el-descriptions-item label="联系方式">{{ proxyCompanyData.legalPersonMobile }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </div>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+      </el-col>
+      <!--          <el-col :span="1.5">-->
+      <!--            <el-button-->
+      <!--              type="warning"-->
+      <!--              icon="el-icon-download"-->
+      <!--              size="mini"-->
+      <!--              @click="handleExport"-->
+      <!--              v-hasPermi="['system:post:export']"-->
+      <!--            >导出</el-button>-->
+      <!--          </el-col>-->
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
     <el-table v-loading="loading" :data="accList">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="所属企业" align="center" prop="companyName" />
@@ -56,29 +66,19 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-info"
-            @click="viewDetail(scope.row)"
-          >账户详情</el-button>
+          <el-button size="mini" type="text" icon="el-icon-info" @click="viewDetail(scope.row)">账户详情</el-button>
         </template>
       </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" />
 
 
     <!-- 账户详情弹窗 -->
     <el-dialog title="账号信息查询" :visible.sync="accDetail.panel" width="30%" center>
       <el-descriptions :title="accDetail.companyName" :column="1" :label-style="accDetail.label_style"
-                       :contentStyle="accDetail.content_style">
+        :contentStyle="accDetail.content_style">
         <el-descriptions-item label="账号">{{ accDetail.info.cardNo }}</el-descriptions-item>
         <el-descriptions-item label="户名">{{ accDetail.info.bankAccName }}</el-descriptions-item>
         <el-descriptions-item label="银行">{{ accDetail.info.cardBank }}</el-descriptions-item>
@@ -107,9 +107,9 @@
         </el-form-item>
         <el-form-item label="分配账户通道" prop="channelCode">
           <el-select v-model="addForm.channelCode" placeholder="请选择支付通道">
-            <el-option v-for="(item, index) in taxUnitPayChannelList"
-                       :label="item.channelName" :value="item.channelCode"
-                       :disabled="!item.isEnter || item.isEnter < 3 || !item.status || item.status !== 1"/>
+            <el-option v-for="(item, index) in taxUnitPayChannelList" :key="index" :label="item.channelName"
+              :value="item.channelCode"
+              :disabled="!item.isEnter || item.isEnter < 3 || !item.status || item.status !== 1" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -128,7 +128,8 @@ import { listAllCompanyPayChannel } from '@/api/business/companyPayChannel'
 import { getLaborSign, giveAccToLabor } from '@/api/business/laborSign'
 import companyPayChannel from '@/views/business/companyPayChannel/index.vue'
 import fa from 'element-ui/src/locale/lang/fa'
-
+import { getUnitInfo } from '@/api/business/unitInfo'
+import { getCompanyInfo } from '@/api/business/companyInfo'
 export default {
   name: "LaborAcc",
   computed: {
@@ -183,6 +184,31 @@ export default {
       taxUnitPayChannelList: [],
       addForm: {
         channelCode: null,
+      },
+      channelQuery: {},
+      // 用工企业信息
+      employmentEnterprisesData: {
+        companyName: '',
+        companyCode: '',
+        legalName: '',
+        legalPhone: '',
+        channelName: ''
+      },
+      // 代发企业信息
+      proxyCompanyData: {
+        unitName: '',
+        unitCode: '',
+        legalPersonName: '',
+        legalPersonMobile: ''
+      },
+      // 顶部内容样式
+      labelStyle: {
+        textAlign: 'right',
+        fontWeight: '550',
+        fontSize: '14px'
+      },
+      contentStyle: {
+        fontSize: '14px'
       }
     };
   },
@@ -190,6 +216,7 @@ export default {
     $route(route) {
       this.queryParams.laborSignId = this.$route.query.signId
       this.getList();
+      this.pageInit()
     }
   },
   mounted() {
@@ -198,6 +225,38 @@ export default {
     this.pageInit()
   },
   methods: {
+    // 获取用工企业信息
+    getCompanyInfoFN(id) {
+      getCompanyInfo(id).then(res => {
+        if (res.code == 200) {
+          this.employmentEnterprisesData.companyName = res.data.companyName
+          this.employmentEnterprisesData.companyCode = res.data.companyCode
+          this.employmentEnterprisesData.legalName = res.data.legalName
+          this.employmentEnterprisesData.legalPhone = res.data.legalPhone
+        }
+      });
+    },
+    // 获取用工企业信息-通道信息
+    getListAllCompanyPayChannelFN(id) {
+      listAllCompanyPayChannel({ unitType: 1, companyId: id }).then(res => {
+        if (res.code == 200) {
+          this.employmentEnterprisesData.channelName = res.data[0].channelName
+          // console.log('获取用工企业信息-tongdao', res);
+        }
+      })
+    },
+    // 获取代发企业信息
+    getUnitInfoFN(id) {
+      getUnitInfo(id).then(res => {
+        if (res.code == 200) {
+          // console.log('获取代发企业信息', res);
+          this.proxyCompanyData.unitName = res.data.unitName
+          this.proxyCompanyData.unitCode = res.data.unitCode
+          this.proxyCompanyData.legalPersonName = res.data.legalPersonName
+          this.proxyCompanyData.legalPersonMobile = res.data.legalPersonMobile
+        }
+      })
+    },
     async getList() {
       if (this.queryParams.laborSignId) {
         if (!this.sysPayChannelList || 0 >= this.sysPayChannelList.length) {
@@ -240,24 +299,27 @@ export default {
       })
     },
     async pageInit() {
-      const channelQuery = {
+      this.channelQuery = {
         unitType: 2,
       }
       await getLaborSign(this.queryParams.laborSignId).then(resp => {
-        channelQuery.compaynId = resp.data.taxUnitId
+        this.channelQuery.compaynId = resp.data.taxUnitId
         this.addForm.inviterName = resp.data.inviterName
         this.addForm.inviterCode = resp.data.inviterCode
+        this.getUnitInfoFN(resp.data.taxUnitId)
+        this.getCompanyInfoFN(resp.data.inviterId)
+        this.getListAllCompanyPayChannelFN(resp.data.inviterId)
       })
-      if (channelQuery.compaynId) {
-        await listAllCompanyPayChannel(channelQuery).then(resp => {
-          this.taxUnitPayChannelList = resp.data
-        })
-      }
+
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.open = true;
-      this.title = "分配代发账户";
+      listAllCompanyPayChannel(this.channelQuery).then(resp => {
+        this.taxUnitPayChannelList = resp.data
+        this.open = true;
+        this.title = "分配代发账户";
+      })
+
 
     },
     submitAdd() {
@@ -282,28 +344,62 @@ export default {
     },
     givPayAcc() {
       this.$modal.loading("处理中...")
-        giveAccToLabor(this.addForm).then(resp => {
-          if (200 === resp.code) {
-            if (200 === resp.data.code) {
-              this.$modal.msgSuccess("操作成功")
-              this.getList()
-            } else if (202 === resp.data.code) {
-              this.$confirm('未签约支付协议，暂无法进行此操作', '操作提示', {
-                distinguishCancelAndClose: true,
-                confirmButtonText: '去签约',
-                cancelButtonText: '取消'
-              }).then(() => {
-                this.$router.push({ path: "/taxUnit/payAcc" });
-              }).catch(action => {
+      giveAccToLabor(this.addForm).then(resp => {
+        if (200 === resp.code) {
+          if (200 === resp.data.code) {
+            this.$modal.msgSuccess("操作成功")
+            this.getList()
+          } else if (202 === resp.data.code) {
+            this.$confirm('未签约支付协议，暂无法进行此操作', '操作提示', {
+              distinguishCancelAndClose: true,
+              confirmButtonText: '去签约',
+              cancelButtonText: '取消'
+            }).then(() => {
+              this.$router.push({ path: "/taxUnit/payAcc" });
+            }).catch(action => {
 
-              });
-            }
+            });
           }
-        }).finally(() => {
-          this.open = false;
-          this.$modal.closeLoading()
-        })
+        }
+      }).finally(() => {
+        this.open = false;
+        this.$modal.closeLoading()
+      })
     }
   }
 };
 </script>
+<style lang="scss" scoped>
+.infoMain ::v-deep {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+  gap: 2%;
+  margin-bottom: 16px;
+  margin-top: 6px;
+
+  .employmentEnterprises {
+    width: 48%;
+    height: 220px;
+    border-radius: 6px;
+    background-color: #F1F6FD;
+    padding: 22px 22px;
+
+    .el-descriptions__body .el-descriptions__table {
+      background-color: #F1F6FD;
+    }
+  }
+
+  .proxyCompany {
+    width: 48%;
+    height: 220px;
+    border-radius: 6px;
+    background-color: #F1F6FD;
+    padding: 22px 22px;
+
+    .el-descriptions__body .el-descriptions__table {
+      background-color: #F1F6FD;
+    }
+  }
+}
+</style>
\ No newline at end of file