组件优化

magic-boot-ui/src/components/magic/basic/mb-button.vue

@@ -1,9 +1,10 @@
 <template>
   <el-button
-    v-bind="el_"
+    v-bind="props_"
+    :plain="plain"
     @click="buttonClick"
   >
-    {{ el_.text }}
+    {{ props_.text }}
   </el-button>
 </template>
 
@@ -14,10 +15,14 @@ import {ElNotification} from "element-plus";
 export default {
   name: 'MbButton',
   props: {
-    el: {
+    props: {
       type: Object,
       default: () => {}
     },
+    plain: {
+      type: Boolean,
+      default: false
+    },
     btnType: {
       type: String,
       default: ''
@@ -61,7 +66,7 @@ export default {
   },
   data() {
     return {
-      el_: this.el || {},
+      props_: this.props || {},
       requestMethod_: this.requestMethod,
       beforeConfirm_: this.beforeConfirm,
       successTips_: this.successTips,
@@ -72,9 +77,9 @@ export default {
     if (this.btnType) {
       if (this.btnType === 'delete') {
         this.requestMethod_ = 'delete'
-        this.el_.type = 'danger'
-        this.el_.text = '删除'
-        this.el_.icon = 'ElIconDelete'
+        this.props_.type = 'danger'
+        this.props_.text = '删除'
+        this.props_.icon = 'ElIconDelete'
         this.beforeConfirm_ = '此操作将永久删除该数据, 是否继续?'
         this.successTips_ = '删除成功！'
         this.failTips_ = '删除失败！'

magic-boot-ui/src/components/magic/basic/mb-editor-table.vue

@@ -17,6 +17,11 @@
         />
       </template>
     </mb-table>
+    <mb-table ref="magicTable" v-bind="tableOptions">
+      <template v-for="col in cols" #[col.field]="{ row, index }">
+        {{ row.name }}
+      </template>
+    </mb-table>
   </div>
 </template>
 

magic-boot-ui/src/components/magic/data/mb-search.vue

@@ -4,7 +4,7 @@
       <span v-for="(it, i) in where">
         <el-form-item v-if="it && it.label" :label="it.label" :key="i">
           <el-input v-if="!it.type || it.type == 'input'" @input="input(it.input)" v-model="it.value" :placeholder="it.placeholder || ('请输入' + it.label)" style="width: 200px;" class="filter-item" />
-          <mb-select v-else-if="it.type == 'select'" v-model="it.value" :placeholder="'请选择' + it.label" v-bind="it.properties" />
+          <mb-select v-else-if="it.type == 'select'" v-model="it.value" :placeholder="'请选择' + it.label" v-bind="it.props" />
           <el-date-picker
             v-else-if="it.type == 'date' || it.type == 'datetime' || it.type == 'daterange' || it.type == 'datetimerange'"
             v-model="it.value"
@@ -18,7 +18,7 @@
           >
           </el-date-picker>
           <mb-inputrange v-model="it.value" v-else-if="it.type == 'inputrange'" />
-          <component v-else :is="it.type" v-model="it.value" v-bind="it.properties" />
+          <component v-else :is="it.type" v-model="it.value" v-bind="it.props" />
         </el-form-item>
       </span>
       <el-form-item>
@@ -36,7 +36,7 @@
 
 <script setup>
 
-import { nextTick, watch, onMounted } from 'vue'
+import { nextTick } from 'vue'
 
 const props = defineProps({
   where: {
@@ -55,7 +55,7 @@ for(var key in props.where){
   }
 }
 
-const emit = defineEmits(['search', 'mounted'])
+const emit = defineEmits(['search'])
 
 function input(input){
   if(input){
@@ -104,10 +104,6 @@ function reset() {
   nextTick(() => emit('search'))
 }
 
-onMounted(() => {
-  emit('mounted')
-})
-
 </script>
 
 <style scoped>

magic-boot-ui/src/components/magic/data/mb-table.vue

@@ -7,7 +7,7 @@
       border
       fit
       highlight-current-row
-      v-bind="el"
+      v-bind="props.props"
       style="width: 100%;"
       @sort-change="sortChange"
       @selection-change="selectionChange"
@@ -43,7 +43,7 @@ import common from "../../../scripts/common";
 const { proxy } = getCurrentInstance()
 
 const props = defineProps({
-  el: {
+  props: {
     type: Object,
     default: () => {}
   },
@@ -87,9 +87,7 @@ const props = defineProps({
   },
   cols: {
     type: Array,
-    default: () => {
-      return []
-    }
+    default: () => []
   },
   emptyText: {
     type: String,

magic-boot-ui/src/components/magic/form/mb-upload-file.vue

@@ -11,7 +11,7 @@
     :multiple="multiple"
     :limit="limit"
     :on-exceed="handleExceed"
-    :file-list="fileList"
+    v-bind="uploadDynamicProps"
     :show-file-list="showFileList"
     :before-upload="beforeAvatarUpload"
     :on-success="handleAvatarSuccess"
@@ -103,7 +103,8 @@ export default {
       urls: [],
       uploadDomId: Math.random(),
       fileList: [],
-      uploadLoading: false
+      uploadLoading: false,
+      uploadDynamicProps: {}
     }
   },
   watch: {
@@ -121,6 +122,14 @@ export default {
     } else {
       this.renderFile()
     }
+    // 解决多文件上传时，第一次上传的多个的时候 只能有一个成功的bug
+    if (this.modelValue instanceof Array && this.modelValue.length > 0) {
+      this.uploadDynamicProps.fileList = this.fileList
+    } else {
+      if (this.modelValue) {
+        this.uploadDynamicProps.fileList = this.fileList
+      }
+    }
     if(this.action){
       this.actionUrl = import.meta.env.VITE_APP_BASE_API + this.action
     }

magic-boot-ui/src/components/magic/form/mb-upload-image.vue

@@ -6,11 +6,12 @@
       tag="div"
       draggable=".draggable-item"
       @end="onDragEnd"
+      item-key="id"
     >
       <template #item="{ element }">
         <div
           class="draggable-item"
-          :style="{ width: width.replace('px', '') + 'px', height: height.replace('px', '') + 'px' }"
+          :style="{ width: width + 'px', height: height + 'px' }"
         >
           <el-image
             :src="$global.baseApi + element"
@@ -35,9 +36,9 @@
           v-if="(!multiple && urls.length == 0) || (multiple && urls.length < limit)"
           ref="uploadRef"
           class="uploadBox"
-          :style="{ width: width.replace('px', '') + 'px', height: height.replace('px', '') + 'px' }"
+          :style="{ width: width + 'px', height: height + 'px' }"
           :action="action"
-          :file-list="fileList"
+          v-bind="uploadDynamicProps"
           :headers="headers"
           accept=".jpg,.jpeg,.png,.gif"
           :show-file-list="false"
@@ -118,12 +119,12 @@ export default {
       default: () => {}
     },
     width: {
-      type: String,
-      default: '100'
+      type: Number,
+      default: 100
     },
     height: {
-      type: String,
-      default: '100'
+      type: Number,
+      default: 100
     },
     tip: {
       type: String,
@@ -146,7 +147,8 @@ export default {
       isUploading: false,
       cropperOption: {},
       urls: [],
-      fileList: []
+      fileList: [],
+      uploadDynamicProps: {}
     }
   },
   watch: {
@@ -179,6 +181,14 @@ export default {
         }
       }
     }
+    // 解决多图片上传时，第一次上传的多个的时候 只能有一个成功的bug
+    if (this.modelValue instanceof Array && this.modelValue.length > 0) {
+      this.uploadDynamicProps.fileList = this.fileList
+    } else {
+      if (this.modelValue) {
+        this.uploadDynamicProps.fileList = this.fileList
+      }
+    }
   },
   methods: {
     handleRemove(url) {
@@ -205,10 +215,11 @@ export default {
       console.log(file)
     },
     handleAvatarSuccess(res, file, fileList) {
+      console.log(res)
       this.fileList = fileList
       if (res.data) {
         this.urls.push(res.data.url)
-        console.log(this.urls)
+        // console.log(this.urls)
         if (this.multiple) {
           this.$emit('update:modelValue', this.urls)
           this.$emit('change', this.urls)

magic-boot-ui/src/components/magic/template/mb-list.vue

@@ -8,7 +8,7 @@
         <el-button v-if="it.type == 'add'" v-permission="it.permission" class="filter-item" type="primary" icon="ElIconPlus" @click="it.click">
           {{ it.label || '添加' }}
         </el-button>
-        <mb-button v-if="it.type == 'delete'" v-permission="it.permission" :el="{ plain: true }" :request-url="it.url" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reload" />
+        <mb-button v-if="it.type == 'delete'" v-permission="it.permission" :plain="true" :request-url="it.url" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reload" />
       </div>
     </el-row>