HIA24016N_PipeLineDemo.git

import { defineComponent, onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import styles from './PipeAccessoryAssembly.module.scss'
import { usePipeAccessoryAssembly } from '../../../Controllers/PipeAccessoryAssembly'
import pipeImage from '@/images/pipe-assembly-drawing-example.png'
import { ConfirmBox } from '@/components/ConfirmBox/ConfirmBox'
import { columns } from './Config'
import TdButton from '@/components/TdButton/TdButton'
import BaseTable from '@/components/Table/Table'
import dayjs from 'dayjs'
import {
  ElInput,
  ElForm,
  ElFormItem,
  ElButton,
  ElSelect,
  ElOption,
  ElMessage,
  ElCol,
} from 'element-plus'
import {
  getPlaceNoForStockList,
  getMaterialModelList,
  instock,
  findSingleWorkPlanByFilter,
  startProduction,
  finishProduction,
} from '@/widgets/PipeAccessoryAssembly/Models/Service/PipeAccessoryAssembly'
import { Message } from '@element-plus/icons-vue/dist/types'
 
interface RenderTableType {
  url?: string
  dataSource: Ref<any[]>
  isDrag?: boolean
  isChecked?: boolean
  isHidePagination?: boolean
  params?: Record<string, any>
  autoHeight?: boolean
}
 
export default defineComponent({
  name: 'PipeAccessoryAssembly',
  setup(props, ctx) {
    const {
      dataSource,
      contextMenu,
      dialogConfig,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
      sort,
      headers,
      onError,
      onSearch,
      onRowClick,
      // onConfirmWorkTask,
      onCheck,
      // onAddWorkTask,
      onAdvancedQuery,
      onExport,
      openDetail,
      onSuccess,
      onBeforeUpload,
      onSendFlangeCode,
      onFinishSendFlangeCode
    } = usePipeAccessoryAssembly(props, ctx)
 
    // 查询表单数据
    const queryForm = ref({
      pipeSpecCode: '',
      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 findSingleWorkPlanByFilter(param)
      console.log('返回:' + workPlan)
      if (workPlan == '') {
        ElMessage.error('没有找到数据')
        initQueryForm()
      } else {
        queryForm.value = workPlan
        refreshProcessRoute();
      }
    }
    const initQueryForm = () => {
      queryForm.value = {
        pipeSpecCode: '',
        processRouteNumber: '',
        taskCode: '',
        length: '',
        projectNumber: '',
        shipNumber: '',
        material: '',
        outerDiameter: '',
        thickness: '',
        plannedStartTime: '',
        plannedEndTime: '',
        workstationCode: '',
        processName: '',
        equipmentCode: '',
      }
 
      dataSource.value=[] //清空表格数据
    }
//您的业务逻辑
const paramForProcessRoute= {
  processName: '法兰冲码工序',
  ProcessName_FilterMode:2,//精准查询
  pipeSpecCode: '',
  pipeSpecCode_FilterMode:2,//精准查询
}
 
let routeUrl=ref("");
    // 刷新工艺信息
    const refreshProcessRoute = () => {
      console.log('执行 刷新工艺信息')
      // if (queryForm.value.pipeSpecCode == '') {
      //   ElMessage.error('请输入管段编码')
      //   return
      // }
      routeUrl.value="/api/v1/PipeLineLems/workTask/page";
      paramForProcessRoute.pipeSpecCode = queryForm.value.pipeSpecCode
      tableRef.value.getList(paramForProcessRoute)  
    }
     // 下发法兰冲码
     const sendFlangeCode = () => {
      console.log('执行 下发法兰冲码')
      if (queryForm.value.pipeSpecCode == '') {
        ElMessage.error('请输入管段编码')
        return
      }
       onSendFlangeCode();
    }
     // 完工法兰冲码
     const finishSendFlangeCode = () => {
      console.log('执行 完工法兰冲码')
      if (queryForm.value.pipeSpecCode == '') {
        ElMessage.error('请输入管段编码')
        return
      }
      onFinishSendFlangeCode();
    }
    // 开工事件处理
    const startWork = () => {
      console.log('执行开工操作')
      if (queryForm.value.pipeSpecCode == '') {
        ElMessage.error('请输入管段编码')
        return
      }
      ConfirmBox(`确定要将管段编码${queryForm.value.pipeSpecCode}开工吗`).then(
        async () => {
          //您的业务逻辑
          const param = {
            taskCode: queryForm.value.taskCode,
          }
          const ret = await startProduction(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)
          }
        }
      )
    }
 
    /**
     * @returns 表格
     */
    const RenderBaseTable = (props: RenderTableType) => {
      const {
        url,
        dataSource,
        isDrag,
        isChecked,
        isHidePagination,
        params,
        autoHeight,
        maxHeight,
      } = props
 
      return (
        <div
          class={{
            [styles.workTaskList]: true,
          }}
        >
          <BaseTable
            ref={tableRef}
            url={url}
            sortUrlTpl="/api/v1/PipeLineLems/workTask/{id}/adjustsort/{sort}"
            v-model:dataSource={dataSource.value}
            columns={columns}
            contextMenu={contextMenu}
            params={params}
            isDrag={isDrag}
            isChecked={isChecked}
            autoHeight={autoHeight}
            maxHeight={maxHeight}
            onCheck={onCheck}
            onRowClick={onRowClick}
            isHidePagination={isHidePagination}
            pageSize={20}
            v-slots={{
              plannedStartTime: ({ row }: any) => {
                return (
                  <div>
                    {row.plannedStartTime != null
                      ? dayjs(row.plannedStartTime).format(
                          'YYYY-MM-DD HH:mm:ss'
                        )
                      : '-'}
                  </div>
                )
              },
              plannedEndTime: ({ row }: any) => {
                return (
                  <div>
                    {row.plannedEndTime != null
                      ? dayjs(row.plannedEndTime).format('YYYY-MM-DD HH:mm:ss')
                      : '-'}
                  </div>
                )
              },
              creationTime: ({ row }: any) => {
                return (
                  <div>
                    {row.creationTime != null
                      ? dayjs(row.creationTime).format('YYYY-MM-DD HH:mm:ss')
                      : '-'}
                  </div>
                )
              },
              lastModificationTime: ({ row }: any) => {
                return (
                  <div>
                    {row.lastModificationTime != null
                      ? dayjs(row.lastModificationTime).format(
                          'YYYY-MM-DD HH:mm:ss'
                        )
                      : '-'}
                  </div>
                )
              },
              isDeleted: ({ row }: any) => {
                return (
                  <div>
                    {row.isDeleted != null
                      ? row.isDeleted
                        ? '是'
                        : '否'
                      : '-'}
                  </div>
                )
              },
              deletionTime: ({ row }: any) => {
                return (
                  <div>
                    {row.deletionTime != null
                      ? dayjs(row.deletionTime).format('YYYY-MM-DD HH:mm:ss')
                      : '-'}
                  </div>
                )
              },
              isDisabled: ({ row }: any) => {
                return (
                  <div>
                    {row.isDisabled != null
                      ? row.isDisabled
                        ? '是'
                        : '否'
                      : '-'}
                  </div>
                )
              },
              name: ({ row }: any) => {
                return row?.name ? (
                  <TdButton
                    onClick={() => openDetail(row)}
                    text={<span style="color:#5a84ff">详情</span>}
                    icon="scale"
                    tip={row?.name}
                    hover
                  >
                    {row?.name}
                  </TdButton>
                ) : (
                  '-'
                )
              },
            }}
          ></BaseTable>
        </div>
      )
    }
 
    return () => {
      return (
        <div
          class={styles.PipeAccessoryAssemblyContent}
          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>
          <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  :data={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 class="info-block">
            <h2 class="block-title">工艺信息</h2>
            <div class={styles.actionButtons} style="margin-bottom:5px;">
              <ElButton type="warning" onClick={refreshProcessRoute}>
                刷新
              </ElButton>
              <ElButton type="warning" onClick={sendFlangeCode}>
                下发法兰冲码
              </ElButton>
              <ElButton type="warning" onClick={finishSendFlangeCode}>
                完工法兰冲码
              </ElButton>
            </div>
            <RenderBaseTable
              url={routeUrl.value}
              dataSource={dataSource}
              isChecked={true}
              isDrag={true}
              autoHeight={false}
              maxHeight="500px"
              params={paramForProcessRoute}
            />
          </div>
          <h2 class="block-title">图纸</h2>
          <img
            src={pipeImage}
            alt="设备图片"
            style="height:1250px;"
            class="equipment-image"
          ></img>
        </div>
      )
    }
  },
})