front/java-mall-admin
7
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style:修复样式被全局污染

Browse Source
This commit is contained in:
mixtan 2025-06-27 23:08:09 +08:00
parent 2bd37864a4
commit 8abba6f541
1 changed files with 296 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
src/views/product/goodsTool/GoodsItem.vue
View File

@ -1,24 +1,25 @@
<template> <template>
<div> <div>
<el-drawer <el-drawer
:title="mode === 'add' ? '批量新增商品配置' : '编辑商品配置'" :before-close="handleClose"
:visible.sync="drawerVisible"
direction="rtl" direction="rtl"
size="50%" size="50%"
:before-close="handleClose" :title="mode === 'add' ? '批量新增商品配置' : '编辑商品配置'"
:visible.sync="drawerVisible"
> >
<div class="fixed-header"> <div class="goodst_fixed_header">
<el-button <el-button
type="primary"
icon="el-icon-plus"
v-if="mode === 'add'" v-if="mode === 'add'"
icon="el-icon-plus"
type="primary"
@click="addNewItem" @click="addNewItem"
>添加组</el-button
> >
添加组
</el-button>
</div> </div>
<div class="scrollable-content"> <div class="scrollable-content">
<el-form :model="batchForm" label-width="80px" ref="batchFormRef"> <el-form ref="batchFormRef" label-width="80px" :model="batchForm">
<div <div
v-for="(item, index) in batchForm.items" v-for="(item, index) in batchForm.items"
:key="index" :key="index"
@ -27,127 +28,127 @@
<div class="card-header"> <div class="card-header">
<span>组{{ index + 1 }}</span> <span>组{{ index + 1 }}</span>
<el-button <el-button
type="danger"
size="small"
v-if="mode === 'add' || batchForm.items.length > 1" v-if="mode === 'add' || batchForm.items.length > 1"
size="small"
type="danger"
@click="removeItem(index)" @click="removeItem(index)"
>删除</el-button
> >
删除
</el-button>
</div> </div>
<div class="form-row"> <div class="form-row">
<el-form-item <el-form-item
label="店铺"
:prop="'items.' + index + '.storeId'" :prop="'items.' + index + '.storeId'"
:rules="rules.storeId" :rules="rules.storeId"
label="店铺"
> >
<el-select <el-select
style="width: 100%"
v-model="item.storeId" v-model="item.storeId"
placeholder="选择店铺"
filterable
clearable clearable
filterable
placeholder="选择店铺"
style="width: 100%"
> >
<el-option <el-option
v-for="item in shopListData" v-for="item in shopListData"
:key="item.store_id" :key="item.store_id"
:label="item.store_name" :label="item.store_name"
:value="item.store_id" :value="item.store_id"
> />
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="商品名称"
:prop="'items.' + index + '.productName'" :prop="'items.' + index + '.productName'"
:rules="rules.productName" :rules="rules.productName"
label="商品名称"
> >
<el-input <el-input
v-model="item.productName" v-model="item.productName"
placeholder="请输入商品名称" placeholder="请输入商品名称"
></el-input> />
</el-form-item> </el-form-item>
</div> </div>
<div class="form-row"> <div class="form-row">
<el-form-item <el-form-item
label="规格值"
:prop="'items.' + index + '.specValue'" :prop="'items.' + index + '.specValue'"
:rules="rules.specValue" :rules="rules.specValue"
label="规格值"
> >
<el-input <el-input
v-model.number="item.specValue" v-model.number="item.specValue"
type="number"
placeholder="请输入规格值" placeholder="请输入规格值"
></el-input> type="number"
/>
</el-form-item> </el-form-item>
</div> </div>
<div class="form-row"> <div class="form-row">
<el-form-item <el-form-item
label="规格单位"
:prop="'items.' + index + '.specUnit'" :prop="'items.' + index + '.specUnit'"
:rules="rules.specUnit" :rules="rules.specUnit"
label="规格单位"
> >
<el-input <el-input
v-model="item.specUnit" v-model="item.specUnit"
placeholder="请输入规格单位" placeholder="请输入规格单位"
></el-input> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="排序"
:prop="'items.' + index + '.sortOrder'" :prop="'items.' + index + '.sortOrder'"
:rules="rules.sortOrder" :rules="rules.sortOrder"
label="排序"
> >
<el-input <el-input
v-model.number="item.sortOrder" v-model.number="item.sortOrder"
type="number"
placeholder="请输入排序" placeholder="请输入排序"
></el-input> type="number"
/>
</el-form-item> </el-form-item>
</div> </div>
<div class="form-row"> <div class="form-row">
<el-form-item <el-form-item
label="描述"
:prop="'items.' + index + '.description'" :prop="'items.' + index + '.description'"
:rules="rules.description" :rules="rules.description"
label="描述"
> >
<el-input <el-input
style="display: block"
v-model="item.description" v-model="item.description"
type="textarea"
:rows="1"
placeholder="请输入描述" placeholder="请输入描述"
></el-input> :rows="1"
style="display: block"
type="textarea"
/>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
</el-form> </el-form>
</div> </div>
<div class="fixed-footer"> <div class="goodst_fixed_footer">
<el-button @click="drawerVisible = false">取消</el-button> <el-button @click="drawerVisible = false">取消</el-button>
<el-button type="primary" :loading="loading" @click="submitForm">{{ <el-button :loading="loading" type="primary" @click="submitForm">
mode === "add" ? "提交" : "保存" {{ mode === 'add' ? '提交' : '保存' }}
}}</el-button> </el-button>
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
<script> <script>
import GoodsToolApi from "@/api/goodsTool"; import GoodsToolApi from '@/api/goodsTool'
export default { export default {
name: "BatchProductForm", name: 'BatchProductForm',
props: { props: {
mode: { mode: {
type: String, type: String,
default: "add", default: 'add',
validator: (value) => ["add", "edit"].includes(value), validator: (value) => ['add', 'edit'].includes(value),
}, },
initialData: { initialData: {
type: Array, type: Array,
@ -167,32 +168,34 @@ export default {
}, },
rules: { rules: {
productName: [ productName: [
{ required: true, message: "请输入商品名称", trigger: "blur" }, { required: true, message: '请输入商品名称', trigger: 'blur' },
],
storeId: [
{ required: true, message: '请选择店铺', trigger: 'change' },
], ],
storeId: [{ required: true, message: "请选择店铺", trigger: "change" }],
specValue: [ specValue: [
{ required: true, message: "请输入规格值", trigger: "blur" }, { required: true, message: '请输入规格值', trigger: 'blur' },
{ type: "number", message: "规格值必须为数字", trigger: "blur" }, { type: 'number', message: '规格值必须为数字', trigger: 'blur' },
], ],
specUnit: [ specUnit: [
{ required: true, message: "请输入规格单位", trigger: "blur" }, { required: true, message: '请输入规格单位', trigger: 'blur' },
], ],
sortOrder: [ sortOrder: [
{ required: true, message: "请输入排序", trigger: "blur" }, { required: true, message: '请输入排序', trigger: 'blur' },
], ],
description: [ description: [
{ required: true, message: "请输入描述", trigger: "blur" }, { required: true, message: '请输入描述', trigger: 'blur' },
], ],
}, },
}; }
}, },
watch: { watch: {
// 监听props变化，更新表单数据 // 监听props变化，更新表单数据
initialData: { initialData: {
handler(newVal) { handler(newVal) {
if (this.mode === "edit" && newVal && newVal.length > 0) { if (this.mode === 'edit' && newVal && newVal.length > 0) {
// 深拷贝初始数据，避免修改原始数据 // 深拷贝初始数据，避免修改原始数据
this.batchForm.items = JSON.parse(JSON.stringify(newVal)); this.batchForm.items = JSON.parse(JSON.stringify(newVal))
} }
}, },
immediate: true, immediate: true,
@ -202,40 +205,43 @@ export default {
methods: { methods: {
// 打开抽屉 // 打开抽屉
open() { open() {
this.drawerVisible = true; this.drawerVisible = true
// 如果是新增模式，确保有一个空项 // 如果是新增模式，确保有一个空项
if (this.mode === "add" && this.batchForm.items.length === 0) { if (this.mode === 'add' && this.batchForm.items.length === 0) {
this.addNewItem(); this.addNewItem()
} }
}, },
// 关闭抽屉前的确认 // 关闭抽屉前的确认
handleClose(done) { handleClose(done) {
if (this.hasUnsavedChanges()) { if (this.hasUnsavedChanges()) {
this.$confirm("确定要关闭吗？未保存的数据将会丢失。", "提示", { this.$confirm('确定要关闭吗？未保存的数据将会丢失。', '提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning',
}) })
.then(() => { .then(() => {
done(); done()
}) })
.catch(() => { .catch(() => {
// 取消关闭 // 取消关闭
}); })
} else { } else {
done(); done()
} }
}, },
// 检查是否有未保存的更改 // 检查是否有未保存的更改
hasUnsavedChanges() { hasUnsavedChanges() {
if (this.mode === "add") { if (this.mode === 'add') {
return this.batchForm.items.some( return this.batchForm.items.some(
(item) => (item) =>
item.productName || item.storeId || item.specValue || item.specUnit item.productName ||
); item.storeId ||
item.specValue ||
item.specUnit
)
} }
// 编辑模式下的比较逻辑 // 编辑模式下的比较逻辑
@ -243,47 +249,47 @@ export default {
return ( return (
JSON.stringify(this.batchForm.items) !== JSON.stringify(this.batchForm.items) !==
JSON.stringify(this.initialData) JSON.stringify(this.initialData)
); )
} }
return false; return false
}, },
// 添加新项目 // 添加新项目
addNewItem() { addNewItem() {
this.batchForm.items.push({ this.batchForm.items.push({
productName: "", productName: '',
storeId: "", storeId: '',
specValue: "", specValue: '',
specUnit: "", specUnit: '',
description: "", description: '',
sortOrder: "", sortOrder: '',
}); })
// 滚动到底部 // 滚动到底部
this.$nextTick(() => { this.$nextTick(() => {
const container = document.querySelector(".scrollable-content"); const container = document.querySelector('.scrollable-content')
if (container) { if (container) {
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight
} }
}); })
}, },
// 删除项目 // 删除项目
removeItem(index) { removeItem(index) {
if (this.mode === "add" && this.batchForm.items.length > 1) { if (this.mode === 'add' && this.batchForm.items.length > 1) {
console.log(111); console.log(111)
this.batchForm.items.splice(index, 1); this.batchForm.items.splice(index, 1)
} else { } else {
this.$message.warning("至少保留一个商品组配置"); this.$message.warning('至少保留一个商品组配置')
} }
}, },
// 提交表单 // 提交表单
submitForm() { submitForm() {
this.$refs.batchFormRef.validate(async(valid) => { this.$refs.batchFormRef.validate(async (valid) => {
if (valid) { if (valid) {
this.loading = true; this.loading = true
// 准备提交数据 // 准备提交数据
const submitData = this.batchForm.items.map((item) => ({ const submitData = this.batchForm.items.map((item) => ({
@ -293,11 +299,11 @@ export default {
specUnit: item.specUnit, specUnit: item.specUnit,
description: item.description, description: item.description,
sortOrder: item.sortOrder, sortOrder: item.sortOrder,
})); }))
// 过滤掉空项（新增模式下） // 过滤掉空项（新增模式下）
const filteredData = const filteredData =
this.mode === "add" this.mode === 'add'
? submitData.filter( ? submitData.filter(
(item) => (item) =>
item.productName || item.productName ||
@ -305,64 +311,62 @@ export default {
item.specValue || item.specValue ||
item.specUnit item.specUnit
) )
: submitData; : submitData
if (filteredData.length === 0) { if (filteredData.length === 0) {
this.$message.warning("请添加商品配置组数据"); this.$message.warning('请添加商品配置组数据')
this.loading = false; this.loading = false
return; return
} }
let res = null
let res = null; if (this.mode == 'add') {
if(this.mode=='add'){
res = await GoodsToolApi.batchCreateGoods(submitData) res = await GoodsToolApi.batchCreateGoods(submitData)
}else{ } else {
res = await GoodsToolApi.updateGoods({ res = await GoodsToolApi.updateGoods({
...submitData?.[0], ...submitData?.[0],
id: this.batchForm.items?.[0].id id: this.batchForm.items?.[0].id,
}) })
} }
if(res.status==200){ if (res.status == 200) {
this.$message.success("操作成功"); this.$message.success('操作成功')
} else { } else {
this.loading = false; this.loading = false
} }
} else { } else {
this.$message.error("请完善表单信息"); this.$message.error('请完善表单信息')
return false; return false
} }
}); })
}, },
}, },
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fixed-header { .goodst_fixed_header {
padding: 0 12px 12px; padding: 0 12px 12px;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.scrollable-content { .scrollable-content {
padding: 12px; padding: 12px;
height: calc(100vh - 195px); height: calc(100vh - 195px);
overflow-y: auto; overflow-y: auto;
} }
.fixed-footer { .goodst_fixed_footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
padding: 12px; padding: 12px;
border-top: 1px solid #ebeef5; border-top: 1px solid #ebeef5;
background-color: #fff; background-color: #fff;
} }
.product-card { .product-card {
width: 100%; width: 100%;
margin-bottom: 12px; margin-bottom: 12px;
padding: 12px 12px 0; padding: 12px 12px 0;
@ -370,42 +374,42 @@ export default {
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
background-color: #fff; background-color: #fff;
} }
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 12px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
} }
.form-row { .form-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.form-row .el-form-item { .form-row .el-form-item {
flex: 1 1 calc(33.33% - 12px); flex: 1 1 calc(33.33% - 12px);
margin-bottom: 0; margin-bottom: 0;
} }
.form-row .el-form-item:last-child { .form-row .el-form-item:last-child {
flex: 1 1 calc(33.34% - 12px); flex: 1 1 calc(33.34% - 12px);
} }
.form-row .el-form-item:nth-child(3n) { .form-row .el-form-item:nth-child(3n) {
flex: 1 1 100%; flex: 1 1 100%;
} }
.form-row .el-input__inner { .form-row .el-input__inner {
height: 32px; height: 32px;
} }
.form-row .el-input--textarea .el-input__inner { .form-row .el-input--textarea .el-input__inner {
height: auto; height: auto;
} }
</style> </style>