@idooel/components 0.0.1-beta.1 → 0.0.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",
@@ -18,7 +18,8 @@
   "peerDependencies": {
     "@idooel/shared": "workspace:^0.0.1",
     "ant-design-vue": "1.7.8",
-    "moment": "^2.30.1"
+    "moment": "^2.30.1",
+    "vue-upload-component": "^2.8.23"
   },
   "devDependencies": {
     "@babel/core": "7.17.9",

package/packages/attachment/src/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    attachment
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-attachment'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/batch-export/index.js

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

package/packages/batch-export/src/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    export
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-batch-export'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/checkbox/index.js

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

package/packages/checkbox/src/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <a-checkbox-group :options="dataSource" :disabled="disabled" :defaultValue="value" @change="onChange"></a-checkbox-group>
+</template>
+
+<script>
+export default {
+  name: 'ele-checkbox',
+  props: {
+    value: {
+      type: Array
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ant-checkbox-group {
+  text-align: left;
+  line-height: 32px;
+}
+.has-error {
+  .ant-checkbox-group {
+    ::v-deep .ant-checkbox-wrapper {
+      color: var(--idooel-form-border-err-color);
+    }
+    ::v-deep .ant-checkbox-inner {
+      border-color: var(--idooel-form-border-err-color);
+    }
+  }
+}
+</style>

package/packages/composite-components/button-group/src/index.vue

@@ -27,11 +27,6 @@ export default {
       type: Array,
       default: () => []
     }
-  },
-  methods: {
-    handleClick (props) {
-      this.$emit('click', props)
-    }
   }
 }
 </script>

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

@@ -1,33 +1,35 @@
 <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 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>
+      <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 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>
-        <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>
+          <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>
     </a-row>
   </div>
 </template>
@@ -39,6 +41,7 @@ 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'
 export default {
   name: 'ele-search-area',
   components: {
@@ -66,26 +69,54 @@ export default {
   },
   data() {
     return {
-      isExpand: false,
-      collapseDataSource: []
+      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.isExpand ? [ ...this.dataSource, { type: '_action' }] :  [ ...this.collapseDataSource, { type: '_action' }]
+      return [ ...this.buildDataSource, { type: '_action', _show: true }]
     }
   },
-  created() {
-    this.collapseDataSource = this.dataSource.slice(0, (24 / this.span - 1))
-  },
+  created() {},
   methods: {
-    handleClickExpandCollapse () {
-      if (!this.isExpand) {
-        this.collapseDataSource = this.dataSource.slice(0, (24 / this.span - 1))
+    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 (!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) {
+          this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))
+        }
+      })
+      return this.dataSource
+    },
+    handleClickExpandCollapse () {
       this.isExpand = !this.isExpand
     },
     handleClickSearch () {
@@ -108,15 +139,19 @@ export default {
     },
     handleClickReset () {
       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
           default:
-            this.$set(item, '_value', null)
+            defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))
+            !defaultValue && this.$set(item, '_value', null)
             break
         }
       })

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

package/packages/form/src/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="ele__form--wrapper">
+    <a-form :form="form" layout="vertical" class="ant-advanced-search-form">
+      <a-row :gutter="24">
+        <a-col :span="ele.span" v-for="ele in elements" :key="ele.name">
+          <template v-if="ele.type == 'Input'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-input :max-length="ele.maxLength" v-decorator="[ele.name, { rules: ele.rules }]" style="width:100%;"></ele-input>
+            </a-form-item>
+          </template>
+          <template v-else-if="ele.type == 'Textarea'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-textarea 
+                @on-change="onChangeTextarea($event, ele)"
+                :max-length="ele.maxLength"
+                :autosize="ele.autosize"
+                :allow-clear="ele.allowClear"
+                :placeholder="ele.placeholder"
+                v-decorator="[ele.name, { rules: ele.rules }]"
+                style="width:100%;">
+              </ele-textarea>
+            </a-form-item>
+          </template>
+          <template v-else-if="ele.type == 'Select'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-select :data-source="ele.optionList" v-decorator="[ele.name, { rules: ele.rules }]" style="width:100%;"></ele-select>
+            </a-form-item>
+          </template>
+          <template v-else-if="ele.type == 'ele-upload'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-upload v-decorator="[ele.name, { rules: ele.rules }]" style="width:100%;"></ele-upload>
+            </a-form-item>
+          </template>
+          <template v-else-if="ele.type == 'SelectEntity'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-select-entity v-decorator="[ele.name, { rules: ele.rules }]" style="width:100%;"></ele-select-entity>
+            </a-form-item>
+          </template>
+          <template v-else-if="ele.type == 'InputNumber'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-input-number :precision="ele.precision" v-decorator="[ele.name, { rules: ele.rules }]" v-bind="ele.props" style="width:100%;"></ele-input-number>
+            </a-form-item>
+          </template>
+          <template v-else-if="ele.type == 'Checkbox'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-checkbox :data-source="ele.optionList" v-decorator="[ele.name, { rules: ele.rules }]" style="width:100%;"></ele-checkbox>
+            </a-form-item>
+          </template>
+          <template v-else-if="ele.type == 'Radio'">
+            <a-form-item :label="`${ele.label}：`">
+              <ele-radio :data-source="ele.optionList" v-decorator="[ele.name, { rules: ele.rules }]" style="width:100%;"></ele-radio>
+            </a-form-item>
+          </template>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import EleSelect from '../../select/src/index.vue'
+import EleInput from '../../input/src/index.vue'
+import EleTextarea from '../../textarea/src/index.vue'
+import EleUpload from '../../upload/src/index.vue'
+import EleSelectEntity from '../../select-entity/src/index.vue'
+import EleInputNumber from '../../input-number/src/index.vue'
+import EleCheckbox from '../../checkbox/src/index.vue'
+import EleRadio from '../../radio/src/index.vue'
+export default {
+  name: 'ele-form',
+  components: {
+    EleSelect,
+    EleInput,
+    EleTextarea,
+    EleUpload,
+    EleSelectEntity,
+    EleInputNumber,
+    EleCheckbox,
+    EleRadio
+  },
+  props: {
+    elements: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      some: '1',
+      form: this.$form.createForm(this, { name: 'coordinated' })
+    }
+  },
+  methods: {
+    onChangeTextarea (value, props) {
+      this.setFieldsValue({ [props.name]: value })
+    },
+    validateFields () {
+      let ret = false
+      this.form.validateFields((error, values) => {
+        ret = !error
+      })
+      return ret
+    },
+    setFieldsValue (props = {}) {
+      this.form.setFieldsValue(props)
+    },
+    getFieldsValue () {
+      return this.form.getFieldsValue()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele__form--wrapper {
+  .ant-form-item {
+  }
+}
+</style>

package/packages/form-model/index.js

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

package/packages/form-model/src/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="form__model--wrapper">
+    <div class="form-model__title">
+      {{ title }}
+    </div>
+    <div class="form-model__content">
+      <ele-form :ref="formRef" :elements="elements"></ele-form>
+    </div>
+    <div class="form-model__footer">
+      <ele-button-group v-on="assignAttrForEvents" :data-source="footerElements"></ele-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
+import { BUILT_IN_EVENT_NAMES } from '../../utils'
+import { v4 as uuidv4 } from 'uuid'
+import { net } from '@idooel/shared'
+export default {
+  name: 'ele-form-model',
+  components: {
+    EleButtonGroup
+  },
+  props: {
+    title: {
+      type: String
+    },
+    formMeta: {
+      type: Object
+    },
+    footerMeta: {
+      type: Object
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    formRef () {
+      return uuidv4()
+    },
+    assignAttrForEvents () {
+      const events = this.footerElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],
+        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]
+      }
+    },
+    elements () {
+      const { elements } = this.formMeta
+      return elements
+    },
+    preRequest () {
+      const { preRequest } = this.formMeta
+      return preRequest
+    },
+    infoRequest () {
+      const { infoRequest } = this.formMeta
+      return infoRequest
+    },
+    submitRequest () {
+      const { submitRequest } = this.formMeta
+      return submitRequest
+    },
+    footerElements () {
+      const { elements } = this.footerMeta
+      return elements.call(this)
+    },
+    formModels () {
+      return this.$refs[this.formRef].getFieldsValue()
+    }
+  },
+  methods: {
+    async submitRequestTrigger () {},
+    async infoRequestTrigger () {},
+    async preRequestTrigger () {
+      const { url, requestType = 'GET', fieldMap = {} } = this.preRequest
+      if (!url) return
+      await net[requestType.toLowerCase()](url, {})
+    },
+    setValueForField (props) {
+      this.$refs[this.formRef].setFieldsValue(props)
+    },
+    [BUILT_IN_EVENT_NAMES.SUBMIT] (props) {
+      const status = this.$refs[this.formRef].validateFields()
+      console.log('status', status)
+      if (status) {
+        console.log('status', this.formModels)
+      } else {
+        console.log('error')
+      }
+    },
+    [BUILT_IN_EVENT_NAMES.CANCEL] (props) {
+      console.log('inner CANCEL', props)
+    }
+  },
+  async mounted() {
+    await this.preRequestTrigger()
+    await this.infoRequestTrigger()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form__model--wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .form-model__title {
+    height: 56px;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--idooel-form-title-border-color);
+  }
+  .form-model__content {
+    padding: 16px;
+  }
+  .form-model__footer {
+    width: 100%;
+    height: 64px;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+  }
+}
+</style>

package/packages/icon/index.js

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

package/packages/icon/src/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <a-icon
+    v-if="isAntIcon"
+    :type="type"
+    :theme="theme">
+  </a-icon>
+  <i :class="['iconfont', type]" v-else></i>
+</template>
+
+<script>
+export default {
+  name: 'ele-icon',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    theme: {
+      type: String
+    }
+  },
+  computed: {
+    isAntIcon() {
+      const prefix = this.type.slice(0, 5)
+      if (prefix === 'icon-') {
+        return false
+      }
+      return true
+    }
+  }
+}
+</script>

package/packages/index.js

@@ -5,11 +5,22 @@ import EleSelect from './select/index.js'
 import EleTable from './table/index.js'
 import EleTree from './tree/index.js'
 import EleTpl from './tpl/index.js'
+import EleForm from './form/index.js'
+import GText from './text/index.js'
+import EleUpload from './upload/index.js'
+import EleSelectEntity from './select-entity/index.js'
+import EleIcon from './icon/index.js'
+import EleInputNumber from './input-number/index.js'
+import EleModal from './modal/index.js'
+import EleCheckbox from './checkbox/index.js'
+import EleRadio from './radio/index.js'
+import EleBatchExport from './batch-export/index.js'
 
 import EleButtonGroup from './composite-components/button-group/index.js'
 import EleSearchArea from './composite-components/search-area/index.js'
 
 import EleTreeTableModel from './tree-table-model/index.js'
+import EleFormPageModel from './form-model/index.js'
 
 const compositeComponents = [
   EleButtonGroup,
@@ -17,7 +28,8 @@ const compositeComponents = [
 ]
 
 export const models = [
-  EleTreeTableModel
+  EleTreeTableModel,
+  EleFormPageModel
 ]
 
 const components = [
@@ -28,6 +40,16 @@ const components = [
   EleTable,
   EleTree,
   EleTpl,
+  EleForm,
+  GText,
+  EleUpload,
+  EleSelectEntity,
+  EleIcon,
+  EleInputNumber,
+  EleModal,
+  EleCheckbox,
+  EleRadio,
+  EleBatchExport,
   ...compositeComponents,
   ...models
 ]
@@ -47,5 +69,6 @@ export {
   EleSelect,
   EleTable,
   EleTree,
-  EleTpl
+  EleTpl,
+  EleModal
 }

package/packages/input/src/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <a-input :value="value" @change="onChange"></a-input>
+  <a-input :value="value" :max-length="maxLength" @change="onChange"></a-input>
 </template>
 
 <script>
 export default {
   name: 'ele-input',
   props: {
+    maxLength: {
+      type: Number,
+      default: 125
+    },
     value: {
       type: String
     }

package/packages/input-number/index.js

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