kd-aiot-frontend-aps/src/views/saleOrder/salesToProduction.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>
				<el-button type="primary" @click="toSubmit" :loading="loading">
				  提交计划
				</el-button>
			</div>
		</div>
		<el-form ref="form" :model="form" :rules="rules" label-width="90px" class="formbox">
			<el-row :gutter="24">
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="计划类型:">
				     <DictSelection dictName="订单计划类型" clearable v-model="form.planType">
				     </DictSelection>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="生产版本:" prop="producteVersionName">
				     <el-input @click.native="openVersion" placeholder="请选择生产版本" readonly v-model="form.producteVersionName"></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="form.productline" placeholder="选择生产版本带入" readonly></el-input>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="使用改型:" prop="modification">
				     <el-checkbox v-model="form.modification" :true-label='1' :false-label='0'></el-checkbox>
				  </el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24" class="row-intro">
				<el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
				  <el-form-item label="销售单数量:">{{form.codeNum}}</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
				  <el-form-item label="订单总数量:">{{form.contractNum}}</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
				  <el-form-item label="订单总重量:">{{form.sumOrderWeight}}</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
				  <el-form-item label="产品编码:">{{form.productCode}}</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="牌号|型号:">{{form.brandNo}}|{{form.model}}</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
				  <el-form-item label="库存数量:">{{form.stockCountBase}}</el-form-item>
				</el-col>
			</el-row>
			<el-table
			  :data="form.salesOrders"
			  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="code" width="120">
			  </el-table-column>
			  <el-table-column label="行号" align="center" prop="lineNumber">
			  </el-table-column>
			  <el-table-column label="合同数量" align="center" prop="contractNum">
			  </el-table-column>
			  <el-table-column label="合同重量" align="center" prop="productSumWeight">
			  </el-table-column>
			  <el-table-column label="欠交数量" align="center" prop="lackNum">
			  </el-table-column>
			  <el-table-column label="计划生产数" align="center" prop="productNum"  width="120">
			    <template slot-scope="scope">
			      <el-form-item
			          label-width="0px"
			         :prop="'salesOrders.'+ scope.$index + '.productNum'"
			         :rules="{
			           required: true,
			           message: '请输入计划生产数',
			           trigger: 'blur'
			         }"
					 class="table-item"
			       >
			         <el-input
			            v-model.number="scope.row.productNum"
			            size="small"
			            oninput="value=value.replace(/[^\d]/g,'')"
			            style="width: 100%"
			            placeholder="输入数量"
			          ></el-input>
			      </el-form-item>
			    </template>
			  </el-table-column>
			  <el-table-column label="要求成型数量" align="center" prop="requiredFormingNum"  width="120">
			    <template slot-scope="scope">
			      <el-form-item
			          label-width="0px"
			         :prop="'salesOrders.'+ scope.$index + '.requiredFormingNum'"
			         :rules="{
			           required: true,
			           message: '请输入要求成型数量',
			           trigger: 'blur'
			         }"
					 class="table-item"
			       >
			         <el-input
			            v-model.number="scope.row.requiredFormingNum"
			            size="small"
			            oninput="value=value.replace(/[^\d]/g,'')"
			            style="width: 100%"
			            placeholder="输入数量"
			          ></el-input>
			      </el-form-item>
			    </template>
			  </el-table-column>
			  <el-table-column label="按单按库" align="center" prop="orderLibraryType">
				  <template slot-scope="{row}">
				      {{getDictValue('按单按库', row.orderLibraryType)}}
				  </template>
			  </el-table-column>
			  <el-table-column label="订单类型" align="center" prop="orderType">
				  <template slot-scope="{row}">
				      {{getDictValue('订单类型', row.orderType)}}
				  </template>
			  </el-table-column>
			  <el-table-column label="交付日期" align="center" prop="deliveryTime" width="160">
			  </el-table-column>
			  <el-table-column label="要求成型日期" align="center" prop="reqMoldTime"  width="180">
				  <template slot-scope="scope">
				    <el-form-item
				        label-width="0px"
				       :prop="'salesOrders.'+ scope.$index + '.reqMoldTime'"
				       :rules="{
				         required: true,
				         message: '请选择要求成型日期',
				         trigger: 'blur'
				       }"
					   class="table-item"
				     >
				       <el-date-picker
				          style="width: 100%;"
				          v-model="scope.row.reqMoldTime"
				          type="date"
				          placeholder="选择日期"
				          value-format="yyyy-MM-dd">
				        </el-date-picker>
					<!-- 	<el-date-picker
						   style="width: 100%;"
						   v-model="scope.row.reqMoldTime"
						   type="datetime"
						   placeholder="选择日期"
						   value-format="yyyy-MM-dd HH:mm:ss">
						 </el-date-picker> -->
				    </el-form-item>
				  </template>
			  </el-table-column>
			  <el-table-column label="客户名称" align="center" prop="customerName">
			  </el-table-column>
			  <el-table-column label="业务员" align="center" prop="salesman">
			  </el-table-column>
			  <el-table-column label="交付要求" align="center" prop="deliveryRequirements">
				  <template slot-scope="{row}">
				      {{getDictValue('交付要求', row.deliveryRequirements)}}
				  </template>
			  </el-table-column>
			  <el-table-column prop="priority" label="优先级" width="100" align="center">
			    <template slot-scope="{ row }">
			      <div class="sort-wrap">
			        <i class="el-icon-caret-top" @click="sortTop(row)"></i>
			        <i class="el-icon-caret-bottom" @click="sortBottom(row)"></i>
			      </div>
			    </template>
			  </el-table-column>
			  <el-table-column label="操作" align="center" width="70" fixed="right">
			    <template slot-scope="scope">
			      <el-button
			        type="text"
			        @click="handleDeleteItem(scope.$index)"
			        >删除</el-button
			      >
			    </template>
			  </el-table-column>
			</el-table>
			<div class="add-product" @click='addEquipment'>
				<i class="el-icon-circle-plus-outline"></i>
			</div>
			<el-row :gutter="24">
				<el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
				  <el-form-item label="计划备注:">
					  <el-input type="textarea" :rows="4" v-model="form.notes" resize='none'></el-input>
				  </el-form-item>
				</el-col>
			</el-row>
		</el-form>
       <AdditionalOrder ref="additionalRefs" :productCode="form.productCode" :selectList="form.salesOrders" @choose="confirmChoose"></AdditionalOrder>
	   <ProductionVersion ref="versionRefs" @confirm="confirmVersion" :productCode="form.productCode"></ProductionVersion>
	   <PlanSubmit ref="submitRefs" :info="form" @publish="publishData"></PlanSubmit>
    </el-card>
  </div>
</template>
<script>
  import AdditionalOrder from './components/AdditionalOrder.vue';
  import PlanSubmit from './components/plan-submit.vue';
  import ProductionVersion from '@/components/CreatePlan/ProductionVersion.vue'
  import { productionToPlan , saveSaleToPlan  } from '@/api/saleOrder';	
  import dictMixins from '@/mixins/dictMixins';
  import { deepClone } from '@/utils/index';
  import { finishPageTab , reloadPageTab } from '@/utils/page-tab-util';
  export default {
	mixins: [dictMixins],
    components: {
		AdditionalOrder,
		ProductionVersion,
		PlanSubmit
    },
    data () {
      return {
         form:{
			producteVersionId:'', 
			salesOrders:[]
        },
         // 表单验证规则
		rules: {
			producteVersionName:[{required: true,message: '请选择生产版本',trigger: 'change'}]
		},
		selection:[],
		loading:false
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
	created() {
		this.requestDict('按单按库'); 
		this.requestDict('订单类型');
		this.requestDict('交付要求');
		this.selection = JSON.parse(this.$route.query.selection)
		const list = []
		this.selection.map(item=>{
			list.push(item.id)
		})
		this.getSaleInfo(list)
	},
	methods: {
	   getSaleInfo(params){
		    productionToPlan(params).then(res=>{
				this.form = deepClone(res)
				this.form.salesOrders.map((item,index)=>{
					item.priority = index+1
				})
			})
	   },
       cancel(){
		   this.$router.go(-1)
	   },
	   toSubmit(){
		   this.$refs.form.validate((valid) => {
			 if (valid) {
			   this.mapList() 
			   this.$refs.submitRefs.open()
			 }
		   });
	   },
	   // 对比日期，计算要求成型重量
	   mapList(){
		   var requiredFormingWeight = 0
		   var requiredFormingNum = 0
		   this.form.salesOrders.map((item,index)=>{
		   		requiredFormingWeight = requiredFormingWeight + Number(item.productUnitWeight) * Number(item.requiredFormingNum)		        
		        requiredFormingNum = requiredFormingNum + item.requiredFormingNum
		   })
		   this.form.requiredFormingWeight = requiredFormingWeight.toFixed(2)
		   this.form.requiredFormingNum = requiredFormingNum
		   const collection = deepClone(this.form.salesOrders)
		   const sortedCollection = collection.sort((a, b) => new Date(b.reqMoldTime) - new Date(a.reqMoldTime));
		   let latestData = {};
		   for (let i = 0; i < sortedCollection.length; i++) {
		     const data = sortedCollection[i];
		     if (!latestData.reqMoldTime || new Date(data.reqMoldTime) >= new Date(latestData.reqMoldTime)) {
		       latestData = data;
		     }
		   }
		   this.form.reqMoldTime = latestData.reqMoldTime
	   },

	   
	   sortTop (row) {
	     if (row.priority <= 1) {
	       return;
	     }
	     let rowN = this.form.salesOrders.find((n) => n.priority == row.priority - 1);
	     rowN.priority += 1;
	     row.priority -= 1;
	     this.form.salesOrders.sort((a, b) => {
	       return a.priority - b.priority;
	     });
	   },
	   sortBottom (row) {
	     if (row.priority >= this.form.salesOrders.length) {
	       return;
	     }
	     let rowN = this.form.salesOrders.find((n) => n.priority == row.priority + 1);
	     rowN.priority -= 1;
	     row.priority += 1;
	     this.form.salesOrders.sort((a, b) => {
	       return a.priority - b.priority;
	     });
	   },
	   againSort () {
	     this.form.salesOrders.forEach((n, index) => {
	       n.priority = index + 1;
	     });
	   },
	   // 删除产品
	   handleDeleteItem (index) {
	     this.form.salesOrders.splice(index, 1)
	   },
	   addEquipment(){
		   this.$refs.additionalRefs.open()
	   },
	   openVersion(){
		  this.$refs.versionRefs.open() 
	   },
	   confirmVersion(data){
		   this.$set(this.form,'producteVersionName',data.produceVersionName)
		   this.$set(this.form,'producteVersionId',data.produceVersionId)
			this.form.productline = data.lineNames.length?data.lineNames[0]:''
	   },
	   
	   confirmChoose(list){
		   // 取出在弹窗中选中并且不在表格中的数据
		   const result = list.filter(
		     i => this.form.salesOrders.findIndex(p => p.id === i.id) === -1
		   )
		   // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
		   const del = this.form.salesOrders.filter(
		     i => list.findIndex(p => p.id === i.id) === -1
		   )
		  for(let i= this.form.salesOrders.length-1;i>=0;i--){
			  for(let j in del){
				  if(this.form.salesOrders[i].id === del[j].id){
					  this.form.salesOrders.splice(i,1);
				  }
			  }
		  }
		  this.form.salesOrders = this.form.salesOrders.concat(result)
		  this.changeData()
	   },
	   changeData(){
		   var productNum = 0
		   var productWeight = 0
		   this.form.salesOrders.map((item,index)=>{
		     	item.priority = index+1
				productNum = productNum + item.contractNum
				productWeight = productWeight + Number(item.productSumWeight) 
		  })
		   this.$set(this.form,'codeNum',this.form.salesOrders.length)
		   this.$set(this.form,'contractNum',productNum) 
		   this.$set(this.form,'sumOrderWeight',productWeight.toFixed(2))

	   },
	   
	   publishData(type){
		   console.log('type',type)
		   let params = deepClone(this.form)
		   delete params.id
		   saveSaleToPlan(params).then(res=>{
			   finishPageTab()
			   reloadPageTab({ fullPath: '/saleOrder' });
			   this.$router.go(-1)
		   }) 
	   }
    }
  };
</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;
		margin-bottom: 20px;
	}
	.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;
	}
	.table-item{
		margin-bottom: 0;
	}
</style>