You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
358 lines
12 KiB
358 lines
12 KiB
<template> |
|
<div class="container"> |
|
<basic-crumb></basic-crumb> |
|
<!-- 产品新增-大类 --> |
|
<div class="title">请点击选择产品大类</div> |
|
<div class="prodct_list"> |
|
<div class="prodct_item" @click="changePage(item)" |
|
v-for="item in productArr" :key="item.id"> |
|
{{item.name}} |
|
</div> |
|
<!-- <div class="prodct_item" @click="handleAdd" style="font-size:3vw;"> |
|
+ |
|
</div> --> |
|
</div> |
|
<el-dialog append-to-body :title="dialogTitle" :visible.sync="formDialog" width="550px"> |
|
<el-form ref="addForm" :model="formData" label-width="5vw" :rules="formRules"> |
|
<el-form-item label="大类" prop="name"> |
|
<el-input placeholder="请输入大类名称" v-model="formData.name"></el-input> |
|
</el-form-item> |
|
<el-form-item label="简称" prop="shortName"> |
|
<el-input placeholder="请输入简称" v-model="formData.shortName"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="formDialog = false">取 消</el-button> |
|
<el-button type="primary" @click="submit">确 定</el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
<!-- 右键菜单 --> |
|
<!-- <div class="context-menu" v-show="menuVisible" :style="menuStyle" @click.stop> |
|
<div class="menu-item" @click="handleEdit">修改</div> |
|
<div class="menu-item" @click="handleDelete">删除</div> |
|
</div> --> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import basicCrumb from "@/components/basic-crumb/main" |
|
import {getCategory,addCategory, deleteCategory , updateCategory } from '@/api/product/product' |
|
import { mapGetters } from "vuex"; |
|
export default { |
|
components:{ |
|
basicCrumb |
|
}, |
|
data(){ |
|
return{ |
|
productArr:[], |
|
addDialog:false, |
|
addForm:{}, |
|
formRules:{ |
|
name: [{ required: true, message: '请输入大类名称', trigger: 'blur' }, { max: 8, message: '大类名称最多输入8个字符', trigger: 'blur' }], |
|
shortName: [{ required: true, message: '请输入简称', trigger: 'blur' }, |
|
{ min: 1, message: '简称最少输入1个字符', trigger: 'blur' }, |
|
{ max: 3, message: '简称最多输入3个字符', trigger: 'blur' }, |
|
{ |
|
pattern: /^[A-Z]+$/, |
|
message: '简称只能输入英文大写字母', |
|
trigger: ['blur', 'change'] |
|
} |
|
] |
|
}, |
|
// 右键菜单相关 |
|
menuVisible: false, |
|
menuBottom: 0, |
|
menuRight: 0, |
|
currentItem: null,// 当前右键操作的大类项 |
|
formDialog: false, // 弹窗显示状态 |
|
dialogTitle: '', // 动态弹窗标题（新增/修改） |
|
formData: {}, |
|
menuStyle:{} |
|
} |
|
}, |
|
computed: { |
|
...mapGetters(["routeData"]) |
|
}, |
|
mounted(){ |
|
console.log('this.$route-------大',this.$route) |
|
console.log('this.routeData------------大', this.routeData) |
|
const routeDataN = (this.routeData || []).filter(item => { |
|
return !['/order/category', '/order/subcategory'].includes(item.url); |
|
}); |
|
console.log("routeDataN",routeDataN) |
|
let arr = [ |
|
...routeDataN, |
|
|
|
] |
|
this.$store.commit('SET_ROUTE_DATA', arr) |
|
|
|
this.getCategoryList() |
|
// 点击页面空白处关闭右键菜单 |
|
document.addEventListener('click', this.closeContextMenu) |
|
}, |
|
methods: { |
|
getCategoryList(){ |
|
getCategory({ |
|
parentId:0, |
|
size:9999, |
|
current:1 |
|
}).then(res =>{ |
|
res.data.data.records.map(item =>{ |
|
return{ |
|
...item, |
|
url:"/category" |
|
} |
|
}) |
|
this.productArr = res.data.data.records |
|
}) |
|
}, |
|
// 获取小类 |
|
// getCategoryList(id){ |
|
// this.categoryId = id |
|
// getCategory( |
|
// { |
|
// parentId:id, |
|
// size:9999, |
|
// current:1 |
|
// } |
|
// ).then(res =>{ |
|
// this.productArr = res.data.data.records |
|
// }) |
|
// }, |
|
handleAdd(){ |
|
this.dialogTitle = '新增大类' // 设置弹窗标题 |
|
if (this.$refs.addForm) { |
|
this.$refs.addForm.resetFields(); |
|
} |
|
this.formData = { name: '', parentId: 0 , shortName: '',} // 清空表单，新增无id |
|
this.formDialog = true // 打开弹窗 |
|
}, |
|
// 处理修改 |
|
handleEdit() { |
|
this.menuVisible = false // 关闭右键菜单 |
|
this.dialogTitle = '修改大类' // 设置弹窗标题 |
|
if (this.$refs.addForm) { |
|
this.$refs.addForm.resetFields(); |
|
} |
|
// 填充表单数据（带id，用于修改） |
|
this.formData = { |
|
id: this.currentItem.id, |
|
name: this.currentItem.name, |
|
parentId: 0, // 大类parentId固定为0 |
|
shortName: this.currentItem.shortName || '', |
|
} |
|
|
|
console.log("currentItem", this.currentItem) |
|
this.formDialog = true // 打开弹窗 |
|
}, |
|
// 处理删除 |
|
handleDelete() { |
|
// 关闭右键菜单 |
|
this.menuVisible = false |
|
// 先校验是否有子分类 |
|
getCategory({ |
|
parentId: this.currentItem.id, |
|
size: 9999, |
|
current: 1 |
|
}).then(res => { |
|
if (res.data.code == 200) { |
|
const productArr = res.data.data.records || [] |
|
// 有子分类，提示不能删除 |
|
if (productArr.length>=1) { |
|
this.$message.warning('该大类下存在小类，无法删除') |
|
} else { |
|
// 无子分类，确认删除 |
|
this.$confirm('确定要删除该大类吗？', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(() => { |
|
// 调用删除接口 |
|
deleteCategory({ |
|
ids: this.currentItem.id |
|
}).then(res => { |
|
if (res.data.code == 200) { |
|
this.$message.success('删除成功') |
|
this.getCategoryList() |
|
} |
|
}) |
|
}).catch(() => { |
|
this.$message.info('已取消删除') |
|
}) |
|
} |
|
} |
|
}) |
|
}, |
|
// 打开右键菜单 |
|
openContextMenu(event, item) { |
|
// 阻止默认右键菜单 |
|
event.preventDefault() |
|
// 记录当前操作项 |
|
this.currentItem = item |
|
// 记录当前点击的DOM元素 |
|
this.currentItemDom = event.currentTarget |
|
|
|
// 关键修改4：计算菜单的位置（固定在元素右下角） |
|
const rect = this.currentItemDom.getBoundingClientRect() |
|
this.menuStyle = { |
|
position: 'fixed', |
|
left: `${rect.right - 60 }px`, // 120是菜单宽度 |
|
top: `${rect.bottom}px`, // bottom:0 对应top为元素底部 |
|
zIndex: 9999 |
|
} |
|
// 显示菜单 |
|
this.menuVisible = true |
|
}, |
|
|
|
// 关闭右键菜单 |
|
closeContextMenu() { |
|
this.menuVisible = false |
|
}, |
|
changePage(val){ |
|
|
|
// const routeDataN = this.routeData |
|
// 应该去掉 /order/category 和 /order/subcategory |
|
const routeDataN = (this.routeData || []).filter(item => { |
|
return !['/order/category', '/order/subcategory'].includes(item.url); |
|
}); |
|
console.log("routeDataN",routeDataN) |
|
|
|
let arr = [ |
|
...routeDataN, |
|
{name:val.name,url:'/order/category',categoryId:val.id} |
|
] |
|
this.$store.commit('SET_ROUTE_DATA', arr) |
|
this.$router.push({ |
|
path: '/order/subcategory', query: { |
|
isLast: true, |
|
categoryId: val.id, |
|
sort:this.$route.query.sort ? this.$route.query.sort:'', |
|
productEdit:this.$route.query.productEdit ? this.$route.query.productEdit:'', |
|
mode: this.$route.query.mode ? this.$route.query.mode:'', |
|
orderId:this.$route.query.orderId ? this.$route.query.orderId:'', |
|
customerId:this.$route.query.customerId ? this.$route.query.customerId:'', |
|
} }); |
|
}, |
|
submit(){ |
|
this.$refs.addForm.validate(valid =>{ |
|
if (valid) { |
|
// 判断是否有id：有=修改，无=新增 |
|
const id = this.formData.id |
|
|
|
if (id) { |
|
updateCategory({ |
|
id:id, |
|
parentId: 0, |
|
name: this.formData.name, |
|
shortName: this.formData.shortName |
|
}).then(res => { |
|
if (res.data.code == 200) { |
|
this.$message.success('修改成功') |
|
this.getCategoryList() |
|
this.formDialog = false |
|
} |
|
}) |
|
|
|
} else { |
|
addCategory({ |
|
parentId: 0, |
|
name: this.formData.name, |
|
shortName: this.formData.shortName |
|
}).then(res => { |
|
if (res.data.code == 200) { |
|
this.$message.success('新增成功') |
|
this.getCategoryList() |
|
this.formDialog = false |
|
} |
|
}) |
|
} |
|
|
|
} |
|
}) |
|
} |
|
}, |
|
beforeDestroy() { |
|
// 移除事件监听，防止内存泄漏 |
|
document.removeEventListener('click', this.closeContextMenu) |
|
}, |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.container{ |
|
width: 99%; |
|
height: 99%; |
|
background: rgb(255, 255, 255); |
|
margin: 0 auto; |
|
margin-top: 8px; |
|
padding: 20px !important; |
|
overflow-y: auto; |
|
|
|
.title{ |
|
font-size: 1.5vw; |
|
margin-top: 2.1vw; |
|
margin-left: 3.4vw; |
|
color: #101010; |
|
} |
|
|
|
|
|
|
|
.prodct_list{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-top: 15px; |
|
// 移除左右 padding，改为用 auto 实现水平居中 |
|
padding: 0; |
|
// 让容器在页面中水平居中 |
|
margin: 15px auto 0; |
|
// 固定一行5个的总宽度（元素宽度+间距） |
|
width: calc( (10.42vw + 5vw) * 5 - 5vw ); |
|
// 让元素均匀分布，两侧留白一致 |
|
justify-content: flex-start; |
|
gap: 5vw; |
|
|
|
.prodct_item{ |
|
width: 10.42vw; |
|
height: 10.42vw; |
|
border-radius: 2.08vw; |
|
background: #f1ab46; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #fff; |
|
font-size: 2.5vw; |
|
text-align: center; |
|
cursor: pointer; |
|
&:hover { |
|
background: #ecb76c; |
|
} |
|
} |
|
} // 右键菜单样式 |
|
.context-menu { |
|
position: fixed; |
|
width: 120px; |
|
background: #fff; |
|
border: 1px solid #e6e6e6; |
|
border-radius: 4px; |
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
z-index: 9999; |
|
|
|
.menu-item { |
|
padding: 8px 16px; |
|
cursor: pointer; |
|
|
|
&:hover { |
|
background: #f5f5f5; |
|
} |
|
|
|
&:not(:last-child) { |
|
border-bottom: 1px solid #e6e6e6; |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
</style>
|
|
|