kd-aiot-frontend-aps/src/components/CreatePlan/CreateBatch.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="创建配料计划"
    width="45vw"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
		<el-row :gutter="15">
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="选择物料:" prop="wl">
			     <el-input readonly v-model="form.wl" @click.native="chooseMateriel"/>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="生产版本:" prop="version">
			    <el-input readonly v-model="form.version"  @click.native="chooseVersion"/>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="牌号:">
				 <el-input disabled v-model="form.brand" />
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="工艺路线名称:">
			  	<el-input disabled v-model="form.road" />
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="要求交付日期:" prop="date">
			    <el-date-picker
				   style="width: 100%;"
				   v-model="form.date"
				   type="date"
				   placeholder="选择日期"
				   value-format="yyyy-MM-dd">
				 </el-date-picker>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="工艺路线版本:" prop="roadV">
			       <el-select v-model="form.roadV" placeholder="请选择">
			         <el-option
					   style="width: 100%;"
			           v-for="item in options"
			           :key="item.value"
			           :label="item.label"
			           :value="item.value">
			         </el-option>
			       </el-select>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="生产重量:" prop="weight">
			     <el-input clearable v-model="form.weight">
					 <template slot="append">KG</template>
				 </el-input>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
			  <el-form-item label="计划备注:">
			     <el-input clearable v-model="form.remrk"/>
			  </el-form-item>
			</el-col>
		</el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">
        确定
      </el-button>
    </template>
	
	<!-- 选择物料 -->
	<ChooseMaterial ref="chooseRef"></ChooseMaterial>
	<!-- 选择生产版本 -->
	<ProductionVersion ref="versionRef"></ProductionVersion>
  </ele-modal>
</template>

<script>
	import ChooseMaterial from '@/components/CreatePlan/ChooseMaterial.vue'
	import ProductionVersion from '@/components/CreatePlan/ProductionVersion2.vue'
	export default {
		components: {
			ChooseMaterial,
			ProductionVersion
		},
    data() {
      return {
        visible: false,
		loading:false,
		form:{},
	// 表单验证规则
		rules: {
			wl: [{required: true,message: '请选择物料',trigger: 'change'}],
			version: [{required: true,message: '请选择生产版本',trigger: 'change'}],
			date:[{required: true,message: '请选择交付日期',trigger: 'change'}],
			roadV:[{required: true,message: '请选择工艺路线版本',trigger: 'change'}],
			weight:[{required: true,message: '请输入生产重量',trigger: 'blur'}]
		},
		options:[]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created(){
    },
    methods: {
	  open () {
	    this.visible = true;
	  },
      cancel () {
		this.form = {}
		this.$refs.form.clearValidate();
        this.visible = false;
      },
	  addEquipment(){
		  this.$refs.equipmentRefs.open()
	  }, 
	  /* 保存编辑 */
	  save() {
	    this.$refs.form.validate((valid) => {
	      if (!valid) {
	        return false;
	      }
	    });
	  },
	  
	  chooseMateriel(){
	  	this.$refs.chooseRef.open()
	  },
	  
	  chooseVersion(){
		  this.$refs.versionRef.open()
	  }
	  
    }
  };
</script>
<style lang="scss" scoped>
  .basic-details-title{
	  margin:10px 0
  }
  .add-product{
	  width:100%;
	  display:flex;
	  align-items:center;
	  justify-content:flex-end;
	  font-size:30px;
	  color:#1890ff;
	  margin:10px 0;
	  cursor: pointer;
  }
</style>