src/components/Dialog/index.vue

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

src/components/ImgUpload/index.vue

@@ -1,10 +1,9 @@
 <template>
   <div>
     <n-upload
+      action="#"
       :default-file-list="fileList"
-      v-bind="getImgOptions"
+      list-type="image-card"
-      :on-change="handleChange"
-      :on-before-upload="handleBeforeUpload"
     >
       点击上传
     </n-upload>
@@ -12,6 +11,7 @@
       v-model:show="showModal"
       preset="card"
       style="width: 600px"
+      title="一张很酷的图片"
     >
       <img :src="previewImageUrl" style="width: 100%">
     </n-modal>
@@ -19,64 +19,18 @@
 </template>
 
 <script>
-import { defineComponent, reactive, toRefs, computed, unref } from 'vue'
+export default {
-import { getToken } from '@/utils/token'
-export default defineComponent({
   name: 'ImgUpload',
   props: {
     options: {
       type: Object,
       default: null
-    },
-    size: {
-      type: Number,
-      default: null
     }
   },
-  setup(props, { emit }) {
+  setup() {
-    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,6 +1,4 @@
-<template>
+<template />
-  <div />
-</template>
 
 <script setup>
 import { useMessage } from 'naive-ui'

src/components/Modal/index.vue

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

src/styles/layout.scss

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

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

@@ -11,14 +11,7 @@
           label="头像:"
           path="avatar"
         >
-          <uploadImage
+          <n-upload
-            :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"
@@ -31,7 +24,7 @@
             title="头像"
           >
             <img :src="form.avatar" style="width: 100%">
-          </n-modal> -->
+          </n-modal>
         </n-form-item>
         <n-form-item label="用户编号:" path="code">
           <n-input
@@ -145,13 +138,12 @@
 <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, uploadImage },
+  components: { Modal },
   props: {
     visible: {
       type: Boolean,