simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdFlow/src/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div ref="edFlow" class="ed-flow">
+    <template v-for="(date, index) in dateArray">
+      <ed-flow-item :key="index" :end="end || nowDate"
+                    :flow-item="date"
+                    :notDate="getNotDate"
+                    :sort="index+1"
+                    :start="start" :stopDate="getStopDate"
+                    :total="dateArray.length"
+                    :width="itemWidth"></ed-flow-item>
+    </template>
+  </div>
+</template>
+
+<script>
+import EdFlowItem                                             from "./EdFlowItem";
+import {getDate, getMonth, getNowDate, monthNumber} from "../../../tools/date-format";
+
+export default {
+  name: "EdFlow",
+  components: {EdFlowItem},
+  props: {
+    // 无数据描述
+    tips: {
+      type: String,
+      default: '暂无数据'
+    },
+    // 开始日期
+    start: {
+      type: String,
+      default: ''
+    },
+    // 结束日期
+    end: {
+      type: String,
+      default: ''
+    },
+    // 数据信息
+    data: {
+      type: Object,
+      default: () => {
+      }
+    },
+    // 数据映射
+    map: {
+      type: Object,
+      default: () => {
+        return {
+          stop: 'stopDate',
+          nots: "notDate"
+        }
+      }
+    },
+  },
+  data() {
+    return {
+      dateArray: [],
+      itemWidth: 0
+    }
+  },
+  computed: {
+    total() {
+      return getDate(this.end || this.nowDate).getFullYear() - getDate(this.start).getFullYear() + 1
+    },
+    years() {
+      let years = []
+      for (let i = 0; i < this.total; i++) {
+        years.push(getDate(this.start).getFullYear() + i)
+      }
+      return years
+    },
+    nowDate() {
+      return getNowDate()
+    },
+
+    // 计算总月份数量
+    months() {
+      return monthNumber(this.start, this.end)
+    },
+    // 无数据时间段
+    getStopDate() {
+      return this.data && this.data[this.map.stop] ? this.data[this.map.stop] : []
+    },
+    // 中断日期
+    getNotDate() {
+      return this.data && this.data[this.map.nots] ? this.data[this.map.nots] : []
+    },
+  },
+  mounted() {
+    //测试，第一个参数为数组，第二个为份数
+    this.getTimeSlot()
+  },
+  methods: {
+    // 获取每行数据
+    getTimeSlot() {
+      let startM = Number(getMonth(this.start))
+      let items = []
+      let y = 0
+      for (let i = 0; i < this.months; i++) {
+        if (startM <= 12) {
+          items.push({
+            label: this.years[y],
+            value: startM
+          })
+          if (startM === 12) y++
+          startM++
+        } else {
+          startM = 1
+        }
+      }
+
+      const result = [];
+      for (let i = 0; i < items.length; i += 12) {
+        result.push(items.slice(i, i + 12));
+      }
+
+      this.dateArray = result
+      this.itemWidth = Number((this.$refs.edFlow.offsetWidth / 12).toFixed(2))
+    },
+    // 筛选年份
+    Includes(arr) {
+      return arr.map(i => {
+        return getDate(i).getFullYear()
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ed-flow {
+  padding-top: 16px;
+
+  //.ed-flow-item {
+  //  height: 60px;
+  //
+  //  .ed-flow-item--box {
+  //    height: 10px;
+  //    background: #1376FB;
+  //  }
+  //}
+}
+
+.ed-flow-none {
+  text-align: center;
+  font-size: 15px;
+}
+</style>

package/src/components/ed-base-vue/package/EdForm/index.js

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

package/src/components/ed-base-vue/package/EdForm/src/EdForm.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="ed-form">
+    <el-form ref="elForm" :model="model" :rules="rules" v-bind="$props">
+      <!-- 默认插槽作为表单项 -->
+      <slot/>
+
+      <!-- 自定义插槽作为表单项 -->
+      <slot :formDesc="formDesc" :model="model" :props="$props" name="form-content">
+        <template v-for="(formItem, field) of formDesc">
+          <!-- 自定义内容层 -->
+          <slot :data="model[formItem.prop]" :desc="getFormItem(formItem)" :model="model"
+                :name="formItem.prop+'Wrapper'"
+                :props="$props">
+            <el-form-item v-show="formItem.hasOwnProperty('isShow') ? formItem.isShow : true"
+                          v-bind="getFormItem(formItem)">
+              <template v-if="formItem.hasOwnProperty('tooltip')" #label>
+                <span>{{ getFormItem(formItem).label }}</span>
+                <el-tooltip class="item" effect="dark" placement="bottom">
+                  <div slot="content">{{ formItem.tooltip }}</div>
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </template>
+
+
+              <!-- 具名 作用域插槽(用于用户自定义显示) -->
+              <slot :data="model[formItem.prop]" :desc="formItem" :model="model" :name="formItem.prop"
+                    :props="$props">
+                <!-- children==array -->
+                <template v-if="getVarType(formItem.children) === 'array'">
+                  <template v-for="(child, index) in formItem.children">
+                    <ed-form-item :key="index" v-model="model[child.prop]" :formItem="child" @input="setValue(child.prop, $event)"></ed-form-item>
+                  </template>
+                </template>
+
+                <!-- children==object -->
+                <template v-else-if="getVarType(formItem.children) === 'object'">
+                  <ed-form-item v-model="model[formItem.prop]" :formItem="formItem.children" @input="setValue(formItem.prop, $event)"></ed-form-item>
+                </template>
+              </slot>
+
+              <!-- children==string -->
+              <template v-if="getVarType(formItem.children) === 'string'">{{ formItem.children }}</template>
+            </el-form-item>
+          </slot>
+          <!-- 按钮区域 -->
+          <el-form-item v-if="showBtn(formItem)" :key="field+'btn'">
+            <slot :btns="formItem.btns" name="form-btn">
+              <el-button v-for="(btn, index) of formItem.btns" :key="index" v-bind="btn.attrs" @click="btn.click">{{ btn.text }}</el-button>
+            </slot>
+          </el-form-item>
+        </template>
+      </slot>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import props        from './Props'
+import EdFormItem   from "./components/EdFormItem";
+import {getVarType} from "../../../tools/utils";
+
+/**
+ * 基础表单组件
+ *
+ * - 示例
+ *
+ * ```vue
+ *
+ * <ed-form ref="ElsForm" v-model="elsFormData" :form-desc="elsFormDesc" :form-rules="elsFormRules">
+ * </ed-form>
+ * ```
+ *
+ * [](./EdFormProps.md ':include')
+ *
+ */
+export default {
+  name: "EdForm",
+  props: props,
+  components: {EdFormItem},
+  model: {
+    prop: 'model',
+    event: "input"
+  },
+  computed: {
+    showBtn() {
+      return (formItem) => {
+        let isBtns = Object.prototype.hasOwnProperty.call(formItem, 'btns')
+        let isScopedSlots = Object.prototype.hasOwnProperty.call(this.$scopedSlots, 'form-btn')
+        let isSlot = Object.prototype.hasOwnProperty.call(this.$slots, 'form-btn')
+        return isScopedSlots || isSlot || isBtns
+      }
+    },
+    getFormItem() {
+      return (formItem) => {
+        let item = JSON.parse(JSON.stringify(formItem))
+        delete item.children
+        delete item.tooltip
+        return item
+      }
+    },
+  },
+  methods: {
+    /**
+     * @private
+     */
+    getVarType,
+
+    /**
+     * 设置值
+     * @param field
+     * @param val
+     */
+    setValue(field, val) {
+      this.$set(this.model, field, val)
+      this.$emit('input', this.model)
+    },
+
+    /**
+     * 验证表单
+     * @returns {Promise<unknown>}
+     */
+    validate(callback) {
+      return this.$refs.elForm.validate(callback)
+    },
+
+    /**
+     * @name validateField
+     * @param props
+     * @param callback
+     * @description 对部分表单字段进行校验的方法
+     */
+    validateField(props, callback) {
+      this.$refs.elForm.validateField(props, callback)
+    },
+
+    /**
+     * 获取数据
+     * @param isValidate
+     * @returns {Promise<unknown>}
+     */
+    getFormData(isValidate = false) {
+      // eslint-disable-next-line no-async-promise-executor
+      return new Promise(async (resolve, reject) => {
+        try {
+          isValidate ? await this.$refs.elForm.validate() : null;
+          resolve(this.model)
+        } catch (err) {
+          reject(err)
+        }
+      })
+    },
+    /**
+     * 重置表单
+     */
+    resetFields() {
+      this.$refs.elForm.resetFields()
+    },
+
+    /**
+     * @name clearValidate
+     * @description 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+     */
+    clearValidate() {
+      this.$refs.elForm.clearValidate()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+</style>

package/src/components/ed-base-vue/package/EdForm/src/Props.js

@@ -0,0 +1,33 @@
+/**
+ * EdForm组件属性
+ */
+export default {
+    /** Data of form component */
+    model: {type: Object, default: () => {}},
+    /** Validation rules of form */
+    rules: {type: Object, default: () => {}},
+    /** Whether the form is inline */
+    inline: {type: Boolean, default: false},
+    /** Whether the form is disabled */
+    disabled: {type: Boolean, default: false},
+    /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width  right/left/top */
+    labelPosition: {type: String, default: 'left'},
+    /** 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 */
+    labelWidth: {type: String, default: 'auto'},
+    /** 表单域标签的后缀 */
+    labelSuffix: {type: String, default: ''},
+    /** Whether to show the error message */
+    showMessage: {type: Boolean, default: true},
+    /** Whether to display the error message inline with the form item */
+    inlineMessage: {type: Boolean, default: false},
+    /** Whether to display an icon indicating the validation result */
+    statusIcon: {type: Boolean, default: false},
+    /** Whether to trigger validation when the `rules` prop is changed */
+    validateOnRuleChange: {type: Boolean, default: true},
+    /** Controls the size of components in this form */
+    size: {type: String, default: 'small'},
+    // 是否隐藏必填字段的标签旁边的红色星号
+    hideRequiredAsterisk: {type: Boolean, default: false},
+    // 表单描述
+    formDesc: {type: Array, required: true},
+}

package/src/components/ed-base-vue/package/EdForm/src/components/EdFormItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <component :is="formItem.tags" :value="value" :style="formItem.style"
+             v-bind="formItem.attrs" @input="setValue">
+    <template v-if="formItem.options">
+      <ed-option-slot v-for="(option, index) of formItem.options"
+                   :key="index"
+                   :data="option"
+                   :optionAttrs="option.attrs"
+                   :tags="formItem.tags"
+                   ></ed-option-slot>
+    </template>
+  </component>
+</template>
+
+<script>
+export default {
+  name: "EdFormItem",
+  props: {
+    formItem: {
+      type: Object
+    },
+    value: ""
+  },
+  methods:{
+    setValue(val){
+      this.$emit('input', val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ed-base-vue/package/EdIcons/index.js

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