审批流程显示方式更新，多个视图页面及组件修改。

src/api/oa_message.ts

@@ -0,0 +1,31 @@
+import request from "@/utils/request";
+
+// 消息表列表
+export function apiOaMessageLists(params: any) {
+  return request.get({ url: "/works.oa_message/lists", params });
+}
+
+// 添加消息表
+export function apiOaMessageAdd(params: any) {
+  return request.post({ url: "/works.oa_message/add", params });
+}
+
+// 编辑消息表
+export function apiOaMessageEdit(params: any) {
+  return request.post({ url: "/works.oa_message/edit", params });
+}
+
+// 删除消息表
+export function apiOaMessageDelete(params: any) {
+  return request.post({ url: "/works.oa_message/delete", params });
+}
+
+// 消息表详情
+export function apiOaMessageDetail(params: any) {
+  return request.get({ url: "/works.oa_message/detail", params });
+}
+
+// 消息表详情
+export function apiOaMsgNums(params: any) {
+  return request.get({ url: "/index/index", params });
+}

src/layout/default/components/header/msg.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="position:relative;" class="cursor-pointer" @click="handleClick">
-        <div class="num">10</div>
+        <div class="num" v-show="num">{{ num }}</div>
         <el-icon :size="30">
             <Bell />
         </el-icon>
@@ -9,11 +9,35 @@
 <script setup>
 import { Bell } from '@element-plus/icons-vue'
 import Notifce from './../../../../utils/Notifce.js'
+import { apiOaMsgNums } from '@/api/oa_message'
+import { useRouter } from "vue-router"
+
+const router = useRouter()
 
 const handleClick = () => {
-    Notifce.info("你有新的消息")
+    num.value = 0
+    router.push("/works/oa_message")
 }
 
+const num = ref(0)
+
+const getNums = async () => {
+    let res = await apiOaMsgNums()
+    if (res.message_count == 0) {
+        return num.value = 0
+    }
+    if (res.message_count != num.value) {
+        Notifce.info("你有新的消息")
+        num.value = res.message_count
+    }
+
+}
+
+setInterval(() => {
+    getNums()
+}, 5000);
+getNums()
+
 </script>
 
 

src/utils/request/index.ts

@@ -1,123 +1,128 @@
-import { merge } from 'lodash'
+import { merge } from "lodash";
-import configs from '@/config'
+import configs from "@/config";
-import { Axios } from './axios'
+import { Axios } from "./axios";
-import { ContentTypeEnum, RequestCodeEnum, RequestMethodsEnum } from '@/enums/requestEnums'
+import {
-import type { AxiosHooks } from './type'
+  ContentTypeEnum,
-import { clearAuthInfo, getToken } from '../auth'
+  RequestCodeEnum,
-import feedback from '../feedback'
+  RequestMethodsEnum,
-import NProgress from 'nprogress'
+} from "@/enums/requestEnums";
-import { AxiosError, type AxiosRequestConfig } from 'axios'
+import type { AxiosHooks } from "./type";
-import router from '@/router'
+import { clearAuthInfo, getToken } from "../auth";
-import { PageEnum } from '@/enums/pageEnum'
+import feedback from "../feedback";
+import NProgress from "nprogress";
+import { AxiosError, type AxiosRequestConfig } from "axios";
+import router from "@/router";
+import { PageEnum } from "@/enums/pageEnum";
 
 // 处理axios的钩子函数
 const axiosHooks: AxiosHooks = {
-    requestInterceptorsHook(config) {
+  requestInterceptorsHook(config) {
-        NProgress.start()
+    // NProgress.start()
-        const { withToken, isParamsToData } = config.requestOptions
+    const { withToken, isParamsToData } = config.requestOptions;
-        const params = config.params || {}
+    const params = config.params || {};
-        const headers = config.headers || {}
+    const headers = config.headers || {};
 
-        // 添加token
+    // 添加token
-        if (withToken) {
+    if (withToken) {
-            const token = getToken()
+      const token = getToken();
-            headers.token = token
+      headers.token = token;
-        }
-        // POST请求下如果无data，则将params视为data
-        if (
-            isParamsToData &&
-            !Reflect.has(config, 'data') &&
-            config.method?.toUpperCase() === RequestMethodsEnum.POST
-        ) {
-            config.data = params
-            config.params = {}
-        }
-        config.headers = headers
-        return config
-    },
-    requestInterceptorsCatchHook(err) {
-        NProgress.done()
-        return err
-    },
-    async responseInterceptorsHook(response) {
-        NProgress.done()
-        const { isTransformResponse, isReturnDefaultResponse } = response.config.requestOptions
-
-        //返回默认响应，当需要获取响应头及其他数据时可使用
-        if (isReturnDefaultResponse) {
-            return response
-        }
-        // 是否需要对数据进行处理
-        if (!isTransformResponse) {
-            return response.data
-        }
-        const { code, data, show, msg } = response.data
-        switch (code) {
-            case RequestCodeEnum.SUCCESS:
-                if (show) {
-                    msg && feedback.msgSuccess(msg)
-                }
-                return data
-            case RequestCodeEnum.FAIL:
-                if (show) {
-                    msg && feedback.msgError(msg)
-                }
-                return Promise.reject(data)
-            case RequestCodeEnum.LOGIN_FAILURE:
-                clearAuthInfo()
-                router.push(PageEnum.LOGIN)
-                return Promise.reject()
-            case RequestCodeEnum.OPEN_NEW_PAGE:
-                window.location.href = data.url
-                return data
-            default:
-                return data
-        }
-    },
-    responseInterceptorsCatchHook(error) {
-        NProgress.done()
-        if (error.code !== AxiosError.ERR_CANCELED) {
-            error.message && feedback.msgError(error.message)
-        }
-        return Promise.reject(error)
     }
-}
+    // POST请求下如果无data，则将params视为data
+    if (
+      isParamsToData &&
+      !Reflect.has(config, "data") &&
+      config.method?.toUpperCase() === RequestMethodsEnum.POST
+    ) {
+      config.data = params;
+      config.params = {};
+    }
+    config.headers = headers;
+    return config;
+  },
+  requestInterceptorsCatchHook(err) {
+    // NProgress.done();
+    return err;
+  },
+  async responseInterceptorsHook(response) {
+    // NProgress.done();
+    const { isTransformResponse, isReturnDefaultResponse } =
+      response.config.requestOptions;
+
+    //返回默认响应，当需要获取响应头及其他数据时可使用
+    if (isReturnDefaultResponse) {
+      return response;
+    }
+    // 是否需要对数据进行处理
+    if (!isTransformResponse) {
+      return response.data;
+    }
+    const { code, data, show, msg } = response.data;
+    switch (code) {
+      case RequestCodeEnum.SUCCESS:
+        if (show) {
+          msg && feedback.msgSuccess(msg);
+        }
+        return data;
+      case RequestCodeEnum.FAIL:
+        if (show) {
+          msg && feedback.msgError(msg);
+        }
+        return Promise.reject(data);
+      case RequestCodeEnum.LOGIN_FAILURE:
+        clearAuthInfo();
+        router.push(PageEnum.LOGIN);
+        return Promise.reject();
+      case RequestCodeEnum.OPEN_NEW_PAGE:
+        window.location.href = data.url;
+        return data;
+      default:
+        return data;
+    }
+  },
+  responseInterceptorsCatchHook(error) {
+    // NProgress.done();
+    if (error.code !== AxiosError.ERR_CANCELED) {
+      error.message && feedback.msgError(error.message);
+    }
+    return Promise.reject(error);
+  },
+};
 
 const defaultOptions: AxiosRequestConfig = {
-    //接口超时时间
+  //接口超时时间
-    timeout: configs.timeout,
+  timeout: configs.timeout,
-    // 基础接口地址
+  // 基础接口地址
-    baseURL: configs.baseUrl,
+  baseURL: configs.baseUrl,
-    //请求头
+  //请求头
-    headers: { 'Content-Type': ContentTypeEnum.JSON, version: configs.version },
+  headers: { "Content-Type": ContentTypeEnum.JSON, version: configs.version },
-    // 处理 axios的钩子函数
+  // 处理 axios的钩子函数
-    axiosHooks: axiosHooks,
+  axiosHooks: axiosHooks,
-    // 每个接口可以单独配置
+  // 每个接口可以单独配置
-    requestOptions: {
+  requestOptions: {
-        // 是否将params视为data参数，仅限post请求
+    // 是否将params视为data参数，仅限post请求
-        isParamsToData: true,
+    isParamsToData: true,
-        //是否返回默认的响应
+    //是否返回默认的响应
-        isReturnDefaultResponse: false,
+    isReturnDefaultResponse: false,
-        // 需要对返回数据进行处理
+    // 需要对返回数据进行处理
-        isTransformResponse: true,
+    isTransformResponse: true,
-        // 接口拼接地址
+    // 接口拼接地址
-        urlPrefix: configs.urlPrefix,
+    urlPrefix: configs.urlPrefix,
-        // 忽略重复请求
+    // 忽略重复请求
-        ignoreCancelToken: false,
+    ignoreCancelToken: false,
-        // 是否携带token
+    // 是否携带token
-        withToken: true,
+    withToken: true,
-        // 开启请求超时重新发起请求请求机制
+    // 开启请求超时重新发起请求请求机制
-        isOpenRetry: true,
+    isOpenRetry: true,
-        // 重新请求次数
+    // 重新请求次数
-        retryCount: 2
+    retryCount: 2,
-    }
+  },
-}
+};
 
 function createAxios(opt?: Partial<AxiosRequestConfig>) {
-    return new Axios(
+  return new Axios(
-        // 深度合并
+    // 深度合并
-        merge(defaultOptions, opt || {})
+    merge(defaultOptions, opt || {})
-    )
+  );
 }
-const request = createAxios()
+const request = createAxios();
-export default request
+export default request;

src/views/oa_Initiate/edit.vue

@@ -5,8 +5,8 @@
                 <template #header>
                     审批内容
                 </template>
-                <!-- <generateForm :config="formData.data" :extend="extend" :form-data="formData.extends" :type="type"> -->
+                <generateForm :config="formData.data" :extend="extend" :form-data="formData.extends" :type="type" />
-                <tysp></tysp>
+                <!-- <tysp></tysp> -->
                 <!-- </generateForm> -->
             </el-card>
             <oaFlow :form-data="formData" :flow_cate="formData.id"></oaFlow>

src/views/oa_message/edit.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="edit-popup">
+        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
+            <el-descriptions :column="1" border>
+                <el-descriptions-item label="消息主题" label-align="left" align="left">
+                    {{ formData.title }}
+                </el-descriptions-item>
+                <el-descriptions-item label="消息内容" label-align="left" align="left">
+                    {{ formData.content }}
+                </el-descriptions-item>
+                <el-descriptions-item label="发件人" label-align="left" align="left">
+                    {{ formData.to_user_name }}
+                </el-descriptions-item>
+                <el-descriptions-item label="阅读时间" label-align="left" align="left">
+                    {{ formData.read_time }}
+                </el-descriptions-item>
+                <el-descriptions-item label="创建时间" label-align="left" align="left">
+                    {{ formData.create_time }}
+                </el-descriptions-item>
+            </el-descriptions>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="oaMessageEdit">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiOaMessageAdd, apiOaMessageEdit, apiOaMessageDetail } from '@/api/oa_message'
+import { timeFormat } from '@/utils/util'
+import type { PropType } from 'vue'
+defineProps({
+    dictData: {
+        type: Object as PropType<Record<string, any[]>>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits(['success', 'close'])
+const formRef = shallowRef<FormInstance>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const mode = ref('add')
+
+
+// 弹窗标题
+const popupTitle = computed(() => {
+    return mode.value == 'edit' ? '编辑消息表' : '新增消息表'
+})
+
+// 表单数据
+const formData = reactive({
+    id: '',
+    title: '',
+    content: '',
+    from_uid: '',
+    to_uid: '',
+    read_time: '',
+    create_time: '',
+    to_user_name: ""
+})
+
+
+// 表单验证
+const formRules = reactive<any>({
+    title: [{
+        required: true,
+        message: '请输入消息主题',
+        trigger: ['blur']
+    }],
+    from_uid: [{
+        required: true,
+        message: '请输入发送人id',
+        trigger: ['blur']
+    }],
+    to_uid: [{
+        required: true,
+        message: '请输入接收人id',
+        trigger: ['blur']
+    }],
+    read_time: [{
+        required: true,
+        message: '请输入阅读时间',
+        trigger: ['blur']
+    }],
+    create_time: [{
+        required: true,
+        message: '请输入创建时间',
+        trigger: ['blur']
+    }]
+})
+
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+    for (const key in formData) {
+        if (data[key] != null && data[key] != undefined) {
+            //@ts-ignore
+            formData[key] = data[key]
+        }
+    }
+
+
+}
+
+const getDetail = async (row: Record<string, any>) => {
+    const data = await apiOaMessageDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    emit('close')
+
+}
+
+//打开弹窗
+const open = (type = 'add') => {
+    mode.value = type
+    popupRef.value?.open()
+}
+
+// 关闭回调
+const handleClose = () => {
+    emit('close')
+}
+
+
+
+defineExpose({
+    open,
+    setFormData,
+    getDetail
+})
+</script>

src/views/oa_message/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form class="mb-[-16px]" :model="queryParams" inline>
+                <el-form-item label="消息主题" prop="title">
+                    <el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入消息主题" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="resetPage">查询</el-button>
+                    <el-button @click="resetParams">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+            <div class="mt-4">
+                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+                    <el-table-column label="消息主题" prop="title" show-overflow-tooltip />
+                    <el-table-column label="消息内容" prop="content" show-overflow-tooltip />
+                    <el-table-column label="是否已读" prop="is_read" show-overflow-tooltip />
+                    <el-table-column label="阅读时间" prop="read_time" show-overflow-tooltip />
+                    <el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
+                    <el-table-column label="操作" width="120" fixed="right">
+                        <template #default="{ row }">
+                            <el-button v-perms="['works.oa_message/edit']" type="primary" link @click="handleEdit(row)">
+                                详情
+                            </el-button>
+                            <el-button v-perms="['works.oa_message/delete']" type="danger" link
+                                @click="handleDelete(row.id)">
+                                删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="flex mt-4 justify-end">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists"
+            @close="showEdit = false, getLists()" />
+    </div>
+</template>
+
+<script lang="ts" setup name="oaMessageLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiOaMessageLists, apiOaMessageDelete, apiOaMessageDetail } from '@/api/oa_message'
+import { timeFormat } from '@/utils/util'
+import feedback from '@/utils/feedback'
+import EditPopup from './edit.vue'
+
+const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+// 是否显示编辑框
+const showEdit = ref(false)
+
+
+// 查询条件
+const queryParams = reactive({
+    title: '',
+    from_uid: '',
+    to_uid: ''
+})
+
+// 选中数据
+const selectData = ref<any[]>([])
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+    selectData.value = val.map(({ id }) => id)
+}
+
+// 获取字典数据
+const { dictData } = useDictData('')
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiOaMessageLists,
+    params: queryParams
+})
+
+// 添加
+const handleAdd = async () => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('add')
+}
+
+// 编辑
+const handleEdit = async (data: any) => {
+    let res = await apiOaMessageDetail({ id: data.id })
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.setFormData(res)
+}
+
+// 删除
+const handleDelete = async (id: number | any[]) => {
+    await feedback.confirm('确定要删除？')
+    await apiOaMessageDelete({ id })
+    getLists()
+}
+
+getLists()
+</script>
+