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">
				  提交计划
				</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.type">
				     </DictSelection>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="生产版本:" prop="edition">
				     <el-input @click.native="openVersion" placeholder="请选择生产版本" readonly v-model="form.edition"></el-input>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="产线:" prop="productline">
				     <el-input v-model="form.productline"></el-input>
				  </el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="使用改型:" prop="remodel">
				     <el-checkbox v-model="form.remodel"></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="销售单数量:">3</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
				  <el-form-item label="订单总数量:">10000</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
				  <el-form-item label="订单总重量:">3021.23</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
				  <el-form-item label="产品编码:">W30000004536</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				  <el-form-item label="牌号|型号:">YL10.2|BΦ16.0*330(MG)</el-form-item>
				</el-col>
				<el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
				  <el-form-item label="库存数量:">1523</el-form-item>
				</el-col>
			</el-row>
			<el-table
			  :data="form.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">
			  </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="pNum"  width="120">
			    <template slot-scope="scope">
			      <el-form-item
			          label-width="0px"
			         :prop="'tableData.'+ scope.$index + '.pNum'"
			         :rules="{
			           required: true,
			           message: '请输入计划生产数',
			           trigger: 'blur'
			         }"
			       >
			         <el-input
			            v-model.number="scope.row.pNum"
			            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="mNum"  width="120">
			    <template slot-scope="scope">
			      <el-form-item
			          label-width="0px"
			         :prop="'tableData.'+ scope.$index + '.mNum'"
			         :rules="{
			           required: true,
			           message: '请输入要求成型数量',
			           trigger: 'blur'
			         }"
			       >
			         <el-input
			            v-model.number="scope.row.mNum"
			            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="model">
			  </el-table-column>
			  <el-table-column label="订单类型" align="center" prop="model">
			  </el-table-column>
			  <el-table-column label="交付日期" align="center" prop="measuringUnit">
			  </el-table-column>
			  <el-table-column label="要求成型日期" align="center" prop="date"  width="180">
				  <template slot-scope="scope">
				    <el-form-item
				        label-width="0px"
				       :prop="'tableData.'+ scope.$index + '.date'"
				       :rules="{
				         required: true,
				         message: '请选择要求成型日期',
				         trigger: 'blur'
				       }"
				     >
				       <el-date-picker
				          style="width: 100%;"
				          v-model="scope.row.date"
				          type="date"
				          placeholder="选择日期"
				          value-format="yyyy-MM-dd">
				        </el-date-picker>
				    </el-form-item>
				  </template>
			  </el-table-column>
			  <el-table-column label="客户名称" align="center" prop="measuringUnit">
			  </el-table-column>
			  <el-table-column label="业务员" align="center" prop="measuringUnit">
			  </el-table-column>
			  <el-table-column label="交付要求" align="center" prop="measuringUnit">
			  </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.remark" resize='none'></el-input>
				  </el-form-item>
				</el-col>
			</el-row>
		</el-form>
       <AdditionalOrder ref="additionalRefs"></AdditionalOrder>
	   <ProductionVersion ref="versionRefs"></ProductionVersion>
    </el-card>
  </div>
</template>
<script>
  import AdditionalOrder from './components/AdditionalOrder.vue';
  import ProductionVersion from '@/components/CreatePlan/ProductionVersion.vue'
  export default {
    components: {
		AdditionalOrder,
		ProductionVersion
    },
    data () {
      return {
         form:{
			tableData:[
				{name:'122',model:'型号1',sort:1},
				{name:'222',model:'型号2',sort:2}
			]
        },
         // 表单验证规则
		rules: {
			edition:[{required: true,message: '请选择生产版本',trigger: 'blur'}],
			productline:[{required: true,message: '请选择产线',trigger: 'blur'}],
		},
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
	methods: {
       cancel(){
		   this.$router.go(-1)
	   },
	   toSubmit(){
		   
	   },
	   sortTop (row) {
	     if (row.sort <= 1) {
	       return;
	     }
	     let rowN = this.form.tableData.find((n) => n.sort == row.sort - 1);
	     rowN.sort += 1;
	     row.sort -= 1;
	     this.form.tableData.sort((a, b) => {
	       return a.sort - b.sort;
	     });
	   },
	   sortBottom (row) {
	     if (row.sort >= this.form.tableData.length) {
	       return;
	     }
	     let rowN = this.form.tableData.find((n) => n.sort == row.sort + 1);
	     rowN.sort -= 1;
	     row.sort += 1;
	     this.form.tableData.sort((a, b) => {
	       return a.sort - b.sort;
	     });
	   },
	   againSort () {
	     this.form.tableData.forEach((n, index) => {
	       n.sort = index + 1;
	     });
	   },
	   // 删除产品
	   handleDeleteItem (index) {
	     this.form.tableData.splice(index, 1)
	   },
	   addEquipment(){
		   this.$refs.additionalRefs.open()
	   },
	   openVersion(){
		  this.$refs.versionRefs.open() 
	   }
    }
  };
</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;
	}
</style>