npmapps 1.0.6 → 1.0.8

package/README.md

@@ -4,4 +4,6 @@
 1.0.3 ehcarts-3dpie
 1.0.4 EllTable
 1.0.5 dialogFnJsx
-1.0.6 calendar
+1.0.6 calendar
+1.0.7 employeeSchedulingManagement
+1.0.8 snippet

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "npmapps",
-    "version": "1.0.6",
+    "version": "1.0.8",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"

package/app/calendar/README.md

@@ -1,329 +0,0 @@
-# Vue 年度日历组件
-
-基于 Element UI Calendar 组件封装的年度日历组件，支持按年份查看所有月份的日历，并具有节假日显示、今日标记等功能。
-
-## 功能特点
-
-- 年度视图：一次性展示全年12个月的日历
-- 节假日标记：支持显示法定节假日和调休工作日
-- 今日标记：突出显示当前日期
-- 日期选择：支持点击选择具体日期
-- 响应式布局：自适应不同屏幕尺寸
-- 优雅动效：悬浮效果和过渡动画
-- 农历日期：支持显示农历日期信息
-- 自定义样式：提供丰富的样式定制选项
-
-## 安装
-
-```bash
-# 确保已安装Element UI
-npm install element-ui --save
-
-# 复制组件到你的项目中
-cp -r calendar/ src/components/
-```
-
-## 使用方法
-
-### 基础用法
-
-最简单的使用方式，仅显示日历并处理日期点击事件：
-
-```vue
-<template>
-  <calendar @date-click="handleDateClick" />
-</template>
-
-<script>
-import calendar from '@/components/calendar/index.vue'
-
-export default {
-  components: {
-    calendar
-  },
-  methods: {
-    handleDateClick(date) {
-      console.log('选择的日期：', date)
-    }
-  }
-}
-</script>
-```
-
-### 自定义节假日
-
-使用自定义节假日数据，实现节假日和调休日的显示：
-
-```vue
-<template>
-  <calendar 
-    :holiday="holidayData"
-    @date-click="handleDateClick"
-  />
-</template>
-
-<script>
-import calendar from '@/components/calendar/index.vue'
-
-export default {
-  components: {
-    calendar
-  },
-  data() {
-    return {
-      holidayData: [
-        {
-          type: 'holiday',
-          name: '元旦',
-          date: '2024-01-01',
-          lunarDate: '腊月十一'
-        },
-        // 更多节假日数据...
-      ]
-    }
-  },
-  methods: {
-    handleDateClick(date) {
-      this.$message.success(`选择的日期：${date.day}`)
-    }
-  }
-}
-</script>
-```
-
-### 高级配置
-
-展示如何使用更多配置选项来自定义日历的行为和外观：
-
-```vue
-<template>
-  <calendar 
-    :holiday="holidayData"
-    :showWorkday="true"
-    :showToday="true"
-    :clickable="true"
-    :isNextOrPrevClick="false"
-    @date-click="handleDateClick"
-  >
-    <template #year-picker>
-      <div class="custom-year-picker">
-        <el-button @click="prevYear">上一年</el-button>
-        <span>{{ currentYear }}年</span>
-        <el-button @click="nextYear">下一年</el-button>
-      </div>
-    </template>
-  </calendar>
-</template>
-
-<script>
-import calendar from '@/components/calendar/index.vue'
-
-export default {
-  components: {
-    calendar
-  },
-  data() {
-    return {
-      currentYear: new Date().getFullYear(),
-      holidayData: []
-    }
-  },
-  methods: {
-    handleDateClick(date) {
-      this.$message.success(`选择的日期：${date.day}`)
-    },
-    prevYear() {
-      this.currentYear--
-    },
-    nextYear() {
-      this.currentYear++
-    }
-  }
-}
-</script>
-
-<style scoped>
-.custom-year-picker {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-</style>
-```
-
-## 组件 API
-
-### Calendar Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| year | 当前显示的年份 | Date | new Date() |
-| holiday | 节假日数据 | Array | [] |
-| showWorkday | 是否显示工作日标记 | Boolean | true |
-| showToday | 是否显示今日标记 | Boolean | true |
-| clickable | 是否允许点击日期 | Boolean | true |
-| isNextOrPrevClick | 是否禁用上下月份日期点击 | Boolean | false |
-
-### Calendar Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| date-click | 点击日期时触发 | data: { day: 'YYYY-MM-DD' } |
-| year-change | 年份变化时触发 | year: Number |
-
-### Calendar Slots
-
-| 插槽名 | 说明 |
-|--------|------|
-| year-picker | 自定义年份选择器 |
-| date-cell | 自定义日期单元格内容 |
-
-### 节假日数据格式
-
-```javascript
-{
-  type: 'holiday',      // 类型：holiday-节假日，workday-调休工作日
-  name: '春节',         // 节日名称
-  date: '2024-02-10',   // 日期，格式：YYYY-MM-DD
-  lunarDate: '正月初一'  // 农历日期（可选）
-}
-```
-
-## 样式定制
-
-### 基础样式覆盖
-
-```css
-/* 日历容器 */
-.calendar-container {
-  padding: 20px;
-  background: #fff;
-}
-
-/* 年份选择器 */
-.year-picker {
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-/* 月份网格 */
-.calendar-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 500px));
-  gap: 50px;
-  justify-content: center;
-}
-
-/* 单个月份容器 */
-.calendar-item {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-}
-
-/* 日期单元格 */
-.calendar-cell {
-  height: 100%;
-  padding: 8px;
-  cursor: pointer;
-}
-
-/* 今日标记 */
-.today-mark {
-  background-color: #409EFF;
-  color: #fff;
-  border-radius: 50%;
-  padding: 2px;
-}
-
-/* 节假日信息 */
-.holiday-info {
-  font-size: 12px;
-  color: #E6A23C;
-}
-```
-
-### 主题定制
-
-可以通过修改CSS变量来快速更改主题色：
-
-```css
-:root {
-  --calendar-primary-color: #409EFF;
-  --calendar-holiday-color: #E6A23C;
-  --calendar-workday-color: #67C23A;
-  --calendar-text-color: #303133;
-  --calendar-border-radius: 8px;
-  --calendar-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-```
-
-## 注意事项
-
-1. 确保项目中已正确安装并配置 Element UI
-2. 节假日数据需要按照指定格式提供，建议使用专门的节假日API或数据服务
-3. 组件使用响应式布局，会根据屏幕尺寸自动调整显示方式
-4. 如需禁用某些日期的选择，可以通过传入disabledDate函数来实现
-5. 农历日期显示为可选功能，需要额外的农历转换库支持
-
-## 常见问题
-
-### Q: 如何禁用特定日期？
-
-```vue
-<template>
-  <calendar :disabled-date="disabledDate" />
-</template>
-
-<script>
-export default {
-  methods: {
-    disabledDate(date) {
-      return date.getTime() < Date.now() - 8.64e7; // 禁用今天之前的日期
-    }
-  }
-}
-</script>
-```
-
-### Q: 如何自定义日期单元格的内容？
-
-```vue
-<template>
-  <calendar>
-    <template #date-cell="{ date, data }">
-      <div class="custom-cell">
-        <span>{{ data.day.split('-')[2] }}</span>
-        <small>{{ getCustomContent(date) }}</small>
-      </div>
-    </template>
-  </calendar>
-</template>
-```
-
-### Q: 如何添加自定义事件标记？
-
-```vue
-<template>
-  <calendar :events="eventList" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      eventList: [
-        {
-          date: '2024-01-15',
-          type: 'meeting',
-          content: '项目会议'
-        }
-      ]
-    }
-  }
-}
-</script>
-```

package/app/calendar/customCalendar.vue

@@ -1,327 +0,0 @@
-<template>
-  <el-calendar
-    v-model="value"
-    :class="[
-      { 'hide-button-group': !showButtonGroup },
-      { 'next-or-prev-click': !isNextOrPrevClick },
-    ]"
-    :first-day-of-week="7"
-  >
-    <template slot="dateCell" slot-scope="{ date, data }">
-      <div
-        :class="[
-          'calendar-cell',
-          handleClass(date, data),
-          { selected: isSelected(data.day) },
-        ]"
-        @click="handleDateClick(data)"
-      >
-        <div class="date">
-          {{ parseInt(data.day.split("-")[2]) }}
-          <span v-if="isToday(data.day)" class="today-mark">今</span>
-        </div>
-        <div class="holiday-info">{{ getHolidayInfo(data.day) }}</div>
-      </div>
-    </template>
-  </el-calendar>
-</template>
-
-<script>
-/**
- * @description 自定义日历组件，基于Element UI的Calendar组件封装
- * 支持节假日显示、今日标记、日期选择等功能
- *
- * @example
- * <custom-calendar
- *   :date="new Date()"
- *   :holiday="holidayList"
- *   @date-click="handleDateClick"
- * />
- */
-export default {
-  data() {
-    return {
-      value: this.date,
-      selectedDate: null,
-    };
-  },
-  props: {
-    /**
-     * 日历当前显示的日期
-     * @type {Date}
-     * @default new Date()
-     */
-    date: {
-      type: Date,
-      default: () => new Date(),
-    },
-    /**
-     * 是否显示日历顶部的按钮组（上个月、下个月等）
-     * @type {Boolean}
-     * @default true
-     */
-    showButtonGroup: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-     * 是否显示工作日标记
-     * @type {Boolean}
-     * @default true
-     */
-    showWorkday: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-     * 节假日数据数组
-     * @type {Array<{date: string, type: string, name: string, lunarDate: string}>}
-     * @default []
-     */
-    holiday: {
-      type: Array,
-      default: () => [],
-    },
-    /**
-     * 是否允许点击日期
-     * @type {Boolean}
-     * @default true
-     */
-    clickable: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-     * 是否显示今日标记
-     * @type {Boolean}
-     * @default true
-     */
-    showToday: {
-      type: Boolean,
-      default: true,
-    },
-
-    isNextOrPrevClick: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    /**
-     * 处理日期单元格的样式类
-     * @param {Date} date - 日期对象
-     * @param {Object} data - 日期数据对象
-     * @returns {string} 样式类名
-     */
-    handleClass(date, data) {
-      let classes = [];
-      const d = this.holiday.find((item) => item.date === data.day);
-      if (d) {
-        classes.push(d.type);
-      }
-      if (this.showToday && this.isToday(data.day)) {
-        classes.push("is-today");
-      }
-      return classes.join(" ");
-    },
-    /**
-     * 获取农历日期
-     * @param {string} day - 日期字符串 (YYYY-MM-DD)
-     * @returns {string} 农历日期
-     */
-    getLunarDate(day) {
-      const d = this.holiday.find((item) => item.date === day);
-      return d ? d.lunarDate : "";
-    },
-    /**
-     * 获取节假日信息
-     * @param {string} day - 日期字符串 (YYYY-MM-DD)
-     * @returns {string} 节假日名称或工作日标记
-     */
-    getHolidayInfo(day) {
-      const d = this.holiday.find((item) => item.date === day);
-      if (d) {
-        return d.name;
-      }
-      return this.showWorkday ? "班" : "";
-    },
-    /**
-     * 处理日期点击事件
-     * @param {string} day - 日期字符串 (YYYY-MM-DD)
-     * @fires date-click
-     */
-    handleDateClick(data) {
-      if (!this.clickable) return;
-      this.selectedDate = data.day;
-      this.$emit("date-click", data);
-    },
-    /**
-     * 判断日期是否被选中
-     * @param {string} day - 日期字符串 (YYYY-MM-DD)
-     * @returns {boolean} 是否选中
-     */
-    isSelected(day) {
-      return this.selectedDate === day;
-    },
-    /**
-     * 判断是否为今天
-     * @param {string} day - 日期字符串 (YYYY-MM-DD)
-     * @returns {boolean} 是否为今天
-     */
-    isToday(day) {
-      const today = new Date();
-      const year = today.getFullYear();
-      const month = String(today.getMonth() + 1).padStart(2, "0");
-      const date = String(today.getDate()).padStart(2, "0");
-      const todayStr = `${year}-${month}-${date}`;
-      return day === todayStr;
-    },
-  },
-  computed: {},
-  mounted() {},
-};
-</script>
-
-<style scoped>
-.next-or-prev-click :deep(.el-calendar-table__row td.prev) {
-  pointer-events: none;
-}
-.next-or-prev-click :deep(.el-calendar-table__row td.next) {
-  pointer-events: none;
-}
-
-/* 隐藏日历顶部按钮组 */
-.hide-button-group :deep(.el-calendar__button-group) {
-  display: none;
-}
-/* 日历单元格基础样式 */
-:deep(.el-calendar-day) {
-  height: 60px;
-  padding: 2px;
-}
-:deep(.el-calendar-day) /* 日历单元格容器样式 */
-.calendar-cell {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 2px !important;
-}
-/* 日期数字样式 */
-.calendar-cell .date {
-  font-size: 16px;
-  font-weight: bold;
-  transition: transform 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-}
-
-/* 今日标记样式 */
-.calendar-cell .today-mark {
-  font-size: 12px;
-  color: #409eff;
-  font-weight: normal;
-}
-.calendar-cell:hover .date {
-  transform: scale(1.3);
-}
-/* 农历日期样式 */
-.calendar-cell .lunar-date {
-  font-size: 12px;
-  color: #666;
-  transition: transform 0.3s ease;
-}
-.calendar-cell:hover .lunar-date {
-  transform: scale(0.8);
-}
-/* 节假日信息样式 */
-.calendar-cell .holiday-info {
-  font-size: 12px;
-  margin-top: 2px;
-  transition: transform 0.3s ease;
-}
-.calendar-cell:hover .holiday-info {
-  transform: scale(0.8);
-}
-/* 日历单元格容器样式 */
-.calendar-cell {
-  transition: all 0.3s ease;
-  cursor: pointer;
-  position: relative;
-  padding: 4px;
-}
-
-/* .calendar-cell:hover::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 4px 8px;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  z-index: 1000;
-} */
-
-/* 节假日背景样式 */
-.holiday {
-  background-color: #e7f5ff;
-}
-
-.holiday:hover {
-  background-color: #cce7ff;
-}
-
-/* 周末背景样式 */
-.weekend {
-  background-color: #ebfbee;
-}
-
-.weekend:hover {
-  background-color: #d7f5dc;
-}
-
-/* 选中日期样式 */
-.calendar-cell.selected {
-  background-color: #e7f5ff !important;
-  /* color: white !important; */
-}
-/* .calendar-cell.selected  .holiday-info {
-  transform: scale(0.8);
-}
-
-.calendar-cell.selected .date {
-  transform: scale(1.3);
-}
-
-.calendar-cell.selected .lunar-date {
-  transform: scale(0.8);
-} */
-
-.calendar-cell.selected .holiday-info {
-  /* color: white; */
-}
-
-/* 今日单元格样式 */
-.calendar-cell.is-today {
-  background-color: #f4fce3;
-  /* border: 1px solid #ffa940; */
-}
-
-.calendar-cell.is-today:hover {
-  background-color: #e9fac8;
-}
-
-/* 覆盖Element UI默认的选中样式 */
-:deep(.el-calendar-table td.is-selected) {
-  background-color: transparent;
-  color: inherit;
-}
-</style>