web-map/src/components/card/route-edit-card.vue

<script setup lang="ts">
import {
  MAP_ROUTE_PASS_TYPES,
  MAP_ROUTE_TYPES,
  type MapPen,
  type MapRouteInfo,
  MapRoutePassType,
  MapRouteType,
} from '@api/map';
import type { EditorService } from '@core/editor.service';
import sTheme from '@core/theme.service';
import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';

type Props = {
  token: InjectionKey<ShallowRef<EditorService>>;
  id?: string;
};
const props = defineProps<Props>();
const editor = inject(props.token)!;

const pen = computed<MapPen | null>(() => {
  const v = editor.value.current.value;
  if (v?.id !== props.id) return null;
  return v!;
});
const route = computed<MapRouteInfo | null>(() => {
  const v = pen.value?.route;
  if (!v?.type) return null;
  return v;
});
</script>

<template>
  <a-card class="full" :title="$t('属性')" :bordered="false">
    <a-flex v-if="id && pen && route" :gap="24" vertical>
      <a-row :gutter="[8, 8]">
        <a-col :span="24">
          <a-select
            :value="route.pass ?? MapRoutePassType.无"
            @change="editor.updateRoute(id, { pass: <number>$event })"
          >
            <a-select-option v-for="[l, v] in MAP_ROUTE_PASS_TYPES" :key="v">{{ $t(l) }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>

      <a-row :gutter="[8, 8]">
        <a-col :span="24">
          <a-typography-text>{{ $t('描述') }}:</a-typography-text>
        </a-col>
        <a-col :span="24">
          <a-textarea
            class="prop"
            :placeholder="$t('请输入描述内容')"
            :maxlength="100"
            :autoSize="{ minRows: 3, maxRows: 3 }"
            :value="pen?.desc"
            @change="editor.updatePen(id, { desc: $event.target.value }, false)"
          />
        </a-col>
      </a-row>

      <a-row align="middle" :gutter="10" :wrap="false">
        <a-col flex="none">
          <a-typography-text>{{ $t('路段长度') }}:</a-typography-text>
        </a-col>
        <a-col flex="auto">
          <a-input :value="pen.length?.toFixed()" disabled />
        </a-col>
      </a-row>

      <a-row align="middle" :gutter="10" :wrap="false">
        <a-col flex="none">
          <a-typography-text>{{ $t('路段方向') }}:</a-typography-text>
        </a-col>
        <a-col flex="auto">
          <a-select
            :value="route.direction || 1"
            @change="editor.updateRoute(id, { direction: <-1 | 1>$event })"
            disabled
          >
            <a-select-option :value="1">{{ editor.getRouteLabel(id, 1) }}</a-select-option>
            <a-select-option :value="-1">{{ editor.getRouteLabel(id, -1) }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>

      <a-row align="middle" :gutter="10" :wrap="false">
        <a-col flex="none">
          <a-typography-text>{{ $t('路段类型') }}:</a-typography-text>
        </a-col>
        <a-col flex="auto">
          <a-select :value="route.type" @change="editor.changeRouteType(id, <MapRouteType>$event)">
            <a-select-option v-for="[l, v] in MAP_ROUTE_TYPES" :key="v">{{ $t(l) }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>

      <a-row
        v-if="[MapRouteType.二阶贝塞尔曲线, MapRouteType.三阶贝塞尔曲线].includes(route.type)"
        align="middle"
        :gutter="8"
      >
        <a-col flex="auto">
          <a-typography-text>{{ $t('控制点1') }}:</a-typography-text>
        </a-col>
        <a-col flex="none">
          <a-space :size="8">
            <a-typography-text code>X:</a-typography-text>
            <a-input-number
              style="width: 80px"
              :placeholder="$t('请输入')"
              :precision="0"
              :controls="false"
              :value="route?.c1?.x.toFixed()"
              @change="editor.updateRoute(id, { c1: { x: +$event, y: route?.c1?.y ?? 0 } })"
            />
          </a-space>
        </a-col>
        <a-col flex="none">
          <a-space :size="8">
            <a-typography-text code>Y:</a-typography-text>
            <a-input-number
              style="width: 80px"
              :placeholder="$t('请输入')"
              :precision="0"
              :controls="false"
              :value="route?.c1?.y.toFixed()"
              @change="editor.updateRoute(id, { c1: { x: route?.c1?.x ?? 0, y: +$event } })"
            />
          </a-space>
        </a-col>
      </a-row>

      <a-row v-if="MapRouteType.三阶贝塞尔曲线 === route.type" align="middle" :gutter="8">
        <a-col flex="auto">
          <a-typography-text>{{ $t('控制点2') }}:</a-typography-text>
        </a-col>
        <a-col flex="none">
          <a-space :size="8">
            <a-typography-text code>X:</a-typography-text>
            <a-input-number
              style="width: 80px"
              :placeholder="$t('请输入')"
              :precision="0"
              :controls="false"
              :value="route?.c2?.x.toFixed()"
              @change="editor.updateRoute(id, { c2: { x: +$event, y: route?.c2?.y ?? 0 } })"
            />
          </a-space>
        </a-col>
        <a-col flex="none">
          <a-space :size="8">
            <a-typography-text code>Y:</a-typography-text>
            <a-input-number
              style="width: 80px"
              :placeholder="$t('请输入')"
              :precision="0"
              :controls="false"
              :value="route?.c2?.y.toFixed()"
              @change="editor.updateRoute(id, { c2: { x: route?.c2?.x ?? 0, y: +$event } })"
            />
          </a-space>
        </a-col>
      </a-row>
    </a-flex>
    <a-empty v-else :image="sTheme.empty" />
  </a-card>
</template>