index.vue 31 KB

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