sfms3.0-ui/src/views/mes/orderDay/components/orderDetail.vue

<template>
  <div>
    <el-drawer
      v-model="isShowDrawer"
      title="详情"
      direction="rtl"
      size="80%"
      v-loading="detailLoading"
    >
      <template #header>
        <div class="font-size-18px">
          {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
        </div>
      </template>
      <ContentWrap>
        <Descriptions
          :data="detailData"
          labelClassName="label-class-name"
          label-align="left"
          direction="vertical"
          :column="8"
          :schema="allSchemas.detailSchema"
          :columns="2"
          width="200px"
        />
      </ContentWrap>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="工艺路线信息" name="processRouteInfo">
          <div class="mt-20px">
            <el-space :size="10" spacer="|">
              <span>名称：<el-tag v-if="processRouteInfoSchema.processrouteInfo!=null">{{ processRouteInfoSchema.processrouteInfo.processName}} </el-tag></span>
              <span>编码：<el-tag v-if="processRouteInfoSchema.processrouteInfo!=null">{{ processRouteInfoSchema.processrouteInfo.processrouteCode}} </el-tag> </span>
              <span>版本：<el-tag v-if="processRouteInfoSchema.processrouteInfo!=null">{{ processRouteInfoSchema.processrouteInfo.routeVersion}} </el-tag> </span>
            </el-space>
            <el-divider />
            <el-table
              ref="tableRoute"
              :data="nodeData"
              :columns="nodeColumns"
              border
              stripe="true"
              style="width: 100%"
            >
            <el-table-column prop="nodeSort" label="序号"  align="center"/>
            <el-table-column prop="preCode" label="前置工序"  align="center">
              
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-tag 
                      >{{ scope.row.preNodeName }}</el-tag
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="processCode" label="当前工序"  align="center" >
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-tag
                      >{{ scope.row.nodeName }}</el-tag
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="nextCode" label="后置工序" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-tag
                      >{{ scope.row.nextNodeName }}</el-tag
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="BOM信息" name="bomInfo"
          ><div class="mt-20px">
            <el-table
              ref="tableRoute"
              :data="bomInfoSchemaData"
              style="width: 100%"
            >
            <el-table-column prop="productItemCode" label="父物料代码" align="center" />
            <el-table-column prop="componentItemCode" label="子物料代码" align="center" />
            <el-table-column prop="componentUom" label="子物料计量单位" align="center" />
            <el-table-column prop="componentQty" label="子物料数量" align="center"/>
            <el-table-column prop="version" label="版本" align="center" />
            </el-table> </div
        ></el-tab-pane>
        <el-tab-pane label="班组人员信息" name="workTeamInfo"
          ><div class="mt-20px">
            <el-table
              ref="tableRoute"
              :data="workTeamInfoSchema"
              style="width: 100%"
            >
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column prop="userName" label="人员工号" align="center" />
            <el-table-column prop="nickeName" label="显示名称" align="center" />
            <el-table-column prop="workGroup" label="所属班组" align="center" />
            <el-table-column prop="lineCode" label="所属产线" align="center" />
            <el-table-column prop="abliity" label="技能岗位" align="center" />
          </el-table> </div
        ></el-tab-pane>
        <el-tab-pane label="设备信息" name="deviceInfo"
          ><div class="mt-20px">
            <el-table
              ref="tableRoute"
              :data="deviceInfoSchema"
              style="width: 100%"
            >
            <el-table-column prop="productItemCode" label="设备编码" align="center" />
            <el-table-column prop="componentItemCode" label="设备名称" align="center" />
            <el-table-column prop="componentUom" label="所属车间" align="center" />
            <el-table-column prop="componentQty" label="所属产线" align="center"/>
            <el-table-column prop="status" label="设备状态" align="center" />
          </el-table> </div
        ></el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import * as OrderDayApi from '@/api/mes/orderDay'
defineOptions({ name: 'orderDetail' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const route = useRoute() // 路由信息
const routeName = ref()
routeName.value = route.name
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
const activeName = ref('processRouteInfo')
const props = defineProps({
  allSchemas: {
    type: Object,
    required: true,
    default: null
  }
})
const detailData = ref(props.allSchemas)

 const bomInfoSchemaData = ref( [{productItemCode:'----',
  componentItemCode:'----',
  componentUom:'----',
  componentQty:'----',
  version:'----'}])
const workTeamInfoSchema = ref( [] )
const deviceInfoSchema = ref([])
const processRouteInfoSchema = ref({
  processrouteInfo: { processrouteCode: '', processName: '', routeVersion: '' },
  processrouteNodeDetailList: []
})

const isShowDrawer = ref(false)
const detailLoading = ref(false)
const nodeColumns = ref([
  
  {
    label: '序号',
    field: 'nodeSort'
  },
  {
    label: '当前工序',
    field: 'processCode'
  },
  {
    label: '前置工序',
    field: 'preCode'
  },
  {
    label: '后置工序',
    field: 'nextCode'
  }
])
const nodeData = ref([{}])
// Tabs当前选择
const current = ref(0)
const handleClick = (item, index) => {
  current.value = index
  emit('changeTabs', item)
}

/** 打开弹窗 */
const formRef = ref()
const titleNameRef = ref()
const titleValueRef = ref()
const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
  titleNameRef.value = titleName
  titleValueRef.value = titleValue
  isShowDrawer.value = true
  if (row) {
    detailLoading.value = true
    try {
      detailData.value = row
      getDetailData(row)
    } finally {
      detailLoading.value = false
    }
  }
}
defineExpose({ openDetail, formRef }) // 提供 open 方法，用于打开弹窗
const getDetailData = async (row: any) => {
  processRouteInfoSchema.value = await OrderDayApi.getProcessroutesDetail(row.processrouteCode)
  let pam={code:row.standardBom.slice(0,row.standardBom.lastIndexOf('-')),version:row.standardBom.slice(row.standardBom.lastIndexOf('-')+1)}
  //console.log(pam)
  bomInfoSchemaData.value = await OrderDayApi.getPlanBom(pam)
  nodeData.value = processRouteInfoSchema.value.processrouteNodeDetailList
  
}
// 传递给父类
const emit = defineEmits([
  'searchTableSuccessDetail',
  'changeTabs',
  'selectChangeDetail',
  'detailOpenForm',
  'tableFormButton',
  'openImage',
  'onBlur',
  'detailBasicFormOnChange',
  'formFormDateChange'
])

//监视属性
watch()
</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}

::v-deep(.label-class-name) {
  color: #dedede;
}
</style>
<style scoped lang="scss"></style>