feat(mes): 优化生产订单与排产任务列表显示，新增启停工及校验逻辑 1. 生产订单列表展示优化 (WorkOrder) - 新增「生产状态...

hsy

6 天以前 14817696a26eb142ccae03fa7c43050840e057f5

 src/views/mes/workbench/components/TaskListPanel.vue

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { PendingTask } from '../../types';


import { computed, ref } from 'vue';

@@ -15,7 +15,13 @@

const emit = defineEmits<{
  select: [task: PendingTask];
  refresh: [];
}>();

import { pauseTask, resumeTask } from '#/api/mes/pro/task';
import { Form, FormItem, Input, Modal, message, Button } from 'ant-design-vue';
import { confirm } from '@vben/common-ui';
import type {PendingTask} from "#/views/mes/workbench/types";

const searchKeyword = ref('');

@@ -41,6 +47,50 @@
  if (rate >= 100) return '#52c41a';
  if (rate >= 60) return '#1890ff';
  return '#faad14';
}

const pauseModalVisible = ref(false);
const pauseFormRef = ref();
const pauseFormState = ref({ id: 0, reason: '', remark: '' });
const pauseLoading = ref(false);

const pauseRules = {
  reason: [{ required: true, message: '请输入停工原因', trigger: 'blur' }],
};

function handlePause(item: PendingTask, event: Event) {
  event.stopPropagation();
  pauseFormState.value = { id: item.id!, reason: '', remark: '' };
  pauseModalVisible.value = true;
}

async function submitPause() {
  await pauseFormRef.value?.validate();
  pauseLoading.value = true;
  try {
    await pauseTask(pauseFormState.value);
    message.success('停工成功');
    pauseModalVisible.value = false;
    emit('refresh');
  } finally {
    pauseLoading.value = false;
  }
}

async function handleResume(item: PendingTask, event: Event) {
  event.stopPropagation();
  try {
    await confirm('确认要复工该任务吗？');
  } catch {
    return;
  }
  try {
    await resumeTask({ id: item.id! });
    message.success('复工成功');
    emit('refresh');
  } catch (error: any) {
    // Error is handled by request interceptor
  }
}
</script>

@@ -99,6 +149,27 @@
            >
              {{ item.feedbackRate ?? 0 }}%
            </span>
            <div class="task-card__actions">
              <Button
                v-if="item.status === 9"
                type="primary"
                size="small"
                class="task-card__action-btn resume-btn"
                @click="handleResume(item, $event)"
              >
                复工
              </Button>
              <Button
                v-else
                type="primary"
                danger
                size="small"
                class="task-card__action-btn pause-btn"
                @click="handlePause(item, $event)"
              >
                停工
              </Button>
            </div>
          </div>

          <div class="task-card__progress-row">
@@ -144,6 +215,42 @@
        </div>
      </div>
    </div>

    <Modal
      v-model:open="pauseModalVisible"
      title="生产任务停工"
      @ok="submitPause"
      :confirm-loading="pauseLoading"
      destroy-on-close
    >
      <Form
        ref="pauseFormRef"
        :model="pauseFormState"
        :rules="pauseRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        style="margin-top: 20px"
      >
        <FormItem label="停工原因" name="reason">
          <Input.TextArea
            v-model:value="pauseFormState.reason"
            placeholder="请输入停工原因（如：设备故障、缺料等）"
            :rows="3"
            :maxlength="100"
            show-count
          />
        </FormItem>
        <FormItem label="备注" name="remark">
          <Input.TextArea
            v-model:value="pauseFormState.remark"
            placeholder="请输入备注说明"
            :rows="2"
            :maxlength="200"
            show-count
          />
        </FormItem>
      </Form>
    </Modal>
  </section>
</template>

@@ -290,6 +397,32 @@
  font-variant-numeric: tabular-nums;
}

.task-card__actions {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.task-card__action-btn {
  font-size: 13px;
  border-radius: 4px;
}

.pause-btn {
  box-shadow: 0 2px 4px rgb(255 77 79 / 20%);
}

.resume-btn {
  background-color: #52c41a;
  border-color: #52c41a;
  box-shadow: 0 2px 4px rgb(82 196 26 / 20%);
}
.resume-btn:hover,
.resume-btn:focus {
  background-color: #73d13d;
  border-color: #73d13d;
}

.task-card__progress-row {
  display: flex;
  align-items: baseline;