kd-aiot-frontend-aps/src/views/materialStatistics/outputOrder.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
		<div class="body-title">
			<div class="title-left">配料用料统计/ 已排产工单</div>
			<div class="title-right">
				<el-button @click="cancel">返回</el-button>
			</div>
		</div>
		<el-form ref="form" :model="form" label-width="90px" class="formbox">
			<el-row :gutter="24">
				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
				  <el-form-item label="计划编号:" label-width="75px">
				    <el-input v-model="form.edition"></el-input>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
				  <el-form-item label="生产工单号:">
				     <el-input v-model="form.edition"></el-input>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
				  <el-form-item label="物料编码:">
				     <el-input v-model="form.productline"></el-input>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
				  <el-form-item label="牌号:" label-width="50px">
				     <el-input v-model="form.brand"></el-input>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 7, md: 12 } : { span: 7 }">
				  <el-form-item label="要求完成时间:" label-width="100px">
				    <el-date-picker
				        style="width: 100%;"
				    	v-model="form.time"
				    	type="daterange"
				    	range-separator="至"
				    	start-placeholder="开始日期"
				    	end-placeholder="结束日期"
				    	value-format="yyyy-MM-dd HH:mm:ss"
				    	:default-time="['00:00:00', '23:59:59']"
				    	>
				    </el-date-picker>
				  </el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-table
		  :data="tableData"
		  border
		>
		  <el-table-column label="序号" align="center" width="60">
				<template slot-scope="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
		  </el-table-column>
		  <el-table-column label="生产工单号" align="center" prop="name" width="120">
		  </el-table-column>
		  <el-table-column label="工单开始时间" align="center" prop="name"  width="150">
		  </el-table-column>
		  <el-table-column label="物料编码" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="牌号" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="物料编码" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="物料名称" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="欠交数量(KG)" align="center" prop="model" width="150">
		  </el-table-column>
		  <el-table-column label="生产班组" align="center" prop="measuringUnit">
		  </el-table-column>
		  <el-table-column label="配料计划编号" align="center" prop="measuringUnit" width="150">
		  </el-table-column>
		  <el-table-column label="排产时间" align="center" prop="measuringUnit">
		  </el-table-column>
		  <el-table-column label="计划生产数量KG)" align="center" prop="measuringUnit"  width="170">
		  </el-table-column>
		  <el-table-column label="已生产数量(KG)" align="center" prop="measuringUnit" width="150">
		  </el-table-column>
		  <el-table-column label="计划交付时间" align="center" prop="measuringUnit" width="150">
		  </el-table-column>
		  <el-table-column label="计划状态" align="center" prop="measuringUnit">
		  </el-table-column>
		</el-table>
		<div class="pagination_wrapper">
		  <el-pagination
		    background
		    layout="total, sizes, prev, pager, next, jumper"
		    :total="total"
		    :page-sizes="[10, 15, 20, 30, 50, 100]"
		    :page-size.sync="pagination.size"
		    :current-page.sync="pagination.page"
		    @current-change="handleCurrentChange"
		    @size-change="handleSizeChange"
		  >
		  </el-pagination>
		</div>
    </el-card>
  </div>
</template>
<script>
  export default {
    components: {
    },
    data () {
      return {
         form:{},
		 tableData:[],
		 pagination:{
			 page:1,
			 size:10
		 },
		 total:0
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
	methods: {
       cancel(){
		   this.$router.go(-1)
	   },
	   // 分页器方法
	   handleCurrentChange (page) {
	     this.pagination.page = page
	     // this.getList()
	   },
	   handleSizeChange (size) {
	     this.pagination.size = size
	     this.pagination.page = 1
	     // this.getList()
	   },
    }
  };
</script>
<style lang="scss" scoped>
	.ele-body{
		background: #fff;
	}
	.body-title{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.title-left{
		font-size: 20px;
		color: #333;
	}
	.formbox{
		margin: 20px auto;
	}
	.row-intro{
		border-bottom: 1px dashed #ccc;
	}
	.sort-wrap {
	  i {
	    font-size: 30px;
	    cursor: pointer;
	  }
	  .el-icon-caret-top {
	    color: red;
	  }
	  .el-icon-caret-bottom {
	    color: #157a2c;
	  }
	}
	.add-product{
		  width:100%;
		  display:flex;
		  align-items:center;
		  justify-content:flex-end;
		  font-size:30px;
		  color:#1890ff;
		  margin:10px 0;
		  cursor: pointer;
	}
	.pagination_wrapper{
		margin: 15px auto;
	}
</style>