Merge branch 'f-dev' into 'main'

fix：修改Temnition上的问题和优化PC端

See merge request huang/yun-teng-iot-front!249

@@ -146,7 +146,7 @@
       -webkit-transition: opacity 0.4s;
       transition: opacity 0.4s;
 
-      ::v-deep(svg) {
+      :deep(svg) {
         margin: auto;
       }
     }

@@ -344,7 +344,7 @@
     }
 
     &-form-container {
-      padding: 16px 16px 0px 36px;
+      padding: 16px 16px 16px 36px;
 
       .ant-form {
         padding: 12px 10px 6px 10px;

@@ -477,14 +477,14 @@
     cursor: pointer;
     position: absolute;
     top: 0.85rem;
-    left: 1.1vw;
+    left: 1.1rem;
   }
   .fold-right {
     z-index: 9999;
     cursor: pointer;
     position: absolute;
     top: 0.85rem;
-    left: 18.1vw;
+    left: 21.6rem;
   }
   @prefix-cls: ~'@{namespace}-basic-tree';
 

@@ -144,7 +144,7 @@
       display: none;
     }
 
-    ::v-deep(.ant-pagination-disabled) {
+    :deep(.ant-pagination-disabled) {
       display: inline-block !important;
     }
 

@@ -119,7 +119,35 @@ export const CameraVideoUrl: Rule[] = [
     validator: (_, value: string) => {
       const ChineseRegexp = /[\u4E00-\u9FA5]/;
       if (ChineseRegexp.test(value)) {
-        return Promise.reject('视频流不能是中文');
+        return Promise.reject('输入内容不能是中文');
+      }
+      return Promise.resolve();
+    },
+    validateTrigger: 'blur',
+  },
+];
+
+export const CameraVideoStreamUrl: Rule[] = [
+  {
+    required: true,
+    validator: (_, value: string) => {
+      const ChineseRegexp =
+        /^https?:\/\/(.+\/)+.+(\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4|m3u8))$/i;
+      if (!ChineseRegexp.test(value)) {
+        return Promise.reject('请输入正确格式的视频地址');
+      }
+      return Promise.resolve();
+    },
+    validateTrigger: 'blur',
+  },
+];
+export const CameraNumberUrl: Rule[] = [
+  {
+    required: true,
+    validator: (_, value: string) => {
+      const ChineseRegexp = /^[A-Za-z0-9]+$/;
+      if (!ChineseRegexp.test(value)) {
+        return Promise.reject('请输入正确格式的视频编号');
       }
       return Promise.resolve();
     },

@@ -37,7 +37,7 @@ export const columns: BasicColumn[] = [
   },
 
   {
-    title: '添加时间',
+    title: '创建时间',
     dataIndex: 'createTime',
     width: 180,
   },

@@ -36,7 +36,7 @@ export const alarmSearchSchemas: FormSchema[] = [
     colProps: { span: 6 },
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入告警类型',
+      placeholder: '请输入告警场景',
     },
     dynamicRules: () => {
       return [

@@ -3,7 +3,7 @@ import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
 import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 
-import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
+import { CameraMaxLength, CameraVideoStreamUrl, CameraNumberUrl } from '/@/utils/rules';
 
 // 表格列数据
 export const columns: BasicColumn[] = [
@@ -104,7 +104,7 @@ export const formSchema: QFormSchema[] = [
     label: '摄像头编号',
     required: true,
     component: 'Input',
-    rules: CameraVideoUrl,
+    rules: CameraNumberUrl,
     componentProps: {
       placeholder: '请输入摄像头编号',
     },
@@ -118,6 +118,6 @@ export const formSchema: QFormSchema[] = [
       placeholder: '请输入视频流',
       maxLength: 255,
     },
-    rules: CameraVideoUrl,
+    rules: CameraVideoStreamUrl,
   },
 ];

@@ -59,8 +59,12 @@
               <template #title>
                 {{
                   !isAdmin(role)
-                    ? `告警数：今日新增 ${toThousands(growCardList?.alarmInfo?.todayAdd)}`
-                    : `租户总量：今日新增 ${toThousands(growCardList?.alarmInfo?.todayAdd)}`
+                    ? `告警数：${growCardList?.alarmInfo?.sumCount} 今日新增 ${toThousands(
+                        growCardList?.alarmInfo?.todayAdd
+                      )}`
+                    : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(
+                        growCardList?.alarmInfo?.todayAdd
+                      )}`
                 }}
               </template>
               <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
@@ -106,8 +110,10 @@
               <template #title>
                 {{
                   !isAdmin(role)
-                    ? `消息数：今日新增 ${toThousands(growCardList?.messageInfo?.todayMessageAdd)}`
-                    : `客户总量：今日新增 ${toThousands(
+                    ? `消息数：${growCardList?.messageInfo?.messageCount} 今日新增 ${toThousands(
+                        growCardList?.messageInfo?.todayMessageAdd
+                      )}`
+                    : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
                         growCardList?.messageInfo?.todayMessageAdd
                       )}`
                 }}

@@ -7,7 +7,7 @@
     centered
     @ok="dispatchCustomer"
     @cancel="resetFields"
-    :minHeight="100"
+    :minHeight="300"
     okText="分配"
   >
     <BasicForm @register="registerForm" />

@@ -52,7 +52,7 @@
         <template #name="{ record }">
           <div>
             <Tooltip :title="record.name" placement="topRight">
-              {{ record.name }}
+              {{ record.name.slice(0, 13) }}
             </Tooltip>
           </div>
           <Tooltip title="设备SN码" placement="topRight">

@@ -278,3 +278,9 @@
     },
   });
 </script>
+
+<style lang="less" scoped>
+  :deep(.ant-select-selector) {
+    max-width: 42rem !important;
+  }
+</style>

@@ -52,7 +52,7 @@ export const MqttSchemas: FormSchema[] = [
         maxRows: 10,
       },
     },
-    colProps: { span: 22 },
+    colProps: { span: 23 },
   },
   {
     field: 'transportPayloadType',
@@ -70,7 +70,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'useJsonPayloadFormatForDefaultDownlinkTopics',
     label: '',
-    colProps: { span: 22 },
+    colProps: { span: 23 },
     defaultValue: false,
     component: 'Checkbox',
     renderComponentContent: `启用后，平台将默认使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON有效负载格式。用于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能轻微下降，因此建议在所有设备更新后禁用此模式。`,
@@ -79,7 +79,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'enableCompatibilityWithJsonPayloadFormat',
     label: '',
-    colProps: { span: 22 },
+    colProps: { span: 23 },
     defaultValue: false,
     component: 'Checkbox',
     renderComponentContent: `启用后，平台将使用Json有效负载格式通过以下主题推送属性和RPC：v1/devices/me/attributes/response/$request_id, v1/devices/me/attributes, v1/devices/me/rpc/request/$request_id,v1/devices/me/rpc/response/$request_id.此设置不会影响使用新（v2）主题发送的属性和rpc订阅：v2/a/res/$request_id, v2/a, v2/r/req/$request_id, v2/r/res/$request_id. Where $request_id是一个整数请求标识符。`,
@@ -90,7 +90,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'deviceTelemetryProtoSchema',
     label: '遥测数据',
-    colProps: { span: 22 },
+    colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {
       autoSize: {
@@ -119,7 +119,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'deviceAttributesProtoSchema',
     label: 'Attributes',
-    colProps: { span: 22 },
+    colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {
       autoSize: {
@@ -140,7 +140,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'deviceRpcRequestProtoSchema',
     label: 'RPC 请求 ',
-    colProps: { span: 22 },
+    colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {
       autoSize: {
@@ -162,7 +162,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'deviceRpcResponseProtoSchema',
     label: 'RPC 响应',
-    colProps: { span: 22 },
+    colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {
       autoSize: {

@@ -130,4 +130,8 @@
     },
   });
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  :deep(.ant-row) {
+    column-gap: 33px !important;
+  }
+</style>

@@ -7,6 +7,7 @@
       @register="registerDrawer"
       :title="getTitle"
       width="1000px"
+      @cancel="handleCancel"
     >
       <div class="step-form-form">
         <a-steps :current="current">
@@ -25,7 +26,7 @@
             @prevSon="handlePrev"
         /></div>
       </div>
-      <div style="float: right">
+      <div style="float: right" v-if="isViewStatus">
         <Button type="primary" @click="handleSubmit" class="mr-2">确认</Button>
         <Button type="default" @click="handleCancel" class="mr-2">取消</Button>
       </div>
@@ -33,15 +34,7 @@
   </div>
 </template>
 <script lang="ts">
-  import {
-    defineComponent,
-    reactive,
-    ref,
-    computed,
-    unref,
-    getCurrentInstance,
-    nextTick,
-  } from 'vue';
+  import { defineComponent, reactive, ref, unref, getCurrentInstance, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { Steps } from 'ant-design-vue';
   import TransferConfigMode from './cpns/transferConfigMode.vue';
@@ -62,6 +55,7 @@
     },
     emits: ['success', 'register'],
     setup(_, { emit }) {
+      const isViewStatus = ref(false);
       const { createMessage } = useMessage();
       const { proxy } = getCurrentInstance() as any;
       let allPostForm: any = reactive({});
@@ -82,8 +76,8 @@
       const refTransferConfigParams = ref(null);
       const refTransferConfigMode = ref(null);
       const getModeSelectVal = ref({});
-      const isUpdate = ref(true);
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增流转配置' : '编辑数据流转'));
+      const isUpdate: any = ref(true);
+      const getTitle = ref('');
       const current = ref(0);
       const editPostId = ref('');
       const editType = reactive({
@@ -104,26 +98,40 @@
       };
 
       const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
-        isUpdate.value = !!data?.isUpdate;
+        isUpdate.value = data?.isUpdate;
         current.value = 0;
         setModalProps({ confirmLoading: false });
-
-        if (unref(isUpdate)) {
+        function commonViewOrEditFunc() {
           editPostId.value = data.record.id;
           editNextType.type = data.record.type;
           editNextType.configuration = data.record;
           editNextType.name = data.record.name;
           editNextType.remark = data.record.remark;
           proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editNextType);
-        } else {
-          nextTick(() => {
+        }
+        switch (unref(isUpdate)) {
+          case 'view':
+            commonViewOrEditFunc();
+            isViewStatus.value = false;
+            getTitle.value = '查看流转配置';
+            break;
+          case true:
+            commonViewOrEditFunc();
+            isViewStatus.value = true;
+            getTitle.value = '编辑流转配置';
+            break;
+          case false:
             proxy.$refs.refTransferConfigMode?.customResetStepOneFunc();
-          });
+            isViewStatus.value = true;
+            getTitle.value = '新增流转配置';
+            break;
         }
       });
       const handleCancel = () => {
-        defineClearFunc();
-        closeModal();
+        nextTick(() => {
+          defineClearFunc();
+          closeModal();
+        });
       };
       const defineClearFunc = () => {
         nextTick(() => {
@@ -149,6 +157,8 @@
           } catch (e) {
             return e;
           }
+        } else {
+          proxy.$refs.refTransferConfigParams.editSonValueDataFunc({});
         }
       };
       const handlePrev = () => {
@@ -248,6 +258,7 @@
         getModeSelectVal,
         refTransferConfigParams,
         refTransferConfigMode,
+        isViewStatus,
       };
     },
   });

@@ -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: '请输入密码',
@@ -441,7 +466,7 @@ export const modeMqttForm: FormSchema[] = [
     field: 'password',
     label: 'Password',
     colProps: { span: 12 },
-    component: 'Input',
+    component: 'InputPassword',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入Password',
@@ -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: '请输入说明',

@@ -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>

@@ -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,6 @@
       const tempGetKeyAndVal = async () => {
         temp.value = await validateKeyAndValue();
       };
-      // const defaultAddKeyAndValueFunc = () => {
-      //   if (keyAndValueArr.value.length == 0) {
-      //     keyAndValueArr.value.push(keyAndValueObj as never);
-      //   }
-      // };
-      // defaultAddKeyAndValueFunc();
 
       const getDefaultValue = async () => {
         await tempGetKeyAndVal();

@@ -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>

@@ -42,6 +42,13 @@
         <TableAction
           :actions="[
             {
+              label: '查看',
+              auth: 'api:yt:convert:config:get',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleView.bind(null, record),
+              ifShow: record.status == 1,
+            },
+            {
               label: '编辑',
               auth: 'api:yt:convert:config:update',
               icon: 'clarity:note-edit-line',
@@ -301,6 +308,14 @@
           reload();
         }
       };
+      function handleView(record: Recordable) {
+        nextTick(() => {
+          openModal(true, {
+            record,
+            isUpdate: 'view',
+          });
+        });
+      }
 
       return {
         disabledStatus1,
@@ -320,6 +335,7 @@
         singleStopDeleteStatus,
         statusChange,
         disabledSwitch,
+        handleView,
       };
     },
   });

@@ -662,11 +662,11 @@
 <style lang="less" scoped>
   //TODO-fengtao
   ///移除选择框默认样式（24px）否则超出默认宽度会造成页面样式错乱
-  ::v-deep(.ant-select-selector) {
+  :deep(.ant-select-selector) {
     padding-right: 0px !important;
   }
 
-  ::v-deep(.ant-select-selection-overflow) {
+  :deep(.ant-select-selection-overflow) {
     max-width: 10vw !important;
   }
   //TODO-fengtao

@@ -312,7 +312,7 @@
 
 <style lang="less" scoped>
   ///移除选择框默认样式（24px）否则超出默认宽度会造成页面样式错乱
-  ::v-deep(.ant-select-selector) {
+  :deep(.ant-select-selector) {
     padding-right: 0px !important;
   }
 </style>

@@ -5,8 +5,8 @@
       :title="getTitle"
       @register="register"
       width="500px"
-      showFooter
       @ok="handleSubmit"
+      showFooter
     >
       <BasicForm @register="registerForm">
         <template #function>
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed } from 'vue';
+  import { ref, computed, unref } from 'vue';
   import { useDrawerInner, BasicDrawer } from '/@/components/Drawer/index';
   import { useForm, BasicForm } from '/@/components/Form/index';
   import { formSchema } from '../config/config.data';
@@ -40,7 +40,8 @@
   import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
 
   const emit = defineEmits(['register', 'isStatus', 'success']);
-  const isUpdate = ref(false);
+  const isUpdate: any = ref(false);
+  const isView = ref(true);
   const aceEditor = ref();
   const aceRef = ref();
   const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
@@ -50,9 +51,35 @@
     setDrawerProps({ confirmLoading: false });
     isUpdate.value = data.isUpdate;
     initEditor(data.record?.configuration.jsScript);
-    if (isUpdate.value) {
-      editId.value = data.record.id;
-      setFieldsValue(data.record);
+    switch (isUpdate.value) {
+      case 'view':
+        isView.value = false;
+        setDrawerProps({
+          showFooter: unref(isView),
+          title: '查看转换脚本',
+          loading: false,
+        });
+        editId.value = data.record.id;
+        setFieldsValue(data.record);
+        break;
+      case true:
+        isView.value = true;
+        setDrawerProps({
+          showFooter: unref(isView),
+          title: '编辑转换脚本',
+          loading: false,
+        });
+        editId.value = data.record.id;
+        setFieldsValue(data.record);
+        break;
+      case false:
+        isView.value = true;
+        setDrawerProps({
+          showFooter: unref(isView),
+          title: '新增转换脚本',
+          loading: false,
+        });
+        break;
     }
   });
   const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({

@@ -28,10 +28,18 @@
         <TableAction
           :actions="[
             {
+              label: '查看',
+              auth: 'api:yt:convert:js:get',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleView.bind(null, record),
+              ifShow: record.status == 1,
+            },
+            {
               label: '编辑',
               auth: 'api:yt:convert:js:update',
               icon: 'clarity:note-edit-line',
               onClick: handleEdit.bind(null, record),
+              ifShow: record.status == 0,
             },
             {
               label: '删除',
@@ -59,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref,nextTick } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { Switch } from 'ant-design-vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { columns, searchFormSchema } from './config/config.data';
@@ -130,12 +138,16 @@
     }
   };
   const handleCreate = () => {
-    openDrawer(true, {
-      isUpdate: false,
+    nextTick(() => {
+      openDrawer(true, {
+        isUpdate: false,
+      });
     });
   };
   const handleEdit = (record: Recordable) => {
-    openDrawer(true, { isUpdate: true, record });
+    nextTick(() => {
+      openDrawer(true, { isUpdate: true, record });
+    });
   };
   const statusChange = async (checked, record) => {
     setProps({
@@ -159,4 +171,12 @@
       reload();
     }
   };
+  function handleView(record: Recordable) {
+    nextTick(() => {
+      openDrawer(true, {
+        record,
+        isUpdate: 'view',
+      });
+    });
+  }
 </script>