sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

日历

intex_online20250117
张立 3 weeks ago
parent
336476017d
commit
b4de9c590f
3 changed files with 88 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/locales/en-US.ts
  2. 3
      src/locales/zh-CN.ts
  3. 251
      src/views/wms/basicDataManage/supplierManage/receivedCalendar/index.vue

3
src/locales/en-US.ts
View File

@ -1322,6 +1322,7 @@ export default {
详情:'Detail',
退回:'Return',
作废成功: 'Invalid successfully',
'索赔金额不能为0，请修改后提交。': 'The claim amount cannot be 0, please modify and submit.'
'索赔金额不能为0，请修改后提交。': 'The claim amount cannot be 0, please modify and submit.',
新增班次: 'Create Shift'
},
}

3
src/locales/zh-CN.ts
View File

@ -1321,7 +1321,8 @@ export default {
创建开票申请: '创建开票申请',
作废成功:'作废成功',
退回: '退回',
'索赔金额不能为0，请修改后提交。':'索赔金额不能为0，请修改后提交。'
'索赔金额不能为0，请修改后提交。': '索赔金额不能为0，请修改后提交。',
新增班次:'新增班次'
},
}

251
src/views/wms/basicDataManage/supplierManage/receivedCalendar/index.vue
View File

@ -1,29 +1,23 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<Search :schema="ReceivedCalendar.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<!-- 列表头部 -->
<TableHead
:HeadButttondata="HeadButttondata"
@button-base-click="buttonBaseClick"
:routeName="routeName"
@updataTableColumns="updataTableColumns"
@searchFormClick="searchFormClick"
:allSchemas="ReceivedCalendar.allSchemas"
/>
<!-- 列表 -->
<ContentWrap>
<el-calendar ref='calendar'>
<template #header="{ date }">
<el-select v-model="value" placeholder="受入号" style="width: 240px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<ButtonBaseMore :Butttondata="HeadButttondata" @button-base-click="buttonTableClick($event,row)" />
<div style="display: flex;justify-content: center;align-items: center;width: 100%;">
<el-button size="small" text @click="selectDate('prev-month')">
<el-button size="small" text @click="selectDate('prev-month',date)">
<Icon icon="ep:arrow-left" size="18px"/>
</el-button>
<span style="padding: 0px 20px;">{{ date }}</span>
<el-button size="small" text @click="selectDate('next-month')">
<el-button size="small" text @click="selectDate('next-month',date)">
<Icon icon="ep:arrow-right" size="18px"/>
</el-button>
</div>
@ -38,7 +32,6 @@
<div class="text">白班</div>
<Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" @click="deleteShift(data.day,1)" />
</div>
<!-- 做监听 -->
<div class="sun" v-if="isSpecialDate(data.day) && !isSpecialDate(data.day).isHideMoon">
<el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/moon.svg" />
<div class="text">夜班</div>
@ -62,22 +55,13 @@
@searchTableSuccess="searchTableSuccess"
:isBusiness="false"
/>
<!-- 详情 -->
<Detail ref="detailRef" :isBasic="true" :allSchemas="ReceivedCalendar.allSchemas" />
<!-- 导入 -->
<ImportForm ref="importFormRef" url="/basic/received-calendar/import" :importTemplateData="importTemplateData" @success="importSuccess" />
</template>
</template>
<script setup lang="ts">
import download from '@/utils/download'
import { ReceivedCalendar,ReceivedCalendarRules } from './receivedCalendar.data'
import * as ReceivedCalendarApi from '@/api/wms/receivedCalendar'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import TableHead from '@/components/TableHead/src/TableHead.vue'
import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
import Detail from '@/components/Detail/src/Detail.vue'
import { ElCalendar } from 'element-plus'
import { formatDate } from '@/utils/formatTime'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
@ -92,6 +76,7 @@ const routeName = ref()
routeName.value = route.name
const tableColumns = ref(ReceivedCalendar.allSchemas.tableColumns)
// 后台返回的数据
const dayData = ref([{
day:'2025-01-01',
isHideSun:false,
@ -108,75 +93,23 @@ const dayData = ref([{
isHideSun:true,
}])
const getDatesInCurrentMonth=() =>{
const today = new Date();
const year1 = today.getFullYear();
const month1 = today.getMonth(); // 注意：月份是从0开始的，0代表1月，11代表12月
const date1 = 1; // 从1号开始
const firstDayOfMonth = new Date(year1, month1, date1);
const lastDayOfMonth = new Date(year1, month1 + 1, 0); // 获取下个月的0号，即当前月的最后一天
const daysInMonth = lastDayOfMonth.getDate();
const dates = [];
for (let i = 1; i <= daysInMonth; i++) {
const year =new Date(year1, month1, i).getFullYear();
const month = new Date(year1, month1, i).getMonth() + 1 >= 10 ? new Date(year1, month1, i).getMonth() + 1 : '0' + (new Date(year1, month1, i).getMonth() + 1);
const date = new Date(year1, month1, i).getDate()>= 10 ? new Date(year1, month1, i).getDate() : '0' + (new Date(year1, month1, i).getDate());
const day = `${year}-${month}-${date}`
const isHaveDay = dayData.value.find(item => (item.day == day))
dates.push({
day:`${year}-${month}-${date}`,
isHideSun:isHaveDay&&isHaveDay.isHideSun ? isHaveDay.isHideSun : false,
isHideMoon:isHaveDay&&isHaveDay.isHideMoon ? isHaveDay.isHideMoon : false,
});
}
return dates;
}
// 使用函数
const datesInCurrentMonth = ref(getDatesInCurrentMonth());
const isSpecialDate=(date)=> {
const isSpecialDate = (date) => {
return datesInCurrentMonth.value.find(item=>item.day == date);
}
// 查询页面返回
const searchTableSuccess = (formField, searchField, val, formRef) => {
nextTick(() => {
const setV = {}
setV[formField] = val[0][searchField]
formRef.setValues(setV)
})
}
// 字段设置 更新主列表字段
const updataTableColumns = (val) => {
tableColumns.value = val
}
const { tableObject, tableMethods } = useTable({
getListApi: ReceivedCalendarApi.getReceivedCalendarPage // 分页接口
})
// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods
// 列表头部按钮
const HeadButttondata = [
defaultButtons.defaultAddBtn({hasPermi:'basic:received-calendar:create'}), // 新增
defaultButtons.defaultImportBtn({hasPermi:'basic:received-calendar:import'}), // 导入
defaultButtons.defaultExportBtn({hasPermi:'basic:received-calendar:export'}), // 导出
defaultButtons.defaultFreshBtn(null), // 刷新
defaultButtons.defaultFilterBtn(null), // 筛选
defaultButtons.defaultSetBtn(null), // 设置
// {
// label: '自定义扩展按钮',
// name: 'zdy',
// hide: false,
// type: 'primary',
// icon: 'Select',
// color: ''
// },
defaultButtons.defaultAddBtn({
label: t(`ts.新增班次`).replace('ts.', ''),
name: 'add',
hide: false,
type: 'primary',
icon: '',
color: '',
hasPermi: ''
}), // 新增
]
// 头部按钮事件
@ -194,22 +127,6 @@ const buttonBaseClick = (val, item) => {
console.log('其他按钮', item)
}
}
// 列表-操作按钮
const butttondata = [
defaultButtons.mainListEditBtn({hasPermi:'wms:receivedCalendar:update'}), // 编辑
defaultButtons.mainListDeleteBtn({hasPermi:'wms:receivedCalendar:delete'}), // 删除
]
// 列表-操作按钮事件
const buttonTableClick = async (val, row) => {
if (val == 'edit') { // 编辑
openForm('update', row)
} else if (val == 'delete') { // 删除
handleDelete(row.id)
}
}
/** 添加/修改操作 */
const basicFormRef = ref()
const openForm = (type: string, row?: any) => {
@ -265,64 +182,6 @@ const formsSuccess = async (formType, data) => {
getList()
}
/** 详情操作 */
const detailRef = ref()
const openDetail = (row: any, titleName: any, titleValue: any) => {
detailRef.value.openDetail(row, titleName, titleValue, 'basicReceivedCalendar')
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ReceivedCalendarApi.deleteReceivedCalendar(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const exportLoading = ref(false) // 导出的加载中
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await ReceivedCalendarApi.exportReceivedCalendar(tableObject.params)
download.excel(data, '受入日历.xlsx')
} catch {
} finally {
exportLoading.value = false
}
}
/** 导入 */
const importFormRef = ref()
const handleImport = () => {
importFormRef.value.open()
}
// 导入附件弹窗所需的参数
const importTemplateData = reactive({
templateUrl: '',
templateTitle: '受入日历导入模版.xlsx'
})
// 导入成功之后
const importSuccess = () => {
getList()
}
// 筛选提交
const searchFormClick = (searchData) => {
tableObject.params = {
isSearch: true,
filters: searchData.filters
}
getList() // 刷新当前列表
}
// 刪除班次
const deleteShift=(day,type) =>{
console.log(dayData.value)
@ -341,17 +200,73 @@ const deleteShift=(day,type) =>{
}
}))
}
console.log(item)
}
// 获取数据之后回显问题
const datesInCurrentMonth =ref([])//选择的月份的所有日期
const getDatesInCurrentMonth = (yearParams, monthParams) => {
const lastDayOfMonth = new Date(yearParams, monthParams+1, 0); // 获取下个月的0号，即当前月的最后一天
const daysInMonth = lastDayOfMonth.getDate();
const dates = [];
for (let i = 1; i <= daysInMonth; i++) {
const year =new Date(yearParams, monthParams, i).getFullYear();
const month = new Date(yearParams, monthParams, i).getMonth() + 1 >= 10 ? new Date(yearParams, monthParams, i).getMonth() + 1 : '0' + (new Date(yearParams, monthParams, i).getMonth() + 1);
const date = new Date(yearParams, monthParams, i).getDate()>= 10 ? new Date(yearParams, monthParams, i).getDate() : '0' + (new Date(yearParams, monthParams, i).getDate());
const day = `${year}-${month}-${date}`
const isHaveDay = dayData.value.find(item => (item.day == day))
dates.push({
day:`${year}-${month}-${date}`,
isHideSun:isHaveDay&&isHaveDay.isHideSun ? isHaveDay.isHideSun : false,
isHideMoon:isHaveDay&&isHaveDay.isHideMoon ? isHaveDay.isHideMoon : false,
});
}
datesInCurrentMonth.value = dates;
}
// 获取数据
const getData=async () =>{
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth(); // 注意：月份是从0开始的，0代表1月，11代表12月
await getDatesInCurrentMonth(year,month)
}
// 使用函数
getData()
const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
const selectDate =async (val: CalendarDateType,date) => {
if (!calendar.value) return
// 获取点击当前的年月
let regex = /(\d{4}) 年 (\d{1,2}) 月/;
let match = date.match(regex);
let year = match[1]; // 年份
let month = match[2]; // 月份
calendar.value.selectDate(val)
// 获取上、下一个月的月份或者年份
const yearOrMonth = await getPreviousMonth(val, year, month)
await getDatesInCurrentMonth(yearOrMonth.year,yearOrMonth.month-1)
}
// 获取上、下一个月的月份或者年份
const getPreviousMonth = async(type,year,month)=> {
if (type == 'prev-month') {
// 判断是否为1月，如果是1月，则年份减1，月份设置为12
if (month == 1) {
month = 12;
year--;
} else {
month--; // 直接减1得到上一个月
}
}else if( 'next-month') {
// 判断是否为1月，如果是1月，则年份减1，月份设置为12
if (month == 12) {
month = 1;
year++;
} else {
month++; // 直接减1得到上一个月
}
}
return { year, month };
}
/** 初始化 **/
onMounted(async () => {
getList()
importTemplateData.templateUrl = await ReceivedCalendarApi.importTemplate()
})
</script>

Write Preview
Loading…
Cancel
Save