@idooel/components 0.0.1 → 0.0.2-beta.10

package/packages/theme/variables.scss

@@ -0,0 +1,56 @@
+$primary-01: #E6F7FF !default;
+$primary-02: #BAE7FF !default;
+$primary-03: #91D5FF !default;
+$primary-04: #69C0FF !default;
+$primary-05: #40A9FF !default;
+$primary-06: #1890FF !default;
+$primary-07: #096DD9 !default;
+$primary-08: #0050B3 !default;
+$primary-09: #003A8C !default;
+$primary-10: #002766 !default;
+
+$link-01: #E6F7FF;
+$link-03: #91D5FF;
+$link-05: #40A9FF;
+$link-06: #1890FF;
+$link-07: #096DD9;
+
+$error-01: #FFF1F0;
+$error-03: #FFA39E;
+$error-05: #FF4D4F;
+$error-06: #F5222D;
+$error-07: #CF1322;
+
+$warning-01: #FFFBE6;
+$warning-03: #FFE58F;
+$warning-05: #FFC53D;
+$warning-06: #FAAD14;
+$warning-07: #D48806;
+
+$success-01: #F6FFED;
+$success-03: #B7EB8F;
+$success-05: #73D13D;
+$success-06: #52C41A;
+$success-07: #389E0D;
+
+//White
+$black-01: rgba(0, 0, 0, 0.02);
+$black-02: rgba(0, 0, 0, 0.04);
+$black-03: rgba(0, 0, 0, 0.08);
+$black-04: rgba(0, 0, 0, 0.16);
+$black-05: rgba(0, 0, 0, 0.24);
+$black-06: rgba(0, 0, 0, 0.44);
+$black-07: rgba(0, 0, 0, 0.64);
+$black-08: rgba(0, 0, 0, 0.88);
+
+//Black
+$white-01: rgba(255, 255, 255, 0.04);
+$white-02: rgba(255, 255, 255, 0.08);
+$white-03: rgba(255, 255, 255, 0.16);
+$white-04: rgba(255, 255, 255, 0.24);
+$white-05: rgba(255, 255, 255, 0.44);
+$white-06: rgba(255, 255, 255, 0.64);
+$white-07: rgba(255, 255, 255, 0.88);
+$white-08: #fff;
+
+$border-radius-base: 2;

package/packages/timeline/index.js

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

package/packages/timeline/src/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="ele-timeline__wrapper">
+    <div class="ele-timeline__item" v-for="item in innerDataSource" :key="item.key">
+      <div class="ele-timeline__left">
+        <div class="titleline-left__date">{{ item.date }}</div>
+      </div>
+      <div class="ele-timeline__middle">
+        <div class="ele-timeline__circle"></div>
+        <div class="ele-timeline__traline"></div>
+      </div>
+      <div class="ele-timeline__right">
+        <slot v-if="$scopedSlots.right" name="right" :data="item"></slot>
+        <template v-else>
+          <div class="timeline-right__title">
+            <span class="title">{{ item.title }}</span>
+            <span :class="['title-info', item.state == 1 && 'success', item.state == 2 && 'warning', item.state == 3 && 'error']">{{ item.stateName }}</span>
+          </div>
+          <div class="timeline-right__oper">
+            由
+            <span class="oper-name">{{ item.userName }}</span>
+            操作
+          </div>
+          <div class="timeline-right__subtitle" v-for="label in item.labelList" :key="label.value">
+            <div class="right-subtitle__field">{{ label.label }}：</div>
+            <div class="right-subtitle__content">{{ label.value }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { net, type } from '@idooel/shared'
+import { v4 as uuidv4 } from 'uuid'
+import { CONTEXT, parseFieldMap } from '../../utils'
+export default {
+  name: 'ele-timeline',
+  props: {
+    url: {
+      type: String
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    requestType: {
+      type: String,
+      default: 'GET'
+    },
+    fieldMap: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    dataSource: {
+      type: Array,
+      default: () => ([
+        // {
+        //   date: '2023/05/09 03:34:56',
+        //   title: 123,
+        //   state: 1,
+        //   stateName: '成功',
+        //   userName: 'Name',
+        //   labelList: [
+        //     {
+        //       label: 'label',
+        //       value: 'value'
+        //     }
+        //   ],
+        //   action: '结班',
+        //   opinion: '意见'
+        // }
+      ])
+    }
+  },
+  data () {
+    return {
+      innerDataSource: []
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    expressionData () {
+      return {
+        _route: this.$route.query,
+        ...this[CONTEXT]()
+      }
+    }
+  },
+  async created() {
+    if (this.url) {
+      this.innerDataSource = await this.requestData()
+    } else if (!type.isEmpty(this.dataSource)) {
+      this.innerDataSource = this.dataSource
+    } else {
+      console.warn('ele-timeline: 请传入数据源')
+    }
+  },
+  methods: {
+    async requestData () {
+      const ret = await net[this.requestType.toLowerCase()](
+        this.url,
+        { ...this.params, ...parseFieldMap(this.fieldMap, this.expressionData) }
+      ).then(resp => {
+        const { data } = resp || {}
+        return data.map(item => {
+          return {
+            key: uuidv4(),
+            ...item
+          }
+        })
+      })
+      return ret
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '../../theme/index';
+</style>
+<style lang="scss" scoped>
+.ele-timeline__wrapper {
+  width: 100%;
+  height: 100%;
+  .ele-timeline__item {
+    display: flex;
+    flex-direction: row;
+    &:last-child {
+      .ele-timeline__middle {
+        .ele-timeline__traline {
+          display: none;
+        }
+      }
+    }
+    .ele-timeline__left {
+      flex: 1;
+      padding-right: 12px;
+      padding-top: 16px;
+      padding-bottom: 16px;
+      text-align: right;
+      display: flex;
+      flex-direction: row;
+      justify-content: end;
+      .titleline-left__date {
+        width: 100px;
+        font-size: 14px;
+        color: var(--idoole-black-064);
+      }
+    }
+    .ele-timeline__middle {
+      width: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      transform: translate(0, 20px);
+      .ele-timeline__circle {
+        width: 100%;
+        height: 10px;
+        border-radius: 50%;
+        border-width: 2px;
+        border-style: solid;
+        border-color: var(--idooel-primary-color);
+      }
+      .ele-timeline__traline {
+        width: 1px;
+        height: calc(100% - 10px);
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--idoole-black-016);
+      }
+    }
+    .ele-timeline__right {
+      text-align: left;
+      flex: 2;
+      padding-left: 12px;
+      padding-top: 16px;
+      padding-bottom: 16px;
+      .timeline-right__title {
+        line-height: 22px;
+        display: flex;
+        flex-direction: row;
+        .title {
+          color: var(--idoole-black-088);
+          font-size: 14px;
+          font-weight: bold;
+        }
+        .title-info {
+          font-size: 14px;
+          color: var(--idoole-black-064);
+          margin-left: 16px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            margin-right: 8px;
+          }
+          &.success {
+            &::before {
+              background: var(--idoole-success-06);
+            }
+          }
+          &.warning {
+            &::before {
+              background: var(--idoole-warning-06);
+            }
+          }
+          &.error {
+            &::before {
+              background: var(--idoole-error-06);
+            }
+          }
+        }
+      }
+      .timeline-right__oper {
+        line-height: 22px;
+        margin-top: 8px;
+        margin-left: 12px;
+        .oper-name {
+          color: var(--idoole-black-088);
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+      .timeline-right__subtitle {
+        margin-left: 12px;
+        display: flex;
+        flex-direction: row;
+        line-height: 22px;
+        margin-top: 4px;
+        .right-subtitle__field {
+          flex-shrink: 0;
+          font-size: 14px;
+          color: var(--idoole-black-064);
+        }
+        .right-subtitle__content {
+          font-size: 14px;
+          color: var(--idoole-black-088);
+          font-weight: bold;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

package/packages/tpl/src/index.vue

@@ -13,7 +13,10 @@
 </template>
 
 <script>
-import EleTreeTableModel from '../../tree-table-model/src/index.vue'
+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 {
@@ -24,7 +27,10 @@ export default {
     }
   },
   components: {
-    [EleTreeTableModel.name]: EleTreeTableModel
+    [EleTreeTableModel.name]: EleTreeTableModel,
+    [EleFormGroupModel.name]: EleFormGroupModel,
+    [EleStepModel.name]: EleStepModel,
+    [EleFormModel.name]: EleFormModel
   },
   computed: {
     modelNameValidator () {
@@ -44,4 +50,7 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style lang="scss">
+@import '../../theme/index';
+</style>

package/packages/tree/src/index.vue

@@ -3,15 +3,19 @@
     <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">
-      <template #title="{ title }">
-        <span :title="title" class="tree-node__title">
-          {{ title }}
+      <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 }">
@@ -29,6 +33,17 @@ export default {
       type: Array,
       default: () => []
     },
+    showLine: {
+      type: Boolean,
+      default: false
+    },
+    switcherIcon: {
+      type: String
+    },
+    checkable: {
+      type: Boolean,
+      default: false
+    },
     replaceFields: {
       type: Object,
       default: () => ({
@@ -54,29 +69,14 @@ export default {
   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: {
+    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)
@@ -88,10 +88,15 @@ export default {
 <style lang="scss" scoped>
 .g-tree__wrapper {
   overflow: hidden;
-  ::v-deep .ant-tree-node-content-wrapper {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+  ::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

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

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

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

package/packages/upload/index.js

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