feat：数据流转新增图片上传和 pref：优化里面的部分字段

fengtao
1 parent c942ee15
Showing 4 changed files with 251 additions and 83 deletions
src/views/rule/dataFlow/cpns/config.ts
src/views/rule/dataFlow/cpns/cpns/transferConfigApi.vue
src/views/rule/dataFlow/cpns/cpns/transferConfigKafka.vue
src/views/rule/dataFlow/cpns/cpns/transferConfigMqtt.vue
--- a/src/views/rule/dataFlow/cpns/config.ts
View file @8555146
+++ b/src/views/rule/dataFlow/cpns/config.ts
View file @8555146
@@ -243,14 +243,14 @@ export const modeKafkaForm: FormSchema[] = [
   },
   {
     field: '1',
-    label: '',
+    label: '其他属性',
     colProps: { span: 24 },
     slot: 'addValue',
     component: 'Input',
   },
   {
     field: 'addMetadataKeyValuesAsKafkaHeaders',
-    label: '选择',
+    label: '',
     colProps: { span: 12 },
     component: 'Checkbox',
     renderComponentContent: '将消息的元数据以键值对的方式添加到Kafka消息头中',
@@ -282,7 +282,7 @@ export const modeKafkaForm: FormSchema[] = [
     field: 'description',
     label: '说明',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputTextArea',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入说明',
@@ -308,6 +308,7 @@ export const modeMqttForm: FormSchema[] = [
     colProps: { span: 12 },
     required: true,
     component: 'Input',
+    defaultValue: 'my-topic',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入Topic pattern',
@@ -319,7 +320,6 @@ export const modeMqttForm: FormSchema[] = [
     colProps: { span: 12 },
     component: 'Input',
     required: true,
-    defaultValue: 'localhost',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入Host',
@@ -354,12 +354,37 @@ export const modeMqttForm: FormSchema[] = [
     label: 'Client ID',
     colProps: { span: 12 },
     component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入Client ID',
+    componentProps: ({ formActionType }) => {
+      const { updateSchema } = formActionType;
+      return {
+        onChange(e) {
+          if (e == null || e == undefined) {
+            updateSchema({
+              field: 'appendClientIdSuffix',
+              show: false,
+            });
+          } else {
+            updateSchema({
+              field: 'appendClientIdSuffix',
+              show: true,
+            });
+          }
+        },
+        maxLength: 255,
+        placeholder: '请输入Client ID',
+      };
     },
   },
   {
+    field: 'appendClientIdSuffix',
+    label: '',
+    colProps: { span: 12 },
+    defaultValue: false,
+    component: 'Checkbox',
+    renderComponentContent: 'Add Service ID as suffix to Client ID',
+    show: false,
+  },
+  {
     field: 'cleanSession',
     label: 'Clean',
     colProps: { span: 12 },
@@ -406,7 +431,7 @@ export const modeMqttForm: FormSchema[] = [
     field: 'password',
     label: '密码',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputPassword',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入密码',
@@ -452,7 +477,7 @@ export const modeMqttForm: FormSchema[] = [
     field: 'description',
     label: '说明',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputTextArea',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入说明',
@@ -575,7 +600,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     field: 'password',
     label: 'Password',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputPassword',
     defaultValue: 'guest',
     componentProps: {
       maxLength: 255,
@@ -613,12 +638,11 @@ export const modeRabbitMqForm: FormSchema[] = [
   },
   {
     field: '1',
-    label: '',
+    label: '客户端属性',
     colProps: { span: 24 },
-    component: 'Input',
+    component: 'InputTextArea',
     slot: 'addKeyAndValue',
   },
-
   {
     field: 'description',
     label: '说明',
@@ -925,7 +949,7 @@ export const modeApiForm: FormSchema[] = [
     field: 'password',
     label: 'Password',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputPassword',
     required: true,
     componentProps: {
       maxLength: 255,
@@ -961,7 +985,7 @@ export const modeApiForm: FormSchema[] = [
     field: 'password',
     label: 'Password',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputPassword',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入Password',
@@ -973,7 +997,7 @@ export const modeApiForm: FormSchema[] = [
     field: 'description',
     label: '说明',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputTextArea',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入说明',
--- a/src/views/rule/dataFlow/cpns/cpns/transferConfigApi.vue
View file @8555146
+++ b/src/views/rule/dataFlow/cpns/cpns/transferConfigApi.vue
View file @8555146
@@ -23,57 +23,60 @@
       <template #uploadAdd1="{ field }">
         <span style="display: none">{{ field }}</span>
         <a-upload-dragger
-          v-model:fileList="fileList"
+          v-model:fileList="fileList1"
           name="file"
-          :multiple="true"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          @change="handleChange"
+          :multiple="false"
+          @change="handleChange('T', $event)"
+          :before-upload="() => false"
         >
           <p class="ant-upload-drag-icon">
             <InboxOutlined />
           </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
           <p class="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or
-            other band files
+            支持扩展名：.jpeg .png .jpg ...
+            <br />
+            文件大小：最大支持5M
           </p>
         </a-upload-dragger>
       </template>
       <template #uploadAdd2="{ field }">
         <span style="display: none">{{ field }}</span>
         <a-upload-dragger
-          v-model:fileList="fileList"
+          v-model:fileList="fileList2"
           name="file"
-          :multiple="true"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          @change="handleChange"
+          :multiple="false"
+          @change="handleChange('F', $event)"
+          :before-upload="() => false"
         >
           <p class="ant-upload-drag-icon">
             <InboxOutlined />
           </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
           <p class="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or
-            other band files
+            支持扩展名：.jpeg .png .jpg ...
+            <br />
+            文件大小：最大支持5M
           </p>
         </a-upload-dragger>
       </template>
       <template #uploadAdd3="{ field }">
         <span style="display: none">{{ field }}</span>
         <a-upload-dragger
-          v-model:fileList="fileList"
+          v-model:fileList="fileList3"
           name="file"
-          :multiple="true"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          @change="handleChange"
+          :multiple="false"
+          @change="handleChange('C', $event)"
+          :before-upload="() => false"
         >
           <p class="ant-upload-drag-icon">
             <InboxOutlined />
           </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
           <p class="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or
-            other band files
+            支持扩展名：.jpeg .png .jpg ...
+            <br />
+            文件大小：最大支持5M
           </p>
         </a-upload-dragger>
       </template>
@@ -83,9 +86,12 @@
 <script lang="ts">
   import { defineComponent, ref, reactive, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { modeApiForm, modeApiInseretKeyAndValueForm } from '../config';
+  import { modeApiForm, modeApiInseretKeyAndValueForm, CredentialsEnum } from '../config';
   import { InboxOutlined } from '@ant-design/icons-vue';
   import { Upload } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { uploadApi } from '/@/api/personal/index';
+
   interface IKeyAndValue {
     key: string;
     value: string;
@@ -98,14 +104,20 @@
     },
     emits: ['next', 'prev', 'register'],
     setup(_, { emit }) {
-      const fileList = ref<[]>([]);
+      const { createMessage } = useMessage();
+      let caCertFileName = ref('');
+      let privateKeyFileName = ref('');
+      let certFileName = ref('');
+      let fileList1: any = ref<[]>([]);
+      let fileList2: any = ref<[]>([]);
+      let fileList3: any = ref<[]>([]);
       const keyAndValueArr = ref<[]>([]);
       const temp = ref({});
       let tempObj = ref({});
       const otherPropertiesValues = reactive({
         headers: {},
       });
-      const credentialsV = reactive({
+      const credentialsV: any = reactive({
         credentials: {
           type: '',
         },
@@ -126,9 +138,7 @@
         },
         resetButtonOptions: {
           text: '上一步',
-          type: 'primary',
         },
-
         resetFunc: customResetFunc,
         submitFunc: customSubmitFunc,
       });
@@ -148,11 +158,25 @@
         setFieldsValue({
           name: v1,
         });
+        setFieldsValue({
+          password: v.credentials?.password,
+          username: v.credentials?.username,
+          type: v.credentials?.type,
+        });
+        fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39) }];
+        fileList2.value = [{ name: v.credentials?.certFileName.slice(39) }];
+        fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39) }];
       };
       const customClearStepTwoValueFunc = async () => {
         nextTick(() => {
           defineClearFunc();
           defineClearKeyAndValueFunc();
+          fileList1.value = [];
+          fileList2.value = [];
+          fileList3.value = [];
+          caCertFileName.value = '';
+          privateKeyFileName.value = '';
+          certFileName.value = '';
         });
       };
       async function customResetFunc() {
@@ -184,7 +208,39 @@
       const removeKeyAndValueFunc = () => {
         keyAndValueArr.value.splice(0, 1);
       };
-      const handleChange = () => {};
+      /**
+       * 上传图片
+       */
+      const handleChange = async (e, { file }) => {
+        if (file.status === 'removed') {
+          e == 'T'
+            ? (fileList1.value = [])
+            : e == 'F'
+            ? (fileList2.value = [])
+            : (fileList3.value = []);
+        } else {
+          const isLt5M = file.size / 1024 / 1024 < 5;
+          if (!isLt5M) {
+            createMessage.error('图片大小不能超过5MB!');
+          } else {
+            e == 'T'
+              ? (fileList1.value = [file])
+              : e == 'F'
+              ? (fileList2.value = [file])
+              : (fileList3.value = [file]);
+            const formData = new FormData();
+            formData.append('file', file);
+            const response = await uploadApi(formData);
+            if (response.fileStaticUri) {
+              e == 'T'
+                ? (caCertFileName.value = response.fileStaticUri)
+                : e == 'F'
+                ? (certFileName.value = response.fileStaticUri)
+                : (privateKeyFileName.value = response.fileStaticUri);
+            }
+          }
+        }
+      };
       const getSonValueFunc = async () => {
         sonValues.configuration = await validate();
@@ -192,6 +248,17 @@
           await getDefaultValue();
         }
         credentialsV.credentials.type = sonValues.configuration.type;
+        if (credentialsV.credentials.type == CredentialsEnum.IS_BASIC) {
+          credentialsV.credentials.username = sonValues.configuration.username;
+          credentialsV.credentials.password = sonValues.configuration.password;
+          sonValues.configuration.username = undefined;
+          sonValues.configuration.password = undefined;
+        } else if (credentialsV.credentials.type == CredentialsEnum.IS_PEM) {
+          credentialsV.credentials.caCertFileName = caCertFileName.value;
+          credentialsV.credentials.certFileName = certFileName.value;
+          credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
+          credentialsV.credentials.password = sonValues.configuration.password;
+        }
         const kong = {};
         let kongTemp = {};
         keyAndValueArrTemp.value.map((item: any) => {
@@ -211,9 +278,19 @@
         getSonValueFunc,
         keyAndValueArr,
         registerKeyAndValue,
-        fileList,
         handleChange,
+        fileList1,
+        fileList2,
+        fileList3,
+        caCertFileName,
+        privateKeyFileName,
+        certFileName,
       };
     },
   });
 </script>
+<style lang="less" scoped>
+  :deep(.ant-col-24) {
+    margin-bottom: 20px !important;
+  }
+</style>
--- a/src/views/rule/dataFlow/cpns/cpns/transferConfigKafka.vue
View file @8555146
+++ b/src/views/rule/dataFlow/cpns/cpns/transferConfigKafka.vue
View file @8555146
@@ -26,7 +26,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
+  import { defineComponent, ref, reactive, nextTick, watch } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config';
   import { Alert, Divider, Descriptions } from 'ant-design-vue';
@@ -48,7 +48,7 @@
     setup(_, { emit }) {
       const temp = ref({});
       let tempObj = ref({});
-      const keyAndValueArr = ref<[]>([]);
+      const keyAndValueArr: any = ref<[]>([]);
       const keyAndValueArrTemp = ref<[]>([]);
       const vType = ref('');
       const keyAndValueObj = reactive<IKeyAndValue>({
@@ -72,7 +72,6 @@
           },
           resetButtonOptions: {
             text: '上一步',
-            type: 'primary',
           },
           resetFunc: customResetFunc,
         });
@@ -114,12 +113,12 @@
       const tempGetKeyAndVal = async () => {
         temp.value = await validateKeyAndValue();
       };
-      // const defaultAddKeyAndValueFunc = () => {
-      //   if (keyAndValueArr.value.length == 0) {
-      //     keyAndValueArr.value.push(keyAndValueObj as never);
-      //   }
-      // };
-      // defaultAddKeyAndValueFunc();
+      watch(
+        () => temp.value,
+        (n) => {
+          console.log(n);
+        }
+      );
       const getDefaultValue = async () => {
         await tempGetKeyAndVal();
--- a/src/views/rule/dataFlow/cpns/cpns/transferConfigMqtt.vue
View file @8555146
+++ b/src/views/rule/dataFlow/cpns/cpns/transferConfigMqtt.vue
View file @8555146
@@ -4,57 +4,62 @@
       <template #uploadAdd1="{ field }">
         <span style="display: none">{{ field }}</span>
         <a-upload-dragger
-          v-model:fileList="fileList"
+          v-model:fileList="fileList1"
           name="file"
-          :multiple="true"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          @change="handleChange"
+          :multiple="false"
+          @change="handleChange('T', $event)"
+          :before-upload="() => false"
         >
           <p class="ant-upload-drag-icon">
             <InboxOutlined />
           </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
           <p class="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or
-            other band files
+            支持扩展名：.jpeg .png .jpg ...
+            <br />
+            文件大小：最大支持5M
           </p>
         </a-upload-dragger>
       </template>
+      <div style="margin-top: 50px"></div>
       <template #uploadAdd2="{ field }">
         <span style="display: none">{{ field }}</span>
         <a-upload-dragger
-          v-model:fileList="fileList"
+          v-model:fileList="fileList2"
           name="file"
-          :multiple="true"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          @change="handleChange"
+          :multiple="false"
+          @change="handleChange('F', $event)"
+          :before-upload="() => false"
         >
           <p class="ant-upload-drag-icon">
             <InboxOutlined />
           </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
           <p class="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or
-            other band files
+            支持扩展名：.jpeg .png .jpg ...
+            <br />
+            文件大小：最大支持5M
           </p>
         </a-upload-dragger>
       </template>
+      <div style="margin-top: 50px"></div>
       <template #uploadAdd3="{ field }">
         <span style="display: none">{{ field }}</span>
         <a-upload-dragger
-          v-model:fileList="fileList"
+          v-model:fileList="fileList3"
           name="file"
-          :multiple="true"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          @change="handleChange"
+          :multiple="false"
+          @change="handleChange('C', $event)"
+          :before-upload="() => false"
         >
           <p class="ant-upload-drag-icon">
             <InboxOutlined />
           </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
           <p class="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or
-            other band files
+            支持扩展名：.jpeg .png .jpg ...
+            <br />
+            文件大小：最大支持5M
           </p>
         </a-upload-dragger>
       </template>
@@ -67,6 +72,8 @@
   import { CredentialsEnum, modeMqttForm } from '../config';
   import { InboxOutlined } from '@ant-design/icons-vue';
   import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue';
+  import { uploadApi } from '/@/api/personal/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
   export default defineComponent({
     components: {
@@ -80,8 +87,14 @@
     },
     emits: ['next', 'prev', 'register'],
     setup(_, { emit }) {
-      const fileList = ref<[]>([]);
-      const credentialsV = reactive({
+      const { createMessage } = useMessage();
+      let caCertFileName = ref('');
+      let privateKeyFileName = ref('');
+      let certFileName = ref('');
+      let fileList1: any = ref<[]>([]);
+      let fileList2: any = ref<[]>([]);
+      let fileList3: any = ref<[]>([]);
+      const credentialsV: any = reactive({
         credentials: {
           type: '',
         },
@@ -97,26 +110,67 @@
         },
         resetButtonOptions: {
           text: '上一步',
-          type: 'primary',
         },
-
         resetFunc: customResetFunc,
         submitFunc: customSubmitFunc,
       });
+
+      /**
+       * 上传图片
+       */
+      const handleChange = async (e, { file }) => {
+        if (file.status === 'removed') {
+          e == 'T'
+            ? (fileList1.value = [])
+            : e == 'F'
+            ? (fileList2.value = [])
+            : (fileList3.value = []);
+        } else {
+          const isLt5M = file.size / 1024 / 1024 < 5;
+          if (!isLt5M) {
+            createMessage.error('图片大小不能超过5MB!');
+          } else {
+            e == 'T'
+              ? (fileList1.value = [file])
+              : e == 'F'
+              ? (fileList2.value = [file])
+              : (fileList3.value = [file]);
+            const formData = new FormData();
+            formData.append('file', file);
+            const response = await uploadApi(formData);
+            if (response.fileStaticUri) {
+              e == 'T'
+                ? (caCertFileName.value = response.fileStaticUri)
+                : e == 'F'
+                ? (certFileName.value = response.fileStaticUri)
+                : (privateKeyFileName.value = response.fileStaticUri);
+            }
+          }
+        }
+      };
       const setStepTwoFieldsValueFunc = (v, v1) => {
         setFieldsValue(v);
         setFieldsValue({
           name: v1,
         });
         setFieldsValue({
-          password: v.credentials.password,
-          type: v.credentials.type,
-          username: v.credentials.username,
+          password: v.credentials?.password,
+          username: v.credentials?.username,
+          type: v.credentials?.type,
         });
+        fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39) }];
+        fileList2.value = [{ name: v.credentials?.certFileName.slice(39) }];
+        fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39) }];
       };
       const customClearStepTwoValueFunc = async () => {
         nextTick(() => {
           defineClearFunc();
+          fileList1.value = [];
+          fileList2.value = [];
+          fileList3.value = [];
+          caCertFileName.value = '';
+          privateKeyFileName.value = '';
+          certFileName.value = '';
         });
       };
       async function customResetFunc() {
@@ -130,7 +184,6 @@
         } finally {
         }
       }
-      const handleChange = () => {};
       const getSonValueFunc = async () => {
         sonValues.configuration = await validate();
         credentialsV.credentials.type = sonValues.configuration.type;
@@ -139,6 +192,10 @@
           credentialsV.credentials.password = sonValues.configuration.password;
           sonValues.configuration.username = undefined;
           sonValues.configuration.password = undefined;
+        } else if (credentialsV.credentials.type == CredentialsEnum.IS_PEM) {
+          credentialsV.credentials.caCertFileName = caCertFileName.value;
+          credentialsV.credentials.certFileName = certFileName.value;
+          credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
         }
         Object.assign(sonValues.configuration, credentialsV);
         return sonValues;
@@ -148,9 +205,20 @@
         register,
         setStepTwoFieldsValueFunc,
         customClearStepTwoValueFunc,
-        fileList,
+        fileList1,
+        fileList2,
+        fileList3,
         handleChange,
+        caCertFileName,
+        privateKeyFileName,
+        certFileName,
       };
     },
   });
 </script>
+
+<style lang="less" scoped>
+  :deep(.ant-col-24) {
+    margin-bottom: 20px !important;
+  }
+</style>