@idooel/components 0.0.1 → 0.0.2

package/packages/composite-components/modal-table/src/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <ele-modal 
+    :title="buildTitle" 
+    v-on="assignAttrForEvents"
+    :button-group-meta="buildButtonGroupMeta"
+    :value="value"
+    :size="size">
+    <ele-tree-table-model 
+      :over-height="156"
+      v-on="treeTableListeners"
+      @on-change-table-selection="onChangeTableSelection"
+      @x:refresh-exposed="onAbstractEvent"
+      v-bind="buildMeta">
+      <template v-if="$slots['sub-center']" #sub-center>
+        <slot name="sub-center"></slot>
+      </template>
+    </ele-tree-table-model>
+  </ele-modal>
+</template>
+
+<script>
+import { type } from '@idooel/shared'
+import { CONTEXT } from '../../../utils'
+export default {
+  name: 'ele-modal-table',
+  model: {
+    event: 'change',
+    prop: 'value'
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'big'
+    },
+    meta: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      currentTableSelection: null,
+      currentExposed: {}
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    buildMeta () {
+      const { title, ...rest } = this.meta
+      return rest
+    },
+    buildTitle () {
+      return this.title || this.meta.title
+    },
+    callContext () {
+      return this[CONTEXT].call(this)
+    },
+    exposed () {
+      const mergeExposed = Object.assign({}, this.callContext.exposed, this.currentExposed)
+      return {
+        closeModal: this.closeModal,
+        currentTableSelection: this.currentTableSelection,
+        ...this.callContext,
+        exposed: { 
+          ...mergeExposed,
+          setModalTable: this.setModalTable,
+          showModalTable: this.showModalTable,
+          closeModalTable: this.closeModalTable
+        }
+      }
+    },
+    assignAttrForEvents () {
+      const events = this.footerMetaElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, ...this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events
+      }
+    },
+    treeTableListeners () {
+      const events = this.treeTableButtonGroupElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, exposed: this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events
+      }
+    },
+    footerMetaElements () {
+      const { elements = [] } = this.buttonGroupMeta
+      if (type.isFunction(elements)) {
+        return elements.call(this)
+      }
+      return elements
+    },
+    treeTableButtonGroupElements () {
+      const { buttonGroupMeta = {} } = this.meta
+      const { elements = [] } = buttonGroupMeta
+      if (type.isFunction(elements)) {
+        return elements.call(this)
+      }
+      return elements
+    },
+    buildButtonGroupMeta () {
+      return { ...this.buttonGroupMeta, elements: this.footerMetaElements }
+    },
+    buttonGroupMeta () {
+      const { footerMeta = {} } = this.meta
+      return footerMeta
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$emit('change', false)
+    },
+    setModalTable (arg = false) {
+      this.$emit('change', arg)
+    },
+    showModalTable () {
+      this.$emit('change', true)
+    },
+    closeModalTable () {
+      this.$emit('change', false)
+    },
+    onChangeTableSelection (selection) {
+      this.currentTableSelection = selection
+    },
+    onAbstractEvent (props = {}) {
+      const { exposed } = props
+      this.currentExposed = Object.assign({}, exposed)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/composite-components/modal-tree/index.js

@@ -0,0 +1,5 @@
+import EleModalTree from './src/index.vue'
+
+EleModalTree.install = Vue => Vue.component(EleModalTree.name, EleModalTree)
+
+export default EleModalTree

package/packages/composite-components/modal-tree/src/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <ele-modal :title="title" :value="value" :size="size" :buttonGroupMeta="buttonGroupMeta">
+    <ele-tree
+      :checkable="checkable"
+      :tree-data="treeData">
+    </ele-tree>
+  </ele-modal>
+</template>
+
+<script>
+export default {
+  name: 'ele-modal-tree',
+  model: {
+    event: 'input',
+    prop: 'value'
+  },
+  props: {
+    title: {
+      type: String,
+      default: '树形选择'
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    checkable: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    buttonGroupMeta: {
+      type: Object
+    },
+    contextProp: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      treeData: [
+        {
+          title: 'parent 1',
+          key: 1,
+          scopedSlots: {
+            icon: 'custom',
+            iconName: 'smile-o'
+          },
+          children: [
+            {
+              title: '2',
+              key: 2,
+              scopedSlots: {
+                icon: 'custom',
+                iconName: 'frown-o'
+              }
+            },
+            {
+              title: '3',
+              key: 3,
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/composite-components/search-area/index.js

@@ -1,5 +1,5 @@
-import EleSearchArea from './src/index.vue'
-
-EleSearchArea.install = Vue => Vue.component(EleSearchArea.name, EleSearchArea)
-
+import EleSearchArea from './src/index.vue'
+
+EleSearchArea.install = Vue => Vue.component(EleSearchArea.name, EleSearchArea)
+
 export default EleSearchArea

package/packages/composite-components/search-area/src/index.vue

@@ -1,129 +1,238 @@
-<template>
-  <div class="search-area__wrapper">
-    <a-row :gutter="gutter">
-      <a-col :span="item.span || span" v-for="(item, idx) in innerDataSource" :key="idx">
-        <div v-if="item.type == '_action'" class="search-area__item search-area--action">
-          <ele-button icon="search" type="primary" @click="handleClickSearch">查询</ele-button>
-          <ele-button style="margin-left:8px;" icon="reload" @click="handleClickReset">重置</ele-button>
-        </div>
-        <div v-else class="search-area__item">
-          <template v-if="item.type == 'Input'">
-            <Label :label="item.label"></Label>
-            <ele-input v-model="item._value"></ele-input>
-          </template>
-          <template v-else-if="item.type == 'Select'">
-            <Label :label="item.label"></Label>
-            <ele-select v-model="item._value" :data-source="item.optionList"></ele-select>
-          </template>
-          <template v-else-if="item.type == 'DatePicker'">
-            <Label :label="item.label"></Label>
-            <ele-date v-model="item._value" :format="item.format"></ele-date>
-          </template>
-        </div>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-import EleInput from '../../../input/src/index.vue'
-import EleSelect from '../../../select/src/index.vue'
-import ELeButton from '../../../button/src/index.vue'
-import EleDate from '../../../date/src/index.vue'
-import Label from './label.vue'
-import moment from 'moment'
-export default {
-  name: 'ele-search-area',
-  components: {
-    EleInput,
-    EleSelect,
-    ELeButton,
-    Label,
-    EleDate
-  },
-  props: {
-    gutter: {
-      type: [Number, Array, Object],
-      default: () => ([
-        16, 8
-      ])
-    },
-    span: {
-      type: Number,
-      default: 8
-    },
-    dataSource: {
-      type: Array,
-      required: true
-    }
-  },
-  computed: {
-    actionColOffset () {
-      return ((24 / this.span) - 1) * this.span
-    },
-    innerDataSource () {
-      return [...this.dataSource, { type: '_action' }]
-    }
-  },
-  methods: {
-    handleClickSearch () {
-      const querys = this.extractValues()
-      this.$emit('search', querys)
-    },
-    extractValues () {
-      let ret = {}
-      this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {
-        switch (item.type) {
-          case 'DatePicker':
-            ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)
-            break
-          default:
-            ret[item.name] = item._value
-            break
-        }
-      })
-      return ret
-    },
-    handleClickReset () {
-      this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {
-        switch (item.type) {
-          case 'Select':
-            this.$set(item, '_value', null)
-            break
-          case 'DatePicker':
-            this.$set(item, '_value', undefined)
-            break
-          default:
-            this.$set(item, '_value', null)
-            break
-        }
-      })
-      //TODO defaultValue
-      const querys = this.extractValues()
-      this.$emit('search', querys)
-    },
-    onChangeSelect (value, props) {
-      this.$set(props, '_value', value)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.search-area__wrapper {
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-  ::v-deep .ant-col {
-    &:last-child {
-      float: right;
-    }
-  }
-  .search-area__item {
-    height: 32px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-}
+<template>
+  <div class="search-area__wrapper">
+    <a-row :gutter="gutter">
+      <template v-for="(item, idx) in innerDataSource">
+        <a-col v-if="item._show" :span="item.span || span" :key="idx">
+          <div v-if="item.type == '_action'" class="search-area__item search-area--action">
+            <ele-button icon="search" type="primary" @click="handleClickSearch">查询</ele-button>
+            <ele-button style="margin-left:8px;" icon="reload" @click="handleClickReset">重置</ele-button>
+            <div v-if="innerDataSource.length > cuttingFormula + 1" class="expand-collapse" @click="handleClickExpandCollapse">
+              <span class="expand-collapse__text">{{ isExpand ? '收起' : '展开' }}</span>
+              <span class="expand-collapse__icon">
+                <a-icon v-if="isExpand" type="up" />
+                <a-icon v-else type="down" />
+              </span>
+            </div>
+          </div>
+          <div v-else class="search-area__item">
+            <template v-if="(item.type == 'ele-input') || (item.type == 'Input')">
+              <Label :label="item.label"></Label>
+              <ele-input v-model="item._value"></ele-input>
+            </template>
+            <template v-else-if="(item.type == 'ele-select') || (item.type == 'Select')">
+              <Label :label="item.label"></Label>
+              <ele-select v-model="item._value" :multiple="item.multiple" :data-source="item.optionList"></ele-select>
+            </template>
+            <template v-else-if="(item.type == 'ele-date') || (item.type == 'DatePicker')">
+              <Label :label="item.label"></Label>
+              <ele-date v-model="item._value" :placeholder="item.placeholder" :format="item.format"></ele-date>
+            </template>
+            <template v-else-if="item.type == 'ele-date-range'">
+              <Label :label="item.label"></Label>
+              <ele-date-range v-model="item._value" :format="item.format" :show-time="item.showTime"></ele-date-range>
+            </template>
+          </div>
+        </a-col>
+      </template>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import Label from './label.vue'
+import moment from 'moment'
+import { parse } from '@idooel/expression'
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-search-area',
+  components: {
+    Label
+  },
+  props: {
+    gutter: {
+      type: [Number, Array, Object],
+      default: () => ([
+        16, 8
+      ])
+    },
+    span: {
+      type: Number,
+      default: 8
+    },
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isExpand: false
+    }
+  },
+  computed: {
+    cuttingFormula () {
+      return (24 / this.span - 1)
+    },
+    buildDataSource () {
+      return this.controlDisplayByFormula(this.mapDefaultValueToValue())
+    },
+    innerDataSource () {
+      return [ ...this.buildDataSource, { type: '_action', _show: true }]
+    }
+  },
+  created() {
+    const querys = this.extractValues()
+    this.$emit('search', querys)
+  },
+  methods: {
+    controlDisplayByFormula (dataSource = []) {
+      if (this.isExpand) {
+        dataSource.forEach(item => {
+          this.$set(item, '_show', true)
+        })
+      } else {
+        dataSource.forEach((item, idx) => {
+          if (idx < this.cuttingFormula) {
+            this.$set(item, '_show', true)
+          } else {
+            this.$set(item, '_show', false)
+          }
+        })
+      }
+      return dataSource
+    },
+    buildDefaultValue (arg) {
+      if (type.notStr(arg)) return arg
+      if (!arg || arg.charAt(0) !== '_') return arg
+      return parse(arg, {
+        _route: this.$route.query
+      })
+    },
+    mapDefaultValueToValue () {
+      this.dataSource.forEach(props => {
+        this.$set(props, '_show', this.isExpand)
+        if (props.defaultValue) {
+          if (type.isFunction(props.defaultValue)) {
+            const ret = props.defaultValue.call(this)
+            this.$set(props, '_value', this.buildDefaultValue(ret))
+          } else {
+            this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))
+          }
+        }
+      })
+      return this.dataSource
+    },
+    handleClickExpandCollapse () {
+      this.isExpand = !this.isExpand
+    },
+    handleClickSearch () {
+      const querys = this.extractValues()
+      this.$emit('search', querys)
+    },
+    buildMapto (mapTo = [], dataSource) {
+      const [ startField, endField ] = mapTo
+      const [ startValue, endValue ] = dataSource || [null, null]
+      return {
+        [startField]: startValue,
+        [endField]: endValue
+      }
+    },
+    extractValues () {
+      let ret = {}
+      this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {
+        switch (item.type) {
+          case 'DatePicker':
+            ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)
+            break
+          case 'ele-date-range':
+            if (item.mapTo) {
+              Object.assign(ret, this.buildMapto(item.mapTo, item._value))
+            } else {
+              ret[item.name] = (item._value || []).join(',')
+            }
+            break
+          default:
+            ret[item.name] = item._value
+            break
+        }
+      })
+      return ret
+    },
+    cleanValues () {
+      this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {
+        const { defaultValue } = item
+        switch (item.type) {
+          case 'Select':
+            defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))
+            !defaultValue && this.$set(item, '_value', null)
+            break
+          case 'DatePicker':
+            defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))
+            !defaultValue && this.$set(item, '_value', undefined)
+            break
+          case 'ele-date-range':
+            defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))
+            !defaultValue && this.$set(item, '_value', [])
+            break
+          default:
+            defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))
+            !defaultValue && this.$set(item, '_value', null)
+            break
+        }
+      })
+    },
+    handleClickReset () {
+      this.cleanValues()
+      //TODO defaultValue
+      const querys = this.extractValues()
+      this.$emit('search', querys)
+    },
+    onChangeSelect (value, props) {
+      this.$set(props, '_value', value)
+    }
+  },
+  destroyed () {
+    this.cleanValues()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-area__wrapper {
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  ::v-deep .ant-col {
+    &:last-child {
+      float: right;
+    }
+  }
+  .search-area__item {
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &.search-area--action {
+      justify-content: end;
+    }
+    .expand-collapse {
+      margin-left: 8px;
+      height: 32px;
+      padding: 4px 16px;
+      color: var(--idooel-primary-color);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      .expand-collapse__text {
+        font-size: 14px;
+      }
+      .expand-collapse__icon {
+        font-size: 16px;
+        margin-left: 8px;
+      }
+    }
+  }
+}
 </style>