selectGlAllocatModal.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  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. <dealerSearchList 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. <dealerSearchList 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 { commonMixin } from '@/utils/mixin'
  91. import { STable, VSelect } from '@/components'
  92. import { allocateBillList } from '@/api/allocateBill'
  93. import commonModal from '@/views/common/commonModal.vue'
  94. import allocationDetailModal from '@/views/allocationManagement/transferOut/detail.vue'
  95. import dealerSearchList from '@/views/common/dealerSearchList.vue'
  96. export default {
  97. name: 'SelectGlAllocatModal',
  98. mixins: [commonMixin],
  99. components: { STable, VSelect, dealerSearchList, commonModal, allocationDetailModal },
  100. props: {
  101. openModal: { // 弹框显示状态
  102. type: Boolean,
  103. default: false
  104. },
  105. modalTit: { // 弹框标题
  106. type: String,
  107. default: null
  108. },
  109. chooseData: {
  110. type: Array,
  111. default: function () {
  112. return []
  113. }
  114. },
  115. loading: {
  116. type: Boolean,
  117. default: false
  118. },
  119. payerType:{
  120. type: String,
  121. default: ''
  122. },
  123. dealerSn: {
  124. type: String,
  125. default: null
  126. }
  127. },
  128. data () {
  129. return {
  130. isShow: this.openModal, // 是否打开弹框
  131. disabled: false,
  132. spinning: false,
  133. showDetailModal: false,
  134. bizSn: null,
  135. queryParam: {
  136. targetSn: undefined, // 客户名称
  137. receiverSn: undefined, // 收货客户
  138. allocateNo: '' // 调拨单号
  139. },
  140. orginData: [],
  141. // 加载数据方法 必须为 Promise 对象
  142. loadData: parameter => {
  143. this.disabled = true
  144. this.spinning = true
  145. return allocateBillList(Object.assign(parameter, this.queryParam, {authFlag:this.payerType=='DEALER'?1:0})).then(res => {
  146. let data
  147. if (res.status == 200) {
  148. data = res.data
  149. const no = (data.pageNo - 1) * data.pageSize
  150. for (var i = 0; i < data.list.length; i++) {
  151. data.list[i].no = no + i + 1
  152. const index = this.chooseData.findIndex(item => (data.list[i].allocateSn == item.allocateSn))
  153. data.list[i].checked = index >= 0
  154. }
  155. this.disabled = false
  156. }
  157. this.spinning = false
  158. this.orginData = data.list
  159. return data
  160. })
  161. },
  162. snList: []
  163. }
  164. },
  165. computed: {
  166. columns () {
  167. const arr = [
  168. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  169. { title: '创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  170. { title: '调拨单号', scopedSlots: { customRender: 'allocateNo' }, width: '13%', align: 'center' },
  171. { title: '客户名称', dataIndex: 'targetName', width: '13%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  172. { title: '收货客户名称', dataIndex: 'receiverName', width: '13%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  173. { title: '发货编号', dataIndex: 'sendNo', width: '8%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  174. { title: '产品款数', dataIndex: 'totalCategory', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  175. { title: '产品数量', dataIndex: 'totalQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  176. { title: '业务状态', dataIndex: 'stateDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  177. { title: '操作', scopedSlots: { customRender: 'action' }, width: '8%', align: 'center' }
  178. ]
  179. if (this.$hasPermissions('B_glDispatch_salesPrice')) { // 售价权限
  180. arr.splice(8, 0, { title: '总售价', dataIndex: 'totalPrice', width: '8%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') })
  181. }
  182. return arr
  183. }
  184. },
  185. methods: {
  186. custChange (val) {
  187. console.log(val)
  188. if(val.row){
  189. this.queryParam.targetSn = val.row.dealerSn
  190. this.queryParam.targetName = undefined
  191. }else{
  192. this.queryParam.targetSn = undefined
  193. this.queryParam.targetName = val.key
  194. }
  195. },
  196. shcustChange (val) {
  197. console.log(val)
  198. if(val.row){
  199. this.queryParam.receiverSn = val.row.dealerSn
  200. this.queryParam.receiverName = undefined
  201. }else{
  202. this.queryParam.receiverSn = undefined
  203. this.queryParam.receiverName = val.key
  204. }
  205. },
  206. handleDetail (row, type) {
  207. this.bizSn = row.allocateSn
  208. this.showDetailModal = true
  209. },
  210. cancelDetail () {
  211. this.showDetailModal = false
  212. this.bizSn = null
  213. },
  214. // 删除
  215. handleDel (row) {
  216. const oi = this.orginData.findIndex(item => row.bizSn == item.allocateSn)
  217. if (oi >= 0) {
  218. this.orginData[oi].checked = false
  219. }
  220. },
  221. // 选择
  222. handleChoose (row) {
  223. row.checked = true
  224. this.$emit('choose', {
  225. bizType: 'ALLOCATE',
  226. bizSn: row.allocateSn,
  227. bizNo: row.allocateNo
  228. })
  229. },
  230. // 取消
  231. handleCommonCancel () {
  232. this.$emit('cancel')
  233. },
  234. // 重置
  235. resetSearchForm (flag) {
  236. this.queryParam = {
  237. targetSn: undefined, // 客户名称
  238. receiverSn: undefined, // 收货客户
  239. allocateNo: '' // 调拨单号
  240. }
  241. this.orginData = []
  242. this.$nextTick(() => {
  243. this.$refs.dealerSubareaScopeList.resetForm()
  244. this.$refs.shbuyerName.resetForm()
  245. })
  246. if (this.$refs.table && !flag) {
  247. this.$refs.table.refresh(true)
  248. }
  249. }
  250. },
  251. watch: {
  252. loading (newValue, oldValue) {
  253. this.spinning = newValue
  254. },
  255. // 父页面传过来的弹框状态
  256. openModal (newValue, oldValue) {
  257. this.isShow = newValue
  258. },
  259. // 重定义的弹框状态
  260. isShow (newValue, oldValue) {
  261. if (!newValue) {
  262. this.handleCommonCancel()
  263. } else {
  264. if (this.dealerSn) {
  265. this.resetSearchForm(1)
  266. // 回显客户
  267. this.queryParam.targetSn = this.dealerSn
  268. this.$nextTick(() => {
  269. this.$refs.dealerSubareaScopeList.getDetail(this.dealerSn)
  270. this.$refs.table.refresh(true)
  271. })
  272. } else {
  273. this.resetSearchForm()
  274. }
  275. }
  276. }
  277. }
  278. }
  279. </script>
  280. <style lang="less">
  281. </style>