meixioacomponent 0.4.2 → 0.4.6

package/packages/components/base/baseUpload/baseUploadItem.vue

@@ -45,13 +45,12 @@
       v-if="(isUploadProImg || type == 'img') && imgSrc"
       class="type-pre-views"
     >
-      <div class="handleUploadItem">
+      <div class="handleUploadItem" v-if="!disabled">
         <base-icon
           :size="`l`"
           :color="`d`"
           :event="true"
           :plain="true"
-          v-if="!disabled"
           style="width: 32px; height: 32px;"
           :name="`meixicomponenticon-close`"
           @iconClick="handleDeleteUploadItem"
@@ -224,12 +223,12 @@ export default {
     clickFile() {
       const { disabled } = this.$props
       if (disabled) return
+      this.$refs.inputFile.value = ''
       this.$refs.inputFile.click()
     },
 
     async returnFiles(files) {
       let list = []
-      console.log(files)
       const { fileSize } = this.$props
       for (let i = 0; i < files.length; i++) {
         if (files[i].size < fileSize * 1048576) {

package/packages/components/base/baseUpload/mixins.js

@@ -1,3 +1,4 @@
+import { Notification } from 'element-ui'
 import componentConfig from '../../../config/componentConfig'
 import useUpload from '../../../config/use/UseUpload'
 export const baseUploadMixins = {
@@ -14,6 +15,7 @@ export const baseUploadMixins = {
     uploadPath: {
       type: [String, Array],
       default: () => {
+        //  第二位 代表 是oss 还是 只有miniio
         return [0, 1]
       },
     },
@@ -55,11 +57,19 @@ export const baseUploadMixins = {
     },
 
     uploadEd(list) {
+      const filterList = list.filter((item) => {
+        if (!item.upload || item.upload.state == 1) {
+          return item
+        } else {
+          Notification.error('文件取消上传或上传失败！')
+        }
+      })
       if (!this.isGroup) {
-        this.module = list
+        this.module = filterList
       }
       this.uploadLoading = false
-      this.$emit('uploadEd', list)
+      this.module = filterList
+      this.$emit('uploadEd', filterList)
     },
   },
 }

package/packages/components/base/baseUploadTemplate/index.vue

@@ -20,7 +20,7 @@
       <div class="custom-upload-content" v-on:paste="onPasteFile">
         <span class="notice-text">
           请选择需要导入的文件(
-          <strong>点击此处后</strong>
+          <strong style="cursor: pointer;">点击此处后</strong>
           >支持黏贴文件上传)
         </span>
         <div class="upload-handle-wrap" v-show="stepActive == 0">
@@ -41,6 +41,7 @@
             :fileType="fileType"
             :auto-upload="false"
             style="display: none;"
+            :uploadPath="uploadPath"
             :uploadType="uploadType"
             ref="baseUploadItemRef"
             @uploadEd="uploadEd"
@@ -129,6 +130,10 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    uploadedCallBack: {
+      type: Function,
+    },
   },
   components: { baseUploadItem, BaseDefaultSvg },
   computed: {
@@ -152,7 +157,7 @@ export default {
         },
         {
           type: 'primary',
-          disabled: this.stepActive == 1 ? true : false,
+          disabled: this.stepActive == 1 || !this.fileName ? true : false,
           text: this.stepActive == 0 ? '导入文件' : '确定',
           click: () => {
             if (this.stepActive == 0) {
@@ -174,10 +179,16 @@ export default {
     uploadEd(e) {
       this.stepActive = 2
       const { url } = e[0]
+      console.log(e)
       if (url == 'cancel') {
         this.result = 'fail'
       } else {
-        result = 'success'
+        this.result = 'success'
+      }
+      const { uploadedCallBack } = this.$props
+
+      if (uploadedCallBack) {
+        this.uploadedCallBack(this.result)
       }
     },
     onHandleFile() {
@@ -232,5 +243,10 @@ export default {
       justify-content: center;
     }
   }
+
+  /deep/.svg-icon {
+    width: 100px;
+    height: 100px;
+  }
 }
 </style>

package/packages/components/base/upload/upload.vue

@@ -27,6 +27,7 @@
         :key="index"
         :item="item"
         v-for="(item, index) in filterArray"
+        @deleteAppendixItem="deleteAppendixItem"
       ></uploadItemVue>
     </div>
   </div>
@@ -78,11 +79,11 @@ export default {
     },
 
     completed() {
-      let uploadArray = this.$props.uploadArray
+      let uploadArray = this.uploadArray
       return (
-        uploadArray.filter((item) => {
+        uploadArray?.filter((item) => {
           return item.process == 100
-        }).length / uploadArray.length
+        }).length / uploadArray?.length
       )
     },
     totalStyle() {
@@ -114,24 +115,27 @@ export default {
     createUpload(uploadItem) {
       this.uploadArray.push(uploadItem)
       if (uploadItem.file && uploadItem.process != 100) {
-        uploadItem.upload = new Upload({
-          file: uploadItem.file,
-          uploadProgressFn: (process) => {
-            uploadItem.process = process
-          },
-        })
+        this.$set(
+          uploadItem,
+          'upload',
+          new Upload({
+            file: uploadItem.file,
+            uploadProgressFn: (process) => {
+              uploadItem.process = process
+            },
+          }),
+        )
+
         uploadItem.upload
           .start()
           .then((uploadEdUrl) => {
             this.$set(uploadItem, 'url', uploadEdUrl)
-            // uploadItem.url = uploadEdUrl;
             if (uploadItem.cb) {
               uploadItem.cb([uploadItem])
             }
             this.uploadEd()
           })
           .catch((error) => {
-            // uploadItem.url = "cancel";
             this.$set(uploadItem, 'url', 'cancel')
             this.uploadEd()
           })
@@ -179,6 +183,21 @@ export default {
       }
     },
 
+    deleteAppendixItem(item) {
+      this.$confirm('此操作将取消当前未上传的文件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          if (item.upload?.state == 0) {
+            item.upload.cancel()
+          }
+          // this.uploadEd()
+        })
+        .catch(() => {})
+    },
+
     uploadFailed() {
       if (this.$props.uploadEdEvent) {
         this.$props.uploadEdEvent()
@@ -236,8 +255,12 @@ export default {
     span {
       color: var(--bg-white) !important;
     }
-    /deep/ i {
-      color: var(--bg-white) !important;
+    /deep/ .base-icon-wrap {
+      background: var(--color-warn);
+      i {
+        color: white !important;
+        font-weight: var(--font-weight-kg);
+      }
     }
   }
   .upload-content {

package/packages/components/base/upload/uploadItem.vue

@@ -6,7 +6,7 @@
     <div class="item-content">
       <div class="item-info">
         <span class="item-name">{{ fileName }}</span>
-        <span class="item-size">({{ fileSize }})</span>
+        <span class="item-size">- ({{ fileSize }})</span>
       </div>
       <div class="item-process-wrap" v-if="type == 'upload'">
         <div class="item-process-bar" :style="barStyle"></div>
@@ -16,15 +16,17 @@
       <base-icon
         :size="`l`"
         :active="true"
-        v-if="zhengqueShow"
-        :name="`meixicomponenticon-zhengque`"
+        :event="true"
+        @iconClick="handleClose"
+        :name="uploadTypeIcon"
+        v-if="type == 'upload'"
       ></base-icon>
       <base-icon
         :size="`l`"
         :event="true"
-        :name="`meixicomponenticon-lajixiang`"
         v-if="type == 'appendix'"
-        @iconClick="deleteAppendixItem"
+        @iconClick="handleClose"
+        :name="`meixicomponenticon-lajixiang`"
       ></base-icon>
     </div>
   </div>
@@ -35,10 +37,10 @@ import {
   fileSuffix,
   filterFileSize,
   jugeFileTypeKey,
-} from "../../../utils/utils";
+} from '../../../utils/utils'
 export default {
   data() {
-    return {};
+    return {}
   },
   props: {
     item: {
@@ -48,37 +50,58 @@ export default {
 
     type: {
       type: String,
-      default: "upload",
+      default: 'upload',
     },
   },
+  created() {},
   computed: {
     zhengqueShow() {
-      return this.process == 100 && this.$props.type == "upload";
+      return this.process == 100 && this.$props.type == 'upload'
+    },
+    uploadTypeIcon() {
+      const { item } = this.$props
+      if (this.process == 100) {
+        const { upload } = item
+        if (upload.state == 1) {
+          return 'meixicomponenticon-zhengque'
+        } else if (upload.state == 2) {
+          return 'meixicomponenticon-close'
+        }
+      } else {
+        return 'meixicomponenticon-close'
+      }
     },
     fileName() {
-      return this.item.file.name;
+      return this.item.file.name
     },
     svgKey() {
-      return jugeFileTypeKey(fileSuffix(this.fileName));
+      return jugeFileTypeKey(fileSuffix(this.fileName))
     },
     process() {
-      return this.$props.item.process;
+      return this.$props.item.process
     },
     fileSize() {
-      return filterFileSize(this.$props.item.file.size);
+      return filterFileSize(this.$props.item.file.size)
     },
     barStyle() {
       return {
         width: `${this.process}%`,
-      };
+      }
     },
   },
   methods: {
-    deleteAppendixItem() {
-      this.$emit("deleteAppendixItem");
+    handleClose() {
+      const { type } = this.$props
+      if (type == 'upload') {
+        if (this.process != 100) {
+          this.$emit('deleteAppendixItem', this.$props.item)
+        }
+      } else {
+        this.$emit('deleteAppendixItem', this.$props.item)
+      }
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>

package/packages/components/dynamicmount/index.js

@@ -1,7 +1,7 @@
-import Vue from "vue";
-import dynamicMountComponent from "./dynamicMount.vue";
-import componentConfig from "../../config/componentConfig";
-const ComponentInsertConstructor = Vue.extend(dynamicMountComponent);
+import Vue from 'vue'
+import dynamicMountComponent from './dynamicMount.vue'
+import componentConfig from '../../config/componentConfig'
+const ComponentInsertConstructor = Vue.extend(dynamicMountComponent)
 
 //使用方法
 // this.$dynmaicMount({
@@ -11,38 +11,39 @@ const ComponentInsertConstructor = Vue.extend(dynamicMountComponent);
 //   });
 
 const Insert = (options) => {
-  componentConfig.setDynamicId();
-  let id = componentConfig.dynamicId;
-  const componentInsertConstructor = new ComponentInsertConstructor();
-  componentInsertConstructor.vm = componentInsertConstructor.$mount();
-  componentInsertConstructor.dom = componentInsertConstructor.vm.$el;
-  componentInsertConstructor.mountedDom = options.mountedDom;
-  componentInsertConstructor.vm.id = id;
-  componentInsertConstructor.vm.vueComponent = options.vueComponent;
-  componentInsertConstructor.componentProps = options.componentProps;
-  componentInsertConstructor.vm.init();
-  let ele = document.createElement("div");
-  ele.setAttribute("id", `dynamic-${id}`);
+  componentConfig.setDynamicId()
+  let id = componentConfig.dynamicId
+  const componentInsertConstructor = new ComponentInsertConstructor()
+  componentInsertConstructor.vm = componentInsertConstructor.$mount()
+  componentInsertConstructor.dom = componentInsertConstructor.vm.$el
+  componentInsertConstructor.mountedDom = options.mountedDom
+  componentInsertConstructor.vm.id = id
+  componentInsertConstructor.vm.vueComponent = options.vueComponent
+  componentInsertConstructor.componentProps = options.componentProps
+  componentInsertConstructor.vm.init()
+  let ele = document.createElement('div')
+  ele.setAttribute('id', `dynamic-${id}`)
+  ele.setAttribute('class', 'dynamic')
   if (options.mountedDom) {
-    ele.style.height = "100%";
-    componentInsertConstructor.vm.$el.style.height = "100%";
+    ele.style.height = '100%'
+    componentInsertConstructor.vm.$el.style.height = '100%'
   } else {
-    ele.style.position = `fixed`;
-    ele.style.zIndex = 9999;
-    ele.style.top=`0px`;
-    ele.style.left=`0px`;
+    ele.style.position = `fixed`
+    ele.style.zIndex = 9999
+    ele.style.top = `0px`
+    ele.style.left = `0px`
   }
-  ele.appendChild(componentInsertConstructor.dom);
+  ele.appendChild(componentInsertConstructor.dom)
   if (options.mountedDom) {
-    options.mountedDom.appendChild(ele);
+    options.mountedDom.appendChild(ele)
   } else {
-    document.body.appendChild(ele);
+    document.body.appendChild(ele)
   }
-  return componentInsertConstructor.vm;
-};
+  return componentInsertConstructor.vm
+}
 
 export default {
   install(Vue, options = {}) {
-    Vue.prototype.$dynmaicMount = Insert;
+    Vue.prototype.$dynmaicMount = Insert
   },
-};
+}

package/packages/components/index.js

@@ -36,6 +36,11 @@ import basePopoverButton from './base/basePopoverButton'
 import baseTreeSelect from './base/baseTreeSelect'
 import baseUploadTemplate from './base/baseUploadTemplate'
 import VueCropper from 'vue-cropper'
+import baseList from './base/baseList'
+import baseNumberInput from './base/baseNumberInput'
+import baseStoreSelect from './base/baseStoreSelect'
+import baseFormItem from './proForm/proForm/proFormItem'
+import baseSingleImgUpload from './base/baseSingleImgUpload'
 // js 文件相关
 import Theme from '../config/theme/theme'
 import DynamicMount from './dynamicmount/index.js'
@@ -50,6 +55,8 @@ import useUpload from '../config/use/UseUpload'
 import useFixedHeader from '../config/use/useFixedHeader'
 import useCropper from '../config/use/useCropper'
 
+import VueDND from 'awe-dnd'
+
 const meixicomponents = [
   baseAnchor,
   baseAppendix,
@@ -88,14 +95,20 @@ const meixicomponents = [
   basePopoverButton,
   baseTreeSelect,
   baseUploadTemplate,
+  baseList,
+  baseNumberInput,
+  baseStoreSelect,
+  baseFormItem,
+  baseSingleImgUpload
 ]
 
 const install = (Vue) => {
-  meixicomponents.forEach((component) => {
-    Vue.component(component.name, component)
+  meixicomponents.forEach((baseComponent) => {
+    Vue.component(baseComponent.name, baseComponent)
   })
   Vue.use(DynamicMount)
   Vue.use(VueCropper)
+  Vue.use(VueDND)
 }
 
 if (typeof window !== 'undefined' && window.Vue) {
@@ -143,6 +156,10 @@ export default {
   basePopoverButton,
   baseTreeSelect,
   baseUploadTemplate,
+  baseNumberInput,
+  baseStoreSelect,
+  baseFormItem,
+  baseSingleImgUpload,
   Theme,
   SelectStore,
   useImg,

package/packages/components/proForm/dialogForm/baseDialogForm.vue

@@ -48,6 +48,10 @@
                 ></slot>
               </template>
             </template>
+
+            <template :slot="item.key" v-if="item.formType == 'template'">
+              <slot :name="`formWrap-${item.key}`"></slot>
+            </template>
           </pro_formVue>
         </div>
       </div>
@@ -165,6 +169,7 @@ export default {
   },
   methods: {
     createSlots() {
+      this.slotList = []
       for (let i = 0; i < this.module.length; i++) {
         let item = this.module[i]
         for (let j = 0; j < item.formList.length; j++) {
@@ -176,30 +181,35 @@ export default {
       }
     },
     disableWatcherResult(params) {
-      const { result, type, key } = params
-      let index = 0
-      let cindex = -1
+      this.$nextTick(() => {
+        const { result, type, key } = params
+        let index = 0
+        let cindex = -1
 
-      for (let i = 0; i < this.module.length; i++) {
-        let item = this.module[i]
-        for (let j = 0; j < item.formList.length; j++) {
-          let citem = item.formList[j]
-          if (citem.key == key) {
-            index = i
-            cindex = j
-            break
+        for (let i = 0; i < this.module.length; i++) {
+          let item = this.module[i]
+          for (let j = 0; j < item.formList.length; j++) {
+            let citem = item.formList[j]
+            if (citem.key == key) {
+              index = i
+              cindex = j
+              break
+            }
           }
         }
-      }
 
-      if (cindex > -1) {
-        let formItem = this.module[index].formList[cindex]
-        if (type == 'hide') {
-          this.$set(formItem, 'renderHide', result)
-        } else if (type == 'disable') {
-          this.$set(formItem, 'disabled', result)
+        if (cindex > -1) {
+          let formItem = this.module[index].formList[cindex]
+          if (type == 'hide') {
+            this.$set(formItem, 'renderHide', result)
+          } else if (type == 'disable') {
+            this.$set(formItem, 'disabled', result)
+          } else if (type == 'template') {
+            formItem.type = result
+            this.createSlots()
+          }
         }
-      }
+      })
     },
     setLabelPosition(type) {
       if (!type) {

package/packages/components/proForm/proForm/proFormItem/index.js

@@ -0,0 +1,6 @@
+import baseFormItem from "./pro_form_item.vue";
+
+baseFormItem.install = function (Vue) {
+  Vue.component(baseFormItem.name, baseFormItem);
+};
+export default baseFormItem;