财务列表样式完善

src/views/basics/account.vue

@@ -1,276 +1,253 @@
 <template>
-    <div class="account">
-        <el-form v-model="accountForm" label-width="100">
-            <el-row :gutter="20">
-                <el-col :span="8">
-                    <el-form-item label="所属企业">
-                        <el-input v-model="accountForm.accountName" placeholder="请输入企业名称查找" clearable></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="账户简称">
-                        <el-input v-model="accountForm.cardName" placeholder="请输入账户简称查找" clearable></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="账户简类型">
-                        <el-select v-model="accountForm.accountQuality" placeholder="请选择账户类型查找" clearable>
-                            <el-option value="0" label="公户"></el-option>
-                            <el-option value="1" label="私户"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="银行卡号">
-                        <el-input v-model="accountForm.bankCardNum" placeholder="请输入" clearable></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
-                    <el-button type="primary" @click="handleSearch">搜索</el-button>
-                    <el-button plain @click="handleReset">重置</el-button>
-                </el-col>
-                <el-col :span="8">
-                    <el-button icon="plus" type="primary" @click="add">添加新账户</el-button>
-                    <el-button type="primary" @click="exp">导出支出明细</el-button>
-                </el-col>
-            </el-row>
-        </el-form>
-        <el-table :data="accountData" style="width: 100%; margin-top: 20px;">
-            <el-table-column prop="accountName" label="所属企业" width="150"></el-table-column>
-            <el-table-column prop="cardName" label="账户简称" width="100"></el-table-column>
-            <el-table-column prop="accountQuality" label="账户类型" width="150">
-                <template #default="scope">
-                    {{ scope.row.accountQuality?'私户':'公户' }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="bankCardNum" label="银行卡号" width="120"></el-table-column>
-            <el-table-column prop="bank" label="银行" width="120"></el-table-column>
-            <el-table-column prop="bankName" label="开户行" width="150"></el-table-column>
-            <el-table-column prop="startCertExpirationDate" label="证件有效期始" width="180"></el-table-column>
-            <el-table-column prop="endCertExpirationDate" label="证件有效期止" width="180"></el-table-column>
-            <el-table-column label="额度">
-                <el-table-column prop="balance" label="余额" width="100"></el-table-column>
-                <el-table-column prop="spend" label="支出" width="100"></el-table-column>
-            </el-table-column>
-            <el-table-column label="每日">
-                <el-table-column prop="dayStrokeNum" label="转账笔数限制" width="100"></el-table-column>
-                <el-table-column prop="dayStrokeNumExcess" label="转账笔数剩余" width="100"></el-table-column>
-            </el-table-column>
-            <el-table-column label="对私限额">
-                <el-table-column prop="priDayLines" label="单日限额" width="100"></el-table-column>
-                <el-table-column prop="priDayLinesExcess" label="单日限额剩余" width="100"></el-table-column>
-                <el-table-column prop="priSingleLines" label="单笔限额" width="100"></el-table-column>
-            </el-table-column>
-            <el-table-column label="对私额度">
-                <el-table-column prop="priYearLines" label="年额度" width="100"></el-table-column>
-                <el-table-column prop="priYearExcess" label="年额度剩余" width="100"></el-table-column>
-            </el-table-column>
-            <el-table-column label="对公限额">
-                <el-table-column prop="pubDayLines" label="单日限额" width="100"></el-table-column>
-                <el-table-column prop="pubDayLinesExcess" label="单日限额剩余" width="100"></el-table-column>
-                <el-table-column prop="pubSingleLines" label="单笔限额" width="100"></el-table-column>
-            </el-table-column>
-            <el-table-column label="对公额度">
-                <el-table-column prop="pubYearLines" label="年额度" width="100"></el-table-column>
-                <el-table-column prop="pubYearExcess" label="年额度剩余" width="100"></el-table-column>
-            </el-table-column>
-            <el-table-column label="操作" fixed="right" width="200">
-                <template #default="scope">
-                    <div style="display: flex; align-items: center;">
-                        <el-button link type="primary" size="small" @click="income(scope.row)">收入</el-button>
-                        <el-button link type="primary" size="small" @click="expenditure(scope.row)">支出</el-button>
-                        <el-dropdown
-                            placement="bottom"
-                            trigger="click"
-                            @command="accountDataCommand(scope, $event)"
-                            style="margin-left: 12px"
-                        >
-                            <el-button link type="primary" size="small">更多</el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item command="编辑">编辑</el-dropdown-item>
-                                    <el-dropdown-item command="删除">删除</el-dropdown-item>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
-                    </div>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination
-                v-model:current-page="pages"
-                v-model:page-size="size"
-                :page-sizes="[10, 20, 30, 40]"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-            ></el-pagination>
-        </div>
-        <el-dialog
-            v-model="addShow"
-            width="800"
-            :title="title"
-        >
-            <el-form ref="AddRef" :model="dataForm" :rules="dataRules" label-width="120">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item prop="accountId" label="所属企业">
-                            <el-select v-model="dataForm.accountId" placeholder="请选择">
-                                <el-option v-for="(item, index) in accountList" :value="item.id" :label="item.accountName"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="cardName" label="账户简称">
-                            <el-input v-model="dataForm.cardName" placeholder="请输入"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="bankCardNum" label="银行卡号">
-                            <el-input v-model="dataForm.bankCardNum" placeholder="请输入"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="accountQuality" label="账户类型">
-                            <el-select v-model="dataForm.accountQuality" placeholder="请选择">
-                                <el-option value="0" label="公户"></el-option>
-                                <el-option value="1" label="私户"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="bank" label="银行">
-                            <el-select v-model="dataForm.bank" placeholder="请选择">
-                                <el-option v-for="item in bankOption" :key="item.id" :value="item.label" :label="item.label"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="bankName" label="开户行">
-                            <el-input v-model="dataForm.bankName" placeholder="请输入"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="bankNum" label="开户行号">
-                            <el-input v-model="dataForm.bankNum" placeholder="请输入"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="startCertExpirationDate" label="证书有效期始">
-                            <el-date-picker
-                                style="width: 100%"
-                                type="date"
-                                v-model="dataForm.startCertExpirationDate"
-                                placeholder="请输入"
-                                value-format="YYYY-MM-DD"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="endCertExpirationDate" label="证书有效期止">
-                            <el-date-picker
-                                style="width: 100%"
-                                type="date"
-                                v-model="dataForm.endCertExpirationDate"
-                                placeholder="请输入"
-                                value-format="YYYY-MM-DD"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="dayStrokeNum" label="每日转账限额">
-                            <el-input v-model="dataForm.dayStrokeNum" placeholder="请输入">
-                                <template #append>笔</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="priDayLines" label="对私单日限额">
-                            <el-input v-model="dataForm.priDayLines" placeholder="请输入">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="priSingleLines" label="对私单笔限额">
-                            <el-input v-model="dataForm.priSingleLines" placeholder="请输入">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="priYearLines" label="对私年额度">
-                            <el-input v-model="dataForm.priYearLines" placeholder="请输入">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="pubDayLines" label="对公单日限额">
-                            <el-input v-model="dataForm.pubDayLines" placeholder="请输入">
-                                <template #append>笔</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="pubSingleLines" label="对公单笔限额">
-                            <el-input v-model="dataForm.pubSingleLines" placeholder="请输入">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="pubYearLines" label="对公年额度">
-                            <el-input v-model="dataForm.pubYearLines" placeholder="请输入">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="balance" label="余额">
-                            <el-input v-model="dataForm.balance" placeholder="请输入">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <el-button plain @click="addShow = false">取消</el-button>
-                <el-button type="primary" @click="handleAdd(AddRef)">确定</el-button>
-            </template>
-        </el-dialog>
+  <PageMain class="vh100">
+    <el-form v-model="accountForm" label-width="100">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="所属企业">
+            <el-input v-model="accountForm.accountName" placeholder="请输入企业名称查找" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="账户简称">
+            <el-input v-model="accountForm.cardName" placeholder="请输入账户简称查找" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="账户简类型">
+            <el-select v-model="accountForm.accountQuality" placeholder="请选择账户类型查找" clearable>
+              <el-option value="0" label="公户"></el-option>
+              <el-option value="1" label="私户"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="银行卡号">
+            <el-input v-model="accountForm.bankCardNum" placeholder="请输入" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button plain @click="handleReset">重置</el-button>
+        </el-col>
+        <el-col :span="8">
+          <el-button icon="plus" type="primary" @click="add">添加新账户</el-button>
+          <el-button type="primary" @click="exp">导出支出明细</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="accountData" height="calc(100% - 194px)" style="width: 100%; margin-top: 20px;">
+      <el-table-column prop="accountName" label="所属企业" width="150"></el-table-column>
+      <el-table-column prop="cardName" label="账户简称" width="100"></el-table-column>
+      <el-table-column prop="accountQuality" label="账户类型" width="150">
+        <template #default="scope">
+          {{ scope.row.accountQuality ? '私户' : '公户' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="bankCardNum" label="银行卡号" width="120"></el-table-column>
+      <el-table-column prop="bank" label="银行" width="120"></el-table-column>
+      <el-table-column prop="bankName" label="开户行" width="150"></el-table-column>
+      <el-table-column prop="startCertExpirationDate" label="证件有效期始" width="180"></el-table-column>
+      <el-table-column prop="endCertExpirationDate" label="证件有效期止" width="180"></el-table-column>
+      <el-table-column label="额度">
+        <el-table-column prop="balance" label="余额" width="100"></el-table-column>
+        <el-table-column prop="spend" label="支出" width="100"></el-table-column>
+      </el-table-column>
+      <el-table-column label="每日">
+        <el-table-column prop="dayStrokeNum" label="转账笔数限制" width="100"></el-table-column>
+        <el-table-column prop="dayStrokeNumExcess" label="转账笔数剩余" width="100"></el-table-column>
+      </el-table-column>
+      <el-table-column label="对私限额">
+        <el-table-column prop="priDayLines" label="单日限额" width="100"></el-table-column>
+        <el-table-column prop="priDayLinesExcess" label="单日限额剩余" width="100"></el-table-column>
+        <el-table-column prop="priSingleLines" label="单笔限额" width="100"></el-table-column>
+      </el-table-column>
+      <el-table-column label="对私额度">
+        <el-table-column prop="priYearLines" label="年额度" width="100"></el-table-column>
+        <el-table-column prop="priYearExcess" label="年额度剩余" width="100"></el-table-column>
+      </el-table-column>
+      <el-table-column label="对公限额">
+        <el-table-column prop="pubDayLines" label="单日限额" width="100"></el-table-column>
+        <el-table-column prop="pubDayLinesExcess" label="单日限额剩余" width="100"></el-table-column>
+        <el-table-column prop="pubSingleLines" label="单笔限额" width="100"></el-table-column>
+      </el-table-column>
+      <el-table-column label="对公额度">
+        <el-table-column prop="pubYearLines" label="年额度" width="100"></el-table-column>
+        <el-table-column prop="pubYearExcess" label="年额度剩余" width="100"></el-table-column>
+      </el-table-column>
+      <el-table-column label="操作" fixed="right" width="200">
+        <template #default="scope">
+          <div style="display: flex; align-items: center;">
+            <el-button link type="primary" size="small" @click="income(scope.row)">收入</el-button>
+            <el-button link type="primary" size="small" @click="expenditure(scope.row)">支出</el-button>
+            <el-dropdown placement="bottom" trigger="click" @command="accountDataCommand(scope, $event)"
+              style="margin-left: 12px">
+              <el-button link type="primary" size="small">更多</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="编辑">编辑</el-dropdown-item>
+                  <el-dropdown-item command="删除">删除</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
     </div>
+    <el-dialog v-model="addShow" width="800" :title="title">
+      <el-form ref="AddRef" :model="dataForm" :rules="dataRules" label-width="120">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item prop="accountId" label="所属企业">
+              <el-select v-model="dataForm.accountId" placeholder="请选择">
+                <el-option v-for="(item, index) in accountList" :value="item.id" :label="item.accountName"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="cardName" label="账户简称">
+              <el-input v-model="dataForm.cardName" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="bankCardNum" label="银行卡号">
+              <el-input v-model="dataForm.bankCardNum" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="accountQuality" label="账户类型">
+              <el-select v-model="dataForm.accountQuality" placeholder="请选择">
+                <el-option value="0" label="公户"></el-option>
+                <el-option value="1" label="私户"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="bank" label="银行">
+              <el-select v-model="dataForm.bank" placeholder="请选择">
+                <el-option v-for="item in bankOption" :key="item.id" :value="item.label"
+                  :label="item.label"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="bankName" label="开户行">
+              <el-input v-model="dataForm.bankName" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="bankNum" label="开户行号">
+              <el-input v-model="dataForm.bankNum" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="startCertExpirationDate" label="证书有效期始">
+              <el-date-picker style="width: 100%" type="date" v-model="dataForm.startCertExpirationDate"
+                placeholder="请输入" value-format="YYYY-MM-DD" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="endCertExpirationDate" label="证书有效期止">
+              <el-date-picker style="width: 100%" type="date" v-model="dataForm.endCertExpirationDate" placeholder="请输入"
+                value-format="YYYY-MM-DD" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="dayStrokeNum" label="每日转账限额">
+              <el-input v-model="dataForm.dayStrokeNum" placeholder="请输入">
+                <template #append>笔</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="priDayLines" label="对私单日限额">
+              <el-input v-model="dataForm.priDayLines" placeholder="请输入">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="priSingleLines" label="对私单笔限额">
+              <el-input v-model="dataForm.priSingleLines" placeholder="请输入">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="priYearLines" label="对私年额度">
+              <el-input v-model="dataForm.priYearLines" placeholder="请输入">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="pubDayLines" label="对公单日限额">
+              <el-input v-model="dataForm.pubDayLines" placeholder="请输入">
+                <template #append>笔</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="pubSingleLines" label="对公单笔限额">
+              <el-input v-model="dataForm.pubSingleLines" placeholder="请输入">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="pubYearLines" label="对公年额度">
+              <el-input v-model="dataForm.pubYearLines" placeholder="请输入">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="balance" label="余额">
+              <el-input v-model="dataForm.balance" placeholder="请输入">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button plain @click="addShow = false">取消</el-button>
+        <el-button type="primary" @click="handleAdd(AddRef)">确定</el-button>
+      </template>
+    </el-dialog>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
 import api from '@/api'
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 
 let AddRef = ref()
 
 let accountForm = ref({})
 const handleSearch = () => {
-    pages.value = 1
-    size.value = 10
-    initData()
+  pages.value = 1
+  size.value = 10
+  initData()
 }
 const handleReset = () => {
-    pages.value = 1
-    size.value = 10
-    accountForm.value = {
-        accountName: '',
-        cardName: '',
-        accountQuality: '',
-        bankCardNum: ''
-    }
-    initData()
+  pages.value = 1
+  size.value = 10
+  accountForm.value = {
+    accountName: '',
+    cardName: '',
+    accountQuality: '',
+    bankCardNum: ''
+  }
+  initData()
 }
 const add = () => {
-    addShow.value = true
-    dataForm.value = {}
+  addShow.value = true
+  dataForm.value = {}
 }
 const exp = () => {
 
@@ -284,39 +261,39 @@ const expenditure = (row) => {
 
 }
 const accountDataCommand = (scope, e) => {
-    switch (e) {
-        case '删除':
-            ElMessageBox({
-                title: '删除账户',
-                message: '确定要删除该账户吗？',
-                type: 'warning',
-                showCancelButton: true,
-                confirmButtonText: '确定删除',
-                cancelButtonText: '取消',
-            }).then(( action ) => {
-                if(action === 'confirm') {
-                    api.financeApi.cardDelete(scope.row.id).then((res: any) => {
-                        if(res.code == 200) {
-                            ElMessage({
-                                message: res.msg,
-                                type: 'success'
-                            })
-                            initData()
-                        }
-                    })
-                }
-            }).catch(( action ) => {
+  switch (e) {
+    case '删除':
+      ElMessageBox({
+        title: '删除账户',
+        message: '确定要删除该账户吗？',
+        type: 'warning',
+        showCancelButton: true,
+        confirmButtonText: '确定删除',
+        cancelButtonText: '取消',
+      }).then((action) => {
+        if (action === 'confirm') {
+          api.financeApi.cardDelete(scope.row.id).then((res: any) => {
+            if (res.code == 200) {
+              ElMessage({
+                message: res.msg,
+                type: 'success'
+              })
+              initData()
+            }
+          })
+        }
+      }).catch((action) => {
 
-            })
-            break;
-        case '编辑':
-            addShow.value = true
-            editId.value = scope.row.id
-            dataForm.value = {}
-            api.financeApi.cardGet(scope.row.id).then((res: any) => {
-                dataForm.value = res.data
-            })
-    }
+      })
+      break;
+    case '编辑':
+      addShow.value = true
+      editId.value = scope.row.id
+      dataForm.value = {}
+      api.financeApi.cardGet(scope.row.id).then((res: any) => {
+        dataForm.value = res.data
+      })
+  }
 }
 
 // 分页
@@ -324,40 +301,40 @@ let pages = ref(1)
 let size = ref(10)
 let total = ref(0)
 const handleSizeChange = (size) => {
-    size.value = size
-    initData()
+  size.value = size
+  initData()
 }
 const handleCurrentChange = (page) => {
-    pages.value = page
-    initData()
+  pages.value = page
+  initData()
 }
 
 const initData = () => {
-    api.financeApi.cardList({
-        ...accountForm.value,
-        pageNo: pages.value,
-        pageSize: size.value
-    }).then((res: any) => {
-        if(res.code == 200) {
-            accountData.value = res.data.records
-            total.value = res.data.total
-        }
-    })
+  api.financeApi.cardList({
+    ...accountForm.value,
+    pageNo: pages.value,
+    pageSize: size.value
+  }).then((res: any) => {
+    if (res.code == 200) {
+      accountData.value = res.data.records
+      total.value = res.data.total
+    }
+  })
 }
 
 // 开户行字典
 let bankOption = ref([])
 const initBankCard = () => {
-    api.commonApi.personInfo('bank_info').then((res: any) => {
-        if(res.code == 200) {
-            bankOption.value = res.data
-        } else {
-            ElMessage({
-                message: res.msg,
-                type: 'warning'
-            })
-        }
-    })
+  api.commonApi.personInfo('bank_info').then((res: any) => {
+    if (res.code == 200) {
+      bankOption.value = res.data
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: 'warning'
+      })
+    }
+  })
 }
 
 // 添加/编辑
@@ -365,94 +342,85 @@ let addShow = ref(false)
 let title = ref('新增')
 let dataForm = ref({})
 const dataRules = ref({
-    accountId: [{ required: true, trigger: "blur", message: "请输入" }],
-    cardName: [{ required: true, trigger: "blur", message: "请输入" }],
-    bankCardNum: [{ required: true, trigger: "blur", message: "请输入" }],
-    accountQuality: [{ required: true, trigger: "change", message: "请选择" }],
-    bank: [{ required: true, trigger: "blur", message: "请输入" }],
-    bankName: [{ required: true, trigger: "change", message: "请选择" }],
-    bankNum: [{ required: true, trigger: "blur", message: "请输入" }],
-    startCertExpirationDate: [{ required: true, trigger: "change", message: "请选择" }],
-    endCertExpirationDate: [{ required: true, trigger: "change", message: "请选择" }],
-    dayStrokeNum: [{ required: true, trigger: "blur", message: "请输入" }],
-    priDayLines: [{ required: true, trigger: "blur", message: "请输入" }],
-    priSingleLines: [{ required: true, trigger: "blur", message: "请输入" }],
-    priYearLines: [{ required: true, trigger: "blur", message: "请输入" }],
-    pubDayLines: [{ required: true, trigger: "blur", message: "请输入" }],
-    pubSingleLines: [{ required: true, trigger: "blur", message: "请输入" }],
-    pubYearLines: [{ required: true, trigger: "blur", message: "请输入" }],
-    balance: [{ required: true, trigger: "blur", message: "请输入" }],
+  accountId: [{ required: true, trigger: "blur", message: "请输入" }],
+  cardName: [{ required: true, trigger: "blur", message: "请输入" }],
+  bankCardNum: [{ required: true, trigger: "blur", message: "请输入" }],
+  accountQuality: [{ required: true, trigger: "change", message: "请选择" }],
+  bank: [{ required: true, trigger: "blur", message: "请输入" }],
+  bankName: [{ required: true, trigger: "change", message: "请选择" }],
+  bankNum: [{ required: true, trigger: "blur", message: "请输入" }],
+  startCertExpirationDate: [{ required: true, trigger: "change", message: "请选择" }],
+  endCertExpirationDate: [{ required: true, trigger: "change", message: "请选择" }],
+  dayStrokeNum: [{ required: true, trigger: "blur", message: "请输入" }],
+  priDayLines: [{ required: true, trigger: "blur", message: "请输入" }],
+  priSingleLines: [{ required: true, trigger: "blur", message: "请输入" }],
+  priYearLines: [{ required: true, trigger: "blur", message: "请输入" }],
+  pubDayLines: [{ required: true, trigger: "blur", message: "请输入" }],
+  pubSingleLines: [{ required: true, trigger: "blur", message: "请输入" }],
+  pubYearLines: [{ required: true, trigger: "blur", message: "请输入" }],
+  balance: [{ required: true, trigger: "blur", message: "请输入" }],
 })
 const handleAdd = async (AddRef) => {
-    if(!AddRef) {
-        AddRef.resetFields()
-        return
+  if (!AddRef) {
+    AddRef.resetFields()
+    return
+  }
+  await AddRef.validate((valid) => {
+    if (valid) {
+      if (!editId.value) {
+        api.financeApi.cardAdd({
+          ...dataForm.value
+        }).then((res: any) => {
+          if (res.code == 200) {
+            ElMessage({
+              message: res.msg,
+              type: 'success'
+            })
+            addShow.value = false
+            initData()
+          }
+        })
+      } else {
+        api.financeApi.cardEdit({
+          id: editId.value,
+          ...dataForm.value
+        }).then((res: any) => {
+          if (res.code == 200) {
+            ElMessage({
+              message: res.msg,
+              type: 'success'
+            })
+            addShow.value = false
+            initData()
+          }
+        })
+      }
     }
-    await AddRef.validate((valid) => {
-        if(valid) {
-            if(!editId.value) {
-                api.financeApi.cardAdd({
-                    ...dataForm.value
-                }).then((res: any) => {
-                    if(res.code == 200) {
-                        ElMessage({
-                            message: res.msg,
-                            type: 'success'
-                        })
-                        addShow.value = false
-                        initData()
-                    }
-                })
-            } else {
-                api.financeApi.cardEdit({
-                    id: editId.value,
-                    ...dataForm.value
-                }).then((res: any) => {
-                    if(res.code == 200) {
-                        ElMessage({
-                            message: res.msg,
-                            type: 'success'
-                        })
-                        addShow.value = false
-                        initData()
-                    }
-                })
-            }
-        }
-    })
+  })
 }
 let editId = ref('')
 
 // 企业列表
 let accountList = ref([])
 const initList = () => {
-    api.financeApi.accountList({}).then((res: any) => {
-        if(res.code == 200) {
-            accountList.value = res.data
-        }
-    })
+  api.financeApi.accountList({}).then((res: any) => {
+    if (res.code == 200) {
+      accountList.value = res.data
+    }
+  })
 }
 
 onMounted(() => {
-    initBankCard();
-    initData();
-    initList();
+  initBankCard();
+  initData();
+  initList();
 })
 </script>
 
 <style scoped lang="scss">
-.account {
-    height: calc(100vh - 130px);
-    width: calc(100% - 24px);
-    margin: 12px auto;
-    padding: 12px;
-    background: #FFFFFF;
-    overflow-y: auto;
-
-    .pagination {
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-end;
-    }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
 }
 </style>

src/views/basics/company.vue

@@ -1,167 +1,153 @@
 <template>
-    <div class="company">
-        <el-form v-model="companyForm" label-width="80">
-            <el-row :gutter="20">
-                <el-col :span="8">
-                    <el-form-item prop="accountName" label="企业名称">
-                        <el-input placeholder="请填写" v-model="companyForm.accountName" clearable></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="outerFlag" label="企业类型">
-                        <el-select placeholder="请选择" v-model="companyForm.outerFlag" clearable>
-                            <el-option value="0" label="内部企业"></el-option>
-                            <el-option value="1" label="外部企业"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-button type="primary" @click="handleSearch">查询</el-button>
-                    <el-button type="primary" plain @click="handleReset">重置</el-button>
-                </el-col>
-                <el-col :span="8">
-                    <el-button type="primary" icon="plus" @click="add">添加新企业</el-button>
-                    <el-button type="primary" plain @click="exp">导出企业信息</el-button>
-                </el-col>
-            </el-row>
-        </el-form>
-        <el-table
-            :data="companyData"
-            style="margin-top: 20px"
-        >
-            <el-table-column prop="accountName" label="企业名称" width="200"></el-table-column>
-            <el-table-column prop="outerFlag" label="企业类型" width="120">
-                <template #default="scope">
-                    {{ scope.row.outerFlag=='1'?'外部企业':scope.row.outerFlag=='0'?'内部企业':'' }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="businessQuality" label="营业性质" width="120">
-                <template #default="scope">
-                    {{ scope.row.businessQuality=='1'?'个体户':scope.row.businessQuality=='2'?'小规模':scope.row.businessQuality=='3'?'一般纳税':'' }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="juridicalPerson" label="法人" width="120"></el-table-column>
-            <el-table-column prop="owned" label="地区" width="150"></el-table-column>
-            <el-table-column prop="establishTime" label="成立日期" width="150"></el-table-column>
-            <el-table-column prop="biller" label="开票员" width="120"></el-table-column>
-            <el-table-column prop="invoicingAmount" label="开票额度" width="120"></el-table-column>
-            <el-table-column prop="invoicingAmountExcess" label="剩余开票额度" width="150"></el-table-column>
-            <el-table-column prop="quarterInvoicingAmount" label="季度开票额度" width="150"></el-table-column>
-            <el-table-column prop="sumInvoicingAmount" label="总开票额度" width="120"></el-table-column>
-            <el-table-column prop="tentativeEstimates" label="暂估" width="120"></el-table-column>
-            <el-table-column label="操作" fixed="right" width="120">
-                <template #default="scope">
-                    <el-button link type="primary" @click="edit(scope.row)">编辑</el-button>
-                    <el-button link type="primary" @click="del(scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination
-                v-model:current-page="pages"
-                v-model:page-size="size"
-                :page-sizes="[10, 20, 30, 40]"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-            ></el-pagination>
-        </div>
-        <el-dialog
-            v-model="addShow"
-            :title="title"
-        >
-            <el-form :model="addForm" ref="AddRef" :rules="addRules" label-width="80">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item prop="accountName" label="企业名称">
-                            <el-input placeholder="请输入" v-model="addForm.accountName"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="outerFlag" label="企业类型">
-                            <el-select placeholder="请选择" v-model="addForm.outerFlag">
-                                <el-option value="0" label="内部企业"></el-option>
-                                <el-option value="1" label="外部企业"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="businessQuality" label="营业性质">
-                            <el-select placeholder="请选择" v-model="addForm.businessQuality">
-                                <el-option value="1" label="个体户"></el-option>
-                                <el-option value="2" label="小规模"></el-option>
-                                <el-option value="3" label="一般纳税"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="establishTime" label="成立日期">
-                            <el-date-picker
-                                type="date"
-                                v-model="addForm.establishTime"
-                                style="width: 100%"
-                                value-format="YYYY-MM-DD"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="owned" label="地区">
-                            <el-input placeholder="请输入" v-model="addForm.owned"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="juridicalPerson" label="法人">
-                            <el-input placeholder="请输入" v-model="addForm.juridicalPerson"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="biller" label="开票员">
-                            <el-input placeholder="请输入" v-model="addForm.biller"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="invoicingAmount" label="开票额度">
-                            <el-input placeholder="请输入" v-model="addForm.invoicingAmount">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <el-button plain @click="addShow = false">取消</el-button>
-                <el-button type="primary" @click="handleSave(AddRef)">保存</el-button>
-            </template>
-        </el-dialog>
+  <PageMain class="vh100">
+    <el-form v-model="companyForm" label-width="80">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item prop="accountName" label="企业名称">
+            <el-input placeholder="请填写" v-model="companyForm.accountName" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="outerFlag" label="企业类型">
+            <el-select placeholder="请选择" v-model="companyForm.outerFlag" clearable>
+              <el-option value="0" label="内部企业"></el-option>
+              <el-option value="1" label="外部企业"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" style="display: flex; align-items: start; justify-content: flex-end">
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button type="primary" plain @click="handleReset">重置</el-button>
+        </el-col>
+        <el-col :span="8">
+          <el-button type="primary" icon="plus" @click="add">添加新企业</el-button>
+          <el-button type="primary" plain @click="exp">导出企业信息</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="companyData" height="calc(100% - 144px)" style="margin-top: 20px">
+      <el-table-column prop="accountName" label="企业名称" width="200"></el-table-column>
+      <el-table-column prop="outerFlag" label="企业类型" width="120">
+        <template #default="scope">
+          {{ scope.row.outerFlag == '1' ? '外部企业' : scope.row.outerFlag == '0' ? '内部企业' : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="businessQuality" label="营业性质" width="120">
+        <template #default="scope">
+          {{
+            scope.row.businessQuality == '1' ? '个体户' : scope.row.businessQuality == '2' ? '小规模' : scope.row.businessQuality == '3' ? '一般纳税' :''
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="juridicalPerson" label="法人" width="120"></el-table-column>
+      <el-table-column prop="owned" label="地区" width="150"></el-table-column>
+      <el-table-column prop="establishTime" label="成立日期" width="150"></el-table-column>
+      <el-table-column prop="biller" label="开票员" width="120"></el-table-column>
+      <el-table-column prop="invoicingAmount" label="开票额度" width="120"></el-table-column>
+      <el-table-column prop="invoicingAmountExcess" label="剩余开票额度" width="150"></el-table-column>
+      <el-table-column prop="quarterInvoicingAmount" label="季度开票额度" width="150"></el-table-column>
+      <el-table-column prop="sumInvoicingAmount" label="总开票额度" width="120"></el-table-column>
+      <el-table-column prop="tentativeEstimates" label="暂估" width="120"></el-table-column>
+      <el-table-column label="操作" fixed="right" width="120">
+        <template #default="scope">
+          <el-button link type="primary" @click="edit(scope.row)">编辑</el-button>
+          <el-button link type="primary" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
     </div>
+    <el-dialog v-model="addShow" :title="title">
+      <el-form :model="addForm" ref="AddRef" :rules="addRules" label-width="80">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item prop="accountName" label="企业名称">
+              <el-input placeholder="请输入" v-model="addForm.accountName"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="outerFlag" label="企业类型">
+              <el-select placeholder="请选择" v-model="addForm.outerFlag">
+                <el-option value="0" label="内部企业"></el-option>
+                <el-option value="1" label="外部企业"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="businessQuality" label="营业性质">
+              <el-select placeholder="请选择" v-model="addForm.businessQuality">
+                <el-option value="1" label="个体户"></el-option>
+                <el-option value="2" label="小规模"></el-option>
+                <el-option value="3" label="一般纳税"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="establishTime" label="成立日期">
+              <el-date-picker type="date" v-model="addForm.establishTime" style="width: 100%"
+                value-format="YYYY-MM-DD" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="owned" label="地区">
+              <el-input placeholder="请输入" v-model="addForm.owned"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="juridicalPerson" label="法人">
+              <el-input placeholder="请输入" v-model="addForm.juridicalPerson"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="biller" label="开票员">
+              <el-input placeholder="请输入" v-model="addForm.biller"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="invoicingAmount" label="开票额度">
+              <el-input placeholder="请输入" v-model="addForm.invoicingAmount">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button plain @click="addShow = false">取消</el-button>
+        <el-button type="primary" @click="handleSave(AddRef)">保存</el-button>
+      </template>
+    </el-dialog>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
 import api from '@/api'
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 
 let AddRef = ref()
 
 let companyForm = ref({})
 const handleSearch = () => {
-    pages.value = 1
-    size.value = 10
-    initData()
+  pages.value = 1
+  size.value = 10
+  initData()
 }
 const handleReset = () => {
-    companyForm.value = {
-        accountName: '',
-        outerFlag: ''
-    }
-    pages.value = 1
-    size.value = 10
-    initData()
+  companyForm.value = {
+    accountName: '',
+    outerFlag: ''
+  }
+  pages.value = 1
+  size.value = 10
+  initData()
 }
 
 const add = () => {
-    addShow.value = true
-    addForm.value = {}
+  addShow.value = true
+  addForm.value = {}
 }
 const exp = () => {
 
@@ -169,38 +155,38 @@ const exp = () => {
 
 let companyData = ref([])
 const edit = (row) => {
-    addShow.value = true
-    editId.value = row.id
-    addForm.value = {}
-    api.financeApi.accountGet(row.id).then((res: any) => {
-        if(res.code == 200) {
-            addForm.value = res.data
-        }
-    })
+  addShow.value = true
+  editId.value = row.id
+  addForm.value = {}
+  api.financeApi.accountGet(row.id).then((res: any) => {
+    if (res.code == 200) {
+      addForm.value = res.data
+    }
+  })
 }
 const del = (row) => {
-    ElMessageBox({
-        title: '删除企业',
-        message: '确定要删除该企业吗？',
-        type: 'warning',
-        showCancelButton: true,
-        confirmButtonText: '确定删除',
-        cancelButtonText: '取消',
-    }).then(( action ) => {
-        if(action === 'confirm') {
-            api.financeApi.accountDelete(row.id).then((res: any) => {
-                if(res.code == 200) {
-                    ElMessage({
-                        message: res.msg,
-                        type: 'success'
-                    })
-                    initData()
-                }
-            })
+  ElMessageBox({
+    title: '删除企业',
+    message: '确定要删除该企业吗？',
+    type: 'warning',
+    showCancelButton: true,
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消',
+  }).then((action) => {
+    if (action === 'confirm') {
+      api.financeApi.accountDelete(row.id).then((res: any) => {
+        if (res.code == 200) {
+          ElMessage({
+            message: res.msg,
+            type: 'success'
+          })
+          initData()
         }
-    }).catch(( action ) => {
+      })
+    }
+  }).catch((action) => {
 
-    })
+  })
 }
 
 // 分页
@@ -208,23 +194,23 @@ let pages = ref(1)
 let size = ref(10)
 let total = ref(0)
 const handleSizeChange = (size) => {
-    size.value = size
+  size.value = size
 }
 const handleCurrentChange = (page) => {
-    pages.value = page
+  pages.value = page
 }
 
 const initData = () => {
-    api.financeApi.accountPage({
-        pageNo: pages.value,
-        pageSize: size.value,
-        ...companyForm.value
-    }).then((res: any) => {
-        if(res.code == 200) {
-            companyData.value = res.data.records
-            total.value = res.data.total
-        }
-    })
+  api.financeApi.accountPage({
+    pageNo: pages.value,
+    pageSize: size.value,
+    ...companyForm.value
+  }).then((res: any) => {
+    if (res.code == 200) {
+      companyData.value = res.data.records
+      total.value = res.data.total
+    }
+  })
 }
 
 // 新增/编辑
@@ -233,73 +219,64 @@ let addShow = ref(false)
 let title = ref('添加来往企业')
 let addForm = ref({})
 const addRules = ref({
-    accountName: [{ required: true, trigger: "blur", message: "请输入" }],
-    outerFlag: [{ required: true, trigger: "change", message: "请输入" }],
-    businessQuality: [{ required: true, trigger: "change", message: "请输入" }],
-    establishTime: [{ required: true, trigger: "change", message: "请输入" }],
-    owned: [{ required: true, trigger: "blur", message: "请输入" }],
-    juridicalPerson: [{ required: true, trigger: "blur", message: "请输入" }],
-    biller: [{ required: true, trigger: "blur", message: "请输入" }],
-    invoicingAmount: [{ required: true, trigger: "blur", message: "请输入" }]
+  accountName: [{ required: true, trigger: "blur", message: "请输入" }],
+  outerFlag: [{ required: true, trigger: "change", message: "请输入" }],
+  businessQuality: [{ required: true, trigger: "change", message: "请输入" }],
+  establishTime: [{ required: true, trigger: "change", message: "请输入" }],
+  owned: [{ required: true, trigger: "blur", message: "请输入" }],
+  juridicalPerson: [{ required: true, trigger: "blur", message: "请输入" }],
+  biller: [{ required: true, trigger: "blur", message: "请输入" }],
+  invoicingAmount: [{ required: true, trigger: "blur", message: "请输入" }]
 })
 const handleSave = async (AddRef) => {
-    if(!AddRef) {
-        AddRef.resetFields()
-        return
+  if (!AddRef) {
+    AddRef.resetFields()
+    return
+  }
+  await AddRef.validate((valid) => {
+    if (valid) {
+      if (!editId.value) {
+        api.financeApi.accountAdd({
+          ...addForm.value
+        }).then((res: any) => {
+          if (res.code == 200) {
+            ElMessage({
+              message: res.msg,
+              type: 'success'
+            })
+            addShow.value = false
+            initData()
+          }
+        })
+      } else {
+        api.financeApi.accountEdit({
+          id: editId.value,
+          ...addForm.value
+        }).then((res: any) => {
+          if (res.code == 200) {
+            ElMessage({
+              message: res.msg,
+              type: 'success'
+            })
+            addShow.value = false
+            initData()
+          }
+        })
+      }
     }
-    await AddRef.validate((valid) => {
-        if(valid) {
-            if(!editId.value) {
-                api.financeApi.accountAdd({
-                    ...addForm.value
-                }).then((res: any) => {
-                    if(res.code == 200) {
-                        ElMessage({
-                            message: res.msg,
-                            type: 'success'
-                        })
-                        addShow.value = false
-                        initData()
-                    }
-                })
-            } else {
-                api.financeApi.accountEdit({
-                    id: editId.value,
-                    ...addForm.value
-                }).then((res: any) => {
-                    if(res.code == 200) {
-                        ElMessage({
-                            message: res.msg,
-                            type: 'success'
-                        })
-                        addShow.value = false
-                        initData()
-                    }
-                })
-            }
-        }
-    })
+  })
 }
 
 onMounted(() => {
-    initData();
+  initData();
 })
 
 </script>
 
 <style scoped lang="scss">
-.company {
-    height: calc(100vh - 130px);
-    width: calc(100% - 24px);
-    margin: 12px auto;
-    padding: 12px;
-    background: #FFFFFF;
-    overflow-y: auto;
-
-    .pagination {
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-end;
-    }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
 }
 </style>

src/views/basics/dictionaries.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dictionaries">
+  <PageMain class="vh100">
     <el-row :gutter="20">
       <!-- 一级类目 -->
       <el-col :span="6">
@@ -7,13 +7,8 @@
           <span>一级类目</span>
         </div>
         <div class="first">
-          <div
-            class="firstItem"
-            v-for="(item) in sortedCategories"
-            :key="item.id"
-            :class="{ active: selectedCategory?.id === item.id }"
-            @click="selectCategory(item)"
-          >
+          <div class="firstItem" v-for="(item) in sortedCategories" :key="item.id"
+            :class="{ active: selectedCategory?.id === item.id }" @click="selectCategory(item)">
             <span>{{ item.label }}</span>
           </div>
         </div>
@@ -27,27 +22,13 @@
             添加类目
           </el-button>
         </div>
-        <el-tree
-          ref="treeRef"
-          style="width: 100%"
-          :data="treeData"
-          node-key="id"
-          :default-expanded-keys="expandedKeys"
-          :expand-on-click-node="true"
-          :props="{ children: 'child', label: 'label' }"
-          class="dict-tree"
-          @node-click="handleNodeClick"
-        >
+        <el-tree ref="treeRef" style="width: 100%" :data="treeData" node-key="id" :default-expanded-keys="expandedKeys"
+          :expand-on-click-node="true" :props="{ children: 'child', label: 'label' }" class="dict-tree"
+          @node-click="handleNodeClick">
           <template #default="{ node, data }">
             <div class="custom-tree-node" @mouseenter="data.showActions = true" @mouseleave="data.showActions = false">
               <span v-if="!data.isEditing" class="node-label">{{ node.label }}</span>
-              <el-input
-                v-else
-                v-model="data.tempLabel"
-                placeholder="请输入"
-                style="width: 150px"
-                maxlength="20"
-              />
+              <el-input v-else v-model="data.tempLabel" placeholder="请输入" style="width: 150px" maxlength="20" />
               <div v-if="!data.isEditing && data.showActions" class="node-actions">
                 <el-button icon="Edit" type="primary" link @click.stop="editNode(data)" />
                 <el-button icon="Delete" type="danger" link @click.stop="remove(node, data)" />
@@ -73,24 +54,12 @@
         </el-form-item>
 
         <el-form-item prop="parentId" label="上级类目">
-          <el-cascader
-            v-model="addForm.parentId"
-            :options="cascaderOptions"
-            :props="cascaderProps"
-            placeholder="请选择"
-            :disabled="addForm.type === '1' || isEdit"
-            clearable
-            style="width: 100%"
-          />
+          <el-cascader v-model="addForm.parentId" :options="cascaderOptions" :props="cascaderProps" placeholder="请选择"
+            :disabled="addForm.type === '1' || isEdit" clearable style="width: 100%" />
         </el-form-item>
 
         <el-form-item prop="dictName" label="类目名称">
-          <el-input
-            v-model="addForm.dictName"
-            placeholder="请输入类目名称"
-            maxlength="20"
-            show-word-limit
-          />
+          <el-input v-model="addForm.dictName" placeholder="请输入类目名称" maxlength="20" show-word-limit />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -98,7 +67,7 @@
         <el-button type="primary" @click="handleAdd">确定</el-button>
       </template>
     </el-dialog>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -465,103 +434,94 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.dictionaries {
-  height: calc(100vh - 130px);
-  width: calc(100% - 24px);
-  margin: 12px auto;
-  padding: 16px;
-  background: #FFFFFF;
-  overflow-y: auto;
-
-  .title {
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.first {
+  .firstItem {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin-bottom: 4px;
+    padding: 10px 12px;
+    cursor: pointer;
+    border-radius: 4px;
     font-size: 14px;
-    font-weight: 500;
-    color: #303133;
-    margin-bottom: 12px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #e4e7ed;
-  }
+    color: #606266;
+    transition: all 0.2s;
 
-  .first {
-    .firstItem {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 4px;
-      padding: 10px 12px;
-      cursor: pointer;
-      border-radius: 4px;
-      font-size: 14px;
-      color: #606266;
-      transition: all 0.2s;
-
-      &:hover {
-        background-color: #f5f7fa;
-        color: #409EFF;
-      }
+    &:hover {
+      background-color: #f5f7fa;
+      color: #409EFF;
+    }
 
-      &.active {
-        background-color: #ecf5ff;
-        color: #409EFF;
-        font-weight: 500;
-      }
+    &.active {
+      background-color: #ecf5ff;
+      color: #409EFF;
+      font-weight: 500;
     }
   }
+}
 
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding: 4px 0;
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 4px 0;
 
-    .node-label {
-      color: #606266;
-    }
+  .node-label {
+    color: #606266;
+  }
 
-    .node-actions {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      margin-left: 8px;
+  .node-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
 
-      .el-button {
-        padding: 4px;
-        font-size: 14px;
-      }
+    .el-button {
+      padding: 4px;
+      font-size: 14px;
     }
   }
+}
 
-  :deep(.el-tree-node) {
-    padding: 2px 0;
-  }
+:deep(.el-tree-node) {
+  padding: 2px 0;
+}
 
-  :deep(.el-tree-node__content) {
-    height: 36px;
-    padding: 0 8px;
-    border-radius: 4px;
+:deep(.el-tree-node__content) {
+  height: 36px;
+  padding: 0 8px;
+  border-radius: 4px;
 
-    &:hover {
-      background-color: #f5f7fa;
-    }
+  &:hover {
+    background-color: #f5f7fa;
   }
+}
 
-  :deep(.el-tree-node__expand-icon) {
-    font-size: 14px;
-    color: #909399;
-  }
+:deep(.el-tree-node__expand-icon) {
+  font-size: 14px;
+  color: #909399;
+}
 
-  :deep(.el-tree-node__children) {
-    margin-left: 16px;
-    padding-left: 4px;
-  }
+:deep(.el-tree-node__children) {
+  margin-left: 16px;
+  padding-left: 4px;
+}
 
-  .dict-tree {
-    padding: 8px 0;
-  }
+.dict-tree {
+  padding: 8px 0;
 }
 </style>

src/views/capital/index.vue

@@ -1,341 +1,276 @@
 <template>
-    <div class="capital">
-        <el-tabs class="demo-tabs" @tab-click="handleClick">
-            <el-tab-pane name="0">
-                <template #label>
-                    <el-badge :value="total1">
-                        <span>代付款</span>
-                    </el-badge>
-                </template>
-                <el-form v-model="firstForm" label-width="100">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item label="申请人">
-                                <el-input v-model="firstForm.people" placeholder="请输入" clearable></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="申请部门">
-                                <el-cascader
-                                    clearable
-                                    style="width: 100%"
-                                    v-model="firstForm.deptId"
-                                    :options="option"
-                                    :props="tableProps"
-                                ></el-cascader>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="申请时间">
-                                <el-date-picker
-                                    v-model="firstForm.replayTime"
-                                    type="daterange"
-                                    range-separator="至"
-                                    start-placeholder="开始时间"
-                                    end-placeholder="结束时间"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="付款账户">
-                                <el-input v-model="firstForm.count" placeholder="请输入" clearable></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch">搜索</el-button>
-                            <el-button plain @click="handleReset">重置</el-button>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-button icon="plus" type="primary" @click="add">新建资金申请单</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table :data="firstData" style="width: 100%; margin-top: 20px;">
-                    <el-table-column prop="orderNo" label="付款单号" width="150"></el-table-column>
-                    <el-table-column prop="companyName" label="申请人" width="100"></el-table-column>
-                    <el-table-column prop="licenseNo" label="申请时间" width="150"></el-table-column>
-                    <el-table-column prop="insurName" label="申请金额" width="120"></el-table-column>
-                    <el-table-column prop="name" label="实付金额" width="120"></el-table-column>
-                    <el-table-column prop="signingTime" label="资金" width="150"></el-table-column>
-                    <el-table-column prop="quotationTime" label="付款账户" width="180"></el-table-column>
-                    <el-table-column prop="dockingPerson" label="收款账户" width="180"></el-table-column>
-                    <el-table-column prop="agreementName" label="支付方式" width="100"></el-table-column>
-                    <el-table-column prop="productName" label="备注" width="200"></el-table-column>
-                    <el-table-column label="操作" fixed="right" width="200">
-                        <template #default="scope">
-                            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
-                            <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
-                            <el-button link type="primary" size="small" @click="pay(scope.row)">付款</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total1"
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane name="1">
-                <template #label>
-                    <el-badge :value="total2">
-                        <span>已付款</span>
-                    </el-badge>
-                </template>
-                <el-form v-model="firstForm" label-width="100">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item label="申请人">
-                                <el-input v-model="firstForm.people" placeholder="请输入" clearable></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="申请部门">
-                                <el-cascader
-                                    clearable
-                                    style="width: 100%"
-                                    v-model="firstForm.deptId"
-                                    :options="option"
-                                    :props="tableProps"
-                                ></el-cascader>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="申请时间">
-                                <el-date-picker
-                                    v-model="firstForm.replayTime"
-                                    type="daterange"
-                                    range-separator="至"
-                                    start-placeholder="开始时间"
-                                    end-placeholder="结束时间"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="付款账户">
-                                <el-input v-model="firstForm.count" placeholder="请输入" clearable></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch">搜索</el-button>
-                            <el-button plain @click="handleReset">重置</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table :data="firstData" style="width: 100%; margin-top: 20px;">
-                    <el-table-column prop="orderNo" label="付款单号" width="150"></el-table-column>
-                    <el-table-column prop="companyName" label="申请人" width="100"></el-table-column>
-                    <el-table-column prop="licenseNo" label="申请时间" width="150"></el-table-column>
-                    <el-table-column prop="insurName" label="申请金额" width="120"></el-table-column>
-                    <el-table-column prop="name" label="实付金额" width="120"></el-table-column>
-                    <el-table-column prop="signingTime" label="资金" width="150"></el-table-column>
-                    <el-table-column prop="quotationTime" label="付款账户" width="180"></el-table-column>
-                    <el-table-column prop="dockingPerson" label="收款账户" width="180"></el-table-column>
-                    <el-table-column prop="agreementName" label="支付方式" width="100"></el-table-column>
-                    <el-table-column prop="productName" label="备注" width="200"></el-table-column>
-                    <el-table-column label="操作" fixed="right" width="200">
-                        <template #default="scope">
-                            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
-                            <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total1"
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-        </el-tabs>
-        <el-dialog
-            width="800"
-            title="新建资金申请单"
-            v-model="addShow"
-        >
-            <el-form v-model="addForm" label-width="80">
-                <h3>基本信息</h3>
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="申请人">
-                            <el-input placeholder="请输入" v-model="addForm.a"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="申请部门">
-                            <el-cascader
-                                clearable
-                                style="width: 100%"
-                                v-model="addForm.a"
-                                :options="option"
-                                :props="tableProps"
-                            ></el-cascader>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="申请时间">
-                            <el-date-picker
-                                v-model="addForm.a"
-                                type="daterange"
-                                range-separator="至"
-                                start-placeholder="开始时间"
-                                end-placeholder="结束时间"
-                                format="YYYY-MM-DD"
-                                value-format="YYYY-MM-DD"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="申请金额">
-                            <el-input placeholder="请输入" v-model="addForm.a">
-                                <template #append>元</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="付款账户">
-                            <el-select placeholder="请选择" v-model="addForm.a">
-                                <el-option value="1" label="1"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="收款账户">
-                            <el-select placeholder="请选择" v-model="addForm.a">
-                                <el-option value="1" label="1"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="支出类型">
-                            <el-select placeholder="请选择" v-model="addForm.a">
-                                <el-option value="1" label="1"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="付款方式">
-                            <el-select placeholder="请选择" v-model="addForm.a">
-                                <el-option value="1" label="1"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item prop="a" label="备注">
-                            <el-input placeholder="请输入" v-model="addForm.a" type="textarea" maxlength="500" show-word-limit></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <h3 style="display: flex; align-items: center; justify-content: flex-start">
-                    <span style="margin-right: 20px">付款账户资金归属</span>
-                    <el-popover
-                        v-model:visible="payPopoverShow"
-                        ref="payPopoverRef"
-                        trigger="click"
-                        placement="bottom"
-                    >
-                        <template #reference>
-                            <el-button icon="plus" link type="primary">添加归属</el-button>
-                        </template>
-                        <el-checkbox-group v-model="payList">
-                            <el-checkbox label="1" value="1"></el-checkbox>
-                        </el-checkbox-group>
-                        <div>
-                            <el-button @click="handlePayCancel" size="small">取消</el-button>
-                            <el-button type="primary" size="small" @click="handlePaySave">保存</el-button>
-                        </div>
-                    </el-popover>
-                </h3>
-                <div class="payList">
-                    <div class="payItem" v-for="(item, index) in payList">
-                        <span>111</span>
-                        <el-input v-model="item.a" placeholder="请输入" style="width: 200px; margin-left: 20px">
-                            <template #append>元</template>
-                        </el-input>
-                    </div>
-                </div>
-                <h3 style="display: flex; align-items: center; justify-content: flex-start">
-                    <span style="margin-right: 20px">收款账户资金归属</span>
-                    <el-popover
-                        v-model:visible="getPopoverShow"
-                        ref="payPopoverRef"
-                        trigger="click"
-                        placement="bottom"
-                    >
-                        <template #reference>
-                            <el-button icon="plus" link type="primary">添加归属</el-button>
-                        </template>
-                        <el-checkbox-group v-model="getList">
-                            <el-checkbox label="1" value="1"></el-checkbox>
-                        </el-checkbox-group>
-                        <div>
-                            <el-button @click="handleGetCancel" size="small">取消</el-button>
-                            <el-button type="primary" size="small" @click="handleGetSave">保存</el-button>
-                        </div>
-                    </el-popover>
-                </h3>
-                <div class="payList">
-                    <div class="payItem" v-for="(item, index) in payList">
-                        <span>111</span>
-                        <el-input v-model="item.a" placeholder="请输入" style="width: 200px; margin-left: 20px">
-                            <template #append>元</template>
-                        </el-input>
-                    </div>
-                </div>
-            </el-form>
-            <template #footer>
-                <div>
-                    <el-button @click="addShow = false">取消</el-button>
-                    <el-button type="primary" @click="handleSubmit">确定</el-button>
-                </div>
+  <PageMain class="vh100">
+    <el-tabs class="demo-tabs h-full" @tab-click="handleClick">
+      <el-tab-pane name="0" class="h-full">
+        <template #label>
+          <el-badge :value="total1">
+            <span>代付款</span>
+          </el-badge>
+        </template>
+        <el-form v-model="firstForm" label-width="100">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="申请人">
+                <el-input v-model="firstForm.people" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="申请部门">
+                <el-cascader clearable style="width: 100%" v-model="firstForm.deptId" :options="option"
+                  :props="tableProps"></el-cascader>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="申请时间">
+                <el-date-picker v-model="firstForm.replayTime" type="daterange" range-separator="至"
+                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="付款账户">
+                <el-input v-model="firstForm.count" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16" style="display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch">搜索</el-button>
+              <el-button plain @click="handleReset">重置</el-button>
+            </el-col>
+            <el-col :span="8">
+              <el-button icon="plus" type="primary" @click="add">新建资金申请单</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="firstData" height="calc(100% - 194px)" style="width: 100%; margin-top: 20px;">
+          <el-table-column prop="orderNo" label="付款单号" width="150"></el-table-column>
+          <el-table-column prop="companyName" label="申请人" width="100"></el-table-column>
+          <el-table-column prop="licenseNo" label="申请时间" width="150"></el-table-column>
+          <el-table-column prop="insurName" label="申请金额" width="120"></el-table-column>
+          <el-table-column prop="name" label="实付金额" width="120"></el-table-column>
+          <el-table-column prop="signingTime" label="资金" width="150"></el-table-column>
+          <el-table-column prop="quotationTime" label="付款账户" width="180"></el-table-column>
+          <el-table-column prop="dockingPerson" label="收款账户" width="180"></el-table-column>
+          <el-table-column prop="agreementName" label="支付方式" width="100"></el-table-column>
+          <el-table-column prop="productName" label="备注" width="200"></el-table-column>
+          <el-table-column label="操作" fixed="right" width="200">
+            <template #default="scope">
+              <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
+              <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
+              <el-button link type="primary" size="small" @click="pay(scope.row)">付款</el-button>
             </template>
-        </el-dialog>
-        <el-dialog
-            title="付款"
-            width="600"
-            v-model="payShow"
-        >
-            <el-form v-model="payForm">
-                <el-form-item label="申请金额" prop="a">
-                    <el-input v-model="payForm.a" style="width: 400px">
-                        <template #append>元</template>
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="已付金额" prop="a">
-                    <el-input v-model="payForm.a" style="width: 400px">
-                        <template #append>元</template>
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="本次金额" prop="a">
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <el-input v-model="payForm.a" style="width: 400px">
-                            <template #append>元</template>
-                        </el-input>
-                        <el-button link type="primary" style="margin-left: 20px">全部付款</el-button>
-                    </div>
-                </el-form-item>
-                <div>剩余6524.23元未支付</div>
-            </el-form>
-            <template #footer>
-                <el-button plain>取消</el-button>
-                <el-button type="primary">确定</el-button>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"></el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane name="1" class="h-full">
+        <template #label>
+          <el-badge :value="total2">
+            <span>已付款</span>
+          </el-badge>
+        </template>
+        <el-form v-model="firstForm" label-width="100">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="申请人">
+                <el-input v-model="firstForm.people" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="申请部门">
+                <el-cascader clearable style="width: 100%" v-model="firstForm.deptId" :options="option"
+                  :props="tableProps"></el-cascader>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="申请时间">
+                <el-date-picker v-model="firstForm.replayTime" type="daterange" range-separator="至"
+                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="付款账户">
+                <el-input v-model="firstForm.count" placeholder="请输入" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch">搜索</el-button>
+              <el-button plain @click="handleReset">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="firstData" height="calc(100% - 162px)" style="width: 100%; margin-top: 20px;">
+          <el-table-column prop="orderNo" label="付款单号" width="150"></el-table-column>
+          <el-table-column prop="companyName" label="申请人" width="100"></el-table-column>
+          <el-table-column prop="licenseNo" label="申请时间" width="150"></el-table-column>
+          <el-table-column prop="insurName" label="申请金额" width="120"></el-table-column>
+          <el-table-column prop="name" label="实付金额" width="120"></el-table-column>
+          <el-table-column prop="signingTime" label="资金" width="150"></el-table-column>
+          <el-table-column prop="quotationTime" label="付款账户" width="180"></el-table-column>
+          <el-table-column prop="dockingPerson" label="收款账户" width="180"></el-table-column>
+          <el-table-column prop="agreementName" label="支付方式" width="100"></el-table-column>
+          <el-table-column prop="productName" label="备注" width="200"></el-table-column>
+          <el-table-column label="操作" fixed="right" width="200">
+            <template #default="scope">
+              <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
+              <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
             </template>
-        </el-dialog>
-    </div>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"></el-pagination>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <el-dialog width="800" title="新建资金申请单" v-model="addShow">
+      <el-form v-model="addForm" label-width="80">
+        <h3>基本信息</h3>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item prop="a" label="申请人">
+              <el-input placeholder="请输入" v-model="addForm.a"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="申请部门">
+              <el-cascader clearable style="width: 100%" v-model="addForm.a" :options="option"
+                :props="tableProps"></el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="申请时间">
+              <el-date-picker v-model="addForm.a" type="daterange" range-separator="至" start-placeholder="开始时间"
+                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="申请金额">
+              <el-input placeholder="请输入" v-model="addForm.a">
+                <template #append>元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="付款账户">
+              <el-select placeholder="请选择" v-model="addForm.a">
+                <el-option value="1" label="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="收款账户">
+              <el-select placeholder="请选择" v-model="addForm.a">
+                <el-option value="1" label="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="支出类型">
+              <el-select placeholder="请选择" v-model="addForm.a">
+                <el-option value="1" label="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="付款方式">
+              <el-select placeholder="请选择" v-model="addForm.a">
+                <el-option value="1" label="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="a" label="备注">
+              <el-input placeholder="请输入" v-model="addForm.a" type="textarea" maxlength="500"
+                show-word-limit></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <h3 style="display: flex; align-items: center; justify-content: flex-start">
+          <span style="margin-right: 20px">付款账户资金归属</span>
+          <el-popover v-model:visible="payPopoverShow" ref="payPopoverRef" trigger="click" placement="bottom">
+            <template #reference>
+              <el-button icon="plus" link type="primary">添加归属</el-button>
+            </template>
+            <el-checkbox-group v-model="payList">
+              <el-checkbox label="1" value="1"></el-checkbox>
+            </el-checkbox-group>
+            <div>
+              <el-button @click="handlePayCancel" size="small">取消</el-button>
+              <el-button type="primary" size="small" @click="handlePaySave">保存</el-button>
+            </div>
+          </el-popover>
+        </h3>
+        <div class="payList">
+          <div class="payItem" v-for="(item, index) in payList">
+            <span>111</span>
+            <el-input v-model="item.a" placeholder="请输入" style="width: 200px; margin-left: 20px">
+              <template #append>元</template>
+            </el-input>
+          </div>
+        </div>
+        <h3 style="display: flex; align-items: center; justify-content: flex-start">
+          <span style="margin-right: 20px">收款账户资金归属</span>
+          <el-popover v-model:visible="getPopoverShow" ref="payPopoverRef" trigger="click" placement="bottom">
+            <template #reference>
+              <el-button icon="plus" link type="primary">添加归属</el-button>
+            </template>
+            <el-checkbox-group v-model="getList">
+              <el-checkbox label="1" value="1"></el-checkbox>
+            </el-checkbox-group>
+            <div>
+              <el-button @click="handleGetCancel" size="small">取消</el-button>
+              <el-button type="primary" size="small" @click="handleGetSave">保存</el-button>
+            </div>
+          </el-popover>
+        </h3>
+        <div class="payList">
+          <div class="payItem" v-for="(item, index) in payList">
+            <span>111</span>
+            <el-input v-model="item.a" placeholder="请输入" style="width: 200px; margin-left: 20px">
+              <template #append>元</template>
+            </el-input>
+          </div>
+        </div>
+      </el-form>
+      <template #footer>
+        <div>
+          <el-button @click="addShow = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog title="付款" width="600" v-model="payShow">
+      <el-form v-model="payForm">
+        <el-form-item label="申请金额" prop="a">
+          <el-input v-model="payForm.a" style="width: 400px">
+            <template #append>元</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="已付金额" prop="a">
+          <el-input v-model="payForm.a" style="width: 400px">
+            <template #append>元</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="本次金额" prop="a">
+          <div style="display: flex; align-items: center; justify-content: space-between">
+            <el-input v-model="payForm.a" style="width: 400px">
+              <template #append>元</template>
+            </el-input>
+            <el-button link type="primary" style="margin-left: 20px">全部付款</el-button>
+          </div>
+        </el-form-item>
+        <div>剩余6524.23元未支付</div>
+      </el-form>
+      <template #footer>
+        <el-button plain>取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </template>
+    </el-dialog>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -353,22 +288,22 @@ const handleClick = (e) => {
 
 let option = ref([])
 const tableProps = ref({
-    value: "id",
-    label: "name",
-    children: "children",
-    checkStrictly: true,
+  value: "id",
+  label: "name",
+  children: "children",
+  checkStrictly: true,
 });
 const institutionList = () => {
-    api.institutionApi.institutionList({ name: '', system: '' }).then((res: any) => {
-        if(res.code == 200) {
-            option.value = res.data
-        } else {
-            ElMessage({
-                message: res.msg,
-                type: 'warning'
-            })
-        }
-    })
+  api.institutionApi.institutionList({ name: '', system: '' }).then((res: any) => {
+    if (res.code == 200) {
+      option.value = res.data
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: 'warning'
+      })
+    }
+  })
 }
 
 let firstForm = ref({})
@@ -376,7 +311,7 @@ const handleSearch = () => {
 
 }
 const handleReset = () => {
-    firstForm.value = {}
+  firstForm.value = {}
 }
 
 let firstData = ref([{}])
@@ -385,21 +320,21 @@ let firstData = ref([{}])
 let pages = ref(1)
 let size = ref(10)
 const handleSizeChange = (size) => {
-    size.value = size
+  size.value = size
 }
 const handleCurrentChange = (page) => {
-    pages.value = page
+  pages.value = page
 }
 
 // 新增
 let addShow = ref(false)
 let addForm = ref({})
 const add = () => {
-    addShow.value = true
+  addShow.value = true
 }
 //编辑
 const edit = (row) => {
-    addShow.value = true
+  addShow.value = true
 }
 // 删除
 const del = (row) => {
@@ -409,7 +344,7 @@ const del = (row) => {
 let payShow = ref(false)
 let payForm = ref({})
 const pay = (row) => {
-    payShow.value = true
+  payShow.value = true
 }
 
 
@@ -420,63 +355,58 @@ const handleSubmit = () => {
 // 付款添加归属
 let payPopoverShow = ref(false)
 let payList = ref([
-    {
-        a: 111
-    }
+  {
+    a: 111
+  }
 ])
 const handlePayCancel = () => {
-    payPopoverShow.value = false
+  payPopoverShow.value = false
 }
 const handlePaySave = () => {
-    payPopoverShow.value = false
+  payPopoverShow.value = false
 }
 // 收款添加归属
 let getPopoverShow = ref(false)
 let getList = ref([])
 const handleGetCancel = () => {
-    getPopoverShow.value = false
+  getPopoverShow.value = false
 }
 const handleGetSave = () => {
-    getPopoverShow.value = false
+  getPopoverShow.value = false
 }
 
 onMounted(() => {
-    institutionList();
+  institutionList();
 })
 
 </script>
 
 <style scoped lang="scss">
-.capital{
-    height: calc(100vh - 130px);
-    width: calc(100% - 24px);
-    margin: 12px auto;
-    padding: 12px;
-    background: #FFFFFF;
-    overflow-y: auto;
-    .pagination{
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-end;
-    }
-    .payList{
-        .payItem{
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            margin-bottom: 20px;
-        }
-    }
-    :deep(.el-badge__content.is-fixed) {
-        right: calc(var(--el-badge-size) / 2 - 10px);
-        top: 50%;
-    }
-    :deep(.el-badge__content--danger) {
-        background-color: #D40000;
-    }
-    h3{
-        margin: 10px 20px 10px 0;
-    }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.payList {
+  .payItem {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 20px;
+  }
+}
+
+:deep(.el-badge__content.is-fixed) {
+  right: calc(var(--el-badge-size) / 2 - 10px);
+  top: 50%;
+}
+
+:deep(.el-badge__content--danger) {
+  background-color: #D40000;
 }
 
+h3 {
+  margin: 10px 20px 10px 0;
+}
 </style>

src/views/platform/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="receivable">
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabsClick">
-      <el-tab-pane label="车险应收" name="1">
+  <PageMain class="vh100">
+    <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="handleTabsClick">
+      <el-tab-pane label="车险应收" name="1" class="h-full">
         <el-form v-model="receivableForm" label-width="100">
           <el-row :gutter="20">
             <el-col :span="8">
@@ -135,7 +135,7 @@
             <el-button class="radius-2px width-100" @click="handleBatchEdit">批量修改比例</el-button>
           </span>
         </el-row>
-        <el-table :data="receiveData" style="width: 100%; margin-top: 20px;" ref="ReceiveDataRef1"
+        <el-table :data="receiveData" :height="isTrue?'calc(100% - 446px)':'calc(100% - 346px)'" style="width: 100%; margin-top: 20px;" ref="ReceiveDataRef1"
           @select="handleSelectChange1" @select-all="handleSelectAll1">
           <el-table-column type="selection" width="80"></el-table-column>
           <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
@@ -179,7 +179,7 @@
             @current-change="handleCurrentChange"></el-pagination>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="非车险验收" name="2">
+      <el-tab-pane label="非车险验收" name="2" class="h-full">
         <el-form v-model="receivableForm" label-width="100">
           <el-row :gutter="20">
             <el-col :span="8">
@@ -300,7 +300,7 @@
             <el-button class="radius-2px width-100" @click="handleBatchEdit">批量修改比例</el-button>
           </span>
         </el-row>
-        <el-table :data="receiveData" style="width: 100%; margin-top: 20px" ref="ReceiveDataRef2"
+        <el-table :data="receiveData" :height="isTrue?'calc(100% - 396px)':'calc(100% - 296px)'" style="width: 100%; margin-top: 20px" ref="ReceiveDataRef2"
           @select="handleSelectChange2" @select-all="handleSelectAll2">
           <el-table-column type="selection" width="80"></el-table-column>
           <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
@@ -484,10 +484,12 @@
           </el-upload>
           <div v-if="importModifyCallback">
             <div>
-              您将导入 <span style="color:#409eff;">{{ importModifyCallback?.failedNumber + importModifyCallback?.successNumber ||
-              0 }}
-            </span> 条数据，其中 <span style="color:#409eff;">{{ importModifyCallback?.successNumber || 0 }} </span> 条正常导入；<span
-              style="color: red;">{{ importModifyCallback?.failedNumber || 0 }}</span> 条不符合要求无法导入。
+              您将导入 <span style="color:#409eff;">{{ importModifyCallback?.failedNumber +
+                importModifyCallback?.successNumber
+                ||
+                0 }}
+              </span> 条数据，其中 <span style="color:#409eff;">{{ importModifyCallback?.successNumber || 0 }} </span>
+              条正常导入；<span style="color: red;">{{ importModifyCallback?.failedNumber || 0 }}</span> 条不符合要求无法导入。
             </div>
             <el-button type="primary" link @click="downloadImportFailedData(importModifyCallback)">下载导入失败文件</el-button>
           </div>
@@ -498,7 +500,7 @@
         <el-button type="primary" @click="batchEditShow = false">确定</el-button>
       </template>
     </el-dialog>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -783,12 +785,12 @@ const uploadJYFile = async (file) => {
 // 下载导入失败文件
 const downloadImportFailedData = (item) => {
   const link = document.createElement('a');
-      link.href = item.failFileUrl;
-      link.download = '';
-      // 触发下载
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
+  link.href = item.failFileUrl;
+  link.download = '';
+  // 触发下载
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
 }
 // 分页
 let pages = ref(1)
@@ -842,13 +844,13 @@ const initDept = () => {
 // 编辑
 const toEdit = (row: any) => {
   console.log(row)
-    myRouter.push({
-        path: '/insurancePolicy/order/insurancePolicyOrderDetail',
-        query: {
-            orderNo: row.orderNo,
-            jumpType:'costMsg'
-        }
-    })
+  myRouter.push({
+    path: '/insurancePolicy/order/insurancePolicyOrderDetail',
+    query: {
+      orderNo: row.orderNo,
+      jumpType: 'costMsg'
+    }
+  })
 }
 // 车险列表
 const getPlatFormReceivableList = () => {
@@ -961,44 +963,35 @@ onMounted(() => {
 <style scoped lang="scss">
 @use "@/assets/styles/common/style.scss";
 
-.receivable {
-  height: calc(100vh - 130px);
-  width: calc(100% - 24px);
-  margin: 12px auto;
-  padding: 12px;
-  background: #FFFFFF;
-  overflow-y: auto;
+.icon_s {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 20px;
+  color: #00a0f4;
+  cursor: pointer;
 
-  .icon_s {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-left: 20px;
-    color: #00a0f4;
-    cursor: pointer;
-
-    .is_icon {
-      transition: ease 0.2s;
-    }
-
-    .is_down {
-      transform: rotate(180deg);
-    }
+  .is_icon {
+    transition: ease 0.2s;
   }
 
-  .add-content {
-    width: 100%;
-    max-height: 600px;
+  .is_down {
+    transform: rotate(180deg);
   }
+}
 
-  .pagination {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
+.add-content {
+  width: 100%;
+  max-height: 600px;
+}
 
-  :deep(.el-radio) {
-    width: 100%;
-  }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: end;
+}
+
+:deep(.el-radio) {
+  width: 100%;
 }
 </style>

src/views/platform/platformRecord.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="invoiceRecord">
+  <PageMain class="vh100">
     <el-form v-model="form" label-width="120">
       <el-row :gutter="20">
         <el-col :span="8">
@@ -9,18 +9,8 @@
         </el-col>
         <el-col :span="8">
           <el-form-item prop="a" label="保险公司">
-            <el-select
-              v-model="form.companyId"
-              placeholder="请选择"
-              clearable
-              filterable
-            >
-              <el-option
-                v-for="item in companyList"
-                :key="item.id"
-                :value="item.id "
-                :label="item.name"
-              ></el-option>
+            <el-select v-model="form.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-form-item>
         </el-col>
@@ -52,12 +42,8 @@
         </el-col>
         <el-col :span="8">
           <el-form-item prop="settlementTime" label="结算时间">
-            <el-date-picker
-              v-model="form.settlementTime"
-              type="daterange"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-            />
+            <el-date-picker v-model="form.settlementTime" type="daterange" format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -68,71 +54,32 @@
         <el-col :span="8" style="display: flex; justify-content: flex-end">
           <el-button type="primary" @click="search()">查询</el-button>
           <el-button plain type="primary" @click="reset()">重置</el-button>
-          <el-button
-            type="primary"
-            @click="exportSuperviseSettlementExcel()"
-            >导出结算记录</el-button
-          >
+          <el-button type="primary" @click="exportSuperviseSettlementExcel()">导出结算记录</el-button>
         </el-col>
       </el-row>
     </el-form>
-    <el-table class="tableRecord" :data="tableData">
-      <el-table-column
-        prop="settlementId"
-        label="结算记录编号"
-      ></el-table-column>
-      <el-table-column
-        prop="companyName"
-        label="保险公司"
-        width="200"
-      ></el-table-column>
+    <el-table class="tableRecord" style="height: calc(100% - 192px)" :data="tableData">
+      <el-table-column prop="settlementId" label="结算记录编号"></el-table-column>
+      <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
 
-      <el-table-column
-        prop="invoiceType"
-        label="应收项"
-        width="100"
-      ></el-table-column>
-      <el-table-column
-        prop="taxPoint"
-        label="税点"
-        width="100"
-      ></el-table-column>
-      <el-table-column
-        prop="actualReceivedAmount"
-        label="实收金额"
-        width="100"
-      ></el-table-column>
-      <el-table-column
-        prop="receivePaymentDate"
-        label="收款日期"
-      ></el-table-column>
+      <el-table-column prop="invoiceType" label="应收项" width="100"></el-table-column>
+      <el-table-column prop="taxPoint" label="税点" width="100"></el-table-column>
+      <el-table-column prop="actualReceivedAmount" label="实收金额" width="100"></el-table-column>
+      <el-table-column prop="receivePaymentDate" label="收款日期"></el-table-column>
       <el-table-column label="收款凭证" width="100">
         <template #default="scope">
           <el-button link type="primary" @click="view">查看凭证（1）</el-button>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="createBy"
-        label="结算人"
-        width="100"
-      ></el-table-column>
-      <el-table-column
-        prop="createTime"
-        label="结算时间"
-      ></el-table-column>
+      <el-table-column prop="createBy" label="结算人" width="100"></el-table-column>
+      <el-table-column prop="createTime" label="结算时间"></el-table-column>
     </el-table>
     <div class="pagination">
-      <el-pagination
-        v-model:current-page="pages"
-        v-model:page-size="size"
-        :page-sizes="[10, 20, 30, 40]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange($event)"
-        @current-change="handleCurrentChange($event)"
-      ></el-pagination>
+      <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange($event)"
+        @current-change="handleCurrentChange($event)"></el-pagination>
     </div>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -173,22 +120,22 @@ const reset = () => {
 };
 
 const exportSuperviseSettlementExcel = () => {
-    api.settlementApi.exportSuperviseSettlementExcel({}).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '手续费应收结算报表明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  api.settlementApi.exportSuperviseSettlementExcel({}).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '手续费应收结算报表明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 
 // 列表
@@ -229,65 +176,65 @@ onMounted(() => {
 .tableRecord {
   height: calc(100% - 210px);
 }
-.invoiceRecord {
-  height: calc(100vh - 134px);
-  width: calc(100% - 24px);
-  margin: 12px auto;
-  padding: 12px;
-  background: #ffffff;
-  overflow-y: auto;
-  .pagination {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-end;
-  }
-  .upload-btn {
-    :deep(.el-button) {
-      width: 80px;
-      height: 80px;
-      font-size: 30px;
-      color: #ccc;
-    }
-  }
-  .imageDiv {
-    position: relative;
+
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.upload-btn {
+  :deep(.el-button) {
     width: 80px;
     height: 80px;
-    margin: 0 10px 10px 0;
-    &:hover {
-      .model {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: rgba(0, 0, 0, 0.3);
-      }
-    }
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: 4px;
-    }
+    font-size: 30px;
+    color: #ccc;
+  }
+}
+
+.imageDiv {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 10px 10px 0;
+
+  &:hover {
     .model {
-      position: absolute;
-      width: 80px;
-      height: 80px;
-      border-radius: 4px;
-      display: none;
-      top: 0;
-      left: 0;
-      .icon-view,
-      .icon-del {
-        color: #ffffff;
-        margin: 0 10px;
-        cursor: pointer;
-      }
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.3);
     }
   }
-  .bigImage {
+
+  img {
     display: block;
     width: 100%;
     height: 100%;
+    border-radius: 4px;
+  }
+
+  .model {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    border-radius: 4px;
+    display: none;
+    top: 0;
+    left: 0;
+
+    .icon-view,
+    .icon-del {
+      color: #ffffff;
+      margin: 0 10px;
+      cursor: pointer;
+    }
   }
 }
+
+.bigImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/platform/platformReport.vue

@@ -1,223 +1,188 @@
 <template>
-    <div class="report">
-        <el-tabs v-model="activeName" style="height: 100%" class="demo-tabs" @tab-click="handleClick">
-            <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
-                <el-form v-model="recordForm" label-width="80">
-                    <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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="time" label="时间">
-                                <el-date-picker
-                                    v-model="recordForm.time"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="结算状态">
-                                <el-select v-model="recordForm.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-button type="primary" @click="initData1()">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    style="margin-top: 20px"
-                    class="tableBox"
-                    :data="recordData"
-                    row-key="companyId"
-                    :summary-method="getSummaries"
-                    show-summary
-                >
-                    <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
-                    <!--                    <el-table-column type="expand" label="合作保险公司" width="200">
+  <PageMain class="vh100">
+    <el-tabs v-model="activeName" style="height: 100%" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
+        <el-form v-model="recordForm" label-width="80">
+          <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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="time" label="时间">
+                <el-date-picker v-model="recordForm.time" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="结算状态">
+                <el-select v-model="recordForm.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="initData1()">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 100px)" :data="recordData" row-key="companyId"
+          :summary-method="getSummaries" show-summary>
+          <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
+          <!--                    <el-table-column type="expand" label="合作保险公司" width="200">
                                             <template #default>
                                                 展开
                                             </template>
-                                        </el-table-column>-->
-                    <el-table-column prop="totalReceivable" label="应收金额" width="240"></el-table-column>
-                    <el-table-column prop="superviseFee" label="应收手续费" width="240"></el-table-column>
-                    <el-table-column prop="invoicedAmount" label="已开票" width="200"></el-table-column>
-                    <el-table-column prop="settledAmount" label="已结算" width="200"></el-table-column>
-                    <el-table-column prop="unInvoicedAmount" label="未开票" width="200"></el-table-column>
-                    <el-table-column prop="unSettledAmount" label="未结算" width="200"></el-table-column>
-                    <el-table-column label="操作" fixed="right" width="120">
-                        <template #default="scope">
-                            <el-button link type="primary">查看明细</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="2" label="对接人结算报表">
-                <el-form v-model="recordForm1" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="settlementId" label="对接人">
-                                <el-input v-model="recordForm1.settlementId"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm1.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="initData2()">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
-                            <el-button type="primary" @click="handleExport">导出结算记录</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    style="margin-top: 20px"
-                    :data="recordData1"
-                >
-                    <el-table-column prop="receiver" label="对接人" width="150"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column label="应收">
-                        <el-table-column prop="totalReceivable" label="总计" width="150"></el-table-column>
-                        <el-table-column prop="superviseFee" label="手续费" width="150"></el-table-column>
-                        <el-table-column prop="followFee" label="跟单费" width="150"></el-table-column>
-                    </el-table-column>
-                    <el-table-column label="已结算">
-                        <el-table-column prop="settledAmount" label="总计" width="150"></el-table-column>
-                        <el-table-column prop="settledSuperviseFee" label="手续费" width="150"></el-table-column>
-                        <el-table-column prop="settledFollowFee" label="跟单费" width="150"></el-table-column>
-                    </el-table-column>
-                    <el-table-column label="未结算">
-                        <el-table-column prop="unSettledAmount" label="总计" width="150"></el-table-column>
-                        <el-table-column prop="unSettledSuperviseFee" label="手续费" width="150"></el-table-column>
-                        <el-table-column prop="unSettledFollowFee" label="跟单费" width="150"></el-table-column>
-                    </el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total1"
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
-                <el-form v-model="recordForm2" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceId" label="开票记录编号">
-                                <el-input v-model="recordForm2.invoiceId"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceParty" label="对接人">
-                                <el-input v-model="recordData2.a"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementPerson" label="结算人">
-                                <el-input v-model="recordForm2.settlementPerson"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="状态">
-                                <el-select v-model="recordForm.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="24" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="initData3(['1'])">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
-                            <el-button type="primary" @click="handleExport1">导出明细</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    style="margin-top: 20px"
-                    :data="recordData2"
-                >
-                    <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column prop="invoiceParty" label="对接人" width="150"></el-table-column>
-                    <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
-                    <el-table-column prop="licenseNo" label="车牌号" width="150"></el-table-column>
-                    <el-table-column prop="productName" label="险种" width="150"></el-table-column>
-                    <el-table-column prop="receivableSuperviseCosts" label="应收金额" width="150"></el-table-column>
-                    <el-table-column prop="jqPremium" label="交强险保费" width="150"></el-table-column>
-                    <el-table-column prop="taxPremium" label="车船税" width="150"></el-table-column>
-                    <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="150"></el-table-column>
-                    <el-table-column prop="a" label="交强险跟单费比例" width="150"></el-table-column>
-                    <el-table-column prop="syPremium" label="商业险保费" width="150"></el-table-column>
-                    <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例" width="150"></el-table-column>
-                    <el-table-column prop="a" label="商业险跟单费比例" width="150"></el-table-column>
-                    <el-table-column prop="jyPremium" label="非车险保费" width="150"></el-table-column>
-                    <el-table-column prop="jySuperviseCostsProportion" label="非车险手续费比例" width="150"></el-table-column>
-                    <el-table-column prop="a" label="非车险跟单费比例" width="150"></el-table-column>
-                    <el-table-column prop="a" label="交强险保单号" width="150"></el-table-column>
-                    <el-table-column prop="a" label="商业险保单号" width="150"></el-table-column>
-                    <el-table-column prop="settlementPerson" label="结算人" width="150"></el-table-column>
-                    <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total2"
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+</el-table-column>-->
+          <el-table-column prop="totalReceivable" label="应收金额" width="240"></el-table-column>
+          <el-table-column prop="superviseFee" label="应收手续费" width="240"></el-table-column>
+          <el-table-column prop="invoicedAmount" label="已开票" width="200"></el-table-column>
+          <el-table-column prop="settledAmount" label="已结算" width="200"></el-table-column>
+          <el-table-column prop="unInvoicedAmount" label="未开票" width="200"></el-table-column>
+          <el-table-column prop="unSettledAmount" label="未结算" width="200"></el-table-column>
+          <el-table-column label="操作" fixed="right" width="120">
+            <template #default="scope">
+              <el-button link type="primary">查看明细</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="2" label="对接人结算报表">
+        <el-form v-model="recordForm1" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="settlementId" label="对接人">
+                <el-input v-model="recordForm1.settlementId"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm1.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="initData2()">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
+              <el-button type="primary" @click="handleExport">导出结算记录</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 142px)" :data="recordData1">
+          <el-table-column prop="receiver" label="对接人" width="150"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column label="应收">
+            <el-table-column prop="totalReceivable" label="总计" width="150"></el-table-column>
+            <el-table-column prop="superviseFee" label="手续费" width="150"></el-table-column>
+            <el-table-column prop="followFee" label="跟单费" width="150"></el-table-column>
+          </el-table-column>
+          <el-table-column label="已结算">
+            <el-table-column prop="settledAmount" label="总计" width="150"></el-table-column>
+            <el-table-column prop="settledSuperviseFee" label="手续费" width="150"></el-table-column>
+            <el-table-column prop="settledFollowFee" label="跟单费" width="150"></el-table-column>
+          </el-table-column>
+          <el-table-column label="未结算">
+            <el-table-column prop="unSettledAmount" label="总计" width="150"></el-table-column>
+            <el-table-column prop="unSettledSuperviseFee" label="手续费" width="150"></el-table-column>
+            <el-table-column prop="unSettledFollowFee" label="跟单费" width="150"></el-table-column>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"></el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
+        <el-form v-model="recordForm2" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="invoiceId" label="开票记录编号">
+                <el-input v-model="recordForm2.invoiceId"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceParty" label="对接人">
+                <el-input v-model="recordData2.a"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementPerson" label="结算人">
+                <el-input v-model="recordForm2.settlementPerson"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="状态">
+                <el-select v-model="recordForm.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="initData3(['1'])">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
+              <el-button type="primary" @click="handleExport1">导出明细</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 192px)" :data="recordData2">
+          <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column prop="invoiceParty" label="对接人" width="150"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
+          <el-table-column prop="licenseNo" label="车牌号" width="150"></el-table-column>
+          <el-table-column prop="productName" label="险种" width="150"></el-table-column>
+          <el-table-column prop="receivableSuperviseCosts" label="应收金额" width="150"></el-table-column>
+          <el-table-column prop="jqPremium" label="交强险保费" width="150"></el-table-column>
+          <el-table-column prop="taxPremium" label="车船税" width="150"></el-table-column>
+          <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="150"></el-table-column>
+          <el-table-column prop="a" label="交强险跟单费比例" width="150"></el-table-column>
+          <el-table-column prop="syPremium" label="商业险保费" width="150"></el-table-column>
+          <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例" width="150"></el-table-column>
+          <el-table-column prop="a" label="商业险跟单费比例" width="150"></el-table-column>
+          <el-table-column prop="jyPremium" label="非车险保费" width="150"></el-table-column>
+          <el-table-column prop="jySuperviseCostsProportion" label="非车险手续费比例" width="150"></el-table-column>
+          <el-table-column prop="a" label="非车险跟单费比例" width="150"></el-table-column>
+          <el-table-column prop="a" label="交强险保单号" width="150"></el-table-column>
+          <el-table-column prop="a" label="商业险保单号" width="150"></el-table-column>
+          <el-table-column prop="settlementPerson" label="结算人" width="150"></el-table-column>
+          <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total2" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"></el-pagination>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -225,32 +190,32 @@ import api from '@/api'
 
 let activeName = ref('1')
 const handleClick = (e) => {
-    pages.value = 1
-    size.value = 10
-    switch (e.props.name) {
-        case '1':
-            initData1()
-            break;
-        case '2':
-            initData2()
-            break;
-        case '3':
-            initData3(['1'])
-            break;
-        case '4':
-            initData3(['3'])
-            break;
-    }
+  pages.value = 1
+  size.value = 10
+  switch (e.props.name) {
+    case '1':
+      initData1()
+      break;
+    case '2':
+      initData2()
+      break;
+    case '3':
+      initData3(['1'])
+      break;
+    case '4':
+      initData3(['3'])
+      break;
+  }
 }
 
 // 保险公司
 let companyList = ref([])
 const initCompany = () => {
-    api.insuranceApi.leftList('').then((res: any) => {
-        if(res.code == 200) {
-            companyList.value = res.data
-        }
-    })
+  api.insuranceApi.leftList('').then((res: any) => {
+    if (res.code == 200) {
+      companyList.value = res.data
+    }
+  })
 }
 
 // 分页
@@ -260,40 +225,40 @@ let total = ref(0)
 let total1 = ref(0)
 let total2 = ref(0)
 const handleSizeChange = (size) => {
-    size.value = size
+  size.value = size
 }
 const handleCurrentChange = (pages) => {
-    pages.value = pages
+  pages.value = pages
 }
 
 const getSummaries = (param) => {
-    const { columns, data } = param
-    const sums: (string | VNode)[] = []
-    columns.forEach((column, index) => {
-        if (index === 0) {
-            sums[index] = h('div', [
-                '',
-            ])
-            return
-        }
-        const values = data.map((item) => Number(item[column.property]))
-        if (!values.every((value) => Number.isNaN(value))) {
-            sums[index] = ` ${values.reduce((prev, curr) => {
-                const value = Number(curr)
-                if (!Number.isNaN(value)) {
-                    return prev + curr
-                } else {
-                    return prev
-                }
-            }, 0)}`
+  const { columns, data } = param
+  const sums: (string | VNode)[] = []
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = h('div', [
+        '',
+      ])
+      return
+    }
+    const values = data.map((item) => Number(item[column.property]))
+    if (!values.every((value) => Number.isNaN(value))) {
+      sums[index] = ` ${values.reduce((prev, curr) => {
+        const value = Number(curr)
+        if (!Number.isNaN(value)) {
+          return prev + curr
         } else {
-            if(index > 2) {
-                sums[index - 1] = '0'
-            }
+          return prev
         }
-    })
+      }, 0)}`
+    } else {
+      if (index > 2) {
+        sums[index - 1] = '0'
+      }
+    }
+  })
 
-    return sums
+  return sums
 }
 
 // 结算记录
@@ -304,7 +269,7 @@ let recordData = ref([])
 let recordData1 = ref([])
 let recordData2 = ref([])
 const handleSearch1 = () => {
-    initData1()
+  initData1()
 }
 const handleReset1 = () => {
 
@@ -314,165 +279,152 @@ const view = (scope) => {
 }
 
 const initData1 = () => {
-    api.settlementApi.companySuperviseSettlementReport({
-        companyId: recordForm.value.companyId,
-        startTime: recordForm.value.time?.[0],
-        endTime: recordForm.value.time?.[1],
-        status: recordForm.value.status,
-        agreementType: '1'
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData.value = res.data
-        }
-    })
+  api.settlementApi.companySuperviseSettlementReport({
+    companyId: recordForm.value.companyId,
+    startTime: recordForm.value.time?.[0],
+    endTime: recordForm.value.time?.[1],
+    status: recordForm.value.status,
+    agreementType: '1'
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData.value = res.data
+    }
+  })
 }
 const initData2 = () => {
-    api.settlementApi.receiverSettlementReport({
-        settlementId: recordForm1.settlementId,
-        companyId: recordForm1.companyId,
-        invoiceParty: recordForm1.invoiceParty,
-        invoiceType: recordForm1.invoiceType,
-        status: recordForm1.status,
-        settlementPerson: recordForm1.settlementPerson,
-        invoiceId: recordForm1.invoiceId,
-        settlementTimeStart: recordForm1.value.settlementTime?.[0],
-        settlementTimeEnd: recordForm1.value.settlementTime?.[1],
-        pages: pages.value,
-        size: size.value,
-        invoiceTypes: ['2','4']
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData1.value = res.data.records
-            total1.value = res.data.total
-        }
-    })
+  api.settlementApi.receiverSettlementReport({
+    settlementId: recordForm1.settlementId,
+    companyId: recordForm1.companyId,
+    invoiceParty: recordForm1.invoiceParty,
+    invoiceType: recordForm1.invoiceType,
+    status: recordForm1.status,
+    settlementPerson: recordForm1.settlementPerson,
+    invoiceId: recordForm1.invoiceId,
+    settlementTimeStart: recordForm1.value.settlementTime?.[0],
+    settlementTimeEnd: recordForm1.value.settlementTime?.[1],
+    pages: pages.value,
+    size: size.value,
+    invoiceTypes: ['2', '4']
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData1.value = res.data.records
+      total1.value = res.data.total
+    }
+  })
 }
 const initData3 = (invoiceTypes) => {
-    api.settlementApi.superviseSettlementDetailExcel({
-        invoiceId: recordForm2.invoiceId,
-        companyId: recordForm2.companyId,
-        invoiceParty: recordForm2.invoiceParty,
-        settlementPerson: recordForm2.settlementPerson,
-        status: recordForm2.status,
-        settlementTimeStart: recordForm2.value.settlementTime?.[0],
-        settlementTimeEnd: recordForm2.value.settlementTime?.[1],
-        pages: pages.value,
-        size: size.value,
-        invoiceTypes: invoiceTypes,
-        agreementType: '1'
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData2.value = res.data.records
-            total2.value = res.data.total
-        }
-    })
+  api.settlementApi.superviseSettlementDetailExcel({
+    invoiceId: recordForm2.invoiceId,
+    companyId: recordForm2.companyId,
+    invoiceParty: recordForm2.invoiceParty,
+    settlementPerson: recordForm2.settlementPerson,
+    status: recordForm2.status,
+    settlementTimeStart: recordForm2.value.settlementTime?.[0],
+    settlementTimeEnd: recordForm2.value.settlementTime?.[1],
+    pages: pages.value,
+    size: size.value,
+    invoiceTypes: invoiceTypes,
+    agreementType: '1'
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData2.value = res.data.records
+      total2.value = res.data.total
+    }
+  })
 }
 
 const handleSearch = (type) => {
-    switch (type) {
-        case 1:
-            recordForm.value = {
-                companyId: '',
-                time: [],
-                status: ''
-            }
-            break;
-        case 2:
-            recordForm1.value = {
-                settlementId: '',
-                companyId: '',
-                invoiceParty: '',
-                invoiceType: '',
-                status: '',
-                settlementPerson: '',
-                settlementTime: [],
-                invoiceId: ''
-            }
-            break;
-        case 3:
-            recordForm2.value = {
-                invoiceId: '',
-                companyId: '',
-                invoiceParty: '',
-                settlementPerson: '',
-                settlementTime: [],
-                status: ''
-            }
-            break;
-    }
+  switch (type) {
+    case 1:
+      recordForm.value = {
+        companyId: '',
+        time: [],
+        status: ''
+      }
+      break;
+    case 2:
+      recordForm1.value = {
+        settlementId: '',
+        companyId: '',
+        invoiceParty: '',
+        invoiceType: '',
+        status: '',
+        settlementPerson: '',
+        settlementTime: [],
+        invoiceId: ''
+      }
+      break;
+    case 3:
+      recordForm2.value = {
+        invoiceId: '',
+        companyId: '',
+        invoiceParty: '',
+        settlementPerson: '',
+        settlementTime: [],
+        status: ''
+      }
+      break;
+  }
 }
 const handleReset = (type) => {
 
 }
 const handleExport = () => {
-    api.settlementApi.exportReceiverSettlementReportExcel({
+  api.settlementApi.exportReceiverSettlementReportExcel({
 
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '平台对接人结算报表' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '平台对接人结算报表' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 const handleExport1 = () => {
-    api.financeApi.exportSuperviseExcel({
-        agreementType: '1'
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '平台协议应收明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  api.financeApi.exportSuperviseExcel({
+    agreementType: '1'
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '平台协议应收明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 
 onMounted(() => {
-    initData1();
-    initCompany();
+  initData1();
+  initCompany();
 })
 
 </script>
 
 <style scoped lang="scss">
-.report{
-    height: calc(100vh - 134px);
-    width: calc(100% - 24px);
-    margin: 12px auto;
-    padding: 12px;
-    background: #FFFFFF;
-    overflow-y: auto;
-    .tableBox{
-        height: calc(100% - 150px);
-    }
-    .tableRecord{
-        height: calc(100% - 210px);
-    }
-    .pagination{
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-end;
-    }
-    :deep(.subTable .el-table__header-wrapper) {
-        display: none;
-    }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:deep(.subTable .el-table__header-wrapper) {
+  display: none;
 }
 </style>

src/views/receivable/documentary/documentaryRecord.vue

@@ -1,152 +1,137 @@
 <template>
-    <div class="invoiceRecord">
-        <el-form v-model="form" label-width="80">
-            <el-row :gutter="20">
-                <el-col :span="8">
-                    <el-form-item prop="recordId" label="记录编号">
-                        <el-input v-model="form.recordId"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="companyId" label="保险公司">
-                        <el-select v-model="form.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-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="invoiceParty" label="开票方">
-                        <el-select v-model="form.invoiceParty">
-                            <el-option value="1" label="1"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="accountsReceivable" label="应收项">
-                        <el-select v-model="form.accountsReceivable">
-                            <el-option value="1" label="1"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="settlementStatus" label="结算状态">
-                        <el-select v-model="form.settlementStatus">
-                            <el-option value="1" label="1"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="invoicePerson" label="开票人">
-                        <el-input v-model="form.invoicePerson"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="invoiceDate" label="开票时间">
-                        <el-date-picker
-                            type="daterange"
-                            v-model="form.invoiceDate"
-                            value-format="YYYY-MM-DD HH:mm:ss"
-                            format="YYYY-MM-DD HH:mm:ss"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="16">
-                    <el-button type="primary" @click="search">查询</el-button>
-                    <el-button plain type="primary" @click="reset">重置</el-button>
-                </el-col>
-            </el-row>
-        </el-form>
-        <el-table
-            :data="tableData"
-            style="height: calc(100% - 210px)"
-        >
-            <el-table-column prop="recordId" label="开票记录编号" width="200"></el-table-column>
-            <el-table-column prop="companyId" label="保险公司" width="150">
-                <template #default="scope">
-                    {{ getCompanyName(scope.row) }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
-            <el-table-column prop="accountsReceivable" label="应收项" width="100"></el-table-column>
-            <el-table-column prop="receivableSupervisePremium" label="应收跟单费" width="120"></el-table-column>
-            <el-table-column prop="overinflatedAmount" label="虚增金额" width="120"></el-table-column>
-            <el-table-column prop="taxPoint" label="税点" width="120"></el-table-column>
-            <el-table-column prop="receivableSupervisePremium" label="应收金额" width="120"></el-table-column>
-            <el-table-column prop="settlementStatus" label="结算状态" width="120"></el-table-column>
-            <el-table-column prop="a" label="已结算" width="120"></el-table-column>
-            <el-table-column prop="createBy" label="开票人" width="120"></el-table-column>
-            <el-table-column prop="createTime" label="开票时间" width="150"></el-table-column>
-            <el-table-column label="操作" width="150" fixed="right">
-                <template #default="scope">
-                    <el-button link type="primary" @click="handleCount(scope.row)">结算</el-button>
-                    <el-button link type="primary" @click="handleView(scope.row)">明细查询</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination
-                v-model:current-page="pages"
-                v-model:page-size="size"
-                :page-sizes="[10, 20, 30, 40]"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-            ></el-pagination>
-        </div>
-        <el-dialog
-            v-model="countShow"
-            width="600"
-            title="开票并结算"
-        >
-            <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
-                <el-form-item prop="invoiceParty" label="开票方">
-                    <el-input v-model="countForm.invoiceParty" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="receivableSupervisePremium" label="应收手续费">
-                    <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="overinflatedAmount" label="虚增金额">
-                    <el-input v-model="countForm.overinflatedAmount" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="taxPoint" label="税点">
-                    <el-input v-model="countForm.taxPoint" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="receivableSupervisePremium" label="应收金额">
-                    <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="actualReceivedAmount" label="是实收金额">
-                    <el-input v-model="countForm.actualReceivedAmount" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="receivePaymentDate" label="收款日期">
-                    <el-date-picker
-                        v-model="countForm.receivePaymentDate"
-                        type="daterange"
-                    />
-                </el-form-item>
-                <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
-                    <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
-                        <el-button size="large" icon="Plus" />
-                    </el-upload>
-                    <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
-                        <img :src="item" />
-                        <div class="model">
-                            <span class="icon-view" @click="handelViewImage(item, index)">
-                                <el-icon><View /></el-icon>
-                            </span>
-                            <span class="icon-del" @click="handelDelImage(item, index)">
-                                <el-icon><Delete /></el-icon>
-                            </span>
-                        </div>
-                    </div>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <el-button plain @click="handelCancel">取消</el-button>
-                <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
-            </template>
-        </el-dialog>
+  <PageMain class="vh100">
+    <el-form v-model="form" label-width="80">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item prop="recordId" label="记录编号">
+            <el-input v-model="form.recordId"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="companyId" label="保险公司">
+            <el-select v-model="form.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-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="invoiceParty" label="开票方">
+            <el-select v-model="form.invoiceParty">
+              <el-option value="1" label="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="accountsReceivable" label="应收项">
+            <el-select v-model="form.accountsReceivable">
+              <el-option value="1" label="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="settlementStatus" label="结算状态">
+            <el-select v-model="form.settlementStatus">
+              <el-option value="1" label="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="invoicePerson" label="开票人">
+            <el-input v-model="form.invoicePerson"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="invoiceDate" label="开票时间">
+            <el-date-picker type="daterange" v-model="form.invoiceDate" value-format="YYYY-MM-DD HH:mm:ss"
+              format="YYYY-MM-DD HH:mm:ss" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button plain type="primary" @click="reset">重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData" style="height: calc(100% - 192px)">
+      <el-table-column prop="recordId" label="开票记录编号" width="200"></el-table-column>
+      <el-table-column prop="companyId" label="保险公司" width="150">
+        <template #default="scope">
+          {{ getCompanyName(scope.row) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
+      <el-table-column prop="accountsReceivable" label="应收项" width="100"></el-table-column>
+      <el-table-column prop="receivableSupervisePremium" label="应收跟单费" width="120"></el-table-column>
+      <el-table-column prop="overinflatedAmount" label="虚增金额" width="120"></el-table-column>
+      <el-table-column prop="taxPoint" label="税点" width="120"></el-table-column>
+      <el-table-column prop="receivableSupervisePremium" label="应收金额" width="120"></el-table-column>
+      <el-table-column prop="settlementStatus" label="结算状态" width="120"></el-table-column>
+      <el-table-column prop="a" label="已结算" width="120"></el-table-column>
+      <el-table-column prop="createBy" label="开票人" width="120"></el-table-column>
+      <el-table-column prop="createTime" label="开票时间" width="150"></el-table-column>
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleCount(scope.row)">结算</el-button>
+          <el-button link type="primary" @click="handleView(scope.row)">明细查询</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
     </div>
+    <el-dialog v-model="countShow" width="600" title="开票并结算">
+      <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
+        <el-form-item prop="invoiceParty" label="开票方">
+          <el-input v-model="countForm.invoiceParty" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivableSupervisePremium" label="应收手续费">
+          <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="overinflatedAmount" label="虚增金额">
+          <el-input v-model="countForm.overinflatedAmount" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="taxPoint" label="税点">
+          <el-input v-model="countForm.taxPoint" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivableSupervisePremium" label="应收金额">
+          <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="actualReceivedAmount" label="是实收金额">
+          <el-input v-model="countForm.actualReceivedAmount" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivePaymentDate" label="收款日期">
+          <el-date-picker v-model="countForm.receivePaymentDate" type="daterange" />
+        </el-form-item>
+        <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
+          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
+            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
+            <el-button size="large" icon="Plus" />
+          </el-upload>
+          <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
+            <img :src="item" />
+            <div class="model">
+              <span class="icon-view" @click="handelViewImage(item, index)">
+                <el-icon>
+                  <View />
+                </el-icon>
+              </span>
+              <span class="icon-del" @click="handelDelImage(item, index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </span>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button plain @click="handelCancel">取消</el-button>
+        <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
+      </template>
+    </el-dialog>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -158,181 +143,174 @@ let form = ref({})
 let tableData = ref([{}])
 
 const getCompanyName = (row) => {
-    let company = companyList.value.find(item => item.companyCode === row.companyId)
-    return company?.name || ''
+  let company = companyList.value.find(item => item.companyCode === row.companyId)
+  return company?.name || ''
 }
 
 let pages = ref(1)
 let size = ref(10)
 let total = ref(0)
 const handleSizeChange = (size) => {
-    size.value = size
-    initList()
+  size.value = size
+  initList()
 }
 const handleCurrentChange = (pages) => {
-    pages.value = pages
-    initList()
+  pages.value = pages
+  initList()
 }
 const search = () => {
-    pages.value = 1
-    size.value = 10
-    initList()
+  pages.value = 1
+  size.value = 10
+  initList()
 }
 const reset = () => {
-    form.value = {
-        recordId: '',
-        companyId: '',
-        invoiceParty: '',
-        accountsReceivable: '',
-        settlementStatus: '',
-        invoicePerson: '',
-        invoiceDate: []
-    }
-    pages.value = 1
-    size.value = 10
-    initList()
+  form.value = {
+    recordId: '',
+    companyId: '',
+    invoiceParty: '',
+    accountsReceivable: '',
+    settlementStatus: '',
+    invoicePerson: '',
+    invoiceDate: []
+  }
+  pages.value = 1
+  size.value = 10
+  initList()
 }
 
 let countShow = ref(false)
 let countForm = ref({})
 let countRules = ref({
-    actualReceivedAmount: [{ required: true, trigger: "blur", message: "请输入" }],
-    receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
-    attachmentIds: [{ required: true, message: "请上传" }]
+  actualReceivedAmount: [{ required: true, trigger: "blur", message: "请输入" }],
+  receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
+  attachmentIds: [{ required: true, message: "请上传" }]
 })
 let imageUrl = ref('')
 let attachmentIds = ref([])
 let invoicingId = ref('')
 const handleCount = (row) => {
-    countShow.value = true
-    invoicingId.value = row.id
-    countForm.value = {
-        invoiceParty: row.invoiceParty,
-        receivableSupervisePremium: row.receivableSupervisePremium,
-        overinflatedAmount: row.overinflatedAmount,
-        taxPoint: row.taxPoint,
-    }
+  countShow.value = true
+  invoicingId.value = row.id
+  countForm.value = {
+    invoiceParty: row.invoiceParty,
+    receivableSupervisePremium: row.receivableSupervisePremium,
+    overinflatedAmount: row.overinflatedAmount,
+    taxPoint: row.taxPoint,
+  }
 }
 const uploadImage = async (file) => {
-    let files = file.raw
-    const params = new FormData(); // 声明formData数据类型
-    params.append("file", files);
-    params.append("type", "image");
-    const { code, data, msg } = await api.commonApi.fileUpload(params)
-    if(code == 200) {
-        imageUrl.value.push(data.downloadUrl)
-        attachmentIds.value.push(data.id)
-    }
+  let files = file.raw
+  const params = new FormData(); // 声明formData数据类型
+  params.append("file", files);
+  params.append("type", "image");
+  const { code, data, msg } = await api.commonApi.fileUpload(params)
+  if (code == 200) {
+    imageUrl.value.push(data.downloadUrl)
+    attachmentIds.value.push(data.id)
+  }
 }
 const handleView = () => {
 
 }
 // 列表
 const initList = () => {
-    api.invoiceRecordApi.invoiceRecord({
-        pages: pages.value,
-        size: size.value,
-        invoiceType: '2',
-        ...form.value
-    }).then((res: any) => {
-        if(res.code == 200) {
-            tableData.value = res.data.records
-            total.value = res.data.total
-        }
-    })
+  api.invoiceRecordApi.invoiceRecord({
+    pages: pages.value,
+    size: size.value,
+    invoiceType: '2',
+    ...form.value
+  }).then((res: any) => {
+    if (res.code == 200) {
+      tableData.value = res.data.records
+      total.value = res.data.total
+    }
+  })
 }
 
 // 保险公司
 let companyList = ref([])
 const initCompany = () => {
-    api.insuranceApi.leftList('').then((res: any) => {
-        if(res.code == 200) {
-            companyList.value = res.data
-        }
-    })
+  api.insuranceApi.leftList('').then((res: any) => {
+    if (res.code == 200) {
+      companyList.value = res.data
+    }
+  })
 }
 
 let imageShow = ref(false)
 let bigImageUrl = ref('')
 const handelViewImage = (item, index) => {
-    bigImageUrl.value = item
-    imageShow.value = true
+  bigImageUrl.value = item
+  imageShow.value = true
 }
 const handelDelImage = (item, index) => {
-    imageUrl.value.splice(index, 1)
-    attachmentIds.value.splice(index, 1)
+  imageUrl.value.splice(index, 1)
+  attachmentIds.value.splice(index, 1)
 }
 
 let CountForm = ref()
 const handelComfirm = (CountForm) => {
-    countForm.value.attachmentIds = attachmentIds.value
-    if(!CountForm) return
-    CountForm.validate((valid) => {
-        if(valid) {
-            api.financeApi.settlement({
-                invoicingId: invoicingId.value,
-                actualReceivedAmount: countForm.value.actualReceivedAmount,
-                receivePaymentDate: countForm.value.receivePaymentDate,
-                attachmentIds: countForm.value.attachmentIds
-            }).then((res: any) => {
-                countShow.value = false
-                if(res.code == 200) {
-                    ElMessage({
-                        message: res.msg,
-                        type: 'success'
-                    })
-                } else {
-                    ElMessage({
-                        message: res.msg,
-                        type: 'warning'
-                    })
-                }
-            })
+  countForm.value.attachmentIds = attachmentIds.value
+  if (!CountForm) return
+  CountForm.validate((valid) => {
+    if (valid) {
+      api.financeApi.settlement({
+        invoicingId: invoicingId.value,
+        actualReceivedAmount: countForm.value.actualReceivedAmount,
+        receivePaymentDate: countForm.value.receivePaymentDate,
+        attachmentIds: countForm.value.attachmentIds
+      }).then((res: any) => {
+        countShow.value = false
+        if (res.code == 200) {
+          ElMessage({
+            message: res.msg,
+            type: 'success'
+          })
+        } else {
+          ElMessage({
+            message: res.msg,
+            type: 'warning'
+          })
         }
-    })
+      })
+    }
+  })
 }
 
 const handelCancel = () => {
-    countShow.value = false
-    countForm.value = {
-        invoiceParty: '',
-        receivableSupervisePremium: '',
-        overinflatedAmount: '',
-        taxPoint: '',
-        actualReceivedAmount: '',
-        receivePaymentDate: [],
-        attachmentIds: []
-    }
-    imageUrl.value = []
+  countShow.value = false
+  countForm.value = {
+    invoiceParty: '',
+    receivableSupervisePremium: '',
+    overinflatedAmount: '',
+    taxPoint: '',
+    actualReceivedAmount: '',
+    receivePaymentDate: [],
+    attachmentIds: []
+  }
+  imageUrl.value = []
 }
 
 onMounted(() => {
-    initList();
-    initCompany();
+  initList();
+  initCompany();
 })
 
 </script>
 
 <style scoped lang="scss">
-.invoiceRecord{
-    height: calc(100vh - 134px);
-    width: calc(100% - 24px);
-    margin: 12px auto;
-    padding: 12px;
-    background: #FFFFFF;
-    overflow-y: auto;
-    .pagination{
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-end;
-    }
-    .upload-btn{
-        :deep(.el-button) {
-            width: 80px;
-            height: 80px;
-            font-size: 30px;
-            color: #ccc;
-        }
-    }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.upload-btn {
+  :deep(.el-button) {
+    width: 80px;
+    height: 80px;
+    font-size: 30px;
+    color: #ccc;
+  }
 }
 </style>

src/views/receivable/documentary/documentaryReport.vue

@@ -1,330 +1,288 @@
 <template>
-    <div class="report">
-        <el-tabs v-model="activeName" style="height: 100%" class="demo-tabs" @tab-click="handleClick">
-            <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
-                <el-form v-model="recordForm" label-width="80">
-                    <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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="time" label="时间">
-                                <el-date-picker
-                                    v-model="recordForm.time"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="结算状态">
-                                <el-select v-model="recordForm.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-button type="primary" @click="handleSearch(1)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableBox"
-                    :data="recordData"
-                    row-key="companyId"
-                    :summary-method="getSummaries"
-                    show-summary
-                >
-                    <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
-                    <!--                    <el-table-column type="expand" label="合作保险公司" width="200">
+  <PageMain class="vh100">
+    <el-tabs v-model="activeName" style="height: 100%" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
+        <el-form v-model="recordForm" label-width="80">
+          <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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="time" label="时间">
+                <el-date-picker v-model="recordForm.time" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="结算状态">
+                <el-select v-model="recordForm.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(1)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 100px)" :data="recordData" row-key="companyId" :summary-method="getSummaries" show-summary>
+          <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
+          <!--                    <el-table-column type="expand" label="合作保险公司" width="200">
                                             <template #default>
                                                 展开
                                             </template>
-                                        </el-table-column>-->
-                    <el-table-column prop="totalReceivable" label="累计应收" width="240"></el-table-column>
-                    <el-table-column prop="superviseFee" label="应收跟单费" width="240"></el-table-column>
-                    <el-table-column prop="invoicedAmount" label="已开票" width="200"></el-table-column>
-                    <el-table-column prop="settledAmount" label="已结算" width="200"></el-table-column>
-                    <el-table-column prop="unInvoicedAmount" label="未开票" width="200"></el-table-column>
-                    <el-table-column prop="unSettledAmount" label="未结算" width="200"></el-table-column>
-                    <el-table-column label="操作" fixed="right" width="120">
-                        <template #default="scope">
-                            <el-button link type="primary">查看明细</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="2" label="结算记录">
-                <el-form v-model="recordForm1" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="settlementId" label="结算记录编号">
-                                <el-input v-model="recordForm1.settlementId"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceParty" label="开票方">
-                                <el-select v-model="recordForm1.invoiceParty">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceType" label="应收项">
-                                <el-select v-model="recordForm1.invoiceType">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="结算状态">
-                                <el-select v-model="recordForm1.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementPerson" label="结算人">
-                                <el-input v-model="recordForm1.settlementPerson"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm1.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceId" label="开票记录编号">
-                                <el-input v-model="recordForm1.invoiceId"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch(2)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
-                            <el-button type="primary" @click="handleExport(2)">导出结算记录</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    :data="recordData1"
-                >
-                    <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
-                    <el-table-column prop="invoiceType" label="应收项" width="100"></el-table-column>
-                    <el-table-column prop="taxPoint" label="税点" width="100"></el-table-column>
-                    <el-table-column prop="actualReceivedAmount" label="实收金额" width="100"></el-table-column>
-                    <el-table-column prop="receivePaymentDate" label="收款日期" width="150"></el-table-column>
-                    <el-table-column label="收款凭证" width="100">
-                        <template #default="scope">
-                            <el-button link type="primary" @click="view">查看凭证（1）</el-button>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="createBy" label="结算人" width="100"></el-table-column>
-                    <el-table-column prop="createTime" label="结算时间" width="200"></el-table-column>
-                    <el-table-column prop="invoiceId" label="开票记录编号"></el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total1"
-                        @size-change="handleSizeChange($event, '2')"
-                        @current-change="handleCurrentChange($event, '2')"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
-                <el-form v-model="recordForm2" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceId" label="开票记录编号">
-                                <el-input v-model="recordForm2.invoiceId"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceParty" label="开票方">
-                                <el-select v-model="recordForm2.invoiceParty">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementPerson" label="结算人">
-                                <el-input v-model="recordForm2.settlementPerson"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="状态">
-                                <el-select v-model="recordForm.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="24" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch(3)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
-                            <el-button type="primary" @click="handleExport(3)">导出明细</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    :data="recordData2"
-                >
-                    <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
-                    <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
-                    <el-table-column prop="status" label="状态" width="100"></el-table-column>
-                    <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
-                    <el-table-column prop="productName" label="险种" width="120"></el-table-column>
-                    <el-table-column prop="receivableSuperviseCosts" label="应收跟单费" width="100"></el-table-column>
-                    <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
-                    <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
-                    <el-table-column prop="jqSuperviseCostsProportion" label="交强险跟单费比例" width="100"></el-table-column>
-                    <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
-                    <el-table-column prop="sySuperviseCostsProportion" label="商业险跟单费比例" width="100"></el-table-column>
-                    <el-table-column prop="jqPolicyNo" label="交强险保单号" width="200"></el-table-column>
-                    <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
-                    <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
-                    <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
-                    <el-table-column prop="settlementPerson" label="结算人" width="100"></el-table-column>
-                    <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total2"
-                        @size-change="handleSizeChange($event, '3')"
-                        @current-change="handleCurrentChange($event, '3')"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="4" label="非车结算明细">
-                <el-form v-model="recordForm3" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceId" label="开票记录编号">
-                                <el-input v-model="recordForm3.invoiceId"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceParty" label="开票方">
-                                <el-select v-model="recordForm3.invoiceParty">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementPerson" label="结算人">
-                                <el-input v-model="recordForm3.settlementPerson"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm3.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="状态">
-                                <el-select v-model="recordForm3.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="24" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch(4)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(4)">重置</el-button>
-                            <el-button type="primary" @click="handleExport(4)">导出明细</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    :data="recordData3"
-                >
-                    <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
-                    <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
-                    <el-table-column prop="status" label="状态" width="100"></el-table-column>
-                    <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
-                    <el-table-column prop="productName" label="险种" width="120"></el-table-column>
-                    <el-table-column prop="receivableSuperviseCosts" label="应收跟单费" width="100"></el-table-column>
-                    <el-table-column prop="jyPremium" label="非车险保费" width="100"></el-table-column>
-                    <el-table-column prop="jySuperviseCostsProportion" label="非车险跟单费比例" width="100"></el-table-column>
-                    <el-table-column prop="jyPolicyNo" label="非车险保单号" width="200"></el-table-column>
-                    <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
-                    <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total3"
-                        @size-change="handleSizeChange($event, '4')"
-                        @current-change="handleCurrentChange($event, '4')"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+</el-table-column>-->
+          <el-table-column prop="totalReceivable" label="累计应收" width="240"></el-table-column>
+          <el-table-column prop="superviseFee" label="应收跟单费" width="240"></el-table-column>
+          <el-table-column prop="invoicedAmount" label="已开票" width="200"></el-table-column>
+          <el-table-column prop="settledAmount" label="已结算" width="200"></el-table-column>
+          <el-table-column prop="unInvoicedAmount" label="未开票" width="200"></el-table-column>
+          <el-table-column prop="unSettledAmount" label="未结算" width="200"></el-table-column>
+          <el-table-column label="操作" fixed="right" width="120">
+            <template #default="scope">
+              <el-button link type="primary">查看明细</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="2" label="结算记录">
+        <el-form v-model="recordForm1" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="settlementId" label="结算记录编号">
+                <el-input v-model="recordForm1.settlementId"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceParty" label="开票方">
+                <el-select v-model="recordForm1.invoiceParty">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceType" label="应收项">
+                <el-select v-model="recordForm1.invoiceType">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="结算状态">
+                <el-select v-model="recordForm1.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementPerson" label="结算人">
+                <el-input v-model="recordForm1.settlementPerson"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm1.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceId" label="开票记录编号">
+                <el-input v-model="recordForm1.invoiceId"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" style="display: flex; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(2)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
+              <el-button type="primary" @click="handleExport(2)">导出结算记录</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 192px)" :data="recordData1">
+          <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
+          <el-table-column prop="invoiceType" label="应收项" width="100"></el-table-column>
+          <el-table-column prop="taxPoint" label="税点" width="100"></el-table-column>
+          <el-table-column prop="actualReceivedAmount" label="实收金额" width="100"></el-table-column>
+          <el-table-column prop="receivePaymentDate" label="收款日期" width="150"></el-table-column>
+          <el-table-column label="收款凭证" width="100">
+            <template #default="scope">
+              <el-button link type="primary" @click="view">查看凭证（1）</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createBy" label="结算人" width="100"></el-table-column>
+          <el-table-column prop="createTime" label="结算时间" width="200"></el-table-column>
+          <el-table-column prop="invoiceId" label="开票记录编号"></el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total1"
+            @size-change="handleSizeChange($event, '2')"
+            @current-change="handleCurrentChange($event, '2')"></el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
+        <el-form v-model="recordForm2" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="invoiceId" label="开票记录编号">
+                <el-input v-model="recordForm2.invoiceId"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceParty" label="开票方">
+                <el-select v-model="recordForm2.invoiceParty">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementPerson" label="结算人">
+                <el-input v-model="recordForm2.settlementPerson"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="状态">
+                <el-select v-model="recordForm.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(3)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
+              <el-button type="primary" @click="handleExport(3)">导出明细</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 192px)" :data="recordData2">
+          <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
+          <el-table-column prop="status" label="状态" width="100"></el-table-column>
+          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
+          <el-table-column prop="productName" label="险种" width="120"></el-table-column>
+          <el-table-column prop="receivableSuperviseCosts" label="应收跟单费" width="100"></el-table-column>
+          <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
+          <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
+          <el-table-column prop="jqSuperviseCostsProportion" label="交强险跟单费比例" width="100"></el-table-column>
+          <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
+          <el-table-column prop="sySuperviseCostsProportion" label="商业险跟单费比例" width="100"></el-table-column>
+          <el-table-column prop="jqPolicyNo" label="交强险保单号" width="200"></el-table-column>
+          <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
+          <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
+          <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
+          <el-table-column prop="settlementPerson" label="结算人" width="100"></el-table-column>
+          <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total2"
+            @size-change="handleSizeChange($event, '3')"
+            @current-change="handleCurrentChange($event, '3')"></el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="4" label="非车结算明细">
+        <el-form v-model="recordForm3" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="invoiceId" label="开票记录编号">
+                <el-input v-model="recordForm3.invoiceId"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceParty" label="开票方">
+                <el-select v-model="recordForm3.invoiceParty">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementPerson" label="结算人">
+                <el-input v-model="recordForm3.settlementPerson"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm3.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="状态">
+                <el-select v-model="recordForm3.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(4)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(4)">重置</el-button>
+              <el-button type="primary" @click="handleExport(4)">导出明细</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 192px)" :data="recordData3">
+          <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
+          <el-table-column prop="status" label="状态" width="100"></el-table-column>
+          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
+          <el-table-column prop="productName" label="险种" width="120"></el-table-column>
+          <el-table-column prop="receivableSuperviseCosts" label="应收跟单费" width="100"></el-table-column>
+          <el-table-column prop="jyPremium" label="非车险保费" width="100"></el-table-column>
+          <el-table-column prop="jySuperviseCostsProportion" label="非车险跟单费比例" width="100"></el-table-column>
+          <el-table-column prop="jyPolicyNo" label="非车险保单号" width="200"></el-table-column>
+          <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
+          <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total3"
+            @size-change="handleSizeChange($event, '4')"
+            @current-change="handleCurrentChange($event, '4')"></el-pagination>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -332,32 +290,32 @@ import api from '@/api'
 
 let activeName = ref('1')
 const handleClick = (e) => {
-    pages.value = 1
-    size.value = 10
-    switch (e.props.name) {
-        case '1':
-            initData1()
-            break;
-        case '2':
-            initData2()
-            break;
-        case '3':
-            initData3(['1'])
-            break;
-        case '4':
-            initData3(['3'])
-            break;
-    }
+  pages.value = 1
+  size.value = 10
+  switch (e.props.name) {
+    case '1':
+      initData1()
+      break;
+    case '2':
+      initData2()
+      break;
+    case '3':
+      initData3(['1'])
+      break;
+    case '4':
+      initData3(['3'])
+      break;
+  }
 }
 
 // 保险公司
 let companyList = ref([])
 const initCompany = () => {
-    api.insuranceApi.leftList('').then((res: any) => {
-        if(res.code == 200) {
-            companyList.value = res.data
-        }
-    })
+  api.insuranceApi.leftList('').then((res: any) => {
+    if (res.code == 200) {
+      companyList.value = res.data
+    }
+  })
 }
 
 // 分页
@@ -368,62 +326,62 @@ let total1 = ref(0)
 let total2 = ref(0)
 let total3 = ref(0)
 const handleSizeChange = (size, type) => {
-    size.value = size
-    switch (type) {
-        case 2:
-            initData2()
-            break;
-        case 3:
-            initData3('2')
-            break;
-        case 4:
-            initData3('4')
-            break;
-    }
+  size.value = size
+  switch (type) {
+    case 2:
+      initData2()
+      break;
+    case 3:
+      initData3('2')
+      break;
+    case 4:
+      initData3('4')
+      break;
+  }
 }
 const handleCurrentChange = (pages, type) => {
-    pages.value = pages
-    switch (type) {
-        case 2:
-            initData2()
-            break;
-        case 3:
-            initData3('2')
-            break;
-        case 4:
-            initData3('4')
-            break;
-    }
+  pages.value = pages
+  switch (type) {
+    case 2:
+      initData2()
+      break;
+    case 3:
+      initData3('2')
+      break;
+    case 4:
+      initData3('4')
+      break;
+  }
 }
 
 const getSummaries = (param) => {
-    const { columns, data } = param
-    const sums: (string | VNode)[] = []
-    columns.forEach((column, index) => {
-        if (index === 0) {
-            sums[index] = h('div', [
-                '',
-            ])
-            return
-        }
-        const values = data.map((item) => Number(item[column.property]))
-        if (!values.every((value) => Number.isNaN(value))) {
-            sums[index] = ` ${values.reduce((prev, curr) => {
-                const value = Number(curr)
-                if (!Number.isNaN(value)) {
-                    return prev + curr
-                } else {
-                    return prev
-                }
-            }, 0)}`
+  const { columns, data } = param
+  const sums: (string | VNode)[] = []
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = h('div', [
+        '',
+      ])
+      return
+    }
+    const values = data.map((item) => Number(item[column.property]))
+    if (!values.every((value) => Number.isNaN(value))) {
+      sums[index] = ` ${values.reduce((prev, curr) => {
+        const value = Number(curr)
+        if (!Number.isNaN(value)) {
+          return prev + curr
         } else {
-            if(index > 2) {
-                sums[index - 1] = '0'
-            }
+          return prev
         }
-    })
+      }, 0)}`
+    } else {
+      if (index > 2) {
+        sums[index - 1] = '0'
+      }
+    }
+  })
 
-    return sums
+  return sums
 }
 
 // 结算记录
@@ -440,246 +398,233 @@ const view = (scope) => {
 }
 
 const initData1 = () => {
-    api.settlementApi.companySuperviseSettlementReport({
-        companyId: recordForm.value.companyId,
-        startTime: recordForm.value.time?.[0],
-        endTime: recordForm.value.time?.[1],
-        status: recordForm.value.status,
-        invoiceTypes: ['2','4'],
-        agreementType: '2'
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData.value = res.data
-        }
-    })
+  api.settlementApi.companySuperviseSettlementReport({
+    companyId: recordForm.value.companyId,
+    startTime: recordForm.value.time?.[0],
+    endTime: recordForm.value.time?.[1],
+    status: recordForm.value.status,
+    invoiceTypes: ['2', '4'],
+    agreementType: '2'
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData.value = res.data
+    }
+  })
 }
 const initData2 = () => {
-    api.settlementApi.superviseSettlementExcel({
-        agreementType: '2',
-        settlementId: recordForm1.settlementId,
-        companyId: recordForm1.companyId,
-        invoiceParty: recordForm1.invoiceParty,
-        invoiceType: recordForm1.invoiceType,
-        status: recordForm1.status,
-        settlementPerson: recordForm1.settlementPerson,
-        invoiceId: recordForm1.invoiceId,
-        settlementTimeStart: recordForm1.value.settlementTime?.[0],
-        settlementTimeEnd: recordForm1.value.settlementTime?.[1],
-        pages: pages.value,
-        size: size.value,
-        invoiceTypes: ['2','4']
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData1.value = res.data.records
-            total1.value = res.data.total
-        }
-    })
+  api.settlementApi.superviseSettlementExcel({
+    agreementType: '2',
+    settlementId: recordForm1.settlementId,
+    companyId: recordForm1.companyId,
+    invoiceParty: recordForm1.invoiceParty,
+    invoiceType: recordForm1.invoiceType,
+    status: recordForm1.status,
+    settlementPerson: recordForm1.settlementPerson,
+    invoiceId: recordForm1.invoiceId,
+    settlementTimeStart: recordForm1.value.settlementTime?.[0],
+    settlementTimeEnd: recordForm1.value.settlementTime?.[1],
+    pages: pages.value,
+    size: size.value,
+    invoiceTypes: ['2', '4']
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData1.value = res.data.records
+      total1.value = res.data.total
+    }
+  })
 }
 const initData3 = (invoiceTypes) => {
-    let params = invoiceTypes.includes('2')?
-        {
-            invoiceId: recordForm2.invoiceId,
-            companyId: recordForm2.companyId,
-            invoiceParty: recordForm2.invoiceParty,
-            settlementPerson: recordForm2.settlementPerson,
-            status: recordForm2.status,
-            settlementTimeStart: recordForm2.value.settlementTime?.[0],
-            settlementTimeEnd: recordForm2.value.settlementTime?.[1],
-            pages: pages.value,
-            size: size.value,
-            invoiceTypes: invoiceTypes
-        }:
-        invoiceTypes.includes('4')?
-            {
-                invoiceId: recordForm3.invoiceId,
-                companyId: recordForm3.companyId,
-                invoiceParty: recordForm3.invoiceParty,
-                settlementPerson: recordForm3.settlementPerson,
-                status: recordForm3.status,
-                settlementTimeStart: recordForm3.value.settlementTime?.[0],
-                settlementTimeEnd: recordForm3.value.settlementTime?.[1],
-                pages: pages.value,
-                size: size.value,
-                invoiceTypes: invoiceTypes
-            }:
-            {}
-    api.settlementApi.superviseSettlementDetailExcel({
-        ...params
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData2.value = res.data.records
-            recordData3.value = res.data.records
-            total2.value = res.data.total
-        }
-    })
+  let params = invoiceTypes.includes('2') ?
+    {
+      invoiceId: recordForm2.invoiceId,
+      companyId: recordForm2.companyId,
+      invoiceParty: recordForm2.invoiceParty,
+      settlementPerson: recordForm2.settlementPerson,
+      status: recordForm2.status,
+      settlementTimeStart: recordForm2.value.settlementTime?.[0],
+      settlementTimeEnd: recordForm2.value.settlementTime?.[1],
+      pages: pages.value,
+      size: size.value,
+      invoiceTypes: invoiceTypes
+    } :
+    invoiceTypes.includes('4') ?
+      {
+        invoiceId: recordForm3.invoiceId,
+        companyId: recordForm3.companyId,
+        invoiceParty: recordForm3.invoiceParty,
+        settlementPerson: recordForm3.settlementPerson,
+        status: recordForm3.status,
+        settlementTimeStart: recordForm3.value.settlementTime?.[0],
+        settlementTimeEnd: recordForm3.value.settlementTime?.[1],
+        pages: pages.value,
+        size: size.value,
+        invoiceTypes: invoiceTypes
+      } :
+      {}
+  api.settlementApi.superviseSettlementDetailExcel({
+    ...params
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData2.value = res.data.records
+      recordData3.value = res.data.records
+      total2.value = res.data.total
+    }
+  })
 }
 
 const handleSearch = (type) => {
-    pages.value = 1
-    size.value = 10
-    switch (type) {
-        case 1:
-            initData1()
-            break;
-        case 2:
-            initData2()
-            break;
-        case 3:
-            initData3('2')
-            break;
-        case 4:
-            initData3('4')
-            break;
-    }
+  pages.value = 1
+  size.value = 10
+  switch (type) {
+    case 1:
+      initData1()
+      break;
+    case 2:
+      initData2()
+      break;
+    case 3:
+      initData3('2')
+      break;
+    case 4:
+      initData3('4')
+      break;
+  }
 }
 const handleReset = (type) => {
-    switch (type) {
-        case 1:
-            recordForm.value = {
-                companyId: '',
-                time: [],
-                status: ''
-            }
-            break;
-        case 2:
-            recordForm1.value = {
-                settlementId: '',
-                companyId: '',
-                invoiceParty: '',
-                invoiceType: '',
-                status: '',
-                settlementPerson: '',
-                settlementTime: [],
-                invoiceId: ''
-            }
-            break;
-        case 3:
-            recordForm2.value = {
-                invoiceId: '',
-                companyId: '',
-                invoiceParty: '',
-                settlementPerson: '',
-                settlementTime: [],
-                status: ''
-            }
-            break;
-        case 4:
-            recordForm3.value = {
-                invoiceId: '',
-                companyId: '',
-                invoiceParty: '',
-                settlementPerson: '',
-                settlementTime: [],
-                status: ''
-            }
-            break;
-    }
+  switch (type) {
+    case 1:
+      recordForm.value = {
+        companyId: '',
+        time: [],
+        status: ''
+      }
+      break;
+    case 2:
+      recordForm1.value = {
+        settlementId: '',
+        companyId: '',
+        invoiceParty: '',
+        invoiceType: '',
+        status: '',
+        settlementPerson: '',
+        settlementTime: [],
+        invoiceId: ''
+      }
+      break;
+    case 3:
+      recordForm2.value = {
+        invoiceId: '',
+        companyId: '',
+        invoiceParty: '',
+        settlementPerson: '',
+        settlementTime: [],
+        status: ''
+      }
+      break;
+    case 4:
+      recordForm3.value = {
+        invoiceId: '',
+        companyId: '',
+        invoiceParty: '',
+        settlementPerson: '',
+        settlementTime: [],
+        status: ''
+      }
+      break;
+  }
 }
 
 const handleExport = (type) => {
-    switch (type) {
-        case 2:
-            exportOtherSettlementExcel()
-            break;
-        case 3:
-            exportOtherSettlementDetailExcel()
-            break;
-        case 4:
-            exportOtherSettlementDetailJyExcel()
-            break;
-    }
+  switch (type) {
+    case 2:
+      exportOtherSettlementExcel()
+      break;
+    case 3:
+      exportOtherSettlementDetailExcel()
+      break;
+    case 4:
+      exportOtherSettlementDetailJyExcel()
+      break;
+  }
 }
 
 const exportOtherSettlementExcel = () => {
-    api.settlementApi.exportOtherSettlementExcel({
+  api.settlementApi.exportOtherSettlementExcel({
 
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 const exportOtherSettlementDetailExcel = () => {
-    api.settlementApi.exportOtherSettlementDetailExcel({
+  api.settlementApi.exportOtherSettlementDetailExcel({
 
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 const exportOtherSettlementDetailJyExcel = () => {
-    api.settlementApi.exportOtherSettlementDetailJyExcel({
+  api.settlementApi.exportOtherSettlementDetailJyExcel({
 
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 
 
 onMounted(() => {
-    initData1();
-    initCompany();
+  initData1();
+  initCompany();
 })
 
 </script>
 
 <style scoped lang="scss">
-.report{
-    height: calc(100vh - 134px);
-    width: calc(100% - 24px);
-    margin: 12px auto;
-    padding: 12px;
-    background: #FFFFFF;
-    overflow-y: auto;
-    .tableBox{
-        height: calc(100% - 150px);
-    }
-    .tableRecord{
-        height: calc(100% - 210px);
-    }
-    .pagination{
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-end;
-    }
-    :deep(.subTable .el-table__header-wrapper) {
-        display: none;
-    }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:deep(.subTable .el-table__header-wrapper) {
+  display: none;
 }
 </style>

src/views/receivable/handingFee/invoiceRecord.vue

@@ -1,162 +1,143 @@
 <template>
-    <div class="invoiceRecord">
-        <el-form v-model="form" label-width="80">
-            <el-row :gutter="20">
-                <el-col :span="8">
-                    <el-form-item prop="recordId" label="记录编号">
-                        <el-input v-model="form.recordId"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="companyId" label="保险公司">
-                        <el-select v-model="form.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-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="invoiceParty" label="开票方">
-                        <el-select v-model="form.invoiceParty">
-                            <el-option value="1" label="1"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="accountsReceivable" label="应收项">
-                        <el-select v-model="form.accountsReceivable">
-                            <el-option value="1" label="1"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="settlementStatus" label="结算状态">
-                        <el-select v-model="form.settlementStatus">
-                            <el-option value="1" label="1"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="invoicePerson" label="开票人">
-                        <el-input v-model="form.invoicePerson"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item prop="invoiceDate" label="开票时间">
-                        <el-date-picker
-                            type="daterange"
-                            v-model="form.invoiceDate"
-                            value-format="YYYY-MM-DD HH:mm:ss"
-                            format="YYYY-MM-DD HH:mm:ss"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="16">
-                    <el-button type="primary" @click="search">查询</el-button>
-                    <el-button plain type="primary" @click="reset">重置</el-button>
-                </el-col>
-            </el-row>
-        </el-form>
-        <el-table
-            :data="tableData"
-            style="height: calc(100% - 210px)"
-        >
-            <el-table-column prop="id" label="开票记录编号" width="200"></el-table-column>
-            <el-table-column prop="companyId" label="保险公司" width="150">
-                <template #default="scope">
-                    {{ getCompanyName(scope.row) }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
-            <el-table-column prop="accountsReceivable" label="应收项" width="100"></el-table-column>
-            <el-table-column prop="receivableSupervisePremium" label="应收手续费" width="120"></el-table-column>
-            <el-table-column prop="overinflatedAmount" label="虚增金额" width="120"></el-table-column>
-            <el-table-column prop="taxPoint" label="税点" width="120"></el-table-column>
-            <el-table-column prop="actualReceivedAmount" label="开票金额" width="120"></el-table-column>
-            <el-table-column prop="receivableSupervisePremium" label="应收金额" width="120"></el-table-column>
-            <el-table-column prop="settlementStatus" label="结算状态" width="120"></el-table-column>
-            <el-table-column prop="a" label="已结算" width="120"></el-table-column>
-            <el-table-column prop="createBy" label="开票人" width="120"></el-table-column>
-            <el-table-column prop="createTime" label="开票时间" width="150"></el-table-column>
-            <el-table-column label="操作" width="150" fixed="right">
-                <template #default="scope">
-                    <el-button link type="primary" @click="handleCount(scope.row)">结算</el-button>
-                    <el-button link type="primary" @click="handleView(scope.row)">明细查询</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination
-                v-model:current-page="pages"
-                v-model:page-size="size"
-                :page-sizes="[10, 20, 30, 40]"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-            ></el-pagination>
-        </div>
-        <el-dialog
-            v-model="countShow"
-            width="600"
-            title="开票并结算"
-        >
-            <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
-                <el-form-item prop="invoiceParty" label="开票方">
-                    <el-input v-model="countForm.invoiceParty" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="receivableSupervisePremium" label="应收手续费">
-                    <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="overinflatedAmount" label="虚增金额">
-                    <el-input v-model="countForm.overinflatedAmount" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="taxPoint" label="税点">
-                    <el-input v-model="countForm.taxPoint" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="receivableSupervisePremium" label="应收金额">
-                    <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="actualReceivedAmount" label="是实收金额">
-                    <el-input v-model="countForm.actualReceivedAmount" placeholder="请输入"></el-input>
-                </el-form-item>
-                <el-form-item prop="receivePaymentDate" label="收款日期">
-                    <el-date-picker
-                        v-model="countForm.receivePaymentDate"
-                        type="datetime"
-                        value-format="YYYY-MM-DD HH:mm:ss"
-                        format="YYYY-MM-DD HH:mm:ss"
-                    />
-                </el-form-item>
-                <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
-                    <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
-                        <el-button size="large" icon="Plus" />
-                    </el-upload>
-                    <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
-                        <img :src="item" />
-                        <div class="model">
-                            <span class="icon-view" @click="handelViewImage(item, index)">
-                                <el-icon><View /></el-icon>
-                            </span>
-                            <span class="icon-del" @click="handelDelImage(item, index)">
-                                <el-icon><Delete /></el-icon>
-                            </span>
-                        </div>
-                    </div>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <el-button plain @click="handelCancel">取消</el-button>
-                <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
-            </template>
-        </el-dialog>
-        <el-dialog
-            v-model="imageShow"
-            width="400"
-            title="查看"
-        >
-            <img class="bigImage" :src="bigImageUrl">
-        </el-dialog>
+  <PageMain class="vh100">
+    <el-form v-model="form" label-width="80">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item prop="recordId" label="记录编号">
+            <el-input v-model="form.recordId"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="companyId" label="保险公司">
+            <el-select v-model="form.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-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="invoiceParty" label="开票方">
+            <el-select v-model="form.invoiceParty">
+              <el-option value="1" label="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="accountsReceivable" label="应收项">
+            <el-select v-model="form.accountsReceivable">
+              <el-option value="1" label="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="settlementStatus" label="结算状态">
+            <el-select v-model="form.settlementStatus">
+              <el-option value="1" label="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="invoicePerson" label="开票人">
+            <el-input v-model="form.invoicePerson"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="invoiceDate" label="开票时间">
+            <el-date-picker type="daterange" v-model="form.invoiceDate" value-format="YYYY-MM-DD HH:mm:ss"
+              format="YYYY-MM-DD HH:mm:ss" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8"></el-col>
+        <el-col :span="8" style="display: flex; align-items: start; justify-content: flex-end">
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button plain type="primary" @click="reset">重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData" height="calc(100% - 192px)">
+      <el-table-column prop="id" label="开票记录编号" width="200"></el-table-column>
+      <el-table-column prop="companyId" label="保险公司" width="150">
+        <template #default="scope">
+          {{ getCompanyName(scope.row) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
+      <el-table-column prop="accountsReceivable" label="应收项" width="100"></el-table-column>
+      <el-table-column prop="receivableSupervisePremium" label="应收手续费" width="120"></el-table-column>
+      <el-table-column prop="overinflatedAmount" label="虚增金额" width="120"></el-table-column>
+      <el-table-column prop="taxPoint" label="税点" width="120"></el-table-column>
+      <el-table-column prop="actualReceivedAmount" label="开票金额" width="120"></el-table-column>
+      <el-table-column prop="receivableSupervisePremium" label="应收金额" width="120"></el-table-column>
+      <el-table-column prop="settlementStatus" label="结算状态" width="120"></el-table-column>
+      <el-table-column prop="a" label="已结算" width="120"></el-table-column>
+      <el-table-column prop="createBy" label="开票人" width="120"></el-table-column>
+      <el-table-column prop="createTime" label="开票时间" width="150"></el-table-column>
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleCount(scope.row)">结算</el-button>
+          <el-button link type="primary" @click="handleView(scope.row)">明细查询</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
     </div>
+    <el-dialog v-model="countShow" width="600" title="开票并结算">
+      <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
+        <el-form-item prop="invoiceParty" label="开票方">
+          <el-input v-model="countForm.invoiceParty" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivableSupervisePremium" label="应收手续费">
+          <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="overinflatedAmount" label="虚增金额">
+          <el-input v-model="countForm.overinflatedAmount" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="taxPoint" label="税点">
+          <el-input v-model="countForm.taxPoint" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivableSupervisePremium" label="应收金额">
+          <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="actualReceivedAmount" label="是实收金额">
+          <el-input v-model="countForm.actualReceivedAmount" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivePaymentDate" label="收款日期">
+          <el-date-picker v-model="countForm.receivePaymentDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss" />
+        </el-form-item>
+        <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
+          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
+            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
+            <el-button size="large" icon="Plus" />
+          </el-upload>
+          <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
+            <img :src="item" />
+            <div class="model">
+              <span class="icon-view" @click="handelViewImage(item, index)">
+                <el-icon>
+                  <View />
+                </el-icon>
+              </span>
+              <span class="icon-del" @click="handelDelImage(item, index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </span>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button plain @click="handelCancel">取消</el-button>
+        <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="imageShow" width="400" title="查看">
+      <img class="bigImage" :src="bigImageUrl">
+    </el-dialog>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -168,71 +149,71 @@ let form = ref({})
 let tableData = ref([])
 
 const getCompanyName = (row) => {
-    let company = companyList.value.find(item => item.id === row.companyId)
-    return company?.nameSimple || ''
+  let company = companyList.value.find(item => item.id === row.companyId)
+  return company?.nameSimple || ''
 }
 
 let pages = ref(1)
 let size = ref(10)
 let total = ref(0)
 const handleSizeChange = (size) => {
-    size.value = size
-    initList()
+  size.value = size
+  initList()
 }
 const handleCurrentChange = (pages) => {
-    pages.value = pages
-    initList()
+  pages.value = pages
+  initList()
 }
 const search = () => {
-    pages.value = 1
-    size.value = 10
-    initList()
+  pages.value = 1
+  size.value = 10
+  initList()
 }
 const reset = () => {
-    form.value = {
-        recordId: '',
-        companyId: '',
-        invoiceParty: '',
-        accountsReceivable: '',
-        settlementStatus: '',
-        invoicePerson: '',
-        invoiceDate: []
-    }
-    pages.value = 1
-    size.value = 10
-    initList()
+  form.value = {
+    recordId: '',
+    companyId: '',
+    invoiceParty: '',
+    accountsReceivable: '',
+    settlementStatus: '',
+    invoicePerson: '',
+    invoiceDate: []
+  }
+  pages.value = 1
+  size.value = 10
+  initList()
 }
 
 let countShow = ref(false)
 let countForm = ref({})
 let countRules = ref({
-    actualReceivedAmount: [{ required: true, trigger: "blur", message: "请输入" }],
-    receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
-    attachmentIds: [{ required: true, message: "请上传" }]
+  actualReceivedAmount: [{ required: true, trigger: "blur", message: "请输入" }],
+  receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
+  attachmentIds: [{ required: true, message: "请上传" }]
 })
 let imageUrl = ref([])
 let attachmentIds = ref([])
 let invoicingId = ref('')
 const handleCount = (row) => {
-    countShow.value = true
-    invoicingId.value = row.id
-    countForm.value = {
-        invoiceParty: row.invoiceParty,
-        receivableSupervisePremium: row.receivableSupervisePremium,
-        overinflatedAmount: row.overinflatedAmount,
-        taxPoint: row.taxPoint,
-    }
+  countShow.value = true
+  invoicingId.value = row.id
+  countForm.value = {
+    invoiceParty: row.invoiceParty,
+    receivableSupervisePremium: row.receivableSupervisePremium,
+    overinflatedAmount: row.overinflatedAmount,
+    taxPoint: row.taxPoint,
+  }
 }
 const uploadImage = async (file, fileList) => {
-    let files = file.raw
-    const params = new FormData(); // 声明formData数据类型
-    params.append("file", files);
-    params.append("type", "image");
-    const { code, data, msg } = await api.commonApi.fileUpload(params)
-    if(code == 200) {
-        imageUrl.value.push(data.downloadUrl)
-        attachmentIds.value.push(data.id)
-    }
+  let files = file.raw
+  const params = new FormData(); // 声明formData数据类型
+  params.append("file", files);
+  params.append("type", "image");
+  const { code, data, msg } = await api.commonApi.fileUpload(params)
+  if (code == 200) {
+    imageUrl.value.push(data.downloadUrl)
+    attachmentIds.value.push(data.id)
+  }
 }
 const handleView = () => {
 
@@ -240,149 +221,149 @@ const handleView = () => {
 
 // 列表
 const initList = () => {
-    api.invoiceRecordApi.invoiceRecord({
-        pages: pages.value,
-        size: size.value,
-        invoiceType: '1',
-        ...form.value
-    }).then((res: any) => {
-        if(res.code == 200) {
-            tableData.value = res.data.records
-            total.value = res.data.total
-        }
-    })
+  api.invoiceRecordApi.invoiceRecord({
+    pages: pages.value,
+    size: size.value,
+    invoiceType: '1',
+    ...form.value
+  }).then((res: any) => {
+    if (res.code == 200) {
+      tableData.value = res.data.records
+      total.value = res.data.total
+    }
+  })
 }
 
 // 保险公司
 let companyList = ref([])
 const initCompany = () => {
-    api.insuranceApi.leftList('').then((res: any) => {
-        if(res.code == 200) {
-            companyList.value = res.data
-        }
-    })
+  api.insuranceApi.leftList('').then((res: any) => {
+    if (res.code == 200) {
+      companyList.value = res.data
+    }
+  })
 }
 
 let imageShow = ref(false)
 let bigImageUrl = ref('')
 const handelViewImage = (item, index) => {
-    bigImageUrl.value = item
-    imageShow.value = true
+  bigImageUrl.value = item
+  imageShow.value = true
 }
 const handelDelImage = (item, index) => {
-    imageUrl.value.splice(index, 1)
-    attachmentIds.value.splice(index, 1)
+  imageUrl.value.splice(index, 1)
+  attachmentIds.value.splice(index, 1)
 }
 
 let CountForm = ref()
 const handelComfirm = (CountForm) => {
-    countForm.value.attachmentIds = attachmentIds.value
-    if(!CountForm) return
-    CountForm.validate((valid) => {
-        if(valid) {
-            api.financeApi.settlement({
-                invoicingId: invoicingId.value,
-                actualReceivedAmount: countForm.value.actualReceivedAmount,
-                receivePaymentDate: countForm.value.receivePaymentDate,
-                attachmentIds: countForm.value.attachmentIds
-            }).then((res: any) => {
-                countShow.value = false
-                if(res.code == 200) {
-                    ElMessage({
-                        message: res.msg,
-                        type: 'success'
-                    })
-                } else {
-                    ElMessage({
-                        message: res.msg,
-                        type: 'warning'
-                    })
-                }
-            })
+  countForm.value.attachmentIds = attachmentIds.value
+  if (!CountForm) return
+  CountForm.validate((valid) => {
+    if (valid) {
+      api.financeApi.settlement({
+        invoicingId: invoicingId.value,
+        actualReceivedAmount: countForm.value.actualReceivedAmount,
+        receivePaymentDate: countForm.value.receivePaymentDate,
+        attachmentIds: countForm.value.attachmentIds
+      }).then((res: any) => {
+        countShow.value = false
+        if (res.code == 200) {
+          ElMessage({
+            message: res.msg,
+            type: 'success'
+          })
+        } else {
+          ElMessage({
+            message: res.msg,
+            type: 'warning'
+          })
         }
-    })
+      })
+    }
+  })
 }
 
 const handelCancel = () => {
-    countShow.value = false
-    countForm.value = {
-        invoiceParty: '',
-        receivableSupervisePremium: '',
-        overinflatedAmount: '',
-        taxPoint: '',
-        actualReceivedAmount: '',
-        receivePaymentDate: [],
-        attachmentIds: []
-    }
-    imageUrl.value = []
+  countShow.value = false
+  countForm.value = {
+    invoiceParty: '',
+    receivableSupervisePremium: '',
+    overinflatedAmount: '',
+    taxPoint: '',
+    actualReceivedAmount: '',
+    receivePaymentDate: [],
+    attachmentIds: []
+  }
+  imageUrl.value = []
 }
 
 onMounted(() => {
-    initList();
-    initCompany();
+  initList();
+  initCompany();
 })
 
 </script>
 
 <style scoped lang="scss">
-    .invoiceRecord{
-        height: calc(100vh - 134px);
-        width: calc(100% - 24px);
-        margin: 12px auto;
-        padding: 12px;
-        background: #FFFFFF;
-        overflow-y: auto;
-        .pagination{
-            margin-top: 20px;
-            display: flex;
-            justify-content: flex-end;
-        }
-        .upload-btn{
-            :deep(.el-button) {
-                width: 80px;
-                height: 80px;
-                font-size: 30px;
-                color: #ccc;
-            }
-        }
-        .imageDiv{
-            position: relative;
-            width: 80px;
-            height: 80px;
-            margin: 0 10px 10px 0;
-            &:hover{
-                .model{
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background-color: rgba(0, 0, 0, .3);
-                }
-            }
-            img{
-                display: block;
-                width: 100%;
-                height: 100%;
-                border-radius: 4px;
-            }
-            .model{
-                position: absolute;
-                width: 80px;
-                height: 80px;
-                border-radius: 4px;
-                display: none;
-                top: 0;
-                left: 0;
-                .icon-view, .icon-del{
-                    color: #FFFFFF;
-                    margin: 0 10px;
-                    cursor: pointer;
-                }
-            }
-        }
-        .bigImage{
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.upload-btn {
+  :deep(.el-button) {
+    width: 80px;
+    height: 80px;
+    font-size: 30px;
+    color: #ccc;
+  }
+}
+
+.imageDiv {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 10px 10px 0;
+
+  &:hover {
+    .model {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, .3);
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .model {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    border-radius: 4px;
+    display: none;
+    top: 0;
+    left: 0;
+
+    .icon-view,
+    .icon-del {
+      color: #FFFFFF;
+      margin: 0 10px;
+      cursor: pointer;
     }
+  }
+}
+
+.bigImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/receivable/handingFee/report.vue

@@ -1,331 +1,289 @@
 <template>
-    <div class="report">
-        <el-tabs v-model="activeName" style="height: 100%" class="demo-tabs" @tab-click="handleClick">
-            <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
-                <el-form v-model="recordForm" label-width="80">
-                    <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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="time" label="时间">
-                                <el-date-picker
-                                    v-model="recordForm.time"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="结算状态">
-                                <el-select v-model="recordForm.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-button type="primary" @click="handleSearch(1)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableBox"
-                    :data="recordData"
-                    row-key="companyId"
-                    :summary-method="getSummaries"
-                    show-summary
-                >
-                    <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
-<!--                    <el-table-column type="expand" label="合作保险公司" width="200">
+  <PageMain class="vh100">
+    <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="handleClick">
+      <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
+        <el-form v-model="recordForm" label-width="80">
+          <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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="time" label="时间">
+                <el-date-picker v-model="recordForm.time" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="结算状态">
+                <el-select v-model="recordForm.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(1)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 100px)" :data="recordData" row-key="companyId" :summary-method="getSummaries" show-summary>
+          <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
+          <!--                    <el-table-column type="expand" label="合作保险公司" width="200">
                         <template #default>
                             展开
                         </template>
-                    </el-table-column>-->
-                    <el-table-column prop="totalReceivable" label="应收金额" width="240"></el-table-column>
-                    <el-table-column prop="superviseFee" label="应收手续费" width="240"></el-table-column>
-                    <el-table-column prop="invoicedAmount" label="已开票" width="200"></el-table-column>
-                    <el-table-column prop="settledAmount" label="已结算" width="200"></el-table-column>
-                    <el-table-column prop="unInvoicedAmount" label="未开票" width="200"></el-table-column>
-                    <el-table-column prop="unSettledAmount" label="未结算" width="200"></el-table-column>
-                    <el-table-column label="操作" fixed="right" width="120">
-                        <template #default="scope">
-                            <el-button link type="primary">查看明细</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="2" label="结算记录">
-                <el-form v-model="recordForm1" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="settlementId" label="结算记录编号">
-                                <el-input v-model="recordForm1.settlementId"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceParty" label="开票方">
-                                <el-select v-model="recordForm1.invoiceParty">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceType" label="应收项">
-                                <el-select v-model="recordForm1.invoiceType">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="结算状态">
-                                <el-select v-model="recordForm1.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementPerson" label="结算人">
-                                <el-input v-model="recordForm1.settlementPerson"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm1.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceId" label="开票记录编号">
-                                <el-input v-model="recordForm1.invoiceId"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch(2)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
-                            <el-button type="primary" @click="handleExport(2)">导出结算记录</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    :data="recordData1"
-                >
-                    <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
-                    <el-table-column prop="invoiceType" label="应收项" width="100"></el-table-column>
-                    <el-table-column prop="taxPoint" label="税点" width="100"></el-table-column>
-                    <el-table-column prop="actualReceivedAmount" label="实收金额" width="100"></el-table-column>
-                    <el-table-column prop="receivePaymentDate" label="收款日期" width="150"></el-table-column>
-                    <el-table-column label="收款凭证" width="100">
-                        <template #default="scope">
-                            <el-button link type="primary" @click="view">查看凭证（1）</el-button>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="createBy" label="结算人" width="100"></el-table-column>
-                    <el-table-column prop="createTime" label="结算时间" width="200"></el-table-column>
-                    <el-table-column prop="invoiceId" label="开票记录编号"></el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total1"
-                        @size-change="handleSizeChange($event, '2')"
-                        @current-change="handleCurrentChange($event, '2')"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
-                <el-form v-model="recordForm2" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceId" label="开票记录编号">
-                                <el-input v-model="recordForm2.invoiceId"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceParty" label="开票方">
-                                <el-select v-model="recordForm2.invoiceParty">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementPerson" label="结算人">
-                                <el-input v-model="recordForm2.settlementPerson"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="状态">
-                                <el-select v-model="recordForm.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="24" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch(3)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
-                            <el-button type="primary" @click="handleExport(3)">导出明细</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    :data="recordData2"
-                >
-                    <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
-                    <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
-                    <el-table-column prop="status" label="状态" width="100"></el-table-column>
-                    <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
-                    <el-table-column prop="productName" label="险种" width="120"></el-table-column>
-                    <el-table-column prop="receivableSuperviseCosts" label="应收手续费" width="100"></el-table-column>
-                    <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
-                    <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
-                    <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="100"></el-table-column>
-                    <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
-                    <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例" width="100"></el-table-column>
-                    <el-table-column prop="jqPolicyNo" label="交强险保单号" width="200"></el-table-column>
-                    <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
-                    <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
-                    <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
-                    <el-table-column prop="settlementPerson" label="结算人" width="100"></el-table-column>
-                    <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total2"
-                        @size-change="handleSizeChange($event, '3')"
-                        @current-change="handleCurrentChange($event, '3')"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane style="height: 100%" name="4" label="非车结算明细">
-                <el-form v-model="recordForm3" label-width="120">
-                    <el-row :gutter="20">
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceId" label="开票记录编号">
-                                <el-input v-model="recordForm3.invoiceId"></el-input>
-                            </el-form-item>
-                        </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-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="invoiceParty" label="开票方">
-                                <el-select v-model="recordForm3.invoiceParty">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementPerson" label="结算人">
-                                <el-input v-model="recordForm3.settlementPerson"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="settlementTime" label="结算时间">
-                                <el-date-picker
-                                    v-model="recordForm3.settlementTime"
-                                    type="daterange"
-                                    format="YYYY-MM-DD"
-                                    value-format="YYYY-MM-DD"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item prop="status" label="状态">
-                                <el-select v-model="recordForm3.status">
-                                    <el-option value="1" label="1"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="24" style="display: flex; justify-content: flex-end">
-                            <el-button type="primary" @click="handleSearch(4)">查询</el-button>
-                            <el-button plain type="primary" @click="handleReset(4)">重置</el-button>
-                            <el-button type="primary" @click="handleExport(4)">导出明细</el-button>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-table
-                    class="tableRecord"
-                    :data="recordData3"
-                >
-                    <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
-                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
-                    <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
-                    <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
-                    <el-table-column prop="status" label="状态" width="100"></el-table-column>
-                    <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
-                    <el-table-column prop="productName" label="险种" width="120"></el-table-column>
-                    <el-table-column prop="receivableSuperviseCosts" label="应收手续费" width="100"></el-table-column>
-                    <el-table-column prop="jyPremium" label="非车险保费" width="100"></el-table-column>
-                    <el-table-column prop="jySuperviseCostsProportion" label="非车险手续费比例" width="100"></el-table-column>
-                    <el-table-column prop="jyPolicyNo" label="非车险保单号" width="200"></el-table-column>
-                    <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
-                    <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
-                    <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
-                </el-table>
-                <div class="pagination">
-                    <el-pagination
-                        v-model:current-page="pages"
-                        v-model:page-size="size"
-                        :page-sizes="[10, 20, 30, 40]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total3"
-                        @size-change="handleSizeChange($event, '4')"
-                        @current-change="handleCurrentChange($event, '4')"
-                    ></el-pagination>
-                </div>
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+</el-table-column>-->
+          <el-table-column prop="totalReceivable" label="应收金额" width="240"></el-table-column>
+          <el-table-column prop="superviseFee" label="应收手续费" width="240"></el-table-column>
+          <el-table-column prop="invoicedAmount" label="已开票" width="200"></el-table-column>
+          <el-table-column prop="settledAmount" label="已结算" width="200"></el-table-column>
+          <el-table-column prop="unInvoicedAmount" label="未开票" width="200"></el-table-column>
+          <el-table-column prop="unSettledAmount" label="未结算" width="200"></el-table-column>
+          <el-table-column label="操作" fixed="right" width="120">
+            <template #default="scope">
+              <el-button link type="primary">查看明细</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="2" label="结算记录">
+        <el-form v-model="recordForm1" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="settlementId" label="结算记录编号">
+                <el-input v-model="recordForm1.settlementId"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceParty" label="开票方">
+                <el-select v-model="recordForm1.invoiceParty">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceType" label="应收项">
+                <el-select v-model="recordForm1.invoiceType">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="结算状态">
+                <el-select v-model="recordForm1.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementPerson" label="结算人">
+                <el-input v-model="recordForm1.settlementPerson"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm1.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceId" label="开票记录编号">
+                <el-input v-model="recordForm1.invoiceId"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" style="display: flex; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(2)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
+              <el-button type="primary" @click="handleExport(2)">导出结算记录</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 192px)" :data="recordData1">
+          <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
+          <el-table-column prop="invoiceType" label="应收项" width="100"></el-table-column>
+          <el-table-column prop="taxPoint" label="税点" width="100"></el-table-column>
+          <el-table-column prop="actualReceivedAmount" label="实收金额" width="100"></el-table-column>
+          <el-table-column prop="receivePaymentDate" label="收款日期" width="150"></el-table-column>
+          <el-table-column label="收款凭证" width="100">
+            <template #default="scope">
+              <el-button link type="primary" @click="view">查看凭证（1）</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createBy" label="结算人" width="100"></el-table-column>
+          <el-table-column prop="createTime" label="结算时间" width="200"></el-table-column>
+          <el-table-column prop="invoiceId" label="开票记录编号"></el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total1"
+            @size-change="handleSizeChange($event, '2')"
+            @current-change="handleCurrentChange($event, '2')"></el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
+        <el-form v-model="recordForm2" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="invoiceId" label="开票记录编号">
+                <el-input v-model="recordForm2.invoiceId"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceParty" label="开票方">
+                <el-select v-model="recordForm2.invoiceParty">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementPerson" label="结算人">
+                <el-input v-model="recordForm2.settlementPerson"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="状态">
+                <el-select v-model="recordForm.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(3)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
+              <el-button type="primary" @click="handleExport(3)">导出明细</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 192px)" :data="recordData2">
+          <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
+          <el-table-column prop="status" label="状态" width="100"></el-table-column>
+          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
+          <el-table-column prop="productName" label="险种" width="120"></el-table-column>
+          <el-table-column prop="receivableSuperviseCosts" label="应收手续费" width="100"></el-table-column>
+          <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
+          <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
+          <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="100"></el-table-column>
+          <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
+          <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例" width="100"></el-table-column>
+          <el-table-column prop="jqPolicyNo" label="交强险保单号" width="200"></el-table-column>
+          <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
+          <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
+          <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
+          <el-table-column prop="settlementPerson" label="结算人" width="100"></el-table-column>
+          <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total2"
+            @size-change="handleSizeChange($event, '3')"
+            @current-change="handleCurrentChange($event, '3')"></el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane style="height: 100%" name="4" label="非车结算明细">
+        <el-form v-model="recordForm3" label-width="120">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="invoiceId" label="开票记录编号">
+                <el-input v-model="recordForm3.invoiceId"></el-input>
+              </el-form-item>
+            </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-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="invoiceParty" label="开票方">
+                <el-select v-model="recordForm3.invoiceParty">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementPerson" label="结算人">
+                <el-input v-model="recordForm3.settlementPerson"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="settlementTime" label="结算时间">
+                <el-date-picker v-model="recordForm3.settlementTime" type="daterange" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="status" label="状态">
+                <el-select v-model="recordForm3.status">
+                  <el-option value="1" label="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
+              <el-button type="primary" @click="handleSearch(4)">查询</el-button>
+              <el-button plain type="primary" @click="handleReset(4)">重置</el-button>
+              <el-button type="primary" @click="handleExport(4)">导出明细</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table height="calc(100% - 192px)" :data="recordData3">
+          <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
+          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
+          <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
+          <el-table-column prop="status" label="状态" width="100"></el-table-column>
+          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
+          <el-table-column prop="productName" label="险种" width="120"></el-table-column>
+          <el-table-column prop="receivableSuperviseCosts" label="应收手续费" width="100"></el-table-column>
+          <el-table-column prop="jyPremium" label="非车险保费" width="100"></el-table-column>
+          <el-table-column prop="jySuperviseCostsProportion" label="非车险手续费比例" width="100"></el-table-column>
+          <el-table-column prop="jyPolicyNo" label="非车险保单号" width="200"></el-table-column>
+          <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
+          <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
+          <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total3"
+            @size-change="handleSizeChange($event, '4')"
+            @current-change="handleCurrentChange($event, '4')"></el-pagination>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -333,32 +291,32 @@ import api from '@/api'
 
 let activeName = ref('1')
 const handleClick = (e) => {
-    pages.value = 1
-    size.value = 10
-    switch (e.props.name) {
-        case '1':
-            initData1()
-            break;
-        case '2':
-            initData2()
-            break;
-        case '3':
-            initData3(['1'])
-            break;
-        case '4':
-            initData3(['3'])
-            break;
-    }
+  pages.value = 1
+  size.value = 10
+  switch (e.props.name) {
+    case '1':
+      initData1()
+      break;
+    case '2':
+      initData2()
+      break;
+    case '3':
+      initData3(['1'])
+      break;
+    case '4':
+      initData3(['3'])
+      break;
+  }
 }
 
 // 保险公司
 let companyList = ref([])
 const initCompany = () => {
-    api.insuranceApi.leftList('').then((res: any) => {
-        if(res.code == 200) {
-            companyList.value = res.data
-        }
-    })
+  api.insuranceApi.leftList('').then((res: any) => {
+    if (res.code == 200) {
+      companyList.value = res.data
+    }
+  })
 }
 
 // 分页
@@ -369,62 +327,62 @@ let total1 = ref(0)
 let total2 = ref(0)
 let total3 = ref(0)
 const handleSizeChange = (size, type) => {
-    size.value = size
-    switch (type) {
-        case 2:
-            initData2()
-            break;
-        case 3:
-            initData3('1')
-            break;
-        case 4:
-            initData3('2')
-            break;
-    }
+  size.value = size
+  switch (type) {
+    case 2:
+      initData2()
+      break;
+    case 3:
+      initData3('1')
+      break;
+    case 4:
+      initData3('2')
+      break;
+  }
 }
 const handleCurrentChange = (pages, type) => {
-    pages.value = pages
-    switch (type) {
-        case 2:
-            initData2()
-            break;
-        case 3:
-            initData3('1')
-            break;
-        case 4:
-            initData3('3')
-            break;
-    }
+  pages.value = pages
+  switch (type) {
+    case 2:
+      initData2()
+      break;
+    case 3:
+      initData3('1')
+      break;
+    case 4:
+      initData3('3')
+      break;
+  }
 }
 
 const getSummaries = (param) => {
-    const { columns, data } = param
-    const sums: (string | VNode)[] = []
-    columns.forEach((column, index) => {
-        if (index === 0) {
-            sums[index] = h('div', [
-                '',
-            ])
-            return
-        }
-        const values = data.map((item) => Number(item[column.property]))
-        if (!values.every((value) => Number.isNaN(value))) {
-            sums[index] = ` ${values.reduce((prev, curr) => {
-                const value = Number(curr)
-                if (!Number.isNaN(value)) {
-                    return prev + curr
-                } else {
-                    return prev
-                }
-            }, 0)}`
+  const { columns, data } = param
+  const sums: (string | VNode)[] = []
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = h('div', [
+        '',
+      ])
+      return
+    }
+    const values = data.map((item) => Number(item[column.property]))
+    if (!values.every((value) => Number.isNaN(value))) {
+      sums[index] = ` ${values.reduce((prev, curr) => {
+        const value = Number(curr)
+        if (!Number.isNaN(value)) {
+          return prev + curr
         } else {
-            if(index > 2) {
-                sums[index - 1] = '0'
-            }
+          return prev
         }
-    })
+      }, 0)}`
+    } else {
+      if (index > 2) {
+        sums[index - 1] = '0'
+      }
+    }
+  })
 
-    return sums
+  return sums
 }
 
 // 结算记录
@@ -437,7 +395,7 @@ let recordData1 = ref([])
 let recordData2 = ref([])
 let recordData3 = ref([])
 const handleSearch1 = () => {
-    initData1()
+  initData1()
 }
 const handleReset1 = () => {
 
@@ -447,245 +405,233 @@ const view = (scope) => {
 }
 
 const initData1 = () => {
-    api.settlementApi.companySuperviseSettlementReport({
-        companyId: recordForm.value.companyId,
-        startTime: recordForm.value.time?.[0],
-        endTime: recordForm.value.time?.[1],
-        status: recordForm.value.status,
-        invoiceTypes: ['1','3'],
-        agreementType: '2'
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData.value = res.data
-        }
-    })
+  api.settlementApi.companySuperviseSettlementReport({
+    companyId: recordForm.value.companyId,
+    startTime: recordForm.value.time?.[0],
+    endTime: recordForm.value.time?.[1],
+    status: recordForm.value.status,
+    invoiceTypes: ['1', '3'],
+    agreementType: '2'
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData.value = res.data
+    }
+  })
 }
 const initData2 = () => {
-    api.settlementApi.superviseSettlementExcel({
-        agreementType: '2',
-        settlementId: recordForm1.settlementId,
-        companyId: recordForm1.companyId,
-        invoiceParty: recordForm1.invoiceParty,
-        invoiceType: recordForm1.invoiceType,
-        status: recordForm1.status,
-        settlementPerson: recordForm1.settlementPerson,
-        invoiceId: recordForm1.invoiceId,
-        settlementTimeStart: recordForm1.value.settlementTime?.[0],
-        settlementTimeEnd: recordForm1.value.settlementTime?.[1],
-        pages: pages.value,
-        size: size.value,
-        invoiceTypes: ['1','3']
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData1.value = res.data.records
-            total1.value = res.data.total
-        }
-    })
+  api.settlementApi.superviseSettlementExcel({
+    agreementType: '2',
+    settlementId: recordForm1.settlementId,
+    companyId: recordForm1.companyId,
+    invoiceParty: recordForm1.invoiceParty,
+    invoiceType: recordForm1.invoiceType,
+    status: recordForm1.status,
+    settlementPerson: recordForm1.settlementPerson,
+    invoiceId: recordForm1.invoiceId,
+    settlementTimeStart: recordForm1.value.settlementTime?.[0],
+    settlementTimeEnd: recordForm1.value.settlementTime?.[1],
+    pages: pages.value,
+    size: size.value,
+    invoiceTypes: ['1', '3']
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData1.value = res.data.records
+      total1.value = res.data.total
+    }
+  })
 }
 const initData3 = (invoiceTypes) => {
-    let params = invoiceTypes.includes('1')?
-        {
-            invoiceId: recordForm2.invoiceId,
-            companyId: recordForm2.companyId,
-            invoiceParty: recordForm2.invoiceParty,
-            settlementPerson: recordForm2.settlementPerson,
-            status: recordForm2.status,
-            settlementTimeStart: recordForm2.value.settlementTime?.[0],
-            settlementTimeEnd: recordForm2.value.settlementTime?.[1],
-            pages: pages.value,
-            size: size.value,
-            invoiceTypes: invoiceTypes
-        }:
-        invoiceTypes.includes('3')?
-        {
-            invoiceId: recordForm3.invoiceId,
-            companyId: recordForm3.companyId,
-            invoiceParty: recordForm3.invoiceParty,
-            settlementPerson: recordForm3.settlementPerson,
-            status: recordForm3.status,
-            settlementTimeStart: recordForm3.value.settlementTime?.[0],
-            settlementTimeEnd: recordForm3.value.settlementTime?.[1],
-            pages: pages.value,
-            size: size.value,
-            invoiceTypes: invoiceTypes
-        }:
-        {}
-    api.settlementApi.superviseSettlementDetailExcel({
-        ...params
-    }).then((res: any) => {
-        if(res.code == 200) {
-            recordData2.value = res.data.records
-            recordData3.value = res.data.records
-            total2.value = res.data.total
-            total3.value = res.data.total
-        }
-    })
+  let params = invoiceTypes.includes('1') ?
+    {
+      invoiceId: recordForm2.invoiceId,
+      companyId: recordForm2.companyId,
+      invoiceParty: recordForm2.invoiceParty,
+      settlementPerson: recordForm2.settlementPerson,
+      status: recordForm2.status,
+      settlementTimeStart: recordForm2.value.settlementTime?.[0],
+      settlementTimeEnd: recordForm2.value.settlementTime?.[1],
+      pages: pages.value,
+      size: size.value,
+      invoiceTypes: invoiceTypes
+    } :
+    invoiceTypes.includes('3') ?
+      {
+        invoiceId: recordForm3.invoiceId,
+        companyId: recordForm3.companyId,
+        invoiceParty: recordForm3.invoiceParty,
+        settlementPerson: recordForm3.settlementPerson,
+        status: recordForm3.status,
+        settlementTimeStart: recordForm3.value.settlementTime?.[0],
+        settlementTimeEnd: recordForm3.value.settlementTime?.[1],
+        pages: pages.value,
+        size: size.value,
+        invoiceTypes: invoiceTypes
+      } :
+      {}
+  api.settlementApi.superviseSettlementDetailExcel({
+    ...params
+  }).then((res: any) => {
+    if (res.code == 200) {
+      recordData2.value = res.data.records
+      recordData3.value = res.data.records
+      total2.value = res.data.total
+      total3.value = res.data.total
+    }
+  })
 }
 
 const handleSearch = (type) => {
-    pages.vlaue = 1
-    size.value = 10
-    switch (type) {
-        case 1:
-            initData1()
-            break;
-        case 2:
-            initData2()
-            break;
-        case 3:
-            initData3(['1'])
-            break;
-        case 4:
-            initData3(['3'])
-            break;
-    }
+  pages.vlaue = 1
+  size.value = 10
+  switch (type) {
+    case 1:
+      initData1()
+      break;
+    case 2:
+      initData2()
+      break;
+    case 3:
+      initData3(['1'])
+      break;
+    case 4:
+      initData3(['3'])
+      break;
+  }
 }
 const handleReset = (type) => {
-    switch (type) {
-        case 1:
-            recordForm.value = {
-                companyId: '',
-                time: [],
-                status: ''
-            }
-            break;
-        case 2:
-            recordForm1.value = {
-                settlementId: '',
-                companyId: '',
-                invoiceParty: '',
-                invoiceType: '',
-                status: '',
-                settlementPerson: '',
-                settlementTime: [],
-                invoiceId: ''
-            }
-            break;
-        case 3:
-            recordForm2.value = {
-                invoiceId: '',
-                companyId: '',
-                invoiceParty: '',
-                settlementPerson: '',
-                settlementTime: [],
-                status: ''
-            }
-            break;
-        case 4:
-            recordForm3.value = {
-                invoiceId: '',
-                companyId: '',
-                invoiceParty: '',
-                settlementPerson: '',
-                settlementTime: [],
-                status: ''
-            }
-            break;
-    }
+  switch (type) {
+    case 1:
+      recordForm.value = {
+        companyId: '',
+        time: [],
+        status: ''
+      }
+      break;
+    case 2:
+      recordForm1.value = {
+        settlementId: '',
+        companyId: '',
+        invoiceParty: '',
+        invoiceType: '',
+        status: '',
+        settlementPerson: '',
+        settlementTime: [],
+        invoiceId: ''
+      }
+      break;
+    case 3:
+      recordForm2.value = {
+        invoiceId: '',
+        companyId: '',
+        invoiceParty: '',
+        settlementPerson: '',
+        settlementTime: [],
+        status: ''
+      }
+      break;
+    case 4:
+      recordForm3.value = {
+        invoiceId: '',
+        companyId: '',
+        invoiceParty: '',
+        settlementPerson: '',
+        settlementTime: [],
+        status: ''
+      }
+      break;
+  }
 }
 const handleExport = (type) => {
-    switch (type) {
-        case 2:
-            exportSuperviseSettlementExcel()
-            break;
-        case 3:
-            exportSuperviseSettlementDetailExcel()
-            break;
-        case 4:
-            exportSuperviseSettlementDetailJyExcel()
-            break;
-    }
+  switch (type) {
+    case 2:
+      exportSuperviseSettlementExcel()
+      break;
+    case 3:
+      exportSuperviseSettlementDetailExcel()
+      break;
+    case 4:
+      exportSuperviseSettlementDetailJyExcel()
+      break;
+  }
 }
 const exportSuperviseSettlementExcel = () => {
-    api.settlementApi.exportSuperviseSettlementExcel({
+  api.settlementApi.exportSuperviseSettlementExcel({
 
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '手续费应收结算报表明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '手续费应收结算报表明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 const exportSuperviseSettlementDetailExcel = () => {
-    api.settlementApi.exportSuperviseSettlementDetailExcel({
+  api.settlementApi.exportSuperviseSettlementDetailExcel({
 
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '手续费应收车险结算报表明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '手续费应收车险结算报表明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 const exportSuperviseSettlementDetailJyExcel = () => {
-    api.settlementApi.exportSuperviseSettlementDetailJyExcel({
+  api.settlementApi.exportSuperviseSettlementDetailJyExcel({
 
-    }).then((res: any) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
-        const fileName = '手续费应收非车险结算报表明细' + new Date().getTime() + '.xlsx';
-        if ('download' in document.createElement('a')) {
-            const elink = document.createElement('a');
-            elink.download = fileName;
-            elink.style.display = 'none';
-            elink.href = URL.createObjectURL(blob);
-            document.body.appendChild(elink);
-            elink.click();
-            URL.revokeObjectURL(elink.href);
-            document.body.removeChild(elink);
-        } else {
-            navigator.msSaveBlob(blob, fileName);
-        }
-    })
+  }).then((res: any) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+    const fileName = '手续费应收非车险结算报表明细' + new Date().getTime() + '.xlsx';
+    if ('download' in document.createElement('a')) {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    } else {
+      navigator.msSaveBlob(blob, fileName);
+    }
+  })
 }
 
 
 onMounted(() => {
-    initData1();
-    initCompany();
+  initData1();
+  initCompany();
 })
 
 </script>
 
 <style scoped lang="scss">
-    .report{
-        height: calc(100vh - 134px);
-        width: calc(100% - 24px);
-        margin: 12px auto;
-        padding: 12px;
-        background: #FFFFFF;
-        overflow-y: auto;
-        .tableBox{
-            height: calc(100% - 150px);
-        }
-        .tableRecord{
-            height: calc(100% - 210px);
-        }
-        .pagination{
-            margin-top: 20px;
-            display: flex;
-            justify-content: flex-end;
-        }
-        :deep(.subTable .el-table__header-wrapper) {
-            display: none;
-        }
-    }
+
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:deep(.subTable .el-table__header-wrapper) {
+  display: none;
+}
 </style>