产量登记表连接设备的弹框样式开发+字段调试，下拉数据的接口联调问题

haoxuan

2024-04-10 3917bfce75349ac3fb0d0e5e4078dc99072a2d8e

 src/views/productManage/productRegisterForm/components/addProductDialog.vue

@@ -19,49 +19,91 @@
      >
        <el-row>
          <el-col :span="11">
            <el-form-item label="日期" prop="date">
            <el-form-item label="日期" prop="createTime">
              <el-date-picker
                type="date"
                placeholder="年/月/日"
                v-model="proForm.date"
                v-model="proForm.createTime"
                size="small"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="组别" prop="group">
              <el-select v-model="proForm.group" placeholder="请选择组别" size="small">
                <el-option v-for="item in groupOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
            <el-form-item label="组别" prop="groupNumber">
              <el-select
                v-model="proForm.groupNumber"
                placeholder="请先选择车间"
                no-data-text="请先选择车间"
                class="select-width"
                @change="getGroupNumber"
              >
                <el-option
                  v-for="item in workshopGroupList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="车间" prop="workshop">
              <el-select v-model="proForm.workshop" placeholder="请选择车间" size="small">
                <el-option label="车间一" value="车间一"></el-option>
                <el-option label="车间二" value="车间二"></el-option>
                <el-option label="车间三" value="车间三"></el-option>
                <el-option label="车间四" value="车间四"></el-option>
            <el-form-item label="车间" prop="workshopId">
              <el-select
                v-model="proForm.workshopId"
                placeholder="请选择"
                class="select-width"
                @change="getGroupNumber"
              >
                <el-option
                  v-for="item in nameList"
                  :key="item.number"
                  :label="item.name"
                  :value="item.number"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="规格" prop="spec">
              <el-input v-model="proForm.spec" size="small"></el-input>
              <el-select
                v-model="proForm.spec"
                placeholder="请选择"
                class="select-width"
              >
                <el-option
                  v-for="item in specList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="庄口" prop="lots">
              <el-select v-model="proForm.lots" placeholder="请选择庄口" size="small" style="width: 100%">
                <el-option label="庄口一" value="庄口一"></el-option>
                <el-option label="庄口二" value="庄口二"></el-option>
            <el-form-item label="庄口" prop="marketId">
              <el-select
                v-model="proForm.marketId"
                placeholder="请选择庄口"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="item in marketList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" label-width="20px">
              <el-button type="primary" size="small">切换</el-button>
              <el-button type="primary" @click='changeForm(true)' size="small">切换</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="20">
@@ -77,23 +119,23 @@
              <span slot="label">
                <span class="formLabel">净重</span>
              </span>
              <el-input v-model="proForm.netWeight" size="small"></el-input>
              <el-input v-model="proForm.netWeight"    @blur="changeTableInput" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item prop="carNum" label-width="80px">
            <el-form-item prop="carNumber" label-width="80px">
              <span slot="label">
                <span class="formLabel">车号</span>
              </span>
              <el-input v-model="proForm.carNum" size="small"></el-input>
              <el-input v-model="proForm.carNumber"  @blur="changeTableInput" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item prop="numTimes" label-width="80px">
            <el-form-item prop="pieceNumber" label-width="80px">
              <span slot="label">
                <span class="formLabel">回数</span>
              </span>
              <el-input v-model="proForm.numTimes" size="small"></el-input>
              <el-input v-model.number="proForm.pieceNumber"  @blur="changeTableInput" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
@@ -101,61 +143,179 @@
              <span slot="label">
                <span class="formLabel">片数</span>
              </span>
              <el-input v-model="proForm.pieces" size="small"></el-input>
              <el-input v-model.number="proForm.pieces"  @blur="changeTableInput" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit('form')" size="mini">确定</el-button>
      <!-- <el-button @click="handleClose" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit('form')" size="mini">确定</el-button> -->
    </div>
  </el-dialog>
</template>
<script>
import {
  getWorkshopManageGroup,
} from "@/api/productManage/productRegisterForm.js";
export default {
  props: {},
  props: { 
    nameList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    marketList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    specList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      editDialogVisible: false,
      proForm: {},
      rules: {
        date: [{ required: true, message: "请选择日期", trigger: "change" }],
        number: [{ required: true, message: "请输入编号", trigger: "blur" }],
        workshop: [{ type: "date", required: true, message: "请选择车间", trigger: "change" }]
      workshopGroupList:[],
      proForm: {
        createTime: "",
        groupNumber: "",
        workshopId: "",
        spec: "",
        marketId: "",
        tareWeight: "",
        netWeight: "",
        carNumber: "",
        pieceNumber: "",
        pieces: "",
      },
      groupOptions: [
        { id: 1, value: 1 },
        { id: 2, value: 2 },
        { id: 3, value: 3 },
        { id: 4, value: 4 },
        { id: 5, value: 5 },
        { id: 6, value: 6 },
        { id: 7, value: 7 },
        { id: 8, value: 8 },
        { id: 9, value: 9 }
      ]
      rules: {
        createTime: [
          { required: true, message: "请选择生产日期", trigger:  ["change", "blur"] },
        ],
        marketId:  [
          { required: true, message: "请选择", trigger:  ["change", "blur"] },
        ],
        workshopId:  [
          { required: true, message: "请选择", trigger:  ["change", "blur"] },
        ],
        groupNumber:  [
          { required: true, message: "请选择", trigger:  ["change", "blur"] },
        ],
        spec:  [
          { required: true, message: "请选择", trigger:  ["change", "blur"] },
        ],
      },
    };
  },
  created() {
  },
  watch:{
    "form": {
      handler() {
        this.getInfo()
      },
      deep: true,
      immediate:true,
    },
    "form.carNumber": {
      handler() {
        debugger
        this.$set(this.proForm,'carNumber',this.form.carNumber)
      },
      deep: true,
      immediate:true,
    },
    "form.pieceNumber": {
      handler() {
        this.$set(this.proForm,'pieceNumber',this.form.pieceNumber)
      },
      deep: true,
      immediate:true,
    },
    "form.pieces": {
      handler() {
        this.$set(this.proForm,'pieces',this.form.pieces)
      },
      deep: true,
      immediate:true,
    },
    'form.workshopId': function () {
      this.getGroupNumber()
    }
  },
  created() {},
  methods: {
    getInfo(){
      this.proForm={
          createTime: this.form.createTime,
          groupNumber: this.form.groupNumber,
          workshopId: this.form.workshopId,
          spec: this.form.spec,
          marketId: this.form.marketId,
          tareWeight: "",
          netWeight: "",
          carNumber: this.form.carNumber,
          pieceNumber: this.form.pieceNumber,
          pieces: this.form.pieces,
        }
        this.$forceUpdate();
    },
    getGroupNumber(){
      if(this.proForm.workshopId){
        //组别
        getWorkshopManageGroup({number:this.proForm.workshopId}).then((res) => {
           if (res.code == 200) {
              this.workshopGroupList=[]
              let workshopGroupList = res.data || {};
              if(Object.keys(workshopGroupList).length>0){
                for(let i in workshopGroupList){
                  this.workshopGroupList.push(workshopGroupList[i])
                }
              }
            }
          });
          if(this.proForm.groupNumber){
            this.changeForm()
          }
      }else{
        this.workshopGroupList =[]
      }
    },
    changeForm(val){
      this.$emit('changeForm',this.proForm,val)
    },
    changeTableInput(){
      this.$emit('changeTableInput',this.proForm)
    },
    handleClose() {
      this.editDialogVisible = false
      this.editDialogVisible = false;
    },
    // 确定
    onSubmit(form) {
      console.log(form)
    }
  }
}
      console.log(form);
    },
  },
};
</script>
<style lang="scss" scoped>
.add-event-dialog {
  .formLabel {
    font-size: 20px;
    font-weight: 700;
    font-size: 18px;
    // font-weight: 600;
    color: #333;
  }
  .dialog-footer {
@@ -172,7 +332,7 @@
  .el-form-item__label {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    // font-weight: 700;
  }
  .add-event-dialog .el-dialog {
    position: absolute;