admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(消息通知): ✨ 消息通知

Browse Source 
消息中心完成
This commit is contained in:
猿小天
2023-03-12 19:28:40 +08:00
parent c0c627b8df
commit 888228fb1b
7 changed files with 125 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/theme/element.scss
View File

@@ -29,7 +29,7 @@
.el-form {
// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
.el-form-item:last-of-type {
margin-bottom: 0 !important;
margin-bottom: 22px !important;
}
// 修复行内表单最后一个 el-form-item 位置下移问题
&.el-form--inline {

2
web/src/views/system/menu/crud.tsx
View File

@@ -78,7 +78,7 @@ export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crud
actionbar: {
buttons: {
add: {
show: hasPermissions('Menu:Create'),
show: hasPermissions('menu:Create'),
},
},
},

19
web/src/views/system/messageCenter/api.ts
View File

@@ -13,11 +13,25 @@ export function GetList(query: PageQuery) {
export function GetObj(id: InfoReq) {
return request({
url: apiPrefix + id,
url: apiPrefix + id + '/',
method: 'get',
});
}
/**
* 获取自己接收的消息
* @param query
* @returns {*}
* @constructor
*/
export function GetSelfReceive (query:PageQuery) {
return request({
url: apiPrefix + 'get_self_receive/',
method: 'get',
params: query
})
}
export function AddObj(obj: AddReq) {
return request({
url: apiPrefix,
@@ -26,6 +40,9 @@ export function AddObj(obj: AddReq) {
});
}
export function UpdateObj(obj: EditReq) {
return request({
url: apiPrefix + obj.id + '/',

116
web/src/views/system/messageCenter/crud.tsx
View File

@@ -1,17 +1,24 @@
import * as api from "./api";
import {dict, compute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
import {request} from "/@/utils/service";
import {dictionary} from "/@/utils/dictionary";
import {dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
import tableSelector from "/@/components/tableSelector/index.vue"
import {shallowRef} from "vue";
import {shallowRef, computed, ref} from "vue";
import manyToMany from "/@/components/manyToMany/index.vue"
const {compute} = useCompute()
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
export const createCrudOptions = function ({
crudExpose,
tabActivted
}: { crudExpose: CrudExpose, tabActivted: any }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
if (tabActivted.value === 'receive') {
return await api.GetSelfReceive(query);
}
return await api.GetList(query);
};
const editRequest = async ({form, row}: EditReq) => {
@@ -24,6 +31,15 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
const addRequest = async ({form}: AddReq) => {
return await api.AddObj(form);
};
const viewRequest = async ({row}: { row: any }) => {
return await api.GetObj(row.id);
}
const IsReadFunc = computed(() => {
return tabActivted.value === 'receive'
})
return {
crudOptions: {
request: {
@@ -32,18 +48,33 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
editRequest,
delRequest
},
rowHandle: {
buttons: {
edit: {
show: false
},
view: {
click({index,row}) {
crudExpose.openView({index,row})
if(tabActivted.value === 'receive'){
viewRequest({row})
crudExpose.doRefresh()
}
}
}
}
},
columns: {
id: {
title: 'id',
form: {
show: false
show: false,
}
},
title: {
title: '标题',
search: {
disabled: false
show: true,
},
type: ["text", "colspan"],
form: {
@@ -60,7 +91,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
title: '是否已读',
type: 'dict-select',
column: {
show: false
show: IsReadFunc,
},
dict: dict({
data: [
@@ -76,9 +107,6 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
title: '目标类型',
type: ['dict-radio', 'colspan'],
width: 120,
// show() {
// return vm.tabActivted === 'send'
// },
dict: dict({
data: [{value: 0, label: '按用户'}, {value: 1, label: '按角色'}, {
value: 2,
@@ -104,13 +132,12 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
disabled: true
},
width: 130,
disabled: true,
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
displayLabel:compute(({row}) => {
if(row){
displayLabel: compute(({row}) => {
if (row) {
return row.user_info;
}
return null
@@ -141,11 +168,14 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
}
]
},
column:{
column: {
show: false,
component: {
name: shallowRef(manyToMany),
vModel: "modelValue",
bindValue:compute(({row}) => {return row.user_info}),
bindValue: compute(({row}) => {
return row.user_info
}),
displayLabel: 'name'
}
}
@@ -155,14 +185,13 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
search: {
disabled: true
},
disabled: true,
width: 130,
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
displayLabel:compute(({row}) => {
if(row){
displayLabel: compute(({row}) => {
if (row) {
return row.role_info;
}
return null
@@ -192,11 +221,14 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
}
]
},
column:{
column: {
show: false,
component: {
name: shallowRef(manyToMany),
vModel: "modelValue",
bindValue:compute(({row}) => {return row.role_info}),
bindValue: compute(({row}) => {
return row.role_info
}),
displayLabel: 'name'
}
}
@@ -212,7 +244,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
displayLabel:compute(({ form }) => {
displayLabel: compute(({form}) => {
return form.target_dept_name;
}),
tableConfig: {
@@ -225,14 +257,14 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
prop: 'name',
label: '部门名称'
},
{
prop: 'status_label',
label: '状态'
},
{
prop: 'parent_name',
label: '父级部门'
}]
{
prop: 'status_label',
label: '状态'
},
{
prop: 'parent_name',
label: '父级部门'
}]
}
},
show: compute(({form}) => {
@@ -245,11 +277,14 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
}
]
},
column:{
column: {
show: false,
component: {
name: shallowRef(manyToMany),
vModel: "modelValue",
bindValue:compute(({row}) => {return row.dept_info}),
bindValue: compute(({row}) => {
return row.dept_info
}),
displayLabel: 'name'
}
}
@@ -269,11 +304,18 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
}
],
component: {
// disabled: compute(({form}) => {
// return form.disabled;
// }),
disabled: true,
id: "1", // 当同一个页面有多个editor时，需要配置不同的id
config: {},
editorConfig: {
// 是否只读
readOnly: compute((context) => {
const {mode} = context
if (mode === 'add') {
return false
}
return true;
}),
},
uploader: {
type: "form",
buildUrl(res: any) {

21
web/src/views/system/messageCenter/index.vue
View File

@@ -1,6 +1,14 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #header-middle>
<el-tabs v-model="tabActivted" @tab-click="onTabClick">
<el-tab-pane label="我的发布" name="send"></el-tab-pane>
<el-tab-pane label="我的接收" name="receive"></el-tab-pane>
</el-tabs>
</template>
</fs-crud>
</fs-page>
</template>
@@ -14,8 +22,15 @@ const crudRef = ref();
const crudBinding = ref();
// 暴露的方法
const {crudExpose} = useExpose({crudRef, crudBinding});
//tab选择
const tabActivted = ref('send')
const onTabClick= (tab:any)=> {
const { paneName } = tab
tabActivted.value = paneName
crudExpose.doRefresh();
}
// 你的crud配置
const {crudOptions} = createCrudOptions({crudExpose});
const {crudOptions} = createCrudOptions({crudExpose,tabActivted});
// 初始化crud配置
const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
@@ -23,4 +38,6 @@ const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
onMounted(() => {
crudExpose.doRefresh();
});
</script>