@idooel/components 0.0.1 → 0.0.2

package/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["packages/*"]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",
@@ -16,23 +16,29 @@
   "keywords": [],
   "license": "ISC",
   "peerDependencies": {
-    "@idooel/shared": "workspace:^0.0.0",
+    "@idooel/expression": "0.0.1-beta.1",
+    "@idooel/shared": "0.0.1-beta.7",
     "ant-design-vue": "1.7.8",
-    "moment": "^2.30.1"
+    "cropperjs": "1.4.1",
+    "moment": "^2.30.1",
+    "vue-upload-component": "<=2.8.11",
+    "vueditor": "^0.3.1"
   },
   "devDependencies": {
     "@babel/core": "7.17.9",
-    "@idooel/expression": "workspace:^0.0.0",
-    "@idooel/shared": "workspace:^0.0.0",
+    "@idooel/expression": "workspace:*",
+    "@idooel/shared": "workspace:*",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "13.2.0",
     "@rollup/plugin-strip": "2.1.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "@vue/compiler-sfc": "3.2.33",
     "babel-plugin-component": "1.1.1",
     "babel-plugin-external-helpers": "6.22.0",
     "postcss": "8.4.12",
     "postcss-import": "14.1.0",
     "rollup": "2.70.1",
-    "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "5.1.9",

package/packages/alert/index.js

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

package/packages/alert/src/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <a-alert
+    class="ele-alert"
+    :message="message" 
+    :description="description" 
+    :type="type"
+    :closable="closable"
+    :closeText="closeText"
+    :show-icon="showIcon" />
+</template>
+
+<script>
+export default {
+  name: 'ele-alert',
+  props: {
+    type: {
+      type: String,
+      default: 'success'
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    message: {
+      type: String,
+      default: 'Success Tips'
+    },
+    description: {
+      type: String
+    },
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    closeText: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele-alert {
+  text-align: left !important;
+}
+</style>

package/packages/batch-export/index.js

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

package/packages/batch-export/src/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <ele-modal 
+    v-model="innerValue" 
+    v-on="$listeners"
+    :buttonGroupMeta="buttonGroupMeta" 
+    title="批量导出">
+    <div class="ele-batch-export__content">
+      <div class="ele-batch-export__container">
+        <ele-icon class="ele-batch-export__icon" type="download"></ele-icon>
+        <div class="ele-batch-export__handle">
+          <div class="ele-batch-export__btn" @click="handleClick">导出任务处理中..... 请点击此按钮跳转到“批处理管理”菜单查看任务进度</div>
+          <div class="ele-batch-export__btn--hint">批处理任务的准备工作会在后台运行</div>
+        </div>
+      </div>
+      <div class="ele-batch-export__message">
+        您可以请点击上方按钮查看任务进度或关闭弹框
+      </div>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+export default {
+  name: 'ele-batch-export',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    buttonGroupMeta: {
+      type: Object,
+      default: () => {
+        return {
+          elements: [
+            {
+              label: '关闭',
+              key: 'close',
+              type: 'primary',
+              eventName: 'handleClose'
+            }
+          ]
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      innerValue: false
+    }
+  },
+  watch: {
+    value: {
+      handler (value) {
+        this.$nextTick(() => {
+          this.innerValue = value
+        })
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('on-batch-export')
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '../../theme/index';
+</style>
+<style lang="scss" scoped>
+.ele-batch-export__content {
+  height: 106px;
+  .ele-batch-export__container {
+    border-width: 1px;
+    border-style: dashed;
+    height: 80px;
+    border-color: var(--idooel-link-06);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 16px;
+    .ele-batch-export__icon {
+      font-size: 48px;
+      color: var(--idooel-link-06);
+    }
+    .ele-batch-export__handle {
+      margin-left: 16px;
+      .ele-batch-export__btn {
+        color: var(--idooel-link-06);
+        font-size: 16px;
+        cursor: pointer;
+      }
+      .ele-batch-export__btn--hint {
+        color: var(--idooel-link-03);
+        font-size: 14px;
+      }
+    }
+  }
+  .ele-batch-export__message {
+    color: var(--idooel-link-06);
+    font-size: 14px;
+  }
+}
+</style>

package/packages/business-components/modal-fsm/index.js

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

package/packages/business-components/modal-fsm/src/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <ele-modal v-on="$listeners" :value="value" :title="meta.title || title" @cancel="handleCancel" :buttonGroupMeta="buttonGroupMeta">
+    <slot name="alert"></slot>
+    <ele-timeline v-bind="meta">
+      <template #right="{ data: item }">
+        <div class="ele-modal-fsm__display">
+          <span>由</span>
+          <span class="fms-display__name">{{ item.userName || '管理员' }}</span>
+          <span>执行了</span>
+          <span class="fms-display__action">{{ item.action || '结班' }}</span>
+          <span>操作</span>
+          <span :class="['title-info', item.state == 1 && 'success', item.state == 2 && 'warning', item.state == 3 && 'error']">{{ item.stateName }}</span>
+        </div>
+        <div class="ele-modal-fsm__opinion-wrapper">
+          <div class="fsm-opinion__label">意见：</div>
+          <div class="fsm-opinion__value">{{ item.opinion }}</div>
+        </div>
+      </template>
+    </ele-timeline>
+    <template v-if="showTextSlot" #footer-text>
+      <ele-text v-bind="textAttrs"></ele-text>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+import { CONTEXT } from '../../../utils'
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-modal-fsm',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '状态变更记录'
+    },
+    meta: {
+      type: Object,
+      default: () => ({})
+    },
+    buttonGroupMeta: {
+      type: Object,
+      default: () => {
+        return {
+          elements: [
+            {
+              label: '关闭',
+              key: 'cancel',
+              type: 'default',
+              eventName: 'cancel'
+            }
+          ]
+        }
+      }
+    },
+    contextProp: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  provide() {
+    return {
+      [CONTEXT]: () => {
+        return {
+          _route: this.$route.query,
+          _routeMeta: this.$route.meta,
+          ...this.contextProp
+        }
+      }
+    }
+  },
+  computed: {
+    showTextSlot () {
+      return !type.isEmpty(this.textAttrs)
+    },
+    textAttrs() {
+      const { text = {} } = this.buttonGroupMeta
+      return text
+    }
+  },
+  methods: {
+    handleCancel () {
+      this.$emit('change', false)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '../../../theme/index';
+</style>
+<style lang="scss" scoped>
+.ele-modal-fsm__display {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  line-height: 22px;
+  .fms-display__name, .fms-display__action {
+    font-weight: bold;
+    color: var(--idoole-black-088);
+    &::before {
+      content: '';
+      margin-left: 4px;
+    }
+    &::after {
+      content: '';
+      margin-right: 4px;
+    }
+  }
+  .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);
+      }
+    }
+  }
+}
+.ele-modal-fsm__opinion-wrapper {
+  margin-top: 4px;
+  line-height: 22px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  .fsm-opinion__label {
+    width: 42px;
+    flex-shrink: 0;
+    color: var(--idoole-black-064);
+  }
+  .fsm-opinion__value {
+    color: var(--idoole-black-088);
+    font-weight: bold;
+  }
+}
+</style>

package/packages/business-components/modal-import/index.js

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

package/packages/business-components/modal-import/src/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <ele-modal :value="innerValue" :buttonGroupMeta="buttonGroupMeta" @cancel="onCancel" @handleClose="handleClose" title="导入">
+    <div class="ele-modal-import__upload" v-if="isFileEmpty">
+      <div class="import-download__link" @click="handleClickDownloadTpl">点击此链接下载导入模板</div>
+      <ele-upload v-model="file" @on-success="uploadFileSuccess"></ele-upload>
+    </div>
+    <div v-else class="ele-modal-import__hint">
+      <div class="import-hint__content">
+        <div class="import-hint__left">
+          <ele-icon></ele-icon>
+        </div>
+        <div class="import-hint__right">
+          <div class="hint-right__title" @click="handleClickJump">文件上传成功，任务处理中..... 请点击此按钮跳转到“批处理管理”菜单查看任务进度</div>
+          <div class="hint-right__sub-title">批处理任务的准备工作会在后台运行</div>
+        </div>
+      </div>
+      <div class="import-footer__hint--text">
+        您可以请点击上方按钮查看任务进度或关闭弹框
+      </div>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-modal-import',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      innerValue: false,
+      file: [],
+      buttonGroupMeta: {
+        elements: [
+          {
+            label: '关闭',
+            key: 'close',
+            type: 'default',
+            eventName: 'handleClose'
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    isFileEmpty () {
+      return type.isEmpty(this.file)
+    }
+  },
+  watch: {
+    value: {
+      handler (value) {
+        this.innerValue = value
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    emitEvent (props = {}) {
+      this.$emit('on-actions', { ...props })
+    },
+    onCancel () {
+      this.innerValue = false
+      this.$emit('change', false)
+    },
+    handleClickJump () {
+      this.emitEvent({ action: 'jump' })
+    },
+    uploadFileSuccess (props) {
+      this.emitEvent({ action: 'uploaded', file: props })
+    },
+    handleClickDownloadTpl () {
+      this.emitEvent({ action: 'download' })
+    },
+    cleanFile () {
+      this.file = []
+    },
+    handleClose () {
+      this.cleanFile()
+      this.innerValue = false
+      this.$emit('change', false)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '../../../theme/index';
+</style>
+<style lang="scss" scoped>
+.import-download__link {
+  color: var(--idooel-link-06);
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 22px;
+}
+.ele-modal-import__hint {
+  .import-hint__content {
+    padding: 16px;
+    border-radius: 2px;
+    height: 82px;
+    border: 1px dashed var(--idooel-link-06);
+    background: var(--idoole-black-02);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .import-hint__left {
+      .anticon-upload {
+        font-size: 48px;
+        color: var(--idooel-link-06);
+      }
+    }
+    .import-hint__right {
+      margin-left: 16px;
+      .hint-right__title {
+        font-size: 16px;
+        color: var(--idooel-link-06);
+        cursor: pointer;
+      }
+      .hint-right__sub-title {
+        font-size: 14px;
+        color: var(--idooel-link-03);
+      }
+    }
+  }
+  .import-footer__hint--text {
+    font-size: 14px;
+    color: var(--idooel-link-06);
+    line-height: 22px;
+  }
+}
+</style>

package/packages/business-components/modal-timeline/index.js

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

package/packages/business-components/modal-timeline/src/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <ele-modal v-on="$listeners" :value="value" :title="title" :buttonGroupMeta="buttonGroupMeta">
+    <slot name="alert"></slot>
+    <ele-timeline v-bind="meta"></ele-timeline>
+    <template v-if="showTextSlot" #footer-text>
+      <ele-text v-bind="textAttrs"></ele-text>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+// import { CONTEXT } from '@/utils'
+import { CONTEXT } from '../../../utils'
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-modal-timeline',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String
+    },
+    meta: {
+      type: Object,
+      default: () => ({})
+    },
+    buttonGroupMeta: {
+      type: Object,
+      default: () => {
+        return {
+          elements: [
+            {
+              label: '关闭',
+              key: 'cancel',
+              type: 'default',
+              eventName: 'cancel'
+            }
+          ]
+        }
+      }
+    },
+    contextProp: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  provide() {
+    return {
+      [CONTEXT]: () => {
+        return {
+          _route: this.$route.query,
+          _routeMeta: this.$route.meta,
+          ...this.contextProp
+        }
+      }
+    }
+  },
+  computed: {
+    showTextSlot () {
+      return !type.isEmpty(this.textAttrs)
+    },
+    textAttrs() {
+      const { text = {} } = this.buttonGroupMeta
+      return text
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/business-components/tabs-sub-center/index.js

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