Merge branch 'ft' into 'main_dev'

fix: 修改消息配置表格里的查看配置权限标识和详情一样 See merge request yunteng/thingskit-front!928

Merge branch 'ft' into 'main_dev'
fix: 修改消息配置表格里的查看配置权限标识和详情一样 See merge request yunteng/thingskit-front!928
xp.Huang
2 parents 765a7235 5fafe334
Showing 11 changed files with 164 additions and 165 deletions
src/views/camera/manage/CameraDrawer.vue
src/views/camera/manage/config.data.ts
src/views/device/list/config/data.ts
src/views/device/list/config/device.data.ts
src/views/device/list/cpns/modal/DeviceDetailDrawer.vue
src/views/device/list/cpns/modal/DeviceModal.vue
src/views/device/list/cpns/step/DeviceStep1.vue
src/views/device/list/cpns/tabs/Detail.vue
src/views/device/profiles/device.profile.data.ts
src/views/device/profiles/step/DeviceConfigurationStep.vue
src/views/message/config/index.vue
--- a/src/views/camera/manage/CameraDrawer.vue
View file @70490d4
+++ b/src/views/camera/manage/CameraDrawer.vue
View file @70490d4
@@ -8,24 +8,6 @@
     @ok="handleSubmit"
   >
     <BasicForm @register="registerForm">
-      <template #iconSelect>
-        <Upload
-          name="avatar"
-          accept=".png,.jpg,.jpeg,.gif"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUpload"
-          :before-upload="beforeUpload"
-        >
-          <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" />
-          <div v-else>
-            <LoadingOutlined v-if="loading" />
-            <plus-outlined v-else />
-            <div class="ant-upload-text">上传</div>
-          </div>
-        </Upload>
-      </template>
       <template #videoPlatformIdSlot="{ model, field }">
         <a-select
           placeholder="请选择流媒体配置"
@@ -52,23 +34,20 @@
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
-  import { message, Upload } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { upload } from '/@/api/oss/ossFileUploader';
-  import { FileItem } from '/@/components/Upload/src/typing';
+  import { PlusOutlined } from '@ant-design/icons-vue';
   import { getStreamingMediaList } from '/@/api/camera/cameraManager';
   import SteramingDrawer from '../streaming/SteramingDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
   export default defineComponent({
     name: 'ContactDrawer',
     components: {
       BasicDrawer,
       BasicForm,
-      Upload,
       PlusOutlined,
-      LoadingOutlined,
       SteramingDrawer,
       VNodes: (_, { attrs }) => {
         return attrs.vnodes;
@@ -118,42 +97,19 @@
         if (unref(isUpdate)) {
           await nextTick();
           editId.value = data.record.id;
-          tenantLogo.value = data.record?.avatar;
-          await setFieldsValue(data.record);
+          if (data.record.avatar) {
+            setFieldsValue({
+              avatar: [{ uid: buildUUID(), name: 'name', url: data.record.avatar } as FileItem],
+            });
+          }
+          const { avatar, ...params } = data.record;
+          console.log(avatar);
+          await setFieldsValue({ ...params });
         } else {
-          tenantLogo.value = '';
           editId.value = '';
         }
       });
-      const tenantLogo = ref('');
-
-      async function customUpload({ file }) {
-        if (beforeUpload(file)) {
-          tenantLogo.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await upload(formData);
-          if (response.fileStaticUri) {
-            tenantLogo.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
-
-      const beforeUpload = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          message.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          message.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
-
       const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置'));
       async function handleSubmit() {
@@ -162,8 +118,9 @@
           const { createMessage } = useMessage();
           const values = await validate();
           if (!values) return;
-          if (tenantLogo.value !== '') {
-            values.avatar = tenantLogo.value;
+          if (Reflect.has(values, 'avatar')) {
+            const file = (values.avatar || []).at(0) || {};
+            values.avatar = file.url || null;
           }
           if (editId.value !== '') {
             values.id = editId.value;
@@ -188,9 +145,6 @@
         registerDrawer,
         registerForm,
         handleSubmit,
-        customUpload,
-        beforeUpload,
-        tenantLogo,
         loading,
         streamConfigOptions,
         registerSteramingDrawer,
--- a/src/views/camera/manage/config.data.ts
View file @70490d4
+++ b/src/views/camera/manage/config.data.ts
View file @70490d4
@@ -5,6 +5,9 @@ import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
@@ -102,8 +105,33 @@ export const formSchema: QFormSchema[] = [
   {
     field: 'avatar',
     label: '视频封面',
-    slot: 'iconSelect',
-    component: 'Input',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
   },
   {
     field: 'name',
--- a/src/views/device/list/config/data.ts
View file @70490d4
+++ b/src/views/device/list/config/data.ts
View file @70490d4
@@ -12,6 +12,9 @@ import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/compo
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
 import { TaskTypeEnum } from '/@/views/task/center/config';
 import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
@@ -29,8 +32,33 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'icon',
     label: '设备图片',
-    slot: 'iconSelect',
-    component: 'Input',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
   },
   {
     field: 'alias',
--- a/src/views/device/list/config/device.data.ts
View file @70490d4
+++ b/src/views/device/list/config/device.data.ts
View file @70490d4
@@ -32,14 +32,14 @@ export const columns: BasicColumn[] = [
           h(
             'div',
             {
-              class: 'cursor-pointer',
+              class: 'cursor-pointer truncate',
             },
             `${record.alias}`
           ),
         h(
           'div',
           {
-            class: 'cursor-pointer text-blue-500',
+            class: 'cursor-pointer text-blue-500 truncate',
             onClick: () => {
               handeleCopy(`${record.name}`);
             },
--- a/src/views/device/list/cpns/modal/DeviceDetailDrawer.vue
View file @70490d4
+++ b/src/views/device/list/cpns/modal/DeviceDetailDrawer.vue
View file @70490d4
@@ -5,7 +5,7 @@
     @register="register"
     destroyOnClose
     @close="closeDrawer"
-    :title="deviceDetail.alias || deviceDetail.name"
+    :title="drawerTitle"
     width="80%"
   >
     <Tabs v-model:activeKey="activeKey" :size="size">
@@ -58,7 +58,7 @@
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, computed } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { Tabs } from 'ant-design-vue';
@@ -122,6 +122,13 @@
         emit('openGatewayDeviceDetail', { id: data.gatewayId });
       };
+      const drawerTitle = computed(() => {
+        return (
+          deviceDetail.value?.alias?.slice(0, 40) + '...' ||
+          deviceDetail.value?.name?.slice(0, 40) + '...'
+        );
+      });
+
       return {
         size,
         activeKey,
@@ -132,6 +139,7 @@
         tbDeviceId,
         handleOpenTbDeviceDetail,
         handleOpenGatewayDevice,
+        drawerTitle,
       };
     },
   });
--- a/src/views/device/list/cpns/modal/DeviceModal.vue
View file @70490d4
+++ b/src/views/device/list/cpns/modal/DeviceModal.vue
View file @70490d4
@@ -157,7 +157,7 @@
               sn: stepRecord.name,
               customerId: currentDeviceData.customerId,
               deviceInfo: {
-                avatar: DeviceStep1Ref.value?.devicePic,
+                avatar: stepRecord?.icon,
                 ...DeviceStep1Ref.value?.devicePositionState,
               },
             };
@@ -169,7 +169,7 @@
               ...stepRecord,
               sn: stepRecord.name,
               deviceInfo: {
-                avatar: DeviceStep1Ref.value?.devicePic,
+                avatar: stepRecord?.icon,
                 ...DeviceStep1Ref.value?.devicePositionState,
               },
               deviceToken:
--- a/src/views/device/list/cpns/step/DeviceStep1.vue
View file @70490d4
+++ b/src/views/device/list/cpns/step/DeviceStep1.vue
View file @70490d4
@@ -22,24 +22,6 @@
             </div>
           </div>
         </template>
-        <template #iconSelect>
-          <Upload
-            name="avatar"
-            accept=".png,.jpg,.jpeg,.gif"
-            :show-upload-list="false"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :customRequest="customUpload"
-            :before-upload="beforeUpload"
-          >
-            <img v-if="devicePic" :src="devicePic" alt="avatar" />
-            <div v-else>
-              <LoadingOutlined v-if="loading" />
-              <PlusOutlined v-else />
-              <div class="ant-upload-text">图片上传</div>
-            </div>
-          </Upload>
-        </template>
         <template #snCode="{ model, field }">
           <div class="flex">
             <Input v-model:value="model[field]" placeholder="请输入设备名称" />
@@ -115,10 +97,9 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../../config/data';
   import { useScript } from '/@/hooks/web/useScript';
-  import { Input, Upload, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
-  import { EnvironmentTwoTone, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+  import { Input, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
+  import { EnvironmentTwoTone } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
-  import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { generateSNCode } from '/@/api/device/deviceManager';
   import icon from '/@/assets/images/wz.png';
@@ -130,21 +111,20 @@
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import { TaskTypeEnum } from '/@/views/task/center/config';
   import { toRaw } from 'vue';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
   export default defineComponent({
     components: {
       BasicForm,
       Input,
       AutoComplete,
-      Upload,
       EnvironmentTwoTone,
-      PlusOutlined,
       Modal,
       Form,
       FormItem: Form.Item,
       Row,
       Col,
-      LoadingOutlined,
       DeptDrawer,
     },
     props: {
@@ -202,8 +182,11 @@
       async function nextStep() {
         try {
           let values = await validate();
-          values = { devicePic: devicePic.value, ...positionState, ...values };
-          delete values.icon;
+          if (Reflect.has(values, 'icon')) {
+            const file = (unref(values.icon) || []).at(0) || {};
+            values.icon = file.url || null;
+          }
+          values = { ...positionState, ...values };
           delete values.deviceAddress;
           emit('next', values);
           // 获取输入的数据
@@ -405,6 +388,11 @@
         positionState.address = deviceInfo.address;
         devicePositionState.value = { ...toRaw(positionState) };
         devicePic.value = deviceInfo.avatar;
+        if (deviceInfo.avatar) {
+          setFieldsValue({
+            icon: [{ uid: buildUUID(), name: 'name', url: deviceInfo.avatar } as FileItem],
+          });
+        }
         setFieldsValue({
           ...data,
           code: data?.code,
@@ -414,6 +402,10 @@
       // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
         const value = getFieldsValue();
+        if (Reflect.has(value, 'icon')) {
+          const file = (value.icon || []).at(0) || {};
+          value.icon = file.url || null;
+        }
         return {
           ...value,
           ...(value?.code || value?.addressCode
--- a/src/views/device/list/cpns/tabs/Detail.vue
View file @70490d4
+++ b/src/views/device/list/cpns/tabs/Detail.vue
View file @70490d4
@@ -47,7 +47,7 @@
           </div>
         </BasicModal>
       </div>
-      <Description @register="register" class="mt-4" :data="deviceDetail" />
+      <Description @register="register" class="mt-4" :data="deviceDetail" :contentStyle="CS" />
     </div>
     <div class="mt-4" v-if="!isCustomer">
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
@@ -116,6 +116,15 @@
         column: 2,
       });
+      const CS = {
+        'max-width': '600px',
+        'word-break': 'break-all',
+        overflow: 'hidden',
+        display: '-webkit-box',
+        '-webkit-line-clamp': 2,
+        '-webkit-box-orient': 'vertical',
+      };
+
       // 地图
       const mapWrapRef = ref<HTMLDivElement>();
@@ -217,6 +226,7 @@
         remoteConnectiondGateway,
         locationImage,
         isCustomer,
+        CS,
       };
     },
   });
--- a/src/views/device/profiles/device.profile.data.ts
View file @70490d4
+++ b/src/views/device/profiles/device.profile.data.ts
View file @70490d4
@@ -12,6 +12,9 @@ import { EventType, EventTypeColor, EventTypeName } from '../list/cpns/tabs/Even
 import { useClipboard } from '@vueuse/core';
 import { useMessage } from '/@/hooks/web/useMessage';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 export enum Mode {
   CARD = 'card',
@@ -162,8 +165,33 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'image',
     label: '上传图片',
-    component: 'Input',
-    slot: 'imageSelect',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
   },
   {
     field: 'deviceType',
--- a/src/views/device/profiles/step/DeviceConfigurationStep.vue
View file @70490d4
+++ b/src/views/device/profiles/step/DeviceConfigurationStep.vue
View file @70490d4
 <template>
   <div class="step1">
-    <BasicForm @register="register">
-      <template #imageSelect>
-        <Upload
-          style="width: 20vw"
-          name="avatar"
-          accept=".png,.jpg,.jpeg,.gif"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUploadqrcodePic"
-          :before-upload="beforeUploadqrcodePic"
-        >
-          <img
-            v-if="deviceConfigPic"
-            :src="deviceConfigPic"
-            alt=""
-            style="width: 6.25rem; height: 6.25rem"
-          />
-          <div v-else>
-            <LoadingOutlined v-if="loading" />
-            <PlusOutlined v-else />
-            <div class="ant-upload-text">图片上传</div>
-          </div>
-        </Upload>
-      </template>
-    </BasicForm>
+    <BasicForm @register="register" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, nextTick } from 'vue';
+  import { nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../device.profile.data';
-  import { uploadApi } from '/@/api/personal/index';
-  import { Upload } from 'ant-design-vue';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import type { FileItem } from '/@/components/Upload/src/typing';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
   const emits = defineEmits(['next', 'emitDeviceType']);
-  const loading = ref(false);
-  const { createMessage } = useMessage();
-  const deviceConfigPic = ref('');
   const props = defineProps({
     ifShowBtn: { type: Boolean, default: true },
   });
@@ -66,32 +35,6 @@
         disabled: nameStatus,
       },
     });
-  const customUploadqrcodePic = async ({ file }) => {
-    if (beforeUploadqrcodePic(file)) {
-      deviceConfigPic.value = '';
-      loading.value = true;
-      const formData = new FormData();
-      formData.append('file', file);
-      const response = await uploadApi(formData);
-      if (response.fileStaticUri) {
-        deviceConfigPic.value = response.fileStaticUri;
-        loading.value = false;
-      }
-    }
-  };
-  const beforeUploadqrcodePic = (file: FileItem) => {
-    const isJpgOrPng =
-      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
-    if (!isJpgOrPng) {
-      createMessage.error('只能上传图片文件!');
-    }
-    const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-    if (!isLt2M) {
-      createMessage.error('图片大小不能超过5MB!');
-    }
-    return isJpgOrPng && isLt2M;
-  };
-
   const setFieldsdefaultRuleChainId = async (id) => {
     await nextTick();
     setFieldsValue({ defaultRuleChainId: id });
@@ -105,20 +48,28 @@
   }
   //回显数据
   const setFormData = (v) => {
-    setFieldsValue(v);
-    deviceConfigPic.value = v.image;
+    if (v.image) {
+      setFieldsValue({
+        image: [{ uid: buildUUID(), name: 'name', url: v.image } as FileItem],
+      });
+    }
+    const { image, ...params } = v;
+    console.log(image);
+    setFieldsValue({ ...params });
   };
   //获取数据
   async function getFormData() {
     const values = await validate();
     if (!values) return;
-    Reflect.set(values, 'image', deviceConfigPic.value);
+    if (Reflect.has(values, 'image')) {
+      const file = (values.image || []).at(0) || {};
+      values.image = file.url || null;
+    }
     return values;
   }
   //清空数据
   const resetFormData = () => {
     resetFields();
-    deviceConfigPic.value = '';
   };
   const editOrAddDeviceTypeStatus = (status: boolean) => {
--- a/src/views/message/config/index.vue
View file @70490d4
+++ b/src/views/message/config/index.vue
View file @70490d4
@@ -17,7 +17,7 @@
         </Authority>
       </template>
       <template #config="{ record }">
-        <Authority value="api:yt:message:get:config">
+        <Authority value="api:yt:template:get">
           <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
         </Authority>
       </template>