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>
    <div style="height: 480px; overflow-y: auto">
      <el-tabs type="border-card" :active-name="activeName">
        <el-tab-pane label="调整工艺路线" name="process">
          <el-container>
            <el-aside>
              <el-card style="max-width: 480px">
                <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="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-card>
            </el-aside>
            <el-main><div ref="graphContainer"></div></el-main>
            <!-- <el-aside
              ><el-card style="max-width: 480px">
                <template #header>
                  <div class="card-header">
                    <span>可选工序</span>
                  </div>
                </template>
                <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
                <template #footer>Footer content</template>
              </el-card></el-aside
            > -->
          </el-container>
        </el-tab-pane>
        <el-tab-pane label="调整临时BOM" name="boms">
          <TableForm
            ref="tableProcess"
            :table-data="tableDataProcess"
            :table-fields="tableColumnsProcess"
            :loading="loading"
            @handleAddTable="handleAddTable(tableDataProcess)"
            @handle-delete-table="handleDeleteTable(item, index,tableDataProcess)"
          />
        </el-tab-pane>

        <el-tab-pane label="调整可用设备" name="device"
          ><TableForm
            ref="tableProcess"
            :table-data="tableDataProcess"
            :table-fields="tableColumnsProcess"
            :loading="loading"
            @handleAddTable="handleAddTable(tableDataProcess)"
            @handle-delete-table="handleDeleteTable(item, index,tableDataProcess)"
        /></el-tab-pane>
        <el-tab-pane label="调整班组人员" name="worker"
          ><TableForm
            ref="tableProcess"
            :table-data="tableDataProcess"
            :table-fields="tableColumnsProcess"
            :loading="loading"
            @handleAddTable="handleAddTable(tableDataProcess)"
            @handle-delete-table="handleDeleteTable(item, index,tableDataProcess)"
        /></el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">发布计划</el-button>
    </template>
  </Dialog>
  <!-- <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" /> -->
</template>

<script lang="ts" setup>
defineOptions({ name: 'sechledDetail' })
//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 { 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()
const tableDataProcess = ref([
  {
    type: '',
    value: ''
  }
])
const tableColumnsProcess = ref([
  {
    label: '结束时间',
    field: 'endTime',
    sort: 'custom',
    isReadonly: true,
    form: {
      component: 'TimePicker',
      componentProps: {
        type: 'time',
        dateFormat: 'HH:mm'
      }
    }
  },
  {
    label: '生产模式',
    field: 'taskMode',
    width: '80px',
    sort: 'custom',
    dictType: 'mes_task_mode',
    dictClass: 'string',
    form: {
      component: 'Select',
      value: 'ASSIGN'
    }
  }
])

// 添加数据
const handleAddTable = (name:any) => {
  message.success('添加成功')
  let tableFormKeys = {
    type: '',
    value: ''
  }
  name.push(JSON.parse(JSON.stringify(tableFormKeys)))
}
// 删除明细
const handleDeleteTable = (item, index,name) => {
  console.log(name)
  name.splice(index, 1)
}

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 + '%'
  //console.log(props.allSchemas)
  //console.log(row)
  if (titleName) {
    dialogTitle.value = t('action.' + titleName)
  } else {
    dialogTitle.value = t('action.' + type)
  }
  nextTick(() => {
    graph.value = createGraph(graphContainer.value as HTMLElement, false, dialogWidth.value-200, 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
      })
    }
  }
}
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>