@ddwl/ddwl-ui 1.3.18 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ddwl/ddwl-ui",
-  "version": "1.3.18",
+  "version": "1.4.1",
   "private": false,
   "main": "dist/index.common.js",
   "style": "dist/index.css",

package/src/lib/install/index.js

@@ -1,4 +1,5 @@
 import previewVue from '../../packages/file-preview/index.vue'
+import importVue from '../../packages/import-file/index.vue'
 
 export default (Vue) => {
   // 文件预览
@@ -10,4 +11,51 @@ export default (Vue) => {
     instance.defaultIndex = defaultIndex
     instance.list = list
   }
+
+  // 文件导入
+  Vue.prototype.$importFile = ({
+    width = '520px',
+    title = '文件导入',
+    templateUrl = '',
+    token = '',
+    templateDownloadMethod = null,
+    fileType = ['xlsx', 'xls'],
+    fileSize = 5,
+    slotRender = null
+  }) => {
+    return new Promise((resolve, reject) => {
+      const Import = Vue.extend(importVue)
+      const instance = new Import()
+      const el = instance.$mount().$el
+      document.body.appendChild(el)
+
+      instance.value = true
+      instance.width = width
+      instance.title = title
+      instance.templateUrl = templateUrl
+      instance.token = token
+      instance.templateDownloadMethod = templateDownloadMethod
+      instance.fileType = fileType
+      instance.fileSize = fileSize
+      instance.slotRender = slotRender
+
+      const destroy = () => {
+        instance.$destroy()
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+
+      instance.$on('submit', async (callback, file) => {
+        try {
+          resolve({ file, callback })
+        } catch (e) {
+          callback(new Error(e))
+        }
+      })
+
+      instance.$on('close', () => {
+        reject()
+        Vue.nextTick(destroy)
+      })
+    })
+  }
 }

package/src/main.js

@@ -6,7 +6,6 @@ import Drawer from './packages/drawer'
 import FilterTree from './packages/filter-tree'
 import Form from './packages/form'
 import FormItem from './packages/form-item'
-import ImportFile from './packages/import-file'
 import Menu from './packages/menu'
 import Popconfirm from './packages/popconfirm'
 import Render from './packages/render'
@@ -31,7 +30,6 @@ const components = [
   FilterTree,
   Form,
   FormItem,
-  ImportFile,
   Menu,
   Popconfirm,
   Render,

package/src/packages/import-file/index.vue

@@ -39,27 +39,27 @@
         模板下载
       </el-button>
     </el-form>
-    <slot>
+    <div v-if="slotRender">
+      <d-render :render="slotRender" />
+    </div>
+    <div v-else>
       <p>1. 支持导入格式为{{ fileType.join('、') }}的文件，且文件大小不可超过{{ fileSize }}M</p>
       <p>2. 模板的表头不可更改，不可删除</p>
       <p>3. 若导入数据存在编码一致的情况则会更新原有数据</p>
       <p>4. 若导入过程中有问题，需调整模板内容后再重新导入</p>
-    </slot>
+    </div>
   </d-dialog>
 </template>
 
 <script>
 import DDialog from '../dialog'
+import DRender from '../render'
 
 export default {
   name: 'DImportFile',
-  components: { DDialog },
-  model: {
-    prop: 'modelValue',
-    event: 'change'
-  },
+  components: { DDialog, DRender },
   props: {
-    modelValue: {
+    value: {
       default: false,
       type: Boolean
     },
@@ -75,6 +75,10 @@ export default {
       default: '',
       type: String
     },
+    token: {
+      default: '',
+      type: String
+    },
     templateDownloadMethod: {
       type: Function,
       default: null
@@ -86,26 +90,32 @@ export default {
     fileSize: {
       default: 5,
       type: Number
+    },
+    slotRender: {
+      default: null,
+      type: Function
     }
   },
   data() {
     return {
+      visible: false,
       fileList: [],
       form: {
         file: ''
       }
     }
   },
-  computed: {
+  watch: {
+    value: {
+      handler(value) {
+        this.visible = value
+      }
+    },
     visible: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.form.file = ''
-        this.fileList = []
-        this.$refs.importForm.clearValidate()
-        this.$emit('change', value)
+      handler(value) {
+        if (!value) {
+          this.$emit('close', value)
+        }
       }
     }
   },
@@ -114,13 +124,7 @@ export default {
       if (this.templateDownloadMethod) {
         this.templateDownloadMethod()
       } else {
-        let token
-        try {
-          token = JSON.parse(window.localStorage.getItem('userInfo')).token
-        } catch (e) {
-          token = ''
-        }
-        window.location.href = `${this.templateUrl}?authToken=${token}`
+        window.location.href = `${this.templateUrl}?authToken=${this.token}`
       }
     },
     uploadChange(file, fileList) {
@@ -146,7 +150,7 @@ export default {
         return
       }
       try {
-        this.$emit('submit', this.form.file, callback)
+        this.$emit('submit', callback, this.form.file)
       } catch (e) {
         callback(new Error(false))
       }

package/src/packages/upload/index.vue

@@ -297,6 +297,11 @@ export default {
     .img-part {
       width: 80px;
       height: 80px;
+      .el-upload--picture-card {
+        width: 80px;
+        height: 80px;
+        line-height: 80px;
+      }
     }
   }
   .file-list {