SetmealItemDetailModal.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <a-modal
  3. class="setmealItemDetailModal"
  4. title="查看"
  5. width="80%"
  6. centered
  7. :footer="null"
  8. :maskClosable="false"
  9. :destroyOnClose="true"
  10. @cancel="isShow=false"
  11. v-model="isShow">
  12. <div class="table-con">
  13. <div class="table-main" v-if="bundleItemList">
  14. <p class="table-tit">服务:</p>
  15. <a-table
  16. ref="table-item"
  17. size="middle"
  18. :rowKey="(record) => record.id"
  19. :columns="columns_item"
  20. :dataSource="bundleItemList"
  21. :pagination="false"
  22. bordered>
  23. <!-- 工时费 -->
  24. <template slot="priceL3" slot-scope="text, record">{{ record.itemPrice ? record.itemPrice : 0 }}元</template>
  25. <!-- 次数 -->
  26. <template slot="itemTimes" slot-scope="text, record">{{ record.times ? record.times : '--' }}</template>
  27. <!-- 价值 -->
  28. <template slot="worth" slot-scope="text, record">{{ Number(record.itemPrice ? record.itemPrice : 0) * (record.times ? record.times : 0) }}元</template>
  29. </a-table>
  30. </div>
  31. <div class="btn-cont">
  32. <a-button id="setmealItemDetail-cancel" class="setmealItemDetail-cancel" @click="isShow=false">返回</a-button>
  33. </div>
  34. </div>
  35. </a-modal>
  36. </template>
  37. <script>
  38. import { STable } from '@/components'
  39. import { getBundleDetails } from '@/api/customerBundle.js'
  40. export default {
  41. name: 'SetmealItemDetailModal',
  42. components: { STable },
  43. props: {
  44. openModal: {
  45. // 弹框是否展示
  46. type: Boolean,
  47. default: false
  48. },
  49. setmealId: {
  50. // 套餐id
  51. type: String,
  52. default: ''
  53. }
  54. },
  55. data () {
  56. return {
  57. isShow: this.openModal, // 弹框是否展示
  58. columns_item: [
  59. { title: '服务名称', dataIndex: 'itemName', width: 120, align: 'center' },
  60. { title: '服务类别', dataIndex: 'itemClsName', width: 100, align: 'center' },
  61. { title: '工时费', scopedSlots: { customRender: 'priceL3' }, width: 100, align: 'center' },
  62. { title: '次数', scopedSlots: { customRender: 'itemTimes' }, width: 100, align: 'center' },
  63. { title: '价值', scopedSlots: { customRender: 'worth' }, width: 100, align: 'center' }
  64. ],
  65. bundleItemList: []
  66. }
  67. },
  68. methods: {
  69. // 套餐信息
  70. getSetmealInfo (id) {
  71. getBundleDetails({ id: id }).then(res => {
  72. console.log(res)
  73. if (res.status == 200) {
  74. this.bundleItemList = res.data.bundleItemList || []
  75. } else {
  76. this.bundleItemList = []
  77. }
  78. })
  79. }
  80. },
  81. watch: {
  82. // 父页面传过来的弹框状态
  83. openModal (newValue, oldValue) {
  84. this.isShow = newValue
  85. },
  86. // 重定义的弹框状态
  87. isShow (val) {
  88. if (!val) {
  89. this.$emit('close')
  90. }
  91. },
  92. setmealId (newValue, oldValue) {
  93. if (newValue && this.isShow) {
  94. this.getSetmealInfo(newValue)
  95. }
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="less">
  101. .setmealItemDetailModal{
  102. .table-con{
  103. .table-main{
  104. .table-tit{
  105. margin: 0 0 10px;
  106. }
  107. margin: 0 0 30px;
  108. }
  109. }
  110. .btn-cont{
  111. text-align: center;
  112. .setmealPayMoney-cancel{
  113. margin-left: 30px;
  114. }
  115. }
  116. }
  117. </style>