From ea9ef20c961f2b9a8d0eff34df3065c71ad53807 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=95=E9=87=91=E6=B3=BD?= <1098696801@qq.com>
Date: Fri, 13 May 2022 17:18:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 magic-boot-ui/package.json                    |  2 +-
 .../src/components/magic/basic/mb-button.vue  | 19 +++++++-----
 .../magic/basic/mb-editor-table.vue           |  5 ++++
 .../src/components/magic/data/mb-search.vue   | 12 +++-----
 .../src/components/magic/data/mb-table.vue    |  8 ++---
 .../components/magic/form/mb-upload-file.vue  | 13 +++++++--
 .../components/magic/form/mb-upload-image.vue | 29 +++++++++++++------
 .../src/components/magic/template/mb-list.vue |  2 +-
 .../src/views/examples/test-mb-list.vue       |  4 +--
 .../src/views/examples/upload-file.vue        | 13 +++++----
 .../src/views/system/dict/dict-list.vue       |  2 +-
 .../src/views/system/menu/menu-list.vue       |  2 +-
 .../src/views/system/office/office-list.vue   |  2 +-
 .../src/views/system/user/user-list.vue       |  4 +--
 .../src/main/resources/application-demo.yml   |  4 +++
 15 files changed, 76 insertions(+), 45 deletions(-)
 create mode 100644 magic-boot/src/main/resources/application-demo.yml

diff --git a/magic-boot-ui/package.json b/magic-boot-ui/package.json
index 1efcbd9..0d6be38 100644
--- a/magic-boot-ui/package.json
+++ b/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",
diff --git a/magic-boot-ui/src/components/magic/basic/mb-button.vue b/magic-boot-ui/src/components/magic/basic/mb-button.vue
index 4105244..b8d51a7 100644
--- a/magic-boot-ui/src/components/magic/basic/mb-button.vue
+++ b/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_ = '删除失败！'
diff --git a/magic-boot-ui/src/components/magic/basic/mb-editor-table.vue b/magic-boot-ui/src/components/magic/basic/mb-editor-table.vue
index 8332fed..7e0ef16 100644
--- a/magic-boot-ui/src/components/magic/basic/mb-editor-table.vue
+++ b/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>
 
diff --git a/magic-boot-ui/src/components/magic/data/mb-search.vue b/magic-boot-ui/src/components/magic/data/mb-search.vue
index adb0747..9c77c4b 100644
--- a/magic-boot-ui/src/components/magic/data/mb-search.vue
+++ b/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>
diff --git a/magic-boot-ui/src/components/magic/data/mb-table.vue b/magic-boot-ui/src/components/magic/data/mb-table.vue
index 6b1b0c1..74de4c3 100644
--- a/magic-boot-ui/src/components/magic/data/mb-table.vue
+++ b/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,
diff --git a/magic-boot-ui/src/components/magic/form/mb-upload-file.vue b/magic-boot-ui/src/components/magic/form/mb-upload-file.vue
index a7c30f1..b03595a 100644
--- a/magic-boot-ui/src/components/magic/form/mb-upload-file.vue
+++ b/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
     }
diff --git a/magic-boot-ui/src/components/magic/form/mb-upload-image.vue b/magic-boot-ui/src/components/magic/form/mb-upload-image.vue
index e97ce02..12b83ad 100644
--- a/magic-boot-ui/src/components/magic/form/mb-upload-image.vue
+++ b/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)
diff --git a/magic-boot-ui/src/components/magic/template/mb-list.vue b/magic-boot-ui/src/components/magic/template/mb-list.vue
index 1ab7d5d..29024d5 100644
--- a/magic-boot-ui/src/components/magic/template/mb-list.vue
+++ b/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>
 
diff --git a/magic-boot-ui/src/views/examples/test-mb-list.vue b/magic-boot-ui/src/views/examples/test-mb-list.vue
index dbd80e0..a9a2f9c 100644
--- a/magic-boot-ui/src/views/examples/test-mb-list.vue
+++ b/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
         }
       }]
     }, {
diff --git a/magic-boot-ui/src/views/examples/upload-file.vue b/magic-boot-ui/src/views/examples/upload-file.vue
index 144ee82..107730e 100644
--- a/magic-boot-ui/src/views/examples/upload-file.vue
+++ b/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)
     }
   }
 }
diff --git a/magic-boot-ui/src/views/system/dict/dict-list.vue b/magic-boot-ui/src/views/system/dict/dict-list.vue
index c521c3d..0c78c26 100644
--- a/magic-boot-ui/src/views/system/dict/dict-list.vue
+++ b/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'
       }
diff --git a/magic-boot-ui/src/views/system/menu/menu-list.vue b/magic-boot-ui/src/views/system/menu/menu-list.vue
index 6d290c1..765a2f2 100644
--- a/magic-boot-ui/src/views/system/menu/menu-list.vue
+++ b/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'
   },
diff --git a/magic-boot-ui/src/views/system/office/office-list.vue b/magic-boot-ui/src/views/system/office/office-list.vue
index f4f0bbe..f500bd7 100644
--- a/magic-boot-ui/src/views/system/office/office-list.vue
+++ b/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'
diff --git a/magic-boot-ui/src/views/system/user/user-list.vue b/magic-boot-ui/src/views/system/user/user-list.vue
index 1eadfc0..e7c902c 100644
--- a/magic-boot-ui/src/views/system/user/user-list.vue
+++ b/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
       }
diff --git a/magic-boot/src/main/resources/application-demo.yml b/magic-boot/src/main/resources/application-demo.yml
new file mode 100644
index 0000000..3990f43
--- /dev/null
+++ b/magic-boot/src/main/resources/application-demo.yml
@@ -0,0 +1,4 @@
+magic-api:
+  web: /magic/web
+  resource:
+    readonly: true