npm - agilebuilder-ui - Versions diffs - 1.0.0 - Mend

agilebuilder-ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (392) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Recommended IDE Setup
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "name": "agilebuilder-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "private": false,
+  "main": "./lib/super-ui.js",
+  "scripts": {
+    "lib": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-vue": "4.0.4",
+    "@zxing/library": "^0.20.0",
+    "async-validator": "^4.2.5",
+    "js-base64": "^3.7.7",
+    "js-cookie": "^3.0.5",
+    "mitt": "^3.0.1",
+    "path-to-regexp": "6.2.1",
+    "sortablejs": "^1.15.0",
+    "tinymce": "5.8.2"
+  },
+  "devDependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "element-plus": "^2.4.1",
+    "nprogress": "^0.2.0",
+    "sass": "^1.69.4",
+    "vite": "^4.4.5",
+    "vite-plugin-require-transform": "^1.0.21",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue": "3.3.4",
+    "vue-i18n": "^9.5.0",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
+  }
+}

package/packages/IntervalSelection/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+import SectionDate from './src/sectionDate.vue'
+SectionDate.install = function (Vue) {
+  Vue.component(SectionDate.name, SectionDate)
+}
+export default SectionDate

package/packages/IntervalSelection/src/quarterScope.vue ADDED Viewed

@@ -0,0 +1,405 @@
+<template>
+  <el-popover
+    v-model="pickerVisible"
+    trigger="focus"
+    popper-class="lervor-quarter-popover"
+    :disabled="disabled"
+  >
+    <template v-if="endQuarterDate" v-slot:reference>
+      <el-input
+        ref="reference"
+        class="el-date-editor"
+        readonly
+        :disabled="disabled"
+        :size="size"
+        :placeholder="placeholder"
+        :model-value="endValue"
+        :validate-event="false"
+        style="width: 100%"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="showClose = false"
+      >
+        <template v-slot:prefix>
+          <i class="el-input__icon" :class="triggerClass" />
+        </template>
+        <template v-slot:suffix>
+          <i
+            class="el-input__icon"
+            :class="[showClose ? '' + clearIcon : '']"
+            @click="handleClickIcon"
+            @mousedown="handleMousedownIcon"
+          />
+        </template>
+      </el-input>
+    </template>
+    <template v-else v-slot:reference>
+      <el-input
+        ref="reference"
+        class="el-date-editor"
+        readonly
+        :disabled="disabled"
+        :size="size"
+        :placeholder="placeholder"
+        :model-value="displayValue"
+        :validate-event="false"
+        style="width: 100%"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="showClose = false"
+      >
+        <template v-slot:prefix>
+          <i class="el-input__icon" :class="triggerClass" />
+        </template>
+        <template v-slot:suffix>
+          <i
+            class="el-input__icon"
+            :class="[showClose ? '' + clearIcon : '']"
+            @click="handleClickIcon"
+            @mousedown="handleMousedownIcon"
+          />
+        </template>
+      </el-input>
+    </template>
+    <div class="lervor-quarter-picker">
+      <div class="el-date-picker__header el-date-picker__header--bordered">
+        <button
+          type="button"
+          aria-label="前一年"
+          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
+          @click="prevYear"
+        />
+        <span role="button" class="el-date-picker__header-label">{{
+          yearLabel
+        }}</span>
+        <button
+          type="button"
+          aria-label="后一年"
+          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
+          @click="nextYear"
+        />
+      </div>
+      <div
+        class="el-picker-panel__content"
+        style="width: 100%; margin: 10px 15px"
+      >
+        <table class="lervor-quarter-table" @click="handleTableClick">
+          <tbody>
+            <tr>
+              <td class="available" :class="getCellStyle(0)">
+                <a class="cell">Q1</a>
+              </td>
+              <td class="available" :class="getCellStyle(1)">
+                <a class="cell">Q2</a>
+              </td>
+            </tr>
+            <tr>
+              <td class="available" :class="getCellStyle(2)">
+                <a class="cell">Q3</a>
+              </td>
+              <td class="available" :class="getCellStyle(3)">
+                <a class="cell">Q4</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </el-popover>
+</template>
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import {
+  formatDate,
+  prevYear,
+  nextYear,
+  range,
+  nextDate,
+  isDateObject,
+  parseDate,
+} from '../../utils/date-util'
+import { hasClass } from 'element-plus/lib/utils/index'
+// 获取指定年份和季度的所有日期
+const datesInYearAndQuarter = (year, quarter) => {
+  const numOfDays = getDayCountOfQuarter(year, quarter)
+  const firstDay = new Date(year, quarter * 3, 1)
+  return range(numOfDays).map((n) => nextDate(firstDay, n))
+}
+// 获取指定年份和季度总天数
+const getDayCountOfQuarter = (year, quarter) => {
+  switch (quarter) {
+    case 0: // 第一季度包含二月，需要对是否闰年进行判断处理
+      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        return 91
+      } else {
+        return 90
+      }
+    case 1:
+      return 91
+    default:
+      return 92
+  }
+}
+export default {
+  name: 'QuarterPicker',
+  props: {
+    size: {
+      type: String,
+      default: 'medium',
+    },
+    format: String, // 显示在输入框中的格式，引入季度：q（阿拉伯数字）、Q（中文数字）
+    valueFormat: String,
+    placeholder: String,
+    prefixIcon: String,
+    clearIcon: {
+      type: String,
+      default: 'el-icon-circle-close',
+    },
+    disabled: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      // 组件宽度
+      type: String,
+      default: '',
+    },
+    disabledDate: {}, // 不可用的日期
+    value: null,
+    endQuarterDate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showClose: false,
+      pickerVisible: false,
+      date: new Date(),
+      quarterText: ['一', '二', '三', '四'],
+    }
+  },
+  computed: {
+    triggerClass() {
+      return this.prefixIcon || 'el-icon-date'
+    },
+    displayValue() {
+      if (!this.value) {
+        return null
+      } else if (typeof this.value === 'number') {
+        const num = this.getQuarter(this.value)
+        const yearNum = new Date(this.value).getFullYear()
+        return yearNum + '年Q' + num
+      } else {
+        // 季度，从0开始
+        const quarter = parseInt(this.parsedValue.getMonth() / 3)
+        $emit(this, 'change', this.date)
+        return (
+          new Date(this.parsedValue).getFullYear() +
+          this.$t('IntervalSelection.year') +
+          'Q' +
+          (quarter + 1)
+        )
+      }
+    },
+    endValue() {
+      if (!this.value) {
+        return null
+      } else if (typeof this.value === 'number') {
+        const num = this.getQuarter(this.value)
+        const yearNum = new Date(this.value).getFullYear()
+        return yearNum + this.$t('IntervalSelection.year') + 'Q' + num
+      } else {
+        console.log(this.value)
+        const month = this.date.getMonth() + 1
+        const year = this.date.getFullYear()
+        let addYear = ''
+        if (month == 1) {
+          if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+            // 是闰年
+            addYear = 90 * 24 * 60 * 60 * 1000
+          } else {
+            // 不是闰年
+            addYear = 89 * 24 * 60 * 60 * 1000
+          }
+        } else if (month == 4) {
+          addYear = 90 * 24 * 60 * 60 * 1000
+        } else if (month == 7) {
+          addYear = 91 * 24 * 60 * 60 * 1000
+        } else {
+          addYear = 91 * 24 * 60 * 60 * 1000
+        }
+        const NewDate = new Date(new Date(this.date).getTime() + addYear)
+        $emit(this, 'change', NewDate)
+        // 季度，从0开始
+        let quarter = ''
+        if (month > 0 && month < 4) {
+          quarter = 1
+        } else if (month > 3 && month < 7) {
+          quarter = 2
+        } else if (month > 6 && month < 10) {
+          quarter = 3
+        } else {
+          quarter = 4
+        }
+        const fDate =
+          NewDate.getFullYear() +
+          this.$t('IntervalSelection.year') +
+          'Q' +
+          quarter
+        return fDate
+      }
+    },
+    year() {
+      return this.date.getFullYear()
+    },
+    yearLabel() {
+      return this.year + this.$t('IntervalSelection.year')
+    },
+    parsedValue() {
+      if (!this.value) {
+        return this.value
+      }
+      if (isDateObject(this.value)) {
+        return this.value
+      }
+      // 非时间格式且设置了valueFormat，进行时间转换
+      if (this.valueFormat) {
+        return parseDate(this.value, this.valueFormat)
+      }
+      // 非时间格式且未设置valueFormat，再尝试转换时间
+      return new Date(this.value)
+    },
+  },
+  watch: {
+    value(value) {
+      this.date = value ? this.parsedValue : new Date()
+    },
+  },
+  methods: {
+    getQuarter(date) {
+      var month = new Date(date).getMonth()
+      if (month < 3) {
+        return 1
+      } else if (month > 2 && month < 6) {
+        return 2
+      } else if (month > 5 && month < 9) {
+        return 3
+      } else if (month > 8 && month < 11) {
+        return 4
+      }
+    },
+    handleMouseEnter() {
+      if (this.disabled) return
+      if (this.value && this.clearable) {
+        this.showClose = true
+      }
+    },
+    handleClickIcon(event) {
+      if (this.disabled) return
+      if (this.showClose) {
+        $emit(this, 'update:value', null)
+        $emit(this, 'change', null)
+        this.showClose = false
+        this.pickerVisible = false
+        this.$refs.reference.blur()
+      }
+    },
+    handleMousedownIcon(event) {
+      // 阻止鼠标按下清空按钮，防止清空数据时季度选择面板闪现
+      event.preventDefault()
+    },
+    handleTableClick(event) {
+      let target = event.target
+      if (target.tagName === 'A') {
+        target = target.parentNode
+      }
+      if (target.tagName !== 'TD') return
+      if (hasClass(target, 'disabled')) return
+      const column = target.cellIndex
+      const row = target.parentNode.rowIndex
+      // 季度，从0开始
+      const quarter = row * 2 + column
+      // 季度开始月份，从0开始
+      const month = quarter * 3
+      let newDate = new Date(this.year, month, 1)
+      if (this.valueFormat) {
+        newDate = formatDate(newDate, this.valueFormat)
+      }
+      this.pickerVisible = false
+      $emit(this, 'update:value', newDate)
+      $emit(this, 'change', newDate)
+    },
+    prevYear() {
+      this.date = prevYear(this.date)
+    },
+    nextYear() {
+      this.date = nextYear(this.date)
+    },
+    getCellStyle(quarter) {
+      const style = {}
+      const today = new Date()
+      const date = this.parsedValue ? this.parsedValue : today
+      style.disabled =
+        typeof this.disabledDate === 'function'
+          ? datesInYearAndQuarter(this.year, quarter).every(this.disabledDate)
+          : false
+      // 当前选中的季度样式
+      style.current =
+        date.getFullYear() === this.year &&
+        parseInt(date.getMonth() / 3) === quarter
+      // 今日所在季度样式
+      style.quarter =
+        today.getFullYear() === this.year &&
+        parseInt(today.getMonth() / 3) === quarter
+      return style
+    },
+  },
+  emits: ['change', 'update:value', , 'update:value'],
+}
+</script>
+<style>
+.lervor-quarter-picker {
+  line-height: 30px;
+}
+.lervor-quarter-popover {
+  padding: 0;
+}
+.lervor-quarter-table {
+  font-size: 12px;
+  margin: -1px;
+  border-collapse: collapse;
+  width: 100%;
+}
+.lervor-quarter-table td {
+  text-align: center;
+  padding: 10px 3px;
+  cursor: pointer;
+}
+.lervor-quarter-table td .cell {
+  height: 32px;
+  display: block;
+  line-height: 32px;
+  color: #606266;
+  margin: 0 auto;
+}
+.lervor-quarter-table td .cell:hover {
+  color: #1890ff;
+}
+.lervor-quarter-table td.current:not(.disabled) .cell {
+  color: #409eff;
+}
+.lervor-quarter-table td.quarter .cell {
+  color: #409eff;
+  font-weight: 700;
+}
+.lervor-quarter-table td.disabled .cell {
+  background-color: #f5f7fa;
+  cursor: not-allowed;
+  color: #c0c4cc;
+}
+</style>