HAVI系统 订单录入

<template>
	<div id="app">
<el-container>
	<div>
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
		 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
			<el-menu-item index="1">HAVI通用管理系统</el-menu-item>
			<el-submenu index="2">
				<template slot="title">我的工作台</template>
				<el-menu-item index="2-1">选项1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
				<el-submenu index="2-4">
					<template slot="title">选项4</template>
					<el-menu-item index="2-4-1">选项1</el-menu-item>
					<el-menu-item index="2-4-2">选项2</el-menu-item>
					<el-menu-item index="2-4-3">选项3</el-menu-item>
				</el-submenu>
			</el-submenu>
		</el-menu>
	</div>



  <el-container>
    <el-aside width=450px>
		<el-container>
			<el-main >
			<el-page-header @back="goBack" content="入仓订单">
			</el-page-header>
			<el-form ref="form" :model="form" label-width="auto" size="mini">
			<el-row gutter="2">
				<el-col :span="12">
					<el-form-item label="入仓类型">
					<el-select v-model="value" placeholder="入仓类型">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:format="yy-mm-dd"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="PO号码">
					<el-input v-model="input" placeholder="PO号码"></el-input>
				</el-form-item>
				</el-col>			
				
			</el-row>
			<el-row gutter="2">
				<el-col :span="24">
				<el-form-item label="预定入仓日期">
					<el-date-picker
						v-model="date1"
						type="date"
						placeholder="预定入仓日期">
					</el-date-picker>
				</el-form-item>
				</el-col>				
				<el-col :span="24">
				   <el-form-item label="实际入仓日期">
					  <el-date-picker
						v-model="date2"
						type="date"
						placeholder="预定入仓日期">
					</el-date-picker>
					</el-form-item>
				</el-col>				
			</el-row>
			<el-row gutter="2">
				<el-col :span="24">
					<el-form-item label="IncoTerm">
					<el-input v-model="input" placeholder="IncoTerm"></el-input>
				</el-form-item>
				</el-col>		
			</el-row>
			<el-row gutter="2">
				<el-col :span="12">
					<el-form-item label="车辆ID">
					<el-input v-model="input" placeholder="车辆ID"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="运输司机ID">
					<el-input v-model="input" placeholder="运输司机ID"></el-input>
				</el-form-item>
				</el-col>				
			</el-row>
			<el-row gutter="2">
				<el-col :span="12">
					<el-form-item label="柜号">
					<el-input v-model="input" placeholder="柜号"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="柜型">
					<el-input v-model="input" placeholder="柜型"></el-input>
				</el-form-item>
				</el-col>				
			</el-row>
				<el-row gutter="2">
					<el-col :span="12">
						<el-form-item label="海关检查">
					<el-switch v-model="form.CustomsInspection"></el-switch>
				</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="国检检查">
							<el-switch v-model="form.CIQInspection"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="2">
				<el-col :span="12">
					<el-form-item label="船公司ID">
					<el-input v-model="input" placeholder="船公司ID"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="BL号码">
					<el-input v-model="input" placeholder="BL号码"></el-input>
				</el-form-item>
				</el-col>				
			</el-row>
			<el-row gutter="2">
				<el-col :span="12">
					<el-form-item label="船名航次">
					<el-input v-model="input" placeholder="船名航次"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="船公司船代ID">
					<el-input v-model="input" placeholder="船公司船代ID"></el-input>
				</el-form-item>
				</el-col>				
			</el-row>
			<el-row gutter="2">
				<el-col :span="12">
					<el-form-item label="封条号码">
					<el-input v-model="input" placeholder="封条号码"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="启运港">
					<el-input v-model="input" placeholder="启运港"></el-input>
				</el-form-item>
				</el-col>				
			</el-row>
			<el-row gutter="2">
			<el-col :span="12">
					<el-form-item label="经停港">
					<el-input v-model="input" placeholder="经停港"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发货人">
					<el-input v-model="input" placeholder="发货人"></el-input>
				</el-form-item>
				</el-col>				
			</el-row>
			<el-row gutter="2">
			<el-col :span="12">
					<el-form-item label="订单说明">
					<el-input v-model="input" placeholder="订单说明"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="订单状态">
					<el-input v-model="input" placeholder="订单状态"></el-input>
				</el-form-item>
				</el-col>				
			</el-row>
			<el-form-item label="有效">
				<el-switch
				v-model="Valid"
				active-color="#13ce66"
				inactive-color="#ff4949">
			</el-switch>
			</el-form-item>
			<el-form-item>
					<el-button type="primary" @click="onSubmit">建立订单</el-button>					
				</el-form-item>
			</el-form>
				</el-main>
		</el-container>
	</el-aside>
     <el-main>
		<el-container>		
			<el-main>
			  <el-table
					:data="tableData"
					style="width: 100%">
					<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="商品名称">
							<span>{{ props.row.name }}</span>
						</el-form-item>
						<el-form-item label="所属店铺">
							<span>{{ props.row.shop }}</span>
						</el-form-item>
						<el-form-item label="商品 ID">
							<span>{{ props.row.id }}</span>
						</el-form-item>
						<el-form-item label="店铺 ID">
							<span>{{ props.row.shopId }}</span>
						</el-form-item>
						<el-form-item label="商品分类">
							<span>{{ props.row.category }}</span>
						</el-form-item>
						<el-form-item label="店铺地址">
							<span>{{ props.row.address }}</span>
						</el-form-item>
						<el-form-item label="商品描述">
							<span>{{ props.row.desc }}</span>
						</el-form-item>
						</el-form>
					</template>
					</el-table-column>
					<el-table-column
					label="商品 ID"
					prop="id">
					</el-table-column>
					<el-table-column
					label="商品名称"
					prop="name">
					</el-table-column>
					<el-table-column
					label="描述"
					prop="desc">
					</el-table-column>
				</el-table>
			</el-main>
		</el-container>
    </el-main>
  </el-container>
  <el-containe>
	  <el-footer>Footer</el-footer>
  </el-containe>
</el-container>		

				


	</div>
</template>



<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
		CustomsInspection:true,
		CIQInspection:true,
		Valid:true,

		pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
		}},
		tableData: Array(5).fill(item),
		options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
		form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
		},
		tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }],
	  }
    }
  };

</script>
<style>
  .el-footer {
    background-color: rgb(102, 103, 105);
    color: rgb(231, 226, 226);
    text-align: center;
    line-height: 20px;
	
  }
    .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 20px;

	
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 20px;
	height:flex ;

  }
 
</style>