2024-05-08 增加计划详情的切换

src/views/mes/orderDay/components/scheduleDetail.vue

@@ -0,0 +1,318 @@
+<template>
+  <Dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    :width="dialogWidth"
+    :close-on-click-modal="false"
+    :vLoading="formLoading"
+  >
+    <ContentWrap>
+      <Descriptions
+        :data="detailData"
+        labelClassName="label-class-name"
+        label-align="left"
+        direction="vertical"
+        :column="8"
+        :schema="allSchemas.detailSchema"
+        :columns="2"
+        width="200px"
+      />
+    </ContentWrap>
+    <ContentWrap>
+      <el-container>
+        <el-aside width="320px">
+          <el-card>
+            <template #header>
+              <div class="card-header">
+                <span>工艺路线</span>
+              </div>
+            </template>
+            <el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%" >
+              <el-table-column prop="code" label="工序编码" />
+              <el-table-column prop="name" label="工序名称" />
+            </el-table>
+          </el-card>
+        </el-aside>
+        <el-main style="height: 480px; width: calc(100% - 980px);padding: 0px; margin:0px 20px">
+          <div ref="graphContainer"></div
+          ></el-main>
+        <el-aside width="640px">
+          <el-tag>工序编码：{{currentNode.id}} -工序名称:{{currentNode.name  }}</el-tag>
+          <el-tabs v-model="activeName" >
+            <el-tab-pane label="工序工位" name="workstation">
+              <el-table :data="workstationData" ref="tableWorkstations" style="width: 100%; height: 80%">
+                <el-table-column prop="stationName" label="工位名称" />
+                <el-table-column prop="processCode" label="工序编码" />
+              </el-table>
+
+            </el-tab-pane>
+            <el-tab-pane label="工序物料" name="materials">
+                <el-table :data="showMaterialsData" ref="tableMaterials" style="width: 100%; height: 80%">
+                <el-table-column prop="repMaterialCode" label="物料编码" />
+                <el-table-column prop="repMaterialCounts" label="物料数量" />
+                <el-table-column prop="repMaterialModel" label="物料单位" />
+                <el-table-column prop="sourceMaterialCounts" label="需求物料数">
+                  <template #default="scope">{{ getTotalcounts(scope.row.repMaterialCounts) }}</template>
+                </el-table-column>
+                <el-table-column prop="replaceFlag" label="是否替换" >
+                  <template #default="scope">
+                  <el-switch disabled
+                    v-model="scope.row.replaceFlag"
+                    active-color="#13ce66"
+                    inactive-color="#ff4949"
+                    active-text="是"
+                    inactive-text="否"
+                  />
+                  </template>
+                </el-table-column>
+              </el-table>
+              <el-pagination
+              small
+              hide-on-single-page="true"
+              layout="prev, pager, next"
+              :total="page.total"
+              :page-size="page.size"
+              :current-page="page.current"
+              @current-change="handleCurrentChangeM"
+              @prev-click="handlePrevClickM"
+              @next-click="handleNextClickM"
+            />
+            </el-tab-pane>
+            <el-tab-pane label="工序人员" name="workers">
+              
+              <el-table :data="workerData" ref="tableWorker" style="width: 100%; height: 233px;overflow: auto;">
+                <el-table-column prop="groupName" label="所属班组" />
+                <el-table-column prop="workerMonitor" label="班长" />
+                <el-table-column prop="workerCode" label="人员编码" />
+                <el-table-column prop="workerName" label="人员昵称" />
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="工序设备" name="equipments">
+              <el-table :data="equipmentData" ref="tableEquipment" style="width: 100%; height: 80%">
+                <el-table-column prop="equipmentCode" label="设备编码" />
+                <el-table-column prop="equipmentName" label="设备名称" />
+                <el-table-column prop="equipmentType" label="设备类型" />
+                <el-table-column prop="equipmentWorkstation" label="关联工位" />
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </el-aside>
+      </el-container>
+    </ContentWrap>
+    <template #footer>
+      <el-button @click="handleClose" >关闭</el-button>
+    </template>
+    
+  </Dialog>
+  
+</template>
+
+<script lang="ts" setup>
+
+import {
+  start_node,
+  end_node,
+  createGraph,
+  getNewNode
+} from '@/views/mes/processroute/components/graphbase.data'
+import * as orderDayconfigApi from '@/api/mes/orderDayConfig'
+import * as OrderDayApi from '@/api/mes/orderDay'
+import  {ProcessSearch} from '../../publicUtil/processSearch.data'
+import * as ProcessApi from '@/api/wms/process'
+import {  Graph } from '@antv/x6'
+import * as TeamApi from '@/api/wms/team'
+import {searchUser} from "@/views/wms/basicDataManage/orderManage/team/team.data";
+import {DeviceInfo, OrderDay} from "@/views/mes/orderDay/orderDay.data";
+const graphContainer = ref<HTMLElement | null>(null)
+const graph = ref<Graph>()
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const activeName = ref('workstation')
+const formLoading = ref(false)
+const dialogFormVisibleUser = ref(false)
+const processData = ref([])
+const processCode = ref('')
+//const isPublish=ref(false)
+const queryParams:orderDayconfigApi.OrderDayQueryParamVo=ref()
+const props = defineProps({
+  // 查询弹窗是否显示筛选按钮
+  isSearchFilterButtonHide: {
+    type: Boolean,
+    default: false
+  },
+  // 显示窗口宽度设置
+  basicFormWidth: {
+    type: String,
+    default: ''
+  },
+
+  allSchemas: {
+    type: Object,
+    required: true,
+    default: null
+  }
+})
+const workerData=ref([])
+const detailData = ref(props.allSchemas)
+const route = useRoute() // 路由信息
+const routeName = ref()
+routeName.value = route.name
+routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
+//const updateKey = ref(0)
+const dialogWidth = ref()
+const materialsData = ref()
+const equipmentData=ref([])
+const workstationData=ref([])
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const  graphJson =ref()
+const currentNode = ref({
+  name:'',
+  id:''
+})
+const showMaterialsData=ref() //物料信息分页展示
+const page=ref({
+  total:0,
+  current:1,
+  size:7
+})
+
+/** 打开弹窗 */
+const open =  ( row?: any, titleName?: any) => {
+  //console.log("scheduleDetail-182",row)
+  currentNode.value.name=''
+  currentNode.value.id=''
+  workerData.value=[]
+  equipmentData.value = []
+  materialsData.value = []
+  showMaterialsData.value=[]
+  page.value.total = 0
+  page.value.current = 1
+  workstationData.value = []
+  dialogVisible.value = true
+  detailData.value = row
+  dialogWidth.value = props.basicFormWidth + '%'
+  queryParams.planNoDay=row.planNoDay
+  queryParams.productCode=row.productCode
+  queryParams.workroomCode=row.workroomCode
+  queryParams.lineCode=row.lineCode
+  queryParams.processrouteCode=row.processrouteCode
+  queryParams.batchCode=row.batchCode
+  //获取配置的
+  if (titleName) {
+    dialogTitle.value =  titleName
+  } else {
+    dialogTitle.value =  type
+  }
+  nextTick?.(() => {
+    graph.value = createGraph(graphContainer.value as HTMLElement, true, 240, 320)
+    graph.value.on('node:click', ({ e, x, y, node, view }) => {
+      nodeClick(e, x, y, node, view)
+    })
+    getProcessroute()
+    getConfigProcessRouteNode()
+  })
+}
+const getTotalcounts=(a:any)=>{
+  return detailData.value.planCount*a
+}
+
+//获取工序的BOM
+const getProcessBom=async (code:any) => {
+  queryParams.processCode=code
+  let res = await orderDayconfigApi.getOrderDayBomByOrder(queryParams)
+  materialsData.value=res
+  if(materialsData.value.length>0){
+    page.value.total = materialsData.value.length
+    page.value.current = 1
+    showMaterialsData.value=materialsData.value.slice(0,page.value.size)
+  }
+}
+// const currentStartNode = ref({
+//   id:''
+// })
+//获取配置的工艺路线信息
+const getProcessroute = async () => {
+  let res = await orderDayconfigApi.getConfigProcessRoute(queryParams)
+  graphJson.value=JSON.parse(res.newGraphData)
+  graph.value?.fromJSON(graphJson.value.cells)
+  //首次打开弹窗，默认打开一个工序的数据
+  //currentStartNode.value = graphJson.value.cells[0]
+  currentNode.value = graphJson.value.cells[0]
+  // 手动触发点击事件
+  nodeClick('','','',currentNode.value,'')
+
+}
+//获取配置的工序信息
+const getConfigProcessRouteNode= async () => {
+  let res = await orderDayconfigApi.getConfigProcessRouteNode(queryParams)
+  processData.value=res
+}
+//获取配置的工序工位
+const getConfigProcessWorkstation= async (code:any) => {
+  queryParams.processCode=code
+  workstationData.value = await orderDayconfigApi.getConfigProcessWorkstation(queryParams)
+}
+//获取配置的工序人员
+const getConfigProcessWorker= async (code:any) => {
+  queryParams.processCode=code
+  workerData.value = await orderDayconfigApi.getConfigProcessWorker(queryParams)
+}
+//获取配置的工序设备
+const getConfigProcessEquipment= async (code:any) => {
+  queryParams.processCode=code
+  equipmentData.value = await orderDayconfigApi.getConfigProcessEquipment(queryParams)
+}
+const nodeClick = (e, x, y, node, view) => {
+  //console.log(node.id)
+  getProcessBom(node.id)
+  getConfigProcessWorkstation(node.id)
+  getConfigProcessWorker(node.id)
+  getConfigProcessEquipment(node.id)
+  processCode.value = node.id
+  currentNode.value.id=node.id
+  //console.log(node)
+  currentNode.value.name=node.attrs.title.text
+}
+
+
+const handleClose=()=>{
+  dialogVisible.value = false,
+  emit('close')
+}
+
+
+const handleCurrentChangeM=(value: number)=>{
+      let index=(value-1)*page.value.size
+      page.value.current=value
+      showMaterialsData.value=materialsData.value.slice(index,index+page.value.size)
+
+}
+const handlePrevClickM=(value: number)=>{
+      page.value.current=value-1
+      if(page.value.current==0) {
+        page.value.current=1
+      }
+
+}
+const handleNextClickM=(value: number)=>{
+     page.value.current=value+1
+     if(page.value.current>page.value.total/page.value.size) {
+        page.value.current=page.value.total/page.value.size -1
+      }
+}
+defineOptions({ name: 'SechledDetail' })
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+// 传递给父类
+const emit = defineEmits([
+  'close'
+])
+</script>
+<style lang="scss">
+.el-drawer__body {
+  background: #f5f5f5 !important;
+}
+::v-deep(.label-class-name) {
+  color: #dedede;
+}
+</style>

src/views/mes/orderDay/index.vue

@@ -62,6 +62,7 @@
 
   <!-- 详情 -->
   <orderDetail ref="detailRef" :all-schemas="OrderDay.allSchemas" />
+  <scheduleDetailR ref="sDetailRef"  :all-schemas="OrderDay.allSchemas" :basicFormWidth="75" @close="publishClosed" />
   <scheduleDetail ref="scheduleDetailRef"  :all-schemas="OrderDay.allSchemas" :basicFormWidth="75" @close="publishClosed" />
   <!-- 导入 -->
   <ImportForm
@@ -82,7 +83,9 @@ import TableHead from '@/components/TableHead/src/TableHead.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import orderDetail from './components/orderDetail.vue'
 import scheduleDetail from './components/schedule.vue'
-import { async } from '@antv/x6/lib/registry/marker/async'
+import scheduleDetailR from './components/scheduleDetail.vue'
+
+
 
 defineOptions({ name: 'MesOrderDay' })
 
@@ -292,13 +295,20 @@ const formsSuccess = async (formType,data) => {
 
 /** 详情操作 */
 const detailRef = ref()
+const sDetailRef=ref()
 const openDetail = (row: any, titleName: any, titleValue: any) => {
+  if(row.status=='1'){
     detailRef.value.openDetail(row, titleName, titleValue, 'basicOrderDay')
+  }else{
+    //console.log('orderDay-openDetail-303',row)
+    sDetailRef.value.open(row, titleName)
+  }
+  
 }
 /** 发布操作 */
 const scheduleDetailRef = ref()
-const openScheduledDetail = (row: any, titleName: any, titleValue: any) => {
+const openScheduledDetail = ( titleName: any,row: any, titleValue: any) => {
-  scheduleDetailRef.value.open(row, titleName, titleValue)
+  scheduleDetailRef.value.open( titleName, row,titleValue)
 }
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {

src/views/mes/orderDay/orderDay.data.ts

@@ -106,7 +106,7 @@ export const OrderDay = useCrudSchemas(reactive<CrudSchema[]>([
     isForm: false,
     isTable: true,
     isDetail:true,
-    isSearch: false,
+    isSearch: true,
     width: '80px',
     dictType: DICT_TYPE.MES_PLANDO_STATUS,
     dictClass: 'string',