selectGlAllocatModal.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  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="90%">
  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 :gutter="15">
  18. <a-col :md="4" :sm="24">
  19. <a-form-item label="调拨单号">
  20. <a-input id="allocateBillList-allocateNo" v-model.trim="queryParam.allocateNo" allowClear placeholder="请输入调拨单号"/>
  21. </a-form-item>
  22. </a-col>
  23. <a-col :md="6" :sm="24">
  24. <a-form-item label="客户名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  25. <dealerSubareaScopeList ref="dealerSubareaScopeList" id="pushOrder-buyerName" @change="custChange" />
  26. </a-form-item>
  27. </a-col>
  28. <a-col :md="6" :sm="24">
  29. <a-form-item label="收货客户名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  30. <dealerSubareaScopeList ref="shbuyerName" id="pushOrder-shbuyerName" @change="shcustChange" />
  31. </a-form-item>
  32. </a-col>
  33. <a-col :md="4" :sm="24">
  34. <span class="table-page-search-submitButtons">
  35. <a-button type="primary" :disabled="disabled" @click="$refs.table.refresh(true)">查询</a-button>
  36. <a-button style="margin-left: 8px" :disabled="disabled" @click="resetSearchForm()">重置</a-button>
  37. </span>
  38. </a-col>
  39. </a-row>
  40. </a-form>
  41. </div>
  42. <!-- 表格数据 -->
  43. <s-table
  44. class="sTable"
  45. ref="table"
  46. size="small"
  47. :rowKey="(record) => record.id"
  48. :columns="columns"
  49. :data="loadData"
  50. :scroll="{ y: 400 }"
  51. :pageSize="10"
  52. bordered>
  53. <!-- 销售单号 -->
  54. <template slot="allocateNo" slot-scope="text, record">
  55. <span v-if="$hasPermissions('M_transferOut_detail')" class="link-bule" @click="handleDetail(record)">{{ record.allocateNo }}</span>
  56. <span v-else>{{ record.allocateNo }}</span>
  57. </template>
  58. <!-- 操作 -->
  59. <template slot="action" slot-scope="text, record">
  60. <div v-if="record.state=='WAIT_OUT_WAREHOUSE'||record.state=='FINISH'">
  61. <a-button
  62. size="small"
  63. type="link"
  64. class="button-warning"
  65. v-if="!record.checked"
  66. @click="handleChoose(record)"
  67. >选择</a-button>
  68. <span style="color:#55aa00;" v-else>已选</span>
  69. </div>
  70. <span style="color:#55aa00;" v-else>
  71. {{ record.checked?'已选':'--' }}
  72. </span>
  73. </template>
  74. </s-table>
  75. </div>
  76. </a-spin>
  77. <!-- 查看详情 -->
  78. <commonModal
  79. modalTit="调拨单详情"
  80. bodyPadding="10px"
  81. width="70%"
  82. :showFooter="false"
  83. :openModal="showDetailModal"
  84. @cancel="cancelDetail">
  85. <allocationDetailModal v-if="showDetailModal" :outBizSn="bizSn" />
  86. </commonModal>
  87. </a-modal>
  88. </template>
  89. <script>
  90. import { STable, VSelect } from '@/components'
  91. import { allocateBillList } from '@/api/allocateBill'
  92. import commonModal from '@/views/common/commonModal.vue'
  93. import allocationDetailModal from '@/views/allocationManagement/transferOut/detail.vue'
  94. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  95. export default {
  96. name: 'SelectGlAllocatModal',
  97. components: { STable, VSelect, dealerSubareaScopeList, commonModal, allocationDetailModal },
  98. props: {
  99. openModal: { // 弹框显示状态
  100. type: Boolean,
  101. default: false
  102. },
  103. modalTit: { // 弹框标题
  104. type: String,
  105. default: null
  106. },
  107. chooseData: {
  108. type: Array,
  109. default: function () {
  110. return []
  111. }
  112. },
  113. loading: {
  114. type: Boolean,
  115. default: false
  116. },
  117. dealerSn: {
  118. type: String,
  119. default: null
  120. }
  121. },
  122. data () {
  123. return {
  124. isShow: this.openModal, // 是否打开弹框
  125. disabled: false,
  126. spinning: false,
  127. showDetailModal: false,
  128. bizSn: null,
  129. queryParam: {
  130. buyerSn: undefined, // 客户名称
  131. receiverSn: undefined, // 收货客户
  132. allocateNo: '' // 调拨单号
  133. },
  134. orginData: [],
  135. // 加载数据方法 必须为 Promise 对象
  136. loadData: parameter => {
  137. this.disabled = true
  138. this.spinning = true
  139. return allocateBillList(Object.assign(parameter, this.queryParam)).then(res => {
  140. let data
  141. if (res.status == 200) {
  142. data = res.data
  143. const no = (data.pageNo - 1) * data.pageSize
  144. for (var i = 0; i < data.list.length; i++) {
  145. data.list[i].no = no + i + 1
  146. const index = this.chooseData.findIndex(item => (data.list[i].allocateSn == item.allocateSn))
  147. data.list[i].checked = index >= 0
  148. }
  149. this.disabled = false
  150. }
  151. this.spinning = false
  152. this.orginData = data.list
  153. return data
  154. })
  155. },
  156. snList: []
  157. }
  158. },
  159. computed: {
  160. columns () {
  161. const arr = [
  162. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  163. { title: '创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  164. { title: '调拨单号', scopedSlots: { customRender: 'allocateNo' }, width: '13%', align: 'center' },
  165. { title: '客户名称', dataIndex: 'targetName', width: '13%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  166. { title: '收货客户名称', dataIndex: 'receiverName', width: '13%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  167. { title: '发货编号', dataIndex: 'sendNo', width: '8%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  168. { title: '产品款数', dataIndex: 'totalCategory', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  169. { title: '产品数量', dataIndex: 'totalQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  170. { title: '业务状态', dataIndex: 'stateDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  171. { title: '操作', scopedSlots: { customRender: 'action' }, width: '8%', align: 'center' }
  172. ]
  173. if (this.$hasPermissions('B_isShowPrice')) { // 售价权限
  174. arr.splice(8, 0, { title: '总售价', dataIndex: 'totalPrice', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
  175. }
  176. return arr
  177. }
  178. },
  179. methods: {
  180. custChange (val) {
  181. this.queryParam.buyerSn = val.key
  182. },
  183. shcustChange (val) {
  184. this.queryParam.receiverSn = val.key
  185. },
  186. handleDetail (row, type) {
  187. this.bizSn = row.allocateSn
  188. this.showDetailModal = true
  189. },
  190. cancelDetail () {
  191. this.showDetailModal = false
  192. this.bizSn = null
  193. },
  194. // 删除
  195. handleDel (row) {
  196. const oi = this.orginData.findIndex(item => row.bizSn == item.allocateSn)
  197. if (oi >= 0) {
  198. this.orginData[oi].checked = false
  199. }
  200. },
  201. // 选择
  202. handleChoose (row) {
  203. row.checked = true
  204. this.$emit('choose', {
  205. bizType: 'ALLOCATE',
  206. bizSn: row.allocateSn,
  207. bizNo: row.allocateNo
  208. })
  209. },
  210. // 取消
  211. handleCommonCancel () {
  212. this.$emit('cancel')
  213. },
  214. // 重置
  215. resetSearchForm (flag) {
  216. this.queryParam = {
  217. buyerSn: undefined, // 客户名称
  218. receiverSn: undefined, // 收货客户
  219. allocateNo: '' // 调拨单号
  220. }
  221. this.orginData = []
  222. this.$nextTick(() => {
  223. this.$refs.dealerSubareaScopeList.resetForm()
  224. this.$refs.shbuyerName.resetForm()
  225. })
  226. if (this.$refs.table && !flag) {
  227. this.$refs.table.refresh(true)
  228. }
  229. }
  230. },
  231. watch: {
  232. loading (newValue, oldValue) {
  233. this.spinning = newValue
  234. },
  235. // 父页面传过来的弹框状态
  236. openModal (newValue, oldValue) {
  237. this.isShow = newValue
  238. },
  239. // 重定义的弹框状态
  240. isShow (newValue, oldValue) {
  241. if (!newValue) {
  242. this.handleCommonCancel()
  243. } else {
  244. if (this.dealerSn) {
  245. this.resetSearchForm(1)
  246. // 回显客户
  247. this.queryParam.buyerSn = this.dealerSn
  248. this.$nextTick(() => {
  249. this.$refs.dealerSubareaScopeList.getDetail(this.dealerSn)
  250. this.$refs.table.refresh(true)
  251. })
  252. } else {
  253. this.resetSearchForm()
  254. }
  255. }
  256. }
  257. }
  258. }
  259. </script>
  260. <style lang="less">
  261. </style>