detail.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <div class="warehousingAuditDetail-wrap">
  3. <a-page-header :ghost="false" @back="handleBack" >
  4. <!-- 自定义的二级文字标题 -->
  5. <template slot="subTitle">
  6. <a id="warehousingAuditDetail-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
  7. </template>
  8. <!-- 操作区,位于 title 行的行尾 -->
  9. <template slot="extra">
  10. <a-button key="2" id="warehousingAuditDetail-preview-btn">打印预览</a-button>
  11. <a-button key="1" type="primary" id="warehousingAuditDetail-print-btn">快速打印</a-button>
  12. </template>
  13. </a-page-header>
  14. <!-- 内容 -->
  15. <a-page-header title="单号:CG2021010100001" ></a-page-header>
  16. <!-- 基础信息 -->
  17. <a-card :bordered="false" class="warehousingAuditDetail-cont">
  18. <a-collapse :activeKey="['1']">
  19. <a-collapse-panel key="1" header="基础信息">
  20. <a-descriptions :column="3">
  21. <a-descriptions-item label="供应商">箭冠营销中心</a-descriptions-item>
  22. <a-descriptions-item label="入库时间">箭冠营销中心</a-descriptions-item>
  23. <a-descriptions-item label="采购单号">箭冠营销中心</a-descriptions-item>
  24. </a-descriptions>
  25. <a-descriptions :column="3" bordered>
  26. <a-descriptions-item label="采购总款数">2</a-descriptions-item>
  27. <a-descriptions-item label="采购总数量">20</a-descriptions-item>
  28. <a-descriptions-item label="采购总成本">¥120.36</a-descriptions-item>
  29. <a-descriptions-item label="入库总款数">3</a-descriptions-item>
  30. <a-descriptions-item label="入库总数量">4</a-descriptions-item>
  31. <a-descriptions-item label="入库总成本">¥11.2</a-descriptions-item>
  32. </a-descriptions>
  33. </a-collapse-panel>
  34. </a-collapse>
  35. </a-card>
  36. <!-- 入库明细 -->
  37. <a-card :bordered="false" class="warehousingAuditDetail-cont">
  38. <a-collapse :activeKey="['1']">
  39. <a-collapse-panel key="1" header="入库明细">
  40. <!-- 列表 -->
  41. <s-table
  42. class="sTable"
  43. ref="table"
  44. size="default"
  45. :rowKey="(record) => record.id"
  46. :columns="columns"
  47. :data="loadData"
  48. bordered>
  49. <!-- 采购数量 -->
  50. <template slot="purchaseNum" slot-scope="text, record">
  51. <span>{{record.purchaseNum}}</span>
  52. </template>
  53. <!-- 缺货数量 -->
  54. <template slot="outOfStockNum" slot-scope="text, record">
  55. <span>{{record.outOfStockNum}}</span>
  56. </template>
  57. </s-table>
  58. </a-collapse-panel>
  59. </a-collapse>
  60. </a-card>
  61. </div>
  62. </template>
  63. <script>
  64. import { STable, VSelect } from '@/components'
  65. export default{
  66. components: { STable, VSelect },
  67. data(){
  68. return{
  69. // 表头
  70. columns: [
  71. { title: '序号', dataIndex: 'no', align: 'center' },
  72. { title: '产品编码', dataIndex: 'creatDate', align: 'center' },
  73. { title: '产品名称', dataIndex: 'custName', align: 'center' },
  74. { title: '原厂编码', dataIndex: 'totalP', align: 'center' },
  75. { title: '采购数量', scopedSlots: { customRender: 'purchaseNum' }, align: 'center' },
  76. { title: '入库数量', scopedSlots: { customRender: 'purchasesNum' }, align: 'center' },
  77. { title: '成本价', dataIndex: 'totalNums', align: 'center' },
  78. { title: '单位', dataIndex: 'mementPay', align: 'center' },
  79. { title: '入库小计', dataIndex: 'shDate', align: 'center' },
  80. { title: '仓库', dataIndex: 'shDaste', align: 'center' },
  81. { title: '仓位', dataIndex: 'shsDate', align: 'center' },
  82. ],
  83. // 加载数据方法 必须为 Promise 对象
  84. loadData: parameter => {
  85. this.disabled = true
  86. // return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
  87. // const data = res.data
  88. // const no = (data.pageNo - 1) * data.pageSize
  89. // for (var i = 0; i < data.list.length; i++) {
  90. // data.list[i].no = no + i + 1
  91. // }
  92. // this.disabled = false
  93. // return data
  94. // })
  95. const _this = this
  96. return new Promise(function(resolve, reject){
  97. const data = {
  98. pageNo: 1,
  99. pageSize: 10,
  100. list: [
  101. { id: '1', purchaseNo: 'jgqp11111111111', creatDate: '产品1', custName: 'jgqp111123545', totalP: '箭冠品牌', totalNums: '产品分类1', totalPrice: '5', payType: '122' }
  102. ],
  103. count: 10
  104. }
  105. const no = (data.pageNo - 1) * data.pageSize
  106. for (var i = 0; i < data.list.length; i++) {
  107. data.list[i].no = no + i + 1
  108. }
  109. _this.disabled = false
  110. resolve(data)
  111. })
  112. },
  113. }
  114. },
  115. methods: {
  116. // 返回列表
  117. handleBack(){
  118. this.$router.push({ path: '/financialManagement/warehousingAudit/list'})
  119. },
  120. }
  121. }
  122. </script>
  123. <style lang="less">
  124. .warehousingAuditDetail-cont{
  125. margin-bottom: 15px;
  126. }
  127. </style>