list.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. <template>
  2. <a-card size="small" :bordered="false" class="bulkWarehousingOrderList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="15">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="创建时间">
  9. <rangeDate ref="rangeDate" @change="dateChange" />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <a-form-item label="散件单号">
  14. <a-input id="bulkWarehousingOrderList-sparePartsPurchaseNo" v-model.trim="queryParam.sparePartsPurchaseNo" allowClear placeholder="请输入散件单号"/>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="6" :sm="24">
  18. <a-form-item label="供应商" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  19. <a-select
  20. id="bulkWarehousingOrderList-supplierSn"
  21. placeholder="请选择供应商"
  22. allowClear
  23. v-model="queryParam.supplierSn"
  24. :showSearch="true"
  25. option-filter-prop="children"
  26. :filter-option="filterOption">
  27. <a-select-option v-for="item in supplierList" :key="item.supplierSn" :value="item.supplierSn">{{ item.supplierName }}</a-select-option>
  28. </a-select>
  29. </a-form-item>
  30. </a-col>
  31. <template v-if="advanced">
  32. <a-col :md="6" :sm="24">
  33. <a-form-item label="业务状态">
  34. <v-select
  35. v-model="queryParam.state"
  36. ref="state"
  37. id="bulkWarehousingOrderList-state"
  38. code="SPARE_PARTS_PURCHASE"
  39. placeholder="请选择业务状态"
  40. allowClear
  41. ></v-select>
  42. </a-form-item>
  43. </a-col>
  44. <a-col :md="6" :sm="24">
  45. <a-form-item label="财务状态">
  46. <v-select
  47. v-model="queryParam.settleState"
  48. ref="settleState"
  49. id="bulkWarehousingOrderList-settleState"
  50. code="FINANCIAL_PAY_STATUS"
  51. placeholder="请选择财务状态"
  52. allowClear
  53. ></v-select>
  54. </a-form-item>
  55. </a-col>
  56. </template>
  57. <a-col :md="6" :sm="24">
  58. <span class="table-page-search-submitButtons" style="margin-top: 3px;">
  59. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="bulkWarehousingOrderList-refresh">查询</a-button>
  60. <a-button style="margin-left: 8px" @click="resetSearchForm()" :disabled="disabled" id="bulkWarehousingOrderList-reset">重置</a-button>
  61. <a-button
  62. style="margin-left: 8px"
  63. type="primary"
  64. class="button-warning"
  65. @click="handleExport"
  66. :disabled="disabled"
  67. :loading="exportLoading"
  68. id="bulkWarehousingOrderList-export">导出</a-button>
  69. <a @click="advanced=!advanced" style="margin-left: 8px">
  70. {{ advanced ? '收起' : '展开' }}
  71. <a-icon :type="advanced ? 'up' : 'down'"/>
  72. </a>
  73. </span>
  74. </a-col>
  75. </a-row>
  76. </a-form>
  77. </div>
  78. <!-- 操作按钮 -->
  79. <div class="table-operator">
  80. <a-button id="bulkWarehousingOrderList-add" type="primary" class="button-error" @click="handleAdd">新增</a-button>
  81. </div>
  82. <!-- alert -->
  83. <a-alert type="info" showIcon style="margin-bottom:15px">
  84. <div slot="message">共 <strong>{{ dataTotalCount }}</strong> 条记录,总数量合计 <strong>{{ productTotal.productTotalQty }}</strong> ,总金额合计¥<strong>{{ productTotal.productTotalCost }}</strong> </div>
  85. </a-alert>
  86. <!-- 列表 -->
  87. <s-table
  88. class="sTable"
  89. ref="table"
  90. size="default"
  91. :rowKey="(record) => record.id"
  92. :columns="columns"
  93. :data="loadData"
  94. :scroll="{ x: 1360, y: tableHeight }"
  95. bordered>
  96. <!-- 散件单号 -->
  97. <template slot="sparePartsPurchaseNo" slot-scope="text, record">
  98. <span style="color: #ed1c24;cursor: pointer;" @click="handleDetail(record)">{{ record.sparePartsPurchaseNo }}</span>
  99. </template>
  100. <!-- 财务状态 -->
  101. <template slot="settleState" slot-scope="text, record">
  102. <a-badge :color="text=='FINISH'?'#87d068':'gold'" :text="record.settleStateDictValue" />
  103. </template>
  104. <!-- 操作 -->
  105. <template slot="action" slot-scope="text, record">
  106. <a-button
  107. size="small"
  108. type="link"
  109. v-if="record.state != 'FINISH'"
  110. @click="handleEdit(record)"
  111. class="button-info"
  112. id="bulkWarehousingOrderList-edit-btn">编辑</a-button>
  113. <a-button
  114. size="small"
  115. type="link"
  116. v-if="record.state == 'WAIT_PUT_WAREHOUSE'"
  117. @click="handleWarehouse(record)"
  118. class="button-primary"
  119. id="bulkWarehousingOrderList-warehouse-btn">入库</a-button>
  120. <a-button
  121. size="small"
  122. type="link"
  123. v-if="record.state != 'FINISH'"
  124. @click="handleDel(record)"
  125. class="button-error"
  126. id="bulkWarehousingOrderList-del-btn">删除</a-button>
  127. <span v-if="(record.state == 'FINISH') && (record.state != 'WAIT_PUT_WAREHOUSE')">--</span>
  128. </template>
  129. </s-table>
  130. <!-- 选择基本信息弹框 -->
  131. <basic-info-modal :openModal="openModal" @ok="handleOk" @close="openModal=false" />
  132. </a-card>
  133. </template>
  134. <script>
  135. import moment from 'moment'
  136. import { STable, VSelect } from '@/components'
  137. import rangeDate from '@/views/common/rangeDate.vue'
  138. import basicInfoModal from './basicInfoModal.vue'
  139. import { sparePartsPurList, sparePartsPurCount, sparePartsPurDel, sparePartsPurPut, sparePartsPurExport } from '@/api/sparePartsPur'
  140. import { supplierAllList } from '@/api/supplier'
  141. export default {
  142. components: { STable, VSelect, basicInfoModal, rangeDate },
  143. data () {
  144. return {
  145. advanced: false, // 高级搜索 展开/关闭
  146. disabled: false, // 查询、重置按钮是否可操作
  147. exportLoading: false, // 导出loading
  148. openModal: false, // 基本信息弹框是否显示
  149. supplierList: [], // 供应商列表数据
  150. tableHeight: 0,
  151. // 查询参数
  152. queryParam: {
  153. beginDate: '',
  154. endDate: '',
  155. sparePartsPurchaseNo: '', // 散件单号
  156. supplierSn: undefined, // 供应商
  157. state: undefined, // 单据状态
  158. settleState: undefined // 结算状态
  159. },
  160. // 表头
  161. columns: [
  162. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  163. { title: '散件单号', scopedSlots: { customRender: 'sparePartsPurchaseNo' }, width: 220, align: 'center' },
  164. { title: '创建时间', dataIndex: 'createDate', width: 160, align: 'center' },
  165. { title: '供应商', dataIndex: 'supplierName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  166. { title: '产品款数', dataIndex: 'productTotalCategory', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  167. { title: '总数量', dataIndex: 'productTotalQty', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  168. { title: '总金额', dataIndex: 'productTotalCost', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  169. { title: '业务状态', dataIndex: 'stateDictValue', width: 100, align: 'center' },
  170. { title: '财务状态', scopedSlots: { customRender: 'settleState' }, width: 100, align: 'center' },
  171. { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center', fixed: 'right' }
  172. ],
  173. // 加载数据方法 必须为 Promise 对象
  174. loadData: parameter => {
  175. this.disabled = true
  176. if (this.tableHeight == 0) {
  177. this.tableHeight = window.innerHeight - 440
  178. }
  179. return sparePartsPurList(Object.assign(parameter, this.queryParam)).then(res => {
  180. const data = res.data
  181. const no = (data.pageNo - 1) * data.pageSize
  182. for (var i = 0; i < data.list.length; i++) {
  183. data.list[i].no = no + i + 1
  184. }
  185. this.disabled = false
  186. this.dataTotalCount = data.count
  187. this.getTotal(Object.assign(parameter, this.queryParam))
  188. return data
  189. })
  190. },
  191. productTotal: { // 合计信息
  192. productTotalCost: '',
  193. productTotalQty: ''
  194. },
  195. dataTotalCount: '' // 列表数据总条数
  196. }
  197. },
  198. methods: {
  199. // 时间 change
  200. dateChange (date) {
  201. this.queryParam.beginDate = date[0]
  202. this.queryParam.endDate = date[1]
  203. },
  204. // 合计
  205. getTotal (param) {
  206. sparePartsPurCount(param).then(res => {
  207. if (res.status == 200 && res.data) {
  208. this.productTotal = res.data
  209. } else {
  210. this.productTotal = {
  211. // 合计信息
  212. productTotalCost: '',
  213. productTotalQty: ''
  214. }
  215. }
  216. })
  217. },
  218. // 新增
  219. handleAdd () {
  220. this.openModal = true
  221. },
  222. // 基本信息 保存
  223. handleOk (row) {
  224. this.$router.push({ path: `/bulkManagement/bulkWarehousingOrder/add/${row.id}/${row.sparePartsPurchaseSn}` })
  225. },
  226. // 编辑
  227. handleEdit (row) {
  228. this.$router.push({ path: `/bulkManagement/bulkWarehousingOrder/edit/${row.id}/${row.sparePartsPurchaseSn}` })
  229. },
  230. // 详情
  231. handleDetail (row) {
  232. this.$router.push({ path: `/bulkManagement/bulkWarehousingOrder/detail/${row.id}/${row.sparePartsPurchaseSn}` })
  233. },
  234. // 入库
  235. handleWarehouse (row) {
  236. const _this = this
  237. this.$confirm({
  238. title: '提示',
  239. content: '确定要入库吗?',
  240. centered: true,
  241. onOk () {
  242. sparePartsPurPut({ id: row.id }).then(res => {
  243. if (res.status == 200) {
  244. _this.$message.success(res.message)
  245. _this.$refs.table.refresh()
  246. }
  247. })
  248. }
  249. })
  250. },
  251. // 删除
  252. handleDel (row) {
  253. const _this = this
  254. this.$confirm({
  255. title: '提示',
  256. content: '删除后不可恢复,确定要进行删除吗?',
  257. centered: true,
  258. onOk () {
  259. sparePartsPurDel({ id: row.id }).then(res => {
  260. if (res.status == 200) {
  261. _this.$message.success(res.message)
  262. _this.$refs.table.refresh()
  263. }
  264. })
  265. }
  266. })
  267. },
  268. // 重置
  269. resetSearchForm () {
  270. this.$refs.rangeDate.resetDate()
  271. this.queryParam.beginDate = ''
  272. this.queryParam.endDate = ''
  273. this.queryParam.sparePartsPurchaseNo = ''
  274. this.queryParam.supplierSn = undefined
  275. this.queryParam.state = undefined
  276. this.queryParam.settleState = undefined
  277. this.$refs.table.refresh(true)
  278. },
  279. filterOption (input, option) {
  280. return (
  281. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  282. )
  283. },
  284. // 导出
  285. handleExport () {
  286. const _this = this
  287. const params = this.queryParam
  288. this.exportLoading = true
  289. sparePartsPurExport(params).then(res => {
  290. this.exportLoading = false
  291. if (res.type == 'application/json') {
  292. var reader = new FileReader()
  293. reader.addEventListener('loadend', function () {
  294. const obj = JSON.parse(reader.result)
  295. _this.$notification.error({
  296. message: '提示',
  297. description: obj.message
  298. })
  299. })
  300. reader.readAsText(res)
  301. } else {
  302. this.download(res)
  303. }
  304. })
  305. },
  306. download (data) {
  307. if (!data) { return }
  308. const url = window.URL.createObjectURL(new Blob([data]))
  309. const link = document.createElement('a')
  310. link.style.display = 'none'
  311. link.href = url
  312. const a = moment().format('YYYYMMDDHHmmss')
  313. const fname = '散件入库单' + a
  314. link.setAttribute('download', fname + '.xlsx')
  315. document.body.appendChild(link)
  316. link.click()
  317. },
  318. // 供应商下拉数据
  319. getSupplierList () {
  320. supplierAllList().then(res => {
  321. if (res.status == 200) {
  322. this.supplierList = res.data
  323. } else {
  324. this.supplierList = []
  325. }
  326. })
  327. }
  328. },
  329. beforeRouteEnter (to, from, next) {
  330. next(vm => {
  331. vm.openModal = false
  332. vm.getSupplierList()
  333. })
  334. }
  335. }
  336. </script>
  337. <style lang="less">
  338. .bulkWarehousingOrderList-wrap{
  339. .sTable{
  340. margin-top: 15px;
  341. }
  342. }
  343. </style>