up
This commit is contained in:
@@ -292,6 +292,15 @@ onMounted(() => {
|
||||
{{ t("appname.schedule") }}
|
||||
</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/purchase"
|
||||
class="nav-item nav-link"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="nav-link-title">
|
||||
{{ t("appname.purchase") }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="ms-auto">
|
||||
|
||||
@@ -4,7 +4,27 @@
|
||||
"login": "Login",
|
||||
"forgot_password": "Forgot Password",
|
||||
"register": "Register",
|
||||
"schedule":"Schedule"
|
||||
"schedule":"Schedule",
|
||||
"purchase":"Purchase"
|
||||
},
|
||||
"schedule": {
|
||||
"my_schedule":"My Schedule",
|
||||
"add_event":"Add Event",
|
||||
"event_title":"Event Title",
|
||||
"event_date":"Event Date",
|
||||
"event_time":"Event Time",
|
||||
"event_description":"Event Description",
|
||||
"save_event":"Save Event",
|
||||
"no_events":"No events found",
|
||||
"delete_event":"Delete Event",
|
||||
"edit_event":"Edit Event",
|
||||
"tody":"Today",
|
||||
"week":"This Week",
|
||||
"month":"This Month",
|
||||
"previous_month":"Prev Month",
|
||||
"next_month":"Next Month",
|
||||
"previous_year":"Prev Year",
|
||||
"next_year":"Next Year"
|
||||
},
|
||||
"message": {
|
||||
"functionality_not_yet_developed":"Functionality not yet developed",
|
||||
|
||||
@@ -4,7 +4,27 @@
|
||||
"login": "登录",
|
||||
"forgot_password": "忘记密码",
|
||||
"register": "注册",
|
||||
"schedule":"日程"
|
||||
"schedule":"日程",
|
||||
"purchase":"采购"
|
||||
},
|
||||
"schedule": {
|
||||
"my_schedule":"我的日程",
|
||||
"add_event":"添加事件",
|
||||
"event_title":"事件标题",
|
||||
"event_date":"事件日期",
|
||||
"event_time":"事件时间",
|
||||
"event_description":"事件描述",
|
||||
"save_event":"保存事件",
|
||||
"no_events":"没有找到事件",
|
||||
"delete_event":"删除事件",
|
||||
"edit_event":"编辑事件",
|
||||
"tody":"今天",
|
||||
"week":"本周",
|
||||
"month":"本月",
|
||||
"previous_month":"上月",
|
||||
"next_month":"下月",
|
||||
"previous_year":"上年",
|
||||
"next_year":"下年"
|
||||
},
|
||||
"message": {
|
||||
"functionality_not_yet_developed":"功能未开发",
|
||||
|
||||
@@ -56,6 +56,11 @@ const router = createRouter({
|
||||
name: "schedule",
|
||||
component: () => import("../views/scheduleView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/purchase",
|
||||
name: "purchase",
|
||||
component: () => import("../views/purchaseView.vue"),
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Invoices</h3>
|
||||
</div>
|
||||
<div class="card-body border-bottom py-3">
|
||||
<div class="d-flex">
|
||||
<div class="text-secondary">
|
||||
Show
|
||||
<div class="mx-2 d-inline-block">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm"
|
||||
value="8"
|
||||
size="3"
|
||||
aria-label="Invoices count"
|
||||
/>
|
||||
</div>
|
||||
entries
|
||||
</div>
|
||||
<div class="ms-auto text-secondary">
|
||||
Search:
|
||||
<div class="ms-2 d-inline-block">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm"
|
||||
aria-label="Search invoice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1">
|
||||
<input
|
||||
class="form-check-input m-0 align-middle"
|
||||
type="checkbox"
|
||||
aria-label="Select all invoices"
|
||||
/>
|
||||
</th>
|
||||
<th class="col-1">
|
||||
No.
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-up -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-sm icon-thick"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M6 15l6 -6l6 6" />
|
||||
</svg>
|
||||
</th>
|
||||
<th class="col-5">物品名称</th>
|
||||
<th class="col-1">用途</th>
|
||||
<th class="w-1">单位</th>
|
||||
<th class="w-1">数量</th>
|
||||
<th class="w-1">单价</th>
|
||||
<th class="w-1">总价</th>
|
||||
<th class="w-1">创建日期</th>
|
||||
<th class="w-1">更新日期</th>
|
||||
<th class="w-1">最新状态</th>
|
||||
<th class="w-1"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
class="form-check-input m-0 align-middle"
|
||||
type="checkbox"
|
||||
aria-label="Select invoice"
|
||||
/>
|
||||
</td>
|
||||
<td><span class="text-muted">001</span></td>
|
||||
<td>
|
||||
办公室用纸
|
||||
</td>
|
||||
<td>办公用品</td>
|
||||
<td>包</td>
|
||||
<td>10</td>
|
||||
<td>15.00</td>
|
||||
<td>150.00</td>
|
||||
<td>2024-06-01</td>
|
||||
<td>2024-06-05</td>
|
||||
<td>
|
||||
<span class="badge bg-success me-1"></span> 已完成
|
||||
</td>
|
||||
<td class="text-end">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex align-items-center">
|
||||
<p class="m-0 text-secondary">
|
||||
Showing <span>1</span> to <span>8</span> of <span>16</span> entries
|
||||
</p>
|
||||
<ul class="pagination m-0 ms-auto">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M15 6l-6 6l6 6" />
|
||||
</svg>
|
||||
prev
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">
|
||||
next
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 6l6 6l-6 6" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -3,13 +3,16 @@ import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction"; //拖动插件 需要用npm安装
|
||||
import listPlugin from '@fullcalendar/list';
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
import { onMounted, watch, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const calendar = ref(null);
|
||||
|
||||
|
||||
const calendarOptions = ref({
|
||||
height: "auto",
|
||||
locale: locale.value,
|
||||
@@ -25,7 +28,7 @@ const calendarOptions = ref({
|
||||
editable: true,
|
||||
selectable: true,
|
||||
firstDay: 1,
|
||||
|
||||
|
||||
dayCellDidMount(info) {
|
||||
switch (info.dow) {
|
||||
case 0:
|
||||
@@ -42,12 +45,54 @@ const calendarOptions = ref({
|
||||
|
||||
info.el.style.border = "1px solid #4b4b4b"; // 浅蓝色边框
|
||||
},
|
||||
headerToolbar: {
|
||||
left: "prevYearCustom,prevMonthCustom,todayCustom,nextMonthCustom,nextYearCustom",
|
||||
center: "title",
|
||||
right: "", //,timeGridWeek,timeGridDay'
|
||||
},
|
||||
|
||||
// 自定义按钮
|
||||
customButtons: {
|
||||
prevYearCustom: {
|
||||
text: t('schedule.previous_year'),
|
||||
click: function () {
|
||||
calendar.value.getApi().prevYear();
|
||||
},
|
||||
},
|
||||
nextYearCustom: {
|
||||
text: t('schedule.next_year'),
|
||||
click: function () {
|
||||
calendar.value.getApi().nextYear();
|
||||
},
|
||||
},
|
||||
prevMonthCustom: {
|
||||
text: t('schedule.previous_month'),
|
||||
click: function () {
|
||||
calendar.value.getApi().prev();
|
||||
},
|
||||
},
|
||||
nextMonthCustom: {
|
||||
text: t('schedule.next_month'),
|
||||
click: function () {
|
||||
calendar.value.getApi().next();
|
||||
},
|
||||
},
|
||||
todayCustom: {
|
||||
text: t('schedule.month'),
|
||||
click: function () {
|
||||
calendar.value.getApi().today();
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
events: [
|
||||
{ title: "事件 1", start: "2025-11-10" },
|
||||
{ title: "事件 2", start: "2025-11-15", end: "2024-06-17" },
|
||||
{ title: "事件 3", start: "2025-11-20T10:30:00", end: "2024-06-20T12:30:00" },
|
||||
|
||||
{
|
||||
title: "事件 3",
|
||||
start: "2025-11-20T10:30:00",
|
||||
end: "2024-06-20T12:30:00",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@@ -59,6 +104,13 @@ function functionupdataTitle() {
|
||||
watch(locale, () => {
|
||||
functionupdataTitle();
|
||||
calendarOptions.value.locale = locale.value;
|
||||
|
||||
// 更新自定义按钮文本
|
||||
calendarOptions.value.customButtons.prevYearCustom.text = t('schedule.previous_year');
|
||||
calendarOptions.value.customButtons.nextYearCustom.text = t('schedule.next_year');
|
||||
calendarOptions.value.customButtons.prevMonthCustom.text = t('schedule.previous_month');
|
||||
calendarOptions.value.customButtons.nextMonthCustom.text = t('schedule.next_month');
|
||||
calendarOptions.value.customButtons.todayCustom.text = t('schedule.month');
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
@@ -66,5 +118,17 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<FullCalendar :options="calendarOptions" />
|
||||
<FullCalendar ref="calendar" :options="calendarOptions" />
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* .fc-prevYearCustom-button {
|
||||
background-color: #4CAF50 !important;
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
border-radius: 5px !important;
|
||||
padding: 8px 16px !important;
|
||||
font-weight: bold !important;
|
||||
} */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user