upload

src/components/Dialog/index.vue

@@ -1,4 +1,6 @@
-<template />
+<template>
+  <div />
+</template>
 
 <script setup>
 import { isNullOrUndef } from '@/utils/is'

src/components/ImgUpload/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
     <n-upload
-      action="#"
       :default-file-list="fileList"
-      list-type="image-card"
+      v-bind="getImgOptions"
+      :on-change="handleChange"
+      :on-before-upload="handleBeforeUpload"
     >
       点击上传
     </n-upload>
@@ -11,7 +12,6 @@
       v-model:show="showModal"
       preset="card"
       style="width: 600px"
-      title="一张很酷的图片"
     >
       <img :src="previewImageUrl" style="width: 100%">
     </n-modal>
@@ -19,18 +19,64 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, reactive, toRefs, computed, unref } from 'vue'
+import { getToken } from '@/utils/token'
+export default defineComponent({
   name: 'ImgUpload',
   props: {
     options: {
       type: Object,
       default: null
+    },
+    size: {
+      type: Number,
+      default: null
     }
   },
-  setup() {
+  setup(props, { emit }) {
-
+    const data = reactive({
+      fileList: []
+    })
+    const BaseURL = window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API || import.meta.env.VITE_APP_GLOB_BASE_API
+    const getImgOptions = computed(() => {
+      return {
+        ...unref(props.options),
+        listType: 'image-card',
+        defaultUpload: props.options.defaultUpload || false,
+        action: `${BaseURL}${props.options.action}`,
+        headers: {
+          'Authorization': getToken(),
+          ...props.options.headers
         }
-}
+      }
+    })
+    function handleChange(file) {
+      console.log(222, file)
+    }
+    /**
+     * @description: 上传前判断文件是否符合条件
+     * @param {*} options
+     * @return {*}
+     */
+    function handleBeforeUpload(options) {
+      const { file, fileList } = options
+      console.log(11, file, fileList)
+      if (props.size) {
+        const size = file.file.size
+        if (size < props.size * 1024 * 1024) {
+          fileList.splice(fileList.length - 1)
+          $message.error('选择的文件大小不满足条件！')
+        }
+      }
+    }
+    return {
+      ...toRefs(data),
+      getImgOptions,
+      handleChange,
+      handleBeforeUpload
+    }
+  }
+})
 
 </script>
 <style scoped lang='scss'>

src/components/Message/index.vue

@@ -1,4 +1,6 @@
-<template />
+<template>
+  <div />
+</template>
 
 <script setup>
 import { useMessage } from 'naive-ui'

src/components/Modal/index.vue

@@ -14,6 +14,7 @@
 
 import { defineComponent, computed } from 'vue'
 export default defineComponent({
+  name: 'CardDialogModal',
   props: {
     options: {
       type: Object,

src/styles/layout.scss

@@ -10,3 +10,9 @@
         height: calc(100vh - 48px);
     }
 }
+
+.n-data-table .n-data-table-tr{
+    th{
+        white-space:nowrap;
+    }
+}

src/views/system/user/components/UserModal.vue

@@ -11,7 +11,14 @@
           label="头像:"
           path="avatar"
         >
-          <n-upload
+          <uploadImage
+            :options="{
+              max:1,
+              action: '/upload/uploadImage/demo',
+            }"
+            size="2"
+          />
+          <!-- <n-upload
             action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
             :default-file-list="previewFileList"
             list-type="image-card"
@@ -24,7 +31,7 @@
             title="头像"
           >
             <img :src="form.avatar" style="width: 100%">
-          </n-modal>
+          </n-modal> -->
         </n-form-item>
         <n-form-item label="用户编号:" path="code">
           <n-input
@@ -138,12 +145,13 @@
 <script>
 import { defineComponent, computed, onMounted, reactive } from 'vue'
 import Modal from '@/components/Modal/index.vue'
+import uploadImage from '@/components/ImgUpload/index.vue'
 import { getDeptAll } from '@/api/system/dept/index'
 import { getRoleAll } from '@/api/system/role/index'
 import { dataToSelect } from '@/utils/handleData.js'
 export default defineComponent({
   name: 'UserModal',
-  components: { Modal },
+  components: { Modal, uploadImage },
   props: {
     visible: {
       type: Boolean,