cnhis-design-vue 2.1.112 → 2.1.114

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

@@ -0,0 +1,287 @@
+<template>
+  <div class="tag-detail-wrpper">
+    <div class="header">
+      <p>日程详情</p>
+      <div class="btn-wrap">
+        <span class="btn-item" v-for="btn in btns" :key="btn.type" @click.stop="() => clickListBtn(btn)">
+          <a-icon v-if="btn.type === 'close'" :type="btn.type" :style="{ fontSize: '16px' }" />
+          <a-tooltip v-else :title="btn.name" overlayClassName="tippy-tooltip">
+            <a-icon :type="btn.type" :style="{ fontSize: '16px' }" />
+          </a-tooltip>
+        </span>
+      </div>
+    </div>
+    <div class="container">
+      <div class="title content-item">
+        <span>{{ title }}</span>
+      </div>
+      <div class="time content-item">
+        <a-icon type="clock-circle" style="color: #969696;" />
+        <span>{{ calcSchedulerTime }}</span>
+      </div>
+      <div class="content content-item">
+        <a-icon type="profile" style="color: #969696;" />
+        <span>{{ content }}</span>
+      </div>
+    </div>
+    <div class="footer">
+      <span v-if="isEndTippy">该日程时间已结束</span>
+      <span class="btn-item more" @click="handleDetail">
+        详情
+        <a-icon type="right" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Tooltip, Icon } from 'ant-design-vue';
+import vexutils, { moment } from '@/utils/vexutils';
+
+export default {
+  name: 'tag-detail',
+  components: {
+    [Tooltip.name]: Tooltip,
+    [Icon.name]: Icon
+  },
+  data() {
+    return {
+      item: {},
+      title: '',
+      content: '',
+      btns: [
+        {
+          name: '新增',
+          type: 'plus-square'
+        },
+        {
+          name: '编辑',
+          type: 'form'
+        },
+        {
+          name: '删除',
+          type: 'delete'
+        },
+        {
+          name: '关闭',
+          type: 'close'
+        }
+      ]
+    };
+  },
+  filters: {},
+  computed: {
+    isEndTippy() {
+      const { endTime } = this.item || {};
+      if (!endTime) return false;
+      if (
+        moment(endTime).valueOf() <=
+        moment()
+          .clone()
+          .valueOf()
+      )
+        return true;
+      return false;
+    },
+    calcSchedulerTime() {
+      const { startTime, endTime } = this.item;
+      const startStr = (startTime && moment(startTime).format('MM月DD日 ddd HH:mm')) || '';
+      const endStr = (endTime && moment(endTime).format('MM月DD日 ddd HH:mm')) || '';
+      return `${startStr} - ${endStr}`;
+    }
+    // showStatus() {
+    //   if ('statusFlag' in this.item) {
+    //     return false;
+    //   }
+    //   return true;
+    // },
+    // handleStatus() {
+    //   if (this.item?.statusFlag !== 1) {
+    //     return true;
+    //   }
+    //   return false;
+    // }
+  },
+  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;
+      }
+      this.$parent.tippyInstance?.hide();
+    },
+    handleDetail() {
+      this.$emit('detail', this.item);
+      this.$parent.tippyInstance?.hide();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.tag-detail-wrpper {
+  width: 356px;
+  background: #ffffff;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  border: 1px solid #d5d5d5;
+  color: #000000;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    padding: 0 16px;
+    border-bottom: 1px solid #e6e6e6;
+    p {
+      margin: 0;
+      font-size: 16px;
+    }
+    .btn-wrap {
+      display: inline-flex;
+      align-items: center;
+      font-size: 16px;
+      color: #666666;
+      .btn-item {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 4px 6px;
+        cursor: pointer;
+
+        &:hover {
+          background: #f2f2f4;
+          border-radius: 4px;
+        }
+      }
+      .btn-item + .btn-item {
+        margin-left: 4px;
+      }
+    }
+  }
+  .container {
+    padding: 14px 6px 14px 14px;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-right: 8px;
+    line-height: 20px;
+    .content-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      &.title {
+        font-size: 16px;
+        line-height: 22px;
+        font-weight: 500;
+        color: #000;
+        position: relative;
+        padding-left: 18px;
+
+        &::before {
+          content: '';
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: absolute;
+          left: -3px;
+          top: 6px;
+          background-color: #22c179;
+        }
+      }
+      &.time,
+      &.content {
+        span {
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 50px;
+    padding: 0 16px;
+    color: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid #e6e6e6;
+    .more {
+      margin-left: auto;
+      color: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.tippy-box[data-theme~='cnhis'] {
+  // background-color: #2563F4;
+  color: #fff;
+  background: #fff;
+  border-radius: 8px;
+  pointer-events: auto;
+  .tippy-content {
+    padding: 0;
+    background: #fff;
+    border-radius: 8px;
+  }
+  &[data-placement^='top'],
+  &[data-placement^='bottom'],
+  &[data-placement^='right'],
+  &[data-placement^='left'] {
+    & > div.tippy-arrow {
+      z-index: 1;
+      &:before {
+        width: 12px;
+        height: 12px;
+        background-color: #fff;
+        border: 1px solid transparent;
+        border-left-color: #d5d5d5;
+        border-top-color: #d5d5d5;
+        transform-origin: center center;
+      }
+    }
+  }
+  &[data-placement^='top'] > div.tippy-arrow:before {
+    transform: rotateZ(-135deg);
+    margin-top: -1px;
+  }
+  &[data-placement^='bottom'] > div.tippy-arrow:before {
+    transform: rotateZ(45deg);
+    margin-top: 1px;
+  }
+  &[data-placement^='right'] > div.tippy-arrow:before {
+    transform: rotateZ(-45deg);
+    margin-left: 1px;
+  }
+  &[data-placement^='left'] > div.tippy-arrow:before {
+    transform: rotateZ(135deg);
+    margin-right: 1px;
+  }
+}
+div[data-tippy-root] {
+  z-index: 100 !important;
+}
+</style>