报工页面联调

yyb

7 天以前 ecced75681242ea0ff23f0c4805a20fbdc87cf14

 pages/product/report/index.vue

@@ -1,303 +1,378 @@
<template>
   <!-- 报工 -->
   <div class="page">
      <u-form :model="form" ref="uForm" :label-width="200" :rules="rules" :error-type="['toast']">
         <u-form-item label="车间" :border-bottom="false" prop="value0">
            <u-radio-group v-model="form.value0">
               <u-radio name="导体">导体</u-radio>
               <u-radio name="铜杆">铜杆</u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="报工单号" :border-bottom="false" prop="taskNo">
            <u-input v-model="form.taskNo" type="select" placeholder="请扫描报工单号" @click="open" />
         </u-form-item>
         <u-form-item label="工序" :border-bottom="false" prop="name">
            <u-input v-model="form.name" type="select" placeholder="请扫描报工单号" />
         </u-form-item>
         <u-form-item label="订单号" :border-bottom="false" prop="moOn">
            <u-input v-model="form.moOn" type="select" placeholder="点击选择" @click="openList" />
         </u-form-item>
         <u-form-item label="零件号" :border-bottom="false" prop="partNo">
            <u-input v-model="form.partNo" placeholder="" disabled />
         </u-form-item>
         <u-form-item label="零件描述" :border-bottom="false" prop="partName">
            <u-input v-model="form.partName" placeholder="" disabled />
         </u-form-item>
         <u-form-item label="批量大小" :border-bottom="false" prop="value6">
            <u-input v-model="form.value6" placeholder="" disabled />
         </u-form-item>
         <u-form-item label="剩余数量" :border-bottom="false" prop="value7">
            <u-input v-model="form.value7" placeholder="" disabled />
         </u-form-item>
         <u-form-item label="库位" :border-bottom="false" prop="value8">
            <u-input v-model="form.value8" placeholder="" disabled />
         </u-form-item>
         <u-form-item label="报工类型" prop="value9">
            <u-radio-group v-model="form.value9">
               <u-radio name="1">下机报工</u-radio>
               <u-radio name="2">未下机报工</u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="接收零件" prop="value10">
            <u-radio-group v-model="form.value10">
               <u-radio name="1">车间订单</u-radio>
               <u-radio name="2">替代零件</u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="物料" prop="value12">
            <u-radio-group v-model="form.value12" :disabled="true">
               <u-radio name="1">倒冲</u-radio>
               <u-radio name="2">投料</u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="工序" prop="value11">
            <u-checkbox-group>
               <u-checkbox :name="item.name" v-for="(item, index) in checkboxList" :key="index"
                  v-model="item.value11" @change="changeCheckbox" :disabled="item.disabled">
                  {{ item.name }}
               </u-checkbox>
            </u-checkbox-group>
         </u-form-item>
         <u-form-item label="产出列表" :border-bottom="false"></u-form-item>
      </u-form>
      <view class="wrap">
         <scroll-view class="packing-registration-scroll-list" scroll-y="true">
            <u-cell-group class="packing-registration-scroll-list-group" :border="false">
               <view class="content" v-for="(item, index) in InventoryReceiptList" :key="index" :index="index">
                  <view class="content-header">
                     <view class="content-header-title">{{ index + 1 }}</view>
                  </view>
                  <view class="content-body">
                     <view class="row-list">
                        <view class="_label">
                           <view class="_label-name">批号：</view>
                        </view>
                        <view class="_content">
                           {{ item.value0 }}
                        </view>
                     </view>
                     <view class="row-list">
                        <view class="_label">
                           <view class="_label-name">数量：</view>
                        </view>
                        <view class="_content">
                           {{ item.value1 }}
                        </view>
                     </view>
                     <view class="row-list">
                        <view class="_label">
                           <view class="_label-name">库位：</view>
                        </view>
                        <view class="_content">
                           {{ item.value0 }}
                        </view>
                     </view>
                  </view>
               </view>
            </u-cell-group>
         </scroll-view>
      </view>
      <!-- 填写报工单 -->
      <modalBg ref="modalBg" :confirm="confirm">
         <u-field v-model="form.value1" label="报工单号" placeholder="请输入" :border-bottom="false">
         </u-field>
      </modalBg>
      <saveForm ref="saveForm" :operationTaskId="this.operationTaskId" />
      <scan></scan>
   </div>
  <!-- 报工 -->
  <div class="page">
    <u-form
      :model="form"
      ref="uForm"
      :label-width="200"
      :rules="rules"
      :error-type="['toast']"
    >
      <u-form-item label="车间" :border-bottom="false" prop="work">
        <u-radio-group v-model="form.work" :disabled="subdisabled">
          <u-radio name="dt">导体</u-radio>
          <u-radio name="tg">铜杆</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="报工单号" :border-bottom="false" prop="taskNo">
        <u-input
          v-model="form.taskNo"
          type="select"
          placeholder="请扫描报工单号"
          @click="open"
        />
      </u-form-item>
      <u-form-item label="工序" :border-bottom="false" prop="name">
        <u-input
          v-model="form.name"
          type="select"
          placeholder="请扫描报工单号"
        />
      </u-form-item>
      <u-form-item label="订单号" :border-bottom="false" prop="moOn">
        <u-input
          v-model="form.moOn"
          type="select"
          placeholder="点击选择"
          @click="openList"
        />
      </u-form-item>
      <u-form-item label="零件号" :border-bottom="false" prop="partNo">
        <u-input v-model="form.partNo" placeholder="" disabled />
      </u-form-item>
      <u-form-item label="零件描述" :border-bottom="false" prop="partName">
        <u-input v-model="form.partName" placeholder="" disabled />
      </u-form-item>
      <u-form-item label="批量大小" :border-bottom="false" prop="qtyrequired">
        <u-input v-model="form.qtyrequired" placeholder="" disabled />
      </u-form-item>
      <u-form-item
        label="剩余数量"
        :border-bottom="false"
        prop="Jianqtyfinished"
      >
        <u-input v-model="form.Jianqtyfinished" placeholder="" disabled />
      </u-form-item>
      <u-form-item label="库位" :border-bottom="false" prop="proposedLocation">
        <u-input v-model="form.proposedLocation" placeholder="" disabled />
      </u-form-item>
      <u-form-item label="报工类型" prop="productType">
        <u-radio-group v-model="form.productType">
          <u-radio name="dep">下机报工</u-radio>
          <u-radio name="ndep">未下机报工</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="接收零件" prop="receive">
        <u-radio-group v-model="form.receive">
          <u-radio name="mo">车间订单</u-radio>
          <u-radio name="part">替代零件</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="物料" prop="materialcost">
        <u-radio-group v-model="form.materialcost" :disabled="true">
          <u-radio name="倒冲">倒冲</u-radio>
          <u-radio name="投料">投料</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="工序" prop="value11">
        <u-checkbox-group>
          <u-checkbox
            :name="item.name"
            v-for="(item, index) in checkboxList"
            :key="index"
            v-model="item.value11"
            @change="changeCheckbox"
            :disabled="subdisabled || item.disabled"
          >
            {{ item.name }}
          </u-checkbox>
        </u-checkbox-group>
      </u-form-item>
      <u-form-item label="产出列表" :border-bottom="false"></u-form-item>
    </u-form>
    <view class="wrap">
      <scroll-view class="packing-registration-scroll-list" scroll-y="true">
        <u-cell-group
          class="packing-registration-scroll-list-group"
          :border="false"
        >
          <view
            class="content"
            v-for="(item, index) in InventoryReceiptList"
            :key="index"
            :index="index"
          >
            <view class="content-header">
              <view class="content-header-title">{{ index + 1 }}</view>
            </view>
            <view class="content-body">
              <view class="row-list">
                <view class="_label">
                  <view class="_label-name">批号：</view>
                </view>
                <view class="_content">
                  {{ item.productNo }}
                </view>
              </view>
              <view class="row-list">
                <view class="_label">
                  <view class="_label-name">数量：</view>
                </view>
                <view class="_content">
                  {{ item.value1 }}
                </view>
              </view>
              <view class="row-list">
                <view class="_label">
                  <view class="_label-name">库位：</view>
                </view>
                <view class="_content">
                  {{ item.proposedLocation }}
                </view>
              </view>
            </view>
          </view>
        </u-cell-group>
      </scroll-view>
    </view>
    <!-- 填写报工单 -->
    <modalBg ref="modalBg" :confirm="confirm">
      <u-field
        v-model="form.taskNo"
        label="报工单号"
        placeholder="请输入"
        :border-bottom="false"
      >
      </u-field>
    </modalBg>
    <saveForm
      ref="saveForm"
      :operationTaskId="this.form"
      @update="handleUpdate"
    />
    <scan></scan>
  </div>
</template>

<script>
   import modalBg from "@/components/modal/modal-bg.vue";
   import saveForm from "./components/saveForm.vue";
   import scan from "@/components/scan/scan.vue";
   export default {
      components: {
         modalBg,
         saveForm,
         scan
      },
      data() {
         return {
            checkboxList: [{
                  name: "工序的自动报告",
                  value: false,
                  disabled: false,
               },
               {
                  name: "简化物料检查",
                  value: false,
                  disabled: false,
               },
            ],
            InventoryReceiptList: [],
            form: {
               taskNo: "",
               name: "",
               moOn: "",
               partNo: "",
               partName: "",
               value6: "",
               value7: "",
               value8: "",
               value9: "1",
               value10: "1",
               value11: [], // 复选框组的值
               value12: "1",
            },
            rules: {
               value0: [{
                  required: true,
                  message: "请选择车间",
                  trigger: ["change"],
               }, ],
               value1: [{
                  required: true,
                  message: "请选择报工单号",
                  trigger: ["change", "blur"],
               }, ],
               value2: [{
                  required: true,
                  message: "请选择工序",
                  trigger: ["change", "blur"],
               }, ],
               value3: [{
                  required: true,
                  message: "请选择订单号",
                  trigger: ["change", "blur"],
               }, ],
               value9: [{
                  required: true,
                  message: "请选择报工类型",
                  trigger: ["change"],
               }, ],
               value10: [{
                  required: true,
                  message: "请选择接收零件类型",
                  trigger: ["change"],
               }, ],
               value11: [{
                  type: "array",
                  required: true,
                  message: "请至少选择一个物料和工序选项",
                  trigger: ["change"],
               }, ],
            },
            showSave: false,
            operationTaskId: "",
         };
      },
      // 点击提交按钮的事件处理函数
      onNavigationBarButtonTap() {
         this.$refs.saveForm.open();
         this.form.value11 = this.checkboxList
            .filter((item) => item.value)
            .map((item) => item.name);
         this.$refs.uForm.validate((valid) => {
            if (valid) {
               console.log("验证通过");
               // 处理提交逻辑
               // this.$refs.saveForm.open();
            } else {
               console.log("验证失败");
               // 可以获取具体的错误信息
               const errors = this.$refs.uForm.getError();
               console.log("错误信息:", errors);
            }
         });
      },
      onReady() {
         this.$refs.uForm.setRules(this.rules);
      },
      onShow() {
         let that = this;
         console.log("1111111111111");
         uni.$off("scan"); // 每次进来先 移除全局自定义事件监听器
         uni.$on("scan", function(data) {
            console.log("onscan");
            //扫码成功后的回调，你可以写自己的逻辑代码在这里
            console.log("页面扫码结果：", data.code);
            if (data.code) {
               let codeInfo = JSON.parse(data.code);
               this.operationTaskId = codeInfo.id;
               if (codeInfo.moOn) {
                  // 扫描报工单二维码
                  that.saveForm(codeInfo);
                  this.$u.api.workReporting
                     .getProductMainV1({
                        current: 1,
                        size: -1,
                        operationTaskId: this.operationTaskId,
                     })
                     .then((res) => {
                        console.log("res", res);
                        this.InventoryReceiptList = res.data.records;
                     });
               }
            }
         });
      },
      methods: {
         // // 多选处理
         // changeCheckbox(val) {
         //    if (val.name === "倒冲") {
         //       this.checkboxList[2].value = false;
         //    }
         //    if (val.name === "简化物料检查") {
         //       this.checkboxList[0].value = false;
         //    }
         // },
         // 打开弹框--后面还需要监听扫码枪扫码结果，赋值给报工单号字段，然后打开弹框选择订单号等操作
         open() {
            this.$refs.modalBg.open();
         },
         // 弹框保存
         confirm() {
            console.log("保存", this.form.value1);
            // 请求接口，根据工单号查询其他信息并赋值
         },
         // 选择订单号
         openList() {
            if (this.form.taskNo === "") {
               uni.showToast({
                  title: "请先扫描或输入报工单号",
                  icon: "none",
               });
               return;
            }
            uni.navigateTo({
               url: "/pages/product/report/orderList",
            });
         },
         // 存订单号
         setNo(val) {
            this.form.value3 = val;
         },
         // 回显扫码的信息-报工单
         saveForm(val) {
            console.log("回显的数据", val);
            let {
               moOn,
               name,
               ORDER_NO,
               taskNo,
               partName,
               partNo
            } = val;
            this.form.moOn = moOn;
            this.form.name = name;
            this.form.taskNo = taskNo;
            this.form.partName = partName;
            this.form.partNo = partNo;
            // this.form.value3 = ORDER_NO
            if (this.form.value12 == "1") {
               this.checkboxList[1].disabled = true;
            }
         },
      },
   };
import modalBg from "@/components/modal/modal-bg.vue";
import saveForm from "./components/saveForm.vue";
import scan from "@/components/scan/scan.vue";
export default {
  components: {
    modalBg,
    saveForm,
    scan,
  },
  data() {
    return {
      checkboxList: [
        {
          name: "工序的自动报告",
          value: false,
          disabled: false,
        },
        {
          name: "简化物料检查",
          value: false,
          disabled: false,
        },
      ],
      InventoryReceiptList: [],
      form: {
        work: "",
        taskNo: "",
        name: "",
        moOn: "",
        partNo: "",
        partName: "",
        qtyrequired: "",
        Jianqtyfinished: "",
        proposedLocation: "",
        productType: "dep",
        receive: "mo", // 复选框组的值
        materialcost: "",
        autoReport: false,
        simplifyMaterials: false,
      },
      rules: {
        work: [
          {
            required: true,
            message: "请选择车间",
            trigger: ["change"],
          },
        ],
        taskNo: [
          {
            required: true,
            message: "请选择报工单号",
            trigger: ["change", "blur"],
          },
        ],
        name: [
          {
            required: true,
            message: "请选择工序",
            trigger: ["change", "blur"],
          },
        ],
        moOn: [
          {
            required: true,
            message: "请选择订单号",
            trigger: ["change", "blur"],
          },
        ],
        productType: [
          {
            required: true,
            message: "请选择报工类型",
            trigger: ["change"],
          },
        ],
        receive: [
          {
            required: true,
            message: "请选择接收零件类型",
            trigger: ["change"],
          },
        ],
      },
      showSave: false,
      operationTaskId: "",
      subdisabled: false,
    };
  },
  // 点击提交按钮的事件处理函数
  onNavigationBarButtonTap() {
    this.$refs.uForm.validate((valid) => {
      if (valid) {
        console.log("验证通过");
        // 处理提交逻辑
        this.$u.api.workReporting
          .operationTask({
            id: this.form.id,
          })
          .then((res) => {
            console.log("res", res);
            this.$refs.saveForm.open(res);
          });
      } else {
        console.log("验证失败");
        // 可以获取具体的错误信息
        const errors = this.$refs.uForm.getError();
        console.log("错误信息:", errors);
      }
    });
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow() {
    let that = this;
    console.log("1111111111111");
    uni.$off("scan"); // 每次进来先 移除全局自定义事件监听器
    uni.$on("scan", function (data) {
      console.log("onscan");
      //扫码成功后的回调，你可以写自己的逻辑代码在这里
      console.log("页面扫码结果：", data.code);
      if (data.code) {
        let codeInfo = JSON.parse(data.code);
        if (codeInfo.moOn) {
          // 扫描报工单二维码
          that.saveForm(codeInfo);
          that.$u.api.workReporting
            .getProductMainV1({
              current: 1,
              size: -1,
              operationTaskId: codeInfo.id,
            })
            .then((res) => {
              console.log("res", res);
              let InventoryReceiptList = JSON.parse(res.data.records);
              that.saveInventory(InventoryReceiptList);
            });
          console.log("this.InventoryReceiptList", that.InventoryReceiptList);
        }
      }
    });
  },
  watch: {
    "form.taskNo": function (newVal, oldVal) {
      console.log("taskNo changed:", newVal, oldVal);
      this.subdisabled = false;
    },
  },
  methods: {
    saveInventory(val) {
      this.InventoryReceiptList = val;
    },
    // 多选处理
    changeCheckbox(val) {
      if (val.name === "工序的自动报告") {
        this.form.autoReport = val.value;
      }
      if (val.name === "简化物料检查") {
        this.form.simplifyMaterials = val.value;
      }
    },
    handleUpdate() {
      this.subdisabled = true;
    },
    // 打开弹框--后面还需要监听扫码枪扫码结果，赋值给报工单号字段，然后打开弹框选择订单号等操作
    open() {
      this.$refs.modalBg.open();
    },
    // 弹框保存
    confirm() {
      console.log("保存", this.form.taskNo);
    },
    // 选择订单号
    openList() {
      if (this.form.taskNo === "") {
        uni.showToast({
          title: "请先扫描或输入报工单号",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/product/report/orderList",
      });
    },
    // 存订单号
    setNo(val) {
      this.form.moOn = val.moNo;
    },
    // 回显扫码的信息-报工单
    saveForm(val) {
      console.log("回显的数据", val);
      this.form = {
        id: val.id,
        work: val.work,
        taskNo: val.taskNo,
        name: val.name,
        moOn: val.moOn,
        partNo: val.partNo,
        partName: val.partName,
        qtyrequired: val.qtyrequired,
        Jianqtyfinished: val.qtyrequired - val.qtyfinished,
        proposedLocation: val.proposedLocation,
        productType: "dep",
        receive: "mo", // 复选框组的值
        materialcost: val.materialcost,
        autoReport: false,
        simplifyMaterials: false,
      };
      if (this.form.materialcost == "倒冲") {
        this.checkboxList[1].disabled = true;
      }
    },
  },
};
</script>

<style lang="scss">
   @import "index.scss";
  </style>
@import "index.scss";
</style>