初始化项目
This commit is contained in:
74
web-vue/packages/biz/api/biz/myNoticeTodo.ts
Normal file
74
web-vue/packages/biz/api/biz/myNoticeTodo.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author gaoxq
|
||||
*/
|
||||
import { defHttp } from '@jeesite/core/utils/http/axios';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { BasicModel, Page } from '@jeesite/core/api/model/baseModel';
|
||||
import { UploadApiResult } from '@jeesite/core/api/sys/upload';
|
||||
import { UploadFileParams } from '@jeesite/types/axios';
|
||||
import { AxiosProgressEvent } from 'axios';
|
||||
|
||||
const { ctxPath, adminPath } = useGlobSetting();
|
||||
|
||||
export interface MyNoticeTodo extends BasicModel<MyNoticeTodo> {
|
||||
createTime?: string; // 记录时间
|
||||
avatar?: string; // 头像图标
|
||||
title: string; // 通知标题
|
||||
titleDelete?: string; // 删除线
|
||||
datetime?: string; // 到期时间
|
||||
type?: string; // 消息类型
|
||||
readFlag?: string; // 是否已读
|
||||
description?: string; // 描述信息
|
||||
clickClose?: string; // 是否关闭
|
||||
extra?: string; // 额外信息
|
||||
extraDesc?: string; // 待办意见
|
||||
color?: string; // 颜色值
|
||||
ustatus?: string; // 发布状态
|
||||
updateTime?: string; // 更新时间
|
||||
bizCode?: string; // 业务编号
|
||||
userName?: string; // 接收姓名
|
||||
createUser?: string; // 创建用户
|
||||
loginUser?: string; // 接收用户
|
||||
}
|
||||
|
||||
export interface TabItem {
|
||||
key: string;
|
||||
name: string;
|
||||
count?: number;
|
||||
btnHref?: string;
|
||||
btnText?: string;
|
||||
list: MyNoticeTodo[];
|
||||
unreadlist?: MyNoticeTodo[];
|
||||
}
|
||||
|
||||
export const tabListDataAll = (params?: MyNoticeTodo | any) =>
|
||||
defHttp.get<TabItem[]>({ url: adminPath + '/biz/myNoticeTodo/tabListData', params});
|
||||
|
||||
export const myNoticeTodoList = (params?: MyNoticeTodo | any) =>
|
||||
defHttp.get<MyNoticeTodo>({ url: adminPath + '/biz/myNoticeTodo/list', params });
|
||||
|
||||
export const myNoticeTodoListData = (params?: MyNoticeTodo | any) =>
|
||||
defHttp.post<Page<MyNoticeTodo>>({ url: adminPath + '/biz/myNoticeTodo/listData', params });
|
||||
|
||||
export const myNoticeTodoForm = (params?: MyNoticeTodo | any) =>
|
||||
defHttp.get<MyNoticeTodo>({ url: adminPath + '/biz/myNoticeTodo/form', params });
|
||||
|
||||
export const myNoticeTodoSave = (params?: any, data?: MyNoticeTodo | any) =>
|
||||
defHttp.postJson<MyNoticeTodo>({ url: adminPath + '/biz/myNoticeTodo/save', params, data });
|
||||
|
||||
export const myNoticeTodoImportData = (
|
||||
params: UploadFileParams,
|
||||
onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
|
||||
) =>
|
||||
defHttp.uploadFile<UploadApiResult>(
|
||||
{
|
||||
url: ctxPath + adminPath + '/biz/myNoticeTodo/importData',
|
||||
onUploadProgress,
|
||||
},
|
||||
params,
|
||||
);
|
||||
|
||||
export const myNoticeTodoDelete = (params?: MyNoticeTodo | any) =>
|
||||
defHttp.get<MyNoticeTodo>({ url: adminPath + '/biz/myNoticeTodo/delete', params });
|
||||
@@ -160,6 +160,7 @@
|
||||
}
|
||||
|
||||
data[record.value.isNewRecord ? 'createTime' : 'updateTime'] = formatToDateTime(new Date());
|
||||
|
||||
// console.log('submit', params, data, record);
|
||||
const res = await myNotesSave(params, data);
|
||||
showMessage(res.message);
|
||||
|
||||
182
web-vue/packages/biz/views/biz/myNoticeTodo/form.vue
Normal file
182
web-vue/packages/biz/views/biz/myNoticeTodo/form.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author gaoxq
|
||||
-->
|
||||
<template>
|
||||
<BasicDrawer
|
||||
v-bind="$attrs"
|
||||
:showFooter="true"
|
||||
:okAuth="'biz:myNoticeTodo:edit'"
|
||||
@register="registerDrawer"
|
||||
@ok="handleSubmit"
|
||||
width="70%"
|
||||
>
|
||||
<template #title>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsBizMyNoticeTodoForm">
|
||||
import { ref, unref, computed } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { BasicDrawer, useDrawerInner } from '@jeesite/core/components/Drawer';
|
||||
import { MyNoticeTodo, myNoticeTodoSave, myNoticeTodoForm } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
import { formatToDateTime } from '@jeesite/core/utils/dateUtil';
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { t } = useI18n('biz.myNoticeTodo');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<MyNoticeTodo>({} as MyNoticeTodo);
|
||||
|
||||
const getTitle = computed(() => ({
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: record.value.isNewRecord ? t('新增消息') : t('编辑消息'),
|
||||
}));
|
||||
|
||||
const inputFormSchemas: FormSchema<MyNoticeTodo>[] = [
|
||||
{
|
||||
label: t('基本信息'),
|
||||
field: 'basicInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('通知标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 512,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('到期时间'),
|
||||
field: 'datetime',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 32,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('消息类型'),
|
||||
field: 'type',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 32,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('描述信息'),
|
||||
field: 'description',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('是否关闭'),
|
||||
field: 'clickClose',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('额外信息'),
|
||||
field: 'extra',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 64,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('待办意见'),
|
||||
field: 'extraDesc',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('颜色值'),
|
||||
field: 'color',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 32,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('发布状态'),
|
||||
field: 'ustatus',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('接收用户'),
|
||||
field: 'loginUser',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 52,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('附件上传'),
|
||||
field: 'dataMap',
|
||||
component: 'Upload',
|
||||
componentProps: {
|
||||
loadTime: computed(() => record.value.__t),
|
||||
bizKey: computed(() => record.value.id),
|
||||
bizType: 'myNoticeTodo_file',
|
||||
uploadType: 'all',
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<MyNoticeTodo>({
|
||||
labelWidth: 120,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
setDrawerProps({ loading: true });
|
||||
await resetFields();
|
||||
const res = await myNoticeTodoForm(data);
|
||||
record.value = (res.myNoticeTodo || {}) as MyNoticeTodo;
|
||||
record.value.__t = new Date().getTime();
|
||||
await setFieldsValue(record.value);
|
||||
setDrawerProps({ loading: false });
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const data = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
const params: any = {
|
||||
isNewRecord: record.value.isNewRecord,
|
||||
id: record.value.id || data.id,
|
||||
};
|
||||
|
||||
data[record.value.isNewRecord ? 'createTime' : 'updateTime'] = formatToDateTime(new Date());
|
||||
|
||||
// console.log('submit', params, data, record);
|
||||
const res = await myNoticeTodoSave(params, data);
|
||||
showMessage(res.message);
|
||||
setTimeout(closeDrawer);
|
||||
emit('success', data);
|
||||
} catch (error: any) {
|
||||
if (error && error.errorFields) {
|
||||
showMessage(error.message || t('common.validateError'));
|
||||
}
|
||||
console.log('error', error);
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
267
web-vue/packages/biz/views/biz/myNoticeTodo/list.vue
Normal file
267
web-vue/packages/biz/views/biz/myNoticeTodo/list.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author gaoxq
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<a-button type="default" :loading="loading" @click="handleExport()">
|
||||
<Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleForm({})" v-auth="'biz:myNoticeTodo:edit'">
|
||||
<Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<template #bizScopeKey="{ record, text, value }">
|
||||
<a @click="handleForm({ id: record.id })" :title="value">
|
||||
{{ text }}
|
||||
</a>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<InputForm @register="registerDrawer" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsBizMyNoticeTodoList">
|
||||
import { onMounted, ref, unref } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { downloadByUrl } from '@jeesite/core/utils/file/download';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
|
||||
import { MyNoticeTodo, myNoticeTodoList } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
import { myNoticeTodoDelete, myNoticeTodoListData } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
import { useDrawer } from '@jeesite/core/components/Drawer';
|
||||
import { useModal } from '@jeesite/core/components/Modal';
|
||||
import { FormProps } from '@jeesite/core/components/Form';
|
||||
import InputForm from './form.vue';
|
||||
|
||||
const { t } = useI18n('biz.myNoticeTodo');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<MyNoticeTodo>({} as MyNoticeTodo);
|
||||
|
||||
const getTitle = {
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: meta.title || t('消息管理'),
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm: FormProps<MyNoticeTodo> = {
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('记录时间起'),
|
||||
field: 'createTime_gte',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('记录时间止'),
|
||||
field: 'createTime_lte',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('通知标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('消息类型'),
|
||||
field: 'type',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('是否已读'),
|
||||
field: 'readFlag',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('是否关闭'),
|
||||
field: 'clickClose',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('发布状态'),
|
||||
field: 'ustatus',
|
||||
component: 'Input',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<MyNoticeTodo>[] = [
|
||||
{
|
||||
title: t('记录时间'),
|
||||
dataIndex: 'createTime',
|
||||
key: 'a.create_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: t('通知标题'),
|
||||
dataIndex: 'title',
|
||||
key: 'a.title',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
slot: 'bizScopeKey',
|
||||
},
|
||||
{
|
||||
title: t('到期时间'),
|
||||
dataIndex: 'datetime',
|
||||
key: 'a.datetime',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('消息类型'),
|
||||
dataIndex: 'type',
|
||||
key: 'a.type',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('是否已读'),
|
||||
dataIndex: 'readFlag',
|
||||
key: 'a.read_flag',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('是否关闭'),
|
||||
dataIndex: 'clickClose',
|
||||
key: 'a.click_close',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('额外信息'),
|
||||
dataIndex: 'extra',
|
||||
key: 'a.extra',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('待办意见'),
|
||||
dataIndex: 'extraDesc',
|
||||
key: 'a.extra_desc',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('颜色值'),
|
||||
dataIndex: 'color',
|
||||
key: 'a.color',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('发布状态'),
|
||||
dataIndex: 'ustatus',
|
||||
key: 'a.ustatus',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('更新时间'),
|
||||
dataIndex: 'updateTime',
|
||||
key: 'a.update_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumn: BasicColumn<MyNoticeTodo> = {
|
||||
width: 160,
|
||||
actions: (record: MyNoticeTodo) => [
|
||||
{
|
||||
icon: 'i-clarity:note-edit-line',
|
||||
title: t('编辑'),
|
||||
onClick: handleForm.bind(this, { id: record.id }),
|
||||
auth: 'biz:myNoticeTodo:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
title: t('删除'),
|
||||
popConfirm: {
|
||||
title: t('是否确认删除消息?'),
|
||||
confirm: handleDelete.bind(this, record),
|
||||
},
|
||||
auth: 'biz:myNoticeTodo:edit',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [registerTable, { reload, getForm }] = useTable<MyNoticeTodo>({
|
||||
api: myNoticeTodoListData,
|
||||
beforeFetch: (params) => {
|
||||
return params;
|
||||
},
|
||||
columns: tableColumns,
|
||||
actionColumn: actionColumn,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await myNoticeTodoList();
|
||||
record.value = (res.myNoticeTodo || {}) as MyNoticeTodo;
|
||||
await getForm().setFieldsValue(record.value);
|
||||
});
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
|
||||
function handleForm(record: Recordable) {
|
||||
openDrawer(true, record);
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
loading.value = true;
|
||||
const { ctxAdminPath } = useGlobSetting();
|
||||
await downloadByUrl({
|
||||
url: ctxAdminPath + '/biz/myNoticeTodo/exportData',
|
||||
params: getForm().getFieldsValue(),
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
const params = { id: record.id };
|
||||
const res = await myNoticeTodoDelete(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
</script>
|
||||
226
web-vue/packages/biz/views/biz/myNoticeTodo/select.ts
Normal file
226
web-vue/packages/biz/views/biz/myNoticeTodo/select.ts
Normal file
@@ -0,0 +1,226 @@
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { BasicColumn, BasicTableProps, FormProps } from '@jeesite/core/components/Table';
|
||||
import { myNoticeTodoListData } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
|
||||
const { t } = useI18n('biz.myNoticeTodo');
|
||||
|
||||
const modalProps = {
|
||||
title: t('消息选择'),
|
||||
};
|
||||
|
||||
const searchForm: FormProps<MyNoticeTodo> = {
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('记录时间起'),
|
||||
field: 'createTime_gte',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('记录时间止'),
|
||||
field: 'createTime_lte',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('通知标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('消息类型'),
|
||||
field: 'type',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('是否已读'),
|
||||
field: 'readFlag',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('是否关闭'),
|
||||
field: 'clickClose',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('发布状态'),
|
||||
field: 'ustatus',
|
||||
component: 'Input',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<MyNoticeTodo>[] = [
|
||||
{
|
||||
title: t('记录时间'),
|
||||
dataIndex: 'createTime',
|
||||
key: 'a.create_time',
|
||||
sorter: true,
|
||||
width: 230,
|
||||
align: 'left',
|
||||
slot: 'firstColumn',
|
||||
},
|
||||
{
|
||||
title: t('头像图标'),
|
||||
dataIndex: 'avatar',
|
||||
key: 'a.avatar',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('通知标题'),
|
||||
dataIndex: 'title',
|
||||
key: 'a.title',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('删除线'),
|
||||
dataIndex: 'titleDelete',
|
||||
key: 'a.title_delete',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('到期时间'),
|
||||
dataIndex: 'datetime',
|
||||
key: 'a.datetime',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('消息类型'),
|
||||
dataIndex: 'type',
|
||||
key: 'a.type',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('是否已读'),
|
||||
dataIndex: 'readFlag',
|
||||
key: 'a.read_flag',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('描述信息'),
|
||||
dataIndex: 'description',
|
||||
key: 'a.description',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('是否关闭'),
|
||||
dataIndex: 'clickClose',
|
||||
key: 'a.click_close',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('额外信息'),
|
||||
dataIndex: 'extra',
|
||||
key: 'a.extra',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('待办意见'),
|
||||
dataIndex: 'extraDesc',
|
||||
key: 'a.extra_desc',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('颜色值'),
|
||||
dataIndex: 'color',
|
||||
key: 'a.color',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('发布状态'),
|
||||
dataIndex: 'ustatus',
|
||||
key: 'a.ustatus',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('更新时间'),
|
||||
dataIndex: 'updateTime',
|
||||
key: 'a.update_time',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('业务编号'),
|
||||
dataIndex: 'bizCode',
|
||||
key: 'a.biz_code',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('接收姓名'),
|
||||
dataIndex: 'userName',
|
||||
key: 'a.user_name',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('创建用户'),
|
||||
dataIndex: 'createUser',
|
||||
key: 'a.create_user',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('接收用户'),
|
||||
dataIndex: 'loginUser',
|
||||
key: 'a.login_user',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps: BasicTableProps = {
|
||||
api: myNoticeTodoListData,
|
||||
beforeFetch: (params) => {
|
||||
params['isAll'] = true;
|
||||
return params;
|
||||
},
|
||||
columns: tableColumns,
|
||||
formConfig: searchForm,
|
||||
rowKey: 'id',
|
||||
};
|
||||
|
||||
export default {
|
||||
modalProps,
|
||||
tableProps,
|
||||
itemCode: 'id',
|
||||
itemName: 'id',
|
||||
isShowCode: false,
|
||||
};
|
||||
@@ -1,8 +1,150 @@
|
||||
<template>
|
||||
<div class="my-screen-page">
|
||||
<header class="my-screen-top">顶部区域</header>
|
||||
<section class="my-screen-bottom">
|
||||
<div class="my-screen-left">
|
||||
<section class="my-screen-panel my-screen-left-top">左上区域</section>
|
||||
<section class="my-screen-left-middle">
|
||||
<div class="my-screen-panel">左中左区域</div>
|
||||
<div class="my-screen-panel">左中右区域</div>
|
||||
</section>
|
||||
<section class="my-screen-left-bottom">
|
||||
<div class="my-screen-panel">左下左区域</div>
|
||||
<div class="my-screen-panel">左下右区域</div>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="my-screen-right">
|
||||
<section class="my-screen-panel my-screen-right-top">右上区域</section>
|
||||
<section class="my-screen-panel my-screen-right-middle">右中区域</section>
|
||||
<section class="my-screen-panel my-screen-right-bottom">右下区域</section>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
<script lang="ts" setup name="BizMyScreen"></script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
@dark-bg: #141414;
|
||||
|
||||
.my-screen-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.my-screen-top,
|
||||
.my-screen-panel {
|
||||
min-height: 0;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
background: rgb(248 250 252);
|
||||
box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgb(71 85 105);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.my-screen-top {
|
||||
flex: 0 0 10%;
|
||||
}
|
||||
|
||||
.my-screen-bottom {
|
||||
flex: 1 1 90%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.my-screen-left {
|
||||
flex: 0 0 70%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.my-screen-right {
|
||||
flex: 0 0 calc(30% - 12px);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.my-screen-left-top {
|
||||
flex: 0 0 10%;
|
||||
}
|
||||
|
||||
.my-screen-left-middle,
|
||||
.my-screen-left-bottom {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.my-screen-left-middle .my-screen-panel,
|
||||
.my-screen-left-bottom .my-screen-panel {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.my-screen-right-top,
|
||||
.my-screen-right-middle,
|
||||
.my-screen-right-bottom {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .my-screen-page,
|
||||
html[data-theme='dark'] .my-screen-bottom {
|
||||
background: @dark-bg !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .my-screen-top,
|
||||
html[data-theme='dark'] .my-screen-panel {
|
||||
border-color: rgb(51 65 85);
|
||||
background: @dark-bg !important;
|
||||
color: rgb(203 213 225);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.my-screen-page {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.my-screen-top {
|
||||
flex-basis: 72px;
|
||||
}
|
||||
|
||||
.my-screen-bottom {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.my-screen-left,
|
||||
.my-screen-right {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.my-screen-left-middle,
|
||||
.my-screen-left-bottom {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<a-list :class="prefixCls" bordered :pagination="getPagination">
|
||||
<template v-for="item in getData" :key="item.id">
|
||||
<a-list-item class="list-item" v-if="!item.titleDelete">
|
||||
<a-list-item class="list-item" v-if="item.titleDelete != '1'">
|
||||
<a-list-item-meta @click="handleTitleClick(item)">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<a-typography-paragraph
|
||||
style="width: 100%; margin-bottom: 0 !important"
|
||||
:style="{ cursor: isTitleClickable ? 'pointer' : '' }"
|
||||
:delete="!!item.titleDelete"
|
||||
:ellipsis="
|
||||
$props.titleRows && $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: !!item.title } : false
|
||||
"
|
||||
:content="item.title"
|
||||
/>
|
||||
<a-tooltip :title="item.title" placement="topLeft">
|
||||
<span
|
||||
class="title-text"
|
||||
:style="{ cursor: isTitleClickable ? 'pointer' : 'default' }"
|
||||
:class="{ 'title-delete': item.titleDelete == '1' }"
|
||||
>{{ item.title }}</span
|
||||
>
|
||||
</a-tooltip>
|
||||
<div class="extra" v-if="item.extra">
|
||||
<a-tag class="tag" :color="item.color">
|
||||
{{ item.extra }}
|
||||
@@ -23,30 +22,17 @@
|
||||
</template>
|
||||
|
||||
<template #avatar>
|
||||
<a-avatar v-if="item.avatar && item.avatar.indexOf('://') != -1" class="avatar" :src="item.avatar" />
|
||||
<a-avatar v-else-if="item.avatar && item.avatar.indexOf(':') != -1" class="avatar avatar-icon">
|
||||
<Icon :icon="item.avatar" />
|
||||
</a-avatar>
|
||||
<span v-else> {{ item.avatar }}</span>
|
||||
<a-avatar class="avatar" :src="item.avatar" />
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<div>
|
||||
<div class="description" v-if="item.description">
|
||||
<a-typography-paragraph
|
||||
style="width: 100%; margin-bottom: 0 !important"
|
||||
:ellipsis="
|
||||
$props.descRows && $props.descRows > 0
|
||||
? { rows: $props.descRows, tooltip: !!item.description }
|
||||
: false
|
||||
"
|
||||
:content="item.description"
|
||||
/>
|
||||
</div>
|
||||
<div class="datetime">
|
||||
{{ item.datetime }}
|
||||
</div>
|
||||
</div>
|
||||
<a-tooltip v-if="item.description" placement="topLeft">
|
||||
<template #title>
|
||||
<span v-html="item.description"></span>
|
||||
</template>
|
||||
<div class="description" v-html="item.description"></div>
|
||||
</a-tooltip>
|
||||
<div class="datetime">{{ item.datetime }}</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
@@ -55,73 +41,82 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
|
||||
import { ListItem } from './data';
|
||||
import { MyNoticeTodo, TabItem } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
import { List, Avatar, Tag, Typography } from 'ant-design-vue';
|
||||
import { List, Avatar, Tag, Tooltip } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { isNumber } from '@jeesite/core/utils/is';
|
||||
|
||||
function toNumber(value: unknown, defaultValue = 0) {
|
||||
if (isNumber(value)) return value;
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : defaultValue;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Avatar.name as string]: Avatar,
|
||||
[List.name as string]: List,
|
||||
[List.Item.name as string]: List.Item,
|
||||
AListItemMeta: List.Item.Meta,
|
||||
ATypographyParagraph: Typography.Paragraph,
|
||||
[Tag.name as string]: Tag,
|
||||
[Tooltip.name as string]: Tooltip,
|
||||
Icon,
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array as PropType<ListItem[]>,
|
||||
type: Array as PropType<MyNoticeTodo[]>,
|
||||
default: () => [],
|
||||
},
|
||||
pageSize: {
|
||||
type: [Boolean, Number] as PropType<boolean | number>,
|
||||
type: [Boolean, Number, String] as PropType<boolean | number | string>,
|
||||
default: 5,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
type: [Number, String] as PropType<number | string>,
|
||||
default: 1,
|
||||
},
|
||||
titleRows: {
|
||||
type: Number,
|
||||
type: [Number, String] as PropType<number | string>,
|
||||
default: 1,
|
||||
},
|
||||
descRows: {
|
||||
type: Number,
|
||||
type: [Number, String] as PropType<number | string>,
|
||||
default: 2,
|
||||
},
|
||||
onTitleClick: {
|
||||
type: Function as PropType<(Recordable) => void>,
|
||||
type: Function as PropType<(item: Recordable) => void>,
|
||||
},
|
||||
},
|
||||
emits: ['update:currentPage'],
|
||||
setup(props, { emit }) {
|
||||
const { prefixCls } = useDesign('header-notify-list');
|
||||
const current = ref(props.currentPage || 1);
|
||||
const getData = computed<ListItem[]>(() => {
|
||||
const current = ref(toNumber(props.currentPage, 1));
|
||||
const getTitleRows = computed(() => toNumber(props.titleRows, 1));
|
||||
const getDescRows = computed(() => toNumber(props.descRows, 2));
|
||||
const getData = computed<MyNoticeTodo[]>(() => {
|
||||
const { pageSize, list } = props;
|
||||
if (pageSize === false) return [];
|
||||
let size = isNumber(pageSize) ? pageSize : 5;
|
||||
const size = toNumber(pageSize, 5);
|
||||
return list.slice(size * (unref(current) - 1), size * unref(current));
|
||||
});
|
||||
watch(
|
||||
() => props.currentPage,
|
||||
(v) => {
|
||||
current.value = v;
|
||||
current.value = toNumber(v, 1);
|
||||
},
|
||||
);
|
||||
const isTitleClickable = computed(() => !!props.onTitleClick);
|
||||
const getPagination = computed(() => {
|
||||
const { list, pageSize } = props;
|
||||
if ((pageSize as number) > 0 && list && list.length > (pageSize as number)) {
|
||||
const size = toNumber(pageSize, 5);
|
||||
if (size > 0 && list && list.length > size) {
|
||||
return {
|
||||
total: list.length,
|
||||
pageSize,
|
||||
pageSize: size,
|
||||
size: 'small',
|
||||
current: unref(current),
|
||||
onChange(page) {
|
||||
onChange(page: number) {
|
||||
current.value = page;
|
||||
emit('update:currentPage', page);
|
||||
},
|
||||
@@ -131,11 +126,19 @@
|
||||
}
|
||||
});
|
||||
|
||||
function handleTitleClick(item: ListItem) {
|
||||
function handleTitleClick(item: MyNoticeTodo) {
|
||||
props.onTitleClick && props.onTitleClick(item);
|
||||
}
|
||||
|
||||
return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
|
||||
return {
|
||||
prefixCls,
|
||||
getPagination,
|
||||
getData,
|
||||
handleTitleClick,
|
||||
isTitleClickable,
|
||||
getTitleRows,
|
||||
getDescRows,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -174,11 +177,26 @@
|
||||
.title {
|
||||
margin-bottom: 3px;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
|
||||
&.title-delete {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.extra {
|
||||
float: right;
|
||||
margin-top: -22px;
|
||||
margin-right: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
|
||||
.tag {
|
||||
@@ -198,6 +216,17 @@
|
||||
.description {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
* {
|
||||
display: inline;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.datetime {
|
||||
|
||||
@@ -1,196 +0,0 @@
|
||||
export interface ListItem {
|
||||
id: string;
|
||||
avatar: string;
|
||||
// 通知的标题内容
|
||||
title: string;
|
||||
// 是否在标题上显示删除线
|
||||
titleDelete?: boolean;
|
||||
datetime?: string;
|
||||
type: string;
|
||||
read?: boolean;
|
||||
description: string;
|
||||
clickClose?: boolean;
|
||||
extra?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface TabItem {
|
||||
key: string;
|
||||
name: string;
|
||||
count?: number;
|
||||
btnHref?: string;
|
||||
btnText?: string;
|
||||
list: ListItem[];
|
||||
unreadlist?: ListItem[];
|
||||
}
|
||||
|
||||
export const tabListData: TabItem[] = [
|
||||
{
|
||||
key: '1',
|
||||
name: '通知',
|
||||
list: [
|
||||
{
|
||||
id: '000000001',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
|
||||
title: '你收到了 10 份新周报',
|
||||
description: '',
|
||||
datetime: '2022-08-09',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000002',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
|
||||
title: '你推荐的果汁已通过第三轮面试',
|
||||
description: '',
|
||||
datetime: '2022-08-08',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000003',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
|
||||
title: '这种模板可以区分多种通知类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
// read: true,
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000004',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000005',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title:
|
||||
'标题可以设置自动显示省略号，本例中标题行数已设为1行，如果内容超过1行将自动截断并支持tooltip显示完整标题。',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000006',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000007',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000008',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000009',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000010',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '消息',
|
||||
list: [
|
||||
{
|
||||
id: '000000006',
|
||||
avatar: 'ant-design:message-outlined',
|
||||
title: '彩虹 评论了你',
|
||||
description: '描述信息描述信息描述信息',
|
||||
datetime: '2022-08-07',
|
||||
type: '2',
|
||||
clickClose: true,
|
||||
},
|
||||
{
|
||||
id: '000000007',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
|
||||
title: '果汁 回复了你',
|
||||
description: '这种模板用于提醒谁与你发生了互动',
|
||||
datetime: '2022-08-07',
|
||||
type: '2',
|
||||
clickClose: true,
|
||||
},
|
||||
{
|
||||
id: '000000008',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
|
||||
title: '标题',
|
||||
description:
|
||||
'请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容',
|
||||
datetime: '2022-08-07',
|
||||
type: '2',
|
||||
clickClose: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '待办',
|
||||
list: [
|
||||
{
|
||||
id: '000000009',
|
||||
avatar: '',
|
||||
title: '任务名称',
|
||||
description: '任务需要在 2022-01-12 20:00 前启动',
|
||||
datetime: '',
|
||||
extra: '未开始',
|
||||
color: '',
|
||||
type: '3',
|
||||
},
|
||||
{
|
||||
id: '000000010',
|
||||
avatar: '',
|
||||
title: '第三方紧急代码变更',
|
||||
description: '彩虹 需在 2022-01-07 前完成代码变更任务',
|
||||
datetime: '',
|
||||
extra: '马上到期',
|
||||
color: 'red',
|
||||
type: '3',
|
||||
},
|
||||
{
|
||||
id: '000000011',
|
||||
avatar: '',
|
||||
title: '信息安全考试',
|
||||
description: '指派竹尔于 2022-01-09 前完成更新并发布',
|
||||
datetime: '',
|
||||
extra: '已耗时 8 天',
|
||||
color: 'gold',
|
||||
type: '3',
|
||||
},
|
||||
{
|
||||
id: '000000012',
|
||||
avatar: '',
|
||||
title: 'ABCD 版本发布',
|
||||
description: '指派竹尔于 2022-01-09 前完成更新并发布',
|
||||
datetime: '',
|
||||
extra: '进行中',
|
||||
color: 'blue',
|
||||
type: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -12,9 +12,7 @@
|
||||
{{ item.name }}
|
||||
<span v-if="item.list.length !== 0">({{ item.list.length }})</span>
|
||||
</template>
|
||||
<!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
|
||||
<NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
|
||||
<NoticeList :list="item.list" v-else />
|
||||
<NoticeList :list="item.list" />
|
||||
</TabPane>
|
||||
</template>
|
||||
</Tabs>
|
||||
@@ -23,41 +21,54 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from 'vue';
|
||||
import { computed, defineComponent, onMounted, ref } from 'vue';
|
||||
import { Popover, Tabs, Badge } from 'ant-design-vue';
|
||||
import { BellOutlined } from '@ant-design/icons-vue';
|
||||
import { tabListData, ListItem } from './data';
|
||||
import NoticeList from './NoticeList.vue';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { MyNoticeTodo, TabItem, tabListDataAll } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
export default defineComponent({
|
||||
components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('header-notify');
|
||||
const { createMessage } = useMessage();
|
||||
const listData = ref(tabListData);
|
||||
|
||||
const count = computed(() => {
|
||||
let count = 0;
|
||||
for (let i = 0; i < tabListData.length; i++) {
|
||||
count += tabListData[i].list.length;
|
||||
const listData = ref<TabItem[]>([]);
|
||||
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const reqParams = {
|
||||
loginUser: userinfo.value.loginCode,
|
||||
}
|
||||
const result = await tabListDataAll(reqParams);
|
||||
listData.value = result || [];
|
||||
} catch (error) {
|
||||
listData.value = [];
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
function onNoticeClick(record: ListItem) {
|
||||
createMessage.success('你点击了通知，ID=' + record.id);
|
||||
// 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
|
||||
record.titleDelete = !record.titleDelete;
|
||||
}
|
||||
|
||||
const count = computed(() => {
|
||||
let count = 0;
|
||||
for (let i = 0; i < listData.value.length; i++) {
|
||||
count += listData.value[i].list.length;
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
});
|
||||
return {
|
||||
prefixCls,
|
||||
listData,
|
||||
count,
|
||||
onNoticeClick,
|
||||
numberStyle: {},
|
||||
getDataList,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,114 +1,101 @@
|
||||
<template>
|
||||
<PageWrapper title="关于">
|
||||
<PageWrapper>
|
||||
<template #headerContent>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex-1">
|
||||
<a href="https://jeesite.com" target="_blank">JeeSite</a>
|
||||
快速开发平台，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，有平台来封装技术细节，
|
||||
让开发者更专注业务，降低软件的开发难度。平台基于经典组合 Spring Boot、Apache MyBatis，
|
||||
前端采用：Vue3、Vite、Monorepo、Ant-Design-Vue、TypeScript、
|
||||
<a href="https://github.com/anncwb/vue-vben-admin" target="_blank">Vue Vben Admin</a>，
|
||||
最先进的技术栈，让初学者能够更快的入门并投入到团队开发中去。
|
||||
提供在线代码生成功能，包括模块如：组织机构、角色用户、菜单及按钮授权、数据权限、系统参数、内容管理、工作流等。
|
||||
众多账号安全设置，密码策略；文件在线预览；消息推送；多元化第三方登录；在线定时任务配置；支持集群，支持SAAS；
|
||||
支持多数据源；支持读写分离、分库分表；支持 Spring Cloud 分布式微服务应用架构。
|
||||
强大的组件封装，数据驱动视图。为微小中大型项目的开发，提供现成的开箱解决方案及丰富的示例。
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<Description @register="infoRegister" class="enter-y" />
|
||||
<Description @register="register" class="enter-y my-4" />
|
||||
<Description @register="registerDev" class="enter-y" />
|
||||
<div class="jeesite-workbench">
|
||||
<div class="workbench-layout">
|
||||
<div class="workbench-top">10% 区域</div>
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">30% 区域左侧</div>
|
||||
<div class="workbench-col">30% 区域右侧</div>
|
||||
</div>
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">30% 区域左侧</div>
|
||||
<div class="workbench-col">30% 区域右侧</div>
|
||||
</div>
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">30% 区域左侧</div>
|
||||
<div class="workbench-col">30% 区域右侧</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup name="AboutPage">
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
<script lang="ts" setup name="Workbench">
|
||||
import { ref } from 'vue';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import { Description, DescItem, useDescription } from '@jeesite/core/components/Description';
|
||||
|
||||
const { pkg, lastBuildTime } = __APP_INFO__;
|
||||
|
||||
const { dependencies, devDependencies, version } = pkg;
|
||||
|
||||
const schema: DescItem[] = [];
|
||||
const devSchema: DescItem[] = [];
|
||||
|
||||
const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
|
||||
const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
|
||||
|
||||
const infoSchema: DescItem[] = [
|
||||
{
|
||||
label: '版本',
|
||||
field: 'version',
|
||||
render: commonTagRender('blue'),
|
||||
},
|
||||
{
|
||||
label: '最后编译时间',
|
||||
field: 'lastBuildTime',
|
||||
render: commonTagRender('blue'),
|
||||
},
|
||||
{
|
||||
label: '文档地址',
|
||||
field: 'docs',
|
||||
render: commonLinkRender('http://docs.jeesite.com'),
|
||||
},
|
||||
{
|
||||
label: '官方网站',
|
||||
field: 'website',
|
||||
render: commonLinkRender('https://jeesite.com'),
|
||||
},
|
||||
{
|
||||
label: '下载地址',
|
||||
field: 'download',
|
||||
render: commonLinkRender('https://gitee.com/thinkgem'),
|
||||
},
|
||||
{
|
||||
label: '联系我',
|
||||
field: 'linkers',
|
||||
render: commonLinkRender('http://s.jeesite.com'),
|
||||
},
|
||||
];
|
||||
|
||||
const infoData = {
|
||||
version,
|
||||
lastBuildTime,
|
||||
docs: 'http://docs.jeesite.com',
|
||||
website: 'https://jeesite.com',
|
||||
download: 'https://gitee.com/thinkgem',
|
||||
linkers: 'http://s.jeesite.com',
|
||||
};
|
||||
|
||||
const [infoRegister] = useDescription({
|
||||
title: '项目信息',
|
||||
data: infoData,
|
||||
schema: infoSchema,
|
||||
column: 2,
|
||||
});
|
||||
|
||||
let register: any;
|
||||
if (dependencies) {
|
||||
Object.keys(dependencies).forEach((key) => {
|
||||
schema.push({ field: key, label: key });
|
||||
});
|
||||
register = useDescription({
|
||||
title: '生产环境依赖',
|
||||
data: dependencies,
|
||||
schema: schema,
|
||||
column: 3,
|
||||
})[0];
|
||||
}
|
||||
|
||||
let registerDev: any;
|
||||
if (devDependencies) {
|
||||
Object.keys(devDependencies).forEach((key) => {
|
||||
devSchema.push({ field: key, label: key });
|
||||
});
|
||||
registerDev = useDescription({
|
||||
title: '开发环境依赖',
|
||||
data: devDependencies,
|
||||
schema: devSchema,
|
||||
column: 3,
|
||||
})[0];
|
||||
}
|
||||
const loading = ref(true);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 800);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@dark-bg: #141414;
|
||||
|
||||
.jeesite-workbench {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-top {
|
||||
flex: 0 0 10%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-row {
|
||||
display: flex;
|
||||
flex: 0 0 30%;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-col,
|
||||
.jeesite-workbench .workbench-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
background: #FFFFFF;
|
||||
color: rgb(71 85 105);
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-workbench,
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-layout,
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-row {
|
||||
background: @dark-bg !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-top,
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-col {
|
||||
border-color: rgb(51 65 85);
|
||||
background: @dark-bg !important;
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="jeesite-analysis">
|
||||
<div class="mySpring-analysis">
|
||||
<div class="analysis-layout">
|
||||
<div class="analysis-left">
|
||||
<section class="analysis-panel">左上</section>
|
||||
@@ -17,20 +17,19 @@
|
||||
<style lang="less">
|
||||
@dark-bg: #141414;
|
||||
|
||||
.jeesite-analysis .ant-card {
|
||||
.mySpring-analysis .ant-card {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.jeesite-analysis {
|
||||
.mySpring-analysis {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-layout {
|
||||
.mySpring-analysis .analysis-layout {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -43,8 +42,8 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-left,
|
||||
.jeesite-analysis .analysis-right {
|
||||
.mySpring-analysis .analysis-left,
|
||||
.mySpring-analysis .analysis-right {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
@@ -53,17 +52,17 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-left {
|
||||
.mySpring-analysis .analysis-left {
|
||||
flex: 2 1 0;
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-right {
|
||||
.mySpring-analysis .analysis-right {
|
||||
flex: 3 1 0;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-panel {
|
||||
.mySpring-analysis .analysis-panel {
|
||||
min-height: 0;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
@@ -76,26 +75,26 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-panel {
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-panel {
|
||||
border-color: rgb(51 65 85);
|
||||
background: @dark-bg !important;
|
||||
color: rgb(203 213 225);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis,
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-layout,
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-left,
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-right {
|
||||
html[data-theme='dark'] .mySpring-analysis,
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-layout,
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-left,
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-right {
|
||||
background: @dark-bg !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis {
|
||||
html[data-theme='dark'] .mySpring-analysis {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis,
|
||||
html[data-theme='dark'] .jeesite-analysis * {
|
||||
html[data-theme='dark'] .mySpring-analysis,
|
||||
html[data-theme='dark'] .mySpring-analysis * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user