BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 1e0f197c35834e0da500a47acc66933d9f179445

Authored by franky
1 parent 407cbb10

spu 新增前端页面完成

Inline Side-by-side
Showing 1 changed file with 347 additions and 46 deletions
yudao-ui-admin/src/views/mall/product/spu/index.vue
  View file @1e0f197
... ... @@ -111,31 +111,33 @@
111 111 <el-form-item label="商品规格">
112 112 <el-button size="mini" @click="shopTagInput()">添加规格</el-button>
113 113 <div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
114   - <span>{{tag.tagName}}</span>
115   - <el-button class="button-new-tag" type="text" icon="el-icon-delete" @click="removeTag(tagIndex)">删除</el-button>
  114 + <span>{{tag.name}}</span>
  115 + <el-button style="margin-left: 10px" class="button-new-tag" type="text" icon="el-icon-delete"
  116 + @click="removeTag(tagIndex)">删除
  117 + </el-button>
116 118 <br/>
117 119 <el-tag
118   - v-for="(tagItem, tagItemIndex) in tag.tagItems"
119   - :key="tagItem.valueId"
120   - closable
121   - :disable-transitions="false"
122   - @close="handleTagClose(tagIndex, tagItemIndex)">
123   - {{tagItem.propValue}}
  120 + v-for="(tagItem, tagItemIndex) in tag.selectValues"
  121 + :key="tagItem"
  122 + style="margin-right: 10px"
  123 + :disable-transitions="false">
  124 + {{tagItem}}
124 125 </el-tag>
125   - <el-input
126   - class="input-new-tag"
127   - v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"
128   - v-model="tagItemInputs[tagIndex].value"
129   - :ref="`saveTagInput${tagIndex}`"
130   - size="small"
131   - @keyup.enter.native="handleInputConfirm(tagIndex)"
132   - @blur="handleInputConfirm(tagIndex)">
133   - </el-input>
  126 + <!-- <el-input-->
  127 + <!-- class="input-new-tag"-->
  128 + <!-- v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"-->
  129 + <!-- v-model="tagItemInputs[tagIndex].value"-->
  130 + <!-- :ref="`saveTagInput${tagIndex}`"-->
  131 + <!-- size="small"-->
  132 + <!-- @keyup.enter.native="handleInputConfirm(tagIndex)"-->
  133 + <!-- @blur="handleInputConfirm(tagIndex)">-->
  134 + <!-- </el-input>-->
134 135 </div>
135 136 </el-form-item>
136 137 <el-form-item label="规格名" v-show="isShowTagInput">
137 138 <el-col :span="8">
138   - <el-select v-model="addTagInput.name" filterable allow-create default-first-option placeholder="请选择" @change="handleTagClick">
  139 + <el-select v-model="addTagInput.name" filterable allow-create default-first-option placeholder="请选择"
  140 + @change="handleTagClick">
139 141 <el-option
140 142 v-for="item in unUseTags"
141 143 :key="item.id"
... ... @@ -147,12 +149,13 @@
147 149 </el-form-item>
148 150 <el-form-item label="规格值" v-show="isShowTagInput">
149 151 <el-col :span="8">
150   - <el-select v-model="addTagInput.selectValues" multiple filterable allow-create default-first-option placeholder="请选择">
  152 + <el-select v-model="addTagInput.selectValues" multiple filterable allow-create default-first-option
  153 + placeholder="请选择">
151 154 <el-option
152 155 v-for="item in dbTagValues"
153   - :key="item.valueId"
154   - :label="item.propValue"
155   - :value="item.propValue">
  156 + :key="item.id"
  157 + :label="item.name"
  158 + :value="item.name">
156 159 </el-option>
157 160 </el-select>
158 161 </el-col>
... ... @@ -161,7 +164,90 @@
161 164 <el-button size="mini" type="primary" @click="addTag()" v-show="isShowTagInput">确定</el-button>
162 165 <el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput">取消</el-button>
163 166 </el-form-item>
164   -
  167 + <el-form-item v-if="form.skus.length>0">
  168 + <el-table
  169 + :data="form.skus"
  170 + border
  171 + style="width: 100%; margin-top: 20px"
  172 + :span-method="tableSpanMethod">
  173 + <el-table-column v-for="(leftTitle, index) in skuTags" :key="index" :label="leftTitle.name">
  174 + <template slot-scope="scope">
  175 + {{scope.row.propertyChildNames[index]}}
  176 + </template>
  177 + </el-table-column>
  178 + <el-table-column v-if="skuTags.length"
  179 + prop="picUrl"
  180 + label="sku图片"
  181 + width="180">
  182 + <template slot-scope="scope">
  183 + <ImageUpload v-model="scope.row.picUrl" :limit="1">
  184 + </ImageUpload>
  185 + </template>
  186 + </el-table-column>
  187 + <el-table-column
  188 + prop="prodName"
  189 + label="条形码"
  190 + width="250" v-if="skuTags.length">
  191 + <template slot-scope="scope">
  192 + <el-input v-model="scope.row.barCode" type="textarea" :disabled="scope.row.status==1"></el-input>
  193 + </template>
  194 + </el-table-column>
  195 + <el-table-column
  196 + prop="price"
  197 + label="销售价">
  198 + <template slot-scope="scope">
  199 + <el-input-number
  200 + size="small"
  201 + v-model="scope.row.price"
  202 + controls-position="right"
  203 + :precision="2"
  204 + :max="1000000000"
  205 + :min="0.01"
  206 + :disabled="scope.row.status==1">
  207 + </el-input-number>
  208 + </template>
  209 + </el-table-column>
  210 + <el-table-column
  211 + prop="oriPrice"
  212 + label="成本价">
  213 + <template slot-scope="scope">
  214 + <el-input-number
  215 + size="small"
  216 + v-model="scope.row.costPrice"
  217 + controls-position="right"
  218 + :precision="2"
  219 + :max="1000000000"
  220 + :min="0.01"
  221 + :disabled="scope.row.status==1">
  222 + </el-input-number>
  223 + </template>
  224 + </el-table-column>
  225 + <el-table-column
  226 + prop="oriPrice"
  227 + label="原价">
  228 + <template slot-scope="scope">
  229 + <el-input-number
  230 + size="small"
  231 + v-model="scope.row.originalPrice"
  232 + controls-position="right"
  233 + :precision="2"
  234 + :max="1000000000"
  235 + :min="0.01"
  236 + :disabled="scope.row.status==1">
  237 + </el-input-number>
  238 + </template>
  239 + </el-table-column>
  240 + <el-table-column
  241 + label="操作">
  242 + <template slot-scope="scope">
  243 + <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-if="scope.row.status==0">
  244 + 正常
  245 + </el-button>
  246 + <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-else>已禁用</el-button>
  247 + </template>
  248 + </el-table-column>
  249 + </el-table>
  250 + </el-form-item>
165 251 <el-form-item label="排序字段" prop="sort">
166 252 <el-input v-model="form.sort" placeholder="请输入排序字段"/>
167 253 </el-form-item>
... ... @@ -199,30 +285,42 @@
199 285 listCategory,
200 286 updateCategory
201 287 } from "@/api/mall/product/category";
202   - import { createProperty, updateProperty, deleteProperty, getProperty, getPropertyPage, exportPropertyExcel } from "@/api/mall/product/property";
  288 + import {
  289 + createProperty,
  290 + updateProperty,
  291 + deleteProperty,
  292 + getProperty,
  293 + getPropertyPage,
  294 + exportPropertyExcel
  295 + } from "@/api/mall/product/property";
203 296  
204 297 import Editor from '@/components/Editor';
205 298 import ImageUpload from '@/components/ImageUpload';
  299 +
206 300 export default {
207 301 name: "Spu",
208 302 components: {
209   - Editor,ImageUpload
  303 + Editor, ImageUpload
210 304 },
211 305 data() {
212 306 return {
213   - dbTagValues:[],
214   - unUseTags:[],
215   - propertyPageList:[],
  307 + tableLeftTitles: [],
  308 + dbTagValues: [],
  309 + allhistoryTags: [],
  310 + unUseTags: [],
  311 + propertyPageList: [],
216 312 isShowTagInput: false,
217 313 addTagInput: {
218 314 name: '',
219   - selectValues: []
  315 + propertyId: '',
  316 + selectValues: [],
  317 + selectValueIds: [],
220 318 },
221   - skuTags:[],
  319 + skuTags: [],
222 320 propName: {
223 321 checkStrictly: true,
224   - label:'name',
225   - value:'id'
  322 + label: 'name',
  323 + value: 'id'
226 324 },
227 325 categoryList: [],
228 326 // 遮罩层
... ... @@ -256,7 +354,22 @@
256 354 status: null,
257 355 },
258 356 // 表单参数
259   - form: {},
  357 + form: {
  358 + id: undefined,
  359 + name: undefined,
  360 + sellPoint: undefined,
  361 + description: undefined,
  362 + categoryId: undefined,
  363 + categoryIds: [],
  364 + picUrls: undefined,
  365 + sort: undefined,
  366 + likeCount: undefined,
  367 + price: undefined,
  368 + quantity: undefined,
  369 + status: undefined,
  370 + isShowTagInput: undefined,
  371 + skus:[],
  372 + },
260 373 // 表单校验
261 374 rules: {
262 375 sellPoint: [{required: true, message: "卖点不能为空", trigger: "blur"}],
... ... @@ -264,38 +377,183 @@
264 377 categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"}],
265 378 picUrls: [{required: true, message: "商品主图地址", trigger: "blur"}],
266 379 sort: [{required: true, message: "排序字段不能为空", trigger: "blur"}],
267   - }
  380 + },
  381 + tagIndex:0,
268 382 };
269 383 },
270 384 created() {
  385 +
271 386 this.getList();
272   - this.getListCategory();
273   - this.getPropertyPageList();
  387 +
274 388 },
275 389 methods: {
276   - addTag(){
  390 + getTableSpecData() {
  391 + return this.value
  392 + },
  393 + tableSpanMethod({row, column, rowIndex, columnIndex}) {
277 394  
278 395 },
279   - hideTagInput(){
  396 + changeSkuStatus(tagIndex) {
  397 + if(this.form.skus[tagIndex].status == 0){
  398 + this.form.skus[tagIndex].status = 1 ;
  399 + }else {
  400 + this.form.skus[tagIndex].status = 0 ;
  401 + }
280 402  
281 403 },
282   - shopTagInput(){
  404 + skuAddProdName() {
  405 + if (this.initing) {
  406 + return
  407 + }
  408 + let skuList = []
  409 + for (let i = 0; i < this.value.length; i++) {
  410 + const sku = Object.assign({}, this.value[i])
  411 + if (!sku.properties) {
  412 + return
  413 + }
  414 + sku.skuName = ''
  415 + let properties = sku.properties.split(';')
  416 + for (const propertiesKey in properties) {
  417 + sku.skuName += properties[propertiesKey].split(':')[1] + ' '
  418 + }
  419 + sku.prodName = this.prodName + ' ' + sku.skuName
  420 + skuList.push(sku)
  421 + }
  422 + this.$emit('input', skuList)
  423 + },
  424 + handleTagClose(tagIndex, tagItemIndex) {
283 425  
284 426 },
285   - removeTag(row){
  427 + //确定添加sku规格
  428 + addTag() {
286 429  
  430 + let skus = this.unUseTags.map(function (item, index) {
  431 + return item.name
  432 + });
  433 + console.log("skus=="+JSON.stringify(skus))
  434 + let index = skus.indexOf(this.addTagInput.name);
  435 + console.log("index=="+index)
  436 + console.log("skus[index].id=="+this.unUseTags[index].id)
  437 + console.log("this.unUseTags[index].propertyValueList=="+JSON.stringify(this.unUseTags[index].propertyValueList))
  438 + this.addTagInput.propertyId = this.unUseTags[index].id;
  439 + for (let i = 0; i < this.addTagInput.selectValues.length; i++) {
  440 + for (let j = 0; j < this.unUseTags[index].propertyValueList.length; j++) {
  441 + if (this.addTagInput.selectValues[i] == this.unUseTags[index].propertyValueList[j].name) {
  442 + this.addTagInput.selectValueIds.push(this.unUseTags[index].propertyValueList[j].id)
  443 + }
  444 + }
  445 + }
  446 + let addTagInput = JSON.parse(JSON.stringify(this.addTagInput))
  447 + console.log("addTagInput=="+JSON.stringify(addTagInput))
  448 + this.skuTags.push(addTagInput);
  449 + this.unUseTags.splice(index, 1);
  450 + this.isShowTagInput = false;
  451 + this.getTable();
287 452 },
288   - handleTagClick(row){
  453 + getTable(){
  454 + this.form.skus=[];
  455 + let skuTags = JSON.parse(JSON.stringify(this.skuTags));
  456 + let sku1s = [];
  457 + let skuIds = [];
  458 + let propertyIds = [];
  459 + let propertyNames = [];
  460 + for (let i = 0; i < skuTags.length; i++) {
  461 + sku1s.push(skuTags[i].selectValues);
  462 + skuIds.push(skuTags[i].selectValueIds);
  463 + propertyIds.push(skuTags[i].propertyId);
  464 + propertyNames.push(skuTags[i].name);
  465 + }
  466 + let skuAll = sku1s.reduce((x,y) =>{
  467 + let arr = [];
  468 + x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
  469 + return arr;
  470 + },[[]])
  471 + console.log(skuAll);
289 472  
  473 + let skuIdAll = skuIds.reduce((x,y) =>{
  474 + let arr = [];
  475 + x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
  476 + return arr;
  477 + },[[]])
  478 + console.log(skuIdAll);
  479 + for (let i = 0; i < skuAll.length; i++) {
  480 + let han = {
  481 + propertyNames:propertyNames,
  482 + propertyIds:propertyIds,
  483 + propertyChildNames:skuAll[i],
  484 + propertyChildIds:skuIdAll[i],
  485 + properties: [],
  486 + picUrl: '',
  487 + costPrice: '',
  488 + originalPrice: '',
  489 + spuId: '',
  490 + prodName: '',
  491 + price: '',
  492 + barCode: '',
  493 + status: '0',
  494 + }
  495 + this.form.skus.push(han);
  496 + }
  497 + this.form.skus.forEach(x=>{
  498 + x.properties=[];
  499 + for (let i = 0; i <x.propertyIds.length ; i++) {
  500 + x.properties.push({
  501 + propertyId:x.propertyIds[i],
  502 + valueId:x.propertyChildIds[i]
  503 + })
  504 + }
  505 + })
  506 +
  507 + console.log("this.skus=="+JSON.stringify(this.form.skus))
  508 + },
  509 + hideTagInput() {
  510 + this.isShowTagInput = false;
  511 + this.addTagInput = {
  512 + name: '',
  513 + propertyId: '',
  514 + selectValues: [],
  515 + selectValueIds: [],
  516 + };
  517 + },
  518 + shopTagInput() {
  519 + if (this.unUseTags.length <= 0) {
  520 + return this.$message.error("规格已经添加完毕")
  521 + }
  522 + this.isShowTagInput = true;
  523 + this.addTagInput = {
  524 + name: '',
  525 + propertyId: '',
  526 + selectValues: [],
  527 + selectValueIds: [],
  528 + };
  529 + },
  530 + //删除已选的规格
  531 + removeTag(row) {
  532 + let skus = this.allhistoryTags.map(function (item, index) {
  533 + return item.name
  534 + })
  535 + let index = skus.indexOf(this.skuTags[row].name);
  536 + this.unUseTags.push(this.allhistoryTags[index]);
  537 + this.skuTags.splice(row, 1);
  538 + this.getTable();
  539 + },
  540 + handleTagClick(row) {
  541 + for (let i = 0; i < this.propertyPageList.length; i++) {
  542 + if (row == this.propertyPageList[i].name) {
  543 + this.dbTagValues = this.propertyPageList[i].propertyValueList
  544 + }
  545 + }
290 546 },
291 547 /** 查询规格 */
292 548 getPropertyPageList() {
293 549 // 执行查询
294 550 getPropertyPage().then(response => {
295 551 this.propertyPageList = response.data.list;
296   - this.unUseTags= this.propertyPageList.map(function (item,index) {
  552 +
  553 + this.unUseTags = this.propertyPageList.map(function (item, index) {
297 554 return item
298 555 })
  556 + this.allhistoryTags = JSON.parse(JSON.stringify(this.unUseTags));
299 557 console.log(this.propertyPageList)
300 558 });
301 559 },
... ... @@ -327,6 +585,7 @@
327 585 },
328 586 /** 表单重置 */
329 587 reset() {
  588 +
330 589 this.form = {
331 590 id: undefined,
332 591 name: undefined,
... ... @@ -340,9 +599,10 @@
340 599 price: undefined,
341 600 quantity: undefined,
342 601 status: undefined,
343   - isShowTagInput:undefined,
344   -
  602 + isShowTagInput: undefined,
  603 + skus:[],
345 604 };
  605 + this.skuTags=[];
346 606 this.resetForm("form");
347 607 },
348 608 /** 搜索按钮操作 */
... ... @@ -361,13 +621,31 @@
361 621 this.reset();
362 622 this.open = true;
363 623 this.title = "添加商品spu";
  624 + this.getListCategory();
  625 + this.getPropertyPageList();
364 626 },
365 627 /** 修改按钮操作 */
366 628 handleUpdate(row) {
367 629 this.reset();
368 630 const id = row.id;
369 631 getSpu(id).then(response => {
370   - this.form = response.data;
  632 + let dataSpu = response.data;
  633 + this.form = {
  634 + id: dataSpu.id,
  635 + name: dataSpu.name,
  636 + sellPoint: dataSpu.sellPoint,
  637 + description: dataSpu.sellPoint,
  638 + categoryId: dataSpu.sellPoint,
  639 + categoryIds: [],
  640 + picUrls: dataSpu.picUrls,
  641 + sort: dataSpu.sort,
  642 + likeCount: dataSpu.likeCount,
  643 + price: dataSpu.price,
  644 + quantity: dataSpu.quantity,
  645 + status: dataSpu.status,
  646 + isShowTagInput:undefined,
  647 + skus:dataSpu.productSkuRespVOS,
  648 + };
371 649 this.open = true;
372 650 this.title = "修改商品spu";
373 651 });
... ... @@ -380,7 +658,9 @@
380 658 if (!valid) {
381 659 return;
382 660 }
383   - this.form.categoryId= this.form.categoryIds[(this.form.categoryIds.length-1)]
  661 + this.form.picUrls = this.form.picUrls.split(',');
  662 + this.form.categoryId = this.form.categoryIds[(this.form.categoryIds.length - 1)];
  663 + this.form.status = Number(this.form.status);
384 664 // 修改的提交
385 665 if (this.form.id != null) {
386 666 updateSpu(this.form).then(response => {
... ... @@ -429,3 +709,24 @@
429 709 }
430 710 };
431 711 </script>
  712 +<style lang="scss">
  713 + .app-container {
  714 + .el-tag + .el-tag {
  715 + margin-left: 10px;
  716 + }
  717 +
  718 + .button-new-tag {
  719 + margin-left: 10px;
  720 + height: 32px;
  721 + line-height: 30px;
  722 + padding-top: 0;
  723 + padding-bottom: 0;
  724 + }
  725 +
  726 + .input-new-tag {
  727 + width: 90px;
  728 + margin-left: 10px;
  729 + vertical-align: bottom;
  730 + }
  731 + }
  732 +</style>
... ...