组件优化

magic-boot-ui/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
-    "element-plus": "^2.1.8",
+    "element-plus": "^2.1.11",
     "nprogress": "0.2.0",
     "path-browserify": "^1.0.1",
     "vue": "^3.2.25",

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>
 

magic-boot-ui/src/views/examples/test-mb-list.vue

@@ -44,7 +44,7 @@ const listOptions = reactive({
         label: '角色',
         props: {
           url: '/system/role/all',
-          el: { multiple: true }
+          multiple: true
         }
       }
     },
@@ -177,7 +177,7 @@ const formOptions = reactive({
         props: {
           url: '/system/role/all',
           placeholder: '请选择角色',
-          el: { multiple: true }
+          multiple: true
         }
       }]
     }, {

magic-boot-ui/src/views/examples/upload-file.vue

@@ -1,13 +1,15 @@
 <template>
   <div style="padding: 50px;">
-    <h2>上传文件</h2>
+    <h2>上传文件（单文件）</h2>
     <mb-upload-file v-model="fileUrl" @change="fileChange" />
+    <h2>上传文件（多文件）</h2>
+    <mb-upload-file v-model="fileUrls" @change="fileChange" multiple />
     <h2>上传图片（id）</h2>
     <mb-upload-image :external-id="externalId" multiple :external-type="externalType" />
     <h2>上传图片（url、单图）</h2>
     <mb-upload-image v-model="imgUrl" @change="imgChange" tip="建议上传尺寸：710*345" />
     <h2>上传图片（url、多图）</h2>
-    <mb-upload-image v-model="multipleImgUrl" width="120" height="120" multiple :limit="3" @change="multipleImgChange" />
+    <mb-upload-image v-model="multipleImgUrl" :width="120" :height="120" multiple :limit="3" @change="multipleImgChange" />
   </div>
 </template>
 
@@ -20,8 +22,9 @@ export default {
       externalId: this.$common.uuid(),
       externalType: '营业执照',
       imgUrl: '',
-      multipleImgUrl: '',
-      fileUrl: ''
+      multipleImgUrl: ['userfiles/2022-05-13/6be62f3203904410a92530f8e300e233/QQ图片20220505165410.jpg'],
+      fileUrl: '',
+      fileUrls: ''
     }
   },
   methods: {
@@ -32,7 +35,7 @@ export default {
       console.log(this.imgUrl)
     },
     multipleImgChange() {
-      console.log(this.multipleImgUrl)
+      // console.log(this.multipleImgUrl)
     }
   }
 }

magic-boot-ui/src/views/system/dict/dict-list.vue

@@ -71,7 +71,7 @@ const tableOptions = reactive({
       type: 'select',
       label: '字典类型',
       value: '',
-      properties: {
+      props: {
         'all-option': true,
         type: 'dict_type'
       }

magic-boot-ui/src/views/system/menu/menu-list.vue

@@ -47,7 +47,7 @@ let menuTree = ref([])
 const menuData = ref([])
 let searchValue = ref('')
 const tableOptions = reactive({
-  el: {
+  props: {
     'tree-props': { children: 'children', hasChildren: 'hasChildren' },
     'row-key': 'id'
   },

magic-boot-ui/src/views/system/office/office-list.vue

@@ -82,7 +82,7 @@ const officeData = ref([])
 const officeTree = ref([])
 const searchValue = ref('')
 const tableOptions = reactive({
-  el: {
+  props: {
     'default-expand-all': true,
     'tree-props': { children: 'children', hasChildren: 'hasChildren' },
     'row-key': 'id'

magic-boot-ui/src/views/system/user/user-list.vue

@@ -38,7 +38,7 @@
         <el-button v-permission="'user:save'" class="filter-item" type="primary" icon="ElIconEdit" @click="handleCreate">
           添加
         </el-button>
-        <mb-button v-permission="'user:delete'" :el="{ plain: true }" :request-url="'/system/user/delete'" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reloadTable" />
+        <mb-button v-permission="'user:delete'" plain :request-url="'/system/user/delete'" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reloadTable" />
         <mb-upload-file ref="importUserRef" action="/system/user/import/preview" label="导入用户" :show-tip="false" :show-file-list="false" :show-remove-tip="false" :on-success="importUserSuccess" />
       </el-row>
 
@@ -128,7 +128,7 @@ const tableOptions = reactive({
       type: 'select',
       label: '角色',
       value: '',
-      properties: {
+      props: {
         url: '/system/role/all',
         multiple: true
       }

magic-boot/src/main/resources/application-demo.yml

@@ -0,0 +1,4 @@
+magic-api:
+  web: /magic/web
+  resource:
+    readonly: true