main.vue 6.7 KB

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