kd-aiot-frontend-aps/src/views/saleOrder/components/order-search.vue

<!-- 搜索表单 -->
<template>
  <el-form
    label-width="90px"
    class="ele-form-search"
    @keyup.enter.native="search"
    @submit.native.prevent
  >
    <el-row :gutter="15">
      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
        <el-form-item label="销售订单号:">
          <el-input v-model="where.code" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
        <el-form-item label="产品编码:">
					<el-input v-model="where.productCode" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
	<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	  <el-form-item label="行号:">
			<el-input v-model="where.lineNumber" placeholder="请输入"></el-input>
	  </el-form-item>
	</el-col>
	<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	  <el-form-item label="牌号:">
			<el-input v-model="where.brandNo" placeholder="请输入"></el-input>
	  </el-form-item>
	</el-col>
	<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	  <el-form-item label="型号:">
			<el-input v-model="where.model" placeholder="请输入"></el-input>
	  </el-form-item>
	</el-col>
	<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	  <el-form-item label="订单来源:">
		 <DictSelection dictName="订单来源" clearable v-model="where.orderSource">
		 </DictSelection>
	  </el-form-item>
	</el-col>
	<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	  <el-form-item label="客户名称:">
			<el-input v-model="where.customerName" placeholder="请输入"></el-input>
	  </el-form-item>
	</el-col>
	<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	  <el-form-item label="订单类型:">
			<DictSelection dictName="订单类型" clearable v-model="where.orderType">
			</DictSelection>
	  </el-form-item>
	</el-col>
	<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	  <el-form-item label="生产状态:">
			<el-select v-model="where.proStu" placeholder="请选择">
				<el-option
				   v-if="chooseName=='first'"
					v-for="item in awaitProcuct"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				</el-option>
				<el-option
				   v-if="chooseName=='second'"
					v-for="item in alreadyProcuct"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				</el-option>
			</el-select>
	  </el-form-item>
	</el-col>
	  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	    <el-form-item label="按单按库:">
	  		<DictSelection dictName="按单按库" clearable v-model="where.orderLibraryType">
	  		</DictSelection>
	    </el-form-item>
	  </el-col>
	  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	    <el-form-item label="业务员:">
	  		<el-input v-model="where.salesman" placeholder="请输入"></el-input>
	    </el-form-item>
	  </el-col>
<!-- 	  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
	    <el-form-item label="组合编码:">
	  		<el-input v-model="where.ddh" placeholder="请输入"></el-input>
	    </el-form-item>
	  </el-col> -->
	  <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
	  		  <el-form-item label="交货日期:">
	  			<el-date-picker
	  			    style="width: 100%;"
	  				v-model="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-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
		<div class="ele-form-actions">
			<el-button
				type="primary"
				icon="el-icon-search"
				class="ele-btn-icon"
				@click="search"
				size="small"
			>
				查询
			</el-button>
			 <el-button @click="reset"
				 icon="el-icon-refresh-left"
				 size="small"
				 type="primary"
			 >重置</el-button>
		</div>
      </el-col>
	  <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
		  <el-form-item label-width="0px">
			  <el-button @click="goProduct">转生产计划</el-button>
			  <el-button type="primary" @click="orderRefresh">订单刷新</el-button>
			  <el-button type="success" @click="toCreate">创建订单</el-button>
			  <el-upload
				class="avatar-uploader"
				action="#"
				:show-file-list="false"
				:http-request="uploadFile"
				:before-upload="beforeUpload"
				:on-change="handleChange"
			  >
				<el-button type="warning">批量导入</el-button>
			  </el-upload>
			  <el-button type="info"> 
			      <a :href="fileUrl" download="销售订单导入模板.xls" class="button-link">下载模板</a>
			  </el-button>
			  <el-button type="danger">批量删除</el-button>
		  </el-form-item>			  
	  </el-col>
    </el-row>
		
		<!-- 导入异常 -->
		<import-exception ref="importDialog"> </import-exception>
		<!-- 创建订单 -->
		<create-order ref="createDialog"> </create-order>
		<!-- 订单组合 -->
		<group-order ref="groupDialog"> </group-order>
  </el-form>
</template>

<script>
	import ImportException from '../components/import-exception.vue'
	import CreateOrder from '../components/create-order.vue'
	import GroupOrder from '../components/group-order.vue'
	import { importFile } from '@/api/saleOrder';
	import fileUrl from '@/assets/file/销售订单导入模板.xlsx';
	import { pullSalesOrder  } from '@/api/saleOrder';
	export default {
		props: {
			selection:Array
		},
		components: {
		  ImportException,
		  CreateOrder,
		  GroupOrder
		},
    data() {
      // 默认表单数据
      const defaultWhere = {
			 code:'',
			 productCode:'',
			 customerName:'',
			 lineNumber:'',
			 model:'',
			 brandNo:'',
			 orderSource:'',
			 orderType:'',
			 proStu:'',
			 orderLibraryType:'',
			 salesman:'',
      };
      return {
				fileUrl,
						// 表单数据
						where: { ...defaultWhere },
						time:[],
				fileList:[],
				awaitProcuct:[
					{value:1,label:'待排产'}
				],
				alreadyProcuct:[
					{value:0,label:'所有状态'},
					{value:2,label:'待发布'},
					{value:3,label:'发布失败'},
					{value:4,label:'待生产'},
					{value:5,label:'生产中'},
					{value:6,label:'已完成'},
					{value:7,label:'已延期'}
				],
				chooseName:'first'
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created(){
    },
    methods: {
	  setData(activeName){
		  this.chooseName = activeName
	  },
      /* 搜索 */
      search() {
        if(this.time.length){
        	this.where.startTime = this.time[0]
        	this.where.endTime = this.time[1]
        }
        this.$emit('search', this.where);
      },
      /*  重置 */
      reset() {
	    this.time = []
        this.where = { ...this.defaultWhere };
        this.search();
      },
	  toImport(){
		  this.$refs.importDialog.open()
	  },
	  toCreate(){
		  this.$refs.createDialog.open()
	  },
	  toGroup(){
		 this.$refs.groupDialog.open() 
	  },
	  goProduct(){
		 if(!this.selection.length){
			 return this.$message.warning('请先勾选一个或多个订单！')
		 }
		 const productCode = this.selection[0].productCode
		 for(var i=0;i<this.selection.length;i++){
			 if(productCode != this.selection[i].productCode){
				 return this.$message.warning('产品编码不一致！')
			 }
		 }
		 this.$router.push({
		    path: '/saleOrder/salesToProduction',
			query:{
				selection:JSON.stringify(this.selection)
			}
		 });
	  },
		
		// 刷新订单
		orderRefresh(){
			 pullSalesOrder().then(res=>{
			 })
		},
	  
	   handleChange(file, fileList) {
			this.fileList = fileList;
			console.log(fileList)
		},
	  
	  //上传限制
	  beforeUpload (file) {
	    const isLt10M = file.size / 1024 / 1024 < 10;
	    if (!isLt10M) {
	      this.$message.error('上传文件大小不能超过 10MB!');
	    }
	    return isLt10M;
	  },
	  //文件上传
	  uploadFile (param) {
		  let fd = new FormData();
				this.fileList.forEach(item=>{
					fd.append("importExcel",item.raw);
				})
			importFile(fd).then(res=>{
				this.$emit('search', this.where);
			})
	  },
	  
    }
  };
</script>
<style lang="scss" scoped>
    .ele-form-actions{
		display:flex;
		align-items: center;
		justify-content: flex-end;
	}
	.avatar-uploader{
		display: inline-block;
		margin: 0 10px;
	}
	.button-link{
		color: #fff;
	}
</style>