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

<script setup lang="ts">
import { type MapAreaInfo, MapAreaType, type MapPen, MapPointType } from '@api/map';
import type { PointBindModalRef } from '@common/modal/point-bind-modal.vue';
import type { RouteBindModalRef } from '@common/modal/route-bind-modal.vue';
import type { EditorService } from '@core/editor.service';
import sTheme from '@core/theme.service';
import { ref, shallowRef } from 'vue';
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 area = computed<MapAreaInfo | null>(() => {
  const v = pen.value?.area;
  if (!v?.type) return null;
  return v;
});

const refBindPoint = shallowRef<PointBindModalRef>();
const pointKeyword = ref<string>('');
const points = computed<MapPen[]>(
  () =>
    <MapPen[]>(
      area.value?.points?.map((v) => editor.value.getPenById(v)).filter((v) => v?.label?.includes(pointKeyword.value))
    ),
);
const actions = computed<MapPen[]>(() => points.value?.filter(({ point }) => point?.type === MapPointType.动作点));

const refBindRoute = shallowRef<RouteBindModalRef>();
const routeKeyword = ref<string>('');
const routes = computed<string[]>(
  () =>
    <string[]>(
      area.value?.routes?.map((v) => editor.value.getRouteLabel(v)).filter((v) => v?.includes(routeKeyword.value))
    ),
);
</script>

<template>
  <PointBindModal ref="refBindPoint" :token="token" />
  <RouteBindModal ref="refBindRoute" :token="token" />

  <a-card class="full" :title="$t('属性')" :bordered="false">
    <a-flex v-if="id && pen && area" :gap="24" vertical>
      <a-row :gutter="[8, 8]">
        <a-col :span="12">
          <a-input :value="$t(MapAreaType[area.type])" disabled />
        </a-col>
        <a-col :span="12">
          <a-input
            :maxlength="10"
            :value="pen.label"
            @change="editor.updatePen(id, { label: $event.target.value }, false)"
          >
            <template #suffix><EditOutlined /></template>
          </a-input>
        </a-col>
      </a-row>
      <a-row v-if="area.type === MapAreaType.约束区" :gutter="[8, 8]">
        <a-col :span="24">
          <a-typography-text>{{ $t('最大可容纳AMR数') }}:</a-typography-text>
        </a-col>
        <a-col :span="24">
          <a-input-number
            class="full"
            :placeholder="$t('请输入数量')"
            :min="0"
            :max="9999"
            :value="pen.area?.maxAmr"
            @change="editor.updateArea(id, { maxAmr: $event as number })"
          />
        </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-collapse expand-icon-position="end" :bordered="false">
        <template #expandIcon="v">
          <i class="icon dropdown" :class="{ active: v?.isActive }" />
        </template>

        <a-collapse-panel v-if="MapAreaType.库区 === area.type" :header="$t('绑定动作点')">
          <template #extra>
            <a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen, MapPointType.动作点)">
              <i class="mask plus" />
            </a-button>
          </template>
          <a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
            <template #suffix>
              <i class="icon search size-16" />
            </template>
          </a-input>
          <a-list rowKey="id" :data-source="actions">
            <template #renderItem="{ item }">
              <a-list-item class="ph-16" style="height: 36px">
                <a-typography-text>{{ item.label }}</a-typography-text>
              </a-list-item>
            </template>
          </a-list>
        </a-collapse-panel>

        <a-collapse-panel
          v-if="[MapAreaType.互斥区, MapAreaType.非互斥区, MapAreaType.约束区].includes(area.type)"
          :header="$t('绑定站点')"
        >
          <template #extra>
            <a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen)">
              <i class="mask plus" />
            </a-button>
          </template>
          <a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
            <template #suffix>
              <i class="icon search size-16" />
            </template>
          </a-input>
          <a-list rowKey="id" :data-source="points">
            <template #renderItem="{ item }">
              <a-list-item class="ph-16" style="height: 36px">
                <a-typography-text>{{ item.label }}</a-typography-text>
              </a-list-item>
            </template>
          </a-list>
        </a-collapse-panel>

        <a-collapse-panel v-if="MapAreaType.互斥区 === area.type" :header="$t('绑定路段')">
          <template #extra>
            <a-button class="icon-btn" size="small" @click.stop="refBindRoute?.open(pen)">
              <i class="mask plus" />
            </a-button>
          </template>
          <a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="routeKeyword">
            <template #suffix>
              <i class="icon search size-16" />
            </template>
          </a-input>
          <a-list rowKey="id" :data-source="routes">
            <template #renderItem="{ item }">
              <a-list-item class="ph-16" style="height: 36px">
                <a-typography-text>{{ item }}</a-typography-text>
              </a-list-item>
            </template>
          </a-list>
        </a-collapse-panel>
      </a-collapse>
    </a-flex>
    <a-empty v-else :image="sTheme.empty" />
  </a-card>
</template>