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({

333
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,7 +59,8 @@
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>
@ -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,7 +131,6 @@
</el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<div v-if="active==1">
@ -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,7 +340,6 @@
</div>
</el-dialog>
</div>
</template>
@ -224,38 +347,34 @@
<script>
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,
@ -283,12 +402,17 @@ 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: [
@ -315,45 +439,99 @@ export default {
status: [
{required: true, message: "商品状态不能为空", trigger: "change"}
],
ruleId: [
{ required: true, message: "规格不能为空", trigger: "change" }
],
remark: [
{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);
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.options = [];
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;
},
@ -455,7 +633,8 @@ export default {
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {