@idooel/components 0.0.1 → 0.0.2

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

@@ -1,36 +1,36 @@
-<template>
-  <div class="g-search__label">
-    <span class="label__title">{{ label }}</span>
-    <span class="label__suffix">：</span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-search__label {
-  /* width: 69px; */
-  flex-basis: 69px;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  .label__title, .label__suffix {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.88);
-    white-space: nowrap;
-  }
-  .label__suffix {
-    margin-left: 4px;
-  }
-}
+<template>
+  <div class="g-search__label">
+    <span class="label__title">{{ label }}</span>
+    <span class="label__suffix">：</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-search__label {
+  /* width: 69px; */
+  flex-basis: 69px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .label__title, .label__suffix {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.88);
+    white-space: nowrap;
+  }
+  .label__suffix {
+    margin-left: 4px;
+  }
+}
 </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/index.js

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

package/packages/date/src/index.vue

@@ -1,40 +1,113 @@
-<template>
-  <a-date-picker 
-    style="width: 100%;" 
-    mode="year"
-    :open="open"
-    :value="value"
-    @focus="onFocus"
-    @panelChange="onPanelChange"
-    :format="format">
-  </a-date-picker>
-</template>
-
-<script>
-export default {
-  name: 'ele-date',
-  props: {
-    value: {
-      type: Object
-    },
-    format: {
-      type: String,
-      default: 'YYYY/MM/DD'
-    }
-  },
-  data () {
-    return {
-      open: false
-    }
-  },
-  methods: {
-    onFocus () {
-      this.open = true
-    },
-    onPanelChange (value, mode) {
-      this.$emit('input', value)
-      this.open = false
-    }
-  }
-}
-</script>
+<template>
+  <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: [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 () {
+    return {
+      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: {
+    onChange (_, dataString) {
+      this.$emit('input', dataString)
+      this.$emit('change', dataString)
+    },
+    onPanelChange (value, mode) {
+      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>
+<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