@idooel/components 0.0.1-beta.39 → 0.0.1-beta.40

package/packages/timeline/src/index.vue

@@ -1,235 +1,254 @@
-<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">
-        <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>
-      </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: () => ({})
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    }
-  },
-  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.scss';
-</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: 1;
-      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;
-        }
-      }
-    }
-  }
-}
+<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: () => ({})
+    },
+    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,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 '../../tree-table-model/src/index.vue'
-import EleFormGroupModel from '../../form-group-model/src/index.vue'
-import EleFormModel from '../../form-model/src/index.vue'
-import EleStepModel from '../../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.scss';
+<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