cnhis-design-vue 2.1.112 → 2.1.114

package/packages/full-calendar/src/api/index.js

@@ -0,0 +1,71 @@
+import axios from 'axios';
+import { message } from 'ant-design-vue';
+
+export const axiosInstance = axios.create({
+  withCredentials: true,
+  timeout: 5000
+});
+
+axiosInstance.interceptors.response.use(response => {
+  const { config, data } = response;
+  if (data.success) {
+    return data;
+  } else {
+    message.error(data?.subErrors?.msg || '请求错误');
+    console.log('请求错误');
+  }
+});
+
+// 获取日程相关配置
+export function getScheduleSettingApi(params) {
+  return axiosInstance({
+    method: 'get',
+    url: '/getScheduleSetting',
+    params
+  });
+}
+
+// 日程列表
+export function getScheduleListApi(params) {
+  return axiosInstance({
+    method: 'get',
+    url: '/getScheduleList',
+    params
+  });
+}
+
+// 创建日程
+export function getScheduleDataApi(params) {
+  return axiosInstance({
+    method: 'post',
+    url: '/getScheduleData',
+    data: params
+  });
+}
+
+// 新增日程
+export function saveOrUpdateScheduleApi(params) {
+  return axiosInstance({
+    method: 'post',
+    url: '/schedule/saveOrUpdate',
+    data: params
+  });
+}
+
+// 查询日程
+export function queryScheduleListApi(params) {
+  return axiosInstance({
+    method: 'post',
+    url: '/schedule/list',
+    data: params
+  });
+}
+
+// 删除日程
+export function delScheduleApi(params) {
+  return axiosInstance({
+    method: 'post',
+    url: '/schedule/deleteById',
+    params
+  });
+}

package/packages/full-calendar/src/components/ListTag.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="list-tag">
+    <ul v-if="formatedListData.length > 0">
+      <li v-for="(data, i) in formatedListData" :key="i">
+        <div class="list-tag__left" :class="getClassName(data)">
+          <span class="list-day">{{ data.day }}</span>
+          <span class="list-month">{{ data.month }}，</span>
+          <span class="list-week">{{ data.week }}</span>
+        </div>
+        <div class="list-tag__right">
+          <div v-for="(item, index) in data.list" :key="index">
+            <tag v-bind="$attrs" v-on="$listeners" :item="item" :title="item.title" :statusFlag="data.statusFlag" :avatar="item.avatar" :isAllDay="item.isAllDay"></tag>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import Tag from './Tag.vue';
+import { moment } from '@/utils/vexutils';
+
+export default {
+  name: 'list-tag',
+  components: {
+    Tag
+  },
+  props: {
+    listData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    this.curMoment = moment();
+    return {};
+  },
+  filters: {},
+  computed: {
+    formatedListData() {
+      if (!this.listData?.length) return [];
+      const result = this.listData.reduce((obj, item) => {
+        const date = moment(item.startTime);
+        const day = date.format('D');
+        const startTime = date.startOf('day').valueOf();
+        const curValue = this.curMoment
+          .clone()
+          .startOf('day')
+          .valueOf();
+        if (obj[day]) {
+          obj[day].list.push({ ...item });
+        } else {
+          obj[day] = {
+            _d: date,
+            day,
+            week: date.format('ddd'),
+            month: date.format('MMM'),
+            list: [{ ...item }],
+            statusFlag: startTime < curValue ? 0 : 1
+          };
+        }
+        return obj;
+      }, {});
+
+      return Object.values(result);
+    },
+    getClassName() {
+      return function({ _d }) {
+        const { curMoment } = this;
+        const startTime = _d
+          .clone()
+          .startOf('day')
+          .valueOf();
+        const curValue = curMoment
+          .clone()
+          .startOf('day')
+          .valueOf();
+        const res = [];
+        if (startTime < curValue) {
+          res.push('beforeDay');
+        }
+        if (startTime === curValue) {
+          res.push('curday');
+        }
+        if (startTime > curValue) {
+          res.push('active');
+        }
+        return res.join(' ');
+      };
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
+
+  // 方法
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+.list-tag {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  overflow-y: auto;
+  ul {
+    li {
+      display: flex;
+      border-bottom: 1px solid #e6e6e6;
+      padding: 16px;
+      .list-tag__left {
+        width: 142px;
+        color: rgba(0, 0, 0, 0.6);
+        > span {
+          display: inline-block;
+        }
+        &.beforeDay {
+          .list-day {
+            color: #b1b1b1;
+          }
+        }
+        &.active {
+          .list-day {
+            color: @primary-color;
+            background: rgba(36, 116, 255, 0.1);
+          }
+        }
+        &.curday {
+          .list-day {
+            color: #fff;
+            background: @primary-color;
+            &:hover {
+              background: @primary-color;
+            }
+          }
+          color: @primary-color;
+        }
+        .list-day {
+          width: 36px;
+          height: 36px;
+          line-height: 36px;
+          margin-right: 18px;
+          text-align: center;
+          color: #000000;
+          font-size: 20px;
+          font-weight: 600;
+          border-radius: 50%;
+          &:hover {
+            background: #e8f1fe;
+          }
+        }
+      }
+      .list-tag__right {
+        flex: 1;
+        width: calc(100% - 142px);
+        & > div {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+}
+</style>

package/packages/full-calendar/src/components/Tag.vue

@@ -0,0 +1,296 @@
+<template>
+  <div :class="['event-tag', 'event-tag-' + viewType, { 'event-tag--active': isActive }, { 'event-tag-allday': isAllDay }]" @click.stop="clickTag" ref="tagRef">
+    <div :class="['event-tag__main', statusClass[statusFlag]]">
+      <span class="event-tag__main__text-time" v-if="viewType === 'list'">{{ timeRange }}</span>
+      <span class="event-tag__main__text-title">{{ title }}</span>
+      <div :class="['right-operate', { 'right-operate-hasBtn': hasBtns }]">
+        <!-- <img :src="avatar" class="avatar-icon" alt="" /> -->
+        <span class="calendar-quick-btn-wrap" v-if="hasBtns">
+          <span v-for="btn in btns" :key="btn.type" @click.stop="() => clickListBtn(btn)" class="calendar-quick-btn">
+            <a-tooltip :title="btn.name" :mouseLeaveDelay="0">
+              <a-icon :type="btn.type" :style="{ fontSize: viewType === 'list' ? '16px' : '12px' }" />
+            </a-tooltip>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Tooltip, Icon } from 'ant-design-vue';
+import { moment } from '@/utils/vexutils';
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
+export default {
+  name: 'tag',
+  components: {
+    [Tooltip.name]: Tooltip,
+    [Icon.name]: Icon
+  },
+  props: {
+    item: { type: Object },
+    title: { type: String },
+    avatar: { type: String },
+    viewType: { type: String },
+    isAllDay: { type: Boolean, default: false },
+    statusFlag: { type: Number, default: 1 }
+  },
+  data() {
+    return {
+      statusClass: ['done', 'undone'],
+      isActive: false,
+      btns: [
+        {
+          name: '新增',
+          type: 'plus-square'
+        },
+        {
+          name: '编辑',
+          type: 'form'
+        },
+        {
+          name: '删除',
+          type: 'delete'
+        }
+      ]
+    };
+  },
+  computed: {
+    hasBtns() {
+      return this.btns?.length;
+    },
+    tagDetailRef() {
+      let i = 0;
+      let $parent = this.$parent;
+      while (i < 4) {
+        if ($parent?.$refs?.tagDetailRef) {
+          break;
+        } else {
+          $parent = $parent.$parent;
+        }
+        i++;
+      }
+      return $parent?.$refs?.tagDetailRef;
+    },
+    timeRange() {
+      const { startTime, endTime } = this.item;
+      return `${moment(startTime).format('HH:mm')}-${moment(endTime).format('HH:mm')}`;
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
+
+  // 方法
+  methods: {
+    clickListBtn(btn) {
+      const { startTime, endTime, scheduleId } = this.item;
+      switch (btn.type) {
+        case 'plus-square':
+          this.$emit('add', { startTime, endTime });
+          break;
+        case 'form':
+          this.$emit('edit', { startTime, endTime });
+          break;
+        case 'delete':
+          this.$confirm({
+            title: '提示',
+            content: '是否删除当前日程?',
+            okText: '确定',
+            cancelText: '取消',
+            onOk: () => {
+              this.$emit('delete', { id: scheduleId });
+            },
+            onCancel() {}
+          });
+          break;
+      }
+    },
+    clickTag() {
+      if (!this.tagDetailRef?.$el) return;
+
+      this.tagDetailRef.title = this.item.title;
+      this.tagDetailRef.content = this.item.content;
+      this.tagDetailRef.item = this.item;
+
+      this.tagDetailRef.$parent.tippyInstance = tippy(this.$refs.tagRef, {
+        trigger: 'click',
+        allowHTML: true,
+        maxWidth: 'none',
+        arrow: false,
+        hideOnClick: true,
+        interactive: true, // Determines if the tippy has interactive content inside of it, so that it can be hovered over and clicked inside without hiding.
+        theme: 'cnhis',
+        placement: 'auto',
+        zIndex: 100,
+        showOnCreate: true,
+        content: this.tagDetailRef?.$el,
+        duration: [100, 0],
+        appendTo: () => document.body,
+        onHidden: () => {
+          // this.tagDetailRef.$parent.tippyInstance = null;
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.event-tag {
+  width: 100%;
+  height: 100%;
+  color: #212121;
+  background: #f2f2f2;
+  border-color: rgba(130, 130, 130, 0.1);
+  box-shadow: 0px 0px 3px 0px rgba(130, 130, 130, 0.3);
+  border-radius: 2px;
+  min-height: 20px;
+
+  .tag-detail-modal {
+    display: none;
+  }
+
+  &:not(.event-tag--active) {
+    &:hover {
+      background: #f2f2f4;
+      .right-operate-hasBtn {
+        img {
+          display: none;
+        }
+        .calendar-quick-btn-wrap {
+          display: inline-block;
+        }
+      }
+    }
+    &:active {
+      color: #fff;
+      background: #05c987;
+    }
+  }
+  &.event-tag--active {
+    background: #05c987;
+    color: #fff;
+    &.event-tag-month.event-tag-allday {
+      &:hover {
+        background: #05c987;
+      }
+    }
+  }
+  &.event-tag-month,
+  &.event-tag-list {
+    box-shadow: unset;
+    &.event-tag-allday {
+      background: #e6f3e7;
+      // 13
+      &:hover {
+        background: #f2f2f4;
+      }
+      &:active {
+        background: #05c987;
+      }
+    }
+    &.event-tag--active {
+      background: #05c987;
+    }
+    .event-tag__main {
+      &.done,
+      &.undone {
+        padding: 0 4px 0 20px;
+        &::before {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          position: absolute;
+          left: 8px;
+          top: 6px;
+        }
+      }
+    }
+  }
+  &.event-tag-list {
+    padding: 6px 8px;
+    .avatar-icon {
+      width: 20px;
+      height: 20px;
+    }
+    .calendar-quick-btn {
+      margin-left: 15px;
+    }
+  }
+  &__main {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    padding: 0 4px;
+    font-size: 14px;
+    overflow: hidden;
+    box-sizing: border-box;
+    &.done,
+    &.undone {
+      padding: 0 4px 0 15px;
+      &::before {
+        content: '';
+        width: 4px;
+        height: 100%;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border-radius: 2px;
+      }
+    }
+    &.done {
+      &::before {
+        background: rgba(0, 0, 0, 0.2);
+      }
+    }
+    &.undone {
+      &::before {
+        background-color: #22c179;
+      }
+    }
+    &__text-time,
+    &__text-title {
+      flex: 1;
+      height: 18px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    &__text-time {
+      flex: 0 0 150px;
+    }
+    .right-operate {
+      height: 18px;
+    }
+    .avatar-icon {
+      width: 14px;
+      height: 14px;
+      margin-left: 8px;
+      border-radius: 50%;
+    }
+
+    .calendar-quick-btn-wrap {
+      height: 100%;
+      display: none;
+      .calendar-quick-btn {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 18px;
+        height: 100%;
+        font-size: 12px;
+        border-radius: 4px;
+        &:hover {
+          background: #dddddd;
+        }
+      }
+    }
+  }
+}
+</style>