123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <template>
- <a-modal
- class="setmealItemDetailModal"
- title="查看"
- width="80%"
- centered
- :footer="null"
- :maskClosable="false"
- :destroyOnClose="true"
- @cancel="isShow=false"
- v-model="isShow">
- <div class="table-con">
- <div class="table-main" v-if="bundleItemList">
- <p class="table-tit">服务:</p>
- <a-table
- ref="table-item"
- size="middle"
- :rowKey="(record) => record.id"
- :columns="columns_item"
- :dataSource="bundleItemList"
- :pagination="false"
- bordered>
- <!-- 工时费 -->
- <template slot="priceL3" slot-scope="text, record">{{ record.itemPrice ? record.itemPrice : 0 }}元</template>
- <!-- 次数 -->
- <template slot="itemTimes" slot-scope="text, record">{{ record.times ? record.times : '--' }}</template>
- <!-- 价值 -->
- <template slot="worth" slot-scope="text, record">{{ Number(record.itemPrice ? record.itemPrice : 0) * (record.times ? record.times : 0) }}元</template>
- </a-table>
- </div>
- <div class="btn-cont">
- <a-button id="setmealItemDetail-cancel" class="setmealItemDetail-cancel" @click="isShow=false">返回</a-button>
- </div>
- </div>
- </a-modal>
- </template>
- <script>
- import { STable } from '@/components'
- import { getBundleDetails } from '@/api/customerBundle.js'
- export default {
- name: 'SetmealItemDetailModal',
- components: { STable },
- props: {
- openModal: {
- // 弹框是否展示
- type: Boolean,
- default: false
- },
- setmealId: {
- // 套餐id
- type: String,
- default: ''
- }
- },
- data () {
- return {
- isShow: this.openModal, // 弹框是否展示
- columns_item: [
- { title: '服务名称', dataIndex: 'itemName', width: 120, align: 'center' },
- { title: '服务类别', dataIndex: 'itemClsName', width: 100, align: 'center' },
- { title: '工时费', scopedSlots: { customRender: 'priceL3' }, width: 100, align: 'center' },
- { title: '次数', scopedSlots: { customRender: 'itemTimes' }, width: 100, align: 'center' },
- { title: '价值', scopedSlots: { customRender: 'worth' }, width: 100, align: 'center' }
- ],
- bundleItemList: []
- }
- },
- methods: {
- // 套餐信息
- getSetmealInfo (id) {
- getBundleDetails({ id: id }).then(res => {
- console.log(res)
- if (res.status == 200) {
- this.bundleItemList = res.data.bundleItemList || []
- } else {
- this.bundleItemList = []
- }
- })
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (val) {
- if (!val) {
- this.$emit('close')
- }
- },
- setmealId (newValue, oldValue) {
- if (newValue && this.isShow) {
- this.getSetmealInfo(newValue)
- }
- }
- }
- }
- </script>
- <style lang="less">
- .setmealItemDetailModal{
- .table-con{
- .table-main{
- .table-tit{
- margin: 0 0 10px;
- }
- margin: 0 0 30px;
- }
- }
- .btn-cont{
- text-align: center;
- .setmealPayMoney-cancel{
- margin-left: 30px;
- }
- }
- }
- </style>
|