list.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. <template>
  2. <div>
  3. <a-card size="small" :bordered="false" class="searchBoxNormal">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form layout="inline" id="purchaseReceiptList-form" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="创建时间">
  10. <rangeDate ref="rangeDate" id="purchaseReceiptList-time" @change="dateChange" />
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="采购单号">
  15. <a-input id="purchaseReceiptList-sparePartsNo" v-model.trim="queryParam.sparePartsNo" allowClear placeholder="请输入采购单号"/>
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="6" :sm="24">
  19. <a-form-item label="供应商名称">
  20. <supplier id="purchaseReceiptList-supplierSn" v-model="queryParam.supplierSn" isPermission placeholder="请输入供应商名称"></supplier>
  21. </a-form-item>
  22. </a-col>
  23. <template v-if="advanced">
  24. <a-col :md="6" :sm="24">
  25. <a-form-item label="客户名称">
  26. <custList ref="custList" id="purchaseReceiptList-buyerSn" @change="custChange"></custList>
  27. </a-form-item>
  28. </a-col>
  29. <a-col :md="6" :sm="24">
  30. <a-form-item label="关联单号">
  31. <a-input id="purchaseReceiptList-salesBillNo" v-model.trim="queryParam.salesBillNo" allowClear placeholder="请输入关联单号"/>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :md="6" :sm="24">
  35. <a-form-item label="业务状态">
  36. <v-select
  37. v-model="queryParam.state"
  38. ref="state"
  39. id="purchaseReceiptList-serviceState"
  40. code="SPARE_PARTS_RETURN_STATE"
  41. placeholder="请选择审核状态"
  42. allowClear
  43. ></v-select>
  44. </a-form-item>
  45. </a-col>
  46. <a-col :md="6" :sm="24">
  47. <a-form-item label="供应商状态">
  48. <v-select
  49. v-model="queryParam.state"
  50. ref="state"
  51. id="purchaseReceiptList-state"
  52. code="SPARE_PARTS_RETURN_STATE"
  53. placeholder="请选择供应商状态"
  54. allowClear
  55. ></v-select>
  56. </a-form-item>
  57. </a-col>
  58. </template>
  59. <a-col :md="6" :sm="24">
  60. <span class="table-page-search-submitButtons">
  61. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="purchaseReceiptList-refresh">查询</a-button>
  62. <a-button style="margin-left: 10px" @click="resetSearchForm()" :disabled="disabled" id="purchaseReceiptList-reset">重置</a-button>
  63. <a @click="advanced=!advanced" style="margin-left: 8px">
  64. {{ advanced ? '收起' : '展开' }}
  65. <a-icon :type="advanced ? 'up' : 'down'"/>
  66. </a>
  67. </span>
  68. </a-col>
  69. </a-row>
  70. </a-form>
  71. </div>
  72. </a-card>
  73. <a-card size="small" :bordered="false" class="purchaseReceiptList-wrap">
  74. <a-spin :spinning="spinning" tip="Loading...">
  75. <!-- 统计数据 -->
  76. <div class="tongji-bar">
  77. 总单数:<strong>{{ totalData&&(totalData.totalRecord || totalData.totalRecord==0) ? totalData.totalRecord : '--' }}</strong>;
  78. 总款数:<strong>{{ totalData&&(totalData.totalQty || totalData.totalQty==0) ? totalData.totalQty : '--' }}</strong>;
  79. 总采购数量:<strong>{{ totalData&&(totalData.totalQty || totalData.totalQty==0) ? totalData.totalQty : '--' }}</strong>;
  80. <span>总采购金额:<strong>{{ totalData&&(totalData.totalAmount || totalData.totalAmount==0) ? toThousands(totalData.totalAmount) : '--' }}</strong>;</span>
  81. <span>已完结金额:<strong>{{ totalData&&(totalData.totalAmount || totalData.totalAmount==0) ? toThousands(totalData.totalAmount) : '--' }}</strong>;</span>
  82. </div>
  83. <!-- 列表 -->
  84. <s-table
  85. class="sTable fixPagination"
  86. ref="table"
  87. :style="{ height: tableHeight+70+'px' }"
  88. size="small"
  89. :rowKey="(record) => record.sparePartsReturnNo"
  90. :columns="columns"
  91. :data="loadData"
  92. :pageSize="30"
  93. :scroll="{ y: tableHeight }"
  94. :defaultLoadData="false"
  95. bordered>
  96. <!-- 采购退货单号 -->
  97. <template slot="sparePartsReturnNo" slot-scope="text, record">
  98. <span v-if="$hasPermissions('B_purchaseReturnDetail')" id="purchaseReceiptList-detail-btn" class="link-bule" @click="handleDetail(record)">{{ record.sparePartsReturnNo }}</span>
  99. <span v-else>{{ record.sparePartsReturnNo }}</span>
  100. </template>
  101. <!-- 操作 -->
  102. <!-- state 待提交 WAIT_SUBMIT 待审核 WAIT_AUDIT 已完结 FINISH 审核不通过 AUDIT_REJECT -->
  103. <template slot="action" slot-scope="text, record">
  104. <a-button
  105. size="small"
  106. type="link"
  107. class="button-warning"
  108. @click="handleCheck(record)"
  109. v-if="$hasPermissions('B_purchaseReturnRate') && record.state !='WAIT_SUBMIT'"
  110. id="purchaseReceiptList-examine-btn">审核</a-button>
  111. <a-button
  112. size="small"
  113. type="link"
  114. v-if="$hasPermissions('B_purchaseReturnEdit')"
  115. @click="handleEdit(record)"
  116. class="button-info"
  117. id="purchaseReceiptList-edit-btn">编辑</a-button>
  118. <a-button
  119. size="small"
  120. type="link"
  121. v-if="$hasPermissions('B_purchaseReturnDel')"
  122. @click="handleDel(record)"
  123. class="button-error"
  124. id="purchaseReceiptList-del-btn">取消</a-button>
  125. <a-button
  126. size="small"
  127. type="link"
  128. class="button-warning"
  129. @click="handleCheck(record)"
  130. v-if="$hasPermissions('B_purchaseReturnRate') && record.state !='WAIT_SUBMIT'"
  131. id="purchaseReceiptList-logistics-btn">物流</a-button>
  132. <a-button
  133. size="small"
  134. type="link"
  135. class="button-warning"
  136. @click="handleCheck(record)"
  137. v-if="$hasPermissions('B_purchaseReturnRate') && record.state !='WAIT_SUBMIT'"
  138. id="purchaseReceiptList-addVoucher-btn">上传凭证</a-button>
  139. <a-button
  140. size="small"
  141. type="link"
  142. class="button-warning"
  143. @click="handleCheck(record)"
  144. v-if="$hasPermissions('B_purchaseReturnRate') && record.state !='WAIT_SUBMIT'"
  145. id="purchaseReceiptList-seeVoucher-btn">查看凭证</a-button>
  146. </template>
  147. </s-table>
  148. </a-spin>
  149. <!-- 详情弹窗 -->
  150. <detailModal v-drag :openModal="openDetailModal" :itemSn="itemSn" @close="closeDetailModal" />
  151. <!-- 审核弹窗 -->
  152. <reviewModal v-drag :openModal="openReviewModal" @close="openReviewModal=false"></reviewModal>
  153. </a-card>
  154. </div>
  155. </template>
  156. <script>
  157. import { commonMixin } from '@/utils/mixin'
  158. // 组件
  159. import { STable, VSelect } from '@/components'
  160. import rangeDate from '@/views/common/rangeDate.vue'
  161. import custList from '@/views/common/custList.vue'
  162. import supplier from '@/views/common/supplier.js'
  163. import warehouse from '@/views/common/chooseWarehouse.js'
  164. import reviewModal from './reviewModal.vue'
  165. import detailModal from './detailModal.vue'
  166. // 接口
  167. import { sparePartsReturnList, sparePartsReturnDelete, sparePartsReturnExportDetail, againSubmit } from '@/api/sparePartsReturn'
  168. export default {
  169. name: 'PurchaseReceiptList',
  170. mixins: [commonMixin],
  171. components: { STable, supplier, VSelect, custList, rangeDate, warehouse, reviewModal, detailModal },
  172. data () {
  173. return {
  174. spinning: false,
  175. disabled: false, // 查询、重置按钮是否可操作
  176. tableHeight: 0, // 表格高度
  177. advanced: true, // 高级搜索 展开/关闭
  178. // 查询参数
  179. queryParam: {
  180. beginDate: undefined,
  181. endDate: undefined,
  182. sparePartsReturnNo: undefined,
  183. supplierSn: undefined,
  184. returnReason: undefined,
  185. warehouseSn: undefined, // 仓库
  186. state: undefined
  187. },
  188. openReviewModal: false, // 审核弹窗
  189. openDetailModal: false, // 详情弹窗
  190. itemSn: null, // 采购入库sn
  191. totalData: null, // 统计数据
  192. // 加载数据方法 必须为 Promise 对象
  193. loadData: parameter => {
  194. this.disabled = true
  195. this.spinning = true
  196. // 获取列表数据 有分页
  197. return sparePartsReturnList(Object.assign(parameter, this.queryParam)).then(res => {
  198. let data
  199. if (res.status == 200) {
  200. data = res.data
  201. // 计算列表序号
  202. const no = (data.pageNo - 1) * data.pageSize
  203. for (var i = 0; i < data.list.length; i++) {
  204. data.list[i].no = no + i + 1
  205. }
  206. this.disabled = false
  207. }
  208. this.spinning = false
  209. return data
  210. })
  211. }
  212. }
  213. },
  214. computed: {
  215. columns () {
  216. const _this = this
  217. const arr = [
  218. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  219. { title: '创建时间', dataIndex: 'createDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  220. { title: '采购单号', scopedSlots: { customRender: 'sparePartsReturnNo' }, width: '9%', align: 'center' },
  221. { title: '提交时间', dataIndex: 'auditDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  222. { title: '供应商名称', dataIndex: 'supplier.supplierName', align: 'left', width: '14%', customRender: function (text) { return text || '--' }, ellipsis: true },
  223. { title: '采购数量', dataIndex: 'totalQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  224. { title: '采购金额', dataIndex: 'totalCost', width: '8%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text, 2) : '--') } },
  225. { title: '入库仓库', dataIndex: 'returnReasonDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  226. { title: '关联单号', dataIndex: 'stateDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  227. { title: '客户名称', dataIndex: 'returnReasonDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  228. { title: '业务状态', dataIndex: 'returnReasonDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  229. { title: '供应商状态', dataIndex: 'returnReasonDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  230. { title: '备注', dataIndex: 'returnReasonDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  231. { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
  232. ]
  233. // if (this.$hasPermissions('M_purchaseReturnList_costPrice')) { // 售价权限
  234. // arr.splice(7, 0, { title: '采购金额', dataIndex: 'totalCost', width: '8%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text, 2) : '--') } })
  235. // }
  236. return arr
  237. }
  238. },
  239. methods: {
  240. // 创建时间
  241. dateChange (date) {
  242. this.queryParam.beginDate = date[0]
  243. this.queryParam.endDate = date[1]
  244. },
  245. // 编辑
  246. handleEdit (row) {
  247. this.$router.push({ name: 'purchaseReceiptEdit', query: { returnSn: row.sparePartsReturnSn, no: row.sparePartsReturnNo, sn: row.supplierSn } })
  248. },
  249. // 审核
  250. handleCheck (row) {
  251. const _this = this
  252. _this.openReviewModal = true
  253. },
  254. // 采购单号 打开详情弹窗
  255. handleDetail (row) {
  256. this.itemSn = row.sparePartsReturnSn
  257. this.openDetailModal = true
  258. },
  259. // 关闭采购退货详情弹框
  260. closeDetailModal () {
  261. this.openDetailModal = false
  262. },
  263. // 取消
  264. handleDel (row) {
  265. const _this = this
  266. this.$confirm({
  267. title: '提示',
  268. content: '删除后不可恢复,确定要进行删除吗?',
  269. centered: true,
  270. onOk () {
  271. _this.spinning = true
  272. sparePartsReturnDelete({ sn: row.sparePartsReturnSn }).then(res => {
  273. if (res.status == 200) {
  274. _this.$message.success(res.message)
  275. _this.$refs.table.refresh()
  276. _this.spinning = false
  277. } else {
  278. _this.spinning = false
  279. }
  280. })
  281. }
  282. })
  283. },
  284. // 客户名称 change
  285. custChange (obj) {
  286. this.queryParam.buyerSn = obj.key
  287. },
  288. // 重置
  289. resetSearchForm () {
  290. this.queryParam = {
  291. beginDate: undefined,
  292. endDate: undefined,
  293. sparePartsReturnNo: undefined,
  294. supplierSn: undefined,
  295. returnReason: undefined,
  296. warehouseSn: undefined, // 仓库
  297. state: undefined
  298. }
  299. this.$refs.custList.resetForm()
  300. this.$refs.rangeDate.resetDate()
  301. this.$refs.table.refresh(true)
  302. },
  303. // 初始化数据
  304. pageInit () {
  305. const _this = this
  306. this.$nextTick(() => { // 页面渲染完成后的回调
  307. _this.setTableH()
  308. })
  309. this.openModal = false
  310. // this.openDetailModal = false
  311. this.itemSn = null
  312. this.rowSelectionInfo = null
  313. this.$refs.table.clearTable()
  314. },
  315. // 计算表格高度
  316. setTableH () {
  317. const tableSearchH = this.$refs.tableSearch.offsetHeight
  318. this.tableHeight = window.innerHeight - tableSearchH - 225
  319. }
  320. },
  321. watch: {
  322. // 展开关闭 监听页面高度变化
  323. advanced (newValue, oldValue) {
  324. const _this = this
  325. this.$nextTick(() => { // 页面渲染完成后的回调
  326. _this.setTableH()
  327. })
  328. },
  329. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  330. this.setTableH()
  331. }
  332. },
  333. mounted () {
  334. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  335. this.pageInit()
  336. this.resetSearchForm()
  337. }
  338. },
  339. activated () {
  340. // 如果是新页签打开,则重置当前页面
  341. if (this.$store.state.app.isNewTab) {
  342. this.pageInit()
  343. this.resetSearchForm()
  344. }
  345. // 仅刷新列表,不重置页面
  346. if (this.$store.state.app.updateList) {
  347. this.pageInit()
  348. this.$refs.table.refresh()
  349. }
  350. },
  351. beforeRouteEnter (to, from, next) {
  352. next(vm => {})
  353. }
  354. }
  355. </script>
  356. <style lang="less" scoped>
  357. .purchaseReceiptList-wrap{
  358. .tongji-bar{
  359. margin-bottom:13px;
  360. }
  361. }
  362. </style>