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

haoxuan

2024-04-10 3917bfce75349ac3fb0d0e5e4078dc99072a2d8e

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

 src/views/productManage/productRegisterForm/addProductRegisterPage.vue

@@ -544,7 +544,13 @@
      </div>
    </div>
    <!-- 仪器连接正常弹窗 -->
    <addProductDialog ref="addProductDialog" />
    <addProductDialog ref="addProductDialog" 
    :marketList='marketList' 
    :nameList='nameList'  
    :form='ruleForm'
    :specList='specList'
    @changeForm='changeForm'
    @changeTableInput='changeTableInput' />
  </div>
</template>

@@ -637,6 +643,40 @@
    this.getSelectDataList();
  },
  methods: {
    changeForm(form,val){
      if(val){
        this.ruleForm.createTime=form.createTime
        this.ruleForm.groupNumber=form.groupNumber
        this.ruleForm.spec=form.spec
        this.ruleForm.marketId=form.marketId
        this.getGroupNumber()
      }
    },
    changeTableInput(form){
      debugger
      let string=''
      for(let i in this.tableData){
        if(this.tableData[i].carNumber==form.carNumber){
          string=i
          if(Number(form.pieceNumber)>0&&Number(form.pieces)<5){
            this.$set(this.tableData[i],'pieceNumber'+form.pieceNumber+form.pieces,form.netWeight)
            break;
          }
        }
      }
      if(form.pieceNumber==3&&form.pieces==4){
        this.$refs.addProductDialog.proForm.carNumber=this.tableData[Number(string)+1].carNumber
      }else{
        if(form.pieces==4){
          this.$refs.addProductDialog.proForm.pieceNumber=Number(form.pieceNumber)+1
          this.$refs.addProductDialog.proForm.pieces=1
        }else{
          this.$refs.addProductDialog.proForm.pieces=Number(form.pieces)+1
        }
      }
      this.$refs.addProductDialog.proForm.netWeight=''
      this.$forceUpdate();
    },
    getSelectDataList() {
      //车间
      getDictList({
@@ -692,6 +732,7 @@
                  }
                }
               }
               this.ruleForm.carNumber=this.tableData.length>0?this.tableData[0].carNumber:''
              }
            });
          }
@@ -708,6 +749,9 @@
    // 仪器连接弹窗
    deviceConnectClick() {
      if (this.isDeviceConnectStatus) {
        this.$refs.addProductDialog.proForm.pieceNumber=1
        this.$refs.addProductDialog.proForm.pieces=1
        this.$forceUpdate();
        this.$refs.addProductDialog.editDialogVisible = true;
      }
    },
@@ -717,29 +761,40 @@
    },
    // 放弃
    cancelClickOne() {
      this.form = {
      this.ruleForm = {
        number: "",
        finishDate: "",
        market: "",
        name: "",
        spec: "",
        workshopGroup: "",
        circleTwo: "",
        record: "",
        createTime: "",
        circle: "",
        totalCircle: "",
        position: "",
        marketId: "",
        fallingSilkCocoonNumber: "",
        workshopId: "",
        bucketCocoonNumber: "",
        groupNumber: "",
        vehicleSpeed: "",
        spec: "",
        timeYi: "",
        jieZhuang: "",
        timeJia: "",
        level: "",
        groupReelingdiscount: "",
        fallingSilkBucket: "",
        fallingSilkBucketOne: "",
        isfallingSilkBucketOne: "",
        fallingSilkBucketTwo: "",
        isfallingSilkBucketTwo: "",
        fallingSilkBucketThree: "",
        isfallingSilkBucketThree: "",
        back: "",
        oneBack: "",
        twoBack: "",
        threeBack: "",
        theorySilkAmount: "",
        total: "",
        hourYield: "",
      };
      this.$refs.form.resetFields();
      this.productId = 1;
      this.tableList.tableData = [
        {
          productId: 1,
          position: "",
          fineness: 0,
          quantity: 0,
          sum: "",
        },
      ];
      this.$refs.ruleForm.resetFields();
      this.tableData = [];
    },
    // 保存
    saveClickOne(formName) {

 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;