跟单结算报表-保险公司查看明细功能

src/views/receivable/documentary/documentaryReport.vue

@@ -6,9 +6,8 @@
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item prop="a" label="保险公司">
-                <el-select v-model="recordForm.companyId" placeholder="请选择" clearable filterable>
-                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
-                </el-select>
+                <el-cascader filterable clearable placeholder="请选择" v-model="recordForm.companyId"
+                :options="companyList" :props="companyIdprops" style="width: 100%;" @change="handleCompanyChange" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -59,7 +58,19 @@
           <el-table-column prop="totalUnSettlementAmount" label="未结算"></el-table-column>
           <el-table-column label="操作" fixed="right" width="120">
             <template #default="scope">
-              <el-button link type="primary">查看明细</el-button>
+              <div class="flex a-c">
+                <el-dropdown placement="bottom-start" trigger="click">
+                  <span class="el-dropdown-link">
+                    查看明细
+                  </span>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item @click="handleSettlementDetail(scope.row)">结算明细</el-dropdown-item>
+                      <el-dropdown-item @click="handleInvoiceRecord(scope.row)">开票明细</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -74,10 +85,8 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="a" label="保险公司">
-                <el-select v-model="recordForm1.companyId" placeholder="请选择" clearable filterable>
-                  <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode"
-                    :label="item.name"></el-option>
-                </el-select>
+                <el-cascader filterable clearable placeholder="请选择" v-model="recordForm1.companyId"
+                :options="companyList" :props="companyIdprops" style="width: 100%;" @change="handleCompanyChange" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -167,10 +176,8 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="companyId" label="保险公司">
-                <el-select v-model="recordForm2.companyId" placeholder="请选择" clearable filterable>
-                  <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode"
-                    :label="item.name"></el-option>
-                </el-select>
+                <el-cascader filterable clearable placeholder="请选择" v-model="recordForm2.companyId"
+                :options="companyList" :props="companyIdprops" style="width: 100%;" @change="handleCompanyChange" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -244,10 +251,8 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="companyId" label="保险公司">
-                <el-select v-model="recordForm3.companyId" placeholder="请选择" clearable filterable>
-                  <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode"
-                    :label="item.name"></el-option>
-                </el-select>
+                <el-cascader filterable clearable placeholder="请选择" v-model="recordForm3.companyId"
+                :options="companyList" :props="companyIdprops" style="width: 100%;" @change="handleCompanyChange" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -323,6 +328,7 @@ const router = useRouter()
 const route = useRoute()
 let activeName = ref('1')
 const handleClick = (e) => {
+  activeName.value = e.props.name
   pages.value = 1
   size.value = 10
   switch (e.props.name) {
@@ -344,13 +350,35 @@ const handleClick = (e) => {
 // 保险公司
 let companyList = ref([])
 const initCompany = () => {
-  api.insuranceApi.leftList('').then((res: any) => {
+  api.agreementApi.findTree({ name: "", systemCode: localStorage.getItem('login_system') }).then((res: any) => {
     if (res.code == 200) {
       companyList.value = res.data
     }
   })
 }
-
+const companyIdprops = {
+  expandTrigger: 'hover' as const,
+  value: 'id',
+  label: 'name',
+  checkStrictly: true,
+}
+// 保险公司选择器改变时触发
+const handleCompanyChange = (e) => {
+  switch (activeName.value) {
+    case '1':
+      recordForm.value.companyId = e[e.length - 1] || ''
+      break;
+    case '2':
+      recordForm1.value.companyId = e[e.length - 1] || ''
+      break;
+    case '3':
+      recordForm2.value.companyId = e[e.length - 1] || ''
+      break;
+    case '4':
+      recordForm3.value.companyId = e[e.length - 1] || ''
+      break;
+  }
+}
 // 分页
 let pages = ref(1)
 let size = ref(10)
@@ -581,6 +609,18 @@ const handleReset = (type) => {
       break;
   }
 }
+// 结算明细
+const handleSettlementDetail = (row) => {
+  activeName.value = '2'
+  recordForm1.value.companyId = row.partnerCompanyId
+  initData2()
+}
+// 开票明细
+const handleInvoiceRecord = (row) => {
+  activeName.value = '3'
+  recordForm2.value.companyId = row.partnerCompanyId
+  initData3(['2'])
+}
 
 const handleExport = (type) => {
   switch (type) {
@@ -722,4 +762,11 @@ onMounted(() => {
 :deep(.subTable .el-table__header-wrapper) {
   display: none;
 }
+:deep(.el-dropdown-link) {
+  display: flex;
+  align-items: center;
+  margin-left: 15px;
+  color: var(--el-color-primary);
+  cursor: pointer;
+}
 </style>