mkm/engineering_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zmj 2024-05-29 16:15:38 +08:00
parent 7d78205b59
commit bf7050304d
6 changed files with 418 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/oa_message.ts Normal file
View File

@ -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 });
}

28
src/layout/default/components/header/msg.vue
View File

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

231
src/utils/request/index.ts
View File

@ -1,123 +1,128 @@
import { merge } from 'lodash'
import configs from '@/config'
import { Axios } from './axios'
import { ContentTypeEnum, RequestCodeEnum, RequestMethodsEnum } from '@/enums/requestEnums'
import type { AxiosHooks } from './type'
import { clearAuthInfo, getToken } from '../auth'
import feedback from '../feedback'
import NProgress from 'nprogress'
import { AxiosError, type AxiosRequestConfig } from 'axios'
import router from '@/router'
import { PageEnum } from '@/enums/pageEnum'
import { merge } from "lodash";
import configs from "@/config";
import { Axios } from "./axios";
import {
ContentTypeEnum,
RequestCodeEnum,
RequestMethodsEnum,
} from "@/enums/requestEnums";
import type { AxiosHooks } from "./type";
import { clearAuthInfo, getToken } from "../auth";
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) {
NProgress.start()
const { withToken, isParamsToData } = config.requestOptions
const params = config.params || {}
const headers = config.headers || {}
requestInterceptorsHook(config) {
// NProgress.start()
const { withToken, isParamsToData } = config.requestOptions;
const params = config.params || {};
const headers = config.headers || {};
// 添加token
if (withToken) {
const token = getToken()
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)
// 添加token
if (withToken) {
const token = getToken();
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);
},
};
const defaultOptions: AxiosRequestConfig = {
//接口超时时间
timeout: configs.timeout,
// 基础接口地址
baseURL: configs.baseUrl,
//请求头
headers: { 'Content-Type': ContentTypeEnum.JSON, version: configs.version },
// 处理 axios的钩子函数
axiosHooks: axiosHooks,
// 每个接口可以单独配置
requestOptions: {
// 是否将params视为data参数，仅限post请求
isParamsToData: true,
//是否返回默认的响应
isReturnDefaultResponse: false,
// 需要对返回数据进行处理
isTransformResponse: true,
// 接口拼接地址
urlPrefix: configs.urlPrefix,
// 忽略重复请求
ignoreCancelToken: false,
// 是否携带token
withToken: true,
// 开启请求超时重新发起请求请求机制
isOpenRetry: true,
// 重新请求次数
retryCount: 2
}
}
//接口超时时间
timeout: configs.timeout,
// 基础接口地址
baseURL: configs.baseUrl,
//请求头
headers: { "Content-Type": ContentTypeEnum.JSON, version: configs.version },
// 处理 axios的钩子函数
axiosHooks: axiosHooks,
// 每个接口可以单独配置
requestOptions: {
// 是否将params视为data参数，仅限post请求
isParamsToData: true,
//是否返回默认的响应
isReturnDefaultResponse: false,
// 需要对返回数据进行处理
isTransformResponse: true,
// 接口拼接地址
urlPrefix: configs.urlPrefix,
// 忽略重复请求
ignoreCancelToken: false,
// 是否携带token
withToken: true,
// 开启请求超时重新发起请求请求机制
isOpenRetry: true,
// 重新请求次数
retryCount: 2,
},
};
function createAxios(opt?: Partial<AxiosRequestConfig>) {
return new Axios(
// 深度合并
merge(defaultOptions, opt || {})
)
return new Axios(
// 深度合并
merge(defaultOptions, opt || {})
);
}
const request = createAxios()
export default request
const request = createAxios();
export default request;

4
src/views/oa_Initiate/edit.vue
View File

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

135
src/views/oa_message/edit.vue Normal file
View File

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

106
src/views/oa_message/index.vue Normal file
View File

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