From 7c533aeda9e9a6789c3f4aa81e64739511f82c40 Mon Sep 17 00:00:00 2001
From: zhangtao <1176193409@qq.com>
Date: Wed, 25 May 2022 19:02:52 +0800
Subject: [PATCH] upload

---
 src/components/Dialog/index.vue               |  4 +-
 src/components/ImgUpload/index.vue            | 60 ++++++++++++++++---
 src/components/Message/index.vue              |  4 +-
 src/components/Modal/index.vue                |  1 +
 src/styles/layout.scss                        |  6 ++
 .../system/user/components/UserModal.vue      | 14 ++++-
 6 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index 9ffe265..8d8418f 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -1,4 +1,6 @@
-<template />
+<template>
+  <div />
+</template>
 
 <script setup>
 import { isNullOrUndef } from '@/utils/is'
diff --git a/src/components/ImgUpload/index.vue b/src/components/ImgUpload/index.vue
index 7ca9edb..37a7280 100644
--- a/src/components/ImgUpload/index.vue
+++ b/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'>
diff --git a/src/components/Message/index.vue b/src/components/Message/index.vue
index 90940c2..06d50c2 100644
--- a/src/components/Message/index.vue
+++ b/src/components/Message/index.vue
@@ -1,4 +1,6 @@
-<template />
+<template>
+  <div />
+</template>
 
 <script setup>
 import { useMessage } from 'naive-ui'
diff --git a/src/components/Modal/index.vue b/src/components/Modal/index.vue
index 8676afa..81e1a96 100644
--- a/src/components/Modal/index.vue
+++ b/src/components/Modal/index.vue
@@ -14,6 +14,7 @@
 
 import { defineComponent, computed } from 'vue'
 export default defineComponent({
+  name: 'CardDialogModal',
   props: {
     options: {
       type: Object,
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 2781e2b..4d3d2bc 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -9,4 +9,10 @@
     .layout__content{
         height: calc(100vh - 48px);
     }
+}
+
+.n-data-table .n-data-table-tr{
+    th{
+        white-space:nowrap;
+    }
 }
\ No newline at end of file
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index 5ed0c83..dbf0cdf 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/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,