类别管理修改
This commit is contained in:
parent
b38083540f
commit
79e674a12a
|
|
@ -4,8 +4,8 @@ import router from '../router'
|
|||
|
||||
const myAxios = axios.create({
|
||||
withCredentials:true,
|
||||
baseURL: 'http://localhost:9092/api'
|
||||
// baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
||||
// baseURL: 'http://localhost:9092/api'
|
||||
baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
||||
});
|
||||
// 添加请求拦截器
|
||||
axios.interceptors.request.use(function (config) {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@
|
|||
</el-form-item>
|
||||
<div style="margin: 10px 0; text-align: right">
|
||||
<div style="display: block;
|
||||
font-size: 15px;
|
||||
width: 80%;
|
||||
margin: 50px auto 0 auto;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
background-color: rgb(172, 115, 82);
|
||||
line-height: 40px;
|
||||
" @click="Login">登录</div>
|
||||
font-size: 15px;
|
||||
width: 80%;
|
||||
margin: 50px auto 0 auto;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
background-color: rgb(172, 115, 82);
|
||||
line-height: 40px;
|
||||
" @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({
|
||||
type: 'warning',
|
||||
message: res.data.message
|
||||
})
|
||||
WarnInfo(res.data.message)
|
||||
return; //空返回结束函数
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,13 @@
|
|||
<template>
|
||||
<el-upload
|
||||
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>
|
||||
<button @click="test()">123213</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
|
||||
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 weekDay = function(time: string) {
|
||||
let datelist = ['周日','周一','周二','周三','周四','周五','周六',]
|
||||
return datelist[new Date(time).getDay()];
|
||||
}
|
||||
|
||||
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
||||
dialogImageUrl.value = uploadFile.url!
|
||||
dialogVisible.value = true
|
||||
const test =()=>{
|
||||
console.log(weekDay('2025-1-8'));
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user