tb-car-disincle-edit.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>入境登记-添加/修改</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 所有的 css js 资源 -->
  9. <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
  10. <link rel="stylesheet" href="../../static/sa.css">
  11. <script src="../../static/kj/vue.min.js"></script>
  12. <script src="../../static/kj/element-ui/index.js"></script>
  13. <script src="../../static/kj/httpVueLoader.js"></script>
  14. <script src="../../static/kj/jquery.min.js"></script>
  15. <script src="../../static/kj/layer/layer.js"></script>
  16. <script src="../../static/sa.js"></script>
  17. <script src="../../static/kj/upload-util.js"></script>
  18. <style type="text/css">
  19. .c-panel .el-form .c-label {
  20. width: 7em !important;
  21. }
  22. .c-panel .el-form .c-panel .el-form {
  23. width: 180px;
  24. }
  25. .item-num .el-input__inner {
  26. width: 130px;
  27. }
  28. .xj {
  29. display: inline;
  30. color: red;
  31. margin-left: 9px;
  32. font-weight: bold;
  33. }
  34. .hj {
  35. color: red;
  36. margin-left: 9px;
  37. font-weight: bold;
  38. }
  39. .flex-item {
  40. width: 360px;
  41. padding-bottom: 20px;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="vue-box sbot" style="display: none;" :style="'display: block;'">
  47. <!-- ------- 内容部分 ------- -->
  48. <div class="s-body">
  49. <div class="c-panel">
  50. <div class="c-title">数据添加</div>
  51. <el-form v-if="m" label-position="left">
  52. <el-row>
  53. <el-card class="box-card">
  54. <div slot="header" class="clearfix">
  55. <span>基本资料</span>
  56. </div>
  57. <div>
  58. <el-row>
  59. <el-col span=8>
  60. <div class="c-item">
  61. <label class="c-label"><span style="color: red;">*</span>业务项目:</label>
  62. <el-select v-model="m.goodsId" placeholder="请选择" @change="goodsChange">
  63. <el-option v-for="item in goodsList" :key="item.id"
  64. :label="item.name" :value="item.id">
  65. </el-option>
  66. </el-select>
  67. </div>
  68. <div class="c-item" v-if="goods.needOwner==1">
  69. <label class="c-label">
  70. <span style="color: red;">*</span>
  71. 货物名称:</label>
  72. <el-input v-model="m.businessGoodsName" placeholder="填写货物" clearable>
  73. </el-input>
  74. </div>
  75. </el-col>
  76. <el-col span=8>
  77. <div class="c-item" v-if="goods.needCustomer">
  78. <label class="c-label"><span style="color: red;">*</span>客户:</label>
  79. <el-select :disabled="currentCustomerId!='1'" v-model="m.customerId"
  80. placeholder="请选择" filterable>
  81. <el-option v-for="item in customerList" :key="item.id"
  82. :label="item.name" :value="item.id">
  83. </el-option>
  84. </el-select>
  85. </div>
  86. <div class="c-item" v-if="goods.needOperateTime==1">
  87. <label class="c-label"><span style="color: red;">*</span>数量(件):</label>
  88. <el-input-number class="item-num" v-model="m.businessGoodsNum" :min="1"
  89. :max="99999" size="mini">
  90. </el-input-number>
  91. </div>
  92. </el-col>
  93. <el-col span=8>
  94. <div class="c-item" v-if="goods.needPartner">
  95. <label class="c-label"><span style="color: red;">*</span>合作伙伴:</label>
  96. <el-select v-model="m.pickCustomerId" placeholder="请选择" filterable
  97. :disabled="partnerDis">
  98. <el-option v-for="item in partnerList" :key="item.id"
  99. :label="item.name" :value="item.id">
  100. </el-option>
  101. </el-select>
  102. </div>
  103. <div class="c-item">
  104. <label class="c-label">作业人员:</label>
  105. <el-input v-model="m.operator" placeholder="作业人员" clearable>
  106. </el-input>
  107. </div>
  108. </el-col>
  109. </el-row>
  110. </div>
  111. </el-card>
  112. </el-row>
  113. <el-row>
  114. <el-card class="box-card">
  115. <div slot="header" class="clearfix">
  116. <span>业务车辆</span>
  117. <el-button style="float: right;" icon="el-icon-plus" type="primary"
  118. @click="showAddModal" v-if="goods.mulCar==1||car.list.length==0">添加
  119. </el-button>
  120. </div>
  121. <el-table :data="car.list">
  122. <el-table-column type="index" width="50" label="序号">
  123. </el-table-column>
  124. <el-table-column prop="carNo" label="车牌号">
  125. </el-table-column>
  126. <el-table-column prop="carType" label="类型">
  127. </el-table-column>
  128. <el-table-column prop="driverName" label="司机姓名" v-if="car.list.length>0&&car.list[0].driverName">
  129. </el-table-column>
  130. <el-table-column prop="driverPhone" label="司机电话" v-if="car.list.length>0&&car.list[0].driverName">
  131. </el-table-column>
  132. <el-table-column label="操作">
  133. <template slot-scope="s">
  134. <el-button class="c-btn" type="info" @click="editFn(s.row)">修改</el-button>
  135. <el-button class="c-btn" type="danger" @click="deleteFn(s.row)">删除
  136. </el-button>
  137. </template>
  138. </el-table-column>
  139. </el-table>
  140. </el-card>
  141. </el-row>
  142. <el-row>
  143. <el-card class="box-card">
  144. <div slot="header" class="clearfix">
  145. <span>业务类型</span>
  146. </div>
  147. <div>
  148. <el-form-item v-for="(type,index) in itemTypeList">
  149. <div style="display: flex;flex-wrap: wrap;">
  150. <div class="flex-item">
  151. <label style="color: red;"
  152. v-if="type.need==1">*</label><label>{{type.name}}:</label>
  153. <el-select v-model="type.itemId" style="width: 100px;"
  154. @change="itemChange(type)" placeholder="请选择">
  155. <el-option v-for="item in type.items" :key="item.id"
  156. :label="item.itemName" :value="item.id">
  157. </el-option>
  158. </el-select>
  159. </div>
  160. <div class="flex-item">
  161. <el-input-number style="margin-left: 20px;" class="item-num"
  162. v-model="type.num" :min="1" :disabled="type.disabled" :max="100"
  163. size="mini"></el-input-number>
  164. <div class="xj" v-if="type.itemId">
  165. <label v-if="type.price>1">{{type.price * type.num}}元</label>
  166. <label v-else>—</label>
  167. <!-- <label @click="cleanItem(type)"
  168. style="margin-left: 5px;cursor: pointer;z-index: 999;">(<i
  169. class="el-icon-delete"></i>)</label> -->
  170. </div>
  171. </div>
  172. <div class="flex-item" v-if="(type.itemName&&type.itemName.indexOf('集装箱')!==-1)
  173. ||(type.itemName&&type.itemName.indexOf('堆存')!==-1)">
  174. <label class="c-label">
  175. <span style="color: red;">*</span>
  176. 柜号:</label>
  177. <el-input v-model="type.cabinetNo" placeholder="柜号" clearable>
  178. </el-input>
  179. </div>
  180. <div style="width: 360px;padding-bottom: 20px;" v-show="(type.itemAlias&&(type.itemAlias=='emptyStore'||type.itemAlias=='heavyStore'))">
  181. <label class="c-label">
  182. <span style="color: red;">*</span>
  183. 取/存:</label>
  184. <el-select v-model="type.cabinetType" disabled placeholder="请选择">
  185. <el-option v-for="item in type.cabinetTypeList" :key="item.value"
  186. :label="item.name" :value="item.value">
  187. </el-option>
  188. </el-select>
  189. </div>
  190. <div class="flex-item" v-if="(type.itemAlias&&(type.itemAlias=='bigHeadCar'||type.itemAlias=='coldTruck'||type.itemAlias.indexOf('Store')>-1))">
  191. <label class="c-label">
  192. <span style="color: red;">*</span>开始时间:</label>
  193. <el-date-picker type="datetime" disabled v-model="type.coldStartTime"
  194. placeholder="开始时间"></el-date-picker>
  195. </div>
  196. <div class="flex-item"
  197. v-if="(type.itemAlias&&(type.itemAlias=='coldTruck'||type.itemAlias.indexOf('Store')>-1))">
  198. <label class="c-label">
  199. 结束时间:</label>
  200. <el-date-picker type="datetime" v-model="type.coldEndTime"
  201. placeholder="结束时间"></el-date-picker>
  202. </div>
  203. </div>
  204. <el-divider></el-divider>
  205. </el-form-item>
  206. <div class="hj">
  207. 合计费用:<label v-if="totalPrice>5">{{totalPrice}}元</label>
  208. <label v-else>-</label>
  209. </div>
  210. </div>
  211. </el-card>
  212. </el-row>
  213. </el-form>
  214. </div>
  215. </div>
  216. <!-- ------- 底部按钮 ------- -->
  217. <div class="s-foot">
  218. <el-button type="primary" @click="ok()">确定</el-button>
  219. <el-button @click="closeFn()">取消</el-button>
  220. </div>
  221. <el-dialog title="车辆录入" :visible.sync="car.visible" width="400">
  222. <span>
  223. <el-form label-position="left">
  224. <div class="c-item">
  225. <label class="c-label"><span style="color: red;">*</span>车牌号:</label>
  226. <el-autocomplete v-model="car.form.carNo" placeholder="请输入车牌号" value-key='carNo'
  227. :fetch-suggestions="queryCarAsync">
  228. </el-autocomplete>
  229. </div>
  230. <div class="c-item">
  231. <label class="c-label">车辆类型:</label>
  232. <el-select v-model="car.form.carType" placeholder="请选择" @change="carTypeChange">
  233. <el-option :label="item.name" :value="item.name" v-for="(item,index) in carTypeList">
  234. </el-option>
  235. </el-select>
  236. </div>
  237. <div class="c-item" v-if="m.goodsName=='集装箱正面吊装'">
  238. <label class="c-label">司机姓名:</label>
  239. <el-input v-model="car.form.driverName" placeholder="司机姓名">
  240. </el-input>
  241. </div>
  242. <div class="c-item" v-if="m.goodsName=='集装箱正面吊装'">
  243. <label class="c-label">司机号码:</label>
  244. <el-input v-model="car.form.driverPhone" placeholder="司机号码">
  245. </el-input>
  246. </div>
  247. </el-form>
  248. </span>
  249. <span slot="footer" class="dialog-footer">
  250. <el-button @click="car.visible = false">取 消</el-button>
  251. <el-button type="primary" @click="confirmAdd">确 定</el-button>
  252. </span>
  253. </el-dialog>
  254. </div>
  255. <script>
  256. var app = new Vue({
  257. components: {
  258. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  259. "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue')
  260. },
  261. el: '.vue-box',
  262. data: {
  263. m: {
  264. id: sa.p('id', ''), // 主键
  265. customerId: '', // 客户id
  266. customerName: '', // 客户名称
  267. operateTime: '',
  268. no: '', // 编号
  269. goodsId: '',
  270. goodsName: '', // 商品
  271. }, // 实体对象
  272. partnerDis: false,
  273. customerList: [],
  274. partnerList: [],
  275. carList: [],
  276. currentCustomerId: 1,
  277. itemTypeList: [],
  278. filterTypeList: [],
  279. goodsList: [],
  280. tableData: [],
  281. car: {
  282. visible: false,
  283. list: [],
  284. form: {
  285. carNo: '',
  286. carType: '',
  287. netWeight: '',
  288. carSize: ''
  289. }
  290. },
  291. declare: {
  292. visible: false,
  293. list: [],
  294. p: {
  295. pageNo: 1,
  296. pageSize: 8,
  297. dataCount: 0,
  298. declarePeople: '',
  299. production: '',
  300. declareNo: '1'
  301. }
  302. },
  303. goods: {
  304. id: '',
  305. name: '',
  306. needWeight: 1,
  307. needCarSize: 1,
  308. needDeclare: 1,
  309. needOperateTime: 1,
  310. mulCar: 0
  311. },
  312. carTypeList: [],
  313. intiItems: []
  314. },
  315. computed: {
  316. totalPrice() {
  317. let itemList = this.itemTypeList.filter(obj => obj.itemId);
  318. let price = 0;
  319. for (let i in itemList) {
  320. let type = itemList[i];
  321. let num = type.num;
  322. let items = type.items;
  323. for (let j in items) {
  324. let item = items[j];
  325. if (item.id == type.itemId) {
  326. price += num * item.price;
  327. break;
  328. }
  329. }
  330. }
  331. return price;
  332. }
  333. },
  334. methods: {
  335. resetDclare() {
  336. this.declare.p.pageNo = 1;
  337. this.declare.p.pageSize = 8;
  338. this.declare.p.production = '';
  339. this.declare.p.declarePeople = '';
  340. },
  341. handlerDeclare() {
  342. this.declare.visible = true;
  343. },
  344. cleanItem(type) {
  345. type.itemId = '';
  346. type.itemName = '';
  347. type.price = '';
  348. },
  349. itemChange(type) {
  350. let itemId = type.itemId;
  351. let item = type.items.filter(obj => obj.id == itemId).pop();
  352. if (item) {
  353. type.inc = item.inc;
  354. type.price = item.price;
  355. type.disabled = false;
  356. type.itemName = item.itemName;
  357. type.itemAlias = item.itemAlias;
  358. if (item.itemName == '人工、机械装卸车辆') {
  359. type.disabled = true;
  360. }
  361. }
  362. this.validBefore();
  363. },
  364. confirmAdd() {
  365. let list = this.car.list;
  366. let weightCar = list.filter(car => car.carType && car.carType.indexOf('空') == -1).pop();
  367. let carNo = this.car.form.carNo;
  368. let netWeight = this.car.form.netWeight;
  369. let goods = this.goods;
  370. let form = this.car.form;
  371. let carType = form.carType;
  372. if (!carNo) {
  373. sa.error('请录入车牌号')
  374. return false;
  375. }
  376. if (carType.indexOf('空') !== -1) {
  377. netWeight = 0;
  378. }
  379. let index = list.map(obj => obj.carNo).indexOf(carNo);
  380. if (index > -1) {
  381. list.splice(index, 1);
  382. }
  383. let carSize = form.carSize;
  384. let car = {
  385. id: form.id,
  386. carNo: form.carNo.toUpperCase(),
  387. carType: carType,
  388. carSize: carSize,
  389. netWeight: netWeight
  390. }
  391. this.car.list.push(car);
  392. this.car.visible = false;
  393. if (weightCar) {
  394. if (weightCar.carType == carType &&
  395. carSize == weightCar.carSize &&
  396. netWeight == weightCar.netWeight) {
  397. return;
  398. }
  399. }
  400. // this.filterItems();
  401. },
  402. showAddModal() {
  403. this.car.visible = true;
  404. this.car.form.carNo = '';
  405. this.car.form.carSize = '';
  406. this.car.form.netWeight = '';
  407. },
  408. editFn(data) {
  409. if (data.confirmJudge === 1) {
  410. sa.error('该车辆已审核,请先驳回审核在修改');
  411. return;
  412. }
  413. Object.assign(this.car, {
  414. visible: true,
  415. form: JSON.parse(JSON.stringify(data))
  416. })
  417. },
  418. deleteFn(data) {
  419. let confirmJudge = data.confirmJudge;
  420. if (confirmJudge == 1) {
  421. sa.error('业务已审核,请先驳回');
  422. return;
  423. }
  424. this.car.list.splice(this.car.list.indexOf(data), 1);
  425. // this.filterItems();
  426. },
  427. getGoods() {
  428. sa.ajaxNoLoading('/TbGoods/getList', {
  429. pageNo: 1,
  430. pageSize: 10
  431. }, function(resp) {
  432. let list = resp.data;
  433. this.goods = list.filter(goods => goods.id == this.m.goodsId).pop();
  434. this.goodsList = list;
  435. this.getTypeByGoodsId();
  436. }.bind(this))
  437. },
  438. goodsChange(v) {
  439. let goodsList = this.goodsList;
  440. let goods = goodsList.filter(goods => goods.id == v).pop();
  441. this.goods = goods;
  442. this.m.goodsName = goods.name;
  443. this.getTypeByGoodsId();
  444. },
  445. getTypeByGoodsId() {
  446. sa.ajax('/TbItemType/getTypeByGoodsId', {
  447. goodsId: this.m.goodsId
  448. }, function(resp) {
  449. let list = resp.data;
  450. let initItems = this.intiItems;
  451. for (let i in initItems) {
  452. let initItem = initItems[i];
  453. for (let j in list) {
  454. let type = list[j];
  455. if (type.id == initItem.itemTypeId) {
  456. type.num = initItem.num;
  457. type.price = initItem.itemPrice;
  458. type.itemId = initItem.itemId;
  459. type.remark = initItem.remark;
  460. type.itemName = initItem.itemName;
  461. type.cabinetNo = initItem.cabinetNo;
  462. type.itemAlias = initItem.itemAlias;
  463. type.coldStartTime = initItem.coldStartTime;
  464. type.coldEndTime = initItem.coldEndTime;
  465. type.cabinetType=initItem.cabinetType;
  466. }
  467. }
  468. }
  469. for(let i in list){
  470. let type=list[i];
  471. let cabinetTypeList=[{value:0,name:'存柜'},{value:1,name:'取柜'}];
  472. type.cabinetTypeList=cabinetTypeList;
  473. }
  474. this.itemTypeList = list;
  475. this.filterTypeList = JSON.parse(JSON.stringify(this.itemTypeList));
  476. //this.filterItems();
  477. }.bind(this))
  478. },
  479. getItemType() {
  480. sa.ajax('/TbItem/getItemType', function(resp) {
  481. let list = resp.data;
  482. if (list.length > 0) {
  483. this.car.form.carType = list[0].name;
  484. }
  485. this.carTypeList = list;
  486. }.bind(this))
  487. },
  488. carTypeChange(v) {
  489. },
  490. getCustomerList() {
  491. sa.ajax('/TbCostomer/getList', {
  492. pageNo: 1,
  493. pageSize: 200,
  494. sortType: 20,
  495. judgeStatus: 2
  496. }, function(res) {
  497. let list = res.data;
  498. this.customerList = list;
  499. this.partnerList = list.filter(obj => obj.type != 0);
  500. this.getCurrentCustomer();
  501. }.bind(this));
  502. },
  503. queryCarAsync(queryStr, cb) {
  504. sa.ajaxNoLoading('/TbBusinessCar/searchByNo', {
  505. carNo: queryStr
  506. }, function(resp) {
  507. cb(resp.data)
  508. }.bind(this))
  509. },
  510. closeFn() {
  511. parent.app.f5();
  512. sa.closeCurrIframe();
  513. },
  514. validBefore() {
  515. let goods = this.goods;
  516. let needCustomer = goods.needCustomer;
  517. let m = this.m;
  518. if (needCustomer == 1 && !m.customerId) {
  519. sa.error('请选择客户');
  520. return false;
  521. }
  522. if (goods.needOperateTime == 1 && (!m.businessGoodsNum || m.businessGoodsNum <= 0)) {
  523. sa.error('请输入件数');
  524. return false;
  525. }
  526. if (!m.businessGoodsName && goods.needOwner == 1) {
  527. sa.error('请填写货物');
  528. return false;
  529. }
  530. if (this.car.list.length == 0) {
  531. sa.error('请录入车辆');
  532. return false;
  533. }
  534. },
  535. // 提交数据
  536. ok: function() {
  537. let goods = this.goods;
  538. let m = this.m;
  539. if (!m.businessGoodsName && goods.needOwner == 1) {
  540. sa.error('请填写货物');
  541. return false;
  542. }
  543. if (goods.needOperateTime == 1 && (!m.businessGoodsNum || m.businessGoodsNum <= 0)) {
  544. sa.error('请填写货物件数');
  545. return false;
  546. }
  547. if (this.car.list.length == 0) {
  548. sa.error('请录入车辆');
  549. return false;
  550. }
  551. let carList = this.car.list;
  552. let typeList = this.itemTypeList;
  553. let selectList = [];
  554. for (let i in typeList) {
  555. let type = typeList[i];
  556. if (type.need == 1 && !type.itemId) {
  557. sa.error(type.name + '必选');
  558. return false;
  559. }
  560. if (type.itemId) {
  561. let obj = {
  562. typeId: type.id,
  563. typeName: type.name,
  564. id: type.itemId,
  565. num: type.num,
  566. price: type.price,
  567. remark: type.remark,
  568. cabinetNo: type.cabinetNo,
  569. coldStartTime: type.coldStartTime,
  570. coldEndTime: type.coldEndTime,
  571. itemAlias: type.itemAlias,
  572. cabinetType: type.cabinetType
  573. }
  574. selectList.push(obj);
  575. }
  576. }
  577. m.itemJson = JSON.stringify(selectList);
  578. m.carJson = JSON.stringify(carList);
  579. let chinaCarNo = carList
  580. .filter(car => sa.isCarNo(car.carNo.toUpperCase()))
  581. .map(car => car.carNo.toUpperCase())
  582. .join("、");
  583. let yueCarNo = carList
  584. .filter(car => !sa.isCarNo(car.carNo.toUpperCase()))
  585. .map(car => car.carNo.toUpperCase())
  586. .join("、");
  587. m.cardNo = yueCarNo;
  588. m.chinaCarNo = chinaCarNo;
  589. m.cars = null;
  590. m.items = null;
  591. sa.ajax('/TbBusiness/editOtherBusiness', sa.removeNull(m), function(res) {
  592. sa.alert('修改成功', this.clean);
  593. }.bind(this));
  594. },
  595. // 添加/修改 完成后的动作
  596. clean: function() {
  597. parent.app.f5(); // 刷新父页面列表
  598. sa.closeCurrIframe(); // 关闭本页
  599. },
  600. getCurrentCustomer() {
  601. sa.ajax('/TbCostomer/getCurrentCustomerId', function(resp) {
  602. let id = resp.data;
  603. this.currentCustomerId = id;
  604. let partnerList = this.partnerList;
  605. let arr = partnerList.filter(obj => obj.id == id);
  606. if (arr.length > 0) {
  607. this.m.pickCustomerId = id;
  608. this.partnerDis = true;
  609. }
  610. }.bind(this));
  611. },
  612. getOtherBusinessById() {
  613. sa.ajax('/TbBusiness/getOtherBusinessById?id=' + this.m.id, function(resp) {
  614. let data = resp.data;
  615. this.car.list = data.cars;
  616. this.intiItems = data.items;
  617. this.m = resp.data;
  618. this.getGoods();
  619. }.bind(this))
  620. },
  621. },
  622. mounted: function() {
  623. this.getOtherBusinessById();
  624. this.getCustomerList();
  625. this.getItemType();
  626. }
  627. })
  628. </script>
  629. </body>
  630. </html>