n20-common-lib 1.3.5 → 1.3.8

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

@@ -1,442 +0,0 @@
-<!--
-  功能：    工作台日历
-  作者：    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

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

package/src/components/NstcG6Components/DialogForm/src/demo/index.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="">
-    <el-button @click="visible = true">
-      点我
-    </el-button>
-    <DialogFormCustom
-      :visible="visible"
-      :form-config="formConfig"
-      :rules="rules"
-      @confirm="handleConfirm"
-    />
-  </div>
-</template>
-
-<script>
-import DialogFormCustom from '../main'
-
-export default {
-  components: {
-    DialogFormCustom
-  },
-
-  data() {
-    return {
-      visible: false,
-      formConfig: [[
-        {
-          mold: 'input',
-          name: '姓名',
-          prop: 'prop1'
-        },
-        {
-          mold: 'datepicker',
-          name: '日期',
-          prop: 'prop2'
-        }
-      ]],
-      rules: {
-        prop1: [
-          { required: true, message: '姓名不能为空', trigger: 'blur' }
-        ],
-        prop2: [
-          { required: true, message: '日期不能为空', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-
-  methods: {
-    handleConfirm() {
-      this.visible = false
-      return Promise.resolve()
-    }
-  }
-}
-</script>

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

@@ -1,189 +0,0 @@
-<!--
-  功能：    表单里面的弹框查询
-  作者：    nstc
-  创建时间： 2021-02-04
--->
-
-<template>
-  <div>
-    <DialogCustom
-        v-model="dialogVisible"
-        v-bind="$attrs"
-        @confirm="handleConfirm"
-        @cancel="handleCancel"
-    >
-      <slot name="before" />
-      <NstcForm
-          ref="dialogForm"
-          v-model="formModel"
-          :reset.sync="reset"
-          :mount-and-query="false"
-          :config="formConfig"
-          :rules="rules"
-          :pureable="pureable"
-          :label-position="labelPosition"
-          :label-width="labelWidth"
-          :show-message="showMessage"
-          :validate-on-rule-change="validateOnRuleChange"
-          :mode="mode"
-      />
-      <slot name="after" />
-    </DialogCustom>
-  </div>
-</template>
-
-<script>
-import DialogCustom from '../../Dialog/src/main'
-import NstcForm from '../../Form/Component'
-
-export default {
-  name: 'DialogFormCustom',
-  components: {
-    DialogCustom,
-    NstcForm
-  },
-
-  inheritAttrs: false,
-
-  model: {
-    prop: 'formModel'
-  },
-
-  props: {
-    formModel: {
-      default: () => ({}),
-      type: Object
-    },
-
-    visible: {
-      type: Boolean,
-      default: false
-    },
-
-    showMessage: {
-      type: Boolean,
-      default: true
-    },
-
-    formConfig: {
-      type: Array,
-      default: () => []
-    },
-
-    rules: {
-      type: Object,
-      default: null
-    },
-
-    labelPosition: {
-      type: String,
-      default: 'right'
-    },
-
-    labelWidth: {
-      type: [String, Number],
-      default: 80
-    },
-
-    resetAfterClose: {
-      type: Boolean,
-      default: true
-    },
-
-    // 是否是纯净模式 (删除 renderable === false 的item.prop对应model的值)
-    pureable: {
-      default: false,
-      type: Boolean
-    },
-
-    validateOnRuleChange: {
-      default: false,
-      type: Boolean
-    },
-
-    mode: {
-      default: 'horizontal',
-      validator: function(val) {
-        return ['horizontal', 'vertical'].includes(val)
-      }
-    }
-  },
-
-  data() {
-    return {
-      reset: false
-    }
-  },
-
-  computed: {
-    dialogVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
-
-  watch: {
-    formModel: {
-      deep: true,
-      handler(val) {
-        this.$emit('input', val)
-        this.$emit('change', val)
-      }
-    }
-  },
-
-  methods: {
-    async handleConfirm() {
-      try {
-        if (this.rules) {
-          await this.$refs.dialogForm.validate()
-        }
-
-        if (this.$listeners.confirm) {
-          await this.$listeners.confirm(this.formModel) // $listeners.confirm 须返回Promise
-        }
-
-        await this.$nextTick()
-
-        this.handleReset()
-
-        return Promise.resolve()
-      } catch (err) {
-        return Promise.reject(err)
-      }
-    },
-
-    async handleCancel() {
-      try {
-        const model = JSON.parse(JSON.stringify(this.formModel))
-
-        this.$listeners.cancel && await this.$listeners.cancel(model) // $listeners.confirm 须返回Promise
-
-        this.handleReset()
-
-        return Promise.resolve()
-      } catch (err) {
-        return Promise.reject(err)
-      }
-    },
-
-    clearFormValidate() {
-      this.$refs.dialogForm.clearValidate()
-    },
-
-    handleReset() {
-      if (this.resetAfterClose) {
-        this.reset = true
-        this.$nextTick(() => {
-          this.$refs.dialogForm && this.$refs.dialogForm.clearValidate()
-        })
-      }
-    }
-  }
-}
-</script>
-