@idooel/components 0.0.1 → 0.0.2-beta.10

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/src/index.vue

@@ -1,45 +1,52 @@
 <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>
+      <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" :init="item.init" :mode="item.mode" :code="item.code" :params="item.params" :url="item.url" :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 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'
+import { parse } from '@idooel/expression'
+import { type } from '@idooel/shared'
 export default {
   name: 'ele-search-area',
   components: {
-    EleInput,
-    EleSelect,
-    ELeButton,
-    Label,
-    EleDate
+    Label
   },
   props: {
     gutter: {
@@ -57,19 +64,79 @@ export default {
       required: true
     }
   },
+  data() {
+    return {
+      isExpand: false
+    }
+  },
   computed: {
-    actionColOffset () {
-      return ((24 / this.span) - 1) * this.span
+    cuttingFormula () {
+      return (24 / this.span - 1)
+    },
+    buildDataSource () {
+      return this.controlDisplayByFormula(this.mapDefaultValueToValue())
     },
     innerDataSource () {
-      return [...this.dataSource, { type: '_action' }]
+      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 => {
@@ -77,6 +144,13 @@ export default {
           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
@@ -84,20 +158,31 @@ export default {
       })
       return ret
     },
-    handleClickReset () {
+    cleanValues () {
       this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {
+        const { defaultValue } = item
         switch (item.type) {
           case 'Select':
-            this.$set(item, '_value', null)
+            defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))
+            !defaultValue && this.$set(item, '_value', null)
             break
           case 'DatePicker':
-            this.$set(item, '_value', undefined)
+            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:
-            this.$set(item, '_value', null)
+            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)
@@ -105,6 +190,9 @@ export default {
     onChangeSelect (value, props) {
       this.$set(props, '_value', value)
     }
+  },
+  destroyed () {
+    this.cleanValues()
   }
 }
 </script>
@@ -124,6 +212,27 @@ export default {
     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>

package/packages/composite-components/select-entity-modal-table/index.js

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

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

@@ -0,0 +1,172 @@
+<template>
+  <section class="select__entity--modal-table">
+    <ele-select-entity :multiple="multiple" :maxCount="maxCount" :value="entityValue" @close="onClosSelectEntity" @evoke="evokeSelectEntity"></ele-select-entity>
+    <ele-modal-table 
+      @handleEntitySave="handleEntitySave" 
+      @handleEntityCancel="handleEntityCancel" 
+      :meta="buildMeta" 
+      v-model="showModalTableValue">
+    </ele-modal-table>
+  </section>
+</template>
+
+<script>
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-select-entity-modal-table',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [Array, Object],
+      default: () => []
+    },
+    title: {
+      type: String
+    },
+    maxCount: {
+      type: Number
+    },
+    tableMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    returnValues: {
+      type: [String, Object],
+      default: () => ({})
+    },
+    replaceFields: {
+      type: Object
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      showModalTableValue: false,
+      entityValue: [],
+      emitValue: void 0
+    }
+  },
+  watch: {
+    value: {
+      handler(innerValue) {
+        const _innerValue = type.isArray(innerValue) ? innerValue : [innerValue]
+        const { label, value } = this.replaceFields
+        this.entityValue = _innerValue.map(item => {
+          return {
+            label: item[label],
+            value: item[value]
+          }
+        })
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    buildMeta () {
+      const { tableMeta } = this.tableMeta
+      Object.assign(tableMeta, { multiple: this.multiple })
+      return {
+        ...this.tableMeta,
+        footerMeta: {
+          elements: (ctx) => [
+            {
+              label: '确定',
+              type: 'primary',
+              key: 'save',
+              eventName: 'handleEntitySave'
+            },
+            {
+              label: '返回',
+              key: 'cancel',
+              eventName: 'handleEntityCancel'
+            }
+          ]
+        }
+      }
+    }
+  },
+  created () {
+    this.emitValue = this.multiple ? [] : void 0
+  },
+  methods: {
+    handleEntityCancel () {
+      this.showModalTableValue = false
+    },
+    buildEntityValueForEmitObjectReturnValues (dataSource = []) {
+      const keys = Object.keys(this.returnValues)
+      const ret = dataSource.map(props => {
+        const ret = {}
+        keys.forEach(key => {
+          ret[key] = props[this.returnValues[key]]
+        })
+        return ret
+      })
+      return this.multiple ? ret : ret[0]
+    },
+    emitEntityValue (dataSource = []) {
+      this.emitValue = this.value
+      if (this.multiple) {
+        if (type.isStr(this.returnValues)) {
+          const ret = dataSource.map(props => {
+            return props[this.returnValues]
+          })
+          this.emitValue.push(...ret)
+        } else if (type.isObject(this.returnValues)) { 
+          this.emitValue.push(...this.buildEntityValueForEmitObjectReturnValues(dataSource))
+        }
+      } else {
+        if (type.isStr(this.returnValues)) {
+          this.emitValue = dataSource ? dataSource[this.returnValues] : ''
+        } else if (type.isObject(this.returnValues)) { 
+          this.emitValue = dataSource ? this.buildEntityValueForEmitObjectReturnValues([dataSource]) : ''
+        }
+      }
+      this.$emit('change', this.emitValue)
+    },
+    onClosSelectEntity (props) {
+      this.entityValue = this.entityValue.filter(item => item.value !== props.value)
+      if (this.multiple) {
+        if (type.isStr(this.returnValues)) {
+          this.emitValue = this.emitValue.filter(item => item !== props.value)
+        } else if (type.isObject(this.returnValues)) {
+          const reverseReturnValues = Object.fromEntries(Object.entries(this.returnValues).map(([key, value]) => [value, key]))
+          const primaryKey = reverseReturnValues[this.replaceFields.value]
+          this.emitValue = this.emitValue.filter(item => item[primaryKey] !== props.value)
+        }
+      } else {
+        if (type.isStr(this.returnValues)) {
+          this.emitValue = ''
+        } else if (type.isObject(this.returnValues)) {
+          this.emitValue = {}
+        }
+      }
+      this.$emit('change', this.emitValue)
+    },
+    handleEntitySave (props) {
+      const { exposed = {} } = props
+      const { currentTableSelection } = exposed
+      const currentTableSelectionRet = type.isArray(currentTableSelection) ? currentTableSelection : [currentTableSelection]
+      this.entityValue = currentTableSelectionRet.map(item => {
+        return {
+          label: item[this.replaceFields.label],
+          value: item[this.replaceFields.value]
+        }
+      })
+      this.emitEntityValue(currentTableSelection)
+      this.showModalTableValue = false
+    },
+    showModalTable () {
+      this.showModalTableValue = true
+    },
+    evokeSelectEntity () {
+      this.showModalTable()
+    }
+  }
+}
+</script>

package/packages/date/src/index.vue

@@ -1,25 +1,76 @@
 <template>
-  <a-date-picker 
-    style="width: 100%;" 
-    mode="year"
-    :open="open"
-    :value="value"
-    @focus="onFocus"
-    @panelChange="onPanelChange"
-    :format="format">
-  </a-date-picker>
+  <div class="ele-date__wrapper">
+    <a-date-picker 
+      style="width: 100%;" 
+      :mode="modeValue"
+      v-if="modeValue == 'year'"
+      :open="open"
+      :disabled="disabled"
+      :value="value"
+      :placeholder="placeholder"
+      :show-time="showTime"
+      :show-today="showToday"
+      :valueFormat="innerValueFormat"
+      @panelChange="onPanelChange"
+      @openChange="openChange"
+      @change="onChange"
+      :format="format">
+    </a-date-picker>
+    <a-date-picker 
+      v-else
+      style="width: 100%;"
+      :placeholder="placeholder"
+      :open="open"
+      :disabled="disabled"
+      :value="value"
+      :show-time="showTime"
+      :show-today="showToday"
+      :valueFormat="innerValueFormat"
+      @panelChange="onPanelChange"
+      @openChange="openChange"
+      @change="onChange"
+      :format="format">
+    </a-date-picker>
+  </div>
 </template>
 
 <script>
+import moment from 'moment'
 export default {
   name: 'ele-date',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
   props: {
     value: {
-      type: Object
+      type: [String, Object]
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     },
     format: {
       type: String,
       default: 'YYYY/MM/DD'
+    },
+    mode: {
+      type: String
+    },
+    valueFormat: {
+      type: String
+    },
+    showTime: {
+      type: [Boolean, Object],
+      default: true
+    },
+    showToday: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: '请选择日期'
     }
   },
   data () {
@@ -27,14 +78,36 @@ export default {
       open: false
     }
   },
+  computed: {
+    innerValueFormat () {
+      if (this.valueFormat) return this.valueFormat
+      return this.format
+    },
+    modeValue () {
+      if (this.mode) return this.mode
+      if (this.format === 'YYYY') return 'year'
+      return 'date'
+    }
+  },
   methods: {
-    onFocus () {
-      this.open = true
+    onChange (_, dataString) {
+      this.$emit('input', dataString)
+      this.$emit('change', dataString)
     },
     onPanelChange (value, mode) {
-      this.$emit('input', value)
+      if (this.modeValue !== 'year') return
+      this.$emit('input', moment(value).format(this.format))
+      this.$emit('change', moment(value).format(this.format))
       this.open = false
+    },
+    openChange (open) {
+      this.open = open
     }
   }
 }
-</script>
+</script>
+<style lang="scss" scoped>
+.ele-date__wrapper {
+  width: 100%;
+}
+</style>

package/packages/date-range/index.js

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

package/packages/date-range/src/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <a-range-picker 
+    style="width: 100%;"
+    :disabled="disabled"
+    :show-time="showTime"
+    :value="value" 
+    :format="format" 
+    @change="onChange">
+  </a-range-picker>
+</template>
+
+<script>
+export default {
+  name: 'ele-date-range',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showTime: {
+      type: Object
+    },
+    format: {
+      type: Array,
+      default: () => ['YYYY-MM-DD', 'YYYY-MM-DD']
+    },
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    onChange (date, dateString) {
+      this.$emit('change', dateString)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+import { models } from '../..';

package/packages/form/index.js

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