index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. <template>
  2. <view style="background-color: #f2f2f6;padding-top: 1rpx;">
  3. <u-navbar title="销售" bgColor="#FD4B09" :autoBack="true" :placeholder="true" leftIconColor="#fff"
  4. :titleStyle="{color: '#fff'}">
  5. <view slot="right">
  6. <u-icon name="clock" size="40rpx" color="#fff" @click="historical0rders()"></u-icon>
  7. </view>
  8. </u-navbar>
  9. <view style="padding: 0 10rpx;width:96%;border-radius:10rpx;margin: 20rpx auto;background-color: #fff;">
  10. <u-cell-group :border="false">
  11. <u-cell icon="account" :iconStyle="{color: '#FD4B09'}" title="客户" :value="form.corpName" :isLink="true"
  12. @click="selectCustomer">
  13. </u-cell>
  14. <u-cell icon="calendar" :iconStyle="{color: '#FD4B09'}" title="日期"
  15. :value="form.businesDate?form.businesDate.slice(0,10):''" :isLink="true" @click="show = true">
  16. </u-cell>
  17. <u-cell icon="home" :iconStyle="{color: '#FD4B09'}" title="发货仓库" :value="form.storageName"
  18. :isLink="true" @click="filterAll(['storageName','storageId'])">
  19. </u-cell>
  20. </u-cell-group>
  21. </view>
  22. <view
  23. style="padding: 0 10rpx;width:96%;border-radius:10rpx;margin: 20rpx auto;background-color: #fff;padding-top: 10rpx;">
  24. <u-cell-group :border="false">
  25. <u-cell icon="list-dot" :iconStyle="{color: '#FD4B09'}"
  26. :title="'产品列表('+dataList.length+') '+' 数量'+ numberAll" value="添加产品" @click="selectProduct()">
  27. </u-cell>
  28. <u-cell v-for="(item,index) in dataList" :key="index">
  29. <view slot="label">
  30. <!-- customStyle="margin-bottom: 10px" -->
  31. <u-row>
  32. <u-col span="2.9">
  33. <u--image :showLoading="true" :src="item.url?item.url:'../../../static/images/404.png'"
  34. width="80px" height="80px" radius="10">
  35. </u--image>
  36. </u-col>
  37. <u-col span="9.1">
  38. <view
  39. style="font-size: 36rpx;width: 530rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
  40. {{item.cname}}
  41. </view>
  42. <view style="display: flex;justify-content: space-between;">
  43. <view style="color: #707070;">单价:¥{{item.price}}</view>
  44. <view style="color: #707070;">数量:{{item.storageInQuantity}}</view>
  45. </view>
  46. <view style="display: flex;justify-content: space-between;">
  47. <view style="color: #707070;">金额:¥{{item.amount}}</view>
  48. <view style="color: #707070; color: red;" @click="deleteProduct(index)">
  49. <u-button type="error" size="mini" text="删除"></u-button>
  50. </view>
  51. </view>
  52. </u-col>
  53. </u-row>
  54. </view>
  55. </u-cell>
  56. </u-cell-group>
  57. </view>
  58. <view class="submitBar">
  59. <view style="width: 100%;position: fixed;bottom: 0;background-color: #fff;border-top: 1rpx solid #ccc;">
  60. <view style="width: 100%;display: flex;font-size: 24rpx;justify-content: space-between;">
  61. <view style="width: 50%;display: flex;">
  62. <view style="margin-top: 10rpx;">
  63. <u-icon name="shopping-cart" color="#FD4B09" size="50"></u-icon>
  64. </view>
  65. <view style="margin-top: 40rpx;color: #000;">
  66. 金额:<text style="color: red;">¥{{amount}}</text>
  67. </view>
  68. </view>
  69. <view @click="billingCollection"
  70. style="width: 25%;background-color: #5ac725;display: grid;justify-items: center;">
  71. <u-icon name="rmb" color="#fff"></u-icon>
  72. <view style="color: #fff;">开单并收款</view>
  73. </view>
  74. <view @click="saveOrder"
  75. style="width: 25%;background-color: #fd4b09;display: grid;justify-items: center;">
  76. <u-icon name="checkmark" color="#fff"></u-icon>
  77. <view style="color: #fff;">确认开单</view>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. <u-popup zIndex="10070" :closeOnClickOverlay="false" :show="openPopup" @close="openPopup = false,mask = false" mode="center" closeable
  83. round="10rpx">
  84. <u--form labelPosition="left" :labelStyle="{color: '#fd4b09'}" :model="formTwo" ref="formTwo"
  85. labelWidth="150rpx">
  86. <view style="width: calc(700rpx - 20px);margin: 10px;">
  87. <text>收款台</text>
  88. <view>
  89. <!-- <u-form-item label="订单金额" prop="cname" borderBottom>
  90. <u-input type="number" v-model="formTwo.purchaseAmount" border="none" inputAlign="right" placeholder="请输入"
  91. disabled disabledColor="#ffffff" />
  92. </u-form-item> -->
  93. <!-- <u-form-item label="优惠金额" prop="cname" borderBottom>
  94. <u-input type="number" v-model="formTwo.thisUsedProfit" border="none" inputAlign="right" placeholder="请输入" disabledColor="#ffffff" @blur="discount(0)"/>
  95. </u-form-item> -->
  96. <u-form-item label="应收金额" prop="cname" borderBottom>
  97. <u-input type="number" v-model="formTwo.orderAmount" border="none" inputAlign="right" placeholder="请输入"
  98. disabled disabledColor="#ffffff" />
  99. </u-form-item>
  100. <u-form-item label="已收金额" prop="cname" borderBottom>
  101. <u-input type="number" v-model="formTwo.settlmentAmount" border="none" inputAlign="right" placeholder="请输入" disabled disabledColor="#ffffff" />
  102. </u-form-item>
  103. <u-form-item label="溢付款" prop="cname" borderBottom>
  104. <u-input type="number" v-model="formTwo.overPayment" border="none" inputAlign="right" disabled disabledColor="#ffffff" />
  105. </u-form-item>
  106. <u-form-item label="本次收款" prop="cname" borderBottom>
  107. <u-input type="number" clearable v-model="formTwo.currentAmount" border="none" inputAlign="right" placeholder="请输入" disabledColor="#ffffff" @blur="discount(1)" />
  108. </u-form-item>
  109. <u-form-item label="收款日期" labelWidth="190rpx" prop="cname" borderBottom
  110. @click="filterAll(['advanceCollectionDate','advanceCollectionDate'])">
  111. <view style="width: 100%;text-align: right;">
  112. {{formTwo.advanceCollectionDate?formTwo.advanceCollectionDate.slice(0,10):''}}
  113. </view>
  114. </u-form-item>
  115. <u-form-item label="收款账户" prop="cname" borderBottom @click="filterAll(['account','account'])">
  116. <u-input v-model="formTwo.account" border="none" inputAlign="right" placeholder="请选择"
  117. disabled disabledColor="#ffffff">
  118. <template slot="suffix" style="text-align: center;">
  119. <u-icon name="plus-circle" size="18" @click.native.stop="newCompany()"></u-icon>
  120. </template>
  121. </u-input>
  122. </u-form-item>
  123. <view style="display: flex;margin-top: 20rpx;">
  124. <u-button text="取消" style="width: 45%;" @click="openPopup = false,mask = false,uni.navigateBack()"></u-button>
  125. <u-button type="primary" text="收款" color="#FD4B09" style="width: 45%;"
  126. @click="collectionConfirm"></u-button>
  127. </view>
  128. </view>
  129. </view>
  130. </u--form>
  131. </u-popup>
  132. <u-datetime-picker :show="show" v-model="timeValue" mode="date" @confirm="confirm" @cancel="show = false">
  133. </u-datetime-picker>
  134. <u-datetime-picker :show="timeOpen" v-model="datetime" mode="date" @cancel="timeOpen = false,mask = false"
  135. @confirm="confirmTiem"></u-datetime-picker>
  136. <u-picker :show="showWarehouse" :columns="columns" :keyName="keyName" @confirm="confirmWarehouse"
  137. @cancel="showWarehouse = false"></u-picker>
  138. <u-notify ref="uNotify"></u-notify>
  139. </view>
  140. </template>
  141. <script>
  142. import {
  143. customerList,
  144. quickBilling,
  145. typeSave
  146. } from '@/api/views/sale/index.js'
  147. import {
  148. collectPayment
  149. } from '@/api/views/sale/salesOrderDetails.js'
  150. import {
  151. dateFormat
  152. } from '@/common/dateFormat'
  153. export default {
  154. data() {
  155. return {
  156. show: false,
  157. timeOpen: false,
  158. openPopup: false,
  159. showWarehouse: false,
  160. timeValue: Number(new Date()),
  161. datetime: Number(new Date()),
  162. columns: [],
  163. dataList: [],
  164. amount: 0.00,
  165. numberAll: 0,
  166. screen: [],
  167. keyName: '',
  168. form: {
  169. corpId: '',
  170. corpName: '',
  171. customer: '',
  172. businesDate: '',
  173. storageName: '',
  174. total: 0
  175. },
  176. formTwo: {
  177. },
  178. revenueTop: 0
  179. }
  180. },
  181. onLoad() {
  182. uni.getSystemInfo({
  183. success: (e) => {
  184. this.revenueTop = e.statusBarHeight + 44
  185. }
  186. })
  187. },
  188. created() {
  189. this.form.businesDate = new Date((new Date()).getTime() + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ')
  190. .substr(0, 19)
  191. },
  192. methods: {
  193. newCompany() {
  194. uni.$u.route('/pages/views/product/createCompany',{
  195. code:"account",
  196. title:"收款账户"
  197. });
  198. },
  199. //时间确认选择
  200. confirmTiem(e) {
  201. this.formTwo[this.screen[1]] = dateFormat(new Date(e.value), "YYYY-MM-DD HH:mm:ss")
  202. this.timeOpen = false
  203. this.mask = false
  204. },
  205. collectionConfirm(){
  206. if(!this.formTwo.thisUsedProfit){
  207. return uni.showToast({
  208. icon: "none",
  209. title: '优惠金额不能为空',
  210. mask: true
  211. });
  212. }
  213. if(!this.formTwo.orderAmount){
  214. return uni.showToast({
  215. icon: "none",
  216. title: '合同金额不能为空',
  217. mask: true
  218. });
  219. }
  220. if(!this.formTwo.currentAmount){
  221. return uni.showToast({
  222. icon: "none",
  223. title: '本次收款金额不能为空',
  224. mask: true
  225. });
  226. }
  227. if(!this.formTwo.account){
  228. return uni.showToast({
  229. icon: "none",
  230. title: '收款帐户不能为空',
  231. mask: true
  232. });
  233. }
  234. let this_ = this
  235. uni.showModal({
  236. title: '是否确认收款',
  237. content: '本次收款金额'+this_.formTwo.currentAmount,
  238. success: function(rest) {
  239. if (rest.confirm == true) {
  240. uni.showLoading({
  241. title: '加载中',
  242. mask: true
  243. });
  244. collectPayment(this_.formTwo).then(res=>{
  245. uni.showToast({
  246. icon: "none",
  247. title: '收款成功',
  248. mask: true,
  249. duration:2000
  250. });
  251. this.openPopup = false
  252. setTimeout(function() {
  253. uni.hideLoading();
  254. uni.navigateBack();
  255. }, 2000);
  256. })
  257. }
  258. }
  259. })
  260. },
  261. //集合筛选条件
  262. filterAll(screen) {
  263. this.screen = screen
  264. switch (screen[1]) {
  265. case "account":
  266. this.$u.api.getWorkDicts('account').then(res => {
  267. this.columns = [res.data]
  268. this.keyName = "dictValue"
  269. this.showWarehouse = true
  270. })
  271. break;
  272. case "advanceCollectionDate":
  273. this.timeOpen = true
  274. this.mask = true
  275. break;
  276. case "storageId":
  277. customerList({
  278. size: 1,
  279. current: 1
  280. }).then(request => {
  281. customerList({
  282. size: request.data.total,
  283. current: 1
  284. }).then(res => {
  285. this.columns = [res.data.records]
  286. this.keyName = 'cname'
  287. this.showWarehouse = true
  288. })
  289. })
  290. break;
  291. }
  292. },
  293. discount(type) {
  294. if (type == 0) {
  295. if (this.formTwo.thisUsedProfit < 0) {
  296. return this.formTwo.thisUsedProfit = null
  297. }
  298. this.formTwo.orderAmount = (this.formTwo.purchaseAmount - this.formTwo.thisUsedProfit).toFixed(2)
  299. if (this.formTwo.orderAmount < 0) {
  300. this.$set(this.formTwo, "orderAmount", null)
  301. this.$set(this.formTwo, "thisUsedProfit", null)
  302. uni.showToast({
  303. icon: "none",
  304. title: '优惠金额不能大于订单金额',
  305. mask: true
  306. });
  307. }
  308. if ((this.formTwo.currentAmount - this.formTwo.orderAmount) > 0) {
  309. this.formTwo.overPayment = (this.formTwo.currentAmount - this.formTwo.orderAmount).toFixed(2)
  310. } else {
  311. this.formTwo.overPayment = '0.00'
  312. }
  313. } else if (type == 1) {
  314. if (this.formTwo.currentAmount < 0) {
  315. return this.formTwo.currentAmount = null
  316. }
  317. if ((this.formTwo.currentAmount - this.formTwo.orderAmount) > 0) {
  318. this.formTwo.overPayment = (this.formTwo.currentAmount - this.formTwo.orderAmount).toFixed(2)
  319. } else {
  320. this.formTwo.overPayment = '0.00'
  321. }
  322. }
  323. },
  324. deleteProduct(index) {
  325. this.amount = Number(this.amount) - Number(this.dataList[index].amount)
  326. this.amount.toFixed(2)
  327. this.dataList.splice(index, 1)
  328. this.numberAll = 0
  329. for (let item of this.dataList) {
  330. this.numberAll += Number(item.storageInQuantity)
  331. }
  332. },
  333. //客户选择返回触发
  334. otherFun(customer) {
  335. this.form.corpName = customer.cname
  336. this.form.corpId = customer.id
  337. this.form.belongToCorpId = customer.belongtocompany
  338. },
  339. //商品选择返回
  340. getProduct(dataList) {
  341. this.amount = Number(this.amount)
  342. for (let item of dataList) {
  343. this.dataList.push(item)
  344. this.amount += Number(item.amount)
  345. this.numberAll += Number(item.storageInQuantity)
  346. }
  347. this.amount = this.amount.toFixed(2)
  348. },
  349. selectCustomer() {
  350. this.$u.route('/pages/views/salesSlip/selectCustomer', {
  351. corpType: 'KH'
  352. });
  353. },
  354. historical0rders() {
  355. this.$u.route('/pages/views/salesSlip/salesOrderList');
  356. },
  357. selectProduct() {
  358. if (this.form.storageId) {
  359. this.$u.route('/pages/views/salesSlip/selectProduct', {
  360. form: JSON.stringify(this.form),
  361. data: JSON.stringify(this.dataList)
  362. });
  363. } else {
  364. this.$refs.uNotify.show({
  365. top: this.revenueTop,
  366. type: 'warning',
  367. message: '请选择发货仓库!'
  368. })
  369. }
  370. },
  371. confirm(e) {
  372. this.show = false
  373. this.form.businesDate = new Date((new Date(e.value)).getTime() + 8 * 60 * 60 * 1000).toJSON().split('T')
  374. .join(' ').substr(0, 19)
  375. },
  376. confirmWarehouse(e) {
  377. if (this.screen[1] == "account") {
  378. this.formTwo.account = e.value[0].dictValue
  379. this.showWarehouse = false
  380. } else {
  381. this.form.storageName = e.value[0].cname
  382. this.form.storageId = e.value[0].id
  383. this.showWarehouse = false
  384. }
  385. },
  386. //开单收款
  387. billingCollection() {
  388. if (!this.form.corpId) return this.$refs.uNotify.show({
  389. top: this.revenueTop,
  390. type: 'warning',
  391. message: '请选择客户!'
  392. })
  393. if (!this.form.businesDate) return this.$refs.uNotify.show({
  394. top: this.revenueTop,
  395. type: 'warning',
  396. message: '请选择日期!'
  397. })
  398. if (!this.form.storageId) return this.$refs.uNotify.show({
  399. top: this.revenueTop,
  400. type: 'warning',
  401. message: '请选择发货仓库!'
  402. })
  403. if (this.dataList.length == 0) return this.$refs.uNotify.show({
  404. top: this.revenueTop,
  405. type: 'warning',
  406. message: '请选择商品!'
  407. })
  408. this.form.billType = "XS";
  409. this.$set(this.form, "orderItemsList", this.dataList);
  410. let form = JSON.parse(JSON.stringify(this.form))
  411. delete form.corpName
  412. uni.showLoading({
  413. title: '加载中',
  414. mask: true
  415. });
  416. quickBilling(form).then(res => {
  417. uni.showToast({
  418. icon: "none",
  419. title: '提交成功',
  420. mask: true
  421. });
  422. this.openPopup = true
  423. this.formTwo = res.data
  424. this.formTwo.currentAmount = (this.formTwo.orderAmount - this.formTwo.settlmentAmount).toFixed(2)
  425. this.formTwo.advanceCollectionDate = dateFormat(new Date(), "YYYY-MM-DD HH:mm:ss")
  426. })
  427. },
  428. //保存订单
  429. saveOrder() {
  430. if (!this.form.corpId) return this.$refs.uNotify.show({
  431. top: this.revenueTop,
  432. type: 'warning',
  433. message: '请选择客户!'
  434. })
  435. if (!this.form.businesDate) return this.$refs.uNotify.show({
  436. top: this.revenueTop,
  437. type: 'warning',
  438. message: '请选择日期!'
  439. })
  440. if (!this.form.storageId) return this.$refs.uNotify.show({
  441. top: this.revenueTop,
  442. type: 'warning',
  443. message: '请选择发货仓库!'
  444. })
  445. if (this.dataList.length == 0) return this.$refs.uNotify.show({
  446. top: this.revenueTop,
  447. type: 'warning',
  448. message: '请选择商品!'
  449. })
  450. this.form.billType = "XS";
  451. this.$set(this.form, "orderItemsList", this.dataList);
  452. let form = JSON.parse(JSON.stringify(this.form))
  453. delete form.corpName
  454. uni.showLoading({
  455. title: '加载中',
  456. mask: true
  457. });
  458. // typeSave(暂存方法)
  459. quickBilling(form).then(res => {
  460. uni.showToast({
  461. icon: "none",
  462. title: '开单成功',
  463. mask: true
  464. });
  465. setTimeout(function() {
  466. uni.hideLoading();
  467. uni.navigateBack();
  468. }, 1000);
  469. })
  470. }
  471. }
  472. }
  473. </script>
  474. <style scoped>
  475. .submitBar {
  476. width: 100%;
  477. position: fixed;
  478. bottom: 0rpx;
  479. padding-bottom: 20rpx;
  480. font-size: 32rpx;
  481. color: #000;
  482. text-align: center;
  483. border-top: 2rpx solid #f2f2f6;
  484. background-color: #fff;
  485. }
  486. ::v-deep .u-navbar__content {
  487. background-image: linear-gradient(to bottom, #FD4B09, #FF6F3B);
  488. }
  489. ::v-deep .u-cell__title-text {
  490. color: #FD4B09;
  491. }
  492. </style>