zengzy / hhrcs_web · Files

<!--
  移动端任务创建界面
  @author zzy
  @date 2026-01-31
-->
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vuestic-ui'
import { useRouter } from 'vue-router'
import robotTasksApi from '../../services/robotTasks'
import optionsApi from '../../services/options'

const { t, locale } = useI18n()
const { init: notify } = useToast()
const router = useRouter()

/**
 * 切换语言 (中/英)
 */
const toggleLanguage = () => {
  locale.value = locale.value === 'cn' ? 'gb' : 'cn'
}

/**
 * 当前视图：'home' = 主界面, 'move' = 搬运任务, 'charge' = 充电
 * @author zzy
 */
const currentView = ref<'home' | 'move' | 'charge'>('home')

/**
 * 加载状态
 * @author zzy
 */
const isLoading = ref(false)

/**
 * 表单数据
 * @author zzy
 */
const form = ref({
  taskId: null as string | null,
  robotId: null as string | null,
  robotCode: '',
  beginLocationId: null as string | null,
  beginLocationCode: '',
  endLocationId: null as string | null,
  endLocationCode: '',
  endAreaId: null as string | null,
  priority: 99,
  shelfCode: '',
  errorInfo: ''
})

/**
 * 终点类型
 * @author zzy
 */
const endTargetType = ref<'location' | 'area'>('location')

/**
 * 下拉选项
 * @author zzy
 */
const robotOptions = ref<{ value: string; text: string; code: string }[]>([])
const locationOptions = ref<{ value: string; text: string; code: string }[]>([])
const areaOptions = ref<{ value: string; text: string; code: string }[]>([])

/**
 * 返回主界面
 * @author zzy
 */
const backToHome = () => {
  currentView.value = 'home'
  resetForm()
}

/**
 * 打开搬运任务界面
 * @author zzy
 */
const openMoveTask = () => {
  resetForm()
  currentView.value = 'move'
}

/**
 * 打开充电界面
 * @author zzy
 */
const openChargeTask = () => {
  currentView.value = 'charge'
}

/**
 * 重置表单
 * @author zzy
 */
const resetForm = () => {
  endTargetType.value = 'location'
  form.value = {
    taskId: null,
    robotId: null,
    robotCode: '',
    beginLocationId: null,
    beginLocationCode: '',
    endLocationId: null,
    endLocationCode: '',
    endAreaId: null,
    priority: 99,
    shelfCode: '',
    errorInfo: ''
  }
}

/**
 * 监听机器人选择变化，自动赋值机器人编码
 * @param robotId 机器人ID
 * @author zzy
 */
const onRobotChange = (robotId: string) => {
  const robot = robotOptions.value.find(r => r.value === robotId)
  form.value.robotCode = robot?.code || ''
}

/**
 * 监听起点选择变化，自动赋值起点编码
 * @param locationId 库位ID
 * @author zzy
 */
const onBeginNodeChange = (locationId: string) => {
  const loc = locationOptions.value.find(l => l.value === locationId)
  form.value.beginLocationCode = loc?.code || ''
}

/**
 * 监听终点选择变化，自动赋值终点编码
 * @param locationId 库位ID
 * @author zzy
 */
const onEndNodeChange = (locationId: string) => {
  const loc = locationOptions.value.find(l => l.value === locationId)
  form.value.endLocationCode = loc?.code || ''
}

/**
 * 保存搬运任务
 * @author zzy
 */
const saveTask = async () => {
  // 表单验证
  if (!form.value.beginLocationId) {
    notify({ message: t('robotTasks.form.beginNode') + t('common.required'), color: 'warning' })
    return
  }
  if (endTargetType.value === 'location' && !form.value.endLocationId) {
    notify({ message: t('robotTasks.form.endNode') + t('common.required'), color: 'warning' })
    return
  }
  if (endTargetType.value === 'area' && !form.value.endAreaId) {
    notify({ message: t('robotTasks.form.endArea') + t('common.required'), color: 'warning' })
    return
  }

  try {
    isLoading.value = true
    const payload = { ...form.value }
    if (endTargetType.value === 'area') {
      payload.endLocationId = null
      payload.endLocationCode = ''
    } else {
      payload.endAreaId = null
    }

    const res = await robotTasksApi.createOrUpdate(payload)

    if (res?.success === false || res?.Success === false) {
      notify({ message: res.message || res.Message || t('robotTasks.messages.createFailed'), color: 'danger' })
      return
    }

    notify({ message: res?.message || res?.Message || t('robotTasks.messages.created'), color: 'success' })
    backToHome()
  } catch (err: any) {
    notify({ message: err?.message || t('robotTasks.messages.createFailed'), color: 'danger' })
  } finally {
    isLoading.value = false
  }
}

/**
 * 加载下拉选项数据
 * @author zzy
 */
const loadOptions = async () => {
  try {
    // 加载机器人列表
    const robotsRes: any = await optionsApi.getRobots()
    const robotsData = Array.isArray(robotsRes) ? robotsRes : (robotsRes?.data || robotsRes?.Data || [])
    robotOptions.value = robotsData.map((item: any) => ({ value: item.value, text: item.text, code: item.code }))
  } catch (err) {
    console.error('加载机器人列表失败', err)
  }

  try {
    // 加载库位列表
    const locationsRes: any = await optionsApi.getLocations()
    const locationsData = Array.isArray(locationsRes) ? locationsRes : (locationsRes?.data || locationsRes?.Data || [])
    locationOptions.value = locationsData.map((item: any) => ({ value: item.value, text: item.text, code: item.code }))
  } catch (err) {
    console.error('加载库位列表失败', err)
  }

  try {
    // 加载库区列表
    const areasRes: any = await optionsApi.getAreas()
    const areasData = Array.isArray(areasRes) ? areasRes : (areasRes?.data || areasRes?.Data || [])
    areaOptions.value = areasData.map((item: any) => ({ value: item.value, text: item.text, code: item.code }))
  } catch (err) {
    console.error('加载库区列表失败', err)
  }
}

onMounted(() => {
  loadOptions()
})
</script>

<template>
  <div class="mobile-task-create">
    <!-- 主界面 -->
    <div v-if="currentView === 'home'" class="mobile-home">
      <div class="mobile-lang-switch">
        <VaButton preset="secondary" round icon="translate" @click="toggleLanguage">
          {{ locale === 'cn' ? 'EN' : '中文' }}
        </VaButton>
      </div>

      <div class="mobile-header">
        <h1 class="mobile-title">{{ t('mobileTask.title') }}</h1>
        <p class="mobile-subtitle">{{ t('mobile.selectFunction') }}</p>
      </div>

      <div class="mobile-menu">
        <div class="mobile-menu-item mobile-menu-item-move" @click="openMoveTask">
          <div class="mobile-menu-icon">
            <VaIcon name="local_shipping" size="large" />
          </div>
          <div class="mobile-menu-text">
            <span class="mobile-menu-title">{{ t('mobile.move') }}</span>
            <span class="mobile-menu-desc">{{ t('mobile.moveDesc') }}</span>
          </div>
          <VaIcon name="chevron_right" class="mobile-menu-arrow" />
        </div>

        <div class="mobile-menu-item mobile-menu-item-charge" @click="openChargeTask">
          <div class="mobile-menu-icon">
            <VaIcon name="battery_charging_full" size="large" />
          </div>
          <div class="mobile-menu-text">
            <span class="mobile-menu-title">{{ t('mobile.charge') }}</span>
            <span class="mobile-menu-desc">{{ t('mobile.chargeDesc') }}</span>
          </div>
          <VaIcon name="chevron_right" class="mobile-menu-arrow" />
        </div>
      </div>
    </div>

    <!-- 搬运任务界面 -->
    <div v-else-if="currentView === 'move'" class="mobile-task-form">
      <div class="mobile-form-header">
        <VaButton preset="secondary" icon="arrow_back" @click="backToHome" class="mobile-back-btn" />
        <h2 class="mobile-form-title">{{ t('mobile.move') }}</h2>
        <VaButton preset="secondary" icon="translate" @click="toggleLanguage">
          {{ locale === 'cn' ? 'EN' : '中文' }}
        </VaButton>
      </div>

      <div class="mobile-form-content">
        <VaForm ref="formRef">
          <div class="mobile-form-group">
            <label class="mobile-form-label">{{ t('robotTasks.form.beginNode') }}</label>
            <VaSelect
              v-model="form.beginLocationId"
              :options="locationOptions"
              text-by="text"
              value-by="value"
              clearable
              class="mobile-form-select"
              @update:model-value="onBeginNodeChange"
            />
          </div>

          <div class="mobile-form-group">
            <label class="mobile-form-label">{{ t('robotTasks.form.endTarget') }}</label>
            <VaButtonToggle
              v-model="endTargetType"
              :options="[
                { label: t('robotTasks.form.endNode'), value: 'location' },
                { label: t('robotTasks.form.endArea'), value: 'area' }
              ]"
              class="mobile-form-toggle"
            />
          </div>

          <div v-if="endTargetType === 'location'" class="mobile-form-group">
            <label class="mobile-form-label">{{ t('robotTasks.form.endNode') }}</label>
            <VaSelect
              v-model="form.endLocationId"
              :options="locationOptions"
              text-by="text"
              value-by="value"
              clearable
              class="mobile-form-select"
              @update:model-value="onEndNodeChange"
            />
          </div>

          <div v-else class="mobile-form-group">
            <label class="mobile-form-label">{{ t('robotTasks.form.endArea') }}</label>
            <VaSelect
              v-model="form.endAreaId"
              :options="areaOptions"
              text-by="text"
              value-by="value"
              clearable
              class="mobile-form-select"
            />
          </div>

          <div class="mobile-form-group">
            <label class="mobile-form-label">{{ t('robotTasks.form.priority') }}</label>
            <VaInput
              v-model="form.priority"
              type="number"
              class="mobile-form-input"
            />
          </div>

          <div class="mobile-form-group">
            <label class="mobile-form-label">{{ t('robotTasks.form.shelfCode') }}</label>
            <VaInput
              v-model="form.shelfCode"
              class="mobile-form-input"
              :placeholder="t('mobile.shelfCodePlaceholder')"
            />
          </div>

          <div class="mobile-form-group">
            <label class="mobile-form-label">{{ t('robotTasks.table.robotCode') }}</label>
            <VaSelect
              v-model="form.robotId"
              :options="robotOptions"
              text-by="text"
              value-by="value"
              clearable
              class="mobile-form-select"
              @update:model-value="onRobotChange"
            />
          </div>
        </VaForm>
      </div>

      <div class="mobile-form-footer">
        <VaButton
          color="primary"
          size="large"
          class="mobile-submit-btn"
          :loading="isLoading"
          @click="saveTask"
        >
          {{ t('common.confirm') }}
        </VaButton>
      </div>
    </div>

    <!-- 充电界面（功能开发中） -->
    <div v-else-if="currentView === 'charge'" class="mobile-task-form">
      <div class="mobile-form-header">
        <VaButton preset="secondary" icon="arrow_back" @click="backToHome" class="mobile-back-btn" />
        <h2 class="mobile-form-title">{{ t('mobile.charge') }}</h2>
        <div class="mobile-back-btn-placeholder"></div>
      </div>

      <div class="mobile-developing-content">
        <VaIcon name="construction" size="64px" color="secondary" />
        <p class="mobile-developing-text">{{ t('mobile.developing') }}</p>
        <VaButton preset="primary" @click="backToHome">{{ t('common.back') }}</VaButton>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mobile-task-create {
  width: 100vw;
  height: 100vh;
  background: var(--va-background-primary);
  overflow: hidden;
}

/* 主界面 */
.mobile-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  position: relative;
}

.mobile-lang-switch {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.mobile-header {
  text-align: center;
  margin-bottom: 40px;
  padding-top: 40px;
}

.mobile-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--va-text-primary);
  margin: 0 0 8px 0;
}

.mobile-subtitle {
  font-size: 1rem;
  color: var(--va-text-secondary);
  margin: 0;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: var(--va-background-element);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mobile-menu-item:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.mobile-menu-item-move {
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.mobile-menu-item-move .mobile-menu-desc {
  color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-item-move .mobile-menu-arrow {
  color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-item-charge {
  background: var(--va-background-element);
  border: 2px dashed var(--va-background-border);
}

.mobile-menu-item-charge .mobile-menu-icon {
  color: var(--va-secondary);
}

.mobile-menu-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
}

.mobile-menu-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.mobile-menu-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.mobile-menu-desc {
  font-size: 0.875rem;
  color: var(--va-text-secondary);
}

.mobile-menu-arrow {
  color: var(--va-text-secondary);
}

/* 任务表单界面 */
.mobile-task-form {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--va-background-primary);
}

.mobile-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--va-background-border);
  background: var(--va-background-primary);
}

.mobile-form-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--va-text-primary);
}

.mobile-back-btn {
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
}

.mobile-back-btn-placeholder {
  min-width: 40px;
  width: 40px;
}

.mobile-form-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
}

.mobile-form-group {
  margin-bottom: 20px;
}

.mobile-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--va-text-primary);
  margin-bottom: 8px;
}

.mobile-form-select,
.mobile-form-input {
  width: 100%;
}

.mobile-form-toggle {
  width: 100%;
}

.mobile-form-toggle :deep(.va-button-toggle__button) {
  flex: 1;
}

.mobile-form-footer {
  padding: 16px;
  border-top: 1px solid var(--va-background-border);
  background: var(--va-background-primary);
}

.mobile-submit-btn {
  width: 100%;
  height: 48px;
  font-size: 1rem;
  font-weight: 600;
}

/* 开发中界面 */
.mobile-developing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px;
  text-align: center;
  gap: 24px;
}

.mobile-developing-text {
  font-size: 1.25rem;
  color: var(--va-text-secondary);
  margin: 0;
}
</style>