1. 解决类型问题 2. 解决图片上传未带token问题 3. 编辑通知接口对接 4. 修改系统通知列表对齐样式

src/api/message/sysnotion-config.ts

@@ -1,5 +1,5 @@
 import { http } from '@/utils/http/axios';
-import { RuleFormProps } from '@/views/message/sysnotion-config/type';
+import { RuleFormAdd } from '@/views/message/sysnotion-config/type';
 // export interface queryReportConfigListParams {
 //   content?: string;
 //   title?: string;
@@ -8,7 +8,7 @@ import { RuleFormProps } from '@/views/message/sysnotion-config/type';
 //   userGroupList?: number[];
 //   customUserList?: number[];
 // }
-export function addSystemMessage(params: RuleFormProps) {
+export function addSystemMessage(params: RuleFormAdd) {
   return http.request<number>({
     url: '/systemMessage/addSystemMessage',
     method: 'post',
@@ -27,3 +27,11 @@ export function viewSystemMessage(id: number) {
     method: 'get',
   });
 }
+
+export function updateSystemMessage(params: RuleFormAdd) {
+  return http.request({
+    url: '/systemMessage/updateSystemMessage',
+    method: 'post',
+    params,
+  })
+}

src/views/message/components/PushObject.vue

@@ -235,17 +235,17 @@
     });
   });
   watchEffect(() => {
-    if (props.recipientType) {
+    if (props.recipientType != null) {
       ruleForm.recipientType = props.recipientType;
     }
-    if (props.userGroupList) {
+    if (props.userGroupList != null) {
       ruleForm.userGroupList = props.userGroupList.map((item) => item.userGroupId);
     }
-    if (props.customUserList) {
+    if (props.customUserList != null) {
       ruleForm.customUserList = formatCustomUserList(props.customUserList);
       selectedUser.value = formatCustomUserList(props.customUserList);
     }
-    if (props.disabled) {
+    if (props.disabled != null) {
       disabled.value = props.disabled;
     }
   });

src/views/message/sysnotion-config/SysnotionConfig.vue

@@ -30,16 +30,17 @@
 
 <script lang="ts" setup>
   import { useRoute, useRouter } from 'vue-router';
-  import { ref, reactive, onMounted } from 'vue';
+  import { ref, reactive, onMounted, computed } from 'vue';
   import { storeToRefs } from 'pinia';
-  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { ElMessage } from 'element-plus';
   import { useUserStore } from '@/store/modules/user';
   import {
     addSystemMessage,
     confirmReportConfig,
+    updateSystemMessage,
     viewSystemMessage,
   } from '@/api/message/sysnotion-config';
-  import { RuleFormProps, MessageTypeEnum } from './type';
+  import { RuleFormView, MessageTypeEnum, ContentTypeEnum, RuleFormAdd } from './type';
   import BasicInfo from './compontents/BasicInfo.vue';
   import ContentConfig from './compontents/ContentConfig.vue';
   import RightCard from './compontents/RightCard.vue';
@@ -49,21 +50,24 @@
   const { info } = storeToRefs(useUser);
   const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
   const contentConfigRef = ref<InstanceType<typeof ContentConfig>>();
-  const ruleForm = reactive<RuleFormProps>({
+  const ruleForm = reactive<RuleFormView>({
     messageType: MessageTypeEnum.BANNER,
-    bannerUrl: '',
     title: '',
+    bannerUrl: '',
     pushChannel: [],
-    recipientType: {},
     expirationTime: '',
+    recipientType: 1, // 全员
+    userGroupList: [],
+    customUserList: [],
     introduction: '',
-    contentType: 1,
+    contentType: ContentTypeEnum.RICHTEXT,
     content: '',
+    contentUrl: '',
     operator: info.value.nickname,
   });
 
   // 原始数据副本
-  let originalData: RuleFormProps = {
+  let originalData: RuleFormView = {
     ...ruleForm,
   };
 
@@ -86,12 +90,14 @@
         ruleForm.messageType = res.messageType;
         ruleForm.content = res.content ? res.content : ' ';
         ruleForm.pushChannel = res.pushChannel;
-        ruleForm.recipientType.recipientType = res.recipientType;
+        ruleForm.recipientType = res.recipientType;
+
         if (res.recipientType === 2) {
-          ruleForm.recipientType.userGroupList = res.userGroupList;
-        }
-        if (res.recipientType === 3) {
-          ruleForm.recipientType.customUserList = res.customUserList;
+          // 若选择分组
+          ruleForm.userGroupList = res.userGroupList;
+        } else if (res.recipientType === 3) {
+          // 若选择自定义
+          ruleForm.customUserList = res.customUserList;
         }
       });
     }
@@ -131,33 +137,34 @@
     // to save dada
     const baseInfoData = await basicInfoRef.value?.validate();
     const contentConfigData = contentConfigRef.value?.buildFormdata();
-    console.log('contentConfigData: ', contentConfigData);
-    console.log('baseInfoDara: ', baseInfoData);
+    console.log('baseInfoData', baseInfoData);
+    console.log('contentConfigData', contentConfigData);
 
-    const { messageType, title, pushChannel, expirationTime, bannerUrl, recipientType } =
-      baseInfoData;
-    const params = {
+    const params: RuleFormAdd = {
+      ...baseInfoData!,
       ...contentConfigData,
-      messageType,
-      title,
-      pushChannel,
-      expirationTime,
-      bannerUrl,
-      recipientType: recipientType.recipientType,
-      customUserList: recipientType.customUserList,
-      userGroupList: recipientType.userGroupList,
-      contentUrl: '',
     };
     delete params.operator;
-    addSystemMessage(params).then((res) => {
-      if (res) {
-        ruleForm.id = res;
+
+
+    if (!sysId) {
+      addSystemMessage(params).then((res) => {
+        if (res) {
+          ruleForm.id = res;
+          ElMessage({
+            message: '暂存成功!',
+            type: 'success',
+          });
+        }
+      });
+    } else {
+      updateSystemMessage(params).then(() => {
         ElMessage({
-          message: '暂存成功!',
-          type: 'success',
+            message: '编辑成功!',
+            type: 'success',
         });
-      }
-    });
+      });
+    }
   };
 
   const submitForm = () => {
@@ -178,11 +185,11 @@
   };
 
   // 比对方法
-  const compareData = (newData: RuleFormProps, oldData: RuleFormProps) => {
-    const diff: Partial<Omit<RuleFormProps, 'content'>> = {};
+  const compareData = (newData: RuleFormView, oldData: RuleFormView) => {
+    const diff: Partial<Omit<RuleFormView, 'content'>> = {};
     for (const key in newData) {
-      if (newData[key as keyof RuleFormProps] !== oldData[key as keyof RuleFormProps]) {
-        diff[key as keyof RuleFormProps] = newData[key as keyof RuleFormProps];
+      if (newData[key as keyof RuleFormView] !== oldData[key as keyof RuleFormView]) {
+        diff[key as keyof RuleFormView] = newData[key as keyof RuleFormView];
       }
     }
     return diff;

src/views/message/sysnotion-config/compontents/BasicInfo.vue

@@ -46,14 +46,15 @@
         </el-upload>
       </el-form-item>
       <el-form-item label="推送渠道: " prop="pushChannel">
-        <el-checkbox
-          v-model="ruleForm.pushChannel"
-          v-for="item in pushChannelName"
-          :key="item.value"
-          :value="item.value"
-          :label="item.label"
-          :disabled="isDisabled"
-        />
+        <el-checkbox-group v-model="ruleForm.pushChannel">
+          <el-checkbox
+            v-for="item in pushChannelName"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+            :disabled="isDisabled"
+          />
+        </el-checkbox-group>
       </el-form-item>
       <el-form-item label="失效时间: " prop="expirationTime">
         <el-date-picker
@@ -67,9 +68,9 @@
       </el-form-item>
       <PushObject
         ref="childFromRef"
-        :recipientType="ruleForm.recipientType.recipientType"
-        :userGroupList="ruleForm.recipientType.userGroupList"
-        :customUserList="ruleForm.recipientType.customUserList"
+        :recipientType="ruleForm.recipientType"
+        :userGroupList="ruleForm.userGroupList"
+        :customUserList="ruleForm.customUserList"
         :disabled="isDisabled"
       />
     </el-form>
@@ -77,19 +78,19 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, computed } from 'vue';
+  import { ref, watch, computed, unref } from 'vue';
   import type { FormInstance, FormProps, FormRules, UploadProps } from 'element-plus';
   import { ElMessage } from 'element-plus';
   import { Plus } from '@element-plus/icons-vue';
   import PushObject from '../../components/PushObject.vue';
   import CardLayout from './CardLayout.vue';
-  import { RuleFormProps, MessageTypeEnum } from '../type';
+  import { RuleFormView, MessageTypeEnum, RuleFormAdd } from '../type';
   import { messageTypeOptions, pushChannelName } from '../../constant';
   import urlJoin from 'url-join';
   import { useGlobSetting } from '@/hooks/setting';
   const { urlPrefix } = useGlobSetting();
   interface Props {
-    dataSoure: RuleFormProps;
+    dataSoure: RuleFormView;
     isDisabled: boolean;
   }
   const props = defineProps<Props>();
@@ -102,7 +103,7 @@
   /**
    * 表单相关操作
    */
-  type Rule = Omit<RuleFormProps, 'introduction' | 'contentType' | 'content' | 'operator'>;
+  type Rule = Omit<RuleFormView, 'introduction' | 'contentType' | 'content' | 'contentUrl' | 'operator'>;
   const formRules: FormRules<Rule> = {
     messageType: [{ required: true, trigger: 'change', message: '请选择消息样式' }],
     title: [{ required: true, trigger: 'change', message: '请输入消息标题' }],
@@ -111,16 +112,14 @@
     bannerUrl: [{ required: true, trigger: 'change', message: '请选择banner图片' }],
   };
   const ruleForm = ref<Rule>({
-    title: '',
     messageType: MessageTypeEnum.BANNER,
+    title: '',
+    bannerUrl:'',
     pushChannel: [],
-    recipientType: {
-      recipientType: 0,
-      userGroupList: [],
-      customUserList: [],
-    },
     expirationTime: '',
-    bannerUrl: '',
+    recipientType: 1, // 默认全员
+    userGroupList:[],
+    customUserList: [],
   });
 
   watch(
@@ -147,14 +146,19 @@
         childFromRef.value!.submitForm().then((res) => {
           isValidate.value = res;
         });
+
+        const basicInfo = { ...unref(ruleForm) } as RuleFormAdd;
+
         if (childValue) {
-          ruleForm.value.recipientType = { ...childValue };
-        }
-        return ruleForm.value;
-      } else {
+          basicInfo.recipientType = childValue.recipientType!;
+          basicInfo.userGroupList = childValue.userGroupList!;
+          basicInfo.customUserList = childValue.customUserList!;
+        } 
+        return basicInfo;
       }
     } catch (error) {
-      console.log('error: ', error);
+      ElMessage.error('请完善信息填写');
+      throw error;
     }
   };
 
@@ -163,10 +167,10 @@
   };
 
   const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
-    if (rawFile.type !== 'image/jpeg') {
+    if (!['image/jpeg', 'image/png'].includes(rawFile.type)) {
       ElMessage.error('Avatar picture must be JPG format!');
       return false;
-    } else if (rawFile.size / 1024 / 1024 > 2) {
+    } else if (rawFile.size / 1024 / 1024 > 5) {
       ElMessage.error('Avatar picture size can not exceed 2MB!');
       return false;
     }

src/views/message/sysnotion-config/compontents/ContentConfig.vue

@@ -74,32 +74,31 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue';
+  import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
   import type { FormProps } from 'element-plus';
   import '@wangeditor/editor/dist/css/style.css'; // 引入 css
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
-  import { type IEditorConfig } from '@wangeditor/editor-for-vue';
-  import { RuleFormProps, ContentTypeEnum } from './../type';
+  import type { IEditorConfig } from '@wangeditor/editor';
+  import { RuleFormView, ContentTypeEnum } from './../type';
   import { contentTypeOptinos } from '../../constant';
   import CardLayout from './CardLayout.vue';
+  import { useUserStore } from '@/store/modules/user';
 
   interface Props {
-    dataSoure: RuleFormProps;
+    dataSoure: RuleFormView;
     isDisabled: boolean;
   }
   const props = defineProps<Props>();
   const labelPosition = ref<FormProps['labelPosition']>('left');
+  const userStore = useUserStore();
 
   /**
    * 表单相关操作
    */
-  type Rule = Pick<
-    RuleFormProps,
-    'introduction' | 'contentType' | 'content' | 'operator' | 'contentUrl'
-  >;
+  type Rule = Pick<RuleFormView, 'introduction' | 'contentType' | 'content' | 'operator' | 'contentUrl'>;
   const ruleForm = ref<Rule>({
     introduction: '',
-    contentType: 1,
+    contentType: ContentTypeEnum.RICHTEXT,
     content: '',
     operator: '',
     contentUrl: '',
@@ -148,22 +147,21 @@
     placeholder: '请输入内容...',
     MENU_CONF: {},
   };
-  let picName = '';
-  editorConfig.MENU_CONF['uploadImage'] = {
+  
+  editorConfig.MENU_CONF!['uploadImage'] = {
     // 上传图片的配置
     server: '/eye_api_bak/api/systemMessage/uploadPicture', // form-data fieldName ，默认值 'wangeditor-uploaded-image'
     fieldName: 'file',
     // 单个文件的最大体积限制，默认为 2M
-    maxFileSize: 1 * 1024 * 1024, // 1M
+    maxFileSize: 5 * 1024 * 1024, // 1M
     // 最多可上传几个文件，默认为 100
     maxNumberOfFiles: 10,
     // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-    // allowedFileTypes: ['image/*'],
+    allowedFileTypes: ['image/*'],
     // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
     meta: {
       // type: 1,
       // targetId: 5,
-      fileName: picName,
       bizType: 'ALGO',
     },
     // 将 meta 拼接到 url 参数中，默认 false
@@ -172,6 +170,8 @@
     headers: {
       Accept: 'application/json, text/plain, */*',
       // ContentType: 'application/json;charset=UTF-8'
+      Satoken: userStore.getToken,
+      Tenantid: userStore.getTenantId,
     },
     // 跨域是否传递 cookie ，默认为 false
     withCredentials: true,
@@ -179,9 +179,7 @@
     timeout: 10 * 1000, // 5 秒
     // 上传之前触发
     onBeforeUpload(file) {
-      console.log('file: ', file);
-      // file 选中的文件，格式如 { key: file }
-      picName = file.name;
+      console.log('file: ', file); 
       return file;
       // 可以 return
       // 1. return file 或者 new 一个 file ，接下来将上传

src/views/message/sysnotion-config/type.ts

@@ -1,3 +1,5 @@
+import { Group } from "konva/lib/Group";
+
 export interface UserList {
   userId: number;
   userLoginName: string;
@@ -20,21 +22,55 @@ export interface ObjectFrom {
   customUserList?: UserList[];
 }
 
-export interface RuleFormProps {
+export interface RuleFormBase {
   id?: number;
-  messageType: number;
+  /**
+   * 基础信息配置
+   */
+  // 消息样式
+  messageType: MessageTypeEnum;
+  // 消息标题
   title: string;
+  // 如果消息类型选择 banner，需提供上传banner图片
+  bannerUrl?: string;
+  // 推送渠道
   pushChannel: number[];
-  recipientType: ObjectFrom;
+  // 失效时间
   expirationTime: string;
+  // 推送对象 -- 类型 
+  recipientType: number;
+
+  /**
+   * 内容配置部分
+   */
+  // 内容简介
   introduction?: string;
-  contentType?: number;
+  // 内容详情类型
+  contentType?: ContentTypeEnum;
+  // 内容详情内容，如果填写富文本（二选一）
   content?: string;
-  operator: string;
-  bannerUrl?: string;
+  // 内容详情内容，如果填写链接（二选一）
   contentUrl?: string;
+  // 操作人
+  operator?: string;
+}
+
+export interface RuleFormView extends RuleFormBase {
+  // 推送对象，如果选择 分组类型
+  userGroupList?: GroupList[];
+  // 推送对象，如果选择 自定义类型
+  customUserList?: UserList[];
+}
+
+
+export interface RuleFormAdd extends RuleFormBase {
+  // 推送对象，如果选择 分组类型
+  userGroupList?: number[];
+  // 推送对象，如果选择 自定义类型
+  customUserList?: number[];
 }
 
+
 export enum ContentTypeEnum {
   RICHTEXT = 1,
   LINK = 2,

src/views/message/systemNotifications/components/systemNotificationTable.vue

@@ -13,13 +13,11 @@
     :data="sysNotionData"
     stripe
     height="calc(100vh - 400px)"
-    :cell-style="{ textAlign: 'center' }"
-    :header-cell-style="{ 'text-align': 'center' }"
     style="width: 100%; margin-top: 16px; --el-table-border-color: none"
   >
-    <el-table-column width="380" prop="title" label="消息标题" />
+    <el-table-column prop="title" label="消息标题" />
 
-    <el-table-column width="200" prop="pushChannel" label="推送渠道">
+    <el-table-column width="300" prop="pushChannel" label="推送渠道">
       <template #default="scope">
         <div>
           {{ scope.row.pushChannel.map((channel) => pushChannelMapping[channel]).join('，') }}
@@ -37,22 +35,20 @@
 
     <el-table-column width="135" prop="status" label="推送状态">
       <template #default="scope">
-        <div class="pushstatus" v-if="scope.row.status === 0"
-          ><img src="../img//prepareToPush.png" alt=""
-        /></div>
-        <div class="pushstatus" v-else><img src="../img/completed.png" alt="" /></div>
+        <img src="../img//prepareToPush.png" alt="" v-if="scope.row.status === 0" />
+        <img src="../img/completed.png" alt="" v-else />
       </template>
     </el-table-column>
 
-    <el-table-column prop="pushAt" label="推送时间" />
+    <el-table-column prop="pushAt" label="推送时间" width="200px" />
 
-    <el-table-column label="操作" fixed="right">
+    <el-table-column label="操作" fixed="right" width="120px">
       <template #default="scope">
         <div class="operation">
-          <el-tooltip class="box-item" effect="light" content="查看" placement="bottom">
+          <el-tooltip effect="light" content="查看" placement="bottom">
             <img src="../img/view.png" @click="handleView(scope.row.id)" />
           </el-tooltip>
-          <el-tooltip class="box-item" effect="light" content="删除" placement="bottom">
+          <el-tooltip effect="light" content="删除" placement="bottom">
             <img src="../img/delete.png" @click="handleDelete(scope.row.id)" />
           </el-tooltip>
         </div>
@@ -179,11 +175,8 @@
 
   .operation {
     display: flex;
-    justify-content: center;
-    /* :first-child {
-      margin-right: 20px;
-    } */
-    :nth-child(2) {
+    
+    img + img {
       margin-left: 20px;
     }
   }