addRecallBillModal.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <a-modal
  3. centered
  4. class="shelfSet-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增回调单--[数字货架]名吃环境啥的技术附件"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. width="60%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="shelfSet-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol">
  19. <a-row :gutter="16">
  20. <a-col :span="8">
  21. <a-form-model-item label="产品编码" prop="shelfName">
  22. <a-input allowClear placeholder="请输入产品编码" v-model.tirm="form.productCode"/>
  23. </a-form-model-item>
  24. </a-col>
  25. <a-col :span="8">
  26. <a-form-item label="产品名称">
  27. <a-input allowClear placeholder="请输入产品名称" v-model.tirm="form.productName"/>
  28. </a-form-item>
  29. </a-col>
  30. <a-col :span="8">
  31. <a-form-model-item label="滞销天数">
  32. <a-input-group>
  33. <a-row>
  34. <a-col :span="11">
  35. <a-input-number
  36. id="shelfMonitoringList-minUnsalableDays"
  37. v-model="form.minUnsalableDays"
  38. :precision="0"
  39. :min="0"
  40. :max="999999"
  41. placeholder="起始天数"
  42. style="width: 100%;display: inline-block;" />
  43. </a-col>
  44. <a-col :span="2"><span style="display: block;text-align: center;line-height: 32px;">至</span></a-col>
  45. <a-col :span="11">
  46. <a-input-number
  47. id="shelfMonitoringList-maxUnsalableDays"
  48. v-model="form.maxUnsalableDays"
  49. :precision="0"
  50. :min="0"
  51. :max="999999"
  52. placeholder="截止天数"
  53. style="width: 100%;display: inline-block;" />
  54. </a-col>
  55. </a-row>
  56. </a-input-group>
  57. </a-form-model-item>
  58. </a-col>
  59. <a-col :span="24" style="text-align: right;padding-right: 30px;">
  60. <a-button type="primary" @click="getSumByType" :disabled="disabled" id="outboundOrderList-refresh" >查询</a-button>
  61. <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="outboundOrderList-reset">重置</a-button>
  62. </a-col>
  63. </a-row>
  64. </a-form-model>
  65. <div class="tableCon">
  66. <div style="margin-bottom: 16px">
  67. <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
  68. 新增调回单
  69. </a-button>
  70. <span class="tableSpan">
  71. <template v-if="hasSelected">
  72. 已选<span>{{ selectedRowKeys.length }}</span>款产品,共<span>10</span>件
  73. </template>
  74. </span>
  75. <span>
  76. <a-checkbox @change="onChange" size="small">
  77. 仅显示已选产品
  78. </a-checkbox>
  79. </span>
  80. </div>
  81. <a-table
  82. :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  83. :columns="columns"
  84. :data-source="data"
  85. >
  86. </a-table>
  87. </div>
  88. </a-spin>
  89. </a-modal>
  90. </template>
  91. <script>
  92. import { commonMixin } from '@/utils/mixin'
  93. import { VSelect } from '@/components'
  94. import custList from '@/views/common/custList.vue'
  95. import shelfSList from '@/views/common/shelfList'
  96. import { shelfSave } from '@/api/shelf'
  97. export default {
  98. name: 'ShelfSetRecallBillModal',
  99. components: { VSelect, custList, shelfSList },
  100. mixins: [commonMixin],
  101. props: {
  102. openModal: {
  103. // 弹框显示状态
  104. type: Boolean,
  105. default: false
  106. },
  107. nowData: {
  108. type: Object,
  109. default: () => {
  110. return {}
  111. }
  112. },
  113. type: {
  114. type: [String, Number],
  115. default: '1'
  116. }
  117. },
  118. data () {
  119. return {
  120. spinning: false,
  121. isShow: this.openModal, // 是否打开弹框
  122. formItemLayout: {
  123. labelCol: { span: 5 },
  124. wrapperCol: { span: 17 }
  125. },
  126. form: {
  127. },
  128. columns: [
  129. { title: '序号', dataIndex: 'no', width: '10%', align: 'center' },
  130. { title: '货位号', dataIndex: 'no', width: '15%', align: 'center' },
  131. { title: '产品编码', dataIndex: 'product.code', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  132. { title: '产品名称', dataIndex: 'product.name', width: '30%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  133. { title: '最大库容', dataIndex: 'qty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text) : '--' } },
  134. { title: '补货在途', dataIndex: 'confirmQty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text) : '--' } },
  135. { title: '调回在途', dataIndex: 'product.unit', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  136. { title: '货架库存', dataIndex: 'confirmQty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text) : '--' } },
  137. { title: '单位', dataIndex: 'product.unit', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  138. { title: '滞销天数', dataIndex: 'confirmQty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text) : '--' } },
  139. { title: '调回数量', width: '15%', align: 'left', scopedSlots: { customRender: 'num' } }
  140. ],
  141. selectedRowKeys: [], // Check here to configure the default column
  142. loading: false,
  143. hasSelected: true,
  144. rules: {
  145. shelfName: [{ required: true, message: '请选择货架名称', trigger: 'change' }]
  146. },
  147. showRecallBill: false
  148. }
  149. },
  150. methods: {
  151. start () {
  152. this.loading = true
  153. // ajax request after empty completing
  154. setTimeout(() => {
  155. this.loading = false
  156. this.selectedRowKeys = []
  157. }, 1000)
  158. },
  159. onSelectChange (selectedRowKeys) {
  160. console.log('selectedRowKeys changed: ', selectedRowKeys)
  161. this.selectedRowKeys = selectedRowKeys
  162. },
  163. shelfChange (v, row) {
  164. this.shelfName = row ? row.shelfName : ''
  165. },
  166. // 下一步 保存货架信息
  167. handlerNextStep () {
  168. this.showRecallBill = true
  169. },
  170. // 客户 change
  171. custChange (obj, row) {
  172. this.form.customerSn = row && row.customerSn || undefined
  173. },
  174. // 保存
  175. handleSave () {
  176. const _this = this
  177. this.$refs.ruleForm.validate(valid => {
  178. if (valid) {
  179. const form = JSON.parse(JSON.stringify(_this.form))
  180. form.shelfSn = _this.nowData && _this.nowData.shelfSn
  181. _this.spinning = true
  182. shelfSave(form).then(res => {
  183. if (res.status == 200) {
  184. _this.$message.success(res.message)
  185. setTimeout(() => {
  186. _this.isShow = false
  187. _this.$emit('ok', res.data)
  188. _this.spinning = false
  189. }, 100)
  190. // 更新价格显示
  191. // updateShelfPriceShow({
  192. // shelfSn: form.shelfSn,
  193. // paramValue: form.showPrice
  194. // }).then(ret => {
  195. // if (ret.status == 200) {
  196. // _this.$message.success(ret.message)
  197. // setTimeout(() => {
  198. // _this.isShow = false
  199. // _this.$emit('ok', res.data)
  200. // _this.spinning = false
  201. // }, 100)
  202. // } else {
  203. // _this.spinning = false
  204. // }
  205. // })
  206. } else {
  207. _this.spinning = false
  208. }
  209. })
  210. } else {
  211. console.log('error submit!!')
  212. return false
  213. }
  214. })
  215. }
  216. },
  217. watch: {
  218. // 父页面传过来的弹框状态
  219. openModal (newValue, oldValue) {
  220. this.isShow = newValue
  221. },
  222. // 重定义的弹框状态
  223. isShow (newValue, oldValue) {
  224. if (!newValue) {
  225. this.$emit('close')
  226. this.$refs.ruleForm.resetFields()
  227. // this.$refs.custList.resetForm()
  228. } else {
  229. // const _this = this
  230. // this.$nextTick(() => {
  231. // _this.form.shelfName = _this.nowData.shelfName
  232. // _this.form.showPrice = _this.nowData.showPrice
  233. // const custome = _this.nowData.customerEntity
  234. // if (custome) {
  235. // _this.form.customerSn = custome.customerSn || ''
  236. // _this.$refs.custList.fetchUser(custome.customerName || '')
  237. // _this.$refs.custList.dealerName = {
  238. // key: custome.customerSn,
  239. // label: custome.customerName,
  240. // row: _this.nowData
  241. // }
  242. // }
  243. // })
  244. }
  245. }
  246. }
  247. }
  248. </script>
  249. <style lang="less">
  250. .shelfSet-basicInfo-modal {
  251. .ant-modal-body {
  252. padding: 40px 40px 24px;
  253. }
  254. .ant-form-item{
  255. margin-bottom: 15px;
  256. }
  257. .btn-cont {
  258. text-align: center;
  259. margin: 35px 0 10px;
  260. }
  261. .tableSpan{
  262. margin:0 16px;
  263. span{
  264. margin: 0 10px;
  265. color:red;
  266. font-weight: bold;
  267. }
  268. }
  269. }
  270. </style>