main.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <template>
  2. <el-dialog width="840px" :visible.sync="dialogVisible" :append-to-body="false" :modal-append-to-body="false"
  3. :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @closed="handleClose"
  4. class="purchasePlan-picker">
  5. <div class="purchasePlan-picker__body">
  6. <div class="purchasePlan-picker__filter">
  7. <div class="filter-item" v-if="showWarehouseSearch">
  8. 仓库:
  9. <el-select disabled @change="changeWarehouse" v-model="purchasePlanApiParams.warehouse_id">
  10. <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
  11. </el-select>
  12. </div>
  13. <div class="filter-item">
  14. <el-input v-model="purchasePlanParams.keyWord" clearable placeholder="请输入入库单号" style="width: 160px" />
  15. </div>
  16. <div class="filter-item">
  17. <el-button type="primary" @click="handleSearch">搜索 </el-button>
  18. </div>
  19. </div>
  20. <el-table ref="purchasePlanTable" v-loading="loading" :data="purchasePlanData.data" border row-key="id"
  21. @selection-change="handleSelectionChange" @row-click="handleRowClick" max-height="400" style="width: 100%;min-height: 400px">
  22. <el-table-column v-if="limit === 1" label="选择" width="55" align="center">
  23. <template slot-scope="scope">
  24. <el-radio v-model="radioGuide" :label="scope.row"
  25. :disabled="selectedIds.some(v => v === scope.row.id)"><i></i></el-radio>
  26. </template>
  27. </el-table-column>
  28. <el-table-column v-else type="selection" label="选择" width="55" :selectable="checkDisable" reserve-selection
  29. align="center" />
  30. <el-table-column v-for="column in columns" v-if="column.prop !== 'goods_vo.hire_or_sail'" :key="column.label" align="center"
  31. v-bind="column" >
  32. </el-table-column>
  33. <el-table-column v-for="column in columns" v-if="column.prop === 'goods_vo.hire_or_sail'" :key="column.label" align="center"
  34. v-bind="column">
  35. <template slot-scope="scope"> {{ scope.row.goods_vo.hire_or_sail=='sail' ? '售卖商品' : '租赁商品' }}</template>
  36. <!-- <template slot-scope="scope">{{ scope.row.entry_time | unixToDate }}</template> -->
  37. </el-table-column>
  38. </el-table>
  39. <div class="purchasePlan-picker__tools">
  40. <div class="tools">
  41. </div>
  42. <el-pagination v-if="purchasePlanData.data_total" background :page-sizes="[10, 30, 50, 100]"
  43. :total="purchasePlanData.data_total" layout="total, sizes, prev, next, pager, jumper"
  44. @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  45. </div>
  46. </div>
  47. <span slot="footer" class="dialog-footer">
  48. <el-button @click="handleCancel">取 消</el-button>
  49. <el-button type="primary" @click="handleConfirm">确 定</el-button>
  50. </span>
  51. </el-dialog>
  52. </template>
  53. <script>
  54. import * as DefaultOptions from './defaultOptions'
  55. import request from '@/utils/request'
  56. export default {
  57. name: 'EnPurchasePlan',
  58. props: {
  59. ...DefaultOptions.props
  60. },
  61. data() {
  62. return {
  63. ...DefaultOptions.data,
  64. dialogVisible: false,
  65. selected: [],
  66. radioGuide: '',
  67. purchasePlanParams: {
  68. page_no: 1,
  69. page_size: 10,
  70. keyWord: '',
  71. warehouse_id: ''
  72. },
  73. purchasePlanData: {
  74. data: [],
  75. data_total: 0
  76. },
  77. // 加载采购计划列表
  78. loading: false
  79. }
  80. },
  81. mounted() {
  82. this.getGoodsList()
  83. },
  84. watch: {
  85. show: {
  86. immediate: true,
  87. handler(newVal) {
  88. this.$nextTick(() => {
  89. this.dialogVisible = newVal
  90. })
  91. }
  92. },
  93. purchasePlanApiParams: {
  94. handler(val) {
  95. this.purchasePlanParams = {
  96. ...this.purchasePlanParams,
  97. ...val
  98. }
  99. },
  100. immediate: true,
  101. deep: true
  102. }
  103. },
  104. methods: {
  105. changeWarehouse(e) {
  106. this.$set(this.purchasePlanParams, 'warehouse_id', e)
  107. this.handleSearch()
  108. },
  109. checkDisable(row, index) {
  110. return this.selectedIds.some(v => v === row.id) ? 0 : 1
  111. },
  112. // 关闭
  113. handleClose() {
  114. this.$nextTick(this.close)
  115. this.dialogVisible = false
  116. this.$emit('closed')
  117. },
  118. // 取消
  119. handleCancel() {
  120. this.dialogVisible = false
  121. this.$emit('cancel')
  122. typeof this.reject === 'function' && this.reject('取消了')
  123. },
  124. // 确认
  125. handleConfirm() {
  126. if (this.limit === 1) {
  127. if (!this.radioGuide) return this.$message.error('请选择出入库商品')
  128. } else {
  129. if (!this.selected.length) return this.$message.error('请选择出入库商品')
  130. }
  131. this.dialogVisible = false
  132. const purchasePlanParams = this.purchasePlanParams
  133. let purchasePlans = this.limit === 1 ? [this.radioGuide] : this.selected
  134. purchasePlans = JSON.parse(JSON.stringify(purchasePlans))
  135. this.$emit('confirm', purchasePlans)
  136. console.log(purchasePlans)
  137. typeof this.resolve === 'function' && this.resolve({
  138. purchasePlans,
  139. warehouse_id: purchasePlanParams.warehouse_id
  140. })
  141. this.$emit('close')
  142. },
  143. // 选择
  144. handleSelectionChange(val) {
  145. this.selected = val
  146. },
  147. // 分页大小发生改变
  148. handleSizeChange(size) {
  149. this.purchasePlanParams.page_size = size
  150. this.getGoodsList()
  151. },
  152. // 当前页数发生改版
  153. handleCurrentChange(current) {
  154. this.purchasePlanParams.page_no = current
  155. this.getGoodsList()
  156. },
  157. // 搜索
  158. handleSearch() {
  159. this.purchasePlanParams.page_no = 1
  160. this.getGoodsList()
  161. },
  162. // 点击了某行
  163. handleRowClick(row) {
  164. if (this.limit === 1) {
  165. this.radioGuide = row
  166. } else {
  167. this.$refs.purchasePlanTable.toggleRowSelection(row)
  168. }
  169. },
  170. // 获取采购计划列表
  171. async getGoodsList() {
  172. this.loading = true
  173. const params = JSON.parse(JSON.stringify(this.purchasePlanParams))
  174. request({
  175. url: this.goodsApi,
  176. method: 'get',
  177. loading: false,
  178. params: {
  179. ...params,
  180. ...this.purchasePlanApiParams,
  181. }
  182. }).then(response => {
  183. this.loading = false
  184. if(response.records==undefined){
  185. this.purchasePlanData = response
  186. }else{
  187. response.data=response.records
  188. response.data_total=response.total
  189. this.purchasePlanData = response
  190. console.log(this.purchasePlanData);
  191. }
  192. })
  193. }
  194. }
  195. }
  196. </script>
  197. <style lang="scss" scoped>
  198. .purchasePlan-picker {
  199. clear: both;
  200. .purchasePlan-picker__filter {
  201. float: right;
  202. }
  203. /deep/ {
  204. .el-dialog__body {
  205. padding-top: 20px;
  206. padding-bottom: 20px;
  207. }
  208. .el-dialog__header {
  209. padding: 9px 20px 10px;
  210. border-bottom: 1px solid #e5e5e5;
  211. text-shadow: 0 1px 0 #fff;
  212. background-color: #efefef;
  213. }
  214. .el-dialog__footer {
  215. border-top: solid 1px #e5e5e5;
  216. background: #f5f5f5;
  217. }
  218. .el-table .el-table__body-wrapper .el-table__row {
  219. cursor: pointer;
  220. }
  221. }
  222. &__filter {
  223. display: flex;
  224. align-items: center;
  225. background-color: #fff;
  226. border-right: none;
  227. position: relative;
  228. margin-bottom: 10px;
  229. .filter-item {
  230. display: flex;
  231. align-items: center;
  232. }
  233. .filter-item+.filter-item {
  234. margin-left: 10px;
  235. }
  236. .filter-item:last-child {
  237. flex: 1;
  238. margin-left: 20px;
  239. /deep/ .el-button {
  240. width: 100%;
  241. max-width: 120px;
  242. font-weight: bold;
  243. }
  244. }
  245. }
  246. &__body {
  247. max-height: 650px;
  248. overflow: hidden auto;
  249. }
  250. &__tools {
  251. display: flex;
  252. align-items: center;
  253. justify-content: space-between;
  254. margin-top: 10px;
  255. .tools {
  256. display: flex;
  257. }
  258. }
  259. }
  260. </style>