Compare commits
2 Commits
73e7049b71
...
40fb1c11ae
| Author | SHA1 | Date | |
|---|---|---|---|
| 40fb1c11ae | |||
| 6cd9fed39b |
|
|
@ -7,22 +7,20 @@ const router = createRouter({
|
|||
history: createWebHashHistory(),
|
||||
routes, // `routes: routes` 的缩写
|
||||
})
|
||||
//路由的请求拦截器
|
||||
//路由的请求拦截器
|
||||
//to 是即将进入的路由对象，from 是当前离开的路由对象，next 是一个函数，调用它会继续导航。
|
||||
router.beforeEach((to, from, next) => {
|
||||
const store = userStore()
|
||||
if (to.name == 'login') {
|
||||
//当回到登录页时，清空pinia
|
||||
store.$reset()
|
||||
next()
|
||||
return
|
||||
const store = userStore();
|
||||
if (to.name === 'login') {
|
||||
// 当导航到登录页时清空 Pinia 状态
|
||||
store.$reset();
|
||||
next();
|
||||
} else if (store.loginUser.userRole === "notLogin") {
|
||||
// 如果未登录则重定向到登录页
|
||||
next({ name: 'login' });
|
||||
} else {
|
||||
// 允许已登录用户导航
|
||||
next();
|
||||
}
|
||||
if (store.loginUser.userRole == "notLogin") {
|
||||
router.back()
|
||||
return
|
||||
}
|
||||
if (store.loginUser.userRole != "notLogin") {
|
||||
next()
|
||||
return
|
||||
}
|
||||
})
|
||||
});
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -1,143 +1,161 @@
|
|||
<template>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<el-button type="success" @click="Add_type">添加类别</el-button>
|
||||
<el-button type="danger" @click="">删除类别</el-button>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<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="form" label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="类别图标">
|
||||
<!-- <img src="https://s21.ax1x.com/2024/10/24/pAdzjZ6.png" alt="" @click="handleFileUpload"> -->
|
||||
<div v-if="form.img">
|
||||
<img :src="form.img" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;"/>
|
||||
</div>
|
||||
<input type="file" @change="handleFileUpload" accept="image/*" />
|
||||
<!-- <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)"
|
||||
>
|
||||
<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> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="类别名">
|
||||
<el-input v-model="form.type_name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.tips" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<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>
|
||||
<el-form-item label="类别名">
|
||||
<el-input v-model="typeForm.typeName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<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>
|
||||
<el-button type="primary" @click="dialogVisible = false">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="addOrUpdateType">
|
||||
提交
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<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 :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="img" label="类别图片" width="300">
|
||||
<template #default="scope"><img :src="scope.row.img" alt="" style="height: 50px;"></template>
|
||||
<el-table-column prop="typeUrl" label="类别图片" width="300">
|
||||
<!-- 插槽，拿到父组件的值typeUrl -->
|
||||
<!-- scope 提供了关于当前行的信息 -->
|
||||
<template #default="scope"><img :src="scope.row.typeUrl" alt="" style="height: 50px;"></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type_name" label="类别名称" width="150" ></el-table-column>
|
||||
<el-table-column prop="tips" label="备注" ></el-table-column>
|
||||
<el-table-column prop="operation" label="操作" >
|
||||
<el-table-column prop="typeName" label="类别名称" width="150"></el-table-column>
|
||||
<el-table-column prop="typeIntro" label="备注"></el-table-column>
|
||||
<el-table-column prop="operation" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="success" @click="Edit_type(scope.$index,scope.row)">修改类别</el-button>
|
||||
<el-button type="danger" @click="Delete_type">删除类别</el-button>
|
||||
<el-button type="success" @click="editShowForm(scope.$index, scope.row)">修改类别</el-button>
|
||||
<!-- scope.$index是当前行 第一行为0 -->
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="是否确认删除" @confirm="Delete_type(scope.row.id)" width=180>
|
||||
<template #reference>
|
||||
<el-button style="height: 25px" class="ml-5" type="danger">删除类别</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { userStore } from '../../store/userStore';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { onMounted, ref } from 'vue'
|
||||
import myAxios from '@/api/myAxios';
|
||||
|
||||
const store = userStore()
|
||||
|
||||
const dialogImageUrl = ref('');
|
||||
const disabled = ref(false);
|
||||
const imageUrl = ref('')
|
||||
const selectedItems = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const form = ref({
|
||||
img: '',
|
||||
type_name: '',
|
||||
tips: ''
|
||||
//表单数据
|
||||
const typeForm = ref({
|
||||
id: 0,
|
||||
typeName: '',
|
||||
typeUrl: '',
|
||||
typeIntro: ''
|
||||
})
|
||||
const tableData = ref([
|
||||
{
|
||||
img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
|
||||
type_name: '材料包',
|
||||
tips: '提供用户自定义DIY',
|
||||
}
|
||||
])
|
||||
//表格数据
|
||||
const tableData = ref([])
|
||||
//旗帜 表示点击添加类别(0) 和 点击修改类别两个状态(1)，因为我们共用一个表格
|
||||
const flag = ref(0)
|
||||
|
||||
const Add_type =()=>{
|
||||
dialogVisible.value = true;
|
||||
if(form.value.type_name) {
|
||||
form.value = {
|
||||
img: '',
|
||||
type_name: '',
|
||||
tips: ''
|
||||
}
|
||||
}
|
||||
tableData.value.push(form.value)
|
||||
//老套路 页面加载必须获取类别列表
|
||||
onMounted(() => {
|
||||
getTypeList()
|
||||
})
|
||||
//获取类别列表
|
||||
const getTypeList = async () => {
|
||||
const res = await myAxios.post('/category/list')
|
||||
// console.log(res.data.data)
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data
|
||||
}
|
||||
}
|
||||
|
||||
//新增类别
|
||||
const showForm = async () => {
|
||||
dialogVisible.value = true;
|
||||
flag.value = 0
|
||||
}
|
||||
//取消
|
||||
const cancel = () => {
|
||||
dialogVisible.value = false
|
||||
resetForm();
|
||||
resetForm()
|
||||
}
|
||||
|
||||
//新增类别 很繁杂 不知道怎么改 只能不断判空
|
||||
const addOrUpdateType = async () => {
|
||||
//判空
|
||||
if (typeForm.value.typeName?.indexOf(' ') !== -1 ||
|
||||
typeForm.value.typeName == '' || typeForm.value.typeUrl == '') {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '不能为空格/空字符串'
|
||||
})
|
||||
return
|
||||
}
|
||||
//取消展示表单
|
||||
dialogVisible.value = false;
|
||||
if (flag.value === 0) {
|
||||
const res = await myAxios.post('/category/add', {
|
||||
//对齐后端请求体
|
||||
typeName: typeForm.value.typeName,
|
||||
typeUrl: typeForm.value.typeUrl.substring(0, 10),
|
||||
typeIntro: typeForm.value.typeIntro
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
//提交成功后，之间重置表格
|
||||
resetForm()
|
||||
} else {
|
||||
ElMessage.error('提交失败')
|
||||
}
|
||||
}
|
||||
if( flag.value === 1 ) {
|
||||
const res = await myAxios.post('/category/update',{
|
||||
id : typeForm.value.id,
|
||||
typeName: typeForm.value.typeName,
|
||||
typeUrl: typeForm.value.typeUrl,
|
||||
typeIntro: typeForm.value.typeIntro
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
//提交成功后，之间重置表格
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功'
|
||||
})
|
||||
} else {
|
||||
ElMessage.error('更新失败')
|
||||
}
|
||||
}
|
||||
getTypeList()
|
||||
}
|
||||
//重置表单
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
img: '',
|
||||
type_name: '',
|
||||
tips: ''
|
||||
}
|
||||
typeForm.value = {
|
||||
id: 0,
|
||||
typeName: '',
|
||||
typeUrl: '',
|
||||
typeIntro: ''
|
||||
}
|
||||
};
|
||||
|
||||
// const handleClose = (done: () => void) => {
|
||||
// ElMessageBox.confirm('确定不添加商品类别吗?')
|
||||
// .then(() => {
|
||||
// done()
|
||||
// })
|
||||
// .catch(() => {
|
||||
// // catch error
|
||||
// })
|
||||
// }
|
||||
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];
|
||||
|
|
@ -145,25 +163,31 @@ const handleFileUpload = (event: Event) => {
|
|||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
if (e.target?.result) {
|
||||
form.value.img = e.target.result as string; // 将图片URL赋值给表单
|
||||
typeForm.value.typeUrl = e.target.result as string; // 将图片URL赋值给表单
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file); // 读取文件为Data URL
|
||||
}
|
||||
};
|
||||
const Edit_type =(index: number, row: any)=>{
|
||||
const editShowForm = (index: number, row: any) => {
|
||||
dialogVisible.value = true
|
||||
console.log(index,row)
|
||||
form.value = row
|
||||
typeForm.value = row
|
||||
flag.value = 1
|
||||
console.log(row)
|
||||
}
|
||||
const Delete_type =()=>{
|
||||
|
||||
}
|
||||
const handleEdit = (index: number, row: any) => {
|
||||
console.log(index, row)
|
||||
//删除类别 请求体里只传id即可
|
||||
const Delete_type = async (index: number) => {
|
||||
console.log(typeof index)
|
||||
const res = await myAxios.post('/category/delete', { id: index })
|
||||
console.log(res)
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
}
|
||||
getTypeList()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user