rt-sim-training-client/src/views/orderauthor/order/detail.vue

<template>
  <el-dialog v-dialogDrag :title="this.$t('orderAuthor.orderDetails')" :visible.sync="show" width="1000px" :before-do-close="doClose" :close-on-click-modal="false">
    <el-table
      ref="table2"
      highlight-current-row
      stripe
      border
      :data="orderList"
      size="medium"
    >
      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.commodityName')" prop="goodsName" />
      <el-table-column :key="forever" :label="this.$t('orderAuthor.permanenceOrNot')" prop="forever">
        <template slot-scope="scope">
          {{ $ConstSelect.translate(scope.row.forever, 'Whether') }}
        </template>
      </el-table-column>

      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.goodsAmount')" prop="goodsAmount" />
      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.itemPricing')" prop="price" />
      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.startDate')" prop="startTime" />
      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.purchaseMonths')" prop="monthAmount">
        <template slot-scope="scope">
          {{ scope.row.forever?'/':scope.row.monthAmount }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { getGoodsListByOrderId } from '@/api/management/goods';
export default {
    name: 'RouteDetail',
    data() {
        return {
            show: false,
            orderId:'',
            orderList:[]
        };
    },
    methods: {
        doShow(data) {
            this.orderId = data.id;
            this.reloadTable();
            this.show = true;
        },
        doClose() {
            this.show = false;
        },
        reloadTable() {
            if (this.orderId) {
                this.initData();
            }
        },
        initData() {
            getGoodsListByOrderId(this.orderId).then(res=>{
                this.orderList = res.data;
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
	/deep/{
		.data-box .el-form-item {
			margin-bottom: 12px;
		}
	}

</style>