agilebuilder-ui 1.0.0

package/packages/IntervalSelection/src/sectionDate.vue

@@ -0,0 +1,475 @@
+<template>
+  <div>
+    <!-- 年份选择器 -->
+    <div v-if="colFieldSetting.options.showType === 'year'" class="select">
+      <el-date-picker
+        :shortcuts="pickerOptions && pickerOptions.shortcuts"
+        :disabled-date="pickerOptions && pickerOptions.disabledDate"
+        :cell-class-name="pickerOptions && pickerOptions.cellClassName"
+        v-model="yearStartDate"
+        type="year"
+        :placeholder="colFieldSetting.options.startPlaceholder"
+        :disabled="colFieldSetting.options.disabled"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        @change="onChangeStatYear"
+      ></el-date-picker>
+      <div class="intervalCenter">-</div>
+      <el-date-picker
+        :shortcuts="pickerOptions && pickerOptions.shortcuts"
+        :disabled-date="pickerOptions && pickerOptions.disabledDate"
+        :cell-class-name="pickerOptions && pickerOptions.cellClassName"
+        v-model="yearDate"
+        type="year"
+        :placeholder="colFieldSetting.options.endPlaceholder"
+        :disabled="colFieldSetting.options.disabled"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        @change="onChangeEndYear"
+      ></el-date-picker>
+    </div>
+    <!-- 季度选择器 -->
+    <!--<div-->
+    <!--  v-else-if="colFieldSetting.options.showType === 'quarterScope'"-->
+    <!--  class="select"-->
+    <!--&gt;-->
+    <!--  <quarterScope-->
+    <!--    v-model:value="ScopeStartDate"-->
+    <!--    :size="-->
+    <!--      colFieldSetting.options.size ? colFieldSetting.options.size : 'small'-->
+    <!--    "-->
+    <!--    :disabled="colFieldSetting.options.disabled"-->
+    <!--    :clearable="colFieldSetting.options.clearable"-->
+    <!--    :placeholder="colFieldSetting.options.placeholder"-->
+    <!--    :format="-->
+    <!--      'yyyy' +-->
+    <!--      $t('IntervalSelection.upload') +-->
+    <!--      'q' +-->
+    <!--      $t('IntervalSelection.quarter')-->
+    <!--    "-->
+    <!--    style="width: 100%"-->
+    <!--    @change="quarterStatrt"-->
+    <!--  />-->
+    <!--  <div class="intervalCenter">-</div>-->
+    <!--  <quarterScope-->
+    <!--    v-model:value="ScopeEndDate"-->
+    <!--    :size="-->
+    <!--      colFieldSetting.options.size ? colFieldSetting.options.size : 'small'-->
+    <!--    "-->
+    <!--    :disabled="colFieldSetting.options.disabled"-->
+    <!--    :clearable="colFieldSetting.options.clearable"-->
+    <!--    :placeholder="colFieldSetting.options.placeholder"-->
+    <!--    style="width: 100%"-->
+    <!--    :format="-->
+    <!--      'yyyy' +-->
+    <!--      $t('IntervalSelection.upload') +-->
+    <!--      'q' +-->
+    <!--      $t('IntervalSelection.quarter')-->
+    <!--    "-->
+    <!--    :end-quarter-date="true"-->
+    <!--    @change="quarterEnd"-->
+    <!--  />-->
+    <!--</div>-->
+    <!-- 星期选择器 -->
+    <div v-else-if="colFieldSetting.options.showType === 'week'" class="select">
+      <el-date-picker
+        :shortcuts="{ firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.shortcuts"
+        :disabled-date="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.disabledDate
+        "
+        :cell-class-name="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.cellClassName
+        "
+        v-model="weekStareDate"
+        :type="colFieldSetting.options.showType"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        :clearable="colFieldSetting.options.clearable"
+        :format="
+          'YYYY' +
+          $t('IntervalSelection.auxiliary') +
+          'WW' +
+          $t('IntervalSelection.week')
+        "
+        @change="weekStatChange"
+      ></el-date-picker>
+      <div class="intervalCenter">-</div>
+      <el-date-picker
+        :shortcuts="{ firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.shortcuts"
+        :disabled-date="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.disabledDate
+        "
+        :cell-class-name="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.cellClassName
+        "
+        v-model="weekDate"
+        :type="colFieldSetting.options.showType"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        :clearable="colFieldSetting.options.clearable"
+        :format="
+          'YYYY' +
+          $t('IntervalSelection.auxiliary') +
+          'WW' +
+          $t('IntervalSelection.week')
+        "
+        @change="weekChange"
+      ></el-date-picker>
+    </div>
+    <!-- 月份选择 -->
+    <div
+      v-else-if="colFieldSetting.options.showType === 'monthrange'"
+      class="select"
+    >
+      <el-date-picker
+        v-model="monthStareDate"
+        type="month"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        value-format="x"
+        @change="monthStatChange"
+      />
+      <div class="intervalCenter">-</div>
+      <el-date-picker
+        v-model="monthDate"
+        type="month"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        @change="monthChange"
+      />
+    </div>
+    <div v-else style="width: 100%; height: 100%">
+      <el-date-picker
+        v-model="datStareDate"
+        :type="colFieldSetting.options.showType"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        :editable="colFieldSetting.options.editable"
+        :clearable="colFieldSetting.options.clearable"
+        value-format="x"
+        style="width: 100%"
+        @change="changeForm"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+// import quarterScope from './quarterScope'
+import {
+  getFirstDayOfSeason,
+  getWeekOfSeason,
+  formatTimefn,
+  getDateRangeSelectorDefaultValue,
+} from '../../../src/utils/range-selector'
+export default {
+  name: 'SectionDate',
+  components: {
+    // quarterScope,
+  },
+  props: {
+    // 组件数据项目
+    colFieldSetting: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      modelValue: {},
+      startDate: '',
+      endDate: '',
+      weekStareDate: '',
+      weekDate: '',
+      monthStareDate: '',
+      monthDate: '',
+      datStareDate: [],
+      yearStartDate: '',
+      yearDate: '',
+      ScopeStartDate: '',
+      ScopeEndDate: '',
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getFullYear() < 2000
+        },
+      },
+      fordateParams: '',
+    }
+  },
+  watch: {
+    datStareDate: {
+      handler(newValue) {
+        this.startDate = this.formatTimefn(
+          this.colFieldSetting.options.format,
+          newValue[0]
+        )
+        this.endDate = this.formatTimefn(
+          this.colFieldSetting.options.format,
+          newValue[1]
+        )
+      },
+      immediate: false,
+      deep: true,
+    },
+  },
+  created() {
+    this.setTimeScope()
+  },
+  methods: {
+    // 时间格式处理函数
+    formatTimefn(format, dateTime) {
+      return formatTimefn(format, dateTime)
+    },
+    getFirstDayOfSeason(date) {
+      return getFirstDayOfSeason(date)
+    },
+    getWeekOfSeason(date) {
+      return getWeekOfSeason(date)
+    },
+    // 填充默认值
+    setTimeScope() {
+      const dataOptions = this.colFieldSetting.options
+         let myDefaultValue = dataOptions.defaultValueSetting ? dataOptions.defaultValueSetting.paramValue : null
+        if (myDefaultValue === undefined || myDefaultValue === null || myDefaultValue === '') {
+          myDefaultValue = dataOptions.defaultValue
+        }
+      const defaultValueMap = getDateRangeSelectorDefaultValue(
+        dataOptions.stareScopeTimeType,
+        dataOptions.format,
+        myDefaultValue
+      )
+      if (defaultValueMap) {
+        const startTimeTemp = defaultValueMap.startTimeTemp
+        const endTimeTemp = defaultValueMap.endTimeTemp
+        const myStartDate = defaultValueMap.startDate
+        const myEndDate = defaultValueMap.endDate
+        if (
+          dataOptions.showType === 'year' &&
+          startTimeTemp &&
+          endTimeTemp
+        ) {
+          // 年范围选择器
+          this.yearStartDate = startTimeTemp
+          this.yearDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'quarterScope' &&
+          startTimeTemp &&
+          endTimeTemp
+        ) {
+          // 季度范围选择器
+          this.ScopeStartDate = startTimeTemp
+          this.ScopeEndDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'week' &&
+          startTimeTemp &&
+          endTimeTemp
+        ) {
+          // 周范围选择器
+          this.weekStareDate = startTimeTemp
+          this.weekDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'monthrange' &&
+          startTimeTemp &&
+          endTimeTemp
+        ) {
+          // 月份范围选择器
+          this.monthStareDate = startTimeTemp
+          this.monthDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'daterange' &&
+          startTimeTemp &&
+          endTimeTemp
+        ) {
+          // 日期范围选择器
+          this.datStareDate = [startTimeTemp, endTimeTemp]
+        }
+        this.startDate = myStartDate
+        this.endDate = myEndDate
+      }
+      this.changeForm()
+    },
+    getTimeTamp(date) {
+      return new Date(date).getTime()
+    },
+    onChangeStatYear() {
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(this.yearStartDate).getTime()
+      )
+      this.changeForm()
+    },
+    onChangeEndYear() {
+      const year = new Date(this.yearDate).getFullYear()
+      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        // 是闰年
+        this.forTimeParams =
+          new Date(this.yearDate).getTime() + 365 * 24 * 60 * 60 * 1000
+      } else {
+        // 不是闰年
+        this.forTimeParams =
+          new Date(this.yearDate).getTime() + 364 * 24 * 60 * 60 * 1000
+      }
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.forTimeParams
+      )
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(this.yearStartDate).getTime()
+      )
+      this.changeForm()
+    },
+    // 选择周处理函数
+    weekChange() {
+      this.forTimeParams =
+        new Date(this.weekDate).getTime() + 5 * 24 * 60 * 60 * 1000
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.forTimeParams
+      )
+      this.changeForm()
+    },
+    weekStatChange() {
+      // 组件返回默认日期是周二
+      const time = new Date(this.weekStareDate) - 24 * 60 * 60 * 1000
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(time).getTime()
+      )
+      this.changeForm()
+    },
+    changeForm() {
+      const mondValue = [this.startDate, this.endDate]
+      $emit(this, 'SectionDateTransfer', mondValue)
+    },
+    quarterStatrt(date) {
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(date).getTime()
+      )
+      this.changeForm()
+    },
+    quarterEnd(date) {
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(date).getTime()
+      )
+      this.changeForm()
+    },
+    monthChange() {
+      const year = new Date(this.monthDate).getFullYear()
+      const month = new Date(this.monthDate).getMonth() + 1
+      const solarMonth = [1, 3, 5, 7, 8, 10, 12]
+      if (
+        this.monthStareDate !== '' &&
+        this.monthStareDate !== null &&
+        this.monthStareDate !== undefined
+      ) {
+        this.startDate = this.formatTimefn(
+          this.colFieldSetting.options.format,
+          this.monthStareDate
+        )
+      }
+      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        // 是闰年
+        if (month === 2) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 28 * 24 * 60 * 60 * 1000
+        } else if (solarMonth.indexOf(month) !== -1) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 30 * 24 * 60 * 60 * 1000
+        } else {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 29 * 24 * 60 * 60 * 1000
+        }
+      } else {
+        // 不是闰年
+        if (month === 2) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 27 * 24 * 60 * 60 * 1000
+        } else if (solarMonth.indexOf(month) !== -1) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 30 * 24 * 60 * 60 * 1000
+        } else {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 29 * 24 * 60 * 60 * 1000
+        }
+      }
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.forTimeParams
+      )
+      this.changeForm()
+    },
+    monthStatChange() {
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.monthStareDate
+      )
+      this.changeForm()
+    },
+  },
+  emits: ['SectionDateTransfer'],
+}
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: calc(50% - 10px) 20px calc(50% - 10px);
+  align-items: center;
+  .intervalCenter {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+  }
+}
+</style>

package/packages/breadcrumb/index.js

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

package/packages/breadcrumb/src/breadcrumb.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group tag="span" name="breadcrumb">
+      <el-breadcrumb-item
+        v-for="(item, index) in levelListWithTitle"
+        :key="item.path"
+      >
+        <span
+          v-if="item.redirect === 'noredirect' || index == levelList.length - 1"
+          class="no-redirect"
+        >
+          {{ item.meta.title }}
+        </span>
+        <router-link v-else :to="item.redirect || item.path">
+          {{ item.meta.title }}
+        </router-link>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import * as pathToRegexp from 'path-to-regexp'
+
+export default {
+  name: 'Breadcrumb',
+  data() {
+    return {
+      levelList: null,
+    }
+  },
+  computed: {
+    levelListWithTitle() {
+      return this.levelList.filter(
+        (item) => item.meta.title !== undefined && item.meta.title !== null
+      )
+    },
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    },
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      const { params } = this.$route
+      let matched = this.$route.matched.filter((item) => {
+        if (item.name) {
+          // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+          var toPath = pathToRegexp.compile(item.path)
+          item.path = toPath(params)
+          return true
+        }
+      })
+      const first = matched[0]
+      if (first && first.name !== 'Dashboard') {
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' } }].concat(
+          matched
+        )
+      }
+      this.levelList = matched
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 10px;
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

package/packages/department-tree/index.js

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

package/packages/department-tree/src/department-tree.vue

@@ -0,0 +1,114 @@
+<template>
+	<div>
+		<el-dialog
+				:close-on-click-modal="false"
+				:title="myTitle"
+				:width="multiple ? '920px' : '509px'"
+				append-to-body
+				class="user-tree"
+				model-value
+				@close="$emit('close')"
+				@closed="$emit('closed')"
+				@open="$emit('open')"
+				@opend="$emit('opend')"
+		>
+			<inline-department-tree
+					ref="inlineDeparmentTree"
+					:check-strictly="checkStrictly"
+					:department-info="departmentInfo"
+					:height="height"
+					:multiple="multiple"
+					:search-field="searchField"
+					:select-department-info="selectDepartmentInfo"
+					:separator="separator"
+					@result="result"
+			/>
+			<template v-slot:footer>
+				<div class="dialog-footer">
+					<el-button class="button--default" size="default" @click="$emit('close')">
+						{{ $t('imatrixUIPublicModel.cancel') }}
+					</el-button>
+					<el-button size="default" type="primary" @click="selectDepartment">
+						{{ $t('imatrixUIPublicModel.sure') }}
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {$emit} from '../../utils/gogocodeTransfer'
+import InlineDepartmentTree from '../../department-tree-inline/src/department-tree-inline.vue'
+
+export default {
+	name: 'DepartmentTree',
+	components: {
+		InlineDepartmentTree,
+	},
+	props: {
+		// 是否是多选树，默认是true
+		multiple: {
+			type: Boolean,
+			default: true,
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: false,
+		},
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		departmentInfo: {
+			type: Array,
+			default: null,
+		},
+		// 弹框的标题
+		title: {
+			type: String,
+			default: null,
+		},
+		// 弹框的宽度
+		width: {
+			type: String,
+			default: '30%',
+		},
+		// 弹框的高度
+		height: {
+			type: String,
+			default: '300px',
+		},
+		// 多选部门树时，已选择部门id或部门名称或编码集合，多个之间以逗号隔开
+		selectDepartmentInfo: {
+			type: [String, Number],
+			default: null,
+		},
+		// 移除部门时，部门属性名称：id、name、code，默认是id
+		searchField: {
+			type: String,
+			default: 'id',
+		},
+		// 多选树时结果之间的分隔符，默认是逗号分隔
+		separator: {
+			type: String,
+			default: ',',
+		},
+	},
+	data() {
+		let myTitle = this.$t('imatrixUIMessage.pleaseSelectDepartment')
+		if (this.title) {
+			myTitle = this.title
+		}
+		return {
+			myTitle,
+		}
+	},
+	methods: {
+		result(selectNodeInfo) {
+			$emit(this, 'close', selectNodeInfo)
+		},
+		selectDepartment() {
+			this.$refs.inlineDeparmentTree.selectDepartment()
+		},
+	},
+	emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed'],
+}
+</script>

package/packages/department-tree-inline/index.js

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