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

<template>
  <Dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :width="dialogWidth"
    :close-on-click-modal="false"
  >
    <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="400px">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>工艺路线</span>
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  @click="opensearchTable"
                  style="float: right; padding: 3px 0"
                >添加工序</el-button>
              </div>
            </template>
            <el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%" @cell-dblclick="userAddNode">
              <el-table-column prop="code" label="工序编码"  />
              <el-table-column prop="name" label="工序名称" />
              <el-table-column prop="oper" label="" width="60">
                <template #default="scope">
                  <el-button size="mini" text @click="deleteNode(scope.row)" 
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-aside>
        <el-main style="height: 480px;width: calc(100% - 900px);padding: 0px; margin:0px 20px">
          <div ref="graphContainer" ></div
        ></el-main>
        <el-aside width="500px">
          <el-tabs  v-model="activeName">
             <el-tab-pane label="人员配置" name="process">
              <el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%">
              <el-table-column prop="name" label="人员">
                <template #default="scope">
                  <el-button size="mini" text @click="userAddNode(scope.row)" style="width: 100%"
                    >{{ scope.row.name }}[{{ scope.row.code }}]</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="code" label="工序编码" width="180" v-if="false" />
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="工作位置配置" name="ddddd">
              <el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%">
              <el-table-column prop="name" label="工作位置">
                <template #default="scope">
                  <el-button size="mini" text @click="userAddNode(scope.row)" style="width: 100%"
                    >{{ scope.row.name }}[{{ scope.row.code }}]</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="code" label="工序编码" width="180" v-if="false" />
            </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
        
      </el-container>
    </ContentWrap>
    <template #footer>
      <el-button @click="dialogVisible = false">发布计划</el-button>
    </template>
    <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess"  />
  </Dialog>
  <!-- <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" /> -->
</template>

<script lang="ts" setup>

//import { dateFormatter } from '@/utils/formatTime'
import {
  start_node,
  end_node,
  createGraph,
  getNewNode
} from '@/views/mes/processroute/components/graphbase.data'
import * as ProcessrouteApi from '@/api/mes/processroute'
import  {ProcessSearch} from './processSearch.data'
import * as ProcessApi from '@/api/wms/process'
import { SearchTable } from '@/components/SearchTable'
import { Graph } from '@antv/x6'
const graphContainer = ref<HTMLElement | null>(null)
const graph = ref<Graph>()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const activeName = ref('process')
const loading = ref(true)
const processData = ref([])
const props = defineProps({
  // 查询弹窗是否显示筛选按钮
  isSearchFilterButtonHide: {
    type: Boolean,
    default: false
  },
  // 显示窗口宽度设置
  basicFormWidth: {
    type: String,
    default: ''
  },

  allSchemas: {
    type: Object,
    required: true,
    default: null
  }
})
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()
// if (props.basicFormWidth) {
//   dialogWidth.value = props.basicFormWidth + '%'
// } else {
//   dialogWidth.value = props.isBusiness ? '60%' : '40%'
// }

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
let graphJson = {
  cells: [
    {
      position: {
        x: 40,
        y: 40
      },
      size: {
        width: 100,
        height: 40
      },
      attrs: {
        text: {
          text: 'Hello'
        },
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6
        }
      },
      visible: true,
      shape: 'rect',
      id: 'adbc20c6-96e4-4792-9e5b-42df6066cff0',
      zIndex: 1
    },
    {
      position: {
        x: 240,
        y: 180
      },
      size: {
        width: 100,
        height: 40
      },
      attrs: {
        text: {
          text: 'World'
        },
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6
        }
      },
      visible: true,
      shape: 'ellipse',
      id: '9b1f1e94-a01f-4902-bfae-4e6e81029261',
      zIndex: 2
    },
    {
      shape: 'edge',
      attrs: {
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1
        }
      },
      id: '8fd50f13-22ba-41ff-b54a-eb6d8553c3d7',
      source: {
        cell: 'adbc20c6-96e4-4792-9e5b-42df6066cff0'
      },
      target: {
        cell: '9b1f1e94-a01f-4902-bfae-4e6e81029261'
      },
      labels: [
        {
          attrs: {
            label: {
              text: 'X6'
            }
          }
        }
      ],
      zIndex: 3
    }
  ]
}
/** 打开弹窗 */
const open = async (type: string, row?: any, titleName?: any) => {
  dialogVisible.value = true
  detailData.value = row
  dialogWidth.value = props.basicFormWidth + '%'
  //获取配置的
  getProcessroute('001')
  if (titleName) {
    dialogTitle.value = t('action.' + titleName)
  } else {
    dialogTitle.value = t('action.' + 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)
    // })
    graph.value?.fromJSON(graphJson.cells)
  })
}

//添加节点
const userAddNode = (row) => {
  if (graph && graph.value != undefined) {
    let node_template = getNewNode(row.code, row.name, row.code)
    node_template.x = end_node.value.x - 100
    node_template.y = end_node.value.y + 100
    let noden = graph.value.addNode(node_template)
    if (graph.value.getNodes().length == 1) {
      let start = graph.value.addNode(start_node.value)
      let end = graph.value.addNode(end_node.value)
      graph.value.addEdge({
        id: 'startEdge',
        source: start.id, // 源节点 ID
        target: noden.id
      })
      graph.value.addEdge({
        id: 'endEdge',
        source: noden.id, // 源节点 ID
        target: end.id
      })
    }
  }
}
//获取配置的工艺路线信息
const getProcessroute = async (code: String) => {
  let res = await ProcessrouteApi.getProcesInfo(code)
  if (res.code == 200) {
    processData.value = res.data
  }
}
 
const searchTableRef = ref()
 
const opensearchTable = (
) => {
  console.log("opensearchTable")
  const _searchCondition = {}
  const _searchTableTitle = "工序查询"
  const _searchTableAllSchemas = ProcessSearch.allSchemas
  const _searchTablePage = ProcessApi.getProcessPage
  searchTableRef.value.open(
    _searchTableTitle,
    _searchTableAllSchemas,
    _searchTablePage,
    undefined,
    undefined,
    true,
    undefined,
    undefined,
    _searchCondition,
    false,
    true
  )
}

// 弹层确定返回所选数据
// val ： 弹层列表row 数据
const searchTableSuccess = (formField, searchField, val, type, row) => {
  //console.log("searchTableSuccess",val)
  if(val.length>0){
    val.forEach(item=>{
      if(processData.value.find(obj=>obj.code==item.code)==undefined){
      processData.value.push({code:item.code,name:item.name})}
    })
  }
  
 
  //emit('searchTableSuccess', formField, searchField, val, undefined, type, row)
}
const deleteNode=(row)=>{
    processData.value.splice(processData.value.indexOf(row),1)
    graph.value.removeNode(row.code)
  }

defineOptions({ name: 'sechledDetail' })
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}

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