CostumingPlatform/ant-design-vue-jeecg/src/views/personel/ZyDistributionList.vue

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="2" v-for="item in orders" :key="item">
          <span slot="title" @click="getOrderSheet(item)">{{item.makeCode}}&nbsp&nbsp&nbsp&nbsp{{item.total}}件</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :label="'工序' + (index+1)"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
          <el-select v-model="value" placeholder="请选择工序">
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="domain.machineId" placeholder="请选择机器" @focus="getMachine">
            <el-option
              v-for="item in option2"
              :key="item.machineId"
              :label="item.machineName"
              :value="item.machineId"
            ></el-option>
          </el-select>
          <el-select v-model="domain.userId" placeholder="请选择员工" @focus="machineLimit(domain)">
            <el-option
              v-for="item in option3"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
          <el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="addDomain">新增工序</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import {getAction,postAction} from "@/api/manage";

  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [
            {
              // 机器id
              machineId:'',
              // 人员id
              userId:'',
              // 衣服id
              clothId:'',
              // 工序序号
              orderNum:'',
            }
          ]
        },
        option1:[],
        option2:[],
        option3:[],
        value:'',
        // 所有订单
        orders:[],
        // 当前衣服的编号
        clothId:''
      };
    },
    created() {
      this.getAllOrders();
    },
    methods: {
      submitForm() {
        // this.$refs[formName].validate(valid => {
        //   if (valid) {
        //     httpAction('/person/zyDistribution/add',this.dynamicValidateForm.domains)
        //   } else {
        //     console.log("error submit!!");
        //     return false;
        //   }
        // });

        for(let i =0 ;i<this.dynamicValidateForm.domains.length;i++){
          this.dynamicValidateForm.domains[i].clothId = this.clothId
          this.dynamicValidateForm.domains[i].orderNum = i+1;
        }
        console.log(this.dynamicValidateForm.domains)
        postAction('/person/zyDistribution/add',this.dynamicValidateForm.domains).then(res=>{
          console.log(res)
        })
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item);
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1);
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          machineId: '',
          userId:'',
          // key: Date.now()
        });
      },
      // 获取机器
      getMachine(){
        this.option2 = [];
        getAction('/zyPerson/zyMachine/getAllMachine').then(res=>{
          console.log(res)
          if(res.code==200){
            this.option2 = res.result;
          }
        })

      },
      // 机器对人员的限制
      machineLimit(item){
        this.option3 = [];
        item.userId = ''
        let params={
          machineId:item.machineId
        }
        console.log(item)
        getAction('/zyPerson/getWorkByMachine',params).then(res=>{
          if(res.code == 500){
            this.option3 = [];
          }
          if(res.code == 200){
            this.option3 = res.result
            console.log(this.option3)
          }
        })
      },
      machineLimit1(item){
        this.option3 = [];
        let params={
          machineId:item
        }
        console.log(item)
        getAction('/zyPerson/getWorkByMachine',params).then(res=>{
          if(res.code == 500){
            this.option3 = [];
          }
          if(res.code == 200){
            this.option3 = res.result
            console.log(this.option3)
          }
        })
      },
      // 查询所有的订单
      getAllOrders(){
        getAction('/zyPerson/zyMachine/getAllOrders').then(res=>{
          // console.log(res)
          if(res.code == 200){
            this.orders = res.result;
          }
        })
      },
      // 当前订单的工序
      getOrderSheet(item){
        let params={
          id:item.makeCode
        }
        getAction('/person/zyDistribution/queryById',params).then(res=>{
          console.log(res)
          if(res.code == 200){
            this.option2 = [];
            this.option3 = [];
            this.clothId = item.makeCode;
            this.dynamicValidateForm.domains = [];
            this.dynamicValidateForm.domains = res.result;
            this.getMachine()
            console.log(res.result[0].machineId)
            this.machineLimit1(res.result[0].machineId)
          }


        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },



  };
</script>

<style>
</style>