类别管理修改

src/api/myAxios.ts

@@ -4,8 +4,8 @@ import router from '../router'
 
 const myAxios = axios.create({
     withCredentials:true,
-    baseURL: 'http://localhost:9092/api'
+    // baseURL: 'http://localhost:9092/api'
-    // baseURL: 'http://123.249.108.160:8888/api' //测试服务器
+    baseURL: 'http://123.249.108.160:8888/api' //测试服务器
 });
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {

src/views/Commodity/MerchandiseCenter.vue

@@ -100,7 +100,7 @@
         <el-upload 
           v-model:file-list="ImgArr"
           ref="uploadProductImg"
-          action="#" 
+          action="#"
           list-type="picture-card" 
           :auto-upload="false" 
           multiple="true"

src/views/Commodity/TypeManagement.vue

@@ -3,18 +3,19 @@
     <el-button type="success" @click="showForm">添加类别</el-button>
     <el-button type="danger" @click="">删除类别</el-button>
   </div>
-
   <el-dialog v-model="dialogVisible" title="商品类别" width="500">
-    <el-form :model="typeForm" label-width="auto" style="max-width: 600px">
+    <el-form :model="typeForm" label-width="auto" style="max-width: 600px" v-loading="loading">
       <el-form-item label="添加类别图片">
         <!-- 下面的event的作用,传入当前事件对象 -->
         <el-upload 
+          v-model:file-list="typeImg"
           action="#" 
           list-type="picture-card" 
           :auto-upload="false" 
           multiple="true"
           :on-remove="handleRemove"
           @change="(event: any) => handleChange(event)" 
+          :on-exceed="ExceedTypeImg"
           limit="1" >
           <el-icon>
             <Plus />
@@ -31,7 +32,7 @@
     <template #footer #default="{ row, $index }">
       <div class="dialog-footer">
         <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="addOrUpdateType">
+        <el-button type="primary" @click="addOrUpdateType" :disabled="submitable">
           提交
         </el-button>
       </div>
@@ -65,12 +66,17 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage ,type UploadProps} from 'element-plus';
+import { ElMessage, type UploadProps, type UploadUserFile} from 'element-plus';
+import { ErrorInfo, SuccessInfo } from '@/utils/messageInfo';
 import { onMounted, ref } from 'vue'
 import myAxios from '@/api/myAxios';
 const fileSimple = ref()  //单个文件
 const selectedItems = ref([]) 
 const dialogVisible = ref(false)
+const submitable = ref(true)  //提交按钮禁用状态
+const loading = ref(false)  //加载
+const typeImg: any = ref<UploadUserFile[]>([])  //商品类别图片
+// const imgMap = new Map()  //商品类别的map集合
 //表单数据
 const typeForm = ref({
   id: 0,
@@ -100,6 +106,7 @@ const getTypeList = async () => {
 //上传图片，一张图片，不需要flag值
 const handleChange = async (file: any) => {
   fileSimple.value = file
+  loading.value = true
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
@@ -114,15 +121,28 @@ const handleChange = async (file: any) => {
     }
   })
   if ( res.data.code === 1) {
+    loading.value = false
+    SuccessInfo('上传成功')
+    submitable.value = false
     typeForm.value.typeUrl = res.data.data
+  } else {
+    ErrorInfo(res.data.message)
   }
 }
-//上传图片移除 --逻辑上移除
+//上传图片移除
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles)
+  // typeForm.value.typeUrl = ''
+  typeImg.value.splice(0,typeImg.value.length)  //移除展示即可
+  submitable.value = true  //再禁止上传
+}
+const ExceedTypeImg: UploadProps['onExceed'] = (files) => {
+
 }
 //新增类别
 const showForm = async () => {
+  resetForm()
+  typeImg.value.splice(0,typeImg.value.length)
   dialogVisible.value = true;
   flag.value = 0
 }
@@ -191,10 +211,14 @@ const handleSelectionChange = (row: any) => {
 }
 //编辑
 const editShowForm = (index: number, row: any) => {
+  typeImg.value.splice(0,typeImg.value.length) //先删除原先的
+  typeImg.value.push({
+    url: row.typeUrl
+  })
   dialogVisible.value = true
   typeForm.value = row
   flag.value = 1
-  // console.log(row)
+  console.log('本行--->',row)
 }
 //删除类别  请求体里只传id即可
 const Delete_type = async (index: number) => {

src/views/Login.vue

@@ -21,14 +21,14 @@
             </el-form-item>
             <div style="margin: 10px 0; text-align: right">
               <div  style="display: block;
-                                           font-size: 15px;
+                    font-size: 15px;
-                                           width: 80%;
+                    width: 80%;
-                                           margin: 50px  auto 0 auto;
+                    margin: 50px  auto 0 auto;
-                                           text-align: center;
+                    text-align: center;
-                                           border-radius: 20px;
+                    border-radius: 20px;
-                                           background-color: rgb(172, 115, 82);
+                    background-color: rgb(172, 115, 82);
-                                           line-height: 40px;
+                    line-height: 40px;
-                                           " @click="Login">登录</div>
+                    " @click="Login">登录</div>
             </div>
           </el-form>
         </div>
@@ -37,8 +37,9 @@
   </template>
   
   <script setup lang="ts">
-  import {ref, reactive, onMounted} from 'vue'
+  import { ref } from 'vue'
   import { ElMessage } from 'element-plus'
+  import { SuccessInfo, ErrorInfo, WarnInfo, CommInfo  } from '@/utils/messageInfo';
   import {useRouter} from 'vue-router'
   import myAxios from '@/api/myAxios';
   import { userStore } from '../store/userStore';
@@ -53,24 +54,22 @@
 
   const Login = async ()=>{
     if(username.value === '' || password.value === '') {
-      ElMessage.error('检查账号或密码是否成功填写')
+      ErrorInfo('检查账号或密码是否成功填写')
       return;
     }
     const res: any = await myAxios.post("/user/login",{
       userAccount: username.value,
       userPassword: password.value
     })
-    console.log(res.data)
+    // console.log(res.data)
     if(res.data.code === 1 && res ?.data) {
+      SuccessInfo('登陆成功')
       //将用户信息放入pinia
       await store.getLoginUser(res.data.data)
       //跳转个人中心
       await router.replace('/PersonalCenter')
     } else {
-      ElMessage({
+      WarnInfo(res.data.message)
-      type: 'warning',
-      message: res.data.message
-    })
     return;  //空返回结束函数
     }
   }

src/views/test.vue

@@ -1,69 +1,13 @@
 <template>
-  <el-upload
+  <button @click="test()">123213</button>
-    v-model:file-list="fileList"
-    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-    list-type="picture-card"
-    :on-preview="handlePictureCardPreview"
-    :on-remove="handleRemove"
-  >
-    <el-icon><Plus /></el-icon>
-  </el-upload>
-
-  <el-dialog v-model="dialogVisible">
-    <img w-full :src="dialogImageUrl" alt="Preview Image" />
-  </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+  const weekDay = function(time: string)  {
-import { Plus } from '@element-plus/icons-vue'
+  let datelist = ['周日','周一','周二','周三','周四','周五','周六',]
-
+  return datelist[new Date(time).getDay()];
-import type { UploadProps, UploadUserFile } from 'element-plus'
-
-const fileList = ref<UploadUserFile[]>([
-  {
-    name: 'food.jpeg',
-    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-  },
-  {
-    name: 'plant-1.png',
-    url: '/images/plant-1.png',
-  },
-  {
-    name: 'food.jpeg',
-    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-  },
-  {
-    name: 'plant-2.png',
-    url: '/images/plant-2.png',
-  },
-  {
-    name: 'food.jpeg',
-    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-  },
-  {
-    name: 'figure-1.png',
-    url: '/images/figure-1.png',
-  },
-  {
-    name: 'food.jpeg',
-    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-  },
-  {
-    name: 'figure-2.png',
-    url: '/images/figure-2.png',
-  },
-])
-
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
-
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles)
 }
-
+const test =()=>{
-const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+  console.log(weekDay('2025-1-8'));
-  dialogImageUrl.value = uploadFile.url!
-  dialogVisible.value = true
 }
 </script>