web-map/src/components/modal/robot-register-modal.vue

<script setup lang="ts">
import { registerRobot, ROBOT_BRAND_OPTIONS, ROBOT_TYPE_OPTIONS, type RobotDetail, type RobotGroup } from '@api/robot';
import type { EditorService } from '@core/editor.service';
import { type FormInstance, message } from 'ant-design-vue';
import { isError, isNil } from 'lodash-es';
import { computed, inject, type InjectionKey, reactive, ref, type ShallowRef, shallowRef } from 'vue';
import { useI18n } from 'vue-i18n';

const IP_REGEX = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;

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

export type RobotRegisterModalRef = Ref;
type Ref = {
  open: (gid: string) => void;
};
const open: Ref['open'] = (id) => {
  form.value?.resetFields();
  data.gid = id;
  show.value = true;
};
defineExpose<Ref>({ open });

const { t } = useI18n();

const show = ref<boolean>(false);

const groups = computed<RobotGroup[]>(() => editor.value.robotGroups.value ?? []);

const form = shallowRef<FormInstance>();
const data = reactive<Partial<RobotDetail>>({ isSimulative: 0 });

const submit = async () => {
  try {
    await form.value?.validate();
    const robot = await registerRobot(<RobotDetail>data);
    if (isNil(robot)) throw Error('机器人注册失败');
    editor.value.addRobots(data.gid, [robot]);
    show.value = false;
  } catch (error) {
    if (isError(error)) {
      message.error(t(error?.message));
    } else {
      console.debug(error);
    }
  }
};
</script>

<template>
  <a-modal :width="572" :title="$t('机器人注册')" v-model:open="show" :mask-closable="false" centered @ok="submit">
    <a-form ref="form" class="mr-70" :model="data" :validate-messages="{ required: '' }">
      <a-form-item :label="$t('机器人名称')" name="label" :rules="[{ required: true }]">
        <a-input :placeholder="$t('请输入')" :maxlength="16" v-model:value="data.label" />
      </a-form-item>
      <a-form-item :label="$t('是否仿真机器人')" name="isSimulative" :rules="[{ required: true }]">
        <a-select v-model:value="data.isSimulative">
          <a-select-option :value="1">{{ $t('是') }}</a-select-option>
          <a-select-option :value="0">{{ $t('否') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('品牌')" name="brand" :rules="[{ required: true }]">
        <a-select :placeholder="$t('请选择')" v-model:value="data.brand">
          <a-select-option v-for="[l, v] in ROBOT_BRAND_OPTIONS" :key="v">{{ $t(l) }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('机器人类型')" name="type" :rules="[{ required: true }]">
        <a-select :placeholder="$t('请选择')" v-model:value="data.type">
          <a-select-option v-for="[l, v] in ROBOT_TYPE_OPTIONS" :key="v">{{ $t(l) }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label="$t('输入属性IP')"
        name="ip"
        :rules="[{ required: true }, { pattern: IP_REGEX, message: '' }]"
      >
        <a-input :placeholder="$t('请输入')" :maxlength="16" v-model:value="data.ip" />
      </a-form-item>
      <a-form-item :label="$t('最小电量')" name="minBattery">
        <a-input-number
          :placeholder="$t('请输入')"
          :min="0"
          :max="100"
          :precision="0"
          v-model:value="data.minBattery"
          :controls="false"
        />
      </a-form-item>
      <a-form-item :label="$t('充电电量')" name="chargeBattery">
        <a-input-number
          :placeholder="$t('请输入')"
          :min="0"
          :max="100"
          :precision="0"
          v-model:value="data.chargeBattery"
          :controls="false"
        />
      </a-form-item>
      <a-form-item :label="$t('任务电量')" name="taskBattery">
        <a-input-number
          :placeholder="$t('请输入')"
          :min="0"
          :max="100"
          :precision="0"
          v-model:value="data.taskBattery"
          :controls="false"
        />
      </a-form-item>
      <a-form-item :label="$t('可交换电量')" name="swapBattery">
        <a-input-number
          :placeholder="$t('请输入')"
          :min="0"
          :max="100"
          :precision="0"
          v-model:value="data.swapBattery"
          :controls="false"
        />
      </a-form-item>
      <a-form-item :label="$t('最大电量')" name="maxBattery">
        <a-input-number
          :placeholder="$t('请输入')"
          :min="0"
          :max="100"
          :precision="0"
          v-model:value="data.maxBattery"
          :controls="false"
        />
      </a-form-item>
      <a-form-item :label="$t('机器人组')" name="gid" :rules="[{ required: true }]">
        <a-select :placeholder="$t('请选择')" v-model:value="data.gid" disabled>
          <a-select-option v-for="{ id, label } in groups" :key="id">{{ label }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>