Skip to content

Y
yongxinda-admin
提交 16d5dcb4 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

修改商品规格

上级 53a25e71
隐藏空白字符变更
内嵌 并排
正在显示 包含 127 行增加 和 68 行删除
src/views/commodityManage/edit.vue
浏览文件 @ 16d5dcb4
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
<el-form-item label="商品图片"> <el-form-item label="商品图片">
<el-upload :action="uploadPath" :show-file-list="false" :headers="headers" <el-upload :action="uploadPath" :show-file-list="false" :headers="headers"
:on-success="uploadPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif"> :on-success="uploadPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
<img v-if="goods.picUrl" :src="goods.picUrl" class="avatar" /> <!-- <img v-if="goods.picUrl" :src="goods.picUrl" class="avatar" /> -->
<!-- <img v-if="goods.picUrl" :src="'http://192.168.0.23' + goods.picUrl" class="avatar" /> --> <img v-if="goods.picUrl" :src="'http://192.168.0.23' + goods.picUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"> <el-icon v-else class="avatar-uploader-icon">
<Plus /> <Plus />
</el-icon> </el-icon>
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
<el-col :span="10"> <el-col :span="10">
<el-radio-group v-model="multipleSpec" @change="specChanged"> <el-radio-group v-model="multipleSpec" @change="specChanged">
<!-- <el-radio-button :label="false">默认标准规格</el-radio-button> --> <!-- <el-radio-button :label="false">默认标准规格</el-radio-button> -->
<el-radio-button :label="false">多规格支持</el-radio-button> <el-radio-button :label="true">多规格支持</el-radio-button>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
<el-col v-if="multipleSpec" :span="10"> <el-col v-if="multipleSpec" :span="10">
...@@ -115,14 +115,14 @@ ...@@ -115,14 +115,14 @@
<el-table :data="specifications"> <el-table :data="specifications">
<el-table-column property="specification" label="规格名" /> <el-table-column property="specification" label="规格名" />
<el-table-column property="value" label="规格值"> <el-table-column property="value" label="规格值" align="center">
<template #default="scope"> <template #default="scope">
<el-tag type="primary"> <el-tag type="primary">
{{ scope.row.value }} {{ scope.row.value }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="picUrl" label="规格图片"> <el-table-column property="picUrl" label="规格图片" align="center">
<template #default="scope"> <template #default="scope">
<img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40" /> <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40" />
</template> </template>
...@@ -140,16 +140,28 @@ ...@@ -140,16 +140,28 @@
<el-form ref="specRef" :rules="rules" :model="specForm" status-icon label-position="left" <el-form ref="specRef" :rules="rules" :model="specForm" status-icon label-position="left"
label-width="100px" style="width: 400px; margin-left: 50px"> label-width="100px" style="width: 400px; margin-left: 50px">
<el-form-item label="规格名" prop="specification"> <el-form-item label="规格名" prop="specification">
<el-input v-model="specForm.specification" /> <el-select v-model="specForm.specification" class="m-2" placeholder="请选择规格名"
@change="dictChange">
<el-option v-for="item in dictList" :key="item.id" :label="item.dictName"
:value="item.id" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="规格值" prop="value"> <el-form-item label="规格值" prop="value">
<el-input v-model="specForm.value" /> <el-select v-model="specForm.value" multiple collapse-tags collapse-tags-tooltip
placeholder="请选择规格值" style="width: 240px" @change="dictItemChange">
<el-option v-for="item in dictItemList" :key="item.id" :label="item.itemText"
:value="item.itemText" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="规格图片" prop="picUrl"> <el-form-item label="规格图片" prop="picUrl">
<el-upload :action="uploadPath" :show-file-list="false" :headers="headers" <el-upload :action="uploadPath" :show-file-list="false" :headers="headers"
:on-success="uploadSpecPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif"> :on-success="uploadSpecPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
<img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar" /> <div v-if="specForm.picUrl">
<i v-else class="el-icon-plus avatar-uploader-icon" /> <img :src="'http://192.168.0.23' + specForm.picUrl" class="avatar" />
</div>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -206,6 +218,7 @@ import { uploadPath } from "@/services/api/storage"; ...@@ -206,6 +218,7 @@ import { uploadPath } from "@/services/api/storage";
import { ElMessageBox, ElMessage, ElNotification } from "element-plus"; import { ElMessageBox, ElMessage, ElNotification } from "element-plus";
import richTextEditor from '@/components/richTextEditor.vue' import richTextEditor from '@/components/richTextEditor.vue'
import { listGoods } from "@/services/api/commodityManage/list"; import { listGoods } from "@/services/api/commodityManage/list";
import { getDictList, getDictItemList } from '@/services/api/market/auxiliary'
let editDrawer = ref(false) let editDrawer = ref(false)
let newKeywordVisible = ref(false); let newKeywordVisible = ref(false);
...@@ -234,7 +247,7 @@ let goods = ref({ ...@@ -234,7 +247,7 @@ let goods = ref({
let goodsParts = ref() let goodsParts = ref()
let specVisiable = ref(false); let specVisiable = ref(false);
let specForm = ref({ specification: "", value: "", picUrl: "" } as any); let specForm = ref({ specification: "", value: "", picUrl: "" } as any);
let multipleSpec = ref(false); let multipleSpec = ref(true);
let specifications = ref([] as any); let specifications = ref([] as any);
let productVisiable = ref(false); let productVisiable = ref(false);
let productForm = ref({ let productForm = ref({
...@@ -429,33 +442,52 @@ let specChanged = (label: any) => { ...@@ -429,33 +442,52 @@ let specChanged = (label: any) => {
let uploadSpecPicUrl = (res: any) => { let uploadSpecPicUrl = (res: any) => {
specForm.value.picUrl = res.data.url; specForm.value.picUrl = res.data.url;
} }
let dictList = ref()
let handleSpecificationShow = () => { let handleSpecificationShow = () => {
specForm.value = { specification: "", value: "", picUrl: "" }; getDictList().then((res: any) => {
specVisiable.value = true; if (res.code === 200) {
dictList.value = res.data.records
specForm.value = { specification: "", value: "", picUrl: "" };
specVisiable.value = true;
}
})
} }
let handleSpecificationAdd = () => { let dictItemList = ref()
let index = specifications.value.length - 1; let dictName = ref()
for (let i = 0; i < specifications.value.length; i++) { let dictValue = ref()
const v = specifications.value[i]; let dictChange = (id: any) => {
if (v.specification === specForm.value.specification) { getDictItemList({ dictId: id }).then((res: any) => {
if (v.value === specForm.value) { if (res.code === 200) {
ElMessage({ dictItemList.value = res.data.records
type: "warning", for (let s of dictList.value) {
message: "已经存在规格值:" + v.value, if (s.id === id) dictName.value = s.dictName
});
specForm.value = {};
specVisiable.value = false;
return;
} else {
index = i;
} }
} }
})
}
let dictItemChange = (val: []) => {
dictValue.value = val
}
let handleSpecificationAdd = () => {
if (!dictName.value) return ElMessage({
type: 'warning',
message: '请选择规格名'
})
if (dictValue.value) {
for (let s of dictValue.value) {
specifications.value.push({
specification: dictName.value,
value: s
})
}
specVisiable.value = false;
specToProduct();
} else {
ElMessage({
type: 'warning',
message: '请选择规格值'
})
} }
specifications.value.splice(index + 1, 0, specForm);
specVisiable.value = false;
specToProduct();
} }
let handleSpecificationDelete = (row: any) => { let handleSpecificationDelete = (row: any) => {
const index = specifications.value.indexOf(row); const index = specifications.value.indexOf(row);
......
src/views/commodityManage/shelves.vue
浏览文件 @ 16d5dcb4
...@@ -113,12 +113,12 @@ ...@@ -113,12 +113,12 @@
</el-row> </el-row>
<el-table :data="specifications"> <el-table :data="specifications">
<el-table-column property="specification" label="规格名" /> <el-table-column property="specification" label="规格名" align="left" />
<el-table-column property="value" label="规格值"> <el-table-column property="value" label="规格值" align="center">
<template #default="scope"> <template #default="scope">
<!-- <el-tag type="primary"> --> <el-tag type="primary">
{{ scope.row.value }} {{ scope.row.value }}
<!-- </el-tag> --> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="picUrl" label="规格图片"> <el-table-column property="picUrl" label="规格图片">
...@@ -139,20 +139,28 @@ ...@@ -139,20 +139,28 @@
<el-form ref="specRef" :rules="rules" :model="specForm" status-icon label-position="left" <el-form ref="specRef" :rules="rules" :model="specForm" status-icon label-position="left"
label-width="100px" style="width: 400px; margin-left: 50px"> label-width="100px" style="width: 400px; margin-left: 50px">
<el-form-item label="规格名" prop="specification"> <el-form-item label="规格名" prop="specification">
<el-input v-model="specForm.specification" /> <el-select v-model="specForm.specification" class="m-2" placeholder="请选择规格名"
@change="dictChange">
<el-option v-for="item in dictList" :key="item.id" :label="item.dictName"
:value="item.id" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="规格值" prop="value"> <el-form-item label="规格值" prop="value">
<el-input v-model="specForm.value" /> <el-select v-model="specForm.value" multiple collapse-tags collapse-tags-tooltip
placeholder="请选择规格值" style="width: 240px" @change="dictItemChange">
<el-option v-for="item in dictItemList" :key="item.id" :label="item.itemText"
:value="item.itemText" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="规格图片" prop="picUrl"> <el-form-item label="规格图片" prop="picUrl">
<el-upload :action="uploadPath" :show-file-list="false" :headers="headers" <el-upload :action="uploadPath" :show-file-list="false" :headers="headers"
:on-success="uploadSpecPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif"> :on-success="uploadSpecPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
<div v-if="specForm.picUrl"> <div v-if="specForm.picUrl">
<!-- <img v-if="specForm.picUrl.split('http').length > 1" :src="specForm.picUrl"
class="avatar" /> -->
<img :src="'http://192.168.0.23' + specForm.picUrl" class="avatar" /> <img :src="'http://192.168.0.23' + specForm.picUrl" class="avatar" />
</div> </div>
<i v-else class="el-icon-plus avatar-uploader-icon" /> <el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -209,6 +217,7 @@ import { uploadPath } from "@/services/api/storage"; ...@@ -209,6 +217,7 @@ import { uploadPath } from "@/services/api/storage";
import { ElMessageBox, ElMessage, ElNotification } from "element-plus"; import { ElMessageBox, ElMessage, ElNotification } from "element-plus";
import richTextEditor from '@/components/richTextEditor.vue' import richTextEditor from '@/components/richTextEditor.vue'
import { listGoods } from "@/services/api/commodityManage/list"; import { listGoods } from "@/services/api/commodityManage/list";
import { getDictList, getDictItemList } from '@/services/api/market/auxiliary'
let shelvesDrawer = ref(false) let shelvesDrawer = ref(false)
let newKeywordVisible = ref(false); let newKeywordVisible = ref(false);
...@@ -402,44 +411,62 @@ let specChanged = (label: any) => { ...@@ -402,44 +411,62 @@ let specChanged = (label: any) => {
} }
} }
let uploadSpecPicUrl = (res: any) => { let uploadSpecPicUrl = (res: any) => {
specForm.value.picUrl = res.data.url; console.log('上传成功');
// specForm.value.picUrl = res.data.url;
} }
let dictList = ref()
let handleSpecificationShow = () => { let handleSpecificationShow = () => {
specForm.value = { specification: "", value: "", picUrl: "" }; getDictList().then((res: any) => {
specVisiable.value = true; if (res.code === 200) {
dictList.value = res.data.records
specForm.value = { specification: "", value: "", picUrl: "" };
specVisiable.value = true;
}
})
} }
let handleSpecificationAdd = () => { let handleSpecificationAdd = () => {
console.log(specifications.value); if (!dictName.value) return ElMessage({
console.log(specForm.value); type: 'warning',
message: '请选择规格名'
let index = specifications.value.length - 1; })
for (let i = 0; i < specifications.value.length; i++) { if (dictValue.value) {
const v = specifications.value[i]; for (let s of dictValue.value) {
if (v.specification === specForm.value.specification) { specifications.value.push({
if (v.value === specForm.value) { specification: dictName.value,
ElMessage({ value: s
type: "warning", })
message: "已经存在规格值:" + v.value,
});
specForm.value = { specification: "", value: "", picUrl: "" };
specVisiable.value = false;
return;
} else {
index = i;
}
} }
specVisiable.value = false;
specToProduct();
} else {
ElMessage({
type: 'warning',
message: '请选择规格值'
})
} }
specifications.value.splice(index + 1, 0, specForm.value);
specVisiable.value = false;
specToProduct();
} }
let handleSpecificationDelete = (row: any) => { let handleSpecificationDelete = (row: any) => {
const index = specifications.value.indexOf(row); const index = specifications.value.indexOf(row);
specifications.value.splice(index, 1); specifications.value.splice(index, 1);
specToProduct(); specToProduct();
} }
let dictItemList = ref()
let dictName = ref()
let dictValue = ref()
let dictChange = (id: any) => {
getDictItemList({ dictId: id }).then((res: any) => {
if (res.code === 200) {
dictItemList.value = res.data.records
for (let s of dictList.value) {
if (s.id === id) dictName.value = s.dictName
}
}
})
}
let dictItemChange = (val: []) => {
dictValue.value = val
}
let specToProduct = () => { let specToProduct = () => {
if (specifications.value.length === 0) { if (specifications.value.length === 0) {
return; return;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论