部分功能修改

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,78 +318,113 @@
  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 class="issue-tab__header">
      <div class="issue-tab__header-left">
        <IconifyIcon icon="lucide:rotate-ccw" class="issue-tab__icon" />
        <span class="issue-tab__title">退料单</span>
        <Tag v-if="isCreating" color="orange">新建中</Tag>
    <!-- 未选中工作站或任务时显示提示 -->
    <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">
          <IconifyIcon icon="lucide:rotate-ccw" class="issue-tab__icon" />
          <span class="issue-tab__title">退料单</span>
          <Tag v-if="isCreating" color="orange">新建中</Tag>
        </div>
        <div class="issue-tab__header-actions">
          <template v-if="!isCreating">
            <Button type="primary" size="small" @click="handleCreate">
              <template #icon><IconifyIcon icon="lucide:plus" /></template>
              新建退料单
            </Button>
          </template>
          <template v-else>
            <Button type="primary" size="small" @click="handleSave">
              <template #icon><IconifyIcon icon="lucide:save" /></template>
              保存
            </Button>
            <Button size="small" @click="handleCancelEdit">取消</Button>
          </template>
        </div>
      </div>
      <div class="issue-tab__header-actions">
        <template v-if="!isCreating">
          <Button type="primary" size="small" @click="handleCreate">
            <template #icon><IconifyIcon icon="lucide:plus" /></template>
            新建退料单
          </Button>
        </template>
        <template v-else>
          <Button type="primary" size="small" @click="handleSave">
            <template #icon><IconifyIcon icon="lucide:save" /></template>
            保存
          </Button>
          <Button size="small" @click="handleCancelEdit">取消</Button>
        </template>

      <!-- 表单区域（仅新建时展示） -->
      <div v-if="isCreating" class="issue-tab__form">
        <Form />
      </div>
    </div>

    <!-- 表单区域（仅新建时展示） -->
    <div v-if="isCreating" class="issue-tab__form">
      <Form />
    </div>
      <Divider style="margin: 12px 0" />

    <Divider style="margin: 12px 0" />
      <!-- 底部：退料记录列表 -->
      <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="确认提交？提交后不能修改"
              @confirm="handleSubmitRow(row)"
            >
              <Button type="link" size="small">提交</Button>
            </Popconfirm>
            <Popconfirm
              v-if="row.status === MesWmReturnIssueStatusEnum.PREPARE"
              :title="`确认删除 ${row.code}？`"
              @confirm="handleDeleteRow(row)"
            >
              <Button type="link" size="small" danger>删除</Button>
            </Popconfirm>
            <Popconfirm
              v-if="
                row.status === MesWmReturnIssueStatusEnum.CONFIRMED ||
                row.status === MesWmReturnIssueStatusEnum.APPROVING ||
                row.status === MesWmReturnIssueStatusEnum.APPROVED
              "
              title="确认取消？取消后不可恢复"
              @confirm="handleCancelRow(row)"
            >
              <Button type="link" size="small" danger>取消</Button>
            </Popconfirm>
          </template>
        </Grid>
      </div>

    <!-- 底部：退料记录列表 -->
    <div ref="listRef" class="issue-tab__list">
      <Grid table-title="退料记录">
        <template #actions="{ row }">
          <Popconfirm
            v-if="row.status === MesWmReturnIssueStatusEnum.PREPARE"
            title="确认提交？提交后不能修改"
            @confirm="handleSubmitRow(row)"
          >
            <Button type="link" size="small">提交</Button>
          </Popconfirm>
          <Popconfirm
            v-if="row.status === MesWmReturnIssueStatusEnum.PREPARE"
            :title="`确认删除 ${row.code}？`"
            @confirm="handleDeleteRow(row)"
          >
            <Button type="link" size="small" danger>删除</Button>
          </Popconfirm>
          <Popconfirm
            v-if="
              row.status === MesWmReturnIssueStatusEnum.CONFIRMED ||
              row.status === MesWmReturnIssueStatusEnum.APPROVING ||
              row.status === MesWmReturnIssueStatusEnum.APPROVED
            "
            title="确认取消？取消后不可恢复"
            @confirm="handleCancelRow(row)"
          >
            <Button type="link" size="small" danger>取消</Button>
          </Popconfirm>
        </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>