selectGlOrderModal.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <template>
  2. <a-modal
  3. centered
  4. class="collection-detail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. :title="modalTit"
  9. :bodyStyle="{padding: modalTit?'25px 32px 20px':'50px 32px 15px'}"
  10. @cancel="isShow=false"
  11. width="80%">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <div class="common-main">
  14. <!-- 搜索条件 -->
  15. <div ref="tableSearch" class="table-page-search-wrapper">
  16. <a-form layout="inline">
  17. <a-row type="flex" :gutter="15">
  18. <a-col flex="300px">
  19. <a-form-item label="业务单号">
  20. <a-input v-model.trim="queryParam.outBizSubNo" allowClear placeholder="请输入业务单号"/>
  21. </a-form-item>
  22. </a-col>
  23. <a-col flex="300px">
  24. <a-form-item label="客户名称">
  25. <a-input v-model.trim="queryParam.demanderName" allowClear placeholder="请输入客户名称"/>
  26. </a-form-item>
  27. </a-col>
  28. <a-col flex="300px">
  29. <a-form-item label="收货客户名称">
  30. <dealerSubareaScopeList ref="dealerSubareaScopeList" defValKey="buyerSn" @change="custChange" v-model="queryParam.receiverSn" />
  31. </a-form-item>
  32. </a-col>
  33. <a-col flex="300px" v-show="isShowWarehouse">
  34. <a-form-item label="仓库">
  35. <warehouse
  36. v-model="queryParam.warehouseSn"
  37. isPermission
  38. placeholder="请选择仓库"
  39. />
  40. </a-form-item>
  41. </a-col>
  42. <a-col flex="auto">
  43. <span class="table-page-search-submitButtons">
  44. <a-button type="primary" :disabled="disabled" @click="$refs.table.refresh(true)">查询</a-button>
  45. <a-button style="margin-left: 8px" :disabled="disabled" @click="resetSearchForm()">重置</a-button>
  46. </span>
  47. </a-col>
  48. </a-row>
  49. </a-form>
  50. </div>
  51. <!-- 表格数据 -->
  52. <s-table
  53. class="sTable"
  54. ref="table"
  55. size="small"
  56. :rowKey="(record) => record.id"
  57. :columns="columns"
  58. :data="loadData"
  59. :scroll="{ y: 400 }"
  60. :pageSize="10"
  61. bordered>
  62. <!-- 操作 -->
  63. <template slot="action" slot-scope="text, record">
  64. <div v-if="!(record.outBizType == 'SALES'&&record.financialStatus=='WAIT')&&record.sendFlag==0">
  65. <a-button
  66. size="small"
  67. type="link"
  68. class="button-warning"
  69. v-if="!record.checked"
  70. @click="handleChoose(record)"
  71. >选择</a-button>
  72. <span style="color:#55aa00;" v-else>已选</span>
  73. </div>
  74. <span style="color:#55aa00;" v-else>
  75. {{ record.checked?'已选':'--' }}
  76. </span>
  77. </template>
  78. </s-table>
  79. </div>
  80. </a-spin>
  81. </a-modal>
  82. </template>
  83. <script>
  84. import { commonMixin } from '@/utils/mixin'
  85. import { STable, VSelect } from '@/components'
  86. import { stockOutList } from '@/api/stockOut'
  87. import warehouse from '@/views/common/chooseWarehouse.js'
  88. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  89. export default {
  90. name: 'SelectGlOrderModal',
  91. mixins: [commonMixin],
  92. components: { STable, VSelect, dealerSubareaScopeList, warehouse },
  93. props: {
  94. openModal: { // 弹框显示状态
  95. type: Boolean,
  96. default: false
  97. },
  98. modalTit: { // 弹框标题
  99. type: String,
  100. default: null
  101. },
  102. chooseData: {
  103. type: Array,
  104. default: function () {
  105. return []
  106. }
  107. }
  108. },
  109. data () {
  110. return {
  111. isShow: this.openModal, // 是否打开弹框
  112. disabled: false,
  113. spinning: false,
  114. handlePlData: [],
  115. queryParam: {
  116. outBizSubNo: '',
  117. demanderName: '',
  118. receiverSn: undefined,
  119. warehouseSn: undefined,
  120. outBizTypeList: ['SALES', 'ALLOCATE']
  121. },
  122. orginData: [],
  123. // 加载数据方法 必须为 Promise 对象
  124. loadData: parameter => {
  125. this.disabled = true
  126. this.spinning = true
  127. return stockOutList(Object.assign(parameter, this.queryParam)).then(res => {
  128. let data
  129. if (res.status == 200) {
  130. data = res.data
  131. const no = (data.pageNo - 1) * data.pageSize
  132. for (var i = 0; i < data.list.length; i++) {
  133. data.list[i].no = no + i + 1
  134. const index = this.chooseData.findIndex(item => data.list[i].stockOutSn == item.stockOutSn)
  135. data.list[i].checked = index >= 0
  136. }
  137. this.disabled = false
  138. }
  139. this.spinning = false
  140. this.orginData = data.list
  141. return data
  142. })
  143. },
  144. snList: []
  145. }
  146. },
  147. computed: {
  148. columns () {
  149. const _this = this
  150. const arr = [
  151. { title: '序号', dataIndex: 'no', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
  152. { title: '出库单号', dataIndex: 'stockOutNo', width: '8%', align: 'center' },
  153. { title: '业务单号', dataIndex: 'outBizSubNo', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  154. { title: '出库类型', dataIndex: 'outBizTypeDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  155. { title: '发货编号', dataIndex: 'sendNo', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  156. { title: '客户名称', dataIndex: 'demanderName', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  157. { title: '收货客户名称', dataIndex: 'receiverName', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  158. { title: '产品款数', dataIndex: 'productTotalCategory', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  159. { title: '产品数量', dataIndex: 'productTotalQty', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  160. { title: '单据审核时间', dataIndex: 'auditTime', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  161. { title: '收款状态', dataIndex: 'financialStatusDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  162. { title: '发货状态', dataIndex: 'sendFlagDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  163. { title: '操作', scopedSlots: { customRender: 'action' }, width: '6%', align: 'center' }
  164. ]
  165. if(this.isShowWarehouse){
  166. arr.splice(7,0,{ title: '仓库', dataIndex: 'warehouseName', width: '10%', align: 'center', customRender: function (text) { return text || '--' } })
  167. }
  168. return arr
  169. },
  170. totalAmount () {
  171. let ret = 0
  172. this.handlePlData.map(item => {
  173. ret = ret + item.totalAmount
  174. })
  175. return ret.toFixed(2)
  176. }
  177. },
  178. methods: {
  179. custChange (val) {
  180. this.queryParam.receiverSn = val.key || ''
  181. },
  182. // 删除
  183. handleDel (row) {
  184. const i = this.chooseData.findIndex(item => row.stockOutSn == item.stockOutSn)
  185. this.chooseData.splice(i, 1)
  186. const oi = this.orginData.findIndex(item => row.stockOutSn == item.stockOutSn)
  187. if (oi >= 0) {
  188. this.orginData[oi].checked = false
  189. }
  190. },
  191. // 选择
  192. handleChoose (row) {
  193. row.checked = true
  194. this.chooseData.push(row)
  195. this.$emit('choose')
  196. },
  197. // 取消
  198. handleCommonCancel () {
  199. this.$emit('cancel')
  200. },
  201. // 重置
  202. resetSearchForm () {
  203. this.queryParam = {
  204. outBizSubNo: '',
  205. demanderName: '',
  206. receiverSn: undefined,
  207. warehouseSn: undefined,
  208. outBizTypeList: ['SALES', 'ALLOCATE']
  209. }
  210. this.orginData = []
  211. this.$nextTick(() => {
  212. this.$refs.dealerSubareaScopeList.resetForm()
  213. })
  214. if (this.$refs.table) {
  215. this.$refs.table.refresh(true)
  216. }
  217. }
  218. },
  219. watch: {
  220. // 父页面传过来的弹框状态
  221. openModal (newValue, oldValue) {
  222. this.isShow = newValue
  223. },
  224. // 重定义的弹框状态
  225. isShow (newValue, oldValue) {
  226. if (!newValue) {
  227. this.handleCommonCancel()
  228. } else {
  229. this.resetSearchForm()
  230. }
  231. }
  232. }
  233. }
  234. </script>
  235. <style lang="less">
  236. </style>