zhangwencui
6 天以前 f35825c1922149df154e3913d6dfebee57ee8cee
src/views/mes/workbench/components/tabs/ReturnIssueTab.vue
@@ -3,7 +3,7 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesWmReturnIssueApi } from '#/api/mes/wm/returnissue';
import { h, markRaw, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue';
import { computed, h, markRaw, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue';
import {
  DICT_TYPE,
@@ -14,9 +14,10 @@
import { IconifyIcon } from '@vben/icons';
import { getDictOptions } from '@vben/hooks';
import { Button, Divider, message, Popconfirm, Tag } from 'ant-design-vue';
import { Button, Divider, Empty, message, Popconfirm, Tag } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import {
@@ -29,7 +30,8 @@
} from '#/api/mes/wm/returnissue';
import { MdWorkstationSelect } from '#/views/mes/md/workstation/components';
import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components';
import { $t } from '#/locales';
import ReturnIssueFormModal from './ReturnIssueFormModal.vue';
defineOptions({ name: 'WorkbenchReturnIssueTab' });
@@ -38,6 +40,14 @@
  workstationId?: number;
  /** 当前工作站名称 */
  workstationName?: string;
  /** 当前选中的任务 ID */
  taskId?: number;
  /** 当前选中的任务编码 */
  taskCode?: string;
  /** 当前选中的任务名称 */
  taskName?: string;
  /** 当前选中的任务关联工单 ID */
  workOrderId?: number;
}>();
// --- 表单状态 ---
@@ -88,19 +98,29 @@
      rules: 'required',
    },
    {
      fieldName: 'taskId',
      label: '生产任务',
      component: 'Input',
      componentProps: {
        placeholder: '从选中任务自动带入',
        disabled: true,
      },
      rules: 'required',
    },
    {
      fieldName: 'workOrderId',
      label: '生产订单',
      component: markRaw(ProWorkOrderSelect),
      componentProps: {
        status: MesProWorkOrderStatusEnum.CONFIRMED,
        disabled: true,
      },
      rules: 'selectRequired',
    },
    {
      fieldName: 'workstationId',
      label: '工作站',
      component: markRaw(MdWorkstationSelect),
      componentProps: { placeholder: '请选择工作站' },
      componentProps: { placeholder: '从选中任务自动带入', disabled: true },
    },
    {
      fieldName: 'returnDate',
@@ -140,6 +160,13 @@
  isCreating.value = true;
  editingId.value = undefined;
  await formApi.resetForm();
  // 预填任务信息
  if (props.taskId) {
    await formApi.setFieldValue('taskId', props.taskId);
  }
  if (props.workOrderId) {
    await formApi.setFieldValue('workOrderId', props.workOrderId);
  }
  if (props.workstationId) {
    await formApi.setFieldValue('workstationId', props.workstationId);
  }
@@ -173,6 +200,11 @@
  isCreating.value = false;
  editingId.value = undefined;
  formApi.resetForm();
}
/** 编辑退料单:打开编辑弹窗(仅草稿状态可编辑) */
function handleEditRow(row: MesWmReturnIssueApi.ReturnIssue) {
  editFormModalApi.setData({ id: row.id }).open();
}
/** 提交 */
@@ -209,6 +241,12 @@
      props: { type: DICT_TYPE.MES_WM_RETURN_ISSUE_TYPE },
    },
  },
  {
    field: 'taskCode',
    title: '生产任务',
    minWidth: 130,
    formatter: ({ row }) => row.taskCode || props.taskCode || '',
  },
  { field: 'workOrderCode', title: '生产订单', minWidth: 130 },
  {
    field: 'returnDate',
@@ -225,7 +263,7 @@
      props: { type: DICT_TYPE.MES_WM_RETURN_ISSUE_STATUS },
    },
  },
  { title: '操作', width: 200, fixed: 'right', slots: { default: 'actions' } },
  { title: '操作', width: 260, fixed: 'right', slots: { default: 'actions' } },
];
const gridHeight = ref(300);
@@ -243,7 +281,7 @@
          return await getReturnIssuePage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            workstationId: props.workstationId,
            taskId: props.taskId,
            ...formValues,
          });
        },
@@ -280,15 +318,37 @@
  resizeObserver = null;
});
// 工作站变化时刷新列表
// 任务或工作站变化时刷新列表
watch(
  () => props.workstationId,
  () => [props.taskId, props.workstationId],
  () => gridApi.query(),
);
/** 是否已选中工作站和任务,未选中时不展示表格 */
const isReady = computed(() => !!props.taskId && !!props.workstationId);
/** 编辑弹窗 */
const [EditFormModal, editFormModalApi] = useVbenModal({
  connectedComponent: ReturnIssueFormModal,
  destroyOnClose: true,
});
/** 编辑弹窗操作成功后刷新列表 */
function onEditSuccess() {
  gridApi.query();
}
</script>
<template>
  <div class="issue-tab">
    <!-- 未选中工作站或任务时显示提示 -->
    <div v-if="!isReady" class="issue-tab__empty">
      <Empty
        :image="Empty.PRESENTED_IMAGE_SIMPLE"
        description="请先在左侧选择工作站和任务"
      />
    </div>
    <template v-else>
    <!-- 顶部:表单 / 新建按钮 -->
    <div class="issue-tab__header">
      <div class="issue-tab__header-left">
@@ -324,6 +384,14 @@
    <div ref="listRef" class="issue-tab__list">
      <Grid table-title="退料记录">
        <template #actions="{ row }">
            <Button
              v-if="row.status === MesWmReturnIssueStatusEnum.PREPARE"
              type="link"
              size="small"
              @click="handleEditRow(row)"
            >
              编辑
            </Button>
          <Popconfirm
            v-if="row.status === MesWmReturnIssueStatusEnum.PREPARE"
            title="确认提交?提交后不能修改"
@@ -352,6 +420,11 @@
        </template>
      </Grid>
    </div>
    </template>
    <!-- 编辑弹窗 -->
    <EditFormModal @success="onEditSuccess" />
  </div>
</template>
@@ -406,4 +479,11 @@
  min-height: 0;
  overflow: hidden;
}
.issue-tab__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>