index.vue 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-row>
  5. <el-form-item label="航次" prop="fNo" label-width="110px">
  6. <el-input
  7. v-model="queryParams.fNo"
  8. style="width:200px"
  9. placeholder="请输入航次"
  10. clearable
  11. size="small"
  12. />
  13. </el-form-item>
  14. <el-form-item label="装货港" prop="fPortofloadid" label-width="110px">
  15. <el-select
  16. v-model="queryParams.fPortofloadid"
  17. style="width:200px"
  18. placeholder="请输入装货港名称"
  19. clearable
  20. :remote-method="portRemoteMethod"
  21. >
  22. <el-option
  23. v-for="item in this.portOptions"
  24. :key="item.fId"
  25. :label="item.fName"
  26. :value="item.fId"
  27. />
  28. </el-select>
  29. </el-form-item>
  30. <el-form-item label="卸货港" prop="fPortofdischargeid" label-width="110px">
  31. <el-select
  32. v-model="queryParams.fPortofdischargeid"
  33. style="width:200px"
  34. clearable
  35. placeholder="请输入卸货港名称"
  36. :remote-method="portRemoteMethod"
  37. >
  38. <el-option
  39. v-for="item in this.portOptions"
  40. :key="item.fId"
  41. :label="item.fName"
  42. :value="item.fId"
  43. />
  44. </el-select>
  45. </el-form-item>
  46. <el-form-item label="目的地" prop="fDistinationid" label-width="110px">
  47. <el-select
  48. v-model="queryParams.fDistinationid"
  49. style="width:200px"
  50. clearable
  51. placeholder="请输入目的地名称"
  52. :remote-method="portRemoteMethod"
  53. >
  54. <el-option
  55. v-for="item in this.portOptions"
  56. :key="item.fId"
  57. :label="item.fName"
  58. :value="item.fId"
  59. />
  60. </el-select>
  61. </el-form-item>
  62. </el-row>
  63. <div v-show="queryParamsHidden">
  64. <el-row>
  65. <el-form-item label="中转港" prop="fPortoftransshipment" label-width="110px">
  66. <el-select
  67. v-model="queryParams.fPortoftransshipment"
  68. style="width:200px"
  69. clearable
  70. placeholder="请输入中转港名称"
  71. :remote-method="portRemoteMethod"
  72. >
  73. <el-option
  74. v-for="item in this.portOptions"
  75. :key="item.fId"
  76. :label="item.fName"
  77. :value="item.fId"
  78. />
  79. </el-select>
  80. </el-form-item>
  81. <el-form-item label="预计开船日期" prop="fEtd" label-width="110px">
  82. <el-date-picker
  83. v-model="queryParams.fEtd"
  84. style="width:200px"
  85. type="date"
  86. clearable
  87. value-format="yyyy-MM-dd"
  88. placeholder="选择日期">
  89. </el-date-picker>
  90. </el-form-item>
  91. <el-form-item label="开船日期" prop="fAtd" label-width="110px">
  92. <el-date-picker
  93. v-model="queryParams.fAtd"
  94. style="width:200px"
  95. type="date"
  96. clearable
  97. value-format="yyyy-MM-dd"
  98. placeholder="选择日期">
  99. </el-date-picker>
  100. </el-form-item>
  101. <el-form-item label="到港日" prop="fAta" label-width="110px">
  102. <el-date-picker
  103. v-model="queryParams.fAta"
  104. style="width:200px"
  105. type="date"
  106. clearable
  107. value-format="yyyy-MM-dd"
  108. placeholder="选择日期">
  109. </el-date-picker>
  110. </el-form-item>
  111. <el-form-item label="船管人" prop="fManageid" label-width="110px">
  112. <el-select
  113. v-model="queryParams.fManageid"
  114. style="width:200px"
  115. clearable
  116. placeholder="请输入船管人"
  117. :remote-method="manageRemoteMethod"
  118. >
  119. <el-option
  120. v-for="item in this.getManageOptions"
  121. :key="item.userId"
  122. :label="item.userName"
  123. :value="item.userId"
  124. />
  125. </el-select>
  126. </el-form-item>
  127. <el-form-item label="航期" prop="fDays" label-width="110px">
  128. <el-input
  129. v-model="queryParams.fDays"
  130. style="width:200px"
  131. clearable
  132. size="small"
  133. />
  134. </el-form-item>
  135. <el-form-item label="状态" prop="fStatus" label-width="110px">
  136. <el-select v-model="queryParams.fStatus" style="width:200px" placeholder="请输入状态" clearable>
  137. <el-option label="正常" value='T'></el-option>
  138. <el-option label="停用" value='F'></el-option>
  139. </el-select>
  140. </el-form-item>
  141. <el-form-item label="录入人" prop="createBy" label-width="110px">
  142. <el-input
  143. v-model="queryParams.createBy"
  144. style="width: 200px"
  145. clearable
  146. size="small"
  147. />
  148. </el-form-item>
  149. <el-form-item label="备注" label-width="110px">
  150. <el-input
  151. v-model="queryParams.remark"
  152. type="textarea"
  153. style="width:200px"
  154. clearable
  155. size="small"
  156. />
  157. </el-form-item>
  158. </el-row>
  159. </div>
  160. </el-form>
  161. <el-row :gutter="10" class="mb8">
  162. <el-col :span="1.5">
  163. <el-button
  164. type="success"
  165. icon="el-icon-plus"
  166. size="mini"
  167. @click="handleAdd"
  168. v-hasPermi="['shipping:voyage:add']"
  169. >新增</el-button>
  170. </el-col>
  171. <el-col :span="1.5">
  172. <el-button
  173. type="warning"
  174. icon="el-icon-edit"
  175. size="mini"
  176. :disabled="single"
  177. @click="handleUpdate"
  178. v-hasPermi="['shipping:voyage:edit']"
  179. >修改</el-button>
  180. </el-col>
  181. <el-col :span="1.5">
  182. <el-button
  183. type="danger"
  184. icon="el-icon-delete"
  185. size="mini"
  186. :disabled="multiple"
  187. @click="handleDelete"
  188. v-hasPermi="['shipping:voyage:remove']"
  189. >删除</el-button>
  190. </el-col>
  191. <el-col :span="1.5">
  192. <el-button
  193. type="primary"
  194. icon="el-icon-download"
  195. size="mini"
  196. @click="handleExport"
  197. v-hasPermi="['basicdata:yard:import']"
  198. >导入</el-button>
  199. </el-col>
  200. <el-col :span="1.5">
  201. <el-button
  202. type="primary"
  203. icon="el-icon-download"
  204. size="mini"
  205. @click="handleExport"
  206. v-hasPermi="['shipping:voyage:export']"
  207. >导出</el-button>
  208. </el-col>
  209. <el-col :span="1.5">
  210. <el-button
  211. type="info"
  212. icon="el-icon-download"
  213. size="mini"
  214. @click="handleExport"
  215. v-hasPermi="['basicdata:yard:list']"
  216. >取消</el-button>
  217. </el-col>
  218. <el-col style="position: absolute;left:75%" :span="5" >
  219. <el-button size="small" @click="queryParamsHidden ? (queryParamsHidden = false) : (queryParamsHidden = true)">{{ queryParamsHidden ? '隐藏' : '更多' }}</el-button>
  220. <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  221. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  222. </el-col>
  223. <div class="tabSetting">
  224. <right-toolbar
  225. :showSearch.sync="showSearch"
  226. @queryTable="getList"
  227. ></right-toolbar>
  228. <div style="margin: 0 12px">
  229. <el-button
  230. icon="el-icon-setting"
  231. size="mini"
  232. circle
  233. @click="showSetting = !showSetting"
  234. ></el-button>
  235. </div>
  236. </div>
  237. </el-row>
  238. <el-dialog title="提示" :visible.sync="showSetting" width="700px" v-dialogDrag>
  239. <template slot="title">
  240. <div class="avue-crud__dialog__header">
  241. <span class="el-dialog__title">
  242. <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
  243. </span>
  244. </div>
  245. </template>
  246. <div>配置排序列数据(拖动调整顺序)</div>
  247. <div style="margin-left: 17px">
  248. <el-checkbox
  249. v-model="allCheck"
  250. label="全选"
  251. @change="allChecked"
  252. ></el-checkbox>
  253. </div>
  254. <div style="padding: 4px; display: flex; justify-content: center">
  255. <draggable
  256. v-model="setRowList"
  257. group="site"
  258. animation="300"
  259. @start="onStart"
  260. @end="onEnd"
  261. handle=".indraggable"
  262. >
  263. <transition-group>
  264. <div
  265. v-for="item in setRowList"
  266. :key="item.surface"
  267. class="listStyle"
  268. >
  269. <div style="width: 500px" class="indraggable">
  270. <div class="progress" :style="{ width: item.width + 'px' }">
  271. <el-checkbox
  272. :label="item.name"
  273. v-model="item.checked"
  274. :true-label="0"
  275. :false-label="1"
  276. >{{ item.name }}
  277. </el-checkbox>
  278. </div>
  279. </div>
  280. <el-input-number
  281. v-model.number="item.width"
  282. controls-position="right"
  283. :min="1"
  284. :max="500"
  285. size="mini"
  286. ></el-input-number>
  287. </div>
  288. </transition-group>
  289. </draggable>
  290. </div>
  291. <span slot="footer" class="dialog-footer">
  292. <el-button @click="showSetting = false">取 消</el-button>
  293. <el-button @click="delRow" type="danger">重 置</el-button>
  294. <el-button type="primary" @click="save()">确 定</el-button>
  295. </span>
  296. </el-dialog>
  297. <el-table v-loading="loading" :data="corpsList" @selection-change="handleSelectionChange">
  298. <el-table-column type="selection" width="55" align="center" />
  299. <el-table-column type="index" width="55" label="行号" align="center" fixed="left"/>
  300. <el-table-column
  301. v-for="(item, index) in getRowList"
  302. :key="index"
  303. :label="item.name"
  304. :width="item.width"
  305. :prop="item.label"
  306. align="center"
  307. :fixed="item.fixed"
  308. :show-overflow-tooltip="true"
  309. sortable
  310. >
  311. <template slot-scope="scope">
  312. <span v-if="item.label == 'fNo'">{{scope.row.fNo}}</span>
  313. <span v-if="item.label == 'pidName'">{{scope.row.pidName}}</span>
  314. <span v-if="item.label == 'portofloadidName'">{{scope.row.portofloadidName}}</span>
  315. <span v-if="item.label == 'portofdischargeidName'">{{scope.row.portofdischargeidName}}</span>
  316. <span v-if="item.label == 'distinationidName'">{{scope.row.distinationidName}}</span>
  317. <span v-if="item.label == 'portoftransshipmentName'">{{scope.row.portoftransshipmentName}}</span>
  318. <span v-if="item.label == 'fEtd'">{{scope.row.fEtd}}</span>
  319. <span v-if="item.label == 'fAtd'">{{scope.row.fAtd}}</span>
  320. <span v-if="item.label == 'fEta'">{{scope.row.fEta}}</span>
  321. <span v-if="item.label == 'fAta'">{{scope.row.fAta}}</span>
  322. <span v-if="item.label == 'manageidName'">{{scope.row.manageidName}}</span>
  323. <span v-if="item.label == 'fTel'">{{scope.row.fTel}}</span>
  324. <span v-if="item.label == 'fDays'">{{scope.row.fDays}}</span>
  325. <span v-if="item.label == 'fStatus'">{{scope.row.fStatus}}</span>
  326. <span v-if="item.label == 'remark'">{{scope.row.remark}}</span>
  327. <span v-if="item.label == 'createBy'">{{scope.row.createBy}}</span>
  328. <span v-if="item.label == 'createTime'">{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
  329. <span v-if="item.label == 'updateBy'">{{scope.row.updateBy}}</span>
  330. <span v-if="item.label == 'updateTime'">{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
  331. </template>
  332. </el-table-column>
  333. <!-- <el-table-column label="航次" align="center" prop="fNo" width="100px"/>-->
  334. <!-- <el-table-column :show-overflow-tooltip="true" label="装货港" align="center" prop="portofloadidName" width="100px"/>-->
  335. <!-- <el-table-column :show-overflow-tooltip="true" label="卸货港" align="center" width="100px" prop="portofdischargeidName" />-->
  336. <!-- <el-table-column :show-overflow-tooltip="true" label="目的地" align="center" prop="distinationidName" />-->
  337. <!-- <el-table-column :show-overflow-tooltip="true" label="中转港" align="center" prop="portoftransshipmentName" />-->
  338. <!-- <el-table-column label="预计开船日期" align="center" prop="fEtd" />-->
  339. <!-- <el-table-column label="开船日期" align="center" prop="fAtd" />-->
  340. <!-- <el-table-column label="预计到达日期" align="center" prop="fEta" />-->
  341. <!-- <el-table-column label="到港日" align="center" prop="fAta" />-->
  342. <!-- <el-table-column label="船管人" align="center" prop="manageidName" />-->
  343. <!-- <el-table-column label="联系方式" align="center" prop="fTel" />-->
  344. <!-- <el-table-column label="航期" align="center" prop="fDays" />-->
  345. <!-- <el-table-column label="状态" align="center" prop="fStatus" />-->
  346. <!-- <el-table-column label="备注" align="center" prop="remark" />-->
  347. <!-- <el-table-column label="录入人" align="center" prop="createBy" />-->
  348. <!-- <el-table-column label="录入时间" align="center" prop="createTime" width="100">-->
  349. <!-- <template slot-scope="scope">-->
  350. <!-- <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>-->
  351. <!-- </template>-->
  352. <!-- </el-table-column>-->
  353. <!-- <el-table-column label="最新修改人" align="center" prop="updateBy" width="100px"/>-->
  354. <!-- <el-table-column label="最新修改时间" align="center" prop="updateTime" width="100px">-->
  355. <!-- <template slot-scope="scope">-->
  356. <!-- <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>-->
  357. <!-- </template>-->
  358. <!-- </el-table-column>-->
  359. <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width" width="120px">
  360. <template slot-scope="scope">
  361. <el-button
  362. size="mini"
  363. type="text"
  364. icon="el-icon-edit"
  365. @click="handleUpdate(scope.row)"
  366. v-hasPermi="['shipping:voyage:edit']"
  367. >查看</el-button>
  368. <el-button
  369. size="mini"
  370. type="text"
  371. icon="el-icon-delete"
  372. v-hasPermi="['shipping:voyage:remove']"
  373. @click="handleDelete(scope.row)"
  374. >移除</el-button>
  375. </template>
  376. </el-table-column>
  377. </el-table>
  378. <pagination
  379. v-show="total>0"
  380. :total="total"
  381. :page.sync="queryParams.pageNum"
  382. :limit.sync="queryParams.pageSize"
  383. @pagination="getList"
  384. />
  385. <!-- 添加或修改客户详情对话框 -->
  386. <el-dialog
  387. v-dialogDrag
  388. :fullscreen="dialogFull"
  389. :title="title"
  390. :visible.sync="open"
  391. close-on-click-modal="false"
  392. width="60%"
  393. :close-on-click-modal="false"
  394. append-to-body>
  395. <template slot="title">
  396. <div class="avue-crud__dialog__header">
  397. <span class="el-dialog__title">
  398. <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
  399. </span>
  400. <div class="avue-crud__dialog__menu enlarge" @click="full">
  401. <i style="cursor: pointer;display: block;width:12px;height:12px;border:1px solid #909399;border-top:3px solid #909399;margin-top: -3px;"></i>
  402. </div>
  403. </div>
  404. </template>
  405. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  406. <el-row>
  407. <el-col :span="12">
  408. <el-form-item label="航次" prop="fNo" label-width="110px">
  409. <el-input
  410. v-model="form.fNo"
  411. style="width: 80%"
  412. placeholder="请输入编号"
  413. :disabled="doNot"
  414. />
  415. </el-form-item>
  416. </el-col>
  417. <el-col :span="12">
  418. <el-form-item label="船名" prop="fPid" label-width="110px">
  419. <el-select
  420. v-model="form.fPid"
  421. style="width: 80%"
  422. clearable
  423. placeholder="请输入船名"
  424. :disabled="doNot"
  425. :remote-method="vesselRemoteMethod"
  426. >
  427. <el-option
  428. v-for="item in this.vesselOptions"
  429. :key="item.fId"
  430. :label="item.fName"
  431. :value="item.fId"
  432. />
  433. </el-select>
  434. </el-form-item>
  435. </el-col>
  436. </el-row>
  437. <el-row>
  438. <el-col :span="12">
  439. <el-form-item label="装货港" prop="fPortofloadid" label-width="110px">
  440. <el-select
  441. v-model="form.fPortofloadid"
  442. style="width: 80%"
  443. clearable
  444. placeholder="请输入装货港名称"
  445. :disabled="doNot"
  446. :remote-method="portRemoteMethod"
  447. >
  448. <el-option
  449. v-for="item in this.portOptions"
  450. :key="item.fId"
  451. :label="item.fName"
  452. :value="item.fId"
  453. />
  454. </el-select>
  455. </el-form-item>
  456. </el-col>
  457. <el-col :span="12">
  458. <el-form-item label="卸货港" prop="fPortofdischargeid" label-width="110px">
  459. <el-select
  460. v-model="form.fPortofdischargeid"
  461. style="width: 80%"
  462. clearable
  463. placeholder="请输入卸货港"
  464. :disabled="doNot"
  465. :remote-method="portRemoteMethod"
  466. >
  467. <el-option
  468. v-for="item in this.portOptions"
  469. :key="item.fId"
  470. :label="item.fName"
  471. :value="item.fId"
  472. />
  473. </el-select>
  474. </el-form-item>
  475. </el-col>
  476. </el-row>
  477. <el-row>
  478. <el-col :span="12">
  479. <el-form-item label="目的地" prop="fDistinationid" label-width="110px">
  480. <el-select
  481. v-model="form.fDistinationid"
  482. style="width: 80%"
  483. clearable
  484. placeholder="请输入目的地"
  485. :disabled="doNot"
  486. :remote-method="portRemoteMethod"
  487. >
  488. <el-option
  489. v-for="item in this.portOptions"
  490. :key="item.fId"
  491. :label="item.fName"
  492. :value="item.fId"
  493. />
  494. </el-select>
  495. </el-form-item>
  496. </el-col>
  497. <el-col :span="12">
  498. <el-form-item label="中转港" prop="fPortoftransshipment" label-width="110px">
  499. <el-select
  500. v-model="form.fPortoftransshipment"
  501. style="width: 80%"
  502. clearable
  503. placeholder="请输入中转港"
  504. :disabled="doNot"
  505. :remote-method="portRemoteMethod"
  506. >
  507. <el-option
  508. v-for="item in this.portOptions"
  509. :key="item.fId"
  510. :label="item.fName"
  511. :value="item.fId"
  512. />
  513. </el-select>
  514. </el-form-item>
  515. </el-col>
  516. </el-row>
  517. <el-row>
  518. <el-col :span="12">
  519. <el-form-item label="预计开船日期" prop="fEtd" label-width="110px">
  520. <el-date-picker
  521. v-model="form.fEtd"
  522. style="width: 80%"
  523. type="date"
  524. :disabled="doNot"
  525. value-format="yyyy-MM-dd"
  526. placeholder="选择日期">
  527. </el-date-picker>
  528. </el-form-item>
  529. </el-col>
  530. <el-col :span="12">
  531. <el-form-item label="开船日期" prop="fAtd" label-width="110px">
  532. <el-date-picker
  533. v-model="form.fAtd"
  534. type="date"
  535. :disabled="doNot"
  536. value-format="yyyy-MM-dd"
  537. style="width: 80%"
  538. placeholder="选择日期">
  539. </el-date-picker>
  540. </el-form-item>
  541. </el-col>
  542. </el-row>
  543. <el-row>
  544. <el-col :span="12">
  545. <el-form-item label="预计到达日期" prop="fEta" label-width="110px">
  546. <el-date-picker
  547. v-model="form.fEta"
  548. type="date"
  549. :disabled="doNot"
  550. value-format="yyyy-MM-dd"
  551. style="width: 80%"
  552. placeholder="选择日期">
  553. </el-date-picker>
  554. </el-form-item>
  555. </el-col>
  556. <el-col :span="12">
  557. <el-form-item label="到港日" prop="fAta" label-width="110px">
  558. <el-date-picker
  559. v-model="form.fAta"
  560. type="date"
  561. :disabled="doNot"
  562. value-format="yyyy-MM-dd"
  563. style="width: 80%"
  564. placeholder="选择日期">
  565. </el-date-picker>
  566. </el-form-item>
  567. </el-col>
  568. <el-col :span="12">
  569. <el-form-item label="船管人" prop="fManageid" label-width="110px">
  570. <el-select
  571. v-model="form.fManageid"
  572. style="width: 80%"
  573. clearable
  574. placeholder="请输入船管人"
  575. :disabled="doNot"
  576. :remote-method="manageRemoteMethod"
  577. >
  578. <el-option
  579. v-for="item in this.getManageOptions"
  580. :key="item.userId"
  581. :label="item.userName"
  582. :value="item.userId"
  583. />
  584. </el-select>
  585. </el-form-item>
  586. </el-col>
  587. <el-col :span="12">
  588. <el-form-item label="联系方式" prop="fTel" label-width="110px">
  589. <el-input
  590. v-model="form.fTel"
  591. style="width: 80%"
  592. placeholder="请输入手机号"
  593. :disabled="doNot"
  594. />
  595. </el-form-item>
  596. </el-col>
  597. </el-row>
  598. <el-row>
  599. <el-col :span="12">
  600. <el-form-item label="截单日期" prop="fDucomentrayoffdate" label-width="110px">
  601. <el-date-picker
  602. v-model="form.fDucomentrayoffdate"
  603. type="date"
  604. value-format="yyyy-MM-dd"
  605. style="width: 80%"
  606. :disabled="doNot"
  607. placeholder="选择日期">
  608. </el-date-picker>
  609. </el-form-item>
  610. </el-col>
  611. <el-col :span="12">
  612. <el-form-item label="截港日期" prop="fCutoffdate" label-width="110px">
  613. <el-date-picker
  614. v-model="form.fCutoffdate"
  615. type="date"
  616. :disabled="doNot"
  617. value-format="yyyy-MM-dd"
  618. style="width: 80%"
  619. placeholder="选择日期">
  620. </el-date-picker>
  621. </el-form-item>
  622. </el-col>
  623. </el-row>
  624. <el-row>
  625. <el-col :span="12">
  626. <el-form-item label="航期" prop="fDays" label-width="110px">
  627. <el-input
  628. v-model="form.fDays"
  629. style="width: 80%"
  630. placeholder=""
  631. :disabled="doNot"
  632. />
  633. </el-form-item>
  634. </el-col>
  635. <el-col :span="12">
  636. <el-form-item label="总teu" prop="fTeu" label-width="110px">
  637. <el-input style="width: 80%" size="small" v-model="form.fTeu" :disabled="doNot"/>
  638. </el-form-item>
  639. </el-col>
  640. </el-row>
  641. <el-row>
  642. <el-col :span="12">
  643. <el-form-item label="状态" prop="fStatus" label-width="110px">
  644. <el-select v-model="form.fStatus" style="width: 80%" :disabled="doNot" placeholder="请输入状态" >
  645. <el-option label="正常" value='T'></el-option>
  646. <el-option label="停用" value='F'></el-option>
  647. </el-select>
  648. </el-form-item>
  649. </el-col>
  650. </el-row>
  651. <el-row>
  652. <el-col :span="24">
  653. <el-form-item label="备注" prop="remark" label-width="110px">
  654. <el-input
  655. v-model="form.remark"
  656. style="width: 100%" placeholder=""
  657. :disabled="doNot"
  658. type="textarea"
  659. :autosize="{ minRows: 2}"
  660. />
  661. </el-form-item>
  662. </el-col>
  663. </el-row>
  664. </el-form>
  665. <div slot="footer" class="dialog-footer">
  666. <el-button type="info" round @click="doNot = false">修 改</el-button>
  667. <el-button type="success" round @click="submitForm" :disabled="doNot">保 存</el-button>
  668. <el-button @click="cancel" round>关 闭</el-button>
  669. </div>
  670. </el-dialog>
  671. </div>
  672. </template>
  673. <script>
  674. import { getvessel,listCorps, getCorps, delCorps, addyard,getport, getManage, changeCorpsStatus,exportCorps } from "@/api/kaihe/shipDynamics/vesselDetail";
  675. import draggable from "vuedraggable";
  676. import Vue from 'vue'
  677. import Cookies from 'js-cookie'
  678. import { addSet, resetModule, select } from '@/api/system/set'
  679. Vue.directive('dialogDrag', {
  680. bind(el, binding, vnode, oldVnode) {
  681. const dialogHeaderEl = el.querySelector('.el-dialog__header')
  682. const dragDom = el.querySelector('.el-dialog')
  683. const enlarge = el.querySelector('.enlarge')
  684. dialogHeaderEl.style.cursor = 'move'
  685. // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  686. const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
  687. if(enlarge){
  688. enlarge.onclick = (e) => {
  689. dragDom.style.top = '0px'
  690. dragDom.style.left = '0px'
  691. }
  692. }
  693. dialogHeaderEl.onmousedown = (e) => {
  694. // 鼠标按下,计算当前元素距离可视区的距离
  695. const disX = e.clientX - dialogHeaderEl.offsetLeft
  696. const disY = e.clientY - dialogHeaderEl.offsetTop
  697. // 获取到的值带px 正则匹配替换
  698. let styL, styT
  699. // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  700. if (sty.left.includes('%')) {
  701. styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
  702. styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
  703. } else {
  704. styL = +sty.left.replace(/\px/g, '')
  705. styT = +sty.top.replace(/\px/g, '')
  706. }
  707. document.onmousemove = function(e) {
  708. // 通过事件委托,计算移动的距离
  709. const l = e.clientX - disX
  710. const t = e.clientY - disY
  711. // 移动当前元素
  712. if ((t + styT) >= 0){
  713. dragDom.style.top = `${t + styT}px`
  714. }
  715. dragDom.style.left = `${l + styL}px`
  716. // 将此时的位置传出去
  717. // binding.value({x:e.pageX,y:e.pageY})
  718. }
  719. document.onmouseup = function(e) {
  720. document.onmousemove = null
  721. document.onmouseup = null
  722. }
  723. }
  724. }
  725. })
  726. export default {
  727. name: "yard",
  728. components: {
  729. draggable
  730. },
  731. data() {
  732. return {
  733. setRowList: [],
  734. getRowList: [],
  735. tableDate: [
  736. {
  737. surface: "1",
  738. label: "fNo",
  739. name: "航次",
  740. fixed:"left",
  741. checked: 0,
  742. width: 120,
  743. },
  744. {
  745. surface: "2",
  746. label: "pidName",
  747. name: "船名",
  748. fixed:"left",
  749. checked: 0,
  750. width: 120,
  751. },
  752. {
  753. surface: "3",
  754. label: "portofloadidName",
  755. name: "装货港",
  756. fixed:"left",
  757. checked: 0,
  758. width: 120,
  759. },
  760. {
  761. surface: "4",
  762. label: "portofdischargeidName",
  763. name: "卸货港",
  764. fixed:"left",
  765. checked: 0,
  766. width: 120,
  767. },
  768. {
  769. surface: "5",
  770. label: "distinationidName",
  771. name: "目的地",
  772. fixed:"left",
  773. checked: 0,
  774. width: 120,
  775. },
  776. {
  777. surface: "6",
  778. label: "portoftransshipmentName",
  779. name: "中转港",
  780. fixed:"left",
  781. checked: 0,
  782. width: 120,
  783. },
  784. {
  785. surface: "7",
  786. label: "fEtd",
  787. name: "预计开船日期",
  788. fixed:"left",
  789. checked: 0,
  790. width: 120,
  791. },
  792. {
  793. surface: "8",
  794. label: "fAtd",
  795. name: "开船日期",
  796. checked: 0,
  797. width: 120,
  798. },
  799. {
  800. surface: "9",
  801. label: "fEta",
  802. name: "预计到达日期",
  803. checked: 0,
  804. width: 120,
  805. },
  806. {
  807. surface: "10",
  808. label: "fAta",
  809. name: "到港日",
  810. checked: 0,
  811. width: 120,
  812. },
  813. {
  814. surface: "11",
  815. label: "manageidName",
  816. name: "船管人",
  817. checked: 0,
  818. width: 120,
  819. },
  820. {
  821. surface: "12",
  822. label: "fTel",
  823. name: "联系方式",
  824. checked: 0,
  825. width: 120,
  826. },
  827. {
  828. surface: "13",
  829. label: "fDays",
  830. name: "航期",
  831. checked: 0,
  832. width: 120,
  833. },
  834. {
  835. surface: "14",
  836. label: "fStatus",
  837. name: "状态",
  838. checked: 0,
  839. width: 120,
  840. },
  841. {
  842. surface: "15",
  843. label: "remark",
  844. name: "备注",
  845. checked: 0,
  846. width: 120,
  847. },
  848. {
  849. surface: "16",
  850. label: "createBy",
  851. name: "录入人",
  852. checked: 0,
  853. width: 120,
  854. },
  855. {
  856. surface: "17",
  857. label: "createTime",
  858. name: "录入时间",
  859. checked: 0,
  860. width: 120,
  861. },
  862. {
  863. surface: "18",
  864. label: "updateBy",
  865. name: "最新修改人",
  866. checked: 0,
  867. width: 120,
  868. },
  869. {
  870. surface: "19",
  871. label: "updateTime",
  872. name: "最新修改时间",
  873. checked: 0,
  874. width: 120,
  875. },
  876. ],
  877. //自定义列宽
  878. allCheck: false,
  879. showSetting:false,
  880. //船管人
  881. getManageOptions:[],
  882. //船名下拉搜索
  883. vesselOptions:[],
  884. //港口下拉搜索
  885. portOptions:[],
  886. //默认显示第一行
  887. queryParamsHidden:false,
  888. //查看置灰
  889. doNot:true,
  890. //模糊查询港口名称
  891. portNameOptions:[],
  892. //港口类型字典表
  893. fTypesOptions:[],
  894. //模糊查询堆场名称
  895. yardOptions:[],
  896. //全屏放大
  897. dialogFull:false,
  898. // 遮罩层
  899. loading: true,
  900. // 选中数组
  901. ids: [],
  902. // 非单个禁用
  903. single: true,
  904. // 非多个禁用
  905. multiple: true,
  906. // 显示搜索条件
  907. showSearch: true,
  908. // 总条数
  909. total: 0,
  910. // 客户详情表格数据
  911. corpsList: [],
  912. // 弹出层标题
  913. title: "",
  914. // 状态数据字典
  915. statusOptions: [],
  916. // 是否显示弹出层
  917. open: false,
  918. // 查询参数
  919. queryParams: {
  920. pageNum: 1,
  921. pageSize: 10,
  922. fNo:null,
  923. fPortofloadid:null,
  924. fPortofdischargeid:null,
  925. fDistinationid:null,
  926. fPortoftransshipment:null,
  927. fEtd:null,
  928. fAtd:null,
  929. fAta:null,
  930. fManageid:null,
  931. fDays:null,
  932. fStatus:null,
  933. createBy:null,
  934. remark:null
  935. },
  936. // 表单参数
  937. form: {
  938. fNo:null,
  939. fPortofloadid:null,
  940. fPortofdischargeid:null,
  941. fDistinationid:null,
  942. fPortoftransshipment:null,
  943. fEtd:null,
  944. fAtd:null,
  945. fEta:null,
  946. fAta:null,
  947. fManageid:null,
  948. fTel:null,
  949. fDays:null,
  950. fStatus:'T',
  951. remark:null,
  952. fDucomentrayoffdate:null,
  953. fCutoffdate:null,
  954. fTeu:null
  955. },
  956. // 表单校验
  957. rules: {
  958. fNo: [{ required: true, message: "编号不能为空", trigger: "blur" }],
  959. fPortofloadid:[{ required: true, message: "装货港不能为空", trigger: "blur" }],
  960. fDistinationid:[{ required: true, message: "目的地不能为空", trigger: "blur" }],
  961. fEtd:[{ required: true, message: "预计开船日期不能为空", trigger: "blur" }],
  962. fEta:[{ required: true, message: "预计到达时间不能为空", trigger: "blur" }],
  963. fTel:[{ required: true, message: "手机号不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  964. fDucomentrayoffdate:[{ required: true, message: "截单日期不能为空", trigger: "blur" }]
  965. }
  966. };
  967. },
  968. activated() {
  969. this.getDicts("f_types").then(response => {
  970. this.fTypesOptions = response.data;
  971. });
  972. this.vesselRemoteMethod()
  973. this.portRemoteMethod()
  974. this.manageRemoteMethod()
  975. this.getList()
  976. },
  977. created() {
  978. this.setRowList = this.tableDate;
  979. this.getRowList = this.tableDate;
  980. this.getList();
  981. this.getDicts("f_types").then(response => {
  982. this.fTypesOptions = response.data;
  983. });
  984. this.vesselRemoteMethod()
  985. this.portRemoteMethod()
  986. this.manageRemoteMethod()
  987. this.getRow()
  988. },
  989. methods: {
  990. //重置列表
  991. delRow() {
  992. this.data = {
  993. tableName: "航次信息",
  994. userId: Cookies.get("userName"),
  995. };
  996. resetModule(this.data).then((res) => {
  997. if (res.code == 200) {
  998. this.showSetting = false;
  999. this.setRowList = this.tableDate;
  1000. console.log(this.setRowList)
  1001. this.getRowList = this.tableDate;
  1002. }
  1003. });
  1004. },
  1005. //列设置全选
  1006. allChecked() {
  1007. if (this.allCheck == true) {
  1008. this.setRowList.map((e) => {
  1009. return (e.checked = 0);
  1010. });
  1011. } else {
  1012. this.setRowList.map((e) => {
  1013. return (e.checked = 1);
  1014. });
  1015. }
  1016. },
  1017. //查询列数据
  1018. getRow() {
  1019. let that = this;
  1020. this.data = {
  1021. tableName: "航次信息",
  1022. userId: Cookies.get("userName"),
  1023. };
  1024. select(this.data).then((res) => {
  1025. if (res.data.length != 0) {
  1026. this.getRowList = res.data.filter((e) => e.checked == 0);
  1027. this.setRowList = res.data;
  1028. this.setRowList = this.setRowList.reduce((res, item) => {
  1029. res.push({
  1030. surface: item.surface,
  1031. label: item.label,
  1032. name: item.name,
  1033. checked: item.checked,
  1034. width: item.width,
  1035. fixed: item.fixed
  1036. });
  1037. return res;
  1038. }, []);
  1039. }
  1040. });
  1041. console.log(this.getRowList)
  1042. },
  1043. //保存列设置
  1044. save() {
  1045. this.showSetting = false;
  1046. this.data = {
  1047. tableName: "航次信息",
  1048. userId: Cookies.get("userName"),
  1049. sysTableSetList: this.setRowList,
  1050. };
  1051. addSet(this.data).then((res) => {
  1052. this.getRowList = this.setRowList.filter((e) => e.checked == 0);
  1053. });
  1054. },
  1055. //开始拖拽事件
  1056. onStart() {
  1057. this.drag = true;
  1058. },
  1059. //拖拽结束事件
  1060. onEnd() {
  1061. this.drag = false;
  1062. },
  1063. //船管人下拉搜索
  1064. manageRemoteMethod(){
  1065. let queryParams = { pageNum: 1,};
  1066. getManage(queryParams).then(response=>{
  1067. console.log(response)
  1068. this.getManageOptions = response.rows
  1069. })
  1070. },
  1071. //船名下拉搜索
  1072. vesselRemoteMethod(){
  1073. let queryParams = { pageNum: 1,};
  1074. getvessel(queryParams).then(response=>{
  1075. console.log(response)
  1076. this.vesselOptions = response.rows
  1077. })
  1078. },
  1079. //模糊查询港口名称
  1080. portRemoteMethod(){
  1081. let queryParams = { pageNum: 1,};
  1082. getport(queryParams).then((response) => {
  1083. console.log(response)
  1084. this.portOptions = response.rows;
  1085. });
  1086. },
  1087. //模糊查询港口名称
  1088. // portRemoteMethod(){
  1089. // let queryParams = { pageNum: 1,};
  1090. // getportinformation(queryParams).then(response =>{
  1091. // this.portNameOptions = response.rows
  1092. // })
  1093. // },
  1094. full(){
  1095. this.dialogFull = !this.dialogFull
  1096. },
  1097. /** 查询客户详情列表 */
  1098. getList() {
  1099. this.loading = true;
  1100. console.log((this.queryParams))
  1101. listCorps(this.queryParams).then(response => {
  1102. this.corpsList = response.rows;
  1103. this.total = response.total;
  1104. this.loading = false;
  1105. });
  1106. },
  1107. // 取消按钮
  1108. cancel() {
  1109. this.open = false;
  1110. this.reset();
  1111. },
  1112. // 表单重置
  1113. reset() {
  1114. this.form = {
  1115. fNo:null,
  1116. fPortofloadid:null,
  1117. fPortofdischargeid:null,
  1118. fDistinationid:null,
  1119. fPortoftransshipment:null,
  1120. fEtd:null,
  1121. fAtd:null,
  1122. fEta:null,
  1123. fManageid:null,
  1124. fTel:null,
  1125. fDays:null,
  1126. fStatus:'T',
  1127. remark:null,
  1128. fDucomentrayoffdate:null,
  1129. fCutoffdate:null,
  1130. fTeu:null
  1131. };
  1132. this.resetForm("form");
  1133. },
  1134. // 状态修改
  1135. handleStatusChange(row) {
  1136. let text = row.fStatus === "0" ? "启用" : "停用";
  1137. this.$confirm('确认要"' + text + '""' + row.fName + '"吗?', "警告", {
  1138. confirmButtonText: "确定",
  1139. cancelButtonText: "取消",
  1140. type: "warning"
  1141. }).then(function() {
  1142. return changeCorpsStatus(row.fId, row.fStatus);
  1143. }).then(() => {
  1144. this.msgSuccess(text + "成功");
  1145. }).catch(function() {
  1146. row.fStatus = row.fStatus === "0" ? "1" : "0";
  1147. });
  1148. },
  1149. /** 搜索按钮操作 */
  1150. handleQuery() {
  1151. this.queryParams.pageNum = 1;
  1152. this.getList();
  1153. },
  1154. /** 重置按钮操作 */
  1155. resetQuery() {
  1156. this.resetForm("queryForm");
  1157. this.handleQuery();
  1158. },
  1159. // 多选框选中数据
  1160. handleSelectionChange(selection) {
  1161. this.ids = selection.map(item => item.fId)
  1162. this.single = selection.length!==1
  1163. this.multiple = !selection.length
  1164. },
  1165. /** 新增按钮操作 */
  1166. handleAdd() {
  1167. this.doNot = false
  1168. this.reset();
  1169. this.open = true;
  1170. this.title = "添加客户详情";
  1171. },
  1172. /** 修改按钮操作 */
  1173. handleUpdate(row) {
  1174. this.doNot = true
  1175. this.reset();
  1176. const fId = row.fId || this.ids
  1177. getCorps(fId).then(response => {
  1178. this.form = response.data;
  1179. this.open = true;
  1180. this.title = "修改客户详情";
  1181. });
  1182. },
  1183. /** 提交按钮 */
  1184. submitForm() {
  1185. this.$refs["form"].validate(valid => {
  1186. if (valid) {
  1187. addyard(this.form).then(response => {
  1188. this.msgSuccess("操作成功");
  1189. this.open = false;
  1190. this.getList();
  1191. })
  1192. }
  1193. })
  1194. },
  1195. /** 删除按钮操作 */
  1196. handleDelete(row) {
  1197. const fIds = row.fId || this.ids;
  1198. this.$confirm('是否确认删除客户详情编号为"' + fIds + '"的数据项?', "警告", {
  1199. confirmButtonText: "确定",
  1200. cancelButtonText: "取消",
  1201. type: "warning"
  1202. }).then(function() {
  1203. return delCorps(fIds);
  1204. }).then(() => {
  1205. this.getList();
  1206. this.msgSuccess("删除成功");
  1207. })
  1208. },
  1209. /** 导出按钮操作 */
  1210. handleExport() {
  1211. const queryParams = this.queryParams;
  1212. this.$confirm('是否确认导出所有客户详情数据项?', "警告", {
  1213. confirmButtonText: "确定",
  1214. cancelButtonText: "取消",
  1215. type: "warning"
  1216. }).then(function() {
  1217. return exportCorps(queryParams);
  1218. }).then(response => {
  1219. this.download(response.msg);
  1220. })
  1221. }
  1222. }
  1223. };
  1224. </script>
  1225. <style lang="scss" scoped>
  1226. .avue-crud__dialog__header {
  1227. display: -webkit-box;
  1228. display: -ms-flexbox;
  1229. display: flex;
  1230. -webkit-box-align: center;
  1231. -ms-flex-align: center;
  1232. align-items: center;
  1233. -webkit-box-pack: justify;
  1234. -ms-flex-pack: justify;
  1235. justify-content: space-between;
  1236. }
  1237. .el-dialog__title {
  1238. color: rgba(0,0,0,.85);
  1239. font-weight: 500;
  1240. word-wrap: break-word;
  1241. }
  1242. .avue-crud__dialog__menu {
  1243. padding-right: 20px;
  1244. float: left;
  1245. }
  1246. .avue-crud__dialog__menu i {
  1247. color: #909399;
  1248. font-size: 15px;
  1249. }
  1250. .el-icon-full-screen{
  1251. cursor: pointer;
  1252. }
  1253. .el-icon-full-screen:before {
  1254. content: "\e719";
  1255. }
  1256. .tabSetting {
  1257. display: flex;
  1258. justify-content: flex-end;
  1259. }
  1260. .listStyle {
  1261. display: flex;
  1262. border-top: 1px solid #dcdfe6;
  1263. border-left: 1px solid #dcdfe6;
  1264. border-right: 1px solid #dcdfe6;
  1265. }
  1266. .listStyle:last-child {
  1267. border-bottom: 1px solid #dcdfe6;
  1268. }
  1269. .progress {
  1270. display: flex;
  1271. align-items: center;
  1272. padding: 2px;
  1273. background-color: rgba(0, 0, 0, 0.05);
  1274. height: 100%;
  1275. }
  1276. </style>