Compare commits
No commits in common. "40fb1c11aee180b43b5af63569f769f0dcbe6fd5" and "73e7049b71222abe023a835a8b19fa36d8bc99ec" have entirely different histories.
40fb1c11ae
...
73e7049b71
|
|
@ -8,19 +8,21 @@ const router = createRouter({
|
||||||
routes, // `routes: routes` 的缩写
|
routes, // `routes: routes` 的缩写
|
||||||
})
|
})
|
||||||
//路由的请求拦截器
|
//路由的请求拦截器
|
||||||
//to 是即将进入的路由对象，from 是当前离开的路由对象，next 是一个函数，调用它会继续导航。
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
const store = userStore();
|
const store = userStore()
|
||||||
if (to.name === 'login') {
|
if (to.name == 'login') {
|
||||||
// 当导航到登录页时清空 Pinia 状态
|
//当回到登录页时，清空pinia
|
||||||
store.$reset();
|
store.$reset()
|
||||||
next();
|
next()
|
||||||
} else if (store.loginUser.userRole === "notLogin") {
|
return
|
||||||
// 如果未登录则重定向到登录页
|
|
||||||
next({ name: 'login' });
|
|
||||||
} else {
|
|
||||||
// 允许已登录用户导航
|
|
||||||
next();
|
|
||||||
}
|
}
|
||||||
});
|
if (store.loginUser.userRole == "notLogin") {
|
||||||
|
router.back()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (store.loginUser.userRole != "notLogin") {
|
||||||
|
next()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
export default router
|
export default router
|
||||||
|
|
|
||||||
|
|
@ -1,161 +1,143 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="margin-bottom: 10px;">
|
<div style="margin-bottom: 10px;">
|
||||||
<el-button type="success" @click="showForm">添加类别</el-button>
|
<el-button type="success" @click="Add_type">添加类别</el-button>
|
||||||
<el-button type="danger" @click="">删除类别</el-button>
|
<el-button type="danger" @click="">删除类别</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-dialog v-model="dialogVisible" title="商品类别" width="500">
|
<el-dialog
|
||||||
<el-form :model="typeForm" label-width="auto" style="max-width: 600px">
|
v-model="dialogVisible"
|
||||||
|
title="商品类别"
|
||||||
|
width="500"
|
||||||
|
>
|
||||||
|
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
||||||
<el-form-item label="类别图标">
|
<el-form-item label="类别图标">
|
||||||
<div v-if="typeForm.typeUrl">
|
<!-- <img src="https://s21.ax1x.com/2024/10/24/pAdzjZ6.png" alt="" @click="handleFileUpload"> -->
|
||||||
<img :src="typeForm.typeUrl" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;" />
|
<div v-if="form.img">
|
||||||
|
<img :src="form.img" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;"/>
|
||||||
</div>
|
</div>
|
||||||
<input type="file" @change="handleFileUpload" accept="image/*" />
|
<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>
|
||||||
<el-form-item label="类别名">
|
<el-form-item label="类别名">
|
||||||
<el-input v-model="typeForm.typeName" />
|
<el-input v-model="form.type_name" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="备注">
|
<el-form-item label="备注">
|
||||||
<el-input v-model="typeForm.typeIntro" />
|
<el-input v-model="form.tips" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<template #footer #default="{ row, $index }">
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="cancel" >取消</el-button>
|
<el-button @click="cancel" >取消</el-button>
|
||||||
<el-button type="primary" @click="addOrUpdateType">
|
<el-button type="primary" @click="dialogVisible = false">
|
||||||
提交
|
提交
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 数据展示层 -->
|
<el-table :data="tableData" border style="width: 100%;"
|
||||||
<el-table :data="tableData" border style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
|
:header-cell-style="{'text-align':'center'}"
|
||||||
@selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
|
@selection-change="handleSelectionChange"
|
||||||
|
:cell-style="{'text-align':'center' ,'font-size' : '16px'}">
|
||||||
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column type="selection" width="55"></el-table-column>
|
||||||
<el-table-column prop="typeUrl" label="类别图片" width="300">
|
<el-table-column prop="img" label="类别图片" width="300">
|
||||||
<!-- 插槽，拿到父组件的值typeUrl -->
|
<template #default="scope"><img :src="scope.row.img" alt="" style="height: 50px;"></template>
|
||||||
<!-- scope 提供了关于当前行的信息 -->
|
|
||||||
<template #default="scope"><img :src="scope.row.typeUrl" alt="" style="height: 50px;"></template>
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="typeName" label="类别名称" width="150"></el-table-column>
|
<el-table-column prop="type_name" label="类别名称" width="150" ></el-table-column>
|
||||||
<el-table-column prop="typeIntro" label="备注"></el-table-column>
|
<el-table-column prop="tips" label="备注" ></el-table-column>
|
||||||
<el-table-column prop="operation" label="操作" >
|
<el-table-column prop="operation" label="操作" >
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button type="success" @click="editShowForm(scope.$index, scope.row)">修改类别</el-button>
|
<el-button type="success" @click="Edit_type(scope.$index,scope.row)">修改类别</el-button>
|
||||||
<!-- scope.$index是当前行 第一行为0 -->
|
<el-button type="danger" @click="Delete_type">删除类别</el-button>
|
||||||
<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>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessage } from 'element-plus';
|
import { ref } from 'vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { userStore } from '../../store/userStore';
|
||||||
import myAxios from '@/api/myAxios';
|
|
||||||
|
|
||||||
|
const store = userStore()
|
||||||
|
|
||||||
|
const dialogImageUrl = ref('');
|
||||||
|
const disabled = ref(false);
|
||||||
|
const imageUrl = ref('')
|
||||||
const selectedItems = ref([])
|
const selectedItems = ref([])
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
//表单数据
|
const form = ref({
|
||||||
const typeForm = ref({
|
img: '',
|
||||||
id: 0,
|
type_name: '',
|
||||||
typeName: '',
|
tips: ''
|
||||||
typeUrl: '',
|
|
||||||
typeIntro: ''
|
|
||||||
})
|
})
|
||||||
//表格数据
|
const tableData = ref([
|
||||||
const tableData = ref([])
|
{
|
||||||
//旗帜 表示点击添加类别(0) 和 点击修改类别两个状态(1)，因为我们共用一个表格
|
img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
|
||||||
const flag = ref(0)
|
type_name: '材料包',
|
||||||
|
tips: '提供用户自定义DIY',
|
||||||
//老套路 页面加载必须获取类别列表
|
|
||||||
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 Add_type =()=>{
|
||||||
const showForm = async () => {
|
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
flag.value = 0
|
if(form.value.type_name) {
|
||||||
|
form.value = {
|
||||||
|
img: '',
|
||||||
|
type_name: '',
|
||||||
|
tips: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tableData.value.push(form.value)
|
||||||
}
|
}
|
||||||
//取消
|
|
||||||
const cancel = () => {
|
const cancel = () => {
|
||||||
dialogVisible.value = false
|
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 = () => {
|
const resetForm = () => {
|
||||||
typeForm.value = {
|
form.value = {
|
||||||
id: 0,
|
img: '',
|
||||||
typeName: '',
|
type_name: '',
|
||||||
typeUrl: '',
|
tips: ''
|
||||||
typeIntro: ''
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// const handleClose = (done: () => void) => {
|
||||||
|
// ElMessageBox.confirm('确定不添加商品类别吗?')
|
||||||
|
// .then(() => {
|
||||||
|
// done()
|
||||||
|
// })
|
||||||
|
// .catch(() => {
|
||||||
|
// // catch error
|
||||||
|
// })
|
||||||
|
// }
|
||||||
const handleSelectionChange = (row: any) => {
|
const handleSelectionChange = (row: any) => {
|
||||||
selectedItems.value = JSON.parse(JSON.stringify(row))
|
selectedItems.value = JSON.parse(JSON.stringify(row))
|
||||||
}
|
}
|
||||||
//图片文件上传
|
|
||||||
const handleFileUpload = (event: Event) => {
|
const handleFileUpload = (event: Event) => {
|
||||||
const target = event.target as HTMLInputElement;
|
const target = event.target as HTMLInputElement;
|
||||||
const file = target.files?.[0];
|
const file = target.files?.[0];
|
||||||
|
|
@ -163,31 +145,25 @@ const handleFileUpload = (event: Event) => {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = (e) => {
|
reader.onload = (e) => {
|
||||||
if (e.target?.result) {
|
if (e.target?.result) {
|
||||||
typeForm.value.typeUrl = e.target.result as string; // 将图片URL赋值给表单
|
form.value.img = e.target.result as string; // 将图片URL赋值给表单
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file); // 读取文件为Data URL
|
reader.readAsDataURL(file); // 读取文件为Data URL
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const editShowForm = (index: number, row: any) => {
|
const Edit_type =(index: number, row: any)=>{
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
typeForm.value = row
|
console.log(index,row)
|
||||||
flag.value = 1
|
form.value = row
|
||||||
console.log(row)
|
|
||||||
}
|
}
|
||||||
//删除类别 请求体里只传id即可
|
const Delete_type =()=>{
|
||||||
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()
|
const handleEdit = (index: number, row: any) => {
|
||||||
|
console.log(index, row)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user