n20-common-lib 1.2.43 → 1.3.0

package/src/components/NstcG6Components/Calendar/src/basic/month-table.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="nstc-calendar-month">
+    <div class="nstc-calendar-month-head">
+      <el-row>
+        <el-col :span="4" align="center">
+          <i class="nstc-calendar-arrow el-icon-arrow-left" @click="lastYear" />
+        </el-col>
+        <el-col
+          :span="16"
+          align="center"
+          class="year-text"
+        >
+          {{ yearStr }}
+        </el-col>
+        <el-col :span="4" align="center">
+          <i class="nstc-calendar-arrow el-icon-arrow-right" @click="nextYear" />
+        </el-col>
+      </el-row>
+    </div>
+    <el-divider />
+    <div class="nstc-calendar-month-main">
+      <div
+        v-for="(item, index) in months"
+        :key="index"
+        @click="pick(index+1)"
+      >{{ item }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonthTable',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      months: [
+        this.$t(`calendar.month_1`),
+        this.$t(`calendar.month_2`),
+        this.$t(`calendar.month_3`),
+        this.$t(`calendar.month_4`),
+        this.$t(`calendar.month_5`),
+        this.$t(`calendar.month_6`),
+        this.$t(`calendar.month_7`),
+        this.$t(`calendar.month_8`),
+        this.$t(`calendar.month_9`),
+        this.$t(`calendar.month_10`),
+        this.$t(`calendar.month_11`),
+        this.$t(`calendar.month_12`)
+      ],
+      yearStr: ''
+    }
+  },
+  computed: {},
+  created() {
+    this.yearStr = this.value
+  },
+  methods: {
+    // 选择日期
+    pick(month) {
+      this.$emit('pick', {
+        type: 'normal',
+        year: this.yearStr,
+        month
+      })
+    },
+    // 上一年
+    lastYear() {
+      this.yearStr--
+    },
+    // 下一年
+    nextYear() {
+      this.yearStr++
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/theme/theme1/styles/variables.scss";
+.nstc-calendar-month {
+  .nstc-calendar-arrow{
+    font-size: 16px;
+    cursor: pointer;
+    &:hover{
+      color: $eBaseColor;
+      font-weight: bold;
+    }
+  }
+  &-head{
+    padding: 10px 0;
+    .year-text {
+      &:hover {
+        cursor: pointer;
+        color: $eBaseColor;
+        font-weight: bold;
+      }
+    }
+  }
+  .el-divider{
+    margin: 0 0 10px 0;
+  }
+  &-main{
+    display: flex;
+    flex-flow: wrap;
+    width: 98%;
+    margin-left: 1%;
+    >div{
+      width: 25%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      border: 1px solid rgba(0,0,0,0);
+      cursor: pointer;
+      &:hover{
+        border: 1px solid $eBaseColor;
+        color: $eBaseColor
+      }
+    }
+  }
+}
+</style>

package/src/components/NstcG6Components/Calendar/src/basic/year-table.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="nstc-calendar-month">
+    <div class="nstc-calendar-month-head">
+      <el-row>
+        <el-col :span="4" align="center">
+          <i class="nstc-calendar-arrow el-icon-arrow-left" @click="lastYear" />
+        </el-col>
+        <el-col
+          :span="16"
+          align="center"
+          class="year-text"
+        >
+          {{ yearStr }}
+        </el-col>
+        <el-col :span="4" align="center">
+          <i class="nstc-calendar-arrow el-icon-arrow-right" @click="nextYear" />
+        </el-col>
+      </el-row>
+    </div>
+    <el-divider />
+    <div class="nstc-calendar-month-main">
+      <div
+        v-for="(item,index) in yearArr"
+        :key="index"
+        @click="pick(item)"
+      >{{ item }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonthTable',
+  props: {
+    startYear: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      yearArr: []
+    }
+  },
+  computed: {
+    yearStr() {
+      return `${this.yearArr[0]} - ${this.yearArr[this.yearArr.length - 1]}`
+    }
+  },
+  created() {
+    const t = []
+    for (let i = 0; i < 10; i++) {
+      t.push(this.startYear + i)
+    }
+    this.yearArr = t
+  },
+  methods: {
+    lastYear() {
+      if (this.yearArr[0] < 11) {
+        this.yearArr = []
+        for (let i = 1; i <= 10; i++) {
+          this.yearArr.push(i)
+        }
+      } else {
+        this.yearArr = this.yearArr.map(i => { return i - 10 })
+      }
+    },
+    nextYear() {
+      this.yearArr = this.yearArr.map(i => { return i + 10 })
+    },
+    pick(year) {
+      this.$emit('pick', {
+        type: 'month',
+        year
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '~@/theme/theme1/styles/variables.scss';
+.nstc-calendar-month{
+  .nstc-calendar-arrow{
+    font-size: 16px;
+    cursor: pointer;
+    &:hover{
+      color: $eBaseColor;
+      font-weight: bold;
+    }
+  }
+  &-head{
+    padding: 10px 0;
+    .year-text {
+      &:hover {
+        cursor: pointer;
+        color: $eBaseColor;
+        font-weight: bold;
+      }
+    }
+  }
+  .el-divider{
+    margin: 0 0 10px 0;
+  }
+  &-main{
+    display: flex;
+    flex-flow: wrap;
+    width: 98%;
+    margin-left: 1%;
+    >div{
+      width: 25%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      border: 1px solid rgba(0,0,0,0);
+      cursor: pointer;
+      &:hover{
+        border: 1px solid $eBaseColor;
+        color: $eBaseColor
+      }
+    }
+  }
+}
+</style>

package/src/components/NstcG6Components/Calendar/src/main.vue

@@ -0,0 +1,442 @@
+<!--
+  功能：    工作台日历
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div class="nstc-calendar" @click.stop="">
+    <div v-show="type === 'normal'">
+      <div class="nstc-calendar_header">
+        <div v-if="$i18n.locale === 'zh'">
+          <span @click="chooseYear">{{ yearStr }}年 </span>
+          <span @click="chooseMonth">{{ monthStr }}</span>
+        </div>
+        <div v-else>
+          <span @click="chooseMonth">{{ monthStr }} </span>
+          <span @click="chooseYear">{{ yearStr }}</span>
+        </div>
+        <div>
+          <i class="el-icon-arrow-up" @click="lastMonth"></i>
+          <i class="el-icon-arrow-down" @click="nextMonth"></i>
+        </div>
+      </div>
+      <el-divider />
+      <div class="nstc-calendar_weeKs">
+        <div v-for="(item, index) in weeks" :key="index">{{ item }}</div>
+      </div>
+      <div class="nstc-calendar_date_box">
+        <div
+          v-for="(item, index) in showDates"
+          :key="index"
+          :date="item.date"
+          :class="{
+            notCurrentMonthDay: !item.isCurrentMonth,
+            'nstc-calendar-data-cell': true,
+            'nstc-calendar-current-day': item.isCurrentDate
+          }"
+        >
+          <span>{{ item.day }}</span>
+          <span v-if="item.festival.chn" class="festival-flag"></span>
+          <span v-if="item.festival.usa" class="festival-flag"></span>
+          <span v-if="item.festival.jpn" class="festival-flag"></span>
+        </div>
+      </div>
+    </div>
+    <div v-if="type === 'year'">
+      <year-table :start-year="chooseYearStr" @pick="yearPick" />
+    </div>
+    <div v-if="type === 'month'">
+      <month-table :value="chooseYearStr" @pick="monthPick" />
+    </div>
+    <!--  节日   -->
+    <div class="nstc-calendar-festival">
+      <div>{{ $t(`calendar.festival`) }}:</div>
+      <div v-for="(item, index) in festivalList" :key="index">
+        <span :style="`background-color: ${item.color};`"></span>
+        <span>{{ item.label }}</span>
+      </div>
+    </div>
+    <!--    <div>当月一号星期： {{ firstDayWeek }}</div>-->
+    <!--    <div>当月有多少天： {{ dayNum }}</div>-->
+  </div>
+</template>
+
+<script>
+import monthTable from './basic/month-table'
+import yearTable from './basic/year-table'
+export default {
+  name: 'NstcCalendar',
+  components: {
+    monthTable,
+    yearTable
+  },
+  data() {
+    return {
+      year: '',
+      month: '',
+      currentDate: '',
+      weeks: [
+        this.$t('calendar.week_7'),
+        this.$t('calendar.week_1'),
+        this.$t('calendar.week_2'),
+        this.$t('calendar.week_3'),
+        this.$t('calendar.week_4'),
+        this.$t('calendar.week_5'),
+        this.$t('calendar.week_6')
+      ],
+      firstDayWeek: null,
+      lastDateCell: [],
+      dateCell: [],
+      nextDateCell: [],
+      dayNum: 0,
+      lastMonthDayNum: 0,
+      showDates: [],
+      type: 'normal',
+      chooseMonthStr: '',
+      chooseYearStr: '',
+      festivalList: [
+        { color: '#C03639', label: this.$t('calendar.chn') },
+        { color: '#409eff', label: this.$t('calendar.usa') },
+        { color: '#4AB7BD', label: this.$t('calendar.jpn') }
+      ],
+      i18nFestivalList: {
+        chn: [
+          '2020/10/01',
+          '2020/10/02',
+          '2020/10/03',
+          '2020/10/04',
+          '2020/10/05',
+          '2020/10/06',
+          '2020/10/07',
+          '2020/10/08'
+        ]
+      }
+    }
+  },
+  computed: {
+    yearStr() {
+      return this.year
+    },
+    monthStr() {
+      return this.$t(`calendar.month_${this.month}`)
+    }
+  },
+  created() {
+    this.initCalendar('init')
+  },
+  methods: {
+    // 根据年月获取给定月一号是星期几
+    getWeekByMonth(year, month) {
+      const t = new Date(`${year}/${month}`)
+      return t.getDay()
+    },
+    // 根据年月获取当月有多少天
+    getDayByMonth(year, month) {
+      const t = new Date(year, month - 1, 0)
+      return t.getDate()
+    },
+    // 小于10的添加0
+    formatter(v) {
+      if (typeof v === 'number') {
+        if (v < 10) {
+          return '0' + v
+        } else {
+          return v
+        }
+      } else {
+        return ''
+      }
+    },
+    // 初始化项目
+    initCalendar(flag) {
+      if (flag === 'init') {
+        const t = new Date()
+        this.year = t.getFullYear()
+        this.month = t.getMonth() + 1
+        this.currentDate = t.getDate()
+      }
+      // 本月第一天星期几
+      this.firstDayWeek = this.getWeekByMonth(this.year, this.month)
+      // 本月有多少天
+      this.dayNum = this.getDayByMonth(this.year, this.month)
+      // 上一月有多少天 (考虑1月)
+      let lastYear = ''
+      let lastMonth = ''
+      let nextYear = ''
+      let nextMonth = ''
+      if (Number(this.month) === 1) {
+        lastYear = this.year - 1
+        lastMonth = 12
+      } else {
+        lastYear = this.year
+        lastMonth = this.month - 1
+        if (Number(this.month) === 12) {
+          nextYear = this.year + 1
+          nextMonth = 1
+        } else {
+          nextYear = this.year
+          nextMonth = this.month + 1
+        }
+      }
+      this.lastMonthDayNum = this.getDayByMonth(lastYear, lastMonth)
+      // 上个月
+      this.lastDateCell = []
+      for (let i = 0; i < this.firstDayWeek; i++) {
+        const minDate = this.lastMonthDayNum - this.firstDayWeek
+        const day = minDate + i + 1
+        const date = `${lastYear}/${lastMonth}/${this.formatter(day)}`
+        this.lastDateCell.push({
+          day,
+          isCurrentMonth: false,
+          date,
+          festival: this.getFestival(date),
+          isCurrentDate: Number(day) === Number(this.currentDate)
+        })
+      }
+      // 本月
+      this.dateCell = []
+      for (let j = 1; j < this.dayNum; j++) {
+        const date = `${this.year}/${this.month}/${this.formatter(j)}`
+        this.dateCell.push({
+          day: j,
+          isCurrentMonth: true,
+          date,
+          festival: this.getFestival(date),
+          isCurrentDate: Number(j) === Number(this.currentDate)
+        })
+      }
+      // 下月 日历总共六行
+      this.nextDateCell = []
+      const fillDate = 42 - (this.lastDateCell.length + this.dateCell.length)
+      for (let n = 1; n <= fillDate; n++) {
+        const date = `${nextYear}/${nextMonth}/${this.formatter(n)}`
+        this.nextDateCell.push({
+          day: n,
+          isCurrentMonth: false,
+          date,
+          festival: this.getFestival(date),
+          isCurrentDate: Number(n) === Number(this.currentDate)
+        })
+      }
+      // 将要显示的内容显示出来
+      this.showDates = this.lastDateCell.concat(
+        this.dateCell,
+        this.nextDateCell
+      )
+    },
+    // 查看上月数据
+    lastMonth() {
+      if (Number(this.month) === 1) {
+        this.month = 12
+        this.year--
+      } else {
+        this.month--
+      }
+      this.initCalendar()
+    },
+    // 查看下月数据
+    nextMonth() {
+      if (Number(this.month) === 12) {
+        this.month = 1
+        this.year++
+      } else {
+        this.month++
+      }
+      this.initCalendar()
+    },
+    // 选择年
+    chooseYear() {
+      this.chooseYearStr = this.year
+      this.type = 'year'
+    },
+    chooseMonth() {
+      this.chooseYearStr = this.year
+      this.type = 'month'
+    },
+    // 选择月
+    monthPick(data) {
+      this.type = data.type
+      this.year = data.year
+      this.month = data.month
+      this.initCalendar()
+    },
+    // 选择月
+    yearPick(data) {
+      this.type = data.type
+      this.year = data.year
+      this.chooseYearStr = this.year
+    },
+    // 获得当前日期的节日
+    getFestival(date) {
+      const festivalObj = {
+        chn: false,
+        usa: false,
+        uk: false
+      }
+      if (this.i18nFestivalList.chn.includes(date)) {
+        festivalObj.chn = true
+      }
+      return festivalObj
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+// @import '~@/theme/theme1/styles/variables.scss';
+$nstcCalendarBorderColor: #dfe6ec;
+$festival_CHN: #c03639;
+$festival_USA: #409eff;
+$festival_JPN: #4ab7bd;
+$festival_UK: #30b08f;
+$festival_KOR: #fec171;
+.nstc-calendar {
+  .el-divider {
+    margin: 0;
+  }
+  color: #606266;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  background: #fff;
+  border-radius: 4px;
+  width: 100%;
+  min-width: 360px;
+  min-height: 300px;
+  .nstc-calendar_header {
+    display: flex;
+    > div {
+      flex: 1;
+      font-size: 14px;
+      margin: 10px;
+    }
+    > div:nth-child(1) {
+      > span {
+        cursor: pointer;
+        &:hover {
+          color: $eBaseColor;
+        }
+      }
+    }
+    > div:nth-child(2) {
+      font-size: 16px;
+      text-align: right;
+      i {
+        margin-right: 20px;
+        &:hover {
+          cursor: pointer;
+          color: $eBaseColor;
+        }
+      }
+    }
+  }
+  .nstc-calendar_weeKs {
+    margin: 7px auto;
+    display: flex;
+    > div {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .nstc-calendar_date_box {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom: 20px;
+    > div {
+      padding: 7px;
+      border: 1px solid $nstcCalendarBorderColor;
+      width: 14.285714%;
+      border-bottom: none;
+      border-right: none;
+      position: relative;
+      height: 35px;
+      > span:nth-child(1) {
+      }
+      &:hover {
+        background-color: $eBaseColor;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+    > div:nth-child(7n) {
+      // border-right: 1px solid $nstcCalendarBorderColor;
+    }
+    > div:nth-child(7n + 1) {
+      border-left: none;
+    }
+    > div:nth-child(36) {
+      border-bottom: 1px solid $nstcCalendarBorderColor;
+    }
+    > div:nth-child(37) {
+      border-bottom: 1px solid $nstcCalendarBorderColor;
+    }
+    > div:nth-child(38) {
+      border-bottom: 1px solid $nstcCalendarBorderColor;
+    }
+    > div:nth-child(39) {
+      border-bottom: 1px solid $nstcCalendarBorderColor;
+    }
+    > div:nth-child(40) {
+      border-bottom: 1px solid $nstcCalendarBorderColor;
+    }
+    > div:nth-child(41) {
+      border-bottom: 1px solid $nstcCalendarBorderColor;
+    }
+    > div:nth-child(42) {
+      border-bottom: 1px solid $nstcCalendarBorderColor;
+    }
+  }
+  .nstc-calendar-data-cell {
+    position: relative;
+    .festival-flag {
+      display: inline-block;
+      width: 4px;
+      height: 4px;
+      border-radius: 2px;
+      position: absolute;
+      bottom: 4px;
+      left: 10px;
+      border: 1px solid #000;
+    }
+    .festival-flag:nth-child(2) {
+      left: 10px;
+      border: 1px solid $festival_CHN;
+      background-color: $festival_CHN;
+    }
+    .festival-flag:nth-child(3) {
+      left: 18px;
+      border: 1px solid $festival_USA;
+      background-color: $festival_USA;
+    }
+    .festival-flag:nth-child(4) {
+      left: 26px;
+      border: 1px solid $festival_UK;
+      background-color: $festival_UK;
+    }
+  }
+  .notCurrentMonthDay {
+    color: #c0c4cc !important;
+  }
+  .nstc-calendar-festival {
+    display: flex;
+    margin-bottom: 10px;
+    > div {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+      > span:nth-child(1) {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+    }
+  }
+  .nstc-calendar-current-day {
+    background-color: $eBaseColor;
+    color: #fff;
+  }
+}
+</style>
+

package/src/components/NstcG6Components/DialogForm/index.js

@@ -0,0 +1,8 @@
+import DialogFormCustom from './src/main';
+
+/* istanbul ignore next */
+DialogFormCustom.install = function(Vue) {
+    Vue.component(DialogFormCustom.name, DialogFormCustom);
+};
+
+export default DialogFormCustom;