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

<template>
  <el-dialog :title="this.$t('orderAuthor.orderDetails')" :visible.sync="show" width="500px" :before-do-close="doClose" :close-on-click-modal="false">
    <div>
      <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 400px">
        <data-form ref="dataform" :form="form" :form-model="formModel" class="data-box" />
      </el-scrollbar>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doClose">{{$t('global.close')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
	name: 'RouteDetail',
	components: {
	},
	props: {

	},
	data() {
		return {
			show: false,
			formModel: {
				organizationName: '',
				userName: '',
				goodsName: '',
				amount: '',
				forever: '',
				startTime: '',
				monthAmount: '',
				totalPrice: '',
				payWays: '',
				createTime: '',
				orderType: '',
				contractNo: '',
				bizType: '',
				payStatusZh: '',
				sellerName: ''
			}
		};
	},
	computed: {
		form() {
			const form = {
				labelWidth: '120px',
				items: [
					{ prop: 'organizationName', label: `${this.$t('orderAuthor.organizationOrEnterprise')}:`, type: 'text', disabled: true },
					{ prop: 'userName', label: `${this.$t('orderAuthor.userName')}:`, type: 'text', disabled: true },
					{ prop: 'goodsName', label: `${this.$t('orderAuthor.commodityName')}:`, type: 'text', disabled: true },
					{ prop: 'amount', label: `${this.$t('orderAuthor.permissionNumber')}:`, type: 'text', disabled: true },
					{ prop: 'forever', label: `${this.$t('orderAuthor.permanenceOrNot')}:`, type: 'radio', disabled: true, required: false, options: this.$ConstSelect.Whether },
					{ prop: 'startTime', label: `${this.$t('orderAuthor.startDate')}:`, type: 'text', disabled: true },
					{ prop: 'monthAmount', label: `${this.$t('orderAuthor.purchaseMonths')}:`, type: 'text', disabled: true },
					{ prop: 'totalPrice', label: `${this.$t('orderAuthor.totalPrice')}:`, type: 'text', disabled: true },
					{ prop: 'payWays', label: `${this.$t('orderAuthor.paymentMethod')}:`, type: 'text', disabled: true },
					{ prop: 'createTime', label: `${this.$t('orderAuthor.creationDate')}:`, type: 'text', disabled: true },
					{ prop: 'orderType', label: `${this.$t('orderAuthor.orderType')}:`, type: 'text', disabled: true },
					{ prop: 'contractNo', label: `${this.$t('orderAuthor.contractNumber')}:`, type: 'text', disabled: true },
					{ prop: 'bizType', label: `${this.$t('orderAuthor.businessType')}:`, type: 'text', disabled: true },
					{ prop: 'payStatusZh', label: `${this.$t('orderAuthor.paymentStatus')}:`, type: 'text', disabled: true },
					{ prop: 'sellerName', label: `${this.$t('orderAuthor.salesman')}:`, type: 'text', disabled: true }
				]

			};
			return form;
		}
	},
	watch: {

	},
	mounted() {
	},
	methods: {
		doShow(data) {
			this.show = true;
			this.formModel = {
				organizationName: data.organizationName,
				userName: data.userName,
				goodsName: data.goodsName,
				amount: data.amount,
				forever: data.forever,
				startTime: data.startTime,
				monthAmount: data.monthAmount,
				totalPrice: data.totalPrice,
				payWays: data.payWays,
				createTime: data.createTime,
				orderType: data.orderType,
				contractNo: data.contractNo,
				bizType: data.bizType,
				payStatusZh: data.payStatusZh,
				sellerName: data.sellerName
			};
		},
		doClose() {
			this.show = false;
		}
	}
};
</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>