detailModal.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. <template>
  2. <a-modal
  3. centered
  4. class="sendGood-detail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. :title="modalTit"
  9. @cancle="isShow=false"
  10. width="60%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="common-main">
  13. <a-alert type="info" v-if="detail.length" style="margin-bottom:10px">
  14. <div slot="message">箭冠汽配西安大兴店,共 {{ detail && detail.length }} 个出库单,产品款数合计 <span>{{ productTotal&&productTotal.totalCategory }}</span> ,产品数量合计 <span>{{ productTotal&&productTotal.totalQty }}</span>。</div>
  15. </a-alert>
  16. <div class="toolsBar">
  17. <a-form-model
  18. ref="ruleForm"
  19. :model="form"
  20. :rules="rules"
  21. :label-col="formItemLayout.labelCol"
  22. :wrapper-col="formItemLayout.wrapperCol"
  23. >
  24. <a-row>
  25. <a-col span="12">
  26. <a-form-model-item label="托运日期" prop="sendDate">
  27. <a-date-picker v-model="form.sendDate" :locale="locale"/>
  28. </a-form-model-item>
  29. </a-col>
  30. <a-col span="12">
  31. <a-form-model-item label="目的地">
  32. <a-input placeholder="请输入目的地" v-model.trim="form.customerAddress"></a-input>
  33. </a-form-model-item>
  34. </a-col>
  35. <a-col span="12">
  36. <a-form-model-item label="收货人" prop="customerCacateName">
  37. <a-input placeholder="请输入收货人" v-model.trim="form.customerCacateName"></a-input>
  38. </a-form-model-item>
  39. </a-col>
  40. <a-col span="12">
  41. <a-form-model-item label="电话" prop="customerCacatePhone">
  42. <a-input placeholder="请输入电话" v-model.trim="form.customerCacatePhone"></a-input>
  43. </a-form-model-item>
  44. </a-col>
  45. <a-col span="24">
  46. <a-form-model-item label="详细地址" prop="customerAddressDetail" :label-col="{span:3}" :wrapper-col="{span:19}">
  47. <a-textarea placeholder="请输入详细地址" v-model.trim="form.customerAddressDetail"></a-textarea>
  48. </a-form-model-item>
  49. </a-col>
  50. <a-col span="12">
  51. <a-form-model-item label="付款方式">
  52. <v-select
  53. v-model="form.payType"
  54. ref="payType"
  55. code="SEND_BILL_PAY_TYPE"
  56. placeholder="请选择付款方式"
  57. allowClear></v-select>
  58. </a-form-model-item>
  59. </a-col>
  60. <a-col span="12">
  61. <a-form-model-item label="交货方式">
  62. <v-select
  63. v-model="form.handoverType"
  64. ref="handoverType"
  65. code="SEND_BILL_HANDOVER_TYPE"
  66. placeholder="请选择交货方式"
  67. allowClear></v-select>
  68. </a-form-model-item>
  69. </a-col>
  70. <a-col span="12">
  71. <a-form-model-item label="运费合计">
  72. <a-input disabled placeholder="请输入运费合计" v-model.trim="form.totalSendAmount"></a-input>
  73. </a-form-model-item>
  74. </a-col>
  75. </a-row>
  76. </a-form-model>
  77. </div>
  78. <div>
  79. <a-table :columns="columns" :pagination="false" :scroll="{ y: 200 }" :data-source="tableData" bordered>
  80. <!-- 物品名称 -->
  81. <template slot="goodName" slot-scope="text, record">
  82. <a-select v-model="record.goodsName" style="width: 100%">
  83. <a-select-option value="易损件">
  84. 易损件
  85. </a-select-option>
  86. <a-select-option value="电池">
  87. 电池
  88. </a-select-option>
  89. <a-select-option value="机油">
  90. 机油
  91. </a-select-option>
  92. </a-select>
  93. </template>
  94. <!-- 数量 -->
  95. <template slot="qty" slot-scope="text, record">
  96. <a-input-number style="width: 100%;" :precision="0" v-model="record.goodsQty" :min="0" :max="999999"></a-input-number>
  97. </template>
  98. <!-- 体积 -->
  99. <template slot="volume" slot-scope="text, record">
  100. <a-input-number style="width: 100%;" :precision="2" v-model="record.goodsVolume" :min="0" :max="999999"></a-input-number>
  101. </template>
  102. <!-- 重量 -->
  103. <template slot="weight" slot-scope="text, record">
  104. <a-input-number style="width: 100%;" :precision="2" v-model="record.goodsWeight" :min="0" :max="999999"></a-input-number>
  105. </template>
  106. <!-- 计费单价 -->
  107. <template slot="price" slot-scope="text, record">
  108. <a-input-number style="width: 100%;" :precision="2" v-model="record.unitPrice" :min="0" :max="999999"></a-input-number>
  109. </template>
  110. <!-- 运费 -->
  111. <template slot="freight" slot-scope="text, record">
  112. <a-input-number
  113. style="width: 100%;"
  114. :precision="2"
  115. @change="amountChange('transportAmount',record)"
  116. v-model="record.transportAmount"
  117. :min="0"
  118. :max="999999"></a-input-number>
  119. </template>
  120. <!-- 保价 -->
  121. <template slot="supportValue" slot-scope="text, record">
  122. <a-input-number style="width: 100%;" :precision="2" v-model="record.supportValue" :min="0" :max="999999"></a-input-number>
  123. </template>
  124. <!-- 送货费 -->
  125. <template slot="deliveryExpense" slot-scope="text, record">
  126. <a-input-number
  127. style="width: 100%;"
  128. :precision="2"
  129. @change="amountChange('sendAmount',record)"
  130. v-model="record.sendAmount"
  131. :min="0"
  132. :max="999999"></a-input-number>
  133. </template>
  134. <!-- 其他 -->
  135. <template slot="other" slot-scope="text, record">
  136. <a-input-number
  137. style="width: 100%;"
  138. :precision="2"
  139. @change="amountChange('otherAmount',record)"
  140. v-model="record.otherAmount"
  141. :min="0"
  142. :max="999999"></a-input-number>
  143. </template>
  144. <!-- 操作 -->
  145. <template slot="action" slot-scope="text, record, index">
  146. <a-button
  147. size="small"
  148. type="link"
  149. class="button-error"
  150. @click="handleDel(record,index)"
  151. >
  152. 删除
  153. </a-button>
  154. </template>
  155. </a-table>
  156. <div style="padding: 5px; border:1px solid #eee;border-radius:0 0 10px;border-top: 0;">
  157. <a-button @click="addItem()" type="link" block>+新增发货明细</a-button>
  158. </div>
  159. </div>
  160. </div>
  161. <div class="btn-box">
  162. <a-button @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  163. <a-button type="primary" @click="handleCommonOk">{{ okText }}</a-button>
  164. </div>
  165. </a-spin>
  166. </a-modal>
  167. </template>
  168. <script>
  169. import moment from 'moment'
  170. import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
  171. import { STable, VSelect } from '@/components'
  172. import { sendBillInsert } from '@/api/sendBill'
  173. export default {
  174. name: 'CommonModal',
  175. components: { STable, VSelect },
  176. props: {
  177. openModal: { // 弹框显示状态
  178. type: Boolean,
  179. default: false
  180. },
  181. modalTit: { // 弹框标题
  182. type: String,
  183. default: null
  184. },
  185. okText: { // 确定 按钮文字
  186. type: String,
  187. default: '确定'
  188. },
  189. cancelText: { // 取消 按钮文字
  190. type: String,
  191. default: '取消'
  192. },
  193. isCancel: { // 是否显示 取消 按钮
  194. type: Boolean,
  195. default: true
  196. }
  197. },
  198. data () {
  199. return {
  200. locale,
  201. isShow: this.openModal, // 是否打开弹框
  202. disabled: false,
  203. spinning: false,
  204. form: {
  205. 'stockOutSnList': [], // 出库单列表
  206. 'sendDate': moment(), // 托运时间
  207. 'customerAddress': '', // 目的地
  208. 'customerAddressDetail': '', // 详细地址
  209. 'customerCacateName': '', // 收货人
  210. 'customerCacatePhone': '', // 收货人电话
  211. 'payType': '', // 收款方式
  212. 'handoverType': '', // 发货方式
  213. 'totalSendAmount': '', // 发货总费用
  214. 'sendBillDetailList': [] // 发货列表
  215. },
  216. rules: {
  217. sendDate: [{ required: true, message: '请选择托运日期', trigger: 'change' }],
  218. customerCacateName: [{ required: true, message: '请输入收货人', trigger: 'change' }],
  219. customerCacatePhone: [{ required: true, message: '请输入电话', trigger: 'change' }],
  220. customerAddressDetail: [{ required: true, message: '请输入详细地址', trigger: 'change' }]
  221. },
  222. formItemLayout: {
  223. labelCol: { span: 6 },
  224. wrapperCol: { span: 15 }
  225. },
  226. detail: [],
  227. productTotal: null,
  228. tableData: [],
  229. columns: [
  230. { title: '序号', dataIndex: 'no', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  231. { title: '货物名称', dataIndex: 'goodsName', scopedSlots: { customRender: 'goodName' }, width: '10%', align: 'center' },
  232. { title: '件数', dataIndex: 'goodsQty', scopedSlots: { customRender: 'qty' }, width: '8%', align: 'center' },
  233. { title: '体积(m³)', dataIndex: 'goodsVolume', scopedSlots: { customRender: 'volume' }, width: '8%', align: 'center' },
  234. { title: '重量(kg)', dataIndex: 'goodsWeight', scopedSlots: { customRender: 'weight' }, width: '8%', align: 'center' },
  235. { title: '计费单价(元)', dataIndex: 'unitPrice', scopedSlots: { customRender: 'price' }, width: '9%', align: 'center' },
  236. { title: '运费(元)', dataIndex: 'transportAmount', scopedSlots: { customRender: 'freight' }, width: '9%', align: 'center' },
  237. { title: '保价(万)', dataIndex: 'supportValue', scopedSlots: { customRender: 'supportValue' }, width: '9%', align: 'center' },
  238. { title: '送货费', dataIndex: 'sendAmount', scopedSlots: { customRender: 'deliveryExpense' }, width: '9%', align: 'center' },
  239. { title: '其他', dataIndex: 'otherAmount', scopedSlots: { customRender: 'other' }, width: '8%', align: 'center' },
  240. { title: '合计', dataIndex: 'totalAmount', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  241. { title: '操作', scopedSlots: { customRender: 'action' }, width: '8%', align: 'center' }
  242. ]
  243. }
  244. },
  245. methods: {
  246. setData (data) {
  247. this.detail = data
  248. this.getProductTotal()
  249. },
  250. // 出库单数据统计
  251. getProductTotal () {
  252. const ret = {
  253. totalCategory: 0,
  254. totalQty: 0
  255. }
  256. const stockOutSnList = []
  257. this.detail.map(item => {
  258. ret.totalCategory = ret.totalCategory + item.productTotalCategory
  259. ret.totalQty = ret.totalQty + item.productTotalQty
  260. stockOutSnList.push(item.stockOutSn)
  261. })
  262. this.form.stockOutSnList = stockOutSnList
  263. this.productTotal = ret
  264. },
  265. // 计算运费合计
  266. getTotalSendAmount () {
  267. let ret = 0
  268. this.tableData.map(item => {
  269. ret = ret + Number(item.totalAmount || 0)
  270. })
  271. this.form.totalSendAmount = ret.toFixed(2)
  272. },
  273. // 计算每行发货费用合计
  274. amountChange (key, record) {
  275. record.totalAmount = (record.transportAmount || 0) + (record.sendAmount || 0) + (record.otherAmount || 0)
  276. record.totalAmount = Number(record.totalAmount).toFixed(2)
  277. this.getTotalSendAmount()
  278. },
  279. // 删除
  280. handleDel (row, index) {
  281. this.tableData.splice(index, 1)
  282. this.tableData.map((item, i) => {
  283. item.no = i + 1
  284. })
  285. this.getTotalSendAmount()
  286. },
  287. // 添加
  288. addItem () {
  289. const len = this.tableData.length
  290. this.tableData.push({
  291. 'no': len + 1,
  292. 'goodsName': '',
  293. 'goodsQty': '',
  294. 'goodsVolume': '',
  295. 'goodsWeight': '',
  296. 'unitPrice': '',
  297. 'transportAmount': '',
  298. 'supportValue': '',
  299. 'sendAmount': '',
  300. 'otherAmount': '',
  301. 'totalAmount': ''
  302. })
  303. },
  304. // 确定
  305. handleCommonOk () {
  306. const _this = this
  307. if (_this.form.stockOutSnList.length == 0) {
  308. _this.$message.info('请选择出库单!')
  309. return
  310. }
  311. this.$refs.ruleForm.validate(valid => {
  312. _this.form.sendBillDetailList = _this.tableData
  313. if (valid) {
  314. if (_this.form.sendBillDetailList.length == 0) {
  315. _this.$message.info('请新增发货明细!')
  316. return false
  317. }
  318. console.log(_this.form)
  319. sendBillInsert(_this.form).then(res => {
  320. if (res.status == 200) {
  321. _this.$emit('ok')
  322. _this.isShow = false
  323. _this.$message.success(res.message)
  324. }
  325. })
  326. } else {
  327. return false
  328. }
  329. })
  330. },
  331. // 取消
  332. handleCommonCancel () {
  333. this.$emit('cancel')
  334. }
  335. },
  336. watch: {
  337. // 父页面传过来的弹框状态
  338. openModal (newValue, oldValue) {
  339. this.isShow = newValue
  340. },
  341. // 重定义的弹框状态
  342. isShow (newValue, oldValue) {
  343. if (!newValue) {
  344. this.$emit('cancel')
  345. }
  346. }
  347. }
  348. }
  349. </script>
  350. <style lang="less">
  351. .sendGood-detail-modal{
  352. .common-main{
  353. .toolsBar{
  354. border:1px solid #eee;
  355. border-radius: 3px;
  356. display: flex;
  357. align-items: center;
  358. margin-bottom: 10px;
  359. .ant-btn{
  360. margin-left: 30px;
  361. }
  362. }
  363. }
  364. .btn-box{
  365. text-align: center;
  366. margin-top: 30px;
  367. .ant-btn{
  368. margin:0 10px;
  369. }
  370. }
  371. }
  372. </style>