初始化项目
This commit is contained in:
57
web-vue/packages/biz/api/biz/myMeetingInfo.ts
Normal file
57
web-vue/packages/biz/api/biz/myMeetingInfo.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 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 MyMeetingInfo extends BasicModel<MyMeetingInfo> {
|
||||
createTime?: string; // 记录时间
|
||||
title: string; // 会议标题
|
||||
meetingCode: string; // 会议编号
|
||||
meetingContent: string; // 会议内容
|
||||
meetingUser: string; // 参会人员
|
||||
otherUser?: string; // 其他人员
|
||||
meetingType: string; // 会议类型
|
||||
startTime?: string; // 开始时间
|
||||
endTime?: string; // 结束时间
|
||||
meetingLocation: string; // 会议地点
|
||||
ustatus: string; // 会议状态
|
||||
remark?: string; // 备注说明
|
||||
createUser?: string; // 创建账户
|
||||
updateTime?: string; // 更新时间
|
||||
}
|
||||
|
||||
export const myMeetingInfoList = (params?: MyMeetingInfo | any) =>
|
||||
defHttp.get<MyMeetingInfo>({ url: adminPath + '/biz/myMeetingInfo/list', params });
|
||||
|
||||
export const myMeetingInfoListData = (params?: MyMeetingInfo | any) =>
|
||||
defHttp.post<Page<MyMeetingInfo>>({ url: adminPath + '/biz/myMeetingInfo/listData', params });
|
||||
|
||||
export const myMeetingInfoForm = (params?: MyMeetingInfo | any) =>
|
||||
defHttp.get<MyMeetingInfo>({ url: adminPath + '/biz/myMeetingInfo/form', params });
|
||||
|
||||
export const myMeetingInfoSave = (params?: any, data?: MyMeetingInfo | any) =>
|
||||
defHttp.postJson<MyMeetingInfo>({ url: adminPath + '/biz/myMeetingInfo/save', params, data });
|
||||
|
||||
export const myMeetingInfoImportData = (
|
||||
params: UploadFileParams,
|
||||
onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
|
||||
) =>
|
||||
defHttp.uploadFile<UploadApiResult>(
|
||||
{
|
||||
url: ctxPath + adminPath + '/biz/myMeetingInfo/importData',
|
||||
onUploadProgress,
|
||||
},
|
||||
params,
|
||||
);
|
||||
|
||||
export const myMeetingInfoDelete = (params?: MyMeetingInfo | any) =>
|
||||
defHttp.get<MyMeetingInfo>({ url: adminPath + '/biz/myMeetingInfo/delete', params });
|
||||
60
web-vue/packages/biz/api/biz/mySchedule.ts
Normal file
60
web-vue/packages/biz/api/biz/mySchedule.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* 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 MySchedule extends BasicModel<MySchedule> {
|
||||
createTime?: string; // 记录时间
|
||||
scheduleId?: string; // 日程主键
|
||||
title: string; // 日程标题
|
||||
content: string; // 日程内容
|
||||
scheduleType: string; // 日程类型
|
||||
startTime?: string; // 开始时间
|
||||
endTime?: string; // 结束时间
|
||||
priority: string; // 优先等级
|
||||
ustatus: string; // 日程状态
|
||||
isAllDay: string; // 是否全天
|
||||
remindTime?: number; // 提醒分钟
|
||||
location?: string; // 日程地点
|
||||
createUser?: number; // 创建账户
|
||||
updateTime?: string; // 更新时间
|
||||
}
|
||||
|
||||
export const myScheduleList = (params?: MySchedule | any) =>
|
||||
defHttp.get<MySchedule>({ url: adminPath + '/biz/mySchedule/list', params });
|
||||
|
||||
export const myScheduleListAll = (params?: MySchedule | any) =>
|
||||
defHttp.get<MySchedule[]>({ url: adminPath + '/biz/mySchedule/listAll', params });
|
||||
|
||||
export const myScheduleListData = (params?: MySchedule | any) =>
|
||||
defHttp.post<Page<MySchedule>>({ url: adminPath + '/biz/mySchedule/listData', params });
|
||||
|
||||
export const myScheduleForm = (params?: MySchedule | any) =>
|
||||
defHttp.get<MySchedule>({ url: adminPath + '/biz/mySchedule/form', params });
|
||||
|
||||
export const myScheduleSave = (params?: any, data?: MySchedule | any) =>
|
||||
defHttp.postJson<MySchedule>({ url: adminPath + '/biz/mySchedule/save', params, data });
|
||||
|
||||
export const myScheduleImportData = (
|
||||
params: UploadFileParams,
|
||||
onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
|
||||
) =>
|
||||
defHttp.uploadFile<UploadApiResult>(
|
||||
{
|
||||
url: ctxPath + adminPath + '/biz/mySchedule/importData',
|
||||
onUploadProgress,
|
||||
},
|
||||
params,
|
||||
);
|
||||
|
||||
export const myScheduleDelete = (params?: MySchedule | any) =>
|
||||
defHttp.get<MySchedule>({ url: adminPath + '/biz/mySchedule/delete', params });
|
||||
228
web-vue/packages/biz/views/biz/myMeetingInfo/form.vue
Normal file
228
web-vue/packages/biz/views/biz/myMeetingInfo/form.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<!--
|
||||
* 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:myMeetingInfo: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">
|
||||
<template #remarks="{ model, field }">
|
||||
<WangEditor v-model:value="model[field]" :bizKey="record.id" :bizType="field" :height="300" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsBizMyMeetingInfoForm">
|
||||
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 { WangEditor } from '@jeesite/core/components/WangEditor';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { BasicDrawer, useDrawerInner } from '@jeesite/core/components/Drawer';
|
||||
import { MyMeetingInfo, myMeetingInfoSave, myMeetingInfoForm } from '@jeesite/biz/api/biz/myMeetingInfo';
|
||||
import { formatToDateTime } from '@jeesite/core/utils/dateUtil';
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { t } = useI18n('biz.myMeetingInfo');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<MyMeetingInfo>({} as MyMeetingInfo);
|
||||
|
||||
const getTitle = computed(() => ({
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: record.value.isNewRecord ? t('新增会议') : t('编辑会议'),
|
||||
}));
|
||||
|
||||
function getMeetingCode() {
|
||||
return `WF_AM${Date.now()}`;
|
||||
}
|
||||
|
||||
const inputFormSchemas: FormSchema<MyMeetingInfo>[] = [
|
||||
{
|
||||
label: t('基本信息'),
|
||||
field: 'basicInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('会议标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 255,
|
||||
},
|
||||
required: true,
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('会议类型'),
|
||||
field: 'meetingType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'meeting_type',
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('会议编号'),
|
||||
field: 'meetingCode',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 64,
|
||||
disabled: true,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('会议内容'),
|
||||
field: 'meetingContent',
|
||||
component: 'InputTextArea',
|
||||
slot: 'remarks',
|
||||
required: true,
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('参会人员'),
|
||||
field: 'meetingUser',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 1000,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('其他人员'),
|
||||
field: 'otherUser',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 1000,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('开始时间'),
|
||||
field: 'startTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('结束时间'),
|
||||
field: 'endTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('会议地点'),
|
||||
field: 'meetingLocation',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 255,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('会议状态'),
|
||||
field: 'ustatus',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'meeting_status',
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('备注说明'),
|
||||
field: 'remark',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('附件上传'),
|
||||
field: 'dataMap',
|
||||
component: 'Upload',
|
||||
componentProps: {
|
||||
loadTime: computed(() => record.value.__t),
|
||||
bizKey: computed(() => record.value.id),
|
||||
bizType: 'myMeetingInfo_file',
|
||||
uploadType: 'all',
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<MyMeetingInfo>({
|
||||
labelWidth: 120,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
setDrawerProps({ loading: true });
|
||||
await resetFields();
|
||||
const res = await myMeetingInfoForm(data);
|
||||
record.value = (res.myMeetingInfo || {}) as MyMeetingInfo;
|
||||
if (record.value.isNewRecord) {
|
||||
record.value.meetingCode = getMeetingCode();
|
||||
}
|
||||
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,
|
||||
};
|
||||
|
||||
if(record.value.isNewRecord){
|
||||
data.createUser = userinfo.value.loginCode;
|
||||
}
|
||||
|
||||
data[record.value.isNewRecord ? 'createTime' : 'updateTime'] = formatToDateTime(new Date());
|
||||
|
||||
// console.log('submit', params, data, record);
|
||||
const res = await myMeetingInfoSave(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>
|
||||
293
web-vue/packages/biz/views/biz/myMeetingInfo/list.vue
Normal file
293
web-vue/packages/biz/views/biz/myMeetingInfo/list.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<!--
|
||||
* 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:myMeetingInfo: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="ViewsBizMyMeetingInfoList">
|
||||
import { onMounted, ref, unref, computed } 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 { MyMeetingInfo, myMeetingInfoList } from '@jeesite/biz/api/biz/myMeetingInfo';
|
||||
import { myMeetingInfoDelete, myMeetingInfoListData } from '@jeesite/biz/api/biz/myMeetingInfo';
|
||||
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';
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
const { t } = useI18n('biz.myMeetingInfo');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<MyMeetingInfo>({} as MyMeetingInfo);
|
||||
|
||||
const getTitle = {
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: meta.title || t('会议管理'),
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm: FormProps<MyMeetingInfo> = {
|
||||
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: 'meetingType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'meeting_type',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('会议地点'),
|
||||
field: 'meetingLocation',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('备注说明'),
|
||||
field: 'remark',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('会议状态'),
|
||||
field: 'ustatus',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'meeting_status',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<MyMeetingInfo>[] = [
|
||||
{
|
||||
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: 'meetingCode',
|
||||
key: 'a.meeting_code',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('参会人员'),
|
||||
dataIndex: 'meetingUser',
|
||||
key: 'a.meeting_user',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('其他人员'),
|
||||
dataIndex: 'otherUser',
|
||||
key: 'a.other_user',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('会议类型'),
|
||||
dataIndex: 'meetingType',
|
||||
key: 'a.meeting_type',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
dictType: 'meeting_type',
|
||||
},
|
||||
{
|
||||
title: t('开始时间'),
|
||||
dataIndex: 'startTime',
|
||||
key: 'a.start_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('结束时间'),
|
||||
dataIndex: 'endTime',
|
||||
key: 'a.end_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('会议地点'),
|
||||
dataIndex: 'meetingLocation',
|
||||
key: 'a.meeting_location',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('会议状态'),
|
||||
dataIndex: 'ustatus',
|
||||
key: 'a.ustatus',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
dictType: 'meeting_status',
|
||||
},
|
||||
{
|
||||
title: t('备注说明'),
|
||||
dataIndex: 'remark',
|
||||
key: 'a.remark',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('更新时间'),
|
||||
dataIndex: 'updateTime',
|
||||
key: 'a.update_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumn: BasicColumn<MyMeetingInfo> = {
|
||||
width: 160,
|
||||
align: 'center',
|
||||
actions: (record: MyMeetingInfo) => [
|
||||
{
|
||||
icon: 'i-clarity:note-edit-line',
|
||||
title: t('编辑'),
|
||||
onClick: handleForm.bind(this, { id: record.id }),
|
||||
auth: 'biz:myMeetingInfo:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
title: t('删除'),
|
||||
popConfirm: {
|
||||
title: t('是否确认删除会议?'),
|
||||
confirm: handleDelete.bind(this, record),
|
||||
},
|
||||
auth: 'biz:myMeetingInfo:edit',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [registerTable, { reload, getForm }] = useTable<MyMeetingInfo>({
|
||||
api: myMeetingInfoListData,
|
||||
beforeFetch: (params) => {
|
||||
return {
|
||||
...params,
|
||||
createUser: userinfo.value.loginCode,
|
||||
};
|
||||
},
|
||||
columns: tableColumns,
|
||||
actionColumn: actionColumn,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await myMeetingInfoList();
|
||||
record.value = (res.myMeetingInfo || {}) as MyMeetingInfo;
|
||||
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/myMeetingInfo/exportData',
|
||||
params: getForm().getFieldsValue(),
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
const params = { id: record.id };
|
||||
const res = await myMeetingInfoDelete(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
</script>
|
||||
@@ -135,9 +135,6 @@
|
||||
label: t('便签内容'),
|
||||
field: 'content',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 9000,
|
||||
},
|
||||
slot: 'remarks',
|
||||
required: true,
|
||||
colProps: { md: 24, lg: 24 },
|
||||
|
||||
@@ -39,6 +39,10 @@
|
||||
import { WangEditor } from '@jeesite/core/components/WangEditor';
|
||||
import { MyNoticeTodo, myNoticeTodoSave, myNoticeTodoForm } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
import { formatToDateTime } from '@jeesite/core/utils/dateUtil';
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
@@ -153,6 +157,10 @@
|
||||
id: record.value.id || data.id,
|
||||
};
|
||||
|
||||
if(record.value.isNewRecord){
|
||||
data.createUser = userinfo.value.loginCode;
|
||||
}
|
||||
|
||||
data[record.value.isNewRecord ? 'createTime' : 'updateTime'] = formatToDateTime(new Date());
|
||||
|
||||
// console.log('submit', params, data, record);
|
||||
|
||||
195
web-vue/packages/biz/views/biz/mySchedule/form.vue
Normal file
195
web-vue/packages/biz/views/biz/mySchedule/form.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<!--
|
||||
* 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:mySchedule: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="ViewsBizMyScheduleForm">
|
||||
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 { MySchedule, myScheduleSave, myScheduleForm } from '@jeesite/biz/api/biz/mySchedule';
|
||||
import { formatToDateTime } from '@jeesite/core/utils/dateUtil';
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { t } = useI18n('biz.mySchedule');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<MySchedule>({} as MySchedule);
|
||||
|
||||
const getTitle = computed(() => ({
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: record.value.isNewRecord ? t('新增日程') : t('编辑日程'),
|
||||
}));
|
||||
|
||||
const inputFormSchemas: FormSchema<MySchedule>[] = [
|
||||
{
|
||||
label: t('基本信息'),
|
||||
field: 'basicInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('日程标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 100,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('日程类型'),
|
||||
field: 'scheduleType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'schedule_type',
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('日程内容'),
|
||||
field: 'content',
|
||||
component: 'InputTextArea',
|
||||
required: true,
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('开始时间'),
|
||||
field: 'startTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('结束时间'),
|
||||
field: 'endTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('优先等级'),
|
||||
field: 'priority',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'biz_priority',
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('日程状态'),
|
||||
field: 'ustatus',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'work_status',
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('是否全天'),
|
||||
field: 'isAllDay',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'all_days',
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('提醒分钟'),
|
||||
field: 'remindTime',
|
||||
defaultValue: 10,
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
maxlength: 9,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('日程地点'),
|
||||
field: 'location',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 100,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<MySchedule>({
|
||||
labelWidth: 120,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
setDrawerProps({ loading: true });
|
||||
await resetFields();
|
||||
const res = await myScheduleForm(data);
|
||||
record.value = (res.mySchedule || {}) as MySchedule;
|
||||
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,
|
||||
scheduleId: record.value.scheduleId || data.scheduleId,
|
||||
};
|
||||
|
||||
if(record.value.isNewRecord){
|
||||
data.createUser = userinfo.value.loginCode;
|
||||
}
|
||||
|
||||
data[record.value.isNewRecord ? 'createTime' : 'updateTime'] = formatToDateTime(new Date());
|
||||
// console.log('submit', params, data, record);
|
||||
const res = await myScheduleSave(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>
|
||||
303
web-vue/packages/biz/views/biz/mySchedule/list.vue
Normal file
303
web-vue/packages/biz/views/biz/mySchedule/list.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<!--
|
||||
* 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:mySchedule:edit'">
|
||||
<Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<template #bizScopeKey="{ record, text, value }">
|
||||
<a @click="handleForm({ scheduleId: record.scheduleId })" :title="value">
|
||||
{{ text }}
|
||||
</a>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<InputForm @register="registerDrawer" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsBizMyScheduleList">
|
||||
import { onMounted, ref, unref, computed } 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 { MySchedule, myScheduleList } from '@jeesite/biz/api/biz/mySchedule';
|
||||
import { myScheduleDelete, myScheduleListData } from '@jeesite/biz/api/biz/mySchedule';
|
||||
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';
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
const { t } = useI18n('biz.mySchedule');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<MySchedule>({} as MySchedule);
|
||||
|
||||
const getTitle = {
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: meta.title || t('日程管理'),
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm: FormProps<MySchedule> = {
|
||||
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: 'scheduleType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'schedule_type',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('优先等级'),
|
||||
field: 'priority',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'biz_priority',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('日程状态'),
|
||||
field: 'ustatus',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'work_status',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('是否全天'),
|
||||
field: 'isAllDay',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'all_days',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<MySchedule>[] = [
|
||||
{
|
||||
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: 'content',
|
||||
key: 'a.content',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('日程类型'),
|
||||
dataIndex: 'scheduleType',
|
||||
key: 'a.schedule_type',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
dictType: 'schedule_type',
|
||||
},
|
||||
{
|
||||
title: t('开始时间'),
|
||||
dataIndex: 'startTime',
|
||||
key: 'a.start_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('结束时间'),
|
||||
dataIndex: 'endTime',
|
||||
key: 'a.end_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('优先等级'),
|
||||
dataIndex: 'priority',
|
||||
key: 'a.priority',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
dictType: 'biz_priority',
|
||||
},
|
||||
{
|
||||
title: t('日程状态'),
|
||||
dataIndex: 'ustatus',
|
||||
key: 'a.ustatus',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
dictType : 'work_status',
|
||||
},
|
||||
{
|
||||
title: t('是否全天'),
|
||||
dataIndex: 'isAllDay',
|
||||
key: 'a.is_all_day',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
dictType: 'all_days',
|
||||
},
|
||||
{
|
||||
title: t('提醒分钟'),
|
||||
dataIndex: 'remindTime',
|
||||
key: 'a.remind_time',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('日程地点'),
|
||||
dataIndex: 'location',
|
||||
key: 'a.location',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('更新时间'),
|
||||
dataIndex: 'updateTime',
|
||||
key: 'a.update_time',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumn: BasicColumn<MySchedule> = {
|
||||
width: 160,
|
||||
align: 'center',
|
||||
actions: (record: MySchedule) => [
|
||||
{
|
||||
icon: 'i-clarity:note-edit-line',
|
||||
title: t('编辑'),
|
||||
onClick: handleForm.bind(this, { scheduleId: record.scheduleId }),
|
||||
auth: 'biz:mySchedule:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
title: t('删除'),
|
||||
popConfirm: {
|
||||
title: t('是否确认删除日程?'),
|
||||
confirm: handleDelete.bind(this, record),
|
||||
},
|
||||
auth: 'biz:mySchedule:edit',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [registerTable, { reload, getForm }] = useTable<MySchedule>({
|
||||
api: myScheduleListData,
|
||||
beforeFetch: (params) => {
|
||||
return {
|
||||
... params,
|
||||
createUser: userinfo.value.loginCode,
|
||||
};
|
||||
},
|
||||
columns: tableColumns,
|
||||
actionColumn: actionColumn,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await myScheduleList();
|
||||
record.value = (res.mySchedule || {}) as MySchedule;
|
||||
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/mySchedule/exportData',
|
||||
params: getForm().getFieldsValue(),
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
const params = { scheduleId: record.scheduleId };
|
||||
const res = await myScheduleDelete(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,815 @@
|
||||
<template>
|
||||
<div class="schedule-card">
|
||||
<div class="card-title">
|
||||
<span>日程信息</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="schedule-overview">
|
||||
<div class="schedule-summary">
|
||||
<div v-for="item in summaryCards" :key="item.key" class="summary-item">
|
||||
<div class="summary-item__main">
|
||||
<div class="summary-item__pane">
|
||||
<div class="summary-item__value" :style="{ color: item.color }">{{ item.value }}</div>
|
||||
<div v-if="item.extra" class="summary-item__extra">{{ item.extra }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item__label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="schedule-panel schedule-panel--timeline">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<div class="panel-title">今日安排</div>
|
||||
<div class="panel-subtitle">连续刻度展示 08:00 - 18:00 日程</div>
|
||||
</div>
|
||||
<div class="panel-tag">{{ todayLabel }} {{ currentTimeLabel }}</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-scroll">
|
||||
<div class="timeline-body">
|
||||
<div v-if="showCurrentLine" class="timeline-now" :style="currentLineStyle">
|
||||
<span class="timeline-now__label">当前 {{ currentTimeLabel }}</span>
|
||||
</div>
|
||||
|
||||
<div v-for="slot in timeSlots" :key="slot.key" class="timeline-row">
|
||||
<div class="timeline-row__label">{{ slot.label }}</div>
|
||||
<div class="timeline-row__content">
|
||||
<div class="timeline-row__line"></div>
|
||||
<div class="timeline-row__events">
|
||||
<el-tooltip
|
||||
v-for="item in getSlotEvents(slot.start, slot.end)"
|
||||
:key="`${slot.key}-${item.title}-${item.startTime}`"
|
||||
placement="top"
|
||||
:show-after="200"
|
||||
>
|
||||
<template #content>
|
||||
<div class="timeline-tip">
|
||||
<div class="timeline-tip__title">
|
||||
<span class="timeline-tip__label">标题：</span>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__type">
|
||||
<span class="timeline-tip__label">类型：</span>
|
||||
<span>{{ item.typeLabel }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__time">
|
||||
<span class="timeline-tip__label">时间：</span>
|
||||
<span>{{ item.startTime }} - {{ item.endTime }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__desc">
|
||||
<span class="timeline-tip__label">说明：</span>
|
||||
<span>{{ item.desc }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__status" :style="{ color: item.color }">
|
||||
<span class="timeline-tip__label">状态：</span>
|
||||
<span>{{ item.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:class="['timeline-event', { 'timeline-event--active': item.isActive }]"
|
||||
:style="{ '--event-color': item.color }"
|
||||
>
|
||||
<span class="timeline-event__dot"></span>
|
||||
<span class="timeline-event__time">{{ item.startTime }}</span>
|
||||
<span class="timeline-event__title">{{ item.title }}</span>
|
||||
<span class="timeline-event__status">{{ item.status }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { DictData, dictDataListData } from '@jeesite/core/api/sys/dictData';
|
||||
import { MySchedule, myScheduleListAll } from '@jeesite/biz/api/biz/mySchedule';
|
||||
|
||||
const typeDict = ref<DictData[]>([]);
|
||||
const statusDict = ref<DictData[]>([]);
|
||||
const scheduleData = ref<MySchedule[]>([]);
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const res = await myScheduleListAll();
|
||||
scheduleData.value = res || [];
|
||||
} catch (error) {
|
||||
scheduleData.value = [];
|
||||
console.error('获取数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function getDict() {
|
||||
try {
|
||||
typeDict.value = await dictDataListData({ dictType: 'schedule_type' });
|
||||
statusDict.value = await dictDataListData({ dictType: 'work_status' });
|
||||
} catch (error) {
|
||||
typeDict.value = [];
|
||||
statusDict.value = [];
|
||||
console.error('获取数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
interface SummaryCard {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string;
|
||||
extra: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface TimelineItem {
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
title: string;
|
||||
typeLabel: string;
|
||||
desc: string;
|
||||
status: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface TimeSlot {
|
||||
key: string;
|
||||
label: string;
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
interface TimelineDisplayItem extends TimelineItem {
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
const TYPE_COLOR_MAP: Record<string, string> = {
|
||||
'0': '#3B82F6',
|
||||
'1': '#10B981',
|
||||
'2': '#F97316',
|
||||
'3': '#8B5CF6',
|
||||
'4': '#EC4899',
|
||||
};
|
||||
|
||||
const summaryCards = computed<SummaryCard[]>(() => {
|
||||
const colors = ['#3B82F6', '#10B981', '#F97316', '#8B5CF6', '#EC4899', '#06B6D4'];
|
||||
return typeDict.value.slice(0, 4).map((item, index) => {
|
||||
const total = scheduleData.value.filter((schedule) => schedule.scheduleType === item.dictValue).length;
|
||||
return {
|
||||
key: item.dictValue,
|
||||
label: item.dictLabelRaw,
|
||||
value: `${total}`,
|
||||
extra: '',
|
||||
color: colors[index % colors.length],
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function parseTimeToMinutes(time: string) {
|
||||
const [hour, minute] = time.split(':').map((value) => Number(value || 0));
|
||||
return hour * 60 + minute;
|
||||
}
|
||||
|
||||
function normalizeTimeLabel(value?: string) {
|
||||
if (!value) return '';
|
||||
const match = value.match(/(\d{2}):(\d{2})/);
|
||||
if (match) return `${match[1]}:${match[2]}`;
|
||||
return value.length >= 5 ? value.slice(0, 5) : value;
|
||||
}
|
||||
|
||||
function getDictLabel(dictList: DictData[] | undefined, value?: string) {
|
||||
const target = dictList?.find((item) => item.dictValue === value);
|
||||
return target?.dictLabelRaw || value;
|
||||
}
|
||||
|
||||
function getScheduleStatusLabel(item: MySchedule) {
|
||||
return getDictLabel(statusDict.value, item.ustatus);
|
||||
}
|
||||
|
||||
function getScheduleColor(item: MySchedule) {
|
||||
return TYPE_COLOR_MAP[item.scheduleType || ''] || '#3B82F6';
|
||||
}
|
||||
|
||||
const currentTime = ref(new Date());
|
||||
let timeTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function formatMinutesToLabel(minutes: number) {
|
||||
const hour = `${Math.floor(minutes / 60)}`.padStart(2, '0');
|
||||
const minute = `${minutes % 60}`.padStart(2, '0');
|
||||
return `${hour}:${minute}`;
|
||||
}
|
||||
|
||||
const timelineStartMinutes = 8 * 60;
|
||||
const timelineEndMinutes = 18 * 60;
|
||||
const timelineTotalMinutes = timelineEndMinutes - timelineStartMinutes;
|
||||
|
||||
const timeSlots = computed<TimeSlot[]>(() => {
|
||||
return Array.from({ length: 10 }, (_, index) => {
|
||||
const end = timelineEndMinutes - index * 60;
|
||||
const start = end - 60;
|
||||
return {
|
||||
key: `${start}-${end}`,
|
||||
label: `${formatMinutesToLabel(start)} - ${formatMinutesToLabel(end)}`,
|
||||
start,
|
||||
end,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const currentMinutes = computed(() => {
|
||||
const now = currentTime.value;
|
||||
return now.getHours() * 60 + now.getMinutes();
|
||||
});
|
||||
|
||||
const currentTimeLabel = computed(() => formatMinutesToLabel(currentMinutes.value));
|
||||
|
||||
const showCurrentLine = computed(() => {
|
||||
return currentMinutes.value >= timelineStartMinutes && currentMinutes.value <= timelineEndMinutes;
|
||||
});
|
||||
|
||||
const currentLineStyle = computed(() => {
|
||||
const progress = ((timelineEndMinutes - currentMinutes.value) / timelineTotalMinutes) * 100;
|
||||
return {
|
||||
top: `${Math.max(0, Math.min(100, progress))}%`,
|
||||
};
|
||||
});
|
||||
|
||||
const timelineSource = computed<TimelineItem[]>(() => {
|
||||
return scheduleData.value
|
||||
.map((item) => {
|
||||
const startTime = normalizeTimeLabel(item.startTime);
|
||||
const endTime = normalizeTimeLabel(item.endTime);
|
||||
if (!startTime || !endTime) return null;
|
||||
return {
|
||||
startTime,
|
||||
endTime,
|
||||
title: item.title,
|
||||
typeLabel: getDictLabel(typeDict.value, item.scheduleType),
|
||||
desc: item.content,
|
||||
status: getScheduleStatusLabel(item),
|
||||
color: getScheduleColor(item),
|
||||
};
|
||||
})
|
||||
.filter((item): item is TimelineItem => {
|
||||
if (!item) return false;
|
||||
const start = parseTimeToMinutes(item.startTime);
|
||||
const end = parseTimeToMinutes(item.endTime);
|
||||
return Number.isFinite(start) && Number.isFinite(end) && end > start;
|
||||
});
|
||||
});
|
||||
|
||||
const timelineDisplayList = computed<TimelineDisplayItem[]>(() => {
|
||||
return [...timelineSource.value]
|
||||
.sort((a, b) => parseTimeToMinutes(b.startTime) - parseTimeToMinutes(a.startTime))
|
||||
.map((item) => {
|
||||
const start = parseTimeToMinutes(item.startTime);
|
||||
const end = parseTimeToMinutes(item.endTime);
|
||||
return {
|
||||
...item,
|
||||
isActive: currentMinutes.value >= start && currentMinutes.value <= end,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function getSlotEvents(slotStart: number, slotEnd: number) {
|
||||
return timelineDisplayList.value.filter((item) => {
|
||||
const start = parseTimeToMinutes(item.startTime);
|
||||
const end = parseTimeToMinutes(item.endTime);
|
||||
return start < slotEnd && end > slotStart;
|
||||
});
|
||||
}
|
||||
|
||||
const todayLabel = computed(() => {
|
||||
const now = new Date();
|
||||
const month = `${now.getMonth() + 1}`.padStart(2, '0');
|
||||
const date = `${now.getDate()}`.padStart(2, '0');
|
||||
return `${month}/${date}`;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getDict();
|
||||
timeTimer = setInterval(() => {
|
||||
currentTime.value = new Date();
|
||||
}, 60000);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timeTimer) {
|
||||
clearInterval(timeTimer);
|
||||
timeTimer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.schedule-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: rgb(51 65 85);
|
||||
border-bottom: 1px solid rgb(226 232 240);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.schedule-overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr);
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.schedule-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.summary-item,
|
||||
.schedule-panel {
|
||||
border-radius: 12px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
&__pane {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__extra {
|
||||
margin-top: 8px;
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(100% - 16px);
|
||||
min-height: 30px;
|
||||
margin: 0 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 999px;
|
||||
background: rgb(248 250 252);
|
||||
color: rgb(71 85 105);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: rgb(51 65 85);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.panel-subtitle {
|
||||
margin-top: 2px;
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.panel-tag {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgb(248 250 252);
|
||||
color: rgb(71 85 105);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.timeline-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
border-radius: 10px;
|
||||
background: rgb(248 250 252);
|
||||
}
|
||||
|
||||
.timeline-body {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.timeline-row {
|
||||
display: grid;
|
||||
grid-template-columns: 118px minmax(0, 1fr);
|
||||
min-height: 68px;
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px 0 0;
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
background: rgb(226 232 240);
|
||||
}
|
||||
|
||||
&__events {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: rgb(241 245 249);
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__hint-title {
|
||||
color: rgb(51 65 85);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-now {
|
||||
position: absolute;
|
||||
left: 118px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: rgb(239 68 68 / 48%);
|
||||
}
|
||||
|
||||
&__label {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgb(254 226 226);
|
||||
color: rgb(220 38 38);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
--event-color: rgb(59 130 246);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
max-width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 92%);
|
||||
color: rgb(51 65 85);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--event-color) 35%, white);
|
||||
box-shadow: 0 8px 18px rgb(148 163 184 / 16%);
|
||||
}
|
||||
|
||||
&--active {
|
||||
border-color: color-mix(in srgb, var(--event-color) 55%, white);
|
||||
box-shadow: 0 10px 22px rgb(59 130 246 / 14%);
|
||||
background: color-mix(in srgb, var(--event-color) 10%, white);
|
||||
}
|
||||
|
||||
&__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--event-color);
|
||||
}
|
||||
|
||||
&__time {
|
||||
color: var(--event-color);
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__status {
|
||||
flex-shrink: 0;
|
||||
color: rgb(100 116 139);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-tip {
|
||||
max-width: 240px;
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
color: rgb(255 255 255);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&__type,
|
||||
&__time,
|
||||
&__desc,
|
||||
&__status {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__type,
|
||||
&__time,
|
||||
&__desc {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .schedule-card {
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
}
|
||||
|
||||
.summary-item,
|
||||
.schedule-panel {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
&__pane {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
&__extra,
|
||||
&__label {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
|
||||
&__label {
|
||||
border-color: rgb(51 65 85);
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
.panel-subtitle,
|
||||
.panel-tag,
|
||||
.timeline-row__label,
|
||||
.timeline-row__hint {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
|
||||
.panel-tag,
|
||||
.timeline-scroll {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
.timeline-row__hint {
|
||||
background: rgb(30 41 59 / 75%);
|
||||
}
|
||||
|
||||
.timeline-row__hint-title {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
.timeline-row {
|
||||
border-top-color: rgb(51 65 85);
|
||||
|
||||
&__line {
|
||||
background: rgb(51 65 85);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
border-color: rgb(51 65 85);
|
||||
background: rgb(30 41 59 / 55%);
|
||||
color: rgb(226 232 240);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 10px 22px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
&--active {
|
||||
box-shadow: 0 12px 26px rgb(37 99 235 / 22%);
|
||||
}
|
||||
|
||||
&__status {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-now {
|
||||
&::before {
|
||||
background: rgb(248 113 113 / 48%);
|
||||
}
|
||||
|
||||
&__label {
|
||||
background: rgb(69 10 10);
|
||||
color: rgb(254 202 202);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.schedule-card {
|
||||
.schedule-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.schedule-summary {
|
||||
grid-template-rows: repeat(2, minmax(96px, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.schedule-card {
|
||||
.card-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.schedule-summary {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(4, minmax(84px, 1fr));
|
||||
}
|
||||
|
||||
.timeline-scroll {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.timeline-row {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
&__label {
|
||||
justify-content: flex-start;
|
||||
padding: 8px 0 4px;
|
||||
}
|
||||
|
||||
&__line {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
|
||||
&__title {
|
||||
max-width: none;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-now {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,7 +10,7 @@
|
||||
<NoteInfo />
|
||||
</div>
|
||||
<div class="workbench-col">
|
||||
上右
|
||||
<ScheduleInfo />
|
||||
</div>
|
||||
</div>
|
||||
<div class="workbench-row">
|
||||
@@ -26,6 +26,7 @@
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import WorkbenchHeader from './components/WorkbenchHeader.vue';
|
||||
import NoteInfo from './components/NoteInfo.vue';
|
||||
import ScheduleInfo from './components/ScheduleInfo.vue';
|
||||
|
||||
const loading = ref(true);
|
||||
setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user