addRecallBillModal.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <template>
  2. <a-modal
  3. centered
  4. class="shelfSet-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="recallBillInfo.shelfName"
  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="queryParam"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol">
  18. <a-row :gutter="10">
  19. <a-col :md="8" :sm="24">
  20. <a-form-model-item label="产品编码">
  21. <a-input allowClear placeholder="请输入产品编码" v-model.tirm="queryParam.productCode"/>
  22. </a-form-model-item>
  23. </a-col>
  24. <a-col :md="8" :sm="24">
  25. <a-form-item label="产品名称">
  26. <a-input allowClear placeholder="请输入产品名称" v-model.tirm="queryParam.productName"/>
  27. </a-form-item>
  28. </a-col>
  29. <a-col :md="8" :sm="24">
  30. <a-form-model-item label="滞销天数">
  31. <a-input-group>
  32. <a-row>
  33. <a-col :md="11" :sm="24">
  34. <a-input-number
  35. id="shelfMonitoringList-minUnsalableDays"
  36. v-model="queryParam.unsalableDaysBegin"
  37. :precision="0"
  38. :min="0"
  39. :max="999999"
  40. placeholder="起始天数"
  41. style="width: 100%;display: inline-block;" />
  42. </a-col>
  43. <a-col :md="2" :sm="24"><span style="display: block;text-align: center;line-height: 32px;">至</span></a-col>
  44. <a-col :md="11" :sm="24">
  45. <a-input-number
  46. id="shelfMonitoringList-maxUnsalableDays"
  47. v-model="queryParam.unsalableDaysEnd"
  48. :precision="0"
  49. :min="0"
  50. :max="999999"
  51. placeholder="截止天数"
  52. style="width: 100%;display: inline-block;" />
  53. </a-col>
  54. </a-row>
  55. </a-input-group>
  56. </a-form-model-item>
  57. </a-col>
  58. <a-col :span="24" style="text-align: right;padding-right: 30px;">
  59. <a-button type="primary" @click="handleSearch" id="outboundOrderList-refresh" >查询</a-button>
  60. <a-button style="margin-left: 8px" @click="resetSearchForm" id="outboundOrderList-reset">重置</a-button>
  61. </a-col>
  62. </a-row>
  63. </a-form-model>
  64. <div class="tableCon">
  65. <div style="margin-bottom: 16px">
  66. <a-button type="primary" :disabled="!hasSelected" @click="handleSave">
  67. 新增调回单
  68. </a-button>
  69. <span class="tableSpan">
  70. <template v-if="hasSelected">
  71. 已选<span>{{ selectedRowKeys.length }}</span>款产品,共<span>{{ dataList.length }}</span>件
  72. </template>
  73. </span>
  74. <span>
  75. <a-checkbox @change="isShowChooseList" size="small">
  76. 仅显示已选产品
  77. </a-checkbox>
  78. </span>
  79. </div>
  80. <a-table
  81. class="sTable"
  82. ref="recallBillTable"
  83. size="small"
  84. :rowKey="record => record.id"
  85. :columns="columns"
  86. :dataSource="dataList"
  87. :scroll="{ y: 200 }"
  88. :pagination="false"
  89. bordered
  90. :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
  91. <!-- 调回数量 -->
  92. <template slot="confirmQty" slot-scope="text, record">
  93. <a-input-number
  94. size="small"
  95. id="shelfMonitoring-add-confirmQty"
  96. v-model="record.confirmQty"
  97. :precision="0"
  98. :min="0"
  99. :max="record.qty"
  100. placeholder="请输入"
  101. :style="{ width: '100%', color: record.confirmQty == 0 ? 'red' : '' }"
  102. />
  103. </template>
  104. </a-table>
  105. </div>
  106. </a-spin>
  107. </a-modal>
  108. </template>
  109. <script>
  110. import { commonMixin } from '@/utils/mixin'
  111. import { shelfControlList } from '@/api/shelf'
  112. import { shelfRecallSave } from '@/api/shelfRecall'
  113. export default {
  114. name: 'AddRecallBillModal',
  115. mixins: [commonMixin],
  116. props: {
  117. openModal: {
  118. // 弹框显示状态
  119. type: Boolean,
  120. default: false
  121. },
  122. recallBillInfo: {
  123. type: Object,
  124. default: () => {
  125. return {}
  126. }
  127. }
  128. },
  129. data () {
  130. return {
  131. spinning: false,
  132. isShow: this.openModal, // 是否打开弹框
  133. formItemLayout: {
  134. labelCol: { span: 5 },
  135. wrapperCol: { span: 17 }
  136. },
  137. queryParam: { // 查询条件
  138. shelfSn: '',
  139. productCode: undefined,
  140. productName: undefined,
  141. unsalableDaysBegin: undefined,
  142. unsalableDaysEnd: undefined
  143. },
  144. columns: [
  145. { title: '序号', dataIndex: 'no', width: '10%', align: 'center' },
  146. { title: '货位号', dataIndex: 'shelfPlaceCode', width: '15%', align: 'center' },
  147. { title: '产品编码', dataIndex: 'productCode', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  148. { title: '产品名称', dataIndex: 'productName', width: '30%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  149. { title: '最大库容', dataIndex: 'maxQty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  150. { title: '补货在途', dataIndex: 'replenishBillQty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  151. { title: '调回在途', dataIndex: 'recallBillQty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  152. { title: '货架库存', dataIndex: 'qty', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  153. { title: '单位', dataIndex: 'productUnit', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  154. { title: '滞销天数', dataIndex: 'unsalableDays', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  155. { title: '调回数量', width: '20%', align: 'left', scopedSlots: { customRender: 'confirmQty' } }
  156. ],
  157. selectedRowKeys: [], // 选中表格id
  158. hasSelected: false, // 控制选择按钮
  159. dataList: [],
  160. chooseList: []
  161. }
  162. },
  163. methods: {
  164. getLoadData (ajaxData) { // 获取列表
  165. this.spinning = true
  166. if (!this.checkValueRange()) {
  167. this.spinning = false
  168. return
  169. }
  170. shelfControlList(ajaxData).then(res => {
  171. if (res.status == 200) {
  172. for (var i = 0; i < res.data.length; i++) {
  173. res.data[i].no = i + 1
  174. res.data[i].confirmQty = res.data[i].qty
  175. }
  176. this.dataList = res.data
  177. this.spinning = false
  178. } else {
  179. this.spinning = false
  180. }
  181. })
  182. },
  183. onSelectChange (selectedRowKeys, selectedRows) { // 获取选中列表
  184. if (selectedRowKeys.length > 0) {
  185. this.hasSelected = true
  186. } else {
  187. this.hasSelected = false
  188. }
  189. this.selectedRowKeys = selectedRowKeys
  190. this.chooseList = selectedRows
  191. },
  192. // 确定新增回调单
  193. handleSave () {
  194. const _this = this
  195. _this.spinning = true
  196. const arr = []
  197. const arrInd = []
  198. this.chooseList.forEach((item, index) => {
  199. if (item.confirmQty) {
  200. arr.push({
  201. shelfSn: item.shelfSn,
  202. shelfPlaceSn: item.shelfPlaceSn,
  203. shelfPlaceCode: item.shelfPlaceCode,
  204. productSn: item.productSn,
  205. productCode: item.productCode,
  206. productName: item.productName,
  207. qty: item.confirmQty
  208. })
  209. } else {
  210. arrInd.push(index + 1)
  211. }
  212. })
  213. if (arrInd.length > 0) {
  214. this.$message.warning('调回数量不能为空或0,请移除后提交')
  215. return
  216. }
  217. const params = {
  218. shelfSn: this.recallBillInfo.shelfSn,
  219. detailList: arr
  220. }
  221. shelfRecallSave(params).then(res => {
  222. _this.spinning = false
  223. if (res.status == 200) {
  224. _this.$emit('ok')
  225. _this.isShow = false
  226. _this.hasSelected = false
  227. _this.selectedRowKeys = [] // 清空选中内容
  228. _this.$message.success('保存并确认成功')
  229. }
  230. })
  231. },
  232. isShowChooseList (e) {
  233. if (e.target.checked) {
  234. this.dataList = this.chooseList
  235. } else {
  236. this.getLoadData(this.queryParam)
  237. }
  238. },
  239. // 查询
  240. handleSearch () {
  241. const ajaxData = this.queryParam
  242. this.getLoadData(ajaxData)
  243. },
  244. // 重置
  245. resetSearchForm () {
  246. const obj = { // 查询条件
  247. shelfSn: this.recallBillInfo.shelfSn,
  248. productCode: undefined,
  249. productName: undefined,
  250. unsalableDaysBegin: undefined,
  251. unsalableDaysEnd: undefined
  252. }
  253. this.queryParam = obj
  254. this.getLoadData(obj)
  255. },
  256. // 校验滞销天数数值范围
  257. checkValueRange () {
  258. const isONull = this.queryParam.unsalableDaysBegin === null || this.queryParam.unsalableDaysBegin === undefined
  259. const isOEmpty = this.queryParam.unsalableDaysBegin === ''
  260. const isOZero = this.queryParam.unsalableDaysBegin === 0
  261. const isTNull = this.queryParam.unsalableDaysEnd === null || this.queryParam.unsalableDaysEnd === undefined
  262. const isTEmpty = this.queryParam.unsalableDaysEnd === ''
  263. const isTZero = this.queryParam.unsalableDaysEnd === 0
  264. // 第一个为空(可为null可为空字符)第二个不为空
  265. // 第一个不为空第二个为空(可为null可为空字符)
  266. // 第一个大于第二个
  267. if ((isONull || isOEmpty) && (this.queryParam.unsalableDaysEnd || isTZero)) {
  268. this.$message.info('请输入正确的滞销天数查询范围!')
  269. return false
  270. }
  271. if ((this.queryParam.unsalableDaysBegin || isOZero) && (isTNull || isTEmpty)) {
  272. this.$message.info('请输入正确的滞销天数查询范围!')
  273. return false
  274. }
  275. if (this.queryParam.unsalableDaysBegin > this.queryParam.unsalableDaysEnd) {
  276. this.$message.info('请输入正确的滞销天数查询范围!')
  277. return false
  278. }
  279. this.queryParam.unsalableDaysBegin = this.queryParam.unsalableDaysBegin > 999999999 ? 999999999 : this.queryParam.unsalableDaysBegin
  280. this.queryParam.unsalableDaysEnd = this.queryParam.unsalableDaysEnd > 999999999 ? 999999999 : this.queryParam.unsalableDaysEnd
  281. return true
  282. }
  283. },
  284. watch: {
  285. // 父页面传过来的弹框状态
  286. openModal (newValue, oldValue) {
  287. this.isShow = newValue
  288. },
  289. // 重定义的弹框状态
  290. isShow (newValue, oldValue) {
  291. if (!newValue) {
  292. this.$emit('close')
  293. this.$refs.ruleForm.resetFields()
  294. // this.$refs.custList.resetForm()
  295. } else {
  296. if (this.recallBillInfo && this.recallBillInfo.shelfSn) {
  297. this.queryParam.shelfSn = this.recallBillInfo.shelfSn
  298. const ajaxData = { shelfSn: this.recallBillInfo.shelfSn }
  299. this.getLoadData(ajaxData)
  300. }
  301. }
  302. }
  303. }
  304. }
  305. </script>
  306. <style lang="less">
  307. .shelfSet-basicInfo-modal {
  308. .ant-modal-body {
  309. padding: 40px 40px 24px;
  310. }
  311. .ant-form-item{
  312. margin-bottom: 15px;
  313. }
  314. .btn-cont {
  315. text-align: center;
  316. margin: 35px 0 10px;
  317. }
  318. .tableSpan{
  319. margin:0 16px;
  320. span{
  321. margin: 0 10px;
  322. color:red;
  323. font-weight: bold;
  324. }
  325. }
  326. }
  327. </style>