Merge branch 'main' of http://154.8.193.216:3030/admin1/jiangchengfeiyi-Web
# Conflicts: # src/router/routes.ts # src/views/Commodity/AddProduct.vue
This commit is contained in:
commit
658b79a19e
|
|
@ -21,15 +21,16 @@
|
|||
<span>用户管理</span>
|
||||
</template>
|
||||
|
||||
<el-menu-item index="/PersonalCenter">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span slot="title">个人中心</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/UserManagement">
|
||||
<el-icon><List /></el-icon>
|
||||
<span slot="title">用户列表</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/PersonalCenter">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span slot="title">个人中心</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="2">
|
||||
|
|
@ -64,6 +65,17 @@
|
|||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="3">
|
||||
<template #title>
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
<span>订单管理</span>
|
||||
</template>
|
||||
|
||||
<el-menu-item index="/OrderList">
|
||||
<el-icon><Menu /></el-icon>
|
||||
<span slot="title">订单列表</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
</el-aside>
|
||||
|
|
|
|||
|
|
@ -13,16 +13,16 @@ export const routes = [
|
|||
path: '/manage',
|
||||
component: () => import("@/layout/Manage.vue"),
|
||||
children:[
|
||||
{
|
||||
path: '/UserManagement',
|
||||
name:'用户列表',
|
||||
component: ()=> import("../views/User/UserManagement.vue")
|
||||
},
|
||||
{
|
||||
path: '/PersonalCenter',
|
||||
name:'个人中心',
|
||||
component: ()=> import("../views/User/PersonalCenter.vue")
|
||||
},
|
||||
{
|
||||
path: '/UserManagement',
|
||||
name:'用户列表',
|
||||
component: ()=> import("../views/User/UserManagement.vue")
|
||||
},
|
||||
{
|
||||
path: '/AddProduct',
|
||||
name: '添加商品',
|
||||
|
|
@ -39,10 +39,15 @@ export const routes = [
|
|||
component: ()=> import("../views/Commodity/TypeManagement.vue")
|
||||
},
|
||||
{
|
||||
path:'/AddCoupons',
|
||||
name:'添加优惠券',
|
||||
component:()=>import("../views/Coupons/AddCoupons.vue")
|
||||
path: '/OrderList',
|
||||
name: '订单列表',
|
||||
component: ()=> import("../views/Orders/OrderList.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/Test',
|
||||
name:'测试页面',
|
||||
component: () => import("../views/test.vue")
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { defineStore } from "pinia";
|
||||
import myAxios from '../api/myAxios'
|
||||
|
||||
export const userStore = defineStore( 'user' , {
|
||||
//state是应用的核心数据，通常用于管理用户信息、应用设置、数据列表等。
|
||||
|
|
@ -26,7 +25,6 @@ export const userStore = defineStore( 'user' , {
|
|||
//更新state
|
||||
updateUser(payLoad : any) {
|
||||
this.loginUser = payLoad
|
||||
console.log(payLoad,2654615165)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,190 +1,172 @@
|
|||
<template>
|
||||
<!-- 添加商品图片-->
|
||||
<div style="height: auto;margin-bottom: 10px;width: 480px;">
|
||||
<div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div>
|
||||
<el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
|
||||
<el-icon><Plus /></el-icon>
|
||||
|
||||
<template #file="{ file }">
|
||||
<div>
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
<div>
|
||||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
|
||||
<el-form-item label="添加商品图片">
|
||||
<!-- 下面的event的作用,传入当前事件对象 -->
|
||||
<el-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
multiple="true"
|
||||
:on-remove="handleRemove"
|
||||
@change="(event: any) => handleChange(event, 0)"
|
||||
limit="1" >
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<!-- 添加图文描述-->
|
||||
<el-form-item label="添加图文描述">
|
||||
<el-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
multiple="true"
|
||||
:on-change="(event: any) => handleChange(event, 1)"
|
||||
limit="1"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<el-icon><zoom-in /></el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<!-- 添加图文描述-->
|
||||
<div style="margin-bottom: 10px;">
|
||||
<div style="font-size: 20px;margin-bottom: 10px">添加图文描述</div>
|
||||
<el-upload action="#" v-model:file-list="uploadedDescription" list-type="picture-card" :auto-upload="false" multiple="true">
|
||||
<el-icon><Plus /></el-icon>
|
||||
|
||||
<template #file="{ file }">
|
||||
<div>
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<el-icon><zoom-in /></el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="descriptionRemove(file)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
<!-- 表单-->
|
||||
<div style="position: absolute;right: 20px;top: 100px;max-width: 50%" >
|
||||
<el-form :model="form" label-width="auto" style="width: 750px" size="large">
|
||||
<el-form-item label="产品名称">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品价格">
|
||||
<el-form-item label="产品价格" prop="price">
|
||||
<el-input v-model="form.price" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品">
|
||||
<el-input v-model="form.quantity" />
|
||||
<el-form-item label="产品简介" prop="intro">
|
||||
<el-input v-model="form.intro" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为限定类产品" >
|
||||
<el-select v-model="form.region" placeholder="否">
|
||||
<el-option label="是" value="ture" />
|
||||
<el-option label="否" value="false" />
|
||||
<el-form-item label="当前库存" prop="inventory">
|
||||
<el-input v-model="form.inventory" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为限定类产品" prop="festivalOrder">
|
||||
<el-select v-model="form.festivalOrder" placeholder="请选择" @change="(event: any) => loadForm(event, 0)">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.region=='ture' " label="节日名称">
|
||||
<!-- <el-form-item v-if="form.region=='ture' " label="节日名称">
|
||||
<el-input v-model="form.festivalName" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="产品类别" prop="type">
|
||||
<el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadForm(event, 1)">
|
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型" >
|
||||
<el-radio-group v-model="form.resource" >
|
||||
<el-radio value="1">材料包</el-radio>
|
||||
<el-radio value="2">手持物</el-radio>
|
||||
<el-radio value="3">头饰</el-radio>
|
||||
<el-radio value="4">定制</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item label="商品标签" prop="label">
|
||||
<el-input v-model="form.label" type="textarea" placeholder="" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签">
|
||||
<el-input v-model="form.label" type="textarea" placeholder=""/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情描述">
|
||||
<el-input v-model="form.desc" type="textarea" placeholder="产品尺寸，服务等"/>
|
||||
<el-form-item label="商品详细描述" prop="introDetail">
|
||||
<el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addProduct">上架</el-button>
|
||||
<el-button type="primary" @click="onSubmit">上架</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref,reactive,onMounted } from 'vue';
|
||||
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
|
||||
import {ElMessage, type UploadFile} from 'element-plus';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { ElMessage, type UploadFile , type UploadProps } from 'element-plus';
|
||||
import myAxios from "@/api/myAxios";
|
||||
|
||||
const dialogImageUrl = ref('');
|
||||
const dialogVisible = ref(false);
|
||||
const disabled = ref(false);
|
||||
const fileSimple = ref() //单个文件
|
||||
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
|
||||
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
|
||||
const handleRemove = (file: UploadFile) => {
|
||||
uploadedFiles.value = uploadedFiles.value.filter((f) => f.uid !== file.uid);
|
||||
};
|
||||
const descriptionRemove = (file: UploadFile) => {
|
||||
uploadedDescription.value = uploadedDescription.value.filter((f) => f.uid !== file.uid);
|
||||
}
|
||||
const handlePictureCardPreview = (file: UploadFile) => {
|
||||
dialogImageUrl.value = file.url!;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const form = reactive({
|
||||
name:'',
|
||||
price:'',
|
||||
quantity:'',//产品数量
|
||||
region:'',//是否为限定
|
||||
festivalName:'',//节日名称
|
||||
resource:'',//类型
|
||||
label:'',//商品标签
|
||||
desc:'',//详情描述
|
||||
const resetFormData = ref()
|
||||
const form = ref({
|
||||
name: '',
|
||||
price: '', //商品价格
|
||||
intro: '',//产品简介
|
||||
festivalOrder: '',//是否为限定
|
||||
type: '',//类别
|
||||
label: '',//商品标签
|
||||
introDetail: '',//详情描述
|
||||
goodImg: '', //商品图片url
|
||||
detailImg: '', //图文详情url
|
||||
inventory: '' //库存
|
||||
})
|
||||
onMounted(()=>{
|
||||
upload()
|
||||
addProduct()
|
||||
})
|
||||
const addProduct = async () => {
|
||||
const res = await myAxios.post('goods/add',{
|
||||
name : form.name,
|
||||
price : form.price,
|
||||
inventory : form.quantity,
|
||||
type: form.resource,
|
||||
label : form.label,
|
||||
intro : form.desc,
|
||||
festivalOrder : form.festivalName
|
||||
})
|
||||
|
||||
// if(res.data.code == 1){
|
||||
// ElMessage({
|
||||
// message: '上架成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
// }else{
|
||||
// ElMessage({
|
||||
// message: '上架失败',
|
||||
// type: 'error'
|
||||
// })
|
||||
// }
|
||||
const typeList: any = ref([
|
||||
{
|
||||
value1: '',
|
||||
label: ''
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
getTypeList() //加载类别列表，渲染在产品列表的select选项里面
|
||||
})
|
||||
const getTypeList = async () => { //获取类别列表作为可选项
|
||||
const res = await myAxios.post('/category/list', {}) //获取商品列表
|
||||
for (let key in res.data.data) { //循环赋值
|
||||
typeList.value[key] = {
|
||||
value1: res.data.data[key].typeName,
|
||||
label: res.data.data[key].typeName
|
||||
}
|
||||
}
|
||||
const upload = async () => {
|
||||
const res = await myAxios.post('file/upload/server',{
|
||||
multipartFile : uploadedFiles.value,
|
||||
biz : uploadedDescription.value
|
||||
})
|
||||
}
|
||||
// onMounted(() => {
|
||||
// getProductInformation()
|
||||
// })
|
||||
// const getProductInformation = async () => {
|
||||
// const res: any = await myAxios.get('')
|
||||
// console.log(res)
|
||||
// if (res.code === 1 && res.data) {
|
||||
//
|
||||
//
|
||||
// } else {
|
||||
// message.error(`获取数据失败：${res.message}`);
|
||||
// backPage()
|
||||
// }
|
||||
// }
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
console.log(uploadFile, uploadFiles)
|
||||
}
|
||||
//提交表单
|
||||
const onSubmit = async () => {
|
||||
const values = Object.values(form.value);
|
||||
// 使用some()方法来检查是否有任何值为空
|
||||
if (values.some(value => value === null || value === undefined || value === '')) {
|
||||
ElMessage({
|
||||
type:'warning',
|
||||
message:'请检查表单数据是否完整填写'
|
||||
})
|
||||
return; //空返回结束函数
|
||||
}
|
||||
const res = await myAxios.post('/goods/add', { ...form.value })
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: "提交成功"
|
||||
})
|
||||
} else {
|
||||
ElMessage.error("服务错误")
|
||||
}
|
||||
}
|
||||
//图片上传请求 此请求只要选择了图片，就会默认上传
|
||||
const handleChange = async (file: any, flag: number) => {
|
||||
fileSimple.value = file
|
||||
let formData = new FormData() //这一步很重要 创建一个FormData对象
|
||||
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
|
||||
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
|
||||
url: '/file/upload/server/not_login',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: {
|
||||
biz: "test",
|
||||
// 取出formData对象中的file
|
||||
file: formData.get("file")
|
||||
}
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
//三元运算 当flag为0时，赋值给商品图片 flag为1时，赋值给详情图片
|
||||
flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
|
||||
}
|
||||
}
|
||||
//将 商品类别 赋值到表格里
|
||||
const loadForm = (value: any, flag: number) => {
|
||||
flag ? form.value.type = value : form.value.festivalOrder = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
|
||||
}
|
||||
//清除表单
|
||||
const resetForm = () =>{
|
||||
resetFormData.value.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 修改前请注释以前的 -->
|
||||
<!-- 搜索 -->
|
||||
<div>
|
||||
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称" v-model="username"></el-input>
|
||||
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
|
||||
v-model="username"></el-input>
|
||||
<el-form-item label="商品类型" style="width: 200px; margin-right: 10px;display: inline-block">
|
||||
<el-select v-model="types" placeholder="请选择">
|
||||
<el-option label="材料包" value="材料包" />
|
||||
|
|
@ -21,185 +23,94 @@
|
|||
<el-button type="warning" @click="reset" style="height:25px">重置</el-button>
|
||||
</div>
|
||||
<div style="margin: 15px 0">
|
||||
<el-popconfirm
|
||||
class="ml-5"
|
||||
confirm-button-text='确定'
|
||||
cancel-button-text='取消'
|
||||
icon="InfoFilled"
|
||||
icon-color="red"
|
||||
title="您确定批量删除这些数据吗？"
|
||||
@confirm="delBatch"
|
||||
width=180
|
||||
>
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
|
||||
<template #reference>
|
||||
<el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
|
||||
<el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
|
||||
<Remove />
|
||||
</el-icon></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<el-table :data="tableData" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
|
||||
@selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}"
|
||||
>
|
||||
<!-- 数据展示 -->
|
||||
<el-table :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column label="商品编号" width="80">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span style="align-items: center">{{ scope.row.id }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品图片">
|
||||
<el-table-column prop="id" label="商品编号" width="80"></el-table-column>
|
||||
<el-table-column prop="goodImg" label="商品图片">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<img :src="scope.row.goodImg" alt="" style="height: 50px;">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="180">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span style="margin-left: 10px">{{ scope.row.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品类型">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span style="margin-left: 10px">{{ scope.row.type }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品数量">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span style="margin-left: 10px">{{ scope.row.inventory }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="商品名称"></el-table-column>
|
||||
<el-table-column prop="price" label="商品价格" width="180"></el-table-column>
|
||||
<el-table-column prop="type" label="商品类型"></el-table-column>
|
||||
<el-table-column prop="inventory" label="商品数量"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||
<el-table-column prop="updateTime" label="更新时间"></el-table-column>
|
||||
<el-table-column label="商品状态">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span style="margin-left: 10px" v-if="scope.row.isShelves==1">上架</span>
|
||||
<span style="margin-left: 10px" v-if="scope.row.isShelves==0">下架</span>
|
||||
<span style="margin-left: 10px" v-if="scope.row.isShelves == 1">上架</span>
|
||||
<span style="margin-left: 10px" v-if="scope.row.isShelves == 0">下架</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="250px">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleView(scope.$index, scope.row)">
|
||||
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleRevise(scope.$index, scope.row)">
|
||||
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleOff(scope.$index, scope.row)">
|
||||
<div v-if="scope.row.isShelves==1">下架 </div>
|
||||
<div v-if="scope.row.isShelves==0">上架 </div>
|
||||
<el-button size="small" @click="handleOff(scope.$index, scope.row)">
|
||||
<div v-if="scope.row.isShelves == 1">下架 </div>
|
||||
<div v-if="scope.row.isShelves == 0">上架 </div>
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text='确定'
|
||||
cancel-button-text='取消'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="您确定删除吗？"
|
||||
>
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="是否确认删除" @confirm="deleteProduct(scope.row.id)" width=180>
|
||||
<template #reference>
|
||||
<el-button class="ml-5" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
|
||||
title="您确定删除吗？">
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页器 -->
|
||||
<div style="padding: 10px 0">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[2, 5, 10, 20]"
|
||||
:small="null"
|
||||
:disabled="null"
|
||||
:background="null"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
/>
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
||||
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="detailDialogVisible" title="商品详情">
|
||||
<el-form label-width="100px">
|
||||
<!-- 编辑/详情表单 -->
|
||||
<el-dialog v-model="DialogVisible" :title="title">
|
||||
<el-form label-width="100px" :disabled="disabled">
|
||||
<el-form-item label="商品编号">
|
||||
<el-input v-model="selectedProduct.id" disabled></el-input>
|
||||
<el-input v-model="editForm.id" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图片">
|
||||
<div v-if="selectedProduct.goodImg">
|
||||
<img :src="selectedProduct.goodImg" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;"/>
|
||||
<div v-if="editForm.goodImg">
|
||||
<img :src="editForm.goodImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称">
|
||||
<el-input v-model="selectedProduct.name" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品价格">
|
||||
<el-input v-model="selectedProduct.price" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品类型">
|
||||
<el-select v-model="selectedProduct.type" placeholder="请选择" disabled>
|
||||
<el-option label="材料包" value="材料包" />
|
||||
<el-option label="手持物" value="手持物" />
|
||||
<el-option label="头饰" value="头饰" />
|
||||
<el-option label="定制" value="定制" />
|
||||
<el-option label="积分兑换" value="积分兑换" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品数量">
|
||||
<el-input v-model="selectedProduct.inventory" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态">
|
||||
<el-select v-model="selectedProduct.isShelves" placeholder="请选择" disabled>
|
||||
<el-option label="上架" value="上架" />
|
||||
<el-option label="下架" value="下架" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为限定产品">
|
||||
<el-select v-model="selectedProduct.region" placeholder="请选择" disabled>
|
||||
<el-option label="是" value="是" />
|
||||
<el-option label="否" value="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签">
|
||||
<el-input v-model="selectedProduct.label" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品描述">
|
||||
<el-input type="textarea" v-model="selectedProduct.introDetailintroDetail" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailDialogVisible = false">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="editDialogVisible" title="商品编辑">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="商品编号">
|
||||
<el-input v-model="editForm.id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图片">
|
||||
<el-upload action="#" list-type="picture" :auto-upload="false">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<template #file="{ file }">
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
</template>
|
||||
<el-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
multiple="true"
|
||||
:on-remove="handleRemove"
|
||||
@change="(event: any) => handleChange(event, 0)"
|
||||
limit="1" >
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称">
|
||||
|
|
@ -208,123 +119,92 @@
|
|||
<el-form-item label="商品价格">
|
||||
<el-input v-model="editForm.price"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品类型">
|
||||
<el-select v-model="editForm.type" placeholder="请选择">
|
||||
<el-option label="材料包" value="材料包" />
|
||||
<el-option label="手持物" value="手持物" />
|
||||
<el-option label="头饰" value="头饰" />
|
||||
<el-option label="定制" value="定制" />
|
||||
<el-option label="积分兑换" value="定制" />
|
||||
<el-form-item label="产品类别" prop="type">
|
||||
<el-select v-model="editForm.type" @change="(event: any) => loadForm(event, 1)">
|
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品数量">
|
||||
<el-input v-model="editForm.inventory"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态">
|
||||
<el-select v-model="editForm.isShelves" disabled>
|
||||
<el-select v-model="editForm.isShelves">
|
||||
<el-option label="上架" value="上架" />
|
||||
<el-option label="下架" value="下架" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为限定产品">
|
||||
<el-select v-model="editForm.region" placeholder="请选择">
|
||||
<el-option label="是" value="是" />
|
||||
<el-option label="否" value="否" />
|
||||
<el-form-item label="是否为限定类产品" prop="festivalOrder">
|
||||
<el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签">
|
||||
<el-input v-model="editForm.label"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图文">
|
||||
<div v-if="editForm.detailImg">
|
||||
<img :src="editForm.detailImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
|
||||
</div>
|
||||
<el-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
multiple="true"
|
||||
:on-remove="handleRemove"
|
||||
@change="(event: any) => handleChange(event, 0)"
|
||||
limit="1" >
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品描述">
|
||||
<el-input type="textarea" v-model="editForm.introDetail"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<template #footer >
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEdit">保存</el-button>
|
||||
<el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
|
||||
<el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage , type UploadProps } from 'element-plus';
|
||||
import { ref, onMounted, toRaw } from 'vue';
|
||||
import myAxios from "@/api/myAxios";
|
||||
//总页数
|
||||
const total = ref(0);
|
||||
const total = ref(0); //总页数
|
||||
const id = ref([]);
|
||||
//封装分页
|
||||
const searchParams: any = ref({
|
||||
//当前页码
|
||||
current: 1,
|
||||
//每页显示条数
|
||||
pageSize: 5
|
||||
const searchParams: any = ref({ //封装分页
|
||||
current: 1, //当前页码
|
||||
pageSize: 5 //每页显示条数
|
||||
})
|
||||
const fileSimple = ref()
|
||||
const disabled = ref(true)
|
||||
const title = ref('')
|
||||
const username = ref('');
|
||||
const detailDialogVisible = ref(false);
|
||||
const editDialogVisible = ref(false);
|
||||
const DialogVisible = ref(false);
|
||||
const types = ref('');
|
||||
const Region = ref('');
|
||||
let selectedProduct = ref('');
|
||||
const loading = ref(false)
|
||||
const tableData = ref([]);
|
||||
let editForm = ref({
|
||||
id: '',
|
||||
goodImg: '',
|
||||
name: '',
|
||||
price: '',
|
||||
type: '',
|
||||
inventory: '',
|
||||
isShelves: '',
|
||||
attribute:'',
|
||||
region: '',
|
||||
label: '',
|
||||
introDetail: '',
|
||||
});
|
||||
//页面加载时获取商品列表
|
||||
onMounted(() => {
|
||||
getGoodList()
|
||||
const tableData : any= ref([]);
|
||||
const editForm : any = ref({});
|
||||
const typeList: any = ref([
|
||||
{
|
||||
value1: '',
|
||||
label: ''
|
||||
}
|
||||
])
|
||||
onMounted(() => { //页面加载时获取商品列表和分类页表
|
||||
getProductList()
|
||||
getTypeList()
|
||||
})
|
||||
const handleSelectionChange = (row: any) => {
|
||||
id.value = JSON.parse(JSON.stringify(row));
|
||||
};
|
||||
const handleView = (index: number, row: any) => {
|
||||
selectedProduct = row;
|
||||
detailDialogVisible.value = true;
|
||||
};
|
||||
const handleRevise = (index: number, row: any) => {
|
||||
selectedProduct = row;
|
||||
editDialogVisible.value = true;
|
||||
editForm.value = row;
|
||||
};
|
||||
const handleOff = (index: number, row: any) => {
|
||||
console.log()
|
||||
if (row.isShelves === 0) {
|
||||
row.isShelves = 1;//0下架，1上架
|
||||
console.log(row.isShelves)
|
||||
} else if (row.isShelves ===1) {
|
||||
row.isShelves = 0;
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = (index: number, row: any) => {
|
||||
const confirmDelete = window.confirm('您确定要删除该商品吗？');
|
||||
if (confirmDelete) {
|
||||
tableData.value = tableData.value.filter((item, i) => i!== index);
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getGoodList = async () => {
|
||||
loading.value = true;
|
||||
const getProductList = async () => {
|
||||
try {
|
||||
const res = await myAxios.post('/goods/list/page', {...searchParams.value });
|
||||
console.log(res.data)
|
||||
const res = await myAxios.post('/goods/list/page', { ...searchParams.value });
|
||||
// console.log(res.data)
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data.records;
|
||||
total.value = parseInt(res.data.data.total)//总数据量，用于分页
|
||||
|
|
@ -339,67 +219,116 @@ const getGoodList = async () => {
|
|||
});
|
||||
}
|
||||
}
|
||||
//处理行数大小变化
|
||||
const handleSizeChange =(newSize : any)=>{
|
||||
searchParams.value.pageSize = newSize //新的页面数
|
||||
getGoodList()
|
||||
const getTypeList = async () => {
|
||||
const res = await myAxios.post('/category/list', {}) //获取商品列表
|
||||
for (let key in res.data.data) { //循环赋值
|
||||
typeList.value[key] = {
|
||||
value1: res.data.data[key].typeName,
|
||||
label: res.data.data[key].typeName
|
||||
}
|
||||
}
|
||||
}
|
||||
//处理当前页面变化
|
||||
const handleCurrentChange = (Current : any) => {
|
||||
const saveEdit = async () => { //编辑商品
|
||||
const res = await myAxios.post('/goods/update',{...editForm.value})
|
||||
if( res.data.code === 1 ) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功'
|
||||
})
|
||||
DialogVisible.value = false
|
||||
} else {
|
||||
ElMessage.error('更新失败，请检查字段')
|
||||
}
|
||||
}
|
||||
//删除商品
|
||||
const deleteProduct = async (index: number) => {
|
||||
console.log(typeof index)
|
||||
const res = await myAxios.post('/goods/delete', { id: index })
|
||||
console.log(res)
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
getProductList()
|
||||
}
|
||||
getTypeList()
|
||||
}
|
||||
const handleSelectionChange = (row: any) => {
|
||||
id.value = JSON.parse(JSON.stringify(row));
|
||||
};
|
||||
//详情或编辑
|
||||
const ReviseOrView = (index: number, row: any , flag : number) => {
|
||||
//flag值不同显示不同内容 disabled开启和关闭
|
||||
flag ? (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
|
||||
DialogVisible.value = true;
|
||||
editForm.value = row;
|
||||
};
|
||||
//下架商品(待优化，有问题，逻辑有问题)
|
||||
const handleOff = async (index: number, row: any) => {
|
||||
row.isShelves ? row.isShelves = 0 : row.isShelves = 1 //三元运算符 改变那一行的上架值
|
||||
editForm.value = row;
|
||||
const res = await myAxios.post('/goods/update',{...editForm.value})
|
||||
if(res.data.code === 1) {
|
||||
ElMessage({
|
||||
type:'success',
|
||||
message:'更新成功'
|
||||
})
|
||||
}
|
||||
}
|
||||
//处理行数大小变化
|
||||
const handleSizeChange = (newSize: any) => {
|
||||
searchParams.value.pageSize = newSize //新的页面数
|
||||
getProductList()
|
||||
}
|
||||
//处理当前表格变化
|
||||
const handleCurrentChange = (Current: any) => {
|
||||
searchParams.value.current = Current
|
||||
getGoodList()
|
||||
getProductList()
|
||||
}
|
||||
const reset = () => {
|
||||
username.value = '';
|
||||
types.value = '';
|
||||
Region.value = '';
|
||||
};
|
||||
// const saveEdit = () => {
|
||||
// const indexToUpdate = tableData.findIndex(item => item.id === editForm.value.id);
|
||||
// if (indexToUpdate!== -1) {
|
||||
// tableData[indexToUpdate] = {
|
||||
// ...tableData[indexToUpdate],
|
||||
// ...editForm.value,
|
||||
// };
|
||||
// ElMessage({
|
||||
// message: '编辑成功',
|
||||
// type: 'success',
|
||||
// });
|
||||
// editDialogVisible.value = false;
|
||||
// };
|
||||
// };
|
||||
//上传图片移除 --逻辑上移除
|
||||
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
console.log(uploadFile, uploadFiles)
|
||||
}
|
||||
//将 商品类别 赋值到表格里
|
||||
const loadForm = (value: any, flag: number) => {
|
||||
flag ? editForm.value.type = value : editForm.value.festivalOrder = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
|
||||
}
|
||||
//图片上传请求 此请求只要选择了图片，就会默认上传
|
||||
const handleChange = async (file: any, flag: number) => {
|
||||
fileSimple.value = file
|
||||
let formData = new FormData() //这一步很重要 创建一个FormData对象
|
||||
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
|
||||
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
|
||||
url: '/file/upload/server/not_login',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: {
|
||||
biz: "test",
|
||||
file: formData.get("file") // 取出formData对象中的file
|
||||
}
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
//三元运算 当flag为0时，赋值给商品图片 flag为1时，赋值给详情图片
|
||||
flag ? editForm.value.detailImg = res.data.data : editForm.value.goodImg = res.data.data
|
||||
}
|
||||
}
|
||||
|
||||
// const getListPage = async () => {
|
||||
// await instance.post('/goods/list/page').then(res => {
|
||||
// console.log(res.data.data);
|
||||
// res.data.data.forEach(item => {
|
||||
// console.log(item);
|
||||
// });
|
||||
// tableData.value = res.data.data;
|
||||
// });
|
||||
// };
|
||||
const delBatchSuccess = () => {
|
||||
ElMessage({
|
||||
message: '批量删除成功',
|
||||
type: 'success',
|
||||
});
|
||||
};
|
||||
// const delBatch = async () => {
|
||||
// await instance.post('').then(res => {
|
||||
// if (res.data.code === '200') {
|
||||
// load();
|
||||
// } else {
|
||||
// ElMessage({
|
||||
// message: '批量删除失败',
|
||||
// type: 'error',
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
const delBatch =()=>{
|
||||
//批量删除
|
||||
}
|
||||
const load =()=>{}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.headerBg {
|
||||
background-color: #eee!important;
|
||||
background-color: #eee !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,11 +6,20 @@
|
|||
|
||||
<el-dialog v-model="dialogVisible" title="商品类别" width="500">
|
||||
<el-form :model="typeForm" label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="类别图标">
|
||||
<div v-if="typeForm.typeUrl">
|
||||
<img :src="typeForm.typeUrl" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;" />
|
||||
</div>
|
||||
<input type="file" @change="handleFileUpload" accept="image/*" />
|
||||
<el-form-item label="添加类别图片">
|
||||
<!-- 下面的event的作用,传入当前事件对象 -->
|
||||
<el-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
multiple="true"
|
||||
:on-remove="handleRemove"
|
||||
@change="(event: any) => handleChange(event)"
|
||||
limit="1" >
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="类别名">
|
||||
<el-input v-model="typeForm.typeName" />
|
||||
|
|
@ -19,7 +28,6 @@
|
|||
<el-input v-model="typeForm.typeIntro" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer #default="{ row, $index }">
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
|
|
@ -33,6 +41,7 @@
|
|||
<el-table :data="tableData" border style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
|
||||
@selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="类别编号" width="150"></el-table-column>
|
||||
<el-table-column prop="typeUrl" label="类别图片" width="300">
|
||||
<!-- 插槽，拿到父组件的值typeUrl -->
|
||||
<!-- scope 提供了关于当前行的信息 -->
|
||||
|
|
@ -56,10 +65,10 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ElMessage ,type UploadProps} from 'element-plus';
|
||||
import { onMounted, ref } from 'vue'
|
||||
import myAxios from '@/api/myAxios';
|
||||
|
||||
const fileSimple = ref() //单个文件
|
||||
const selectedItems = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
//表单数据
|
||||
|
|
@ -84,9 +93,34 @@ const getTypeList = async () => {
|
|||
// console.log(res.data.data)
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data
|
||||
} else {
|
||||
ElMessage.error('获取类别列表失败，请检查服务')
|
||||
}
|
||||
}
|
||||
|
||||
//上传图片，一张图片，不需要flag值
|
||||
const handleChange = async (file: any) => {
|
||||
fileSimple.value = file
|
||||
let formData = new FormData() //这一步很重要 创建一个FormData对象
|
||||
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
|
||||
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
|
||||
url: '/file/upload/server/not_login',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: {
|
||||
biz: "test",
|
||||
file: formData.get("file") // 取出formData对象中的file
|
||||
}
|
||||
})
|
||||
if ( res.data.code === 1) {
|
||||
typeForm.value.typeUrl = res.data.data
|
||||
}
|
||||
}
|
||||
//上传图片移除 --逻辑上移除
|
||||
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
console.log(uploadFile, uploadFiles)
|
||||
}
|
||||
//新增类别
|
||||
const showForm = async () => {
|
||||
dialogVisible.value = true;
|
||||
|
|
@ -99,7 +133,7 @@ const cancel = () => {
|
|||
}
|
||||
//新增类别 很繁杂 不知道怎么改 只能不断判空
|
||||
const addOrUpdateType = async () => {
|
||||
//判空
|
||||
//判空(*后期引入对象判空)
|
||||
if (typeForm.value.typeName?.indexOf(' ') !== -1 ||
|
||||
typeForm.value.typeName == '' || typeForm.value.typeUrl == '') {
|
||||
ElMessage({
|
||||
|
|
@ -114,7 +148,7 @@ const addOrUpdateType = async () => {
|
|||
const res = await myAxios.post('/category/add', {
|
||||
//对齐后端请求体
|
||||
typeName: typeForm.value.typeName,
|
||||
typeUrl: typeForm.value.typeUrl.substring(0, 10),
|
||||
typeUrl: typeForm.value.typeUrl,
|
||||
typeIntro: typeForm.value.typeIntro
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
|
|
@ -155,25 +189,12 @@ const resetForm = () => {
|
|||
const handleSelectionChange = (row: any) => {
|
||||
selectedItems.value = JSON.parse(JSON.stringify(row))
|
||||
}
|
||||
//图片文件上传
|
||||
const handleFileUpload = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
if (e.target?.result) {
|
||||
typeForm.value.typeUrl = e.target.result as string; // 将图片URL赋值给表单
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file); // 读取文件为Data URL
|
||||
}
|
||||
};
|
||||
//编辑
|
||||
const editShowForm = (index: number, row: any) => {
|
||||
dialogVisible.value = true
|
||||
typeForm.value = row
|
||||
flag.value = 1
|
||||
console.log(row)
|
||||
// console.log(row)
|
||||
}
|
||||
//删除类别 请求体里只传id即可
|
||||
const Delete_type = async (index: number) => {
|
||||
|
|
|
|||
|
|
@ -62,12 +62,6 @@
|
|||
await router.replace('/PersonalCenter')
|
||||
}
|
||||
}
|
||||
// const login = () => {
|
||||
// // console.log(username)
|
||||
// // console.log(password)
|
||||
// if(username.value ==="a"&& password.value ==="1"){
|
||||
// router.push("/UserManagement")
|
||||
// }}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
13
src/views/Orders/OrderList.vue
Normal file
13
src/views/Orders/OrderList.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
51
src/views/test.vue
Normal file
51
src/views/test.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="box"
|
||||
@click="changeColor(index)"
|
||||
:style="getBoxStyle(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const items = ref(['Box 1', 'Box 2', 'Box 3']);
|
||||
const currentColor = ref(null);
|
||||
|
||||
const changeColor = (index) => {
|
||||
currentColor.value = index;
|
||||
};
|
||||
|
||||
const getBoxStyle = (index) => ({
|
||||
backgroundColor: currentColor.value === index ? 'lightblue' : 'gray'
|
||||
});
|
||||
|
||||
return {
|
||||
items,
|
||||
changeColor,
|
||||
getBoxStyle,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user