@idooel/components 0.0.1 → 0.0.2

package/packages/theme/index.scss

@@ -0,0 +1,43 @@
+@import 'variables.scss';
+@import 'form.scss';
+@import 'styleClass.scss';
+
+$primary: $primary-06;
+
+:root {
+  --idooel-primary-color: #{$primary};
+  --idoole-black-02: #{$black-02};
+  --idoole-black-06: #{$black-06};
+  --idoole-black-07: #{$black-07};
+  --idoole-black-064: #{$black-07};
+  --idoole-black-088: #{$black-08};
+  --idoole-black-016: #{$black-04};
+  --idooel-disabled-border-color: #{$black-04};
+
+  --idoole-success-06: #{$success-06};
+  --idoole-warning-06: #{$warning-06};
+  --idoole-error-06: #{$error-06};
+  //Table
+  --idooel-border-width: 2;
+  --idooel-border-color: #53a8ff;
+  --idooel-column-border-width: 1;
+  --idooel-column-border-color: #d9ecff;
+  --idooel-row-even-color: #F0FAFF;
+  --idooel-row-odd-color: #FFF;
+
+  //Form
+  --idooel-form-title-border-color: #{$black-04};
+  --idooel-form-upload-bg-color: #{$black-01};
+  --idooel-form-upload-border-hover-color: #{$primary-05};
+  --idooel-form-border-radius: #{$border-radius-base}px;
+  --idooel-form-border-err-color: #{$error-06};
+
+  //Link
+  --idooel-link-06: #{$link-06};
+  --idooel-link-03: #{$link-03};
+
+  //img-crop
+  --idooel-img-crop-err-color: #{$error-03};
+}
+
+@import './overrid.scss';

package/packages/theme/overrid.scss

@@ -0,0 +1,8 @@
+.ant-input-disabled {
+  border-color: var(--idooel-disabled-border-color) !important;
+}
+.ant-select-disabled {
+  .ant-select-selection {
+    border-color: var(--idooel-disabled-border-color) !important;
+  }
+}

package/packages/theme/styleClass.scss

@@ -0,0 +1,3 @@
+.margin-t-8 {
+  margin-top: 8px;
+}

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/index.js

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

package/packages/tpl/src/index.vue

@@ -1,47 +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 '../../tree-table-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
-  },
-  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>
+<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>