business-edit.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
  1. <template>
  2. <view>
  3. <view class="box" v-show="hs.visible">
  4. <view class="top">
  5. <text class="title">录入核酸人员</text>
  6. </view>
  7. <view style="display: flex;margin-top: 40rpx;">
  8. <u-button type="primary" @click="hs.visible=false" text="返回" style="width: 20px;" size="mini" />
  9. <u-button type="primary" @click="showHsModal" text="添加" v-show="hs.num>hs.list.length" icon="plus"
  10. style="width: 20px;" size="mini" />
  11. </view>
  12. <u-row style="margin-top: 70rpx;">
  13. <u-col span="4" style="text-align: center;">姓名</u-col>
  14. <u-col span="4" style="text-align: center;">联系号码</u-col>
  15. <u-col span="4" style="text-align: center;">操作</u-col>
  16. </u-row>
  17. <u-row v-for="item in hs.list" style="margin-top: 40rpx;">
  18. <u-col span="4" style="text-align: center;">{{item.name}}</u-col>
  19. <u-col span="4" style="text-align: center;">{{item.phone}}</u-col>
  20. <u-col span="4" style="text-align: center;">
  21. <u-row>
  22. <u-col span="6">
  23. <u-button type="primary" text="编辑" style="width: 20px;" @click="editFn(item)" size="mini">
  24. </u-button>
  25. </u-col>
  26. <u-col span="6">
  27. <u-button type="error" style="width: 20px;" text="删除" @click="deleteFn(item)" size="mini">
  28. </u-button>
  29. </u-col>
  30. </u-row>
  31. </u-col>
  32. </u-row>
  33. </view>
  34. <view class="box" v-show="!hs.visible">
  35. <view class="top">
  36. <text class="title">业务录入</text>
  37. </view>
  38. <view class="item" v-show="customerId=='1'">
  39. <view class="l"><text style="color: red;">*</text>企业名称:</view>
  40. <view class="r">
  41. <picker v-if="customer.customerList.length>0" class="p-picker" id="qy"
  42. @change="bindPickerChange($event)" :value="customer.index" :range="customer.customerList"
  43. range-key="name">
  44. <text class="p-text">{{customer.customerList[customer.index].name}}</text>
  45. <u-icon class="p-icon" name="arrow-down-fill" size="20"></u-icon>
  46. </picker>
  47. </view>
  48. </view>
  49. <view class="item">
  50. <view class="l"><text style="color: red;">*</text>货物:</view>
  51. <view class="r">
  52. <picker v-if="goods.goodsList.length>0" class="p-picker" id="hw" @change="whChange($event)"
  53. :value="goods.index" :range="goods.goodsList" range-key="name">
  54. <text class="p-text">{{goods.goodsList[goods.index].name}}</text>
  55. <u-icon class="p-icon" name="arrow-down-fill" size="20"></u-icon>
  56. </picker>
  57. </view>
  58. </view>
  59. <view class="item">
  60. <view class="l"><text style="color: red;">*</text>载重:</view>
  61. <view class="r">
  62. <u-input type="number" placeholder="输入载重" v-model="form.netWeight">
  63. <text slot="suffix">吨</text>
  64. </u-input>
  65. </view>
  66. </view>
  67. <view class="item">
  68. <view class="l"><text style="color: red;">*</text>境外车牌:</view>
  69. <view class="r">
  70. <u-input placeholder="输入车牌号" v-model="form.cardNo" />
  71. </view>
  72. </view>
  73. <view class="item">
  74. <view class="l"><text style="color: red;">*</text>境外车规格:</view>
  75. <view class="r">
  76. <u-input type="number" placeholder="输入车辆规格" @blur="car.carInput=false" @input="carSizeInput"
  77. v-model="form.cardSize">
  78. <text slot="suffix">米</text>
  79. </u-input>
  80. </view>
  81. </view>
  82. <view class="item">
  83. <view class="l"><text style="color: red;">*</text>预计入场:</view>
  84. <view class="r">
  85. <view class="r">
  86. <uni-datetime-picker placeholder="请选择" @change="expectDayChange" :clear-icon="false"
  87. :start="exprctStart" type="datetime" v-model="form.expectInDay" @close="closeFn" />
  88. </view>
  89. </view>
  90. </view>
  91. <view class="item">
  92. <view class="l"><text style="color: red;">*</text>中国车牌号:</view>
  93. <view class="r">
  94. <u-input placeholder="中国车牌号" v-model="form.chinaCarNo" />
  95. </view>
  96. </view>
  97. <view class="item">
  98. <view class="l"><text style="color: red;">*</text>中国司机:</view>
  99. <view class="r">
  100. <u-input placeholder="司机姓名" v-model="form.driverName" />
  101. </view>
  102. </view>
  103. <view class="item">
  104. <view class="l"><text style="color: red;">*</text>联系号码:</view>
  105. <view class="r">
  106. <u-input placeholder="司机联系号码" type="number" v-model="form.driverPhone" />
  107. </view>
  108. </view>
  109. <view class="item-line">
  110. 业务项
  111. </view>
  112. <view class="item" v-for="item in filterItemList" :key="item.id" v-if="item.items.length>0">
  113. <view class="l"><text v-if="needTypeId.indexOf(item.id)!==-1" style="color: red;">*</text>{{item.name}}:
  114. </view>
  115. <view class="r">
  116. <view @click="selectItemFn(item)" style="width: 150px;">
  117. <u-input placeholder="请选择" v-model="item.itemName" readonly clearable>
  118. <u-icon name="close" v-if="item.itemName" slot="suffix" color="#E5E5E5;" size="5"
  119. @click="item.itemName=''"></u-icon>
  120. </u-input>
  121. </view>
  122. <view style="width: 20px;margin-left: 10rpx;">
  123. <u-input placeholder="数量" :disabled="item.inc==0" border="surround" v-model="item.num"
  124. type="number" style="width: 15px;" v-if="item.itemName"></u-input>
  125. </view>
  126. <view style="margin-left:30rpx;color: red;" v-if="item.itemName">
  127. {{item.items.filter(obj=>obj.itemName==item.itemName)[0].price*item.num}}元
  128. </view>
  129. <u-icon name="plus" style="position: absolute;right: 10rpx;"
  130. v-if="item.itemName&&item.name.indexOf('人')!==-1&&item.name.indexOf('核酸')!==-1"
  131. @click="addHsFn(item.num,true)"></u-icon>
  132. </view>
  133. </view>
  134. <view class="hj" v-show="totalPrice>0">
  135. 合计:{{totalPrice}}元
  136. </view>
  137. </view>
  138. <u-button type="primary" text="确定" @click="saveFn" v-show="!hs.visible"></u-button>
  139. <!-- ---------------------------------------------------------- -->
  140. <view class="bottom-safety"></view>
  141. <u-popup :show="car.carInput" :overlay="false" @close="car.carInput=false" borderRadius="10">
  142. <view style="padding: 40rpx;line-height: 60rpx;text-align: center;">
  143. <view v-for="item in filterUnitList" :id="item.id"
  144. style="margin-bottom: 20rpx;border-bottom: 1rpx solid #E5E5E5;" @click="selectCarSize(item)">
  145. {{item.unit}}
  146. </view>
  147. </view>
  148. </u-popup>
  149. <u-popup :show="driver.show" :overlay="false" @close="driver.show=false" borderRadius="10">
  150. <view style="padding: 40rpx;line-height: 60rpx;text-align: center;">
  151. <view v-for="item in driver.filterList" :id="item.id"
  152. style="margin-bottom: 20rpx;border-bottom: 1rpx solid #E5E5E5;" @click="selectDriverFn(item)">
  153. {{item.name}}({{item.idCard}})
  154. </view>
  155. </view>
  156. </u-popup>
  157. <u-popup :show="show" closeable closeOnClickOverlay @close="show=false">
  158. <view style="padding: 40rpx;">
  159. <u-radio-group @change="itemSelectFn" placement="column" v-model="item.itemName">
  160. <u-radio v-for="item in item.items" :key="item.id" :label="item.itemName" :name="item.itemName"
  161. v-if="form.netWeight >= item.minWeight
  162. && form.netWeight < item.maxWeight
  163. &&form.cardSize<=item.carLength
  164. &&form.cardSize>=item.minLength" style="margin-top: 30rpx;">
  165. </u-radio>
  166. </u-radio-group>
  167. </view>
  168. </u-popup>
  169. <u-modal :show="modal.visible" showCancelButton closeOnClickOverlay @cancel="modal.visible=false"
  170. @confirm="addHsPeopleFn">
  171. <view style="">
  172. <u--input placeholder="姓名" border="surround" v-model="modal.form.name"></u--input>
  173. <u--input style="margin-top: 20rpx;" placeholder="联系号码" border="surround" v-model="modal.form.phone">
  174. </u--input>
  175. </view>
  176. </u-modal>
  177. </view>
  178. </template>
  179. <script>
  180. export default {
  181. data() {
  182. return {
  183. car: {
  184. carInput: false,
  185. filterList: [],
  186. },
  187. driver: {
  188. show: false,
  189. filterList: [],
  190. },
  191. customerId: '1',
  192. exprctStart: new Date().getTime(),
  193. itemList: [],
  194. filterItemList: [],
  195. needTypeId: [],
  196. form: {
  197. customerId: '',
  198. customerIndex: 0,
  199. countryIndex: 0,
  200. goodsIndex: 0,
  201. cardNo: '',
  202. cardSize: '',
  203. goodsName: '',
  204. netWeight: '',
  205. chinaCarNo: '',
  206. driverName: '',
  207. driverPhone: '',
  208. expectInDay: ''
  209. },
  210. show: false,
  211. item: {
  212. items: []
  213. },
  214. customer: {
  215. index: 0,
  216. customerList: [],
  217. },
  218. carList: [],
  219. driverList: [],
  220. unitList: [],
  221. filterUnitList: [],
  222. country: {
  223. index: 0,
  224. list: ['越南车', '中国车']
  225. },
  226. goods: {
  227. index: 0,
  228. goodsList: []
  229. },
  230. hs: {
  231. visible: false,
  232. num: 1,
  233. list: []
  234. },
  235. modal: {
  236. visible: false,
  237. form: {
  238. name: '',
  239. phone: ''
  240. }
  241. }
  242. }
  243. },
  244. onShow() {
  245. this.customerId = uni.getStorageSync('customerId');
  246. },
  247. onLoad(options) {
  248. this.form.id = options.id;
  249. this.getBusinessPeople();
  250. if (this.customerId == '1') {
  251. this.getCustomerList();
  252. }
  253. this.getGoodsList();
  254. this.getUnit();
  255. },
  256. computed: {
  257. totalPrice() {
  258. let itemList = this.itemList.filter(obj => obj.itemName);
  259. let price = 0;
  260. for (let i in itemList) {
  261. let type = itemList[i];
  262. let items = type.items;
  263. for (let j in items) {
  264. let item = items[j];
  265. if (item.itemName == type.itemName) {
  266. price += item.price;
  267. break;
  268. }
  269. }
  270. }
  271. return price;
  272. }
  273. },
  274. created() {
  275. },
  276. methods: {
  277. getBusinessById() {
  278. this.$api.getBusinessById({
  279. id: this.form.id
  280. }).then(resp => {
  281. let data = resp.data;
  282. this.form = data;
  283. let goodsName = data.goodsName;
  284. this.customer.index = this.customer.customerList.map(obj => obj.name).indexOf(data
  285. .customerName);
  286. this.goods.index = this.goods.goodsList.map(o => o.name).indexOf(goodsName);
  287. let goods = this.goods.goodsList[this.goods.index];
  288. let items = data.items;
  289. let noNeedIds = goods.noNeedIds.split(',');
  290. let itemTypeList = this.itemList.filter(obj => noNeedIds.indexOf(obj.id) == -1);
  291. this.filterItemList = itemTypeList;
  292. for (let i in itemTypeList) {
  293. let type = itemTypeList[i];
  294. for (let j in items) {
  295. let item = items[j];
  296. if (item.itemTypeId == type.id) {
  297. type.itemName = item.itemName;
  298. type.num = item.num
  299. break;
  300. }
  301. }
  302. }
  303. setTimeout(() => {
  304. this.car.carInput = false;
  305. }, 50)
  306. })
  307. },
  308. getBusinessPeople() {
  309. this.$api.getBusinessPeople({
  310. businessId: this.form.id
  311. }).then(resp => {
  312. let list = resp.data;
  313. let index = 0;
  314. let r = [];
  315. for (let i in list) {
  316. r.push({
  317. name: list[i].name,
  318. phone: list[i].phone,
  319. index: index,
  320. id: list[i].id
  321. })
  322. index++;
  323. }
  324. this.hs.list = r;
  325. })
  326. },
  327. whChange(event) {
  328. let index = event.detail.value; //当前picker选中的值
  329. this.goods.index = index;
  330. let goods = this.goods.goodsList[index];
  331. let noNeedIds = goods.noNeedIds.split(',');
  332. this.needTypeId = goods.needIds.split(',')
  333. this.filterItemList = this.itemList.filter(obj => noNeedIds.indexOf(obj.id) == -1);
  334. },
  335. carSizeInput() {
  336. let carSize = this.form.cardSize;
  337. let filterUnitList = this.unitList.filter(obj => obj.unit.indexOf(carSize) !== -1);
  338. this.car.carInput = filterUnitList.length > 0;
  339. this.filterUnitList = filterUnitList;
  340. },
  341. getUnit() {
  342. this.$api.getUnitList().then(resp => {
  343. this.unitList = resp.data;
  344. })
  345. },
  346. selectCarSize(data) {
  347. this.form.cardSize = data.unit;
  348. this.car.carInput = false;
  349. },
  350. expectDayChange(date) {
  351. this.form.expectInDay = date;
  352. },
  353. addHsFn(num, show) {
  354. this.hs.num = num;
  355. this.hs.visible = show;
  356. },
  357. showHsModal() {
  358. Object.assign(this.modal, {
  359. visible: true,
  360. form: {
  361. name: '',
  362. phone: '',
  363. index: -1
  364. }
  365. });
  366. },
  367. addHsPeopleFn() {
  368. if (!this.modal.form.name) {
  369. this.$common.toast('请输入名称');
  370. return;
  371. }
  372. if (this.modal.form.phone && !this.$common.isPhone(this.modal.form.phone)) {
  373. this.$common.toast('联系号码不正确');
  374. return;
  375. }
  376. let dbIndex = this.modal.form.index;
  377. if (dbIndex >= 0) {
  378. this.hs.list[dbIndex].name = this.modal.form.name;
  379. this.hs.list[dbIndex].phone = this.modal.form.phone;
  380. } else {
  381. this.modal.form.index = this.hs.list.length;
  382. this.hs.list.push(this.modal.form);
  383. }
  384. this.modal.visible = false;
  385. },
  386. editFn(data) {
  387. Object.assign(this.modal, {
  388. visible: true,
  389. form: data
  390. })
  391. },
  392. deleteFn(data) {
  393. this.hs.list.splice(data.index, 1);
  394. if (data.id) {
  395. this.$api.deleteHsPeople({
  396. id: data.id
  397. });
  398. }
  399. },
  400. getGoodsList() {
  401. this.$api.getGoodsList().then(resp => {
  402. this.goods.goodsList = resp.data;
  403. this.getItemList();
  404. })
  405. },
  406. getItemList() {
  407. this.$api.getItemList().then(resp => {
  408. this.itemList = resp.data;
  409. this.getBusinessById();
  410. })
  411. },
  412. handlerTypeItem(goods) {
  413. },
  414. idCardInput() {
  415. let val = this.form.driverIdCard;
  416. let list = this.driverList.filter(obj => obj.idCard.indexOf(val) !== -1);
  417. if (list.length > 0 && val) {
  418. this.driver.show = true;
  419. this.driver.filterList = list;
  420. } else {
  421. this.driver.show = false;
  422. }
  423. },
  424. selectDriverFn(item) {
  425. this.form.driverIdCard = item.idCard;
  426. this.form.driverName = item.name;
  427. this.form.driverPhone = item.phone
  428. let that = this;
  429. setTimeout(() => {
  430. that.driver.show = false;
  431. }, 150)
  432. },
  433. selectCarNo(item) {
  434. this.form.cardNo = item.cardNo;
  435. this.form.cardSize = item.cardSize;
  436. this.form.netWeight = item.lastNetWeight;
  437. let names = this.goods.goodsList.map(obj => obj.name);
  438. let index = names.indexOf(item.lastGoodsName);
  439. this.goods.index = index == -1 ? 0 : index;
  440. this.country.index = this.country.list.indexOf(item.countryName)
  441. let that = this;
  442. setTimeout(() => {
  443. this.car.carInput = false;
  444. }, 150)
  445. },
  446. getCustomerList() {
  447. this.$api.getCustomerList().then(resp => {
  448. this.customer.customerList = resp.data;
  449. })
  450. },
  451. selectItemFn(item) {
  452. this.item = item;
  453. this.show = true;
  454. },
  455. itemSelectFn(data) {
  456. this.show = false;
  457. this.item.itemName = data;
  458. },
  459. check() {
  460. if (!this.form.cardNo) {
  461. this.$common.toast('请录入境外车牌号')
  462. return false;
  463. }
  464. if (!this.$common.isNum(this.form.cardSize)) {
  465. this.$common.toast('车辆规格请录入数字')
  466. return false;
  467. }
  468. if (!this.form.chinaCarNo) {
  469. this.$common.toast('请录入中国车牌')
  470. return false;
  471. }
  472. if (!this.form.driverName) {
  473. this.$common.toast('请录入中国司机')
  474. return false;
  475. }
  476. if (!this.$common.isPhone(this.form.driverPhone)) {
  477. this.$common.toast('司机联系号码不正确')
  478. return false;
  479. }
  480. if (!this.form.netWeight || !this.$common.isNum(this.form.netWeight)) {
  481. this.$common.toast('载重必须输入数字')
  482. return false;
  483. }
  484. let typeList = this.filterItemList.filter(obj => obj.itemName);
  485. if (typeList.length == 0) {
  486. this.$common.toast('至少选择一项业务项')
  487. return false;
  488. }
  489. let filterItemList = this.filterItemList;
  490. for (let j in this.needTypeId) {
  491. let id = this.needTypeId[j];
  492. for (let i in filterItemList) {
  493. let type = filterItemList[i];
  494. if (id == type.id && !type.itemName) {
  495. this.$common.toast('[' + type.name + ']必选')
  496. return;
  497. }
  498. }
  499. }
  500. let peopleList = this.hs.list;
  501. if (typeList.filter(obj => obj.name.indexOf('人') !== -1 &&
  502. obj.name.indexOf('核酸') !== -1).length > 0 &&
  503. peopleList.length == 0) {
  504. this.$common.toast('录入核酸检测人员')
  505. return false;
  506. }
  507. let list = [];
  508. for (let i in typeList) {
  509. let type = typeList[i];
  510. type.num = 1;
  511. for (let j in type.items) {
  512. let item = type.items[j];
  513. if (type.itemName == item.itemName) {
  514. type.itemId = item.id;
  515. break;
  516. }
  517. }
  518. list.push({
  519. itemId: type.itemId,
  520. num: type.num
  521. })
  522. }
  523. this.form.itemJson = JSON.stringify(list);
  524. this.form.peopleJson = JSON.stringify(peopleList);
  525. this.form.items = null;
  526. if (this.customerId == '1') {
  527. this.form.customerId = this.customer.customerList[this.customer.index].id;
  528. } else {
  529. this.form.customerId = this.customerId;
  530. }
  531. this.form.goodsName = this.goods.goodsList[this.goods.index].name;
  532. return true;
  533. },
  534. saveFn() {
  535. if (this.check()) {
  536. let obj = this.$common.removeNull(this.form);
  537. this.$api.saveBusiness(obj).then(resp => {
  538. if (resp.code == 200) {
  539. uni.removeStorageSync('business_' + this.customerId);
  540. this.$common.toast('修改成功');
  541. this.hs.list = [];
  542. setTimeout(() => {
  543. this.$common.to('/pages/business-order/business-order')
  544. }, 1000)
  545. }
  546. })
  547. }
  548. },
  549. bindPickerChange(e) {
  550. var nowId = e.target.id; //当前picker的ID id需要自己设置 在picker中
  551. var value = e.detail.value; //当前picker选中的值
  552. switch (nowId) { //根据ID判断是哪个picker
  553. case "qy": //picker的ID
  554. this.customer.index = value;
  555. break;
  556. case "hw": //picker的ID
  557. this.goods.index = value;
  558. break;
  559. case "gj": //picker的ID
  560. this.country.index = value;
  561. break;
  562. }
  563. },
  564. }
  565. }
  566. </script>
  567. <style lang="scss">
  568. page {
  569. background-color: #fff;
  570. }
  571. .hs-item {
  572. text-align: center;
  573. }
  574. .item-line {
  575. color: #a2a2a2;
  576. padding: 5px 0 10px 29px;
  577. border-bottom: 1px solid #E5E5E5;
  578. }
  579. .hj {
  580. padding: 50rpx;
  581. font-size: 40rpx;
  582. color: red;
  583. font-weight: bold;
  584. }
  585. .save-btn {
  586. background-color: #ff4200;
  587. height: 88rpx;
  588. display: flex;
  589. justify-content: center;
  590. align-items: center;
  591. margin: 60rpx;
  592. color: #fff;
  593. font-size: 30rpx;
  594. font-weight: bold;
  595. border-radius: 10rpx;
  596. }
  597. @import '@/common/common.scss'
  598. </style>