@idooel/components 0.0.2-beta.3 → 0.0.2-beta.31

package/packages/tpl/src/index.vue

@@ -1,56 +1,56 @@
-<template>
-  <component 
-    v-if="modelNameValidator.existed"
-    :is="modelName" 
-    :ref="genModelRef" 
-    v-bind="$attrs" 
-    v-on="$listeners">
-    <template v-for="(idx, name) in $scopedSlots" v-slot:[name]="data">
-      <slot :name="name" v-bind="data"></slot>
-    </template>
-  </component>
-  <div v-else v-html="modelNameValidator.message"></div>
-</template>
-
-<script>
-import EleTreeTableModel from '../../models/tree-table-model/src/index.vue'
-import EleFormGroupModel from '../../models/form-group-model/src/index.vue'
-import EleFormModel from '../../models/form-model/src/index.vue'
-import EleStepModel from '../../models/step-model/src/index.vue'
-import { v4 as uuidv4 } from 'uuid'
-import { models } from '../../index.js'
-export default {
-  name: 'ele-tpl',
-  props: {
-    modelName: {
-      type: String
-    }
-  },
-  components: {
-    [EleTreeTableModel.name]: EleTreeTableModel,
-    [EleFormGroupModel.name]: EleFormGroupModel,
-    [EleStepModel.name]: EleStepModel,
-    [EleFormModel.name]: EleFormModel
-  },
-  computed: {
-    modelNameValidator () {
-      const target = models.find(model => model.name === this.modelName)
-      return {
-        existed: !!target,
-        message: !!target ? '' : `Model <span style="color:red;">${this.modelName}</span> not found`
-      }
-    },
-    genModelRef () {
-      return uuidv4()
-    }
-  },
-  methods: {
-    getModel () {
-      return this.$refs[this.genModelRef]
-    }
-  }
-}
-</script>
-<style lang="scss">
-@import '../../theme/index';
+<template>
+  <component 
+    v-if="modelNameValidator.existed"
+    :is="modelName" 
+    :ref="genModelRef" 
+    v-bind="$attrs" 
+    v-on="$listeners">
+    <template v-for="(idx, name) in $scopedSlots" v-slot:[name]="data">
+      <slot :name="name" v-bind="data"></slot>
+    </template>
+  </component>
+  <div v-else v-html="modelNameValidator.message"></div>
+</template>
+
+<script>
+import EleTreeTableModel from '../../models/tree-table-model/src/index.vue'
+import EleFormGroupModel from '../../models/form-group-model/src/index.vue'
+import EleFormModel from '../../models/form-model/src/index.vue'
+import EleStepModel from '../../models/step-model/src/index.vue'
+import { v4 as uuidv4 } from 'uuid'
+import { models } from '../../index.js'
+export default {
+  name: 'ele-tpl',
+  props: {
+    modelName: {
+      type: String
+    }
+  },
+  components: {
+    [EleTreeTableModel.name]: EleTreeTableModel,
+    [EleFormGroupModel.name]: EleFormGroupModel,
+    [EleStepModel.name]: EleStepModel,
+    [EleFormModel.name]: EleFormModel
+  },
+  computed: {
+    modelNameValidator () {
+      const target = models.find(model => model.name === this.modelName)
+      return {
+        existed: !!target,
+        message: !!target ? '' : `Model <span style="color:red;">${this.modelName}</span> not found`
+      }
+    },
+    genModelRef () {
+      return uuidv4()
+    }
+  },
+  methods: {
+    getModel () {
+      return this.$refs[this.genModelRef]
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '../../theme/index';
 </style>

package/packages/tree/index.js

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

package/packages/tree/src/TreeNode.vue

@@ -1,30 +1,30 @@
-<template>
-  <a-tree-node :key="node.key" :title="node.title">
-    <a-icon slot="icon" type="carry-out" />
-    <template v-if="node.children">
-      <TreeNode
-        v-for="(children, idx) in node.children" 
-        :key="idx" 
-        :node="children">
-      </TreeNode>
-    </template>
-    <!-- <span slot="title" style="color: #1890ff">parent 1</span> -->
-  </a-tree-node>
-</template>
-
-<script>
-export default {
-  name: 'TreeNode',
-  isTreeNode: true,
-  props: {
-    node: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-
+<template>
+  <a-tree-node :key="node.key" :title="node.title">
+    <a-icon slot="icon" type="carry-out" />
+    <template v-if="node.children">
+      <TreeNode
+        v-for="(children, idx) in node.children" 
+        :key="idx" 
+        :node="children">
+      </TreeNode>
+    </template>
+    <!-- <span slot="title" style="color: #1890ff">parent 1</span> -->
+  </a-tree-node>
+</template>
+
+<script>
+export default {
+  name: 'TreeNode',
+  isTreeNode: true,
+  props: {
+    node: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
 </style>

package/packages/tree/src/index.vue

@@ -1,102 +1,102 @@
-<template>
-  <div class="g-tree__wrapper">
-    <a-tree
-      v-if="innerTreeData.length"
-      :tree-data="innerTreeData"
-      :checkable="checkable"
-      @select="selectTreeNode"
-      @check="checkTreeNode"
-      :replaceFields="replaceFields"
-      :default-expanded-keys="defaultExpandedKeys"
-      :default-selected-keys="defaultSelectedKeys"
-      :show-line="showLine"
-      blockNode 
-      :show-icon="showIcon">
-      <a-icon v-if="switcherIcon" slot="switcherIcon" :type="switcherIcon" />
-      <template #title="props">
-        <span :title="props[replaceFields.title]" class="tree-node__title">
-          {{ props[replaceFields.title] }}
-        </span>
-      </template>
-      <template slot="custom" slot-scope="{ scopedSlots }">
-        <a-icon :type="scopedSlots.iconName"></a-icon>
-      </template>
-    </a-tree>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-tree',
-  props: {
-    treeData: {
-      type: Array,
-      default: () => []
-    },
-    showLine: {
-      type: Boolean,
-      default: false
-    },
-    switcherIcon: {
-      type: String
-    },
-    checkable: {
-      type: Boolean,
-      default: false
-    },
-    replaceFields: {
-      type: Object,
-      default: () => ({
-        title: 'title',
-        key: 'id',
-        children: 'children'
-      })
-    },
-    defaultExpandedKeys: {
-      type: Array
-    },
-    defaultSelectedKeys: {
-      type: Array
-    },
-    showIcon: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {}
-  },
-  computed: {
-    innerTreeData () {
-      return this.treeData
-    }
-  },
-  methods: {
-    checkTreeNode (checkedKeys, e) {
-      const { checkedNodes } = e
-      const nodeDatas = checkedNodes.map(item => item.data.props.dataRef)
-      this.$emit('check', checkedKeys, nodeDatas)
-    },
-    refreshTreeStatus (props = {}) {},
-    selectTreeNode (selectedKeys, e) {
-      this.$emit('select', selectedKeys, e)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-tree__wrapper {
-  overflow: hidden;
-  ::v-deep .ant-tree {
-    .ant-tree-node-content-wrapper {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-    .ant-tree-node-selected {
-      color: #fff;
-    }
-  }
-}
+<template>
+  <div class="g-tree__wrapper">
+    <a-tree
+      v-if="innerTreeData.length"
+      :tree-data="innerTreeData"
+      :checkable="checkable"
+      @select="selectTreeNode"
+      @check="checkTreeNode"
+      :replaceFields="replaceFields"
+      :default-expanded-keys="defaultExpandedKeys"
+      :default-selected-keys="defaultSelectedKeys"
+      :show-line="showLine"
+      blockNode 
+      :show-icon="showIcon">
+      <a-icon v-if="switcherIcon" slot="switcherIcon" :type="switcherIcon" />
+      <template #title="props">
+        <span :title="props[replaceFields.title]" class="tree-node__title">
+          {{ props[replaceFields.title] }}
+        </span>
+      </template>
+      <template slot="custom" slot-scope="{ scopedSlots }">
+        <a-icon :type="scopedSlots.iconName"></a-icon>
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-tree',
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    showLine: {
+      type: Boolean,
+      default: false
+    },
+    switcherIcon: {
+      type: String
+    },
+    checkable: {
+      type: Boolean,
+      default: false
+    },
+    replaceFields: {
+      type: Object,
+      default: () => ({
+        title: 'title',
+        key: 'id',
+        children: 'children'
+      })
+    },
+    defaultExpandedKeys: {
+      type: Array
+    },
+    defaultSelectedKeys: {
+      type: Array
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    innerTreeData () {
+      return this.treeData
+    }
+  },
+  methods: {
+    checkTreeNode (checkedKeys, e) {
+      const { checkedNodes } = e
+      const nodeDatas = checkedNodes.map(item => item.data.props.dataRef)
+      this.$emit('check', checkedKeys, nodeDatas)
+    },
+    refreshTreeStatus (props = {}) {},
+    selectTreeNode (selectedKeys, e) {
+      this.$emit('select', selectedKeys, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-tree__wrapper {
+  overflow: hidden;
+  ::v-deep .ant-tree {
+    .ant-tree-node-content-wrapper {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .ant-tree-node-selected {
+      color: #fff;
+    }
+  }
+}
 </style>

package/packages/tree-select/index.js

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

package/packages/tree-select/src/index.vue

@@ -1,143 +1,143 @@
-<template>
-  <div class="ele__tree-select">
-    <a-tree-select
-      :value="value"
-      @change="onChange"
-      :multiple="multiple"
-      :disabled="disabled"
-      :defaultValue="defaultValue"
-      :replaceFields="replaceFields"
-      :tree-data="dataSource">
-    </a-tree-select>
-  </div>
-</template>
-
-<script>
-import { net, route } from '@idooel/shared'
-import { parseFieldMap, CONTEXT } from '../../utils'
-export default {
-  name: 'ele-tree-select',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  inject: {
-    [CONTEXT]: {
-      default: () => (() => {})
-    }
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: [String, Array]
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    requestType: {
-      type: String,
-      default: 'GET'
-    },
-    params: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    fieldMap: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    replaceFields: {
-      type: Object,
-      default: () => {
-        return {
-          children: 'children',
-          title: 'title',
-          key: 'key',
-          value: 'value'
-        }
-      }
-    },
-    treeData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    picks: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    defaultValue: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      innerDataSource: []
-    }
-  },
-  computed: {
-    contextData () {
-      return this[CONTEXT].call(this)
-    },
-    dataSource () {
-      return this.url ? this.innerDataSource : this.treeData
-    }
-  },
-  methods: {
-    onChange (value, label, extra) {
-      this.$emit('change', value)
-    },
-    assignKeyFormTreeData (dataSource = []) {
-      return dataSource.map(nodeData => {
-        const { children } = nodeData
-        children && this.assignKeyFormTreeData(children)
-        if (!nodeData.key) {
-          nodeData.key = nodeData.id
-          nodeData.value = nodeData.id
-        }
-        return nodeData
-      })
-    },
-    requestData () {
-      const { exposed = {} } = this.contextData
-      const { getFieldsValue, route } = exposed
-      const formModel = getFieldsValue && getFieldsValue()
-      const ctx = {
-        ...formModel,
-        route
-      }
-      net[this.requestType.toLowerCase()](this.url, { ...this.params, ...parseFieldMap(this.fieldMap, ctx) }).then(resp => {
-        const { data, code } = resp
-        if (code == 2000) {
-          this.innerDataSource = this.assignKeyFormTreeData(data)
-        }
-      })
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.url && this.requestData()
-    })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
+<template>
+  <div class="ele__tree-select">
+    <a-tree-select
+      :value="value"
+      @change="onChange"
+      :multiple="multiple"
+      :disabled="disabled"
+      :defaultValue="defaultValue"
+      :replaceFields="replaceFields"
+      :tree-data="dataSource">
+    </a-tree-select>
+  </div>
+</template>
+
+<script>
+import { net, route } from '@idooel/shared'
+import { parseFieldMap, CONTEXT } from '../../utils'
+export default {
+  name: 'ele-tree-select',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => {})
+    }
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [String, Array]
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    requestType: {
+      type: String,
+      default: 'GET'
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    fieldMap: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    replaceFields: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'children',
+          title: 'title',
+          key: 'key',
+          value: 'value'
+        }
+      }
+    },
+    treeData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    picks: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    defaultValue: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      innerDataSource: []
+    }
+  },
+  computed: {
+    contextData () {
+      return this[CONTEXT].call(this)
+    },
+    dataSource () {
+      return this.url ? this.innerDataSource : this.treeData
+    }
+  },
+  methods: {
+    onChange (value, label, extra) {
+      this.$emit('change', value)
+    },
+    assignKeyFormTreeData (dataSource = []) {
+      return dataSource.map(nodeData => {
+        const { children } = nodeData
+        children && this.assignKeyFormTreeData(children)
+        if (!nodeData.key) {
+          nodeData.key = nodeData.id
+          nodeData.value = nodeData.id
+        }
+        return nodeData
+      })
+    },
+    requestData () {
+      const { exposed = {} } = this.contextData
+      const { getFieldsValue, route } = exposed
+      const formModel = getFieldsValue && getFieldsValue()
+      const ctx = {
+        ...formModel,
+        route
+      }
+      net[this.requestType.toLowerCase()](this.url, { ...this.params, ...parseFieldMap(this.fieldMap, ctx) }).then(resp => {
+        const { data, code } = resp
+        if (code == 2000) {
+          this.innerDataSource = this.assignKeyFormTreeData(data)
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.url && this.requestData()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
 </style>