@idooel/components 0.0.0 → 0.0.1-beta.10

package/packages/theme/form.scss

@@ -0,0 +1,22 @@
+.has-error {
+  .ele-upload__wrapper {
+    .ele-upload__inner {
+      border-color: $error-06;
+      .ele-upload__area {
+        .ele-upload__area--icon {
+          .anticon-cloud-upload {
+            color: $error-06;
+          }
+        }
+        .ele-upload__area--text {
+          .ele-upload__message {
+            color: $error-06;
+          }
+          .ele-upload__ext {
+            color: $error-03;
+          }
+        }
+      }
+    }
+  }
+}

package/packages/theme/index.scss

@@ -0,0 +1,28 @@
+@import 'variables.scss';
+@import 'form.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-008: #{$black-08};
+  //Table
+  --idooel-border-width: 2;
+  --idooel-border-color: #53a8ff;
+  --idooel-column-border-width: 1;
+  --idooel-column-border-color: #d9ecff;
+
+  //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};
+}

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/tpl/src/index.vue

@@ -1,6 +1,6 @@
 <template>
   <component 
-    v-if="modelName" 
+    v-if="modelNameValidator.existed"
     :is="modelName" 
     :ref="genModelRef" 
     v-bind="$attrs" 
@@ -9,12 +9,16 @@
       <slot :name="name" v-bind="data"></slot>
     </template>
   </component>
-  <div v-else>未正确配置模版</div>
+  <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: {
@@ -23,9 +27,19 @@ export default {
     }
   },
   components: {
-    [EleTreeTableModel.name]: EleTreeTableModel
+    [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()
     }
@@ -36,4 +50,7 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style lang="scss">
+@import '../../theme/index.scss';
+</style>

package/packages/tree/src/index.vue

@@ -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-table-model/src/index.vue

@@ -1,29 +1,35 @@
 <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 class="ele model__tree-table">
+    <section class="model__tree-table--container" v-if="showTree">
+      <div class="model__tree--title"></div>
+      <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>
-    <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 class="model__table--container">
+      <div class="model__table--title"></div>
+      <section :ref="modelTableWrapper" class="model__table--wrapper">
+        <ele-search-area :ref="searchArea" @search="onSearch" :data-source="searchMeta.elements"></ele-search-area>
+        <ele-button-group v-on="$listeners" :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>
   </section>
 </template>
@@ -61,6 +67,12 @@ export default {
       default: () => ({})
     }
   },
+  provide () {
+    return {
+      requestTreeData: this.requestTreeData,
+      requestTableData: this.requestTableData
+    }
+  },
   data () {
     return {
       treeData: [],
@@ -81,6 +93,9 @@ export default {
     }
   },
   computed: {
+    showTree () {
+      return !!Object.keys(this.treeMeta).length
+    },
     buttonGroup () {
       return uuidv4()
     },
@@ -160,13 +175,15 @@ export default {
     }
   },
   async created () {
-    this.treeData = await this.requestTreeData()
-    const [defaultTreeNode = {}] = this.treeData
-    this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
-    this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
+    if (this.showTree) {
+      this.treeData = await this.requestTreeData()
+      const [defaultTreeNode = {}] = this.treeData
+      this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
+      this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
+      this.currentTreeNodeData = defaultTreeNode
+    }
     const { fieldMap } = this.tableMeta
-    this.currentTreeNodeData = defaultTreeNode
-    this.tableData = await this.requestTableData(this.execTableFieldMap(fieldMap, defaultTreeNode))
+    this.tableData = await this.requestTableData(this.execTableFieldMap(fieldMap, this.currentTreeNodeData))
   },
   methods: {
     handleClickButtonGroup (props) {
@@ -268,23 +285,31 @@ export default {
 </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;
+.ele {
+  &.model__tree-table {
+    background: transparent;                                                                                                                                                                                                                 
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    .model__tree-table--container {
+      .model__tree--wrapper {
+        width: 240px;
+        background: #fff;
+        flex-shrink: 0;
+        padding: 16px;
+        box-sizing: border-box;
+        margin-right: 16px;
+        overflow-y: auto;
+      }
+    }
+    .model__table--container {
+      width: 100%;
+      min-width: 0;
+      background: #fff;
+      .model__table--wrapper {
+        background: #fff;
+      }
+    }
   }
 }
 </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

package/packages/upload/src/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="ele-upload__wrapper">
+    <FileUpload
+      class="ele-upload__inner"
+      v-show="isShowUploadContainer"
+      v-model="files"
+      :ref="uploadRef"
+      :drop="drop"
+      :chunk-enabled="chunkEnabled"
+      :chunk="chunkConfig"
+      :accept="accept"
+      :size="fileSizeLimit"
+      :post-action="postAction"
+      :multiple="multiple"
+      :maximum="getMaximum"
+      @input-file="onWatchInputFiles"
+      @input="onWatchFiles"
+      style="width: 100%;">
+      <section class="ele-upload__area">
+        <div class="ele-upload__area--icon">
+          <ele-icon type="cloud-upload"></ele-icon>
+        </div>
+        <div class="ele-upload__area--text">
+          <div class="ele-upload__message">单击或拖动文件到该区域以上传</div>
+          <div class="ele-upload__ext">文件小于{{ size }}M</div>
+        </div>
+      </section>
+    </FileUpload>
+    <section class="ele-files__wrapper">
+      <div class="ele-file__item" v-for="(file, idx) in files" :key="idx">
+        <div class="ele-file__suffix--icon">
+          <ele-icon type="icon-doc"></ele-icon>
+        </div>
+        <div class="ele-file__name">
+          <div class="ele-file__inner" @click="handleClickDownload(file)">{{ file.name }}</div>
+          <div v-if="!file.success" class="ele-uplpad__progress">
+            <a-progress :strokeWidth="2" :percent="Number(file.progress)" size="small" />
+          </div>
+        </div>
+        <div class="ele-file__delete" v-if="file.success || file.error">
+          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
+          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
+            <ele-icon type="delete"></ele-icon>
+          </span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import FileUpload from 'vue-upload-component'
+import { v4 as uuidv4 } from 'uuid'
+import { route, net } from '@idooel/shared'
+import EleIcon from '../../icon/src/index.vue'
+export default {
+  name: 'ele-upload',
+  components: {
+    FileUpload,
+    EleIcon
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    url: {
+      type: String,
+      default: '/zuul/api-file/workbench/file'
+    },
+    size: {
+      type: Number,
+      default: 100
+    },
+    accept: {
+      type: String
+    },
+    maximum: {
+      type: Number,
+      default: 10
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    drop: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: [String, Array]
+    },
+    querys: {
+      type: Object,
+      default: () => ({
+        _csrf: 'c81f993f-f044-45bb-b3af-2977d335042d',
+        _t: new Date().valueOf()
+      })
+    },
+    headers: {
+      type: Object,
+      default: () => ({})
+    },
+    byteConversion: {
+      type: Number,
+      default: 1024 * 1024
+    },
+    chunkEnabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      files: [],
+      saveToServerAsyncPageTimer: null
+    }
+  },
+  computed: {
+    getPayloads () {
+      return {
+        override: false
+      }
+    },
+    chunkConfig () {
+      const ret = route.toQueryString(this.querys)
+      return {
+        action: `${window.prefixPath}/zuul/api-file/workbench/file/temp/chunk/vue`,
+        headers: {
+          'X-XSRF-TOKEN': localStorage.getItem('token')
+        },
+        minSize: 3 * this.byteConversion,
+        maxActive: 3,
+        maxRetries: 5,
+        startBody: {
+          override: true,
+          path: '/cw'
+        },
+        uploadBody: {
+          override: true,
+          path: '/cw'
+        },
+        finishBody: {
+          override: true,
+          path: '/cw'
+        }
+      }
+    },
+    isFileUploadSuccessed () {
+      return this.files.every(file => file.success)
+    },
+    isShowUploadContainer () {
+      if (this.multiple) {
+        if (this.isFileUploadSuccessed && this.files.length >= this.maximum) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        if (this.isFileUploadSuccessed && this.files.length >= 1) {
+          return false
+        } else {
+          return true
+        }
+      }
+    },
+    getMaximum () {
+      return this.multiple ? this.maximum : 1
+    },
+    fileSizeLimit () {
+      return this.size * this.byteConversion
+    },
+    postAction () {
+      const ret = route.toQueryString(this.querys)
+      return `${window.prefixPath}${this.url}?${ret}`
+    },
+    uploadRef () {
+      return uuidv4()
+    },
+    fileSuffixIcon () {
+      return {
+        'doc': { name: 'icon-doc' },
+      }
+    },
+    fileIds () {
+      const fileIds = this.files.map(file => {
+        return file.response.data.fileID
+      })
+      return this.multiple ? fileIds : fileIds[0]
+    }
+  },
+  methods: {
+    handleClickDownload (file) {
+      console.log('download file', file)
+    },
+    handleClickDelete (file) {
+      this.$refs[this.uploadRef].remove(file)
+      this.$emit('change', this.fileIds)
+    },
+    onWatchFiles (files) {
+      this.files = files
+      if (this.isFileUploadSuccessed) {
+        this.$emit('change', this.fileIds)
+      }
+    },
+    async saveToServerAsyncPage (payloads = {}) {
+      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(resp =>{
+        const { data } = resp
+        if (data !== 'saveToServerAsyncPage') {
+          clearInterval(this.saveToServerAsyncPageTimer)
+        }
+      })
+      // const ret = await net.post({
+      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',
+      //   method: 'POST',
+      //   data: { ...payloads }
+      // }).then(resp => {
+      //   const { data: { data, code, message } } = resp
+      //   if (code !== '2000') {
+      //     this.$Message.error(message)
+      //     return
+      //   }
+      //   if (data !== 'saveToServerAsyncPage') {
+      //     clearInterval(timer)
+      //     const { fileID, size } = data
+      //     this.$emit('on-success', { ...data, fileId: fileID })
+      //     this.$Message.success('同步成功')
+      //     return { fileId: fileID, size }
+      //   }
+      // })
+      // return ret
+    },
+    onWatchInputFiles (newFile, oldFile) {
+      if (newFile && !oldFile) {
+        // add file
+        console.log('add', newFile)
+      }
+      if (newFile && oldFile) {
+        // update file
+        console.log('update', newFile)
+        const { success, active, chunk, response } = newFile
+        if (chunk && success && !active) {
+          console.log('chunk end')
+          const { data: { file, type } } = response
+          const payloads = {
+            filePath: file.match(/\/cw(.*)/)[0],
+            asyncID: uuidv4(),
+            isDeleteOrigin: false,
+            toImage: type === 'pdf' ? true : false,
+            unzip: type === 'zip' ? true : false,
+            _csrf: localStorage.getItem('token')
+          }
+          this.saveToServerAsyncPageTimer = setInterval(() => {
+            this.saveToServerAsyncPage(payloads)
+          }, 2000)
+        }
+      }
+      if (!newFile && oldFile) {
+        // delete file
+        console.log('delete')
+      }
+      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
+        if (!this.$refs[this.uploadRef].active) {
+          this.$refs[this.uploadRef].active = true
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ele-upload__inner {
+  opacity: 1 !important;
+  cursor: pointer;
+  border: 1px dashed var(--idooel-form-title-border-color);
+  background: var(--idooel-form-upload-bg-color) !important;
+  &:hover {
+    border-color: var(--idooel-form-upload-border-hover-color);
+  }
+  border-radius: var(--idooel-form-border-radius);
+}
+.ele-upload__wrapper {
+  width: 100%;
+  .ele-upload__area {
+    padding: 16px;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    flex-direction: row;
+    .ele-upload__area--icon {
+      .anticon-cloud-upload {
+        font-size: 48px;
+        color: var(--idooel-primary-color);
+      }
+    }
+    .ele-upload__area--text {
+      margin-left: 16px;
+      .ele-upload__message {
+        font-size: 16px;
+        color: var(--idoole-black-008);
+        text-align: left;
+      }
+      .ele-upload__ext {
+        text-align: left;
+        font-size: 14px;
+        color: var(--idoole-black-06);
+      }
+    }
+  }
+  .ele-files__wrapper {
+    .ele-file__item {
+      width: 100%;
+      margin-top: 8px;
+      padding: 8px 12px;
+      border-radius: var(--idooel-form-border-radius);
+      background: var(--idooel-form-upload-bg-color);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .ele-file__suffix--icon {}
+      .ele-file__name {
+        flex: 1;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        margin-left: 8px;
+        cursor: pointer;
+        .ele-file__inner {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      .ele-file__delete {
+        margin-left: 8px;
+        .ele-file__delete--icon {
+          margin-left: 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>