ll
/
ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品信息-ui

master
2812875475 2024-03-07 21:01:56 +08:00
parent 8efdd4a8ba
commit b42e99056d
2 changed files with 287 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/product/category.js
View File

@ -17,6 +17,13 @@ export function getCategory(id) {
})
}
export function getTemplateAttribute(id) {
return request({
url: '/product/category/getTemplateAttribute/' + id,
method: 'get'
})
}
//通过父类id 查询品类详情
export function parentCategoryCommon(id) {
return request({

381
src/views/product/productInfo/index.vue
View File

@ -24,7 +24,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['product:info:add']"
>新增</el-button>
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -35,7 +36,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:info:edit']"
>修改</el-button>
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -46,7 +48,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['product:info:remove']"
>删除</el-button>
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -56,19 +59,20 @@
size="mini"
@click="handleExport"
v-hasPermi="['product:info:export']"
>导出</el-button>
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="商品名称" align="center" prop="name" />
<el-table-column label="商品描述" align="center" prop="introduction" />
<el-table-column label="主类型" align="center" prop="mainType" />
<el-table-column label="父类型" align="center" prop="parentType" />
<el-table-column label="商品类型" align="center" prop="type" />
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="主键" align="center" prop="id"/>
<el-table-column label="商品名称" align="center" prop="name"/>
<el-table-column label="商品描述" align="center" prop="introduction"/>
<el-table-column label="主类型" align="center" prop="mainType"/>
<el-table-column label="父类型" align="center" prop="parentType"/>
<el-table-column label="商品类型" align="center" prop="type"/>
<el-table-column label="商品图片" align="center" prop="image" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.image" :width="50" :height="50"/>
@ -84,8 +88,8 @@
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="规格" align="center" prop="ruleId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="规格" align="center" prop="ruleId"/>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -94,14 +98,16 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:info:edit']"
>修改</el-button>
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:info:remove']"
>删除</el-button>
>删除
</el-button>
</template>
</el-table-column>
</el-table>
@ -125,14 +131,13 @@
</el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<div v-if="active==1">
<el-row>
<el-col :span="12">
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" />
<el-input v-model="form.name" placeholder="请输入商品名称"/>
</el-form-item>
</el-col>
<el-col :span="12">
@ -142,7 +147,8 @@
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@ -150,27 +156,37 @@
<el-row>
<el-col :span="12">
<el-form-item label="商品品牌" prop="name">
<el-form-item label="商品描述">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
<!--商品品牌-->
<el-form-item label="品牌" prop="brandId">
<el-select
v-model="value"
multiple
v-model="form.brandId"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:remote-method="remoteSearchBrandList"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="brand in brandList"
:key="brand.id"
:label="brand.nam"
:value="brand.id">
<el-row>
<div style="display: inline-flex; align-items: center;">
{{ brand.nam }}-----------------
<image-preview :src="brand.logo" style="height: 30px; width: 30px;"></image-preview>
</div>
</el-row>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品描述">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
</el-col>
<el-col :span="12">
@ -185,22 +201,130 @@
</div>
<div v-if="active==2">
<el-form-item label="商品备注">
<editor v-model="form.remark" :min-height="192"/>
<el-form-item label="商品规格" prop="ruleId">
<el-select v-model="form.ruleId" placeholder="商品规格">
<el-option
v-for="rule in ruleList"
:key="rule.id"
:label="rule.name"
:value="rule.id">
<span>
{{ rule.name }}-----
{{ rule.ruleAttrList.map(ruleAttr => ruleAttr.name).toString() }}-----
{{ rule.ruleAttrList.map(ruleAttr => ruleAttr.ruleList.map(a => a.toString())) }}
</span>
</el-option>
</el-select>
</el-form-item>
</div>
<div v-if="active==3">
<el-form-item label="商品品类" prop="ruleId">
<el-cascader
v-model="categoryOptionValue"
clearable
:props="{'value': 'id', 'label': 'name'}"
:options="categoryOptions"></el-cascader>
</el-form-item>
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-tabs v-model="activeName">
<el-tab-pane label="商品属性组" name="first">
<el-row>
<el-col :span="6"
v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>属性组名称【{{ templateAttributeGroup.groupName }}】</span>
</div>
<div style="width: 50px;height: 100px">
<el-form :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
<el-form-item>
<el-input v-model="attribute.value"></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="商品属性" name="second">
商品属性
<el-row style="overflow-x: auto; height: 300px;">
<el-form ref="form" :model="form" label-width="80px">
<el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
<el-form-item :label="templateAttribute.name">
<el-input v-model="templateAttribute.value"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</el-tab-pane>
<el-tab-pane label="自有属性" name="third">
自有属性
<el-card class="box-card">
<el-row>
<el-form :inline="true" :model="customAttributeForm" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item label="属性值">
<el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveCustomAttribute">确定</el-button>
</el-form-item>
</el-form>
</el-row>
</el-card>
<el-card class="box-card">
<el-row>
<el-checkbox-group v-model="attributeIdCheckedList" @change="handleCheckedCitiesChange">
<el-checkbox v-for="attribute in categoryCommonElement.attributeList"
:label="attribute.id"
:value="attribute.id"
:key="attribute.id">
{{ attribute.name }}
</el-checkbox>
</el-checkbox-group>
</el-row>
</el-card>
<el-card class="box-card">
<el-row>
<el-col :span="6" v-for="attribute in attributeCheckedList">
<el-form-item :label="attribute.name">
<el-input v-model="attribute.value"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
<div v-if="active==4">
<el-form-item label="商品品类" prop="name">
<el-input v-model="form.name" placeholder="商品品类" />
<el-form-item label="商品备注">
<editor v-model="form.remark" :min-height="192"/>
</el-form-item>
</div>
@ -216,49 +340,44 @@
</div>
</el-dialog>
</div>
</template>
<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
import {listInfo, getInfo, delInfo, addInfo, updateInfo} from "@/api/product/info";
import {listBrand} from "@/api/product/brand";
import {listRule} from "@/api/product/rule";
import {getTemplateAttribute, listCategory} from "@/api/product/category";
import {addAttribute} from "@/api/product/attribute";
export default {
name: "Info",
dicts: ['sys_normal_disable'],
data() {
return {
options: [],
attributeIdCheckedList: [],
attributeCheckedList: [],
customAttributeForm: {},
activeName: '',
categoryOptionValue: [],
categoryOptions: [],
value: [],
list: [],
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"],
brandList: [],
ruleList: [],
ruleAddForm: {
name: null,
ruleList: null,
},
categoryCommonElement: {
templateAttributeGroupList: [],
templateAttributeList: [],
attributeList: []
},
ruleAddFormStatus: false,
addRulePropertyValue: null,
active:1,
active: 1,
// 遮罩层
loading: true,
// 选中数组
@ -283,77 +402,136 @@ export default {
pageSize: 10,
name: null,
introduction: null,
mainType: null,
mianType: null,
parentType: null,
type: null,
image: null,
carouselImages: null,
status: null,
ruleId: null,
brandId: null,
},
// 表单参数
form: {
},
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: "商品名称不能为空", trigger: "blur" }
{required: true, message: "商品名称不能为空", trigger: "blur"}
],
introduction: [
{ required: true, message: "商品描述不能为空", trigger: "blur" }
{required: true, message: "商品描述不能为空", trigger: "blur"}
],
mainType: [
{ required: true, message: "主类型不能为空", trigger: "change" }
{required: true, message: "主类型不能为空", trigger: "change"}
],
parentType: [
{ required: true, message: "父类型不能为空", trigger: "change" }
{required: true, message: "父类型不能为空", trigger: "change"}
],
type: [
{ required: true, message: "商品类型不能为空", trigger: "change" }
{required: true, message: "商品类型不能为空", trigger: "change"}
],
image: [
{ required: true, message: "商品图片不能为空", trigger: "blur" }
{required: true, message: "商品图片不能为空", trigger: "blur"}
],
carouselImages: [
{ required: true, message: "商品轮播图不能为空", trigger: "blur" }
{required: true, message: "商品轮播图不能为空", trigger: "blur"}
],
status: [
{ required: true, message: "商品状态不能为空", trigger: "change" }
],
ruleId: [
{ required: true, message: "规格不能为空", trigger: "change" }
{required: true, message: "商品状态不能为空", trigger: "change"}
],
remark: [
{ required: true, message: "备注不能为空", trigger: "blur" }
{required: true, message: "备注不能为空", trigger: "blur"}
],
}
};
},
created() {
this.getList();
this.getBrandList();
},
mounted() {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {
getBrandList() {
listBrand(this.queryParams).then(response => {
this.brandList = response.data.rows;
});
},
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
watch: {
categoryOptionValue: {
handler(value) {
if (value != null && value !== undefined && value.length > 0) {
this.form.mainType = value[0];
this.form.parentType = value[1];
this.form.type = value[2];
} else {
this.form.mainType = null
this.form.parentType = null
this.form.type = null
}
}
},
"form.type": {
handler(value) {
console.log(value)
if (value != null) {
getTemplateAttribute(value).then(response => {
console.log(response)
const {data} = response;
const {templateAttributeGroupList, templateAttributeList, attributeList} = data;
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
this.categoryCommonElement.templateAttributeList = templateAttributeList;
this.categoryCommonElement.attributeList = attributeList;
})
}
}
}
},
created() {
this.getList();
this.ruleListFind();
this.CategoryTree();
},
methods: {
handleCheckedCitiesChange() {
let attributeId = this.attributeIdCheckedList
.find(attributeId => this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1)
if (attributeId != undefined) {
let attributeInfo=this.categoryCommonElement.attributeList.find(attributeInfo=>attributeInfo.id===attributeId);
this.attributeCheckedList.push(attributeInfo)
}else{
let attributeChecked =this.attributeCheckedList.find(attributeChecked=>this.attributeIdCheckedList.indexOf(attributeChecked));
this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked),1);
}
},
saveCustomAttribute() {
addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
if (response.code == 200) {
let attributeId = response.data,
code = this.customAttributeForm.code,
name = this.customAttributeForm.name,
value = this.customAttributeForm.value;
this.categoryCommonElement.attributeList.push({
"id":attributeId,
"name":name,
"code":code
});
this.attributeIdCheckedList.push(attributeId)
this.attributeCheckedList.push({
"id":attributeId,
"name":name,
"value":value
});
this.customAttributeForm={}
}
})
},
ruleListFind() {
listRule({"params[isPage]": false}).then(response => {
this.ruleList = response.data;
});
},
remoteSearchBrandList(queryValue) {
listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
this.brandList = response.data;
});
},
CategoryTree() {
listCategory().then(response => {
this.categoryOptions = []
this.categoryOptions = this.handleTree(response.data, "id", "parentId");
console.log(this.categoryOptions);
})
},
next() {
if (this.active++ >= 4) this.active = 1;
},
@ -408,7 +586,7 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
@ -450,12 +628,13 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function () {
return delInfo(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {