form.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062
  1. <template>
  2. <!-- 添加或修改项目信息对话框 -->
  3. <div class="el-drawer__wrapper">
  4. <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
  5. <div class="page-container form-container">
  6. <div class="form-btns-container">
  7. <span class="title-label"
  8. ><el-icon>
  9. <Document />
  10. </el-icon>
  11. 支出信息</span
  12. >
  13. <template
  14. v-if="
  15. checkPermission(['business:payment:edit', 'business:payment:add'])
  16. "
  17. >
  18. <el-button
  19. v-if="editStatus"
  20. type="primary"
  21. size="small"
  22. icon="Finished"
  23. @click="submitForm"
  24. >保存</el-button
  25. >
  26. <el-button
  27. v-else-if="form.verifyStatus === 0"
  28. type="warning"
  29. size="small"
  30. icon="Edit"
  31. @click="editStatus = true"
  32. >修改</el-button
  33. >
  34. <el-button
  35. v-if="form.id && editStatus"
  36. size="small"
  37. icon="Close"
  38. @click="editStatus = false"
  39. >取消修改</el-button
  40. >
  41. </template>
  42. <el-button
  43. v-show="form.id && !editStatus && form.verifyStatus === 0"
  44. v-hasPermi="['business:payment:financialVerify']"
  45. type="primary"
  46. size="small"
  47. icon="Check"
  48. @click="verifyHandler"
  49. >财务审核</el-button
  50. >
  51. <el-button
  52. v-show="form.id && !editStatus && form.verifyStatus === 1"
  53. v-hasPermi="['business:payment:cashierVerify']"
  54. type="primary"
  55. size="small"
  56. icon="Check"
  57. @click="cashierVerifyHandler"
  58. >出纳审核</el-button
  59. >
  60. <div class="screen-btn" @click="handleScreen">
  61. <template v-if="!isFullscreen">
  62. <i class="fa fa-window-maximize" aria-hidden="true" />
  63. <!-- <span>全屏</span> -->
  64. </template>
  65. <template v-else>
  66. <i class="fa fa-window-restore" aria-hidden="true" />
  67. <!-- <span>还原</span> -->
  68. </template>
  69. </div>
  70. <div class="close-btn" @click="cancel">
  71. <i class="fa fa-times" aria-hidden="true" />
  72. <!-- <span>关闭</span> -->
  73. </div>
  74. </div>
  75. <div
  76. class="Y-scrollbar"
  77. style="
  78. position: absolute;
  79. top: 32px;
  80. bottom: 0;
  81. width: 100%;
  82. overflow: auto;
  83. "
  84. ></div>
  85. <el-form
  86. ref="orderRef"
  87. class="master-container"
  88. size="small"
  89. :model="form"
  90. :rules="rules"
  91. label-width="100px"
  92. >
  93. <el-row :gutter="30">
  94. <el-col :span="6">
  95. <el-form-item label="支出流水号:">
  96. <el-input
  97. v-if="editStatus"
  98. v-model.trim="form.flowNo"
  99. readonly
  100. size="small"
  101. type="text"
  102. placeholder="支出流水号"
  103. :clearable="true"
  104. />
  105. <span v-else>{{ form.flowNo }}</span>
  106. </el-form-item>
  107. </el-col>
  108. <el-col :span="6">
  109. <el-form-item label="支出日期:" prop="formDate" required>
  110. <el-date-picker
  111. v-if="editStatus"
  112. v-model="form.formDate"
  113. size="small"
  114. :clearable="true"
  115. format="YYYY-MM-DD"
  116. value-format="YYYY-MM-DD"
  117. align="center"
  118. type="date"
  119. placeholder="支出日期"
  120. />
  121. <span v-else>{{ form.formDate }}</span>
  122. </el-form-item>
  123. </el-col>
  124. <el-col :span="6">
  125. <el-form-item label="支出类目:">
  126. <el-select
  127. v-if="editStatus"
  128. v-model.trim="form.paymentCauseId"
  129. placeholder="支出类目"
  130. size="small"
  131. :clearable="true"
  132. @change="paymentCauseChange"
  133. >
  134. <el-option
  135. v-for="item in paymentTypes"
  136. :key="item.id"
  137. :label="item.name"
  138. :value="item.id"
  139. />
  140. </el-select>
  141. <span v-else>{{ form.paymentCause }}</span>
  142. </el-form-item>
  143. </el-col>
  144. <el-col :span="6">
  145. <el-form-item label="支出科目:">
  146. <el-select
  147. v-if="editStatus"
  148. v-model.trim="form.paymentSubjectId"
  149. placeholder="支出科目"
  150. size="small"
  151. :clearable="true"
  152. @change="paymentSubjectChange"
  153. >
  154. <el-option
  155. v-for="item in paymentSubjects"
  156. :key="item.id"
  157. :label="item.name"
  158. :value="item.id"
  159. />
  160. </el-select>
  161. <span v-else>{{ form.paymentSubject }}</span>
  162. </el-form-item>
  163. </el-col>
  164. <el-col :span="6">
  165. <el-form-item label="收款账户名:">
  166. <el-input
  167. v-if="editStatus"
  168. v-model.trim="form.acceptAccount"
  169. size="small"
  170. type="text"
  171. placeholder="收款账户名"
  172. :clearable="true"
  173. />
  174. <span v-else>{{ form.acceptAccount }}</span>
  175. </el-form-item>
  176. </el-col>
  177. <el-col :span="6">
  178. <el-form-item label="收款账号:">
  179. <template v-if="editStatus">
  180. <el-input
  181. v-model.trim="form.acceptAccountNo"
  182. size="small"
  183. type="text"
  184. style="width: 66.67%"
  185. placeholder="收款账号"
  186. :clearable="true"
  187. />
  188. </template>
  189. <span v-else
  190. >{{ form.acceptAccountType }} -
  191. {{ form.acceptAccountNo }}</span
  192. >
  193. </el-form-item>
  194. </el-col>
  195. <el-col :span="6">
  196. <el-form-item label="客户名称" prop="companyName" required>
  197. <el-autocomplete
  198. v-if="editStatus"
  199. :fetch-suggestions="querySearchCompanyAsync"
  200. :trigger-on-focus="true"
  201. v-model="form.companyName"
  202. placeholder="请输入客户名称"
  203. popper-class="my-autocomplete"
  204. @select="handleSelectCompany"
  205. >
  206. <template #default="{ item }">
  207. <div
  208. style="
  209. display: flex;
  210. flex-direction: row;
  211. justify-content: space-between;
  212. "
  213. >
  214. <div class="name" style="font-size: 12px">
  215. {{ item.name }}
  216. </div>
  217. <!-- <span class="code" style="font-size: 10px; color: darkgrey">{{ item.code }}</span> -->
  218. </div>
  219. </template>
  220. </el-autocomplete>
  221. <span v-else>{{ form.companyName }}</span>
  222. </el-form-item>
  223. </el-col>
  224. <el-col :span="6">
  225. <el-form-item label="合同:" required>
  226. <el-input
  227. v-if="editStatus"
  228. v-model.trim="form.contractNo"
  229. size="small"
  230. type="text"
  231. placeholder="请选择"
  232. :clearable="true"
  233. >
  234. <template #append>
  235. <el-button
  236. icon="Search"
  237. @click="() => contractChoiceHandler()"
  238. />
  239. </template>
  240. </el-input>
  241. <span v-else style="width: 100%">
  242. <el-tooltip :content="form.contractNo">
  243. <!-- <el-button class="text-overflow" type="primary" link @click="(showContractDialog(currentContract.contractId))">{{ currentContract.formNo }}</el-button> -->
  244. {{ form.contractNo }}
  245. </el-tooltip>
  246. </span>
  247. </el-form-item>
  248. </el-col>
  249. <el-col :span="6">
  250. <el-form-item label="应收款金额:" prop="remark">
  251. <span>{{ rowNum(form.contractAmount) }}</span>
  252. </el-form-item>
  253. </el-col>
  254. <el-col :span="6">
  255. <el-form-item label="已支出金额:" prop="remark">
  256. <span>{{ rowNum(form.payedAmount) }}</span>
  257. </el-form-item>
  258. </el-col>
  259. <el-col :span="6">
  260. <el-form-item label="支出金额:" required>
  261. <el-input-number
  262. v-if="editStatus"
  263. v-model.trim="form.amount"
  264. size="small"
  265. placeholder="收款金额"
  266. :clearable="true"
  267. :precision="2"
  268. controls-position="right"
  269. :controls="false"
  270. @change="amountChange"
  271. />
  272. <span v-else>{{ rowNum(form.amount) }}</span>
  273. </el-form-item>
  274. </el-col>
  275. <el-col v-if="form.verifyStatus === 2" :span="6">
  276. <el-form-item label="驳回原因:" required>
  277. <span>{{ form.verifyComment }}</span>
  278. </el-form-item>
  279. </el-col>
  280. <el-col :span="12">
  281. <el-form-item label="备注:">
  282. <el-input
  283. v-if="editStatus"
  284. v-model.trim="form.remark"
  285. size="small"
  286. type="text"
  287. placeholder="备注"
  288. :clearable="true"
  289. />
  290. <span v-else style="word-break: break-all">{{
  291. form.remark
  292. }}</span>
  293. </el-form-item>
  294. </el-col>
  295. </el-row>
  296. </el-form>
  297. <div class="details-container">
  298. <el-row :gutter="2" style="height: 100%">
  299. <el-col :span="18">
  300. <div class="details-head">
  301. <div class="title">
  302. <i class="fa fa-th-list" aria-hidden="true" /> 收款明细
  303. </div>
  304. </div>
  305. <div class="details-body">
  306. <el-table
  307. ref="filesTable"
  308. :data="form.details"
  309. size="small"
  310. height="100%"
  311. border
  312. header-row-class-name="list-header-row"
  313. highlight-current-row
  314. >
  315. <el-table-column
  316. type="index"
  317. label="序号"
  318. width="47"
  319. align="center"
  320. />
  321. <el-table-column
  322. label="任务名称"
  323. prop="taskTypeName"
  324. align="center"
  325. show-overflow-tooltip
  326. >
  327. </el-table-column>
  328. <el-table-column
  329. label="任务金额"
  330. prop="amount"
  331. width="100"
  332. align="center"
  333. >
  334. <template #default="scope">
  335. <span>{{ rowNum(scope.row.amount) }}</span>
  336. </template>
  337. </el-table-column>
  338. <el-table-column
  339. label="本次支出金额"
  340. prop="paymentAmount"
  341. width="100"
  342. align="center"
  343. >
  344. <template #default="scope">
  345. <template v-if="editStatus">
  346. <el-input-number
  347. v-model="scope.row.paymentAmount"
  348. size="small"
  349. placeholder="本次支出金额"
  350. :precision="2"
  351. :controls="false"
  352. style="width: 100%"
  353. @change="
  354. (arg) =>
  355. amountChangeHandler(
  356. arg,
  357. scope.row,
  358. 'paymentAmount'
  359. )
  360. "
  361. />
  362. </template>
  363. <template v-else>{{
  364. rowNum(scope.row.paymentAmount)
  365. }}</template>
  366. </template>
  367. </el-table-column>
  368. <el-table-column
  369. label="已支出金额"
  370. prop="payment"
  371. width="100"
  372. align="center"
  373. >
  374. <template #default="scope">
  375. <span>{{ rowNum(scope.row.amount) }}</span>
  376. </template>
  377. </el-table-column>
  378. </el-table>
  379. </div>
  380. </el-col>
  381. <el-col :span="6">
  382. <div class="details-head">
  383. <div class="title">
  384. <i class="fa fa-th-list" aria-hidden="true" /> 附件
  385. <i style="color: red">*</i>
  386. </div>
  387. <el-upload
  388. v-if="editStatus"
  389. action="#"
  390. :http-request="upload"
  391. :with-credentials="true"
  392. :show-file-list="false"
  393. multiple
  394. >
  395. <el-button size="small" type="primary" icon="Upload"
  396. >点击上传</el-button
  397. >
  398. </el-upload>
  399. </div>
  400. <div class="details-body">
  401. <el-table
  402. ref="filesTable"
  403. :data="form.files"
  404. size="small"
  405. height="100%"
  406. border
  407. header-row-class-name="list-header-row"
  408. highlight-current-row
  409. >
  410. <el-table-column
  411. type="index"
  412. label="序号"
  413. width="47"
  414. align="center"
  415. />
  416. <el-table-column
  417. label="文件名"
  418. prop="originalFileName"
  419. align="center"
  420. show-overflow-tooltip
  421. >
  422. <template #default="scope">
  423. <el-button
  424. size="small"
  425. type="primary"
  426. link
  427. @click="openFile(scope.row)"
  428. >{{ scope.row.originalFileName }}</el-button
  429. >
  430. </template>
  431. </el-table-column>
  432. <el-table-column label="操作" width="50" align="center">
  433. <template #default="scope">
  434. <div v-if="editStatus">
  435. <el-button
  436. size="small"
  437. link
  438. type="danger"
  439. @click="handlerDelAttach(scope.row, scope.$index)"
  440. >删除</el-button
  441. >
  442. </div>
  443. </template>
  444. </el-table-column>
  445. </el-table>
  446. </div>
  447. </el-col>
  448. </el-row>
  449. </div>
  450. </div>
  451. </el-drawer>
  452. <el-dialog
  453. title="财务审核详情"
  454. v-model="rejectOpen"
  455. width="500px"
  456. append-to-body
  457. draggable
  458. >
  459. <el-form ref="dictRef" :model="rejectForm" label-width="100" size="small">
  460. <el-form-item label="审核状态">
  461. <el-select
  462. v-model.trim="rejectForm.verifyStatus"
  463. placeholder="请选择"
  464. size="small"
  465. >
  466. <el-option
  467. v-for="i in verified"
  468. :key="i.value"
  469. :label="i.label"
  470. :value="i.value"
  471. />
  472. </el-select>
  473. </el-form-item>
  474. <!-- <el-form-item label="支出附件上传" required>
  475. </el-form-item> -->
  476. <el-form-item
  477. :label="rejectForm.verifyStatus == 2 ? '驳回原因' : '审核意见'"
  478. :prop="verifyRemark"
  479. >
  480. <el-input
  481. v-model.trim="rejectForm.verifyComment"
  482. type="textarea"
  483. maxlength="200"
  484. show-word-limit
  485. :rows="3"
  486. placeholder="请输入审核意见"
  487. />
  488. </el-form-item>
  489. </el-form>
  490. <template #footer>
  491. <div class="dialog-footer">
  492. <el-button
  493. type="primary"
  494. icon="Finished"
  495. size="small"
  496. @click="verifyUpload()"
  497. >确 定</el-button
  498. >
  499. <el-button icon="close" size="small" @click="rejectCancel"
  500. >取 消</el-button
  501. >
  502. </div>
  503. </template>
  504. </el-dialog>
  505. <el-dialog
  506. title="出纳审核详情"
  507. v-model="cashierOpen"
  508. width="500px"
  509. append-to-body
  510. draggable
  511. >
  512. <el-form ref="dictRef" :model="form" label-width="100" size="small">
  513. <el-form-item label="审核状态">
  514. <el-select
  515. v-model.trim="cashierForm.verifyStatus"
  516. placeholder="请选择"
  517. size="small"
  518. >
  519. <el-option
  520. v-for="i in cashierVerified"
  521. :key="i.value"
  522. :label="i.label"
  523. :value="i.value"
  524. />
  525. </el-select>
  526. </el-form-item>
  527. <el-form-item label="实际支出时间" required>
  528. <el-date-picker
  529. v-model.trim="cashierForm.actuallyDate"
  530. size="small"
  531. :clearable="true"
  532. format="YYYY-MM-DD HH:mm:ss"
  533. value-format="YYYY-MM-DD HH:mm:ss"
  534. align="center"
  535. type="datetime"
  536. placeholder="实际付款时间"
  537. />
  538. </el-form-item>
  539. <!-- <el-form-item label="支出附件上传" required>
  540. </el-form-item> -->
  541. <el-form-item
  542. :label="cashierForm.verifyStatus == 4 ? '驳回原因' : '审核意见'"
  543. :prop="cashierVerifyComment"
  544. >
  545. <el-input
  546. v-model.trim="cashierForm.cashierVerifyComment"
  547. type="textarea"
  548. maxlength="200"
  549. show-word-limit
  550. :rows="3"
  551. placeholder="请输入审核意见"
  552. />
  553. </el-form-item>
  554. </el-form>
  555. <template #footer>
  556. <div class="dialog-footer">
  557. <el-button
  558. type="primary"
  559. icon="Finished"
  560. size="small"
  561. @click="cashierVerifyUpload()"
  562. >确 定</el-button
  563. >
  564. <el-button icon="close" size="small" @click="cashierVerifyCancel"
  565. >取 消</el-button
  566. >
  567. </div>
  568. </template>
  569. </el-dialog>
  570. <dialog-contract-choice
  571. ref="contractChoiceRef"
  572. @choice="contractChoiceHandle"
  573. />
  574. </div>
  575. </template>
  576. <script setup>
  577. import { uploadFile } from "@/api/tool/file";
  578. // import {
  579. // getOrder,
  580. // initTaskTypes,
  581. // addOrder,
  582. // updateOrder,
  583. // verifyOrder,
  584. // alterOrder,
  585. // dissolutionOrder,
  586. // } from "@/api/business/crm/contract";
  587. import {
  588. listCompany,
  589. getPayment,
  590. savePayment,
  591. listTypes,
  592. listContractDetail,
  593. verifyPayment,
  594. } from "@/api/business/financial/payment";
  595. import { listSource } from "@/api/settings/source";
  596. import { listUser } from "@/api/system/user";
  597. import CustomerFormCom from "@/components/CustomerFormCom";
  598. import DialogContractChoice from "@/views/dialog/DialogContractChoice.vue";
  599. import { formatDate, rowNum } from "@/utils/index";
  600. import { ref } from "vue";
  601. import useUserStore from "@/store/modules/user";
  602. const { proxy } = getCurrentInstance();
  603. const baseUrl = import.meta.env.VITE_APP_BASE_API;
  604. /** 父组件传参 */
  605. const props = defineProps({
  606. getList: {
  607. type: Function,
  608. default: () => {},
  609. },
  610. });
  611. const { getList } = toRefs(props);
  612. /** 字典数组区 */
  613. const { virtual_address } = proxy.useDict("virtual_address");
  614. /** 表单抽屉 页变量 */
  615. const title = ref("");
  616. const loading = ref(false);
  617. const multiple = ref(true);
  618. const visible = ref(false);
  619. const editStatus = ref(false);
  620. const sourceCategories = ref([]);
  621. const type = ref("");
  622. const rejectOpen = ref(false);
  623. const rejectForm = ref({});
  624. const cashierForm = ref({});
  625. const detailEmpty = {
  626. id: null,
  627. taskTypeName: "",
  628. taskTypeId: null,
  629. serviceNum: undefined,
  630. freeNum: undefined,
  631. price: undefined,
  632. amount: undefined,
  633. addressStyle: undefined,
  634. address: undefined,
  635. fictionAddressId: undefined,
  636. tenantId: undefined,
  637. province: "",
  638. city: "",
  639. district: "",
  640. addressStyle: 1,
  641. provinceId: undefined,
  642. processes: [],
  643. defaultProcesses: [],
  644. };
  645. const provinces = ref(proxy.region.getProvinces());
  646. provinces.value.unshift({ code: "", name: "全部" });
  647. const cities = ref([]);
  648. const districts = ref([]);
  649. const paymentTypes = ref([]);
  650. const paymentSubjects = ref([]);
  651. const paymentEmpty = {
  652. id: null,
  653. flowNo: "",
  654. paymentCauseId: null,
  655. paymentSubjectId: null,
  656. acceptAccountTypeId: null,
  657. subsidiaryId: null,
  658. subsidiary: null,
  659. subsidiaryName: "",
  660. subsidiaryBankAccount: "",
  661. subsidiaryBankName: "",
  662. companyId: null,
  663. companyName: "",
  664. amount: 0,
  665. verifyStatus: 0,
  666. acceptAccount: "",
  667. accountBank: "",
  668. applierId: useUserStore().user.userId,
  669. applierName: "",
  670. creatorName: useUserStore().user.nickName,
  671. details: [],
  672. files: [],
  673. };
  674. const isFullscreen = ref(false);
  675. const webHost = import.meta.env.VITE_APP_BASE_API;
  676. const data = reactive({
  677. form: {},
  678. rules: {
  679. companyName: [
  680. { required: true, message: "客户名称不能为空", trigger: "blur" },
  681. ],
  682. formDate: [
  683. { required: true, message: "支出日期不能为空", trigger: "blur" },
  684. ],
  685. },
  686. timeOptions: { start: "08:30", step: "00:15", end: "18:30" },
  687. verified: [
  688. {
  689. value: 0,
  690. label: "未审核",
  691. },
  692. {
  693. value: 1,
  694. label: "通过",
  695. },
  696. {
  697. value: 2,
  698. label: "驳回",
  699. },
  700. ],
  701. cashierVerified: [
  702. {
  703. value: 1,
  704. label: "未审核",
  705. },
  706. {
  707. value: 3,
  708. label: "通过",
  709. },
  710. {
  711. value: 4,
  712. label: "驳回",
  713. },
  714. ],
  715. cashierOpen: false,
  716. });
  717. const { form, rules, timeOptions, verified, cashierVerified, cashierOpen } =
  718. toRefs(data);
  719. /*********************** 方法区 ****************************/
  720. /** 打开抽屉 */
  721. function open(id) {
  722. reset();
  723. visible.value = true;
  724. editStatus.value = true;
  725. if (id != null) {
  726. getPayment(id).then((res) => {
  727. form.value = res.data;
  728. editStatus.value = false;
  729. paymentCauseChange(form.value.paymentCauseId);
  730. paymentSubjectChange(form.value.paymentSubjectId);
  731. });
  732. }
  733. }
  734. function init() {
  735. Promise.all([listTypes()]).then((res) => {
  736. paymentTypes.value = res[0].rows;
  737. });
  738. }
  739. /** 取消按钮 */
  740. function cancel() {
  741. visible.value = false;
  742. reset();
  743. }
  744. /** 表单重置 */
  745. function reset() {
  746. form.value = JSON.parse(JSON.stringify(paymentEmpty));
  747. paymentSubjects.value = [];
  748. // console.log(form)
  749. // proxy.resetForm("orderRef");
  750. }
  751. /** 全屏缩放 */
  752. function handleScreen() {
  753. const dom = document.querySelector(
  754. ".list-container > .el-drawer__wrapper > .el-overlay"
  755. );
  756. isFullscreen.value = !isFullscreen.value;
  757. dom.style.position = isFullscreen.value ? "fixed" : "absolute";
  758. }
  759. /** 提交按钮 */
  760. function submitForm() {
  761. if (form.value.contractId === 0 || form.value.contractId == null) {
  762. proxy.$modal.msgError("请输入合同");
  763. return;
  764. }
  765. if (form.value.amount == null || form.value.amount === 0) {
  766. proxy.$modal.msgError("请输入支出金额");
  767. return;
  768. }
  769. if (form.value.amount > form.value.contractAmount - form.value.payedAmount) {
  770. proxy.$modal.msgError("支出金额大于合同金额");
  771. return;
  772. }
  773. proxy.$refs["orderRef"].validate((valid) => {
  774. if (valid && detailValid()) {
  775. const formValue = form.value;
  776. savePayment(formValue).then((res) => {
  777. open(res.data.id);
  778. getList.value();
  779. });
  780. }
  781. });
  782. }
  783. function detailValid() {
  784. if (form.value.files.length === 0) {
  785. proxy.$modal.msgError("收款附件为空");
  786. return false;
  787. }
  788. return true;
  789. }
  790. /** 查询表单信息 */
  791. function getForm() {
  792. loading.value = true;
  793. getOrder(form.value.id).then((response) => {
  794. loading.value = false;
  795. form.value = response.data;
  796. });
  797. }
  798. function handleServiceTypeClick(tab) {
  799. computedService();
  800. }
  801. function verifyHandler() {
  802. // proxy.$modal
  803. // .confirm("是否确认审核?")
  804. // .then((_) => {
  805. // verifyUpload(1);
  806. // })
  807. // .catch((_) => {
  808. // proxy.$modal.msg("取消审核");
  809. // });
  810. rejectHandler();
  811. }
  812. function cashierVerifyHandler() {
  813. cashierOpen.value = true;
  814. }
  815. function rejectHandler() {
  816. rejectOpen.value = true;
  817. rejectForm.value = proxy.deepClone(form.value);
  818. }
  819. function rejectCancel() {
  820. rejectOpen.value = false;
  821. rejectForm.value = {};
  822. }
  823. function cashierVerifyCancel() {
  824. cashierOpen.value = false;
  825. cashierForm.value = proxy.deepClone(form.value);
  826. }
  827. function rejectSubmitHandler() {
  828. if (form.value.verifyRemark === "" || form.value.verifyRemark == null) {
  829. proxy.$modal.msgError("请填写驳回原因");
  830. return;
  831. }
  832. }
  833. function verifyUpload() {
  834. // const formValue = proxy.deepClone(form.value);
  835. // formValue.verifyStatus = status;
  836. // formValue.status = status;
  837. if (rejectForm.value.verifyStatus === 0) {
  838. proxy.$modal.msgError("请选择审核结果");
  839. return;
  840. }
  841. if (
  842. rejectForm.value.verifyStatus === 2 &&
  843. (rejectForm.value.verifyComment == null ||
  844. rejectForm.value.verifyComment === "")
  845. ) {
  846. proxy.$modal.msgError("请输入审核意见");
  847. return;
  848. }
  849. // rejectForm.value.paymentStatus = rejectForm.value.verifyStatus === 1 ? 1 : 0;
  850. verifyPayment(rejectForm.value).then((res) => {
  851. open(form.value.id);
  852. getList.value();
  853. rejectCancel();
  854. proxy.$modal.msg("保存成功");
  855. });
  856. }
  857. function cashierVerifyUpload() {
  858. if (cashierForm.value.verifyStatus === 1) {
  859. proxy.$modal.msgError("请选择审核结果");
  860. return;
  861. }
  862. if (
  863. cashierForm.value.actuallyDate == null ||
  864. cashierForm.value.actuallyDate === ""
  865. ) {
  866. proxy.$modal.msgError("0");
  867. return;
  868. }
  869. if (
  870. cashierForm.value.verifyStatus === 4 &&
  871. (cashierForm.value.verifyComment == null ||
  872. cashierForm.value.verifyComment === "")
  873. ) {
  874. proxy.$modal.msgError("请输入审核意见");
  875. return;
  876. }
  877. cashierForm.value.paymentStatus =
  878. cashierForm.value.verifyStatus === 3 ? 1 : 0;
  879. verifyPayment(cashierForm.value).then((res) => {
  880. open(cashierForm.value.id);
  881. getList.value();
  882. cashierVerifyCancel();
  883. proxy.$modal.msg("保存成功");
  884. });
  885. }
  886. /** 文件上传 */
  887. function upload(param) {
  888. const fileForm = new FormData();
  889. fileForm.append("file", param.file);
  890. uploadFile(fileForm).then((res) => {
  891. if (res.code === 200) {
  892. const file = {};
  893. file.fileName = res.newFileName;
  894. file.url = res.url;
  895. file.originalFileName = res.originalFilename;
  896. file.fileUrl = res.fileName;
  897. form.value.files.push(file);
  898. }
  899. });
  900. }
  901. function handleDelFile(index) {
  902. form.value.files.splice(index, 1);
  903. }
  904. function amountChangeHandler(arg, row, field) {
  905. computeTotalAmount();
  906. }
  907. function computeTotalAmount() {
  908. let amount = 0;
  909. for (let index = 0; index < form.value.details.length; index++) {
  910. const element = form.value.details[index];
  911. amount += element.paymentAmount == null ? 0 : element.paymentAmount;
  912. }
  913. form.value.amount = amount;
  914. }
  915. function amountChange() {
  916. let amount = 0;
  917. if (form.value.details.length > 0) {
  918. for (let i = 0; i < form.value.details.length; i++) {
  919. amount = amount + form.value.details[i].paymentAmount;
  920. }
  921. // 判断到款状态
  922. form.value.paymentAmount = amount;
  923. if (form.value.paymentAmount > 0)
  924. form.value.arriveStatus =
  925. form.value.paymentAmount === form.value.amount ? 1 : 2;
  926. else form.value.arriveStatus = 0;
  927. }
  928. }
  929. function openFile(row) {
  930. window.open(`${baseUrl}${row.fileUrl}`);
  931. }
  932. function querySearchCompanyAsync(queryString, cb) {
  933. const query =
  934. queryString.length > 0
  935. ? {
  936. keyword: queryString,
  937. pageSize: 50,
  938. pageNum: 1,
  939. orderByColumn: "create_time",
  940. }
  941. : { pageSize: 50, pageNum: 1, orderByColumn: "create_time" };
  942. listCompany(query).then((res) => {
  943. cb(res.rows);
  944. });
  945. }
  946. function handleSelectCompany(item) {
  947. form.value.companyName = item.name;
  948. form.value.companyId = item.id;
  949. }
  950. function paymentCauseChange(arg) {
  951. const index = paymentTypes.value.findIndex((v) => v.id === arg);
  952. if (index >= 0) {
  953. paymentSubjects.value = [{ id: "0", name: "请选择" }].concat(
  954. paymentTypes.value[index].bizPaymentSubjectList
  955. );
  956. form.value.paymentCause = paymentTypes.value[index].name;
  957. if (
  958. paymentSubjects.value.findIndex(
  959. (v) => v.id === form.value.paymentSubjectId
  960. ) < 0
  961. ) {
  962. form.value.paymentSubjectId = null;
  963. form.value.paymentSubject = "";
  964. }
  965. }
  966. }
  967. function contractChoiceHandler() {
  968. if (form.value.companyId == null || form.value.companyId === "") {
  969. proxy.$modal.msgError("请选择客户");
  970. return;
  971. }
  972. proxy.$refs.contractChoiceRef.open({ companyId: form.value.companyId });
  973. }
  974. function contractChoiceHandle(info) {
  975. form.value.contractId = info.id;
  976. form.value.contractNo = info.contractNo;
  977. form.value.contractAmount = info.trueAmount;
  978. form.value.payedAmount = info.paidAmount;
  979. listContractDetail({ contractId: info.id }).then((res) => {
  980. const rows = res.rows;
  981. rows.forEach((item) => {
  982. const detail = {
  983. contractId: item.contractId,
  984. contractDetailId: item.id,
  985. customerId: form.value.companyId,
  986. taskTypeId: item.taskTypeId,
  987. amount: item.amount,
  988. taskTypeName: item.taskTypeName,
  989. };
  990. form.value.details.push(detail);
  991. });
  992. });
  993. }
  994. function handlerDelAttach(row, index) {
  995. proxy.$modal
  996. .confirm("确认删除该项么?")
  997. .then((_) => {
  998. form.value.files.splice(index, 1);
  999. })
  1000. .catch((err) => {
  1001. proxy.$modal.msgError("取消删除");
  1002. });
  1003. }
  1004. function paymentSubjectChange(id) {
  1005. const index = paymentSubjects.value.findIndex((v) => v.id === id);
  1006. if (index >= 0) {
  1007. form.value.paymentSubjectId = paymentSubjects.value[index].id;
  1008. }
  1009. }
  1010. function checkPermission(templatePermission) {
  1011. const all_permission = "*:*:*";
  1012. const permissions = useUserStore().permissions;
  1013. const hasPermissions = permissions.some((permission) => {
  1014. return (
  1015. all_permission === permission || templatePermission.includes(permission)
  1016. );
  1017. });
  1018. console.log(hasPermissions);
  1019. return hasPermissions;
  1020. }
  1021. init();
  1022. /** 暴露给父组件的方法 */
  1023. defineExpose({
  1024. open,
  1025. });
  1026. </script>