index.vue 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969
  1. <template>
  2. <PageMain class="vh100">
  3. <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="handleTabsClick">
  4. <el-tab-pane label="车险应收" name="1" class="h-full">
  5. <el-form v-model="receivableForm" label-width="100">
  6. <el-row :gutter="20">
  7. <el-col :span="8">
  8. <el-form-item label="车牌号">
  9. <el-input v-model="receivableForm.licenseNo" placeholder="请输入" clearable></el-input>
  10. </el-form-item>
  11. </el-col>
  12. <el-col :span="8">
  13. <el-form-item label="保险公司">
  14. <el-select v-model="receivableForm.companyId" placeholder="请选择" clearable filterable>
  15. <el-option v-for="item in companyList" :key="item.companyCode" :value="item.id"
  16. :label="item.name"></el-option>
  17. </el-select>
  18. </el-form-item>
  19. </el-col>
  20. <el-col :span="8">
  21. <el-form-item label="签单时间">
  22. <el-date-picker v-model="receivableForm.signingTime" type="daterange" range-separator="至"
  23. start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
  24. </el-form-item>
  25. </el-col>
  26. <el-col :span="8">
  27. <el-form-item label="订单号">
  28. <el-input v-model="receivableForm.orderNo" placeholder="请输入" clearable></el-input>
  29. </el-form-item>
  30. </el-col>
  31. <el-col :span="8">
  32. <el-form-item label="业务来源">
  33. <el-select v-model="receivableForm.typeAttr" placeholder="请选择" clearable>
  34. <el-option label="团队" value="5"></el-option>
  35. <el-option label="个代" value="6"></el-option>
  36. <el-option label="渠道" value="7"></el-option>
  37. <el-option label="电销组" value="8"></el-option>
  38. </el-select>
  39. </el-form-item>
  40. </el-col> <el-col :span="8">
  41. <el-form-item label="结算状态">
  42. <el-select v-model="receivableForm.settlementStatus" placeholder="请选择" clearable>
  43. <el-option label="未结算" value="0"></el-option>
  44. <el-option label="已结算" value="1"></el-option>
  45. </el-select>
  46. </el-form-item>
  47. </el-col> <el-col :span="8">
  48. <el-form-item label="增加类型">
  49. <el-input v-model="receivableForm.addType" placeholder="请输入" clearable></el-input>
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="8">
  53. <el-form-item label="出单协议">
  54. <el-select v-model="receivableForm.agreementId" placeholder="请选择" clearable>
  55. <el-option label="1" value="1"></el-option>
  56. </el-select>
  57. </el-form-item>
  58. </el-col>
  59. <el-col :span="8">
  60. <el-form-item label="出单机构">
  61. <el-cascader style="width: 100%" v-model="receivableForm.deptId" placeholder="请选择" :options="deptOption"
  62. :props="cascaderProps" clearable></el-cascader>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="8">
  66. <el-form-item label="险种">
  67. <el-select v-model="receivableForm.riskCode" placeholder="请选择" clearable>
  68. <el-option v-for="(item, index) in insuranceType" :label="item.label" :value="item.label"></el-option>
  69. </el-select>
  70. </el-form-item>
  71. </el-col>
  72. <el-col :span="8">
  73. <el-form-item label="订单类型">
  74. <el-select v-model="receivableForm.orderType" placeholder="请选择" clearable>
  75. <el-option label="车险录入" value="1"></el-option>
  76. <el-option label="代客录单" value="2"></el-option>
  77. <el-option label="外部订单" value="3"></el-option>
  78. </el-select>
  79. </el-form-item>
  80. </el-col>
  81. <el-col :span="8">
  82. <el-form-item label="被保人">
  83. <el-input v-model="receivableForm.insuredName" placeholder="请输入" clearable></el-input>
  84. </el-form-item>
  85. </el-col>
  86. <el-col v-show="isTrue" :span="8">
  87. <el-form-item label="交强险保单号">
  88. <el-input v-model="receivableForm.jqPolicyNo" placeholder="请输入" clearable></el-input>
  89. </el-form-item>
  90. </el-col>
  91. <el-col v-show="isTrue" :span="8">
  92. <el-form-item label="商业险保单号">
  93. <el-input v-model="receivableForm.syPolicyNo" placeholder="请输入" clearable></el-input>
  94. </el-form-item>
  95. </el-col>
  96. <el-col v-show="isTrue" :span="8">
  97. <el-form-item label="对接人">
  98. <el-input v-model="receivableForm.dockingPerson" placeholder="请输入" clearable></el-input>
  99. </el-form-item>
  100. </el-col>
  101. <el-col v-show="isTrue" :span="8">
  102. <el-form-item label="交强起保时间">
  103. <el-date-picker v-model="receivableForm.jqDate" type="daterange" range-separator="至"
  104. start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
  105. </el-form-item>
  106. </el-col>
  107. <el-col v-show="isTrue" :span="8">
  108. <el-form-item label="商业起保时间">
  109. <el-date-picker v-model="receivableForm.syDate" type="daterange" range-separator="至"
  110. start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
  111. </el-form-item>
  112. </el-col>
  113. <el-col :span="24" style="display: flex; align-items: center; justify-content: flex-end">
  114. <el-button type="primary" @click="getPlatFormReceivableList">搜索</el-button>
  115. <el-button plain @click="reset">重置</el-button>
  116. <span class="icon_s">
  117. <span @click="isTrue = !isTrue">高级搜索</span>
  118. <el-icon class="is_icon" :class="{ 'is_down': isTrue }">
  119. <ArrowDown />
  120. </el-icon>
  121. </span>
  122. </el-col>
  123. </el-row>
  124. </el-form>
  125. <el-row :gutter="8" style="margin: 20px 0" class="flex a-c ">
  126. <span class="flex col-160 m-r-8 bg-F9">
  127. <el-checkbox class="p-w-12" @change="selectAll" v-model="selectAllValue"></el-checkbox>&nbsp;
  128. <el-select class="select-all width-100" placeholder="全选" v-model="selectType" @change="selectTypeChange">
  129. <el-option key="all" value="all" :label="`选中所有数据${total1}条`"></el-option>
  130. <el-option key="cur" value="cur" label="选中本页数据"></el-option>
  131. </el-select>
  132. </span>
  133. <div class="col-108 m-r-8">
  134. <el-button class="radius-2px width-100" type="primary" @click="addShow = true">添加应收</el-button>
  135. </div>
  136. <div class="col-108 m-r-8">
  137. <el-button class="radius-2px width-100" type="primary" @click="batchSettle">批量结算</el-button>
  138. </div>
  139. <div class="col-108 m-r-8">
  140. <el-button class="radius-2px width-100" type="primary" @click="dropdownCommand('删除')">删除</el-button>
  141. </div>
  142. <div class="col-108 m-r-8">
  143. <el-button class="radius-2px width-100" type="primary" @click="exportPlatformReceivable">导出</el-button>
  144. </div>
  145. <span class="col-108 m-r-8">
  146. <el-button class="radius-2px width-100" @click="handleBatchEdit">批量修改比例</el-button>
  147. </span>
  148. <span class="col-108 m-r-8">
  149. 已选: <span class="text-red">{{ selectedList.length }}</span> 条
  150. </span>
  151. <span>应收金额总计:¥{{ receivedAmountTotal || 0 }}</span>
  152. </el-row>
  153. <el-table :data="receiveData" :height="isTrue ? 'calc(100% - 446px)' : 'calc(100% - 346px)'"
  154. style="width: 100%; margin-top: 20px;" ref="ReceiveDataRef1" @select="handleSelectChange1"
  155. @select-all="handleSelectAll1">
  156. <el-table-column type="selection" width="50" fixed="left"></el-table-column>
  157. <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
  158. <el-table-column prop="typeAttrName" label="业务来源" width="120"></el-table-column>
  159. <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
  160. <el-table-column prop="companyName" label="保险公司" width="120"></el-table-column>
  161. <el-table-column prop="contactPerson" label="对接人" width="100"></el-table-column>
  162. <el-table-column prop="deptName" label="出单机构" width="120"></el-table-column>
  163. <el-table-column prop="agreementName" label="出单协议" width="150"></el-table-column>
  164. <el-table-column prop="orderType" label="订单类型" width="100"></el-table-column>
  165. <el-table-column prop="licenseNo" label="车牌号" width="100"></el-table-column>
  166. <el-table-column prop="receivableAmount" label="应收金额" width="100"> </el-table-column>
  167. <el-table-column prop="productName" label="险种" width="100"></el-table-column>
  168. <el-table-column prop="settlementStatusName" label="结算状态" width="100"></el-table-column>
  169. <el-table-column prop="insuredPerson" label="被保人" width="100"></el-table-column>
  170. <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
  171. <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="150"></el-table-column>
  172. <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="150"></el-table-column>
  173. <el-table-column prop="jqReceivablePremium" label="交强应收金额" width="150"></el-table-column>
  174. <!-- <el-table-column prop="jqSuperviseCostsProportion" label="交强入口比例" width="120">
  175. <template #default="scope">
  176. {{ scope.row.insFeeOrders?.jqInletRatio || '-' }}
  177. </template>
  178. </el-table-column> -->
  179. <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
  180. <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
  181. <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例" width="150"></el-table-column>
  182. <el-table-column prop="syReceivablePremium" label="商业应收金额" width="150"></el-table-column>
  183. <!-- <el-table-column prop="sySuperviseCostsProportion" label="商业入口比例" width="120">
  184. <template #default="scope">
  185. {{ scope.row.insFeeOrders?.syInletRatio || '-' }}
  186. </template>
  187. </el-table-column> -->
  188. <el-table-column prop="jyPremium" label="非车保费" width="100"></el-table-column>
  189. <el-table-column prop="jyReceivablePremium" label="非车应收金额" width="150"></el-table-column>
  190. <!-- <el-table-column prop="sySuperviseCostsProportion" label="非车入口比例" width="120">
  191. <template #default="scope">
  192. {{ scope.row.insFeeOrders?.jyInletRatio || '-' }}
  193. </template>
  194. </el-table-column> -->
  195. <el-table-column prop="receivableAmount" label="总应收金额" width="100"></el-table-column>
  196. <el-table-column prop="jqPolicyNo" label="交强险保单号" width="150"></el-table-column>
  197. <el-table-column prop="syPolicyNo" label="商业险保单号" width="150"></el-table-column>
  198. <el-table-column prop="jqStartDate" label="交强险起保日期" width="150"></el-table-column>
  199. <el-table-column prop="syStartDate" label="商业险起保日期" width="150"></el-table-column>
  200. <el-table-column prop="updateBy" label="修改人" width="100"></el-table-column>
  201. <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
  202. <el-table-column label="操作" width="180" fixed="right">
  203. <template #default="scope">
  204. <el-button link type="primary" :disabled="scope.row.settlementStatusName == '已结算'"
  205. @click="ticketRef.openSettlement([scope.row], scope.row.contactPersonPhone)">结算</el-button>
  206. <el-button link type="primary" @click="toEdit(scope.row)">编辑</el-button>
  207. <el-button link type="primary" :disabled="scope.row.settlementStatusName == '已结算'"
  208. @click="toDelete([scope.row.id])">删除</el-button>
  209. </template>
  210. </el-table-column>
  211. </el-table>
  212. <div class="pagination">
  213. <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
  214. layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="handleSizeChange"
  215. @current-change="handleCurrentChange"></el-pagination>
  216. </div>
  217. </el-tab-pane>
  218. </el-tabs>
  219. <el-dialog :close-on-click-modal="false" v-model="addShow" width="800" title="添加应收">
  220. <div class="add-content">
  221. <el-input v-model="addSearchValue" style="max-width: 500px" :placeholder="`请输入${placeholder}`"
  222. class="input-with-select">
  223. <template #prepend>
  224. <el-select v-model="addSelectType" placeholder="请选择" style="width: 120px"
  225. @change="handleAddSelectTypeChange">
  226. <el-option label="订单号查询" value="1" />
  227. <el-option label="交强险保单号查询" value="2" />
  228. <el-option label="商业险保单号查询" value="3" />
  229. </el-select>
  230. </template>
  231. <template #append>
  232. <el-button type="primary" @click="getUnauditedOrder">搜索</el-button>
  233. </template>
  234. </el-input>
  235. <el-table :data="selectingData" style="width: 100%;">
  236. <el-table-column prop="a" label="费用状态" width="100"></el-table-column>
  237. <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
  238. <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
  239. <el-table-column prop="jqPolicyNo" label="交强保单号" width="120"></el-table-column>
  240. <el-table-column prop="syPolicyNo" label="商业保单号" width="120"></el-table-column>
  241. <el-table-column prop="jqPremium" label="交强保费" width="100"></el-table-column>
  242. <el-table-column prop="jqSuperviseCostsProportion" label="交强手续费比例" width="100"></el-table-column>
  243. <el-table-column prop="syPremium" label="商业保费" width="100"></el-table-column>
  244. <el-table-column prop="sySuperviseCostsProportion" label="商业手续费比例" width="100"></el-table-column>
  245. <el-table-column prop="a" label="应收金额" width="100"></el-table-column>
  246. <el-table-column label="操作" fixed="right" width="100">
  247. <template #default="scope">
  248. <el-button link type="primary" @click="handleToAdd(scope.row)">添加</el-button>
  249. </template>
  250. </el-table-column>
  251. </el-table>
  252. <p>已添加的应收单据</p>
  253. <el-table :data="selectedData" style="width: 100%;">
  254. <el-table-column prop="a" label="费用状态" width="100"></el-table-column>
  255. <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
  256. <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
  257. <el-table-column prop="jqPolicyNo" label="交强保单号" width="120"></el-table-column>
  258. <el-table-column prop="syPolicyNo" label="商业保单号" width="120"></el-table-column>
  259. <el-table-column prop="jqPremium" label="交强保费" width="100"></el-table-column>
  260. <el-table-column prop="jqSuperviseCostsProportion" label="交强手续费比例" width="100"></el-table-column>
  261. <el-table-column prop="syPremium" label="商业保费" width="100"></el-table-column>
  262. <el-table-column prop="sySuperviseCostsProportion" label="商业手续费比例" width="100"></el-table-column>
  263. <el-table-column prop="a" label="应收金额" width="100"></el-table-column>
  264. <el-table-column label="操作" fixed="right" width="100">
  265. <template #default="scope">
  266. <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
  267. </template>
  268. </el-table-column>
  269. </el-table>
  270. </div>
  271. <template #footer>
  272. <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="addShow = false">取消</el-button>
  273. <el-button type="primary" @click="handleAddSubmit">确定</el-button>
  274. </template>
  275. </el-dialog>
  276. <el-dialog :close-on-click-modal="false" v-model="batchShow" width="800"
  277. :title="`选中修改(已选${selectedData.length}条数据)`">
  278. <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px">
  279. 下载「标准导入模板」,编辑后上传;系统将自动匹配相关字段
  280. <el-button link type="primary" @click="exportData">下载模板</el-button>
  281. </div>
  282. <el-upload class="upload-demo" drag accept=".xls, .xlsx">
  283. <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  284. <div class="el-upload__text">
  285. 点击或将文件拖拽到这里上传
  286. </div>
  287. <a style="color: #999; font-size: 12px">目前支持的文件类型为*.xls, *.xlsx</a>
  288. </el-upload>
  289. </el-dialog>
  290. <el-dialog :close-on-click-modal="false" v-model="invoiceShow" width="600" title="提示">
  291. <el-radio-group v-model="invoiceRadio">
  292. <el-radio :value="item.contactPersonPhone" v-for="(item, index) in options">{{ item.contactPerson }}</el-radio>
  293. </el-radio-group>
  294. <template #footer>
  295. <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="invoiceShow = false">取消</el-button>
  296. <el-button type="primary" @click="handleInvoiceSubmit">确定</el-button>
  297. </template>
  298. </el-dialog>
  299. <el-dialog :close-on-click-modal="false" title="批量修改" v-model="batchEditShow" width="700">
  300. <el-tabs v-model="subActiveName" class="demo-tabs">
  301. <el-tab-pane label="User" name="first">
  302. <template #label>选中修改({{ selectedList.length }})</template>
  303. <el-form :model="editForm">
  304. <el-radio v-model="feeRate">手续费比例</el-radio>
  305. <el-row :gutter="20">
  306. <el-col :span="12">
  307. <el-form-item label="交强险手续费比例">
  308. <el-input v-model="editForm.jqSuperviseCostsProportion">
  309. <template #append>%</template>
  310. </el-input>
  311. </el-form-item>
  312. </el-col>
  313. <el-col :span="12">
  314. <el-form-item label="商业险手续费比例">
  315. <el-input v-model="editForm.sySuperviseCostsProportion">
  316. <template #append>%</template>
  317. </el-input>
  318. </el-form-item>
  319. </el-col>
  320. <el-col :span="12">
  321. <el-form-item label="驾意险手续费比例">
  322. <el-input v-model="editForm.jySuperviseCostsProportion">
  323. <template #append>%</template>
  324. </el-input>
  325. </el-form-item>
  326. </el-col>
  327. <el-col :span="12">
  328. <el-form-item label="交强跟单费比例">
  329. <el-input v-model="editForm.jqOtherCostsProportion">
  330. <template #append>%</template>
  331. </el-input>
  332. </el-form-item>
  333. </el-col>
  334. <el-col :span="12">
  335. <el-form-item label="商业跟单费比例">
  336. <el-input v-model="editForm.syOtherCostsProportion">
  337. <template #append>%</template>
  338. </el-input>
  339. </el-form-item>
  340. </el-col>
  341. <el-col :span="12">
  342. <el-form-item label="驾意跟单费比例">
  343. <el-input v-model="editForm.jyOtherCostsProportion">
  344. <template #append>%</template>
  345. </el-input>
  346. </el-form-item>
  347. </el-col>
  348. </el-row>
  349. <el-radio v-model="signTime">签单时间</el-radio>
  350. <el-row :gutter="20">
  351. <el-col :span="12">
  352. <el-form-item label="">
  353. <el-date-picker v-model="editForm.signingTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
  354. value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
  355. </el-form-item>
  356. </el-col>
  357. </el-row>
  358. <el-radio v-model="people">对接人</el-radio>
  359. <el-row :gutter="20">
  360. <el-col :span="12">
  361. <el-form-item label="姓名">
  362. <el-input v-model="editForm.contractUserName"></el-input>
  363. </el-form-item>
  364. </el-col>
  365. <el-col :span="12">
  366. <el-form-item label="手机号">
  367. <el-input v-model="editForm.contractUserPhone"></el-input>
  368. </el-form-item>
  369. </el-col>
  370. </el-row>
  371. </el-form>
  372. </el-tab-pane>
  373. <el-tab-pane label="Config" name="second">
  374. <template #label>导入修改</template>
  375. <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px">
  376. 下载「标准导入模板」,编辑后上传;系统将自动匹配相关字段
  377. <el-button link type="primary" @click="exportData">下载模板</el-button>
  378. </div>
  379. <el-upload class="upload-demo" drag accept=".xls, .xlsx" :auto-upload="false" @change="uploadJYFile">
  380. <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  381. <div class="el-upload__text">
  382. 点击或将文件拖拽到这里上传
  383. </div>
  384. <a style="color: #999; font-size: 12px">目前支持的文件类型为*.xls, *.xlsx</a>
  385. </el-upload>
  386. <div v-if="importModifyCallback">
  387. <div>
  388. 您将导入 <span style="color:#409eff;">{{ importModifyCallback?.failedNumber +
  389. importModifyCallback?.successNumber
  390. ||
  391. 0 }}
  392. </span> 条数据,其中 <span style="color:#409eff;">{{ importModifyCallback?.successNumber || 0 }} </span>
  393. 条正常导入;<span style="color: red;">{{ importModifyCallback?.failedNumber || 0 }}</span> 条不符合要求无法导入。
  394. </div>
  395. <el-button type="primary" link @click="downloadImportFailedData(importModifyCallback)">下载导入失败文件</el-button>
  396. </div>
  397. </el-tab-pane>
  398. </el-tabs>
  399. <template #footer>
  400. <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="batchEditShow = false">取消</el-button>
  401. <el-button type="primary" @click="handleBatchEditSubmit()">确定</el-button>
  402. </template>
  403. </el-dialog>
  404. </PageMain>
  405. <ticket ref="ticketRef" />
  406. </template>
  407. <script setup lang="ts">
  408. import { ElMessage, ElMessageBox } from "element-plus";
  409. import { useRouter } from 'vue-router'
  410. import ticket from "./ticket.vue";
  411. import api from '@/api'
  412. let myRouter = useRouter()
  413. let ticketRef = ref(null)
  414. let activeName = ref('1')
  415. let subActiveName = ref('first')
  416. let receivedAmountTotal = ref(0)
  417. const handleTabsClick = (e) => {
  418. console.log(e.props.name)
  419. activeName.value = e.props.name
  420. if (e.props.name == '1') {
  421. getPlatFormReceivableList()
  422. } else if (e.props.name == '2') {
  423. getPlatformReceivableList()
  424. }
  425. isTrue.value = false
  426. receivableForm.value = {}
  427. selectedList.value = []
  428. }
  429. let isTrue = ref(false)
  430. let receivableForm = ref({})
  431. const toDelete = (ids) => {
  432. ElMessageBox.confirm(
  433. '确定要删除吗',
  434. '删除应收订单',
  435. {
  436. confirmButtonText: '确定',
  437. type: 'error',
  438. center: true,
  439. confirmButtonClass: 'el-button--danger',
  440. }
  441. ).then(() => {
  442. api.financeApi.deleteIncomesByIds(ids).then((res: any) => {
  443. if (res.code == 200) {
  444. ElMessage.success('删除成功')
  445. reset()
  446. }
  447. })
  448. })
  449. }
  450. const reset = () => {
  451. receivableForm.value = {}
  452. pages.value = 1
  453. size.value = 10
  454. if (activeName.value == '1') {
  455. getPlatFormReceivableList()
  456. } else if (activeName.value == '2') {
  457. getPlatformReceivableList()
  458. }
  459. }
  460. let ReceiveDataRef1 = ref()
  461. // 选中的数据
  462. let selectedList = ref([])
  463. let allData = ref([])
  464. // 全选的类型
  465. let selectType = ref('')
  466. // 外部全选是否勾选
  467. let selectAllValue = ref(false)
  468. // 外部的全选
  469. const selectAll = (type: boolean) => {
  470. if (type) {
  471. if (selectType.value) {
  472. receiveData.value.forEach((item) => {
  473. ReceiveDataRef1.value!.toggleRowSelection(item, true)
  474. })
  475. if (selectType.value == 'cur') {
  476. selectedList.value = receiveData.value
  477. } else {
  478. selectedList.value = allData.value
  479. }
  480. }
  481. } else {
  482. receiveData.value.forEach(item => {
  483. ReceiveDataRef1.value!.toggleRowSelection(item, false)
  484. })
  485. selectType.value = ''
  486. selectedList.value = []
  487. }
  488. }
  489. // 全选类型改变
  490. const selectTypeChange = (type) => {
  491. selectAllValue.value = true
  492. receiveData.value.forEach(item => {
  493. ReceiveDataRef1.value!.toggleRowSelection(item, true)
  494. })
  495. if (type == 'cur') {
  496. selectedList.value = receiveData.value
  497. } else if (type == 'all') {
  498. selectedList.value = allData.value
  499. }
  500. }
  501. let options = ref([])
  502. const dropdownCommand = (e) => {
  503. if (e === '数据导入') {
  504. batchShow.value = true
  505. }
  506. if (e === '删除') {
  507. if (selectedList.value.length === 0) {
  508. ElMessage.warning('请选择删除的数据')
  509. return
  510. }
  511. toDelete(selectedList.value.map(item => item.id))
  512. }
  513. }
  514. let total1 = ref(0)
  515. let total2 = ref(0)
  516. let receiveData = ref([])
  517. // 应收添加
  518. let addShow = ref(false)
  519. let addSearchValue = ref('1932252903508697088')
  520. let placeholder = ref('订单号查询')
  521. let addSelectType = ref('1')
  522. const handleAddSelectTypeChange = (e) => {
  523. switch (e) {
  524. case '1':
  525. placeholder.value = '订单号查询'
  526. break;
  527. case '2':
  528. placeholder.value = '交强险保单号查询'
  529. break;
  530. case '3':
  531. placeholder.value = '商业险保单号查询'
  532. break;
  533. }
  534. }
  535. const getUnauditedOrder = () => {
  536. api.financeApi.getUnauditedOrder({
  537. orderNo: addSearchValue.value,
  538. agreementType: '1',
  539. queryType: activeName.value == '1' ? '1' : activeName.value == '2' ? '3' : ''
  540. }).then((res: any) => {
  541. if (res.code == 200) {
  542. selectingData.value = res.data
  543. }
  544. })
  545. }
  546. const exportData = () => {
  547. let params = {
  548. licenseNo: receivableForm.value?.licenseNo,
  549. companyId: receivableForm.value?.companyId,
  550. signingStartTime: receivableForm.value?.signingTime?.[0],
  551. signingEndTime: receivableForm.value?.signingTime?.[1],
  552. orderNo: receivableForm.value?.orderNo,
  553. agreementId: receivableForm.value?.agreementId,
  554. deptId: receivableForm.value?.deptId,
  555. riskCode: receivableForm.value?.riskCode,
  556. orderType: receivableForm.value?.orderType,
  557. insuredName: receivableForm.value?.insuredName,
  558. jqPolicyNo: receivableForm.value?.jqPolicyNo,
  559. syPolicyNo: receivableForm.value?.syPolicyNo,
  560. dockingPerson: receivableForm.value?.dockingPerson,
  561. jqStartDate: receivableForm.value?.jqDate?.[0],
  562. jqEndDate: receivableForm.value?.jqDate?.[1],
  563. syStartDate: receivableForm.value?.syDate?.[0],
  564. syEndDate: receivableForm.value?.syDate?.[1],
  565. queryType: activeName.value == '1' ? '1' : activeName.value == '2' ? '3' : ''
  566. }
  567. api.financeApi.exportReceivable(params).then((res: any) => {
  568. if (res.code == 200) {
  569. const link = document.createElement('a');
  570. link.href = res.msg;
  571. link.download = '';
  572. // 触发下载
  573. document.body.appendChild(link);
  574. link.click();
  575. document.body.removeChild(link);
  576. } else {
  577. ElMessage({
  578. message: res.msg,
  579. type: 'warning'
  580. })
  581. }
  582. })
  583. }
  584. // 批量操作数据导入
  585. let selectingData = ref([])
  586. let selectedData = ref([])
  587. const handleToAdd = (row) => {
  588. if (selectedData.value.length < 1) {
  589. selectedData.value.push(row)
  590. } else {
  591. if (!selectedData.value.some(item => item.id === row.id)) {
  592. selectedData.value.push(row)
  593. }
  594. }
  595. }
  596. const handleDel = (row) => {
  597. selectedData.value = selectedData.value.filter(item => item.id != row.id)
  598. }
  599. const handleAddSubmit = () => {
  600. if (selectedData.value.length < 1) {
  601. ElMessage({
  602. message: '请选择要添加的数据!',
  603. type: 'warning'
  604. })
  605. return
  606. }
  607. let arr = selectedData.value?.map(item => {
  608. return item.orderNo
  609. })
  610. api.financeApi.addReceivable({
  611. orderNo: [...arr],
  612. queryType: activeName.value == '1' ? '1' : activeName.value == '2' ? '2' : ''
  613. }).then((res: any) => {
  614. if (res.code == 200) {
  615. ElMessage({
  616. message: res.msg,
  617. type: 'success'
  618. })
  619. addShow.value = false
  620. getPlatFormReceivableList()
  621. getPlatformReceivableList()
  622. }
  623. })
  624. }
  625. let batchShow = ref(false)
  626. // 应收开票
  627. let invoiceShow = ref(false)
  628. let invoiceRadio = ref(null)
  629. const handleInvoiceSubmit = () => {
  630. const arr = selectedList.value.map(v => ({ id: v.id, orderNo: v.orderNo }))
  631. myRouter.push({
  632. name: 'Platformticket',
  633. query: {
  634. contactPersonPhone: invoiceRadio.value,
  635. selectedList: JSON.stringify(arr),
  636. invoiceType: "5"
  637. }
  638. })
  639. }
  640. const handleSelectChange1 = (row: any) => {
  641. console.log(row)
  642. if (row.length > 0) {
  643. selectedList.value = row
  644. } else {
  645. selectedList.value = []
  646. }
  647. }
  648. const handleSelectAll1 = (row: any) => {
  649. if (row.length > 0) {
  650. selectedList.value = row
  651. } else {
  652. selectedList.value = []
  653. }
  654. }
  655. // 批量修改比例
  656. let batchEditShow = ref(false)
  657. let feeRate = ref(null)
  658. let signTime = ref(null)
  659. let people = ref(null)
  660. let editForm = ref({})
  661. const handleBatchEdit = () => {
  662. if (selectedList.value.length < 1) {
  663. ElMessage({
  664. message: '请选择数据!',
  665. type: 'warning'
  666. })
  667. return
  668. }
  669. editForm.value = {}
  670. batchEditShow.value = true
  671. }
  672. const handleBatchEditSubmit = async () => {
  673. const params = {
  674. incomeIds: selectedList.value.map(item => item.id),
  675. ...editForm.value,
  676. updateFlag: "4"
  677. }
  678. const { code, data, msg } = await api.financeApi.batchModify(params)
  679. if (code === 200) {
  680. ElMessage.success(msg)
  681. batchEditShow.value = false
  682. }
  683. }
  684. let importModifyCallback = ref()// 导入数据回调
  685. const uploadJYFile = async (file) => {
  686. let files = file.raw
  687. const params = new FormData(); // 声明formData数据类型
  688. params.append("file", files);
  689. const { code, data, msg } = await api.financeApi.importPlatformExcel(params)
  690. if (code == 200) {
  691. importModifyCallback.value = data
  692. ElMessage({
  693. message: msg,
  694. type: 'success'
  695. })
  696. }
  697. }
  698. // 下载导入失败文件
  699. const downloadImportFailedData = (item) => {
  700. const link = document.createElement('a');
  701. link.href = item.failFileUrl;
  702. link.download = '';
  703. // 触发下载
  704. document.body.appendChild(link);
  705. link.click();
  706. document.body.removeChild(link);
  707. }
  708. // 分页
  709. let pages = ref(1)
  710. let size = ref(10)
  711. const handleSizeChange = (val) => {
  712. size.value = val
  713. if (activeName.value == '1') {
  714. getPlatFormReceivableList()
  715. } else if (activeName.value == '2') {
  716. getPlatformReceivableList()
  717. }
  718. }
  719. const handleCurrentChange = (val) => {
  720. pages.value = val
  721. if (activeName.value == '1') {
  722. getPlatFormReceivableList()
  723. } else if (activeName.value == '2') {
  724. getPlatformReceivableList()
  725. }
  726. }
  727. // 获取险种
  728. let insuranceType = ref([])
  729. const dictDetails = () => {
  730. api.additionalApi.dictDetails('insurance_type').then((res: any) => {
  731. if (res.code == 200) {
  732. insuranceType.value = res.data
  733. }
  734. })
  735. }
  736. // 保险公司
  737. let companyList = ref([])
  738. const initCompany = () => {
  739. api.insuranceApi.leftList('').then((res: any) => {
  740. if (res.code == 200) {
  741. companyList.value = res.data
  742. }
  743. })
  744. }
  745. // 归属
  746. let deptOption = ref([])
  747. const cascaderProps = {
  748. value: 'id',
  749. label: 'name',
  750. children: 'children',
  751. checkStrictly: true,
  752. }
  753. const initDept = () => {
  754. api.insuranceApi.getDeptTree({ sysCode: localStorage.getItem('sysCode') }).then((res: any) => {
  755. if (res.code == 200) {
  756. deptOption.value = res.data
  757. } else {
  758. ElMessage({
  759. message: res.msg,
  760. type: 'warning'
  761. })
  762. }
  763. })
  764. }
  765. // 编辑
  766. const toEdit = (row: any) => {
  767. console.log(row)
  768. myRouter.push({
  769. path: '/finance/auditOrderDetail',
  770. query: {
  771. id: row.orderNo,
  772. jumpType: 'costMsg'
  773. }
  774. })
  775. }
  776. // 车险列表
  777. const getPlatFormReceivableList = () => {
  778. let params = {
  779. ...receivableForm.value,
  780. jqStartDate: receivableForm.value?.jqDate?.[0],
  781. jqEndDate: receivableForm.value?.jqDate?.[1],
  782. syStartDate: receivableForm.value?.syDate?.[0],
  783. syEndDate: receivableForm.value?.syDate?.[1],
  784. queryType: '1'
  785. }
  786. api.financeApi.getPlatFormReceivableList({
  787. ...params,
  788. pages: pages.value,
  789. size: size.value
  790. }).then((res: any) => {
  791. if (res.code == 200) {
  792. receivedAmountTotal.value = res.data.allAmount
  793. receiveData.value = res.data.insPlyIncomePage.records
  794. allData.value = res.data.insPlyIncomeOrders
  795. total1.value = res.data.insPlyIncomePage.total
  796. receiveData.value.forEach(element => {
  797. if (selectedList.value.find(v => v.id === element.id)) {
  798. nextTick(() => {
  799. ReceiveDataRef1.value!.toggleRowSelection(element, true)
  800. })
  801. }
  802. });
  803. }
  804. })
  805. }
  806. // 非车险列表
  807. const getPlatformReceivableList = () => {
  808. let params = {
  809. licenseNo: receivableForm.value?.licenseNo,
  810. companyId: receivableForm.value?.companyId,
  811. signingStartTime: receivableForm.value?.signingTime?.[0],
  812. signingEndTime: receivableForm.value?.signingTime?.[1],
  813. orderNo: receivableForm.value?.orderNo,
  814. agreementId: receivableForm.value?.agreementId,
  815. deptId: receivableForm.value?.deptId,
  816. riskCode: receivableForm.value?.riskCode,
  817. orderType: receivableForm.value?.orderType,
  818. insuredName: receivableForm.value?.insuredName,
  819. jqPolicyNo: receivableForm.value?.jqPolicyNo,
  820. syPolicyNo: receivableForm.value?.syPolicyNo,
  821. dockingPerson: receivableForm.value?.dockingPerson,
  822. jqStartDate: receivableForm.value?.jqDate?.[0],
  823. jqEndDate: receivableForm.value?.jqDate?.[1],
  824. syStartDate: receivableForm.value?.syDate?.[0],
  825. syEndDate: receivableForm.value?.syDate?.[1],
  826. queryType: '3',
  827. }
  828. api.financeApi.getPlatformReceivableList({
  829. ...params,
  830. pageNo: pages.value,
  831. pageSize: size.value
  832. }).then((res: any) => {
  833. if (res.code == 200) {
  834. receiveData.value = res.data.records
  835. total2.value = res.data.total
  836. }
  837. })
  838. }
  839. const exportPlatformReceivable = () => {
  840. let params = {
  841. licenseNo: receivableForm.value?.licenseNo,
  842. companyId: receivableForm.value?.companyId,
  843. signingStartTime: receivableForm.value?.signingTime?.[0],
  844. signingEndTime: receivableForm.value?.signingTime?.[1],
  845. orderNo: receivableForm.value?.orderNo,
  846. agreementId: receivableForm.value?.agreementId,
  847. deptId: receivableForm.value?.deptId,
  848. riskCode: receivableForm.value?.riskCode,
  849. orderType: receivableForm.value?.orderType,
  850. insuredName: receivableForm.value?.insuredName,
  851. jqPolicyNo: receivableForm.value?.jqPolicyNo,
  852. syPolicyNo: receivableForm.value?.syPolicyNo,
  853. dockingPerson: receivableForm.value?.dockingPerson,
  854. jqStartDate: receivableForm.value?.jqDate?.[0],
  855. jqEndDate: receivableForm.value?.jqDate?.[1],
  856. syStartDate: receivableForm.value?.syDate?.[0],
  857. syEndDate: receivableForm.value?.syDate?.[1],
  858. queryType: activeName.value == '1' ? '1' : activeName.value == '2' ? '3' : '',
  859. }
  860. api.financeApi.exportPlatformReceivable(params).then((res: any) => {
  861. if (res.code == 200) {
  862. const link = document.createElement('a');
  863. link.href = res.msg;
  864. link.download = '';
  865. // 触发下载
  866. document.body.appendChild(link);
  867. link.click();
  868. document.body.removeChild(link);
  869. }
  870. })
  871. }
  872. // 批量结算
  873. const batchSettle = () => {
  874. if (selectedList.value.length == 0) {
  875. myRouter.push({
  876. name: 'Platformticket',
  877. query: {
  878. invoiceType: "5"
  879. }
  880. })
  881. } else {
  882. if (selectedList.value.some((item: any) => item.settlementStatusName == '已结算')) {
  883. ElMessage({
  884. message: '存在已结算数据,不能结算!',
  885. type: 'warning'
  886. })
  887. return
  888. }
  889. api.financeApi.queryReceivableContact({
  890. incomeIds: selectedList.value.map((item: any) => item.id)
  891. }).then((res: any) => {
  892. if (res.code == 200) {
  893. options.value = res.data.filter(v => v.contactPersonPhone)
  894. invoiceShow.value = true
  895. }
  896. })
  897. }
  898. }
  899. onMounted(() => {
  900. dictDetails();
  901. initCompany();
  902. initDept();
  903. getPlatFormReceivableList();
  904. })
  905. </script>
  906. <style scoped lang="scss">
  907. @use "@/assets/styles/common/style.scss";
  908. .icon_s {
  909. display: flex;
  910. align-items: center;
  911. justify-content: flex-end;
  912. margin-left: 20px;
  913. color: #00a0f4;
  914. cursor: pointer;
  915. .is_icon {
  916. transition: ease 0.2s;
  917. }
  918. .is_down {
  919. transform: rotate(180deg);
  920. }
  921. }
  922. .add-content {
  923. width: 100%;
  924. max-height: 600px;
  925. }
  926. .pagination {
  927. margin-top: 10px;
  928. display: flex;
  929. justify-content: end;
  930. }
  931. :deep(.el-radio) {
  932. width: 100%;
  933. }
  934. </style>