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" style="margin-top: 5px;height: min-height:240px;">
        <el-tab-pane label="工艺信息" name="processInfo">
          <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="id" label="序号" align="center" />
            <el-table-column prop="srcMaterialCode" label="品番" align="center" />
            <el-table-column prop="srcMaterialModel" label="计量单位" align="center" />
            <el-table-column prop="srcMaterialCounts" label="数量" align="center"/>
            <el-table-column prop="processCode" 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('processInfo')
const props = defineProps({
  allSchemas: {
    type: Object,
    required: true,
    default: null
  }
})
const detailData = ref(props.allSchemas)

 const bomInfoSchemaData = ref( [{srcMaterialCode:'----',
 srcMaterialModel:'----',
 srcMaterialCounts:'----',
 processCode:'----',id:0}])

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
  processRouteInfoSchema.value={ processrouteInfo: { processrouteCode: '', processName: '', routeVersion: '' }, processrouteNodeDetailList: [] }
  bomInfoSchemaData.value = [{srcMaterialCode:'',
  srcMaterialModel:'',
  srcMaterialCounts:'',
  processCode:'',id:0}]
  
  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={planDayCode:row.planNoDay,productCode:row.productCode,planBatchCode:row.batchCode}
  //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>