up

src/components/dateCalendar/index.vue

@@ -1,319 +0,0 @@
-<template>
-    <div :class="ui" class="hc-date-calendar-box">
-        <div class="hc-date-calendar-panel">
-            <div class="hc-date-month-bar">
-                <div class="hc-date-month" @click="prevYearClick">
-                    <i class="hcicon-direction-left"/>
-                </div>
-                <div class="hc-date-month" @click="prevMonthClick">
-                    <i class="hcicon-return"/>
-                </div>
-                <div class="hc-date-month-year">
-                    <!--n-popselect v-model:value="selectedDate.year" :options="yearOptions" size="large" trigger="click" scrollable @update:value="popselectYear">
-                        <div class="date-year">{{selectedDate.year}}年</div>
-                    </n-popselect>
-                    <n-popselect v-model:value="selectedDate.month" :options="monthOptions" size="large" trigger="click" scrollable @update:value="popselectMonth">
-                        <div class="date-month">{{selectedDate.month}}月</div>
-                    </n-popselect-->
-                </div>
-                <div class="hc-date-month" @click="nextMonthClick">
-                    <i class="hcicon-enter"/>
-                </div>
-                <div class="hc-date-month" @click="nextYearClick">
-                    <i class="hcicon-direction-right"/>
-                </div>
-            </div>
-            <div class="hc-date-weekdays">
-                <div class="hc-date-weekdays-day" v-for="item in weekdays" :key="item">{{item}}</div>
-            </div>
-            <div class="hc-date-dates">
-                <template v-for="item in datesDay">
-                    <div class="hc-date-dates-day" :class="item.type" @click="datesDayClick(item)">{{item.key}}</div>
-                </template>
-            </div>
-            <div class="hc-date-actions">
-                <div class="choice-date">{{choiceDate.year}}-{{choiceDate.month}}-{{choiceDate.date}}</div>
-                <!--n-button size="small" @click="backToDay">回到今天</n-button-->
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import dayjs from "dayjs"
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    }
-})
-//变量
-const weekdays = ['日', '一', '二', '三', '四', '五', '六']  //星期头
-const curDateData = ref([]) //设置的日期
-const datesDay = ref([])    //日期数据
-//选择年月的日期
-const selectedDate = ref({
-    year: dayjs().get('year'),
-    month: dayjs().get('month') +1
-})
-//选择的日期，年月日
-const choiceDate = ref({
-    year: dayjs().get('year'),
-    month: dayjs().get('month') +1,
-    date: dayjs().get('date')
-})
-
-//处理设置的日期
-const setCurDateData = (dateData) => {
-    let curData = [];
-    for (let i = 0; i < dateData.length; i++) {
-        let toDate = dayjs(dateData[i].date, "YYYY-MM-DD").format("YYYY-MM-DD");
-        curData.push({
-            year: dayjs(toDate).get('year'),
-            month: dayjs(toDate).get('month')+1,
-            date: dayjs(toDate).get('date')
-        })
-    }
-    curDateData.value = curData;
-}
-
-//生成2010年 - 当前年
-const yearOptions = ref(getSelectedYear())
-function getSelectedYear() {
-    const {year} = selectedDate.value
-    let yearArr = [], yearNum = year - 2009;
-    for (let i = 0; i < yearNum; i++) {
-        yearArr.push({label: (2010 + i) + "年", value: 2010 + i})
-    }
-    yearArr.reverse()
-    return yearArr
-}
-
-//生成1-12月
-const monthOptions = ref(getSelectedMonth())
-function getSelectedMonth() {
-    let monthArr = [];
-    for (let i = 0; i < 12; i++) {
-        let m = i + 1;
-        monthArr.push({label: m + "月", value: m})
-    }
-    return monthArr
-}
-
-let dateData = [
-    {date: '2022-05-2'},
-    {date: '2022-05-3'},
-    {date: '2022-05-4'},
-    {date: '2022-05-05'},
-    {date: '2022-05-8'},
-    {date: '2022-05-09'},
-    {date: '2022-05-10'},
-]
-setCurDateData(dateData)
-
-//获取日期
-const getDatesDay = (year,month) => {
-    if (year && month) {
-        let toDate = dayjs(year + '-' + month, "YYYY-MM").format("YYYY-MM-DD"); //格式化一下先
-        let days = momedayjsnt(toDate).daysInMonth(); //天数
-        let monthOneDay = dayjs(toDate).startOf("month").format("YYYY-MM-DD"); //获取当月第一天
-        let weekday = dayjs(monthOneDay, "YYYY-MM-DD").get('weekday'); //获取当月第一天是星期几
-        setDatesDay(days,weekday)
-    } else {
-        let days = dayjs().daysInMonth(); //天数
-        let monthOneDay = dayjs().startOf("month").format("YYYY-MM-DD"); //获取当月第一天
-        let weekday = dayjs(monthOneDay, "YYYY-MM-DD").get('weekday'); //获取当月第一天是星期几
-        setDatesDay(days,weekday)
-    }
-}
-
-//设置日期
-const setDatesDay = (days,weekday) => {
-    let datesDayData = [];
-    const selected = selectedDate.value; //选择的日期
-    const choiceData = choiceDate.value; //选择的日期
-    const dayData = {
-        year: dayjs().get('year'),
-        month: dayjs().get('month') +1,
-        date: dayjs().get('date')
-    }
-    //添加头部
-    for (let i = 0; i < weekday; i++) {
-        datesDayData.push({type: 'excluded', key: '-'})
-    }
-    //处理日期
-    for (let i = 0; i < days; i++) {
-        let day = i + 1, type = '';
-        type = setCurDate(selected,day)
-        if (selected.year === dayData.year && selected.month === dayData.month && dayData.date === day) {
-            type += ' selected'
-        }
-        if (choiceData.year === selected.year && choiceData.month === selected.month && choiceData.date === day) {
-            type += ' choice'
-        }
-        datesDayData.push({type: type, key: day})
-    }
-    //添加尾数
-    let lastNum = 42 - (weekday + days);
-    for (let i = 0; i < lastNum; i++) {
-        datesDayData.push({type: 'excluded', key: '-'})
-    }
-    datesDay.value = datesDayData;
-}
-
-const setCurDate = (selected,day) => {
-    const curDate = curDateData.value;   //设置的日期
-    for (let x = 0; x < curDate.length; x++) {
-        if (selected.year === curDate[x].year && selected.month === curDate[x].month && curDate[x].date === day) {
-            return 'cur'
-        }
-    }
-    return ''
-}
-
-getDatesDay()
-
-//上一年
-const prevYearClick = () => {
-    let {year,month} = selectedDate.value
-    let years = year - 1;
-    selectedDate.value.year = years;
-    getDatesDay(years,month)
-}
-//上一月
-const prevMonthClick = () => {
-    let {year,month} = selectedDate.value
-    let years = year, months;
-    if (month === 1) {
-        years = year - 1;
-        months = 12;
-    } else {
-        months = month - 1;
-    }
-    selectedDate.value = {year: years, month: months}
-    getDatesDay(years,months)
-}
-//下一月
-const nextMonthClick = () => {
-    let {year,month} = selectedDate.value
-    let years = year, months;
-    if (month === 12) {
-        years = year + 1;
-        months = 1;
-    } else {
-        months = month + 1;
-    }
-    selectedDate.value = {year: years, month: months}
-    getDatesDay(years,months)
-}
-//下一年
-const nextYearClick = () => {
-    let {year,month} = selectedDate.value
-    let years = year + 1;
-    selectedDate.value.year = years;
-    getDatesDay(years,month)
-}
-//选择年份
-const popselectYear = () => {
-    let {year,month} = selectedDate.value
-    getDatesDay(year,month)
-}
-//选择月份
-const popselectMonth = () => {
-    let {year,month} = selectedDate.value
-    getDatesDay(year,month)
-}
-//天被点击
-const datesDayClick = (item) => {
-    let {year,month} = selectedDate.value
-    choiceDate.value = {year: year, month: month, date: item.key}
-    getDatesDay(year,month)
-    backChoiceDate()
-}
-
-const zpadStart = (val,leng,pad) => {
-    val += ''
-    while (val.length < leng) {
-        val = pad + val
-    }
-    return val
-}
-
-//事件
-const emit = defineEmits(['choice-date'])
-
-//返回选择的日期
-const backChoiceDate = () => {
-    //选择的日期处理
-    const {year,month,date} = choiceDate.value
-    let months = zpadStart(month, 2, '0')
-    let dates = zpadStart(date, 2, '0')
-    const choice = {year: year, month: months, date: dates}
-    const choiceVal = year + months + dates
-    //今天的日期处理
-    const dayData = {
-        year: dayjs().get('year'),
-        month: zpadStart(dayjs().get('month') + 1, 2, '0'),
-        date: zpadStart(dayjs().get('date'), 2, '0')
-    }
-    const today = dayData.year + dayData.month + dayData.date
-    //判断处理
-    if (choiceVal > today) {
-        backToDay(false)
-    } else {
-        emit('choice-date', {date: choice, choice: choiceVal})
-    }
-}
-
-//回到今天
-const backToDay = (isEmit = true) => {
-    const year = dayjs().get('year');
-    const month = dayjs().get('month') + 1;
-    const date = dayjs().get('date');
-    selectedDate.value = {year: year, month: month}
-    choiceDate.value = {year: year, month: month, date: date}
-    getDatesDay(year,month)
-    if (isEmit) {
-        //今天的日期
-        const today = {
-            year: year,
-            month: zpadStart(month, 2, '0'),
-            date: zpadStart(date, 2, '0')
-        }
-        const choice = today.year + today.month + today.date
-        emit('choice-date', {date: today, choice})
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss';
-</style>
-
-<style lang="scss">
-.hc-date-month-year .n-date-picker {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 34.4px;
-    .n-input {
-        background: transparent;
-        cursor: pointer;
-        width: 100%;
-        height: 34.4px;
-    }
-    .n-input .n-input-wrapper {
-        padding: 0;
-        display: block;
-    }
-    .n-input .n-input__input,
-    .n-input .n-input__textarea,
-    .n-input .n-input__suffix,
-    .n-input .n-input__prefix,
-    .n-input .n-input__border,
-    .n-input .n-input__state-border{
-        display: none;
-    }
-}
-</style>

src/components/dateCalendar/style.scss

@@ -1,142 +0,0 @@
-.hc-date-calendar-box {
-    position: relative;
-    display: inline-block;
-    padding: 14px;
-    background: white;
-    border: 1px solid #efeff5;
-    border-radius: 3px;
-    .hc-date-calendar-panel {
-        position: relative;
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-area: left-calendar;
-        user-select: none;
-        .hc-date-month-bar {
-            position: relative;
-            display: grid;
-            grid-template-columns: 28px 28px 1fr 28px 28px;
-            align-items: center;
-            justify-items: center;
-            .hc-date-month {
-                position: relative;
-                cursor: pointer;
-                color: #c2c2c2;
-                width: 28px;
-                text-align: center;
-                transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-                &:hover {
-                    color: #333639;
-                }
-            }
-            .hc-date-month-year {
-                position: relative;
-                font-weight: 500;
-                color: #1f2225;
-                display: flex;
-                .date-year, .date-month {
-                    cursor: pointer;
-                    border-radius: 3px;
-                    padding: 4px 7px;
-                    transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1);
-                    &:hover {
-                        background-color: #f3f3f5;
-                    }
-                }
-            }
-        }
-        .hc-date-weekdays {
-            position: relative;
-            display: grid;
-            grid-template-columns: repeat(7, 38px);
-            grid-template-rows: repeat(1, 32px);
-            align-items: center;
-            justify-items: center;
-            margin: auto auto 4px;
-            border-bottom: 1px solid #efeff5;
-            .hc-date-weekdays-day {
-                line-height: 15px;
-                width: 24px;
-                text-align: center;
-                font-size: 14px;
-                color: #333639;
-            }
-        }
-        .hc-date-dates {
-            position: relative;
-            margin: auto;
-            display: grid;
-            grid-template-columns: repeat(7, 38px);
-            grid-template-rows: repeat(6, 32px);
-            align-items: center;
-            justify-items: center;
-            flex-wrap: wrap;
-            --n-bezier: cubic-bezier(0.4, 0, 0.2, 1);
-            .hc-date-dates-day {
-                position: relative;
-                width: 25px;
-                height: 25px;
-                line-height: 25px;
-                text-align: center;
-                font-size: 14px;
-                border-radius: 2px;
-                cursor: pointer;
-                z-index: 0;
-                border: 1px solid transparent;
-                transition: background-color .2s var(--n-bezier), color .2s var(--n-bezier);
-                &:before {
-                    content: "";
-                    position: absolute;
-                    left: 0;
-                    right: 0;
-                    top: 0;
-                    bottom: 0;
-                    z-index: -1;
-                    border-radius: inherit;
-                    transition: background-color .3s var(--n-bezier);
-                }
-                &:hover::before {
-                    background-color: #f3f3f5;
-                }
-                &.cur {
-                    color: $green;
-                    font-weight: 800;
-                    &:before {
-                        background-color: white;
-                    }
-                    &:hover::before {
-                        background-color: rgba(62, 185, 59, .1);
-                    }
-                }
-                &.selected {
-                    color: var(--hc-primary);
-                    &:before {
-                        background-color: var(--hc-primary-light-1);
-                    }
-                }
-                &.excluded {
-                    color: #c2c2c2;
-                    cursor: default;
-                    &:hover::before {
-                        background-color: initial;
-                    }
-                }
-                &.choice {
-                    border: 1px solid var(--hc-primary);
-                }
-            }
-        }
-        .hc-date-actions {
-            position: relative;
-            border-top: 1px solid #efeff5;
-            margin: 0 -15px;
-            margin-bottom: -15px;
-            padding: 8px 15px;
-            display: flex;
-            align-items: center;
-            .choice-date {
-                position: relative;
-                flex: auto;
-            }
-        }
-    }
-}

src/plugins/day-zh-cn.js

@@ -1 +0,0 @@
-!function(e,_){"object"==typeof exports&&"undefined"!=typeof module?module.exports=_(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],_):(e="undefined"!=typeof globalThis?globalThis:e||self).dayjs_locale_zh_cn=_(e.dayjs)}(this,(function(e){"use strict";function _(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=_(e),d={name:"zh-cn",weekdays:"星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),weekdaysShort:"周日_周一_周二_周三_周四_周五_周六".split("_"),weekdaysMin:"日_一_二_三_四_五_六".split("_"),months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),monthsShort:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),ordinal:function(e,_){return"W"===_?e+"周":e+"日"},weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY/MM/DD",LL:"YYYY年M月D日",LLL:"YYYY年M月D日Ah点mm分",LLLL:"YYYY年M月D日ddddAh点mm分",l:"YYYY/M/D",ll:"YYYY年M月D日",lll:"YYYY年M月D日 HH:mm",llll:"YYYY年M月D日dddd HH:mm"},relativeTime:{future:"%s内",past:"%s前",s:"几秒",m:"1 分钟",mm:"%d 分钟",h:"1 小时",hh:"%d 小时",d:"1 天",dd:"%d 天",M:"1 个月",MM:"%d 个月",y:"1 年",yy:"%d 年"},meridiem:function(e,_){var t=100*e+_;return t<600?"凌晨":t<900?"早上":t<1100?"上午":t<1300?"中午":t<1800?"下午":"晚上"}};return t.default.locale(d,null,!0),d}));

src/styles/ledger/query.scss

@@ -42,6 +42,7 @@
             margin-bottom: 24px;
             .hc-table-forem-box {
                 flex: 1;
+                padding: 24px;
                 margin-right: 24px;
                 position: relative;
                 background: #f1f5f8;
@@ -49,8 +50,9 @@
                 box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
             }
             .hc-right-pian-box {
+                width: 360px;
                 position: relative;
-                width: 300px;
+                padding: 24px 20px;
                 background: #f1f5f8;
                 border-radius: 10px;
                 box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);

src/views/ledger/components/dateCalendar/index.vue

@@ -0,0 +1,254 @@
+<template>
+    <div :class="ui" class="hc-date-calendar-box">
+        <div class="hc-date-picker-box">
+            <div class="hc-date-picker">
+                <el-date-picker class="block" v-model="toPicker" type="month" size="large" @change="datePickerChange"/>
+            </div>
+            <div class="hc-date-btn-box">
+                <div class="hc-div-btn" @click="prevMonthClick">
+                    <HcIcon name="arrow-left"/>
+                </div>
+                <div class="hc-div-btn" @click="nextMonthClick">
+                    <HcIcon name="arrow-right"/>
+                </div>
+            </div>
+        </div>
+        <div class="hc-date-weekdays">
+            <template v-for="item in weekdays" :key="item">
+                <div class="hc-date-weekdays-day">{{item}}</div>
+            </template>
+        </div>
+        <div class="hc-date-dates">
+            <template v-for="item in datesDay">
+                <div class="hc-date-dates-day" :class="item.type" @click="datesDayClick(item)">{{item.key}}</div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {nextTick, watch, ref} from "vue";
+import dayjs from "dayjs"
+import 'dayjs/locale/zh-cn'
+dayjs.locale('zh-cn')
+const props = defineProps({
+    ui: {
+        type: String,
+        default: ''
+    },
+    dateData: {
+        type: Array,
+        default: () => ([])
+    },
+})
+
+//变量
+const weekdays = ['日', '一', '二', '三', '四', '五', '六']  //星期头
+const toDays = ref({year: '', month: '', date: '', obj: {}})
+const selectedDate = ref({year: '', month: ''})     //选择年月的日期
+const toPicker = ref('')                            //年月下拉框
+const selectedDatas = ref(props.dateData)
+const choiceDate = ref({year: '', month: '', date: ''}) //选择的日期，年月日
+const curDateData = ref([])     //设置的日期
+const datesDay = ref([])        //日期数据
+
+//事件
+const emit = defineEmits(['choice-date'])
+
+//监听
+watch(() => props.dateData, (dateData) => {
+    selectedDatas.value = dateData
+    setCurDateData(dateData)
+})
+
+//渲染完成
+nextTick(()=> {
+    const toDayJs = dayjs();
+    toDays.value = {
+        year: toDayJs.get('year'),
+        month: toDayJs.get('month') + 1,
+        date: toDayJs.get('date'),
+        obj: toDayJs
+    }
+    selectedDate.value = {
+        year: toDayJs.get('year'),
+        month: toDayJs.get('month') + 1
+    }
+    choiceDate.value =  {
+        year: toDayJs.get('year'),
+        month: toDayJs.get('month') + 1,
+        date: toDayJs.get('date')
+    }
+    toPicker.value = toDayJs.format('YYYY-MM')
+    emit('choice-date', isDayDateFormat(toDays.value))
+    setCurDateData(props.dateData)
+})
+
+//处理设置的日期
+const setCurDateData = (dateData) => {
+    let curData = [];
+    for (let i = 0; i < dateData.length; i++) {
+        let toDate = dayjs(dateData[i]).format("YYYY-MM-DD");
+        const toDayJs = dayjs(toDate);
+        curData.push({
+            year: toDayJs.get('year'),
+            month: toDayJs.get('month') +1,
+            date: toDayJs.get('date')
+        })
+    }
+    curDateData.value = curData;
+    getDatesDay()
+}
+
+//获取日期
+const getDatesDay = (year,month) => {
+    if (year && month) {
+        let toDate = dayjs(year + '-' + month).format("YYYY-MM-DD");            //格式化一下先
+        let days = dayjs(toDate).daysInMonth(); //天数
+        let monthOneDay = dayjs(toDate).startOf("month").format("YYYY-MM-DD");  //获取当月第一天
+        let weekday = dayjs(monthOneDay, "YYYY-MM-DD").day();                         //获取当月第一天是星期几
+        toPicker.value = dayjs(year + '-' + month).format('YYYY-MM');
+        setDatesDay(days,weekday)
+    } else {
+        const toDayJs = toDays.value?.obj ?? {};
+        let days = toDayJs.daysInMonth(); //天数
+        let monthOneDay = toDayJs.startOf("month").format("YYYY-MM-DD");   //获取当月第一天
+        let weekday = dayjs(monthOneDay, "YYYY-MM-DD").day();                    //获取当月第一天是星期几
+        toPicker.value = toDayJs.format('YYYY-MM');
+        setDatesDay(days,weekday)
+    }
+}
+
+//设置日期
+const setDatesDay = (days,weekday) => {
+    let datesDayData = [];
+    const selected = selectedDate.value; //选择的日期
+    const choiceData = choiceDate.value; //选择的日期
+    const dayData = toDays.value;       //今天日期
+    //添加头部
+    for (let i = 0; i < weekday; i++) {
+        datesDayData.push({type: 'excluded', key: '-'})
+    }
+    //处理日期
+    for (let i = 0; i < days; i++) {
+        let day = i + 1, type = '';
+        type = setCurDate(selected,day)
+        if (selected.year === dayData.year && selected.month === dayData.month && dayData.date === day) {
+            type += ' selected'
+        }
+        if (choiceData.year === selected.year && choiceData.month === selected.month && choiceData.date === day) {
+            type += ' choice'
+        }
+        datesDayData.push({type: type, key: day})
+    }
+    //添加尾数
+    let lastNum = 42 - (weekday + days);
+    for (let i = 0; i < lastNum; i++) {
+        datesDayData.push({type: 'excluded', key: '-'})
+    }
+    datesDay.value = datesDayData;
+}
+
+const setCurDate = (selected,day) => {
+    const curDate = curDateData.value;   //设置的日期
+    for (let x = 0; x < curDate.length; x++) {
+        if (selected.year === curDate[x].year && selected.month === curDate[x].month && curDate[x].date === day) {
+            return 'cur'
+        }
+    }
+    return ''
+}
+
+//上一月
+const prevMonthClick = () => {
+    let {year,month} = selectedDate.value
+    let years = year, months;
+    if (month === 1) {
+        years = year - 1;
+        months = 12;
+    } else {
+        months = month - 1;
+    }
+    selectedDate.value = {year: years, month: months}
+    getDatesDay(years,months)
+}
+//下一月
+const nextMonthClick = () => {
+    let {year,month} = selectedDate.value
+    let years, months;
+    if (month === 12) {
+        years = year + 1;
+        months = 1;
+    } else {
+        years = year;
+        months = month + 1;
+    }
+    selectedDate.value = {year: years, month: months}
+    getDatesDay(years,months)
+}
+
+//天被点击
+const datesDayClick = (item) => {
+    if (item.type !== 'excluded') {
+        let {year,month} = selectedDate.value
+        choiceDate.value = {year: year, month: month, date: item.key}
+        getDatesDay(year,month)
+        backChoiceDate()
+    }
+}
+
+//下拉日期选择
+const datePickerChange = (val) => {
+    const toDayJs = dayjs(val);
+    toPicker.value = toDayJs.format('YYYY-MM')
+    getDatesDay(toDayJs.year(), toDayJs.month() + 1)
+}
+
+//返回选择的日期
+const backChoiceDate = () => {
+    //选择的日期处理
+    const choiceVal = isDayDateFormat(choiceDate.value)
+    //今天的日期处理
+    const today = isDayDateFormat(toDays.value)
+    //判断处理
+    if (choiceVal.choice > today.choice) {
+        backToDay()
+    } else {
+        emit('choice-date', choiceVal)
+    }
+}
+
+//回到今天
+const backToDay = () => {
+    const {year, month ,date} = toDays.value ?? {};
+    selectedDate.value = {year: year, month: month}
+    choiceDate.value = {year: year, month: month, date: date}
+    getDatesDay(year,month)
+    emit('choice-date', isDayDateFormat(toDays.value))
+}
+
+//格式转换
+const isDayDateFormat = ({year, month, date}) => {
+    const today = {
+        year: year,
+        month: zpadStart(month, 2, '0'),
+        date: zpadStart(date, 2, '0')
+    }
+    const choice = today.year + today.month + today.date
+    const choices = `${today.year}-${today.month}-${today.date}`
+    return {date: today, choice, choices}
+}
+
+const zpadStart = (val, leng, pad) => {
+    val += ''
+    while (val.length < leng) {
+        val = pad + val
+    }
+    return val
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/views/ledger/components/dateCalendar/style.scss

@@ -0,0 +1,127 @@
+.hc-date-calendar-box {
+    position: relative;
+    .hc-date-picker-box {
+        display: flex;
+        position: relative;
+        align-items: center;
+        padding-bottom: 24px;
+        border-bottom: 1px solid #E9E9E9;
+        .hc-date-picker {
+            width: 140px;
+            position: relative;
+        }
+        .hc-date-btn-box {
+            flex: 1;
+            display: flex;
+            position: relative;
+            align-items: center;
+            justify-content: flex-end;
+            .hc-div-btn {
+                width: 40px;
+                height: 40px;
+                display: flex;
+                transition: .1s;
+                align-items: center;
+                justify-content: center;
+                font-size: 22px;
+                user-select: none;
+                cursor: pointer;
+                background: #f1f5f8;
+                border-radius: 10px;
+                color: var(--el-color-primary-light-3);
+                box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
+                &:hover {
+                    background: var(--el-color-primary-light-9)
+                }
+            }
+            .hc-div-btn + .hc-div-btn {
+                margin-left: 20px;
+            }
+        }
+    }
+    .hc-date-weekdays {
+        position: relative;
+        display: grid;
+        grid-template-columns: repeat(7, 45.7px);
+        grid-template-rows: repeat(1, 45px);
+        align-items: center;
+        justify-items: center;
+        margin: auto auto 8px;
+        .hc-date-weekdays-day {
+            text-align: center;
+            font-size: 14px;
+            color: #CCCCCC;
+        }
+    }
+    .hc-date-dates {
+        position: relative;
+        margin: auto;
+        display: grid;
+        grid-template-columns: repeat(7, 45.7px);
+        grid-template-rows: repeat(6, 45px);
+        align-items: center;
+        justify-items: center;
+        flex-wrap: wrap;
+        .hc-date-dates-day {
+            position: relative;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 700;
+            cursor: pointer;
+            z-index: 0;
+            color: #1A1A1A;
+            border: 2px solid transparent;
+            border-radius: 6px;
+            transition: background-color 0.2s, color 0.1s;
+            &:before {
+                content: "";
+                position: absolute;
+                bottom: -5px;
+                width: 5px;
+                height: 5px;
+                background: initial;
+                border-radius: 50%;
+                transition: background-color 0.3s, color 0.1s;
+            }
+            &:hover:not([class*='choice']):not([class*='excluded']):not([class*='selected']):not([class*='cur']) {
+                background-color: var(--el-color-primary-light-7);
+                border: 2px solid #f1f5f8;
+            }
+            &.cur:not([class*='choice']):not([class*='selected']) {
+                &:before {
+                    background-color: #0081ff;
+                }
+                &:hover::before {
+                    background-color: rgba(0, 129, 255, 0);
+                }
+                &:hover {
+                    color: white;
+                    background-color: #0081ff;
+                    border: 2px solid #f1f5f8;
+                }
+            }
+            &.selected {
+                color: white;
+                border: 2px solid #f1f5f8;
+                background: var(--el-color-primary);
+            }
+            &.choice {
+                color: white;
+                border: 2px solid #f1f5f8;
+                background: linear-gradient(135deg,var(--el-color-primary) 25%, var(--hc-shadow-color-5) 100%);
+                box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
+                &.cur {
+                    background: linear-gradient(135deg,var(--el-color-primary) 25%, #0081ff 100%);
+                }
+            }
+            &.excluded {
+                color: #c2c2c2;
+                cursor: default;
+            }
+        }
+    }
+}

src/views/ledger/query.vue

@@ -22,21 +22,58 @@
         <div class="hc-layout-content">
             <div class="hc-content-box">
                 <div class="hc-table-forem-box">
-                    456789
+
+                    <div class="hc-no-table-form">
+                        <div class="table-form-no">
+                            <img :src="nowebp" alt=""/>
+                            <div class="desc">暂无相关数据</div>
+                        </div>
+                    </div>
+
                 </div>
                 <div class="hc-right-pian-box">
+                    <DateCalendar :dateData="dateData" @choice-date="dateCalendarChoice"/>
+                    <el-alert title="蓝色代表当天已填写过日志" type="warning" show-icon/>
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="add-circle"/>
+                        <span>关联工序</span>
+                    </el-button>
+
                     123456
+
                 </div>
             </div>
             <div class="hc-footer-box">
-                <el-button type="primary" hc-btn>
-                    <HcIcon name="save"/>
-                    <span>保存</span>
-                </el-button>
-                <el-button hc-btn>
-                    <HcIcon name="send-plane-2"/>
-                    <span>上报</span>
-                </el-button>
+                <HcTooltip keys="ledger_query_save_form">
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="save"/>
+                        <span>保存</span>
+                    </el-button>
+                </HcTooltip>
+                <HcTooltip keys="ledger_query_report_form">
+                    <el-button hc-btn>
+                        <HcIcon name="send-plane-2"/>
+                        <span>上报</span>
+                    </el-button>
+                </HcTooltip>
+                <HcTooltip keys="ledger_query_preview_form">
+                    <el-button hc-btn>
+                        <HcIcon name="eye"/>
+                        <span>预览</span>
+                    </el-button>
+                </HcTooltip>
+                <HcTooltip keys="ledger_query_copy_form">
+                    <el-button hc-btn>
+                        <HcIcon name="file-copy-2"/>
+                        <span>复制当前表格及内容</span>
+                    </el-button>
+                </HcTooltip>
+                <HcTooltip keys="ledger_query_add_form">
+                    <el-button hc-btn>
+                        <HcIcon name="add-circle"/>
+                        <span>新增表格</span>
+                    </el-button>
+                </HcTooltip>
             </div>
         </div>
     </div>
@@ -48,6 +85,8 @@ import {useAppStore} from "~src/store";
 import nowebp from '~src/assets/view/Web2x_x.webp';
 import queryApi from '~api/ledger/query';
 import {getArrValue} from "vue-utils-plus"
+import DateCalendar from "./components/dateCalendar/index.vue"
+
 
 //初始变量
 const useAppState = useAppStore()
@@ -77,6 +116,13 @@ const queryLogList = async () => {
         menuOptions.value = []
     }
 }
+
+//日历日期处理
+const dateData = ref(['2022-09-10','2022-09-12'])
+const dateCalendarChoice = ({date, choice, choices}) => {
+    console.log(date, choice, choices)
+}
+
 </script>
 
 <style lang="scss" scoped>