index.vue 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryParams"
  5. ref="queryForm"
  6. v-show="showSearch"
  7. label-width="100px"
  8. size="mini"
  9. >
  10. <el-row>
  11. <el-col :span="6">
  12. <el-form-item label-width="100px" label="提单号" prop="mblno">
  13. <el-input
  14. v-model="queryParams.mblno"
  15. placeholder="请输入提单号"
  16. clearable
  17. size="small"
  18. @keyup.enter.native="handleQuery()"
  19. style="max-width: 187px"
  20. />
  21. </el-form-item>
  22. </el-col>
  23. <el-col :span="6">
  24. <el-form-item label="客户名称" prop="corpId">
  25. <el-select
  26. v-model="queryParams.corpId"
  27. placeholder="请输入客户名称"
  28. clearable
  29. size="small"
  30. filterable
  31. >
  32. <el-option
  33. v-for="(dict, index) in fMblnoOptions"
  34. :key="index.fId"
  35. :label="dict.fName"
  36. :value="dict.fId"
  37. />
  38. </el-select> </el-form-item
  39. ></el-col>
  40. <el-col :span="6">
  41. <el-form-item label-width="100px" label="业务类型" prop="billType">
  42. <el-select
  43. v-model="queryParams.billType"
  44. placeholder="请选择业务类型"
  45. clearable
  46. size="small"
  47. >
  48. <el-option
  49. v-for="(dict, index) in billTypeList"
  50. :key="index.dictValue"
  51. :label="dict.dictLabel"
  52. :value="dict.dictValue"
  53. />
  54. </el-select>
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="6">
  58. <el-form-item label-width="100px" label="运输方式" prop="transType">
  59. <el-select
  60. v-model="queryParams.transType"
  61. placeholder="请选择运输方式"
  62. clearable
  63. size="small"
  64. >
  65. <el-option
  66. v-for="(dict, index) in transTypeList"
  67. :key="index.dictValue"
  68. :label="dict.dictLabel"
  69. :value="dict.dictValue"
  70. />
  71. </el-select>
  72. </el-form-item>
  73. </el-col>
  74. </el-row>
  75. <el-collapse-transition>
  76. <div v-show="show">
  77. <el-row>
  78. <el-col :span="6">
  79. <el-form-item
  80. label-width="100px"
  81. label="运输性质"
  82. prop="transProp"
  83. >
  84. <el-select
  85. v-model="queryParams.transProp"
  86. placeholder="请选择运输性质"
  87. clearable
  88. size="small"
  89. >
  90. <el-option
  91. v-for="(dict, index) in transPropList"
  92. :key="index.dictValue"
  93. :label="dict.dictLabel"
  94. :value="dict.dictValue"
  95. />
  96. </el-select>
  97. </el-form-item>
  98. </el-col>
  99. <el-col :span="6">
  100. <el-form-item label-width="100px" label="货品名称" prop="goodsId">
  101. <el-select
  102. v-model="queryParams.goodsId"
  103. placeholder="请输入货品名称"
  104. clearable
  105. size="small"
  106. filterable
  107. >
  108. <el-option
  109. v-for="(dict, index) in goodsOptions"
  110. :key="index.fId"
  111. :label="dict.fName"
  112. :value="dict.fId"
  113. />
  114. </el-select>
  115. </el-form-item>
  116. </el-col>
  117. <el-col :span="6">
  118. <el-form-item
  119. label-width="100px"
  120. label="提箱地点"
  121. prop="loadAddr"
  122. >
  123. <el-input
  124. v-model="queryParams.loadAddr"
  125. placeholder="请输入提箱地点"
  126. clearable
  127. size="small"
  128. @keyup.enter.native="handleQuery()"
  129. style="max-width: 187px"
  130. />
  131. </el-form-item>
  132. </el-col>
  133. <el-col :span="6">
  134. <el-form-item
  135. label-width="100px"
  136. label="装卸货地点"
  137. prop="mdLoadAddr"
  138. >
  139. <el-input
  140. v-model="queryParams.mdLoadAddr"
  141. placeholder="请输入装卸货地点"
  142. clearable
  143. size="small"
  144. @keyup.enter.native="handleQuery()"
  145. style="max-width: 187px"
  146. /> </el-form-item
  147. ></el-col>
  148. </el-row>
  149. <el-row>
  150. <el-col :span="6"
  151. ><el-form-item
  152. label-width="100px"
  153. label="卸箱地点"
  154. prop="unLoadAddr"
  155. >
  156. <el-input
  157. v-model="queryParams.unLoadAddr"
  158. placeholder="请输入卸箱地点"
  159. clearable
  160. size="small"
  161. @keyup.enter.native="handleQuery()"
  162. style="max-width: 187px"
  163. /> </el-form-item
  164. ></el-col>
  165. <el-col :span="6">
  166. <el-form-item
  167. label-width="100px"
  168. label="提箱时间"
  169. prop="cLoadDate"
  170. >
  171. <el-date-picker
  172. v-model="queryParams.cLoadDate"
  173. type="daterange"
  174. align="right"
  175. unlink-panels
  176. range-separator="至"
  177. start-placeholder="开始日期"
  178. end-placeholder="结束日期"
  179. :picker-options="pickerOptions"
  180. value-format="yyyy-MM-dd HH:mm-ss"
  181. :default-time="['00:00:00', '23:59:59']"
  182. >
  183. </el-date-picker>
  184. </el-form-item>
  185. </el-col>
  186. </el-row>
  187. </div>
  188. </el-collapse-transition>
  189. </el-form>
  190. <el-row :gutter="10" class="mb8">
  191. <el-col :span="1.5">
  192. <!-- <el-button size="mini" @click="handleQuery(null)">全 部</el-button>-->
  193. <el-badge
  194. :value="buttonValue.quantity"
  195. type="warning"
  196. style="margin-right: 10px"
  197. >
  198. <el-button size="mini" @click="handleQuery()">全 部</el-button>
  199. </el-badge>
  200. </el-col>
  201. <el-col :span="1.5">
  202. <el-badge
  203. :value="buttonValue.planDate"
  204. type="warning"
  205. style="margin-right: 10px"
  206. >
  207. <el-button size="mini" @click="handleQuery('planDate')"
  208. >未接单</el-button
  209. >
  210. </el-badge></el-col
  211. >
  212. <el-col :span="1.5">
  213. <el-badge
  214. :value="buttonValue.acceptDate"
  215. type="warning"
  216. style="margin-right: 10px"
  217. >
  218. <el-button size="mini" @click="handleQuery('acceptDate')"
  219. >未提箱</el-button
  220. >
  221. </el-badge></el-col
  222. >
  223. <el-col :span="1.5"
  224. ><el-badge
  225. :value="buttonValue.loadDate"
  226. type="warning"
  227. style="margin-right: 10px"
  228. ><el-button size="mini" @click="handleQuery('loadDate')"
  229. >未装卸货</el-button
  230. ></el-badge
  231. ></el-col
  232. >
  233. <el-col :span="1.5"
  234. ><el-badge
  235. :value="buttonValue.mdLoadDate"
  236. type="warning"
  237. style="margin-right: 10px"
  238. >
  239. <el-button size="mini" @click="handleQuery('mdLoadDate')"
  240. >未还卸柜</el-button
  241. ></el-badge
  242. >
  243. </el-col>
  244. <el-col :span="1.5"
  245. ><el-badge
  246. type="warning"
  247. style="margin-right: 10px"
  248. ><el-button size="mini" @click="handleQuery('unLoadDate')"
  249. >已完成</el-button
  250. ></el-badge
  251. ></el-col
  252. >
  253. <div class="tabSetting">
  254. <div style="margin-right: 20px">
  255. <el-button
  256. type="cyan"
  257. icon="el-icon-search"
  258. size="mini"
  259. @click="handleQuery()"
  260. >搜索</el-button
  261. >
  262. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
  263. >重置</el-button
  264. >
  265. <el-button
  266. v-show="show"
  267. @click="show = !show"
  268. icon="el-icon-arrow-up"
  269. size="mini"
  270. >展开</el-button
  271. >
  272. <el-button
  273. v-show="!show"
  274. @click="show = !show"
  275. icon="el-icon-arrow-down"
  276. size="mini"
  277. >展开</el-button
  278. >
  279. </div>
  280. <right-toolbar
  281. :showSearch.sync="showSearch"
  282. @queryTable="getList"
  283. ></right-toolbar>
  284. <div style="margin: 0 12px">
  285. <el-button
  286. icon="el-icon-setting"
  287. size="mini"
  288. circle
  289. @click="showSetting = !showSetting"
  290. ></el-button>
  291. </div>
  292. </div>
  293. </el-row>
  294. <el-dialog title="自定义列显示" :visible.sync="showSetting" width="700px">
  295. <div>配置排序列数据(拖动调整顺序)</div>
  296. <div style="margin-left: 17px">
  297. <el-checkbox
  298. v-model="allCheck"
  299. label="全选"
  300. @change="allChecked"
  301. ></el-checkbox>
  302. </div>
  303. <div style="padding: 4px; display: flex; justify-content: center">
  304. <draggable
  305. v-model="setRowList"
  306. group="site"
  307. animation="300"
  308. @start="onStart"
  309. @end="onEnd"
  310. handle=".indraggable"
  311. >
  312. <transition-group>
  313. <div
  314. v-for="item in setRowList"
  315. :key="item.surface"
  316. class="listStyle"
  317. >
  318. <div style="width: 500px" class="indraggable">
  319. <div class="progress" :style="{ width: item.width + 'px' }">
  320. <el-checkbox
  321. :label="item.name"
  322. v-model="item.checked"
  323. :true-label="0"
  324. :false-label="1"
  325. >{{ item.name }}
  326. </el-checkbox>
  327. </div>
  328. </div>
  329. <el-input-number
  330. v-model.number="item.width"
  331. controls-position="right"
  332. :min="1"
  333. :max="500"
  334. size="mini"
  335. ></el-input-number>
  336. </div>
  337. </transition-group>
  338. </draggable>
  339. </div>
  340. <span slot="footer" class="dialog-footer">
  341. <el-button @click="showSetting = false">取 消</el-button>
  342. <el-button @click="delRow" type="danger">重 置</el-button>
  343. <el-button type="primary" @click="save()">确 定</el-button>
  344. </span>
  345. </el-dialog>
  346. <el-table
  347. v-loading="loading"
  348. :data="ftmsorderbillscarsList"
  349. @selection-change="handleSelectionChange"
  350. >
  351. <el-table-column type="selection" width="55" align="center" />
  352. <el-table-column
  353. label="提单号"
  354. width="180"
  355. align="center"
  356. :show-overflow-tooltip="true"
  357. sortable
  358. fixed="left"
  359. >
  360. <template slot-scope="scope">
  361. <el-link :underline="false" type="primary"
  362. ><div @click="handleUpdate(scope.row)">
  363. {{ scope.row.mblno }}
  364. </div></el-link
  365. >
  366. </template>
  367. </el-table-column>
  368. <el-table-column
  369. v-for="(item, index) in getRowList"
  370. :key="index"
  371. :label="item.name"
  372. :width="item.width"
  373. :prop="item.label"
  374. align="center"
  375. :show-overflow-tooltip="true"
  376. sortable
  377. :fixed="item.fixed"
  378. />
  379. <el-table-column
  380. label="操作"
  381. align="center"
  382. class-name="small-padding fixed-width"
  383. fixed="right"
  384. width="150px"
  385. >
  386. <template slot-scope="scope">
  387. <el-button
  388. size="mini"
  389. type="text"
  390. icon="el-icon-edit"
  391. @click="handleUpdate(scope.row)"
  392. >查看</el-button
  393. >
  394. </template>
  395. </el-table-column>
  396. </el-table>
  397. <pagination
  398. v-show="total > 0"
  399. :total="total"
  400. :page.sync="queryParams.pageNum"
  401. :limit.sync="queryParams.pageSize"
  402. @pagination="getList"
  403. />
  404. <!-- 新增编辑弹框子组件 -->
  405. <add-or-update
  406. :addOrUpdateVisible="addOrUpdateVisible"
  407. :title="title"
  408. :form="form"
  409. :DList="DList"
  410. :CList="CList"
  411. :relevantAttachments="relevantAttachments"
  412. :disabled="disabled"
  413. :feesList="feesList"
  414. :allfMblnoOptions="allfMblnoOptions"
  415. @changeShow="showAddOrUpdate"
  416. @fixDisabled="fixDisabled"
  417. ref="addOrUpdateRef"
  418. ></add-or-update>
  419. </div>
  420. </template>
  421. <script>
  422. import AddOrUpdate from "./AddOrUpdate.vue";
  423. import {
  424. delFtmsorderbills,
  425. exportFtmsorderbills,
  426. } from "@/api/fleet/ftmsorderbills";
  427. import {
  428. listFtmsorderbillscars,
  429. exportFtmsorderbillscars,
  430. selectDriverFtmsorderbillscars,
  431. } from "@/api/fleet/ftmsorderbillscars";
  432. import { listGoods } from "@/api/basicdata/goods";
  433. import { listCorps ,selectCorpList} from "@/api/basicdata/corps";
  434. import { addSet, select, resetModule } from "@/api/system/set";
  435. import Cookies from "js-cookie";
  436. import draggable from "vuedraggable";
  437. export default {
  438. name: "plans",
  439. data() {
  440. return {
  441. //时间区间
  442. pickerOptions: {
  443. shortcuts: [
  444. {
  445. text: "最近一周",
  446. onClick(picker) {
  447. const end = new Date();
  448. const start = new Date();
  449. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  450. picker.$emit("pick", [start, end]);
  451. },
  452. },
  453. {
  454. text: "最近一个月",
  455. onClick(picker) {
  456. const end = new Date();
  457. const start = new Date();
  458. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  459. picker.$emit("pick", [start, end]);
  460. },
  461. },
  462. {
  463. text: "最近三个月",
  464. onClick(picker) {
  465. const end = new Date();
  466. const start = new Date();
  467. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  468. picker.$emit("pick", [start, end]);
  469. },
  470. },
  471. ],
  472. },
  473. feesList:[],
  474. // 控制新增编辑弹窗的显示与隐藏
  475. addOrUpdateVisible: false,
  476. // 非单个禁用
  477. single: true,
  478. // 非多个禁用
  479. multiple: true,
  480. // 显示搜索条件
  481. showSearch: true,
  482. // 订单主表格数据
  483. ftmsorderbillscarsList: [],
  484. relevantAttachments: [],
  485. // 总条数
  486. total: 0,
  487. // 查询参数
  488. queryParams: {
  489. pageNum: 1,
  490. pageSize: 10,
  491. corpId: null,
  492. carStatus: null,
  493. billType: null,
  494. transType: null,
  495. transProp: null,
  496. goodsId: null,
  497. mblno: null,
  498. loadAddr: null,
  499. mdLoadAddr: null,
  500. unLoadAddr: null,
  501. cLoadDate: null,
  502. },
  503. showSetting: false,
  504. drag: false,
  505. setRowList: [],
  506. getRowList: [],
  507. tableDate: [
  508. {
  509. surface: "1",
  510. label: "mdLoadDate",
  511. name: "装卸日期",
  512. checked: 0,
  513. width: 100,
  514. },
  515. {
  516. surface: "2",
  517. label: "billType",
  518. name: "贸易方式",
  519. checked: 0,
  520. width: 100,
  521. },
  522. {
  523. surface: "3",
  524. label: "transType",
  525. name: "运输方式",
  526. checked: 0,
  527. width: 100,
  528. },
  529. {
  530. surface: "4",
  531. label: "corpId",
  532. name: "托运人",
  533. checked: 0,
  534. width: 100,
  535. },
  536. {
  537. surface: "5",
  538. label: "ysl",
  539. name: "船名",
  540. checked: 0,
  541. width: 100,
  542. },
  543. {
  544. surface: "6",
  545. label: "voy",
  546. name: "航次",
  547. checked: 0,
  548. width: 100,
  549. },
  550. {
  551. surface: "8",
  552. label: "cntrQty",
  553. name: "柜量",
  554. checked: 0,
  555. width: 100,
  556. },
  557. {
  558. surface: "9",
  559. label: "cntrId",
  560. name: "柜型",
  561. checked: 0,
  562. width: 100,
  563. },
  564. {
  565. surface: "10",
  566. label: "goodsId",
  567. name: "品名",
  568. checked: 0,
  569. width: 100,
  570. },
  571. {
  572. surface: "11",
  573. label: "cntrWeight",
  574. name: "重量",
  575. checked: 0,
  576. width: 100,
  577. },
  578. {
  579. surface: "12",
  580. label: "polId",
  581. name: "起运港",
  582. checked: 0,
  583. width: 100,
  584. },
  585. {
  586. surface: "13",
  587. label: "podId",
  588. name: "目的港",
  589. checked: 0,
  590. width: 100,
  591. },
  592. {
  593. surface: "14",
  594. label: "loadAddr",
  595. name: "提箱场站",
  596. checked: 0,
  597. width: 100,
  598. },
  599. {
  600. surface: "15",
  601. label: "mdLoadAddr",
  602. name: "装货地",
  603. checked: 0,
  604. width: 100,
  605. },
  606. {
  607. surface: "16",
  608. label: "unLoadAddr",
  609. name: "卸货地",
  610. checked: 0,
  611. width: 100,
  612. },
  613. {
  614. surface: "17",
  615. label: "carregNo",
  616. name: "车号",
  617. checked: 0,
  618. width: 100,
  619. },
  620. {
  621. surface: "18",
  622. label: "driverName",
  623. name: "司机",
  624. checked: 0,
  625. width: 100,
  626. },
  627. {
  628. surface: "19",
  629. label: "orderNo",
  630. name: "运单号",
  631. checked: 0,
  632. width: 100,
  633. },
  634. {
  635. surface: "20",
  636. label: "driverTel",
  637. name: "司机电话",
  638. checked: 0,
  639. width: 100,
  640. },
  641. {
  642. surface: "21",
  643. label: "orderName",
  644. name: "状态",
  645. checked: 0,
  646. width: 100,
  647. },
  648. {
  649. surface: "22",
  650. label: "acceptDate",
  651. name: "接单日期",
  652. checked: 0,
  653. width: 100,
  654. },
  655. {
  656. surface: "23",
  657. label: "loadDate",
  658. name: "提箱日期",
  659. checked: 0,
  660. width: 100,
  661. },
  662. {
  663. surface: "24",
  664. label: "unLoadDate",
  665. name: "还柜日期",
  666. checked: 0,
  667. width: 100,
  668. },
  669. {
  670. surface: "25",
  671. label: "oilAmt",
  672. name: "油气费",
  673. checked: 0,
  674. width: 100,
  675. },
  676. {
  677. surface: "26",
  678. label: "driverbonus",
  679. name: "单趟提成",
  680. checked: 0,
  681. width: 100,
  682. },
  683. {
  684. surface: "27",
  685. label: "costOth",
  686. name: "其他费用",
  687. checked: 0,
  688. width: 100,
  689. },
  690. {
  691. surface: "28",
  692. label: "costRemarks",
  693. name: "备注",
  694. checked: 0,
  695. width: 100,
  696. },
  697. {
  698. surface: "29",
  699. label: "costomAmt05",
  700. name: "港杂费",
  701. checked: 0,
  702. width: 100,
  703. },
  704. {
  705. surface: "30",
  706. label: "costomAmt06",
  707. name: "提箱费",
  708. checked: 0,
  709. width: 100,
  710. },
  711. {
  712. surface: "31",
  713. label: "costomAmt03",
  714. name: "修洗费",
  715. checked: 0,
  716. width: 100,
  717. },
  718. {
  719. surface: "32",
  720. label: "costomAmt04",
  721. name: "吊装费",
  722. checked: 0,
  723. width: 100,
  724. },
  725. {
  726. surface: "33",
  727. label: "costomAmt01",
  728. name: "出口其他费用",
  729. checked: 0,
  730. width: 100,
  731. },
  732. {
  733. surface: "34",
  734. label: "costomStr01",
  735. name: "出口费用备注",
  736. checked: 0,
  737. width: 100,
  738. },
  739. {
  740. surface: "35",
  741. label: "costomAmt02",
  742. name: "进口其他费用",
  743. checked: 0,
  744. width: 100,
  745. },
  746. {
  747. surface: "36",
  748. label: "costomStr02",
  749. name: "进口费用备注",
  750. checked: 0,
  751. width: 100,
  752. },
  753. ],
  754. allCheck: false,
  755. title: "",
  756. form: {},
  757. DList: [],
  758. CList: [],
  759. disabled: false,
  760. goodsOptions: [],
  761. fMblnoOptions: [],
  762. transPropList: [],
  763. transTypeList: [],
  764. billTypeList: [],
  765. show: false,
  766. buttonValue: {},
  767. allfMblnoOptions:[]
  768. };
  769. },
  770. // 使用子组件
  771. components: {
  772. AddOrUpdate,
  773. draggable,
  774. },
  775. created() {
  776. this.setRowList = this.tableDate;
  777. this.getRowList = this.tableDate;
  778. this.getList();
  779. this.getDicts("data_billType").then((response) => {
  780. this.billTypeList = response.data;
  781. });
  782. this.getDicts("data_transType").then((response) => {
  783. this.transTypeList = response.data;
  784. });
  785. this.getDicts("data_transProp").then((response) => {
  786. this.transPropList = response.data;
  787. });
  788. listGoods().then((response) => {
  789. this.goodsOptions = response.rows;
  790. });
  791. listCorps().then((response) => {
  792. this.fMblnoOptions = response.rows;
  793. });
  794. this.getRow();
  795. if (this.$route.query.id) {
  796. this.reset();
  797. const data = { id: this.$route.query.id, billStatus: 1060 };
  798. selectDriverFtmsorderbillscars(data).then((response) => {
  799. if (response.data.cars.billType) {
  800. response.data.cars.billType = response.data.cars.billType.toString();
  801. }
  802. this.title = "查看详情页";
  803. this.form = response.data.cars;
  804. this.relevantAttachments = response.data.attachs;
  805. this.addOrUpdateVisible = !this.addOrUpdateVisible;
  806. this.feesList=[]
  807. });
  808. }
  809. },
  810. methods: {
  811. //列设置全选
  812. allChecked() {
  813. if (this.allCheck == true) {
  814. this.setRowList.map((e) => {
  815. return (e.checked = 0);
  816. });
  817. } else {
  818. this.setRowList.map((e) => {
  819. return (e.checked = 1);
  820. });
  821. }
  822. },
  823. //查询列数据
  824. getRow() {
  825. let that = this;
  826. this.data = {
  827. tableName: "状态跟踪",
  828. userId: Cookies.get("userName"),
  829. };
  830. select(this.data).then((res) => {
  831. if (res.data.length != 0) {
  832. this.getRowList = res.data.filter((e) => e.checked == 0);
  833. this.setRowList = res.data;
  834. this.setRowList = this.setRowList.reduce((res, item) => {
  835. res.push({
  836. surface: item.surface,
  837. label: item.label,
  838. name: item.name,
  839. checked: item.checked,
  840. width: item.width,
  841. fixed: item.fixed,
  842. });
  843. return res;
  844. }, []);
  845. }
  846. });
  847. },
  848. delRow() {
  849. this.data = {
  850. tableName: "状态跟踪",
  851. userId: Cookies.get("userName"),
  852. };
  853. resetModule(this.data).then((res) => {
  854. if (res.code == 200) {
  855. this.showSetting = false;
  856. this.setRowList = this.tableDate;
  857. this.getRowList = this.tableDate;
  858. }
  859. });
  860. },
  861. //保存列设置
  862. save() {
  863. this.showSetting = false;
  864. this.data = {
  865. tableName: "状态跟踪",
  866. userId: Cookies.get("userName"),
  867. sysTableSetList: this.setRowList,
  868. };
  869. addSet(this.data).then((res) => {
  870. if (res.code == 200) {
  871. this.showSetting = false;
  872. this.getRowList = this.setRowList.filter((e) => e.checked == 0);
  873. }
  874. });
  875. },
  876. //开始拖拽事件
  877. onStart() {
  878. this.drag = true;
  879. },
  880. //拖拽结束事件
  881. onEnd() {
  882. this.drag = false;
  883. },
  884. /** 查询订单主列表 */
  885. getList() {
  886. this.loading = true;
  887. listFtmsorderbillscars(this.queryParams).then((response) => {
  888. response.dataTable.rows.map((e) => {
  889. if (e.orderStatus == 10) {
  890. e.orderStatus = "车队安排";
  891. }
  892. if (e.orderStatus == 20) {
  893. e.orderStatus = "司机受理";
  894. }
  895. if (e.orderStatus == 30) {
  896. e.orderStatus = "司机出车";
  897. }
  898. if (e.orderStatus == 40) {
  899. e.orderStatus = "提箱";
  900. }
  901. if (e.orderStatus == 50) {
  902. e.orderStatus = "装卸货";
  903. }
  904. if (e.orderStatus == 60) {
  905. e.orderStatus = "还卸柜";
  906. }
  907. if (e.orderStatus == 70) {
  908. e.orderStatus = "费用确认";
  909. }
  910. if (e.orderStatus == 80) {
  911. e.orderStatus = "回单";
  912. }
  913. if (e.loadDate) {
  914. this.$set(e, "loadDate", e.loadDate.substring(0, 10));
  915. }
  916. if (e.acceptDate) {
  917. this.$set(e, "acceptDate", e.acceptDate.substring(0, 10));
  918. }
  919. if (e.mdLoadDate) {
  920. this.$set(e, "mdLoadDate", e.mdLoadDate.substring(0, 10));
  921. }
  922. if (e.unLoadDate) {
  923. this.$set(e, "unLoadDate", e.unLoadDate.substring(0, 10));
  924. }
  925. if (e.waybillDate) {
  926. e.waybillDate = e.waybillDate.substring(0, 10);
  927. }
  928. });
  929. this.ftmsorderbillscarsList = response.dataTable.rows;
  930. this.buttonValue = response.buttonValue;
  931. this.total = response.dataTable.total;
  932. this.loading = false;
  933. });
  934. },
  935. /** 新增按钮操作 */
  936. handleAdd() {
  937. this.reset();
  938. this.addOrUpdateVisible = !this.addOrUpdateVisible;
  939. this.title = "添加订单主";
  940. },
  941. // 表单重置
  942. reset() {
  943. this.form = {
  944. id: null,
  945. billNo: null,
  946. actId: null,
  947. corpId: null,
  948. transUserName: null,
  949. planUserName: null,
  950. billType: null,
  951. transType: null,
  952. transProp: null,
  953. ifContracted: null,
  954. contractNo: null,
  955. refNo: null,
  956. accstlType: null,
  957. accdays: null,
  958. goodsId: null,
  959. goodsPrice: null,
  960. goodsLossType: null,
  961. goodsLossStd: null,
  962. mblno: null,
  963. ysl: null,
  964. voy: null,
  965. pol: null,
  966. pod: null,
  967. qtyPlan: null,
  968. qtyDisPatch: null,
  969. weightPlan: null,
  970. cntrDesc: null,
  971. carNoList: null,
  972. loadAddr: null,
  973. loadAttn: null,
  974. loadAttntel: null,
  975. loadDate: null,
  976. mdLoadAddr: null,
  977. mdLoadAttn: null,
  978. mdLoadAttnTel: null,
  979. mdLoadDate: null,
  980. unLoadAddr: null,
  981. unLoadAttn: null,
  982. unLoadAttnTel: null,
  983. unLoadDate: null,
  984. routeId: null,
  985. routeDesc: null,
  986. ifWaybill: null,
  987. ifNeedinvDr: null,
  988. postDate: null,
  989. billStatus: 0,
  990. delFlag: null,
  991. createBy: null,
  992. createTime: null,
  993. updateBy: null,
  994. updateTime: null,
  995. remarks: null,
  996. };
  997. this.disabled = false;
  998. this.resetForm("form");
  999. this.relevantAttachments = [];
  1000. this.allfMblnoOptions=[]
  1001. this.feesList=[]
  1002. },
  1003. // 多选框选中数据
  1004. handleSelectionChange(selection) {
  1005. this.ids = selection.map((item) => item.id);
  1006. this.single = selection.length !== 1;
  1007. this.multiple = !selection.length;
  1008. },
  1009. /** 修改按钮操作 */
  1010. handleUpdate(row) {
  1011. this.reset();
  1012. const data = { id: row.id, billStatus: 1060 };
  1013. selectDriverFtmsorderbillscars(data).then((response) => {
  1014. selectCorpList(row.id).then((response) => {
  1015. this.allfMblnoOptions = response;
  1016. });
  1017. if (response.data.cars.billType) {
  1018. response.data.cars.billType = response.data.cars.billType.toString();
  1019. }
  1020. this.title = "查看详情页";
  1021. this.form = response.data.cars;
  1022. this.relevantAttachments = response.data.attachs;
  1023. this.feesList=response.data.feesList;
  1024. this.addOrUpdateVisible = !this.addOrUpdateVisible;
  1025. });
  1026. },
  1027. /** 删除按钮操作 */
  1028. handleDelete(row) {
  1029. const ids = row.id || this.ids;
  1030. this.$confirm('是否确认删除订单主编号为"' + ids + '"的数据项?', "警告", {
  1031. confirmButtonText: "确定",
  1032. cancelButtonText: "取消",
  1033. type: "warning",
  1034. })
  1035. .then(function () {
  1036. return delFtmsorderbills(ids);
  1037. })
  1038. .then(() => {
  1039. this.getList();
  1040. this.msgSuccess("删除成功");
  1041. });
  1042. },
  1043. /** 导出按钮操作 */
  1044. handleExport() {
  1045. const queryParams = this.queryParams;
  1046. this.$confirm("是否确认导出所有订单主数据项?", "警告", {
  1047. confirmButtonText: "确定",
  1048. cancelButtonText: "取消",
  1049. type: "warning",
  1050. })
  1051. .then(function () {
  1052. return exportFtmsorderbillscars(queryParams);
  1053. })
  1054. .then((response) => {
  1055. this.download(response.msg);
  1056. });
  1057. },
  1058. /** 搜索按钮操作 */
  1059. handleQuery(Status) {
  1060. this.queryParams.pageNum = 1;
  1061. if (Status) {
  1062. this.queryParams.carStatus = Status;
  1063. } else {
  1064. this.queryParams.carStatus = null;
  1065. }
  1066. this.getList();
  1067. },
  1068. /** 重置按钮操作 */
  1069. resetQuery() {
  1070. this.resetForm("queryForm");
  1071. this.handleQuery();
  1072. },
  1073. // 监听 子组件弹窗关闭后触发,有子组件调用
  1074. showAddOrUpdate(data) {
  1075. if (data === "false") {
  1076. this.addOrUpdateVisible = false;
  1077. } else {
  1078. this.addOrUpdateVisible = true;
  1079. }
  1080. },
  1081. fixDisabled(data) {
  1082. if (data === "false") {
  1083. this.disabled = false;
  1084. }
  1085. },
  1086. },
  1087. };
  1088. </script>
  1089. <style lang="scss" scoped>
  1090. .tabSetting {
  1091. display: flex;
  1092. justify-content: flex-end;
  1093. }
  1094. .listStyle {
  1095. display: flex;
  1096. border-top: 1px solid #dcdfe6;
  1097. border-left: 1px solid #dcdfe6;
  1098. border-right: 1px solid #dcdfe6;
  1099. }
  1100. .listStyle:last-child {
  1101. border-bottom: 1px solid #dcdfe6;
  1102. }
  1103. .progress {
  1104. display: flex;
  1105. align-items: center;
  1106. padding: 2px;
  1107. background-color: rgba(0, 0, 0, 0.05);
  1108. height: 100%;
  1109. }
  1110. </style>