HIA24016N_PipeLineDemo.git

import { defineComponent, onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import styles from './PipeAccessoryPick.module.scss'
 
import { ConfirmBox } from '@/components/ConfirmBox/ConfirmBox' 
import {
  ElInput,
  ElForm,
  ElFormItem,
  ElButton,
  ElSelect,
  ElOption,
  ElMessage,
  ElCol,
} from 'element-plus'
import {
  getPlaceNoForStockList,
  getMaterialModelList,
  instock,
  getPickRet,
  pick
} from '@/widgets/PipeAccessoryPick/Models/Service/PipeAccessoryPick'
import { Message } from '@element-plus/icons-vue/dist/types'
 
export default defineComponent({
  name: 'PipeAccessoryPick',
  setup() {
    // 查询表单数据
const queryForm = ref({
  pipeSpecCode: '',
  continerNo:'',
  placeNo:'',
  processRouteNumber: '',
  taskCode: '',
  length: '',
  projectNumber: '',
  shipNumber: '',
  material: '',
  outerDiameter: '',
  thickness: '',
  plannedStartTime: '',
  plannedEndTime: '',
  workstationCode: '',
  processName: '',
  equipmentCode: ''
})
 
    // 数据源
    const modelOptions = ref<Array<{ value: string; label: string }>>([])
    const placeNoOptions = ref<Array<{ value: string; label: string }>>([])
 
    onMounted(() => {
      // 组件挂载后获取型号列表和库位号列表
      // getModelList()
      // getPlaceNoList()
    })
 
    // 组盘操作
    const handlePalletize = () => {
      console.log('组盘操作', queryForm.value)
      // 这里添加组盘逻辑
    }
 
    // 组盘入库操作
    const handlePalletizeStorage = () => {
      console.log('组盘入库操作', queryForm.value)
      instock(queryForm.value), resetQueryForm()
      ElMessage.success({
        message: '组盘入库成功',
        type: 'success',
      })
      // 这里添加组盘入库逻辑
    }
 
    const resetQueryForm = () => {
      queryForm.value.materialModel = ''
      queryForm.value.placeNo = ''
      queryForm.value.materialBatch = ''
      queryForm.value.stockNumber = ''
    }
 
    const getModelList = async () => {
      const models = await getMaterialModelList()
      modelOptions.value = models.map((item: string) => ({
        value: item.materialModel,
        label: item.materialModelDesc,
      }))
    }
 
    const getPlaceNoList = async () => {
      const placeNos = await getPlaceNoForStockList(2)
      console.log('库位号列表:', placeNos)
      placeNoOptions.value = placeNos.map((item: string) => ({
        value: item.placeNo,
        label: item.placeNoDesc,
      }))
    }
    const handleChange =async (value) => {
      console.log('输入内容确认:', value); // 失去焦点或回车时触发
      if(value==''){
        initQueryForm();
        return;
      }
      // 在此处添加业务逻辑（如校验、提交等）
      const param={
        pipeSpecCode:value,
        pipeSpecCode_FilterMode:2,//精准查询
        processName:'切割工序',
        processName_FilterMode:2,//精准查询
      }
      const workPlan = await getPickRet(param);
      console.log('返回:'+workPlan);
      if(workPlan.code!="200"){
        ElMessage.error('没有找到数据'); 
        initQueryForm();
      }else{
        queryForm.value=workPlan.data.workPlan;
 
        queryForm.value.placeNo=workPlan.data.placeNo;
        queryForm.value.continerNo=workPlan.data.continerNo;
      }
    };
 
    const initQueryForm=()=>{
      queryForm.value ={ pipeSpecCode: '',
        continerNo:'',
        placeNo:'',
        processRouteNumber: '',
        taskCode: '',
        length: '',
        projectNumber: '',
        shipNumber: '',
        material: '',
        outerDiameter: '',
        thickness: '',
        plannedStartTime: '',
        plannedEndTime: '',
        workstationCode: '',
        processName: '',
        equipmentCode: ''}
    }
 
    // 分拣事件处理
    const startWork = () => {
      console.log('执行开工操作');
      if(queryForm.value.pipeSpecCode==''){
        ElMessage.error('请输入管段编码'); 
        return
      }
      if(queryForm.value.continerNo==''){
        ElMessage.error('请输入托盘号'); 
        return
      }
      ConfirmBox( 
                `确定要将管段编码${queryForm.value.pipeSpecCode}分拣吗` 
              ).then(async () => { 
                //您的业务逻辑
                const param={
                  pipeSpecCode:queryForm.value.pipeSpecCode,
                  continerNo:queryForm.value.continerNo,
                  placeNo:queryForm.value.placeNo
                };
                
                const ret = await pick(param);
      console.log('返回:'+ret);
      
                if(ret.code=="200"){
                  ElMessage.success('分拣成功'); 
                }else{
                  ElMessage.error('分拣失败:'+ret.message); 
                }
              }) 
    } 
    // // 完工事件处理
    // const finishWork = () => {
    //   console.log('执行开工操作');
    //   if(queryForm.value.pipeSpecCode==''){
    //     ElMessage.error('请输入管段编码'); 
    //     return
    //   }
    //   ConfirmBox( 
    //             `确定要将管段编码${queryForm.value.pipeSpecCode}完工吗` 
    //           ).then(async () => { 
    //             //您的业务逻辑
    //             const param={
    //               pipeSpecCode:queryForm.value.pipeSpecCode,
    //               processName:queryForm.value.processName,
 
    //             };
    //             const ret = await finishProduction(param);
    //   console.log('返回:'+ret);
    //             if(ret.code="200"){
    //               ElMessage.success('完工成功'); 
    //             }else{
    //               ElMessage.error('完工失败:'+ret.message); 
    //             }
    //           }) 
    // }
    const tableData = ref([
      { sequence: 1, flangeA: 'RF-200-1.6MPa', flangeB: 'WN-200-1.6MPa' },
      { sequence: 2, flangeA: 'WN-250-2.5MPa', flangeB: 'SO-250-2.5MPa' },
      { sequence: 3, flangeA: 'PL-300-1.0MPa', flangeB: 'RF-300-1.0MPa' },
      { sequence: 4, flangeA: 'SO-150-2.0MPa', flangeB: 'WN-150-2.0MPa' },
      { sequence: 5, flangeA: 'RF-400-1.6MPa', flangeB: 'PL-400-1.6MPa' },
      { sequence: 6, flangeA: 'WN-200-4.0MPa', flangeB: 'SO-200-4.0MPa' },
      { sequence: 7, flangeA: 'SO-300-1.6MPa', flangeB: 'RF-300-1.6MPa' },
      { sequence: 8, flangeA: 'PL-250-1.0MPa', flangeB: 'WN-250-1.0MPa' },
      { sequence: 9, flangeA: 'RF-150-2.5MPa', flangeB: 'SO-150-2.5MPa' },
      { sequence: 10, flangeA: 'WN-400-2.0MPa', flangeB: 'PL-400-2.0MPa' }
    ]);
 
 
    return () => {
      return (
        <div
          class={styles.PipeAccessoryPickContent}
          style="overflow-y: auto !important;  height: 100%;"
        >
             <ElFormItem label="管段编码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.pipeSpecCode}
                    clearable
                    class={styles.formInput}
                    onInput={handleChange}
                  />
                </ElFormItem>
                <ElFormItem label="托盘号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.continerNo}
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="库位号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.placeNo}
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
          <div class={styles.actionButtons}>
            <ElButton type="warning" onClick={startWork}>分拣</ElButton>
            {/* <ElButton type="warning" onClick={finishWork}>完工</ElButton> */}
            {/* <ElButton type="warning">暂停</ElButton>
            <ElButton type="warning">自动</ElButton>
            <ElButton type="warning">质检</ElButton> */}
          </div>
 
          <h2 class={styles.blockTitle}>当前任务</h2>
          <ElForm label-position="left" >
             
                <ElFormItem label="物料流向&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.processRouteNumber}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="任务编号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.taskCode}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="管段长度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.length}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="项目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号">
                  <ElInput
                    v-model={queryForm.value.projectNumber}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="船&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号">
                  <ElInput
                    v-model={queryForm.value.shipNumber}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="材&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;质">
                  <ElInput
                    v-model={queryForm.value.material}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="外&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;径">
                  <ElInput
                    v-model={queryForm.value.outerDiameter}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="壁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;厚">
                  <ElInput
                    v-model={queryForm.value.thickness}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="计划开始时间">
                  <ElInput
                    v-model={queryForm.value.plannedStartTime}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="计划完成时间">
                  <ElInput
                    v-model={queryForm.value.plannedEndTime}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
              </ElForm>
 
              <h2 class={styles.blockTitle}>当前工位/设备信息</h2>
          <ElForm label-position="left" >
                <ElFormItem label="工位代码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.workstationCode}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="工序名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.processName}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                <ElFormItem label="设备代码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <ElInput
                    v-model={queryForm.value.equipmentCode}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem>
                {/* <ElFormItem label="设备状态">
                  <ElInput
                    v-model={queryForm.value.materialBatch}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem> */}
                {/* <ElFormItem label="操作人">
                  <ElInput
                    v-model={queryForm.value.materialBatch}
                    disabled
                    clearable
                    class={styles.formInput}
                  />
                </ElFormItem> */}
              </ElForm>
 
          {/* <div class="info-block">
            <h2 class="block-title">工艺信息</h2>
            <el-table stripe  v-model:dataSource={tableData}>
              <el-table-column prop="sequence" label="序"></el-table-column>
              <el-table-column prop="flangeA" label="法兰A"></el-table-column>
              <el-table-column prop="flangeB" label="法兰B"></el-table-column>
            </el-table>
          </div> */}
        </div>
      )
    }
  },
})