feat(views): 支持手动创建协议

src/api/index.ts

@@ -360,9 +360,10 @@ export const batchDeleleProtocolParam = async (params: number[]) => {
 
 // 协议基本信息
 
-export const addProtocolBaseInfo = async () => {
+export const addProtocolBaseInfo = async (params: Partial<ProtocolBaseInfo>) => {
   await request(apiBiz('/protocolBaseInfo/add'), {
     method: 'POST',
+    body: JSON.stringify(params),
   });
 };
 

src/views/setup-protocol/CreateProtocol.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { message } from 'ant-design-vue';
+
+import { useRequest } from '@/hooks/request';
+import { t } from '@/i18n';
+import { addProtocolBaseInfo, completeProtocolConfig, downloadUserProtocol, updateProtocolBaseInfo } from '@/api';
+import { downloadBlob } from '@/utils';
+
+import ProtocolContent from './ProtocolContent.vue';
+
+import type { SetupProtocolForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';
+
+const props = defineProps<UseGuideStepItemProps<SetupProtocolForm>>();
+
+const { handleRequest } = useRequest();
+const fileName = '';
+
+const exportData = () => {
+  handleRequest(async () => {
+    const { id } = props.form.protocolInfo;
+    if (id) {
+      const file = await downloadUserProtocol(id);
+      downloadBlob(file, fileName);
+      message.success(t('setupProtocol.downloadProtocolSuccessful', { name: fileName }));
+    }
+  });
+};
+
+const protocolContentRef = useTemplateRef('protocolContent');
+
+const finish = async () => {
+  await protocolContentRef.value?.validateProtocolInfo();
+
+  if (props.form.protocolInfo.id) {
+    await updateProtocolBaseInfo(props.form.protocolInfo);
+  } else {
+    await addProtocolBaseInfo(props.form.protocolInfo);
+  }
+
+  await completeProtocolConfig(props.form.protocolInfo.id as number);
+};
+
+defineExpose<UseGuideStepItemExpose>({
+  exportData,
+  finish,
+});
+</script>
+
+<template>
+  <div>
+    <div class="result-header">
+      <div class="use-guide-title">{{ $t('setupProtocol.createProtocol') }}</div>
+    </div>
+    <ProtocolContent class="result-protocol" ref="protocolContent" :info="form.protocolInfo" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  width: calc(62% + 17px);
+  margin-bottom: 36px;
+}
+
+.result-protocol {
+  margin: 0 17px;
+}
+</style>

src/views/setup-protocol/SelectConfigMethod.vue

@@ -4,6 +4,7 @@ import { onMounted, shallowRef } from 'vue';
 import { t } from '@/i18n';
 import { ProtocolConfigMethod } from '@/constants';
 
+import CreateProtocol from './CreateProtocol.vue';
 import FinishProtocol from './FinishProtocol.vue';
 import RecognitionResult from './RecognitionResult.vue';
 import SelectDeviceType from './SelectDeviceType.vue';
@@ -58,7 +59,7 @@ const finish = () => {
       },
       {
         title: t('setupProtocol.createProtocol'),
-        component: shallowRef(RecognitionResult),
+        component: shallowRef(CreateProtocol),
         contentOffset: 36,
         formLayout: 'vertical',
         exportButtonShow: true,

src/views/setup-protocol/SelectDeviceType.vue

@@ -13,10 +13,36 @@ const currentStep = props.steps[props.stepIndex];
 onMounted(() => {
   currentStep.title = t('setupProtocol.selectDeviceType');
   props.form.deviceType = undefined;
+
+  Object.assign(props.form.protocolInfo, {
+    id: undefined,
+    protocolName: '',
+    protocolType: undefined,
+    deviceType: undefined,
+    dataBit: 5,
+    parityBit: 'N',
+    stopBit: '1',
+    baudRate: undefined,
+    dataSendInterval: undefined,
+    highFreqSendInterval: undefined,
+    readTimeout: undefined,
+    nextDataReadDelay: undefined,
+    nextRoundDataReadDelay: undefined,
+    readContinuousAddr: undefined,
+    readContinuousAddrCode: undefined,
+    readContinuousAddrLength: undefined,
+    byteOrder: undefined,
+    byteOrderCode: undefined,
+    addrOrder: undefined,
+    addrOrderCode: undefined,
+  });
 });
 
 const finish = () => {
-  currentStep.title = props.form.deviceType as string;
+  const { protocolType, deviceType, protocolInfo } = props.form;
+  currentStep.title = deviceType as string;
+  protocolInfo.protocolType = protocolType;
+  protocolInfo.deviceType = deviceType;
 };
 
 defineExpose<UseGuideStepItemExpose>({