报工功能点逻辑编写/样式调整

yyb

7 天以前 2a8cdfd4f464d737dda6e0a9bb43c83109d926a3

 pages/product/report/index.vue

@@ -1,246 +1,303 @@
<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="下机报工">下机报工</u-radio>
          <u-radio name="未下机报工">未下机报工</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="接收零件" prop="value10">
        <u-radio-group v-model="form.value10">
          <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.value"
            @change="changeCheckbox">
            {{ item.name }}
          </u-checkbox>
        </u-checkbox-group>
      </u-form-item>
      <u-form-item label="库存接收" :border-bottom="false" prop="value12"></u-form-item>
    </u-form>
    <!-- 填写报工单 -->
    <modalBg ref="modalBg" :confirm="confirm">
      <u-field v-model="form.value1" label="报工单号" placeholder="请输入" :border-bottom="false">
      </u-field>
    </modalBg>
    <saveForm ref="saveForm" />
    <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="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>
</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
        },
        {
          name: '工序的自动报告',
          value: false
        },
        {
          name: '简化物料检查',
          value: false
        }
      ],
      form: {
        taskNo: '',
        name: '',
        moOn: '',
        partNo: '',
        partName: '',
        value6: '',
        value7: '',
        value8: '',
        value9: '下机报工',
        value10: '车间订单',
        value11: [], // 复选框组的值
        value12: ''
      },
      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,
    }
  },
  // 点击提交按钮的事件处理函数
  onNavigationBarButtonTap() {
    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
    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);
        }
      }
    })
  },
  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.value1 === '') {
        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
    }
  }
}
   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;
            }
         },
      },
   };
</script>

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