@idooel/components 0.0.0

package/packages/tree/src/TreeNode.vue

@@ -0,0 +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>
+
+</style>

package/packages/tree/src/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="g-tree__wrapper">
+    <a-tree
+      v-if="innerTreeData.length"
+      :tree-data="innerTreeData"
+      @select="selectTreeNode"
+      :replaceFields="replaceFields"
+      :default-expanded-keys="defaultExpandedKeys"
+      :default-selected-keys="defaultSelectedKeys"
+      blockNode 
+      :show-icon="showIcon">
+      <template #title="{ title }">
+        <span :title="title" class="tree-node__title">
+          {{ 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: () => []
+    },
+    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
+      // return [
+      //   {
+      //     title: 'parent 1',
+      //     key: 1,
+      //     scopedSlots: {
+      //       icon: 'custom',
+      //       iconName: 'smile-o'
+      //     },
+      //     children: [
+      //       {
+      //         title: '2',
+      //         key: 2,
+      //         scopedSlots: {
+      //           icon: 'custom',
+      //           iconName: 'frown-o'
+      //         }
+      //       }
+      //     ]
+      //   }
+      // ]
+    }
+  },
+  methods: {
+    refreshTreeStatus (props = {}) {},
+    selectTreeNode (selectedKeys, e) {
+      this.$emit('select', selectedKeys, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-tree__wrapper {
+  overflow: hidden;
+  ::v-deep .ant-tree-node-content-wrapper {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+</style>

package/packages/tree-table-model/index.js

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

package/packages/tree-table-model/src/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <section class="model__tree-table">
+    <section :ref="modelTreeWrapper" class="model__tree--wrapper">
+      <ele-tree 
+        :tree-data="treeData"
+        :defaultExpandedKeys="defaultExpandedKeys"
+        :defaultSelectedKeys="defaultSelectedKeys"
+        @select="selectTreeNode"
+        :replace-fields="treeMeta.replaceFields || replaceFields">
+      </ele-tree>
+    </section>
+    <section :ref="modelTableWrapper" class="model__table--wrapper">
+      <ele-search-area :ref="searchArea" @search="onSearch" :data-source="searchMeta.elements"></ele-search-area>
+      <ele-button-group :ref="buttonGroup" @click="handleClickButtonGroup" style="margin-top: 16px" :data-source="getButtonGroupElements"></ele-button-group>
+      <ele-table
+        v-on="$listeners"
+        :loading="loading" 
+        :columns="columns"
+        :total="total"
+        :actions="actions"
+        :pageSize="pageSize"
+        :pageSizeOptions="pageSizeOptions"
+        :data-source="tableData"
+        @change-page="onChangePage" 
+        style="margin-top: 8px;"
+      ></ele-table>
+    </section>
+  </section>
+</template>
+
+<script>
+import EleTree from '../../tree/src/index.vue'
+import EleTable from '../../table/src/index.vue'
+import EleSearchArea from '../../composite-components/search-area/src/index.vue'
+import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
+import { type, net } from '@idooel/shared'
+import { v4 as uuidv4 } from 'uuid'
+export default {
+  name: 'ele-tree-table-model',
+  components: {
+    EleTree,
+    EleTable,
+    EleSearchArea,
+    EleButtonGroup
+  },
+  props: {
+    treeMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    searchMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    buttonGroupMeta: {
+      typeof: Object,
+      default: () => ({})
+    },
+    tableMeta: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      treeData: [],
+      tableData: [],
+      defaultExpandedKeys: [],
+      defaultSelectedKeys: [],
+      replaceFields: {
+        title: 'title',
+        children: 'children',
+        key: 'id'
+      },
+      loading: false,
+      total: 0,
+      tableQuerys: {},
+      resizeObserverModelTableWrapper: null,
+      modelTableWrapperHeight: 0,
+      currentTreeNodeData: {}
+    }
+  },
+  computed: {
+    buttonGroup () {
+      return uuidv4()
+    },
+    searchArea () {
+      return uuidv4()
+    },
+    modelTreeWrapper () {
+      return uuidv4()
+    },
+    modelTableWrapper () {
+      return uuidv4()
+    },
+    actions () {
+      const { operations } = this.tableMeta
+      return operations.elements
+    },
+    pageSize () {
+      const { page = {} } = this.tableMeta
+      return page.pageSize || 10
+    },
+    pageSizeOptions () {
+      const { page = {} } = this.tableMeta
+      return page.pageSizeOptions || ['10', '20', '30', '40']
+    },
+    columns () {
+      const { columns, operations } = this.tableMeta
+      if (type.get(columns) === 'array') {
+        const columnsOptions = columns.map(item => {
+          if (item.render) {
+            return {
+              title: item.title,
+              dataIndex: item.dataIndex,
+              width: item.width,
+              align: item.align,
+              fixed: item.fixed,
+              customRender: (text, record, index) => {
+                const { $createElement } = this
+                return item.render.call(this, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], record, index)
+              }
+            }
+          }
+          return {
+            title: item.title,
+            dataIndex: item.dataIndex,
+            width: item.width,
+            align: item.align,
+            fixed: item.fixed
+          }
+        })
+        if (operations) {
+          return [
+            ...columnsOptions,
+            {
+              title: '操作',
+              width: operations.width,
+              key: 'action',
+              fixed: 'right',
+              scopedSlots: { customRender: 'action' }
+            }
+          ]
+        }
+        return columnsOptions
+      } else {
+        console.error('Error: columns is invalid, please check it')
+        return []
+      }
+    },
+    getButtonGroupElements () {
+      const { elements } = this.buttonGroupMeta
+      if (type.get(elements) === 'function') {
+        return elements.call(this)
+      } else if (type.get(elements) === 'array') {
+        return elements
+      } else {
+        return []
+      }
+    }
+  },
+  async created () {
+    this.treeData = await this.requestTreeData()
+    const [defaultTreeNode = {}] = this.treeData
+    this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
+    this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
+    const { fieldMap } = this.tableMeta
+    this.currentTreeNodeData = defaultTreeNode
+    this.tableData = await this.requestTableData(this.execTableFieldMap(fieldMap, defaultTreeNode))
+  },
+  methods: {
+    handleClickButtonGroup (props) {
+      const { eventName } = props
+      this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })
+    },
+    watchViewPort () {
+      const modelTableWrapper = this.$refs[this.modelTableWrapper]
+      console.log(modelTableWrapper.getBoundingClientRect())
+      const { top } = modelTableWrapper.getBoundingClientRect()
+      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`
+    },
+    async onSearch (props) {
+      this.tableQuerys = Object.assign(this.tableQuerys, props)
+      this.tableData = await this.requestTableData()
+    },
+    execTableFieldMap (fieldMap = {}, props) {
+      let ret = {}
+      const keys = Object.keys(fieldMap)
+      keys.forEach(key => {
+        const field = fieldMap[key]
+        ret[field] = props[key]
+      })
+      return ret
+    },
+    async selectTreeNode (selectedKeys, e) {
+      const { fieldMap } = this.tableMeta
+      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef
+      const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)
+      this.tableData = await this.requestTableData(execFieldMapRet)
+    },
+    async requestTreeData () {
+      const { url, requestType } = this.treeMeta
+      const ret = await net.get(
+        url
+      ).then(resp => {
+        const { data } = resp || {}
+        return data
+      })
+      return ret
+    },
+    async onChangePage (page, pageSize) {
+      this.tableData = await this.requestTableData({ currentPage: page, pageSize })
+    },
+    async requestTableData (props = {}) {
+      const { url, requestType, page = {} } = this.tableMeta
+      const { pageSize = 10 } = page
+      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)
+      const ret = await net.get(
+        url,
+        this.tableQuerys
+      ).then(resp => {
+        const { data = [], count } = resp || {}
+        this.total = count
+        return data.map(item => {
+          return {
+            key: uuidv4(),
+            ...item
+          }
+        })
+      })
+      return ret
+    },
+    refreshTreeStatus (props = {}) {},
+    refreshTableStatus (props = {}) {},
+    getModelTableWrapperHeight () {},
+    setModelTreeWrapperHeight (height) {
+      this.$refs[this.modelTreeWrapper].style.height = height
+    },
+    setModelTableWrapperHeight () {
+      const { top } = this.$refs[this.modelTableWrapper].getBoundingClientRect()
+      const height = `calc(100vh - ${top}px)`
+      this.$refs[this.modelTableWrapper].style.height = height
+      this.setModelTreeWrapperHeight(height)
+    },
+    getSearchAreaHeight () {
+      return this.$refs[this.searchArea].$el.clientHeight
+    },
+    getButtonGroupHeight () {
+      return this.$refs[this.buttonGroup].$el.clientHeight
+    }
+  },
+  mounted () {
+    //TODO
+    // this.setModelTableWrapperHeight()
+    // this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {
+    //   for (let entry of entries) {
+    //     this.modelTableWrapperHeight = entry.contentRect.height
+    //     console.log('this.modelTableWrapperHeight:', this.modelTableWrapperHeight)
+    //     console.log('getSearchAreaHeight', this.getSearchAreaHeight())
+    //     console.log('getButtonGroupHeight', this.getButtonGroupHeight())
+    //     const tableHeight = this.modelTableWrapperHeight - this.getSearchAreaHeight() - this.getButtonGroupHeight()
+    //     console.log('tableHeight', tableHeight)
+    //   }
+    // })
+    // this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.model__tree-table {
+  background: transparent;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  .model__tree--wrapper {
+    width: 240px;
+    background: #fff;
+    flex-shrink: 0;
+    padding: 16px;
+    box-sizing: border-box;
+    margin-right: 16px;
+    overflow-y: auto;
+  }
+  .model__table--wrapper {
+    min-width: 0;
+    background: #fff;
+  }
+}
+</style>

package/scripts/rollup.config.js

@@ -0,0 +1,42 @@
+
+import { name } from '../package.json'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+// import { terser } from 'rollup-plugin-terser'
+import strip from '@rollup/plugin-strip'
+import vue from 'rollup-plugin-vue'
+import postcss from 'rollup-plugin-postcss'
+import postcssImport from 'postcss-import'
+import babel from 'rollup-plugin-babel'
+
+const generateFileName = (type) => `dist/${name}.${type}.js`
+
+export { generateFileName }
+/** @type { import('rollup').RollupOptions } */
+export default {
+  input: 'packages/index.js',
+  output: {
+    name: name,
+    file: generateFileName('umd'),
+    format: 'umd'
+  },
+  plugins: [
+    nodeResolve(),
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    vue({
+      css: true,
+      compileTemplate: true
+    }),
+    postcss({
+      extensions: ['.css'],
+      extract: true,
+      plugins: [postcssImport()]
+    }),
+    // terser(),
+    // strip({
+    //   functions: ['console.log', 'assert.*', 'debug', 'alert'],
+    //   sourceMap: true
+    // })
+  ]
+}

package/scripts/rollup.umd.config.js

@@ -0,0 +1,15 @@
+import baseConfig, { generateFileName } from './rollup.config.js'
+/** @type { import('rollup').RollupOptions } */
+export default {
+  ...baseConfig,
+  external: ['vue', '@idooel/shared'],
+  output: {
+    name: '__ele__components__',
+    file: generateFileName('umd'),
+    format: 'umd',
+    globals: {
+      vue: 'Vue'
+    },
+    exports: 'named'
+  }
+}