xieruidong il y a 2 ans
Parent
commit
1b9a568eb3
2 fichiers modifiés avec 126 ajouts et 58 suppressions
  1. 22 16
      application/admin/view/goods/add.html
  2. 104 42
      public/assets/js/backend/goods.js

+ 22 - 16
application/admin/view/goods/add.html

@@ -133,15 +133,15 @@
                 <el-button size="mini" @click="addMain()">添加规格</el-button>
                 <div v-for="(spec,idx) in form.size" :key="idx" style="margin-top: 10px;background: #F2F6FC;">
                     <div>
-                        规格名:<el-input v-model="spec.type" class="smInput" placeholder="规格名"></el-input>
+                        规格名:<el-input v-model="spec.type" class="smInput" placeholder="规格名" @input="nameChange(idx)"></el-input>
                         <el-button @click="delMain(idx)" size="mini" type="text">删除</el-button>
                     </div>
                     <el-button size="mini" @click="addName(spec)">添加规格值</el-button>
                     <div style="padding-left: 1px;">
-                        <div v-for="(item,idx) in spec.names" :key="idx" class="sizeSpecItem">
-                            <el-input class="sInput" v-model="item.name" placeholder="输入规格值" @input="nameChange(idx)"></el-input>
-                            <el-button @click="delSize(spec,idx)" size="mini" type="text">删除</el-button>
-                        </div>
+                        <template v-for="(item,item_idx) in spec.names" :key="item_idx" class="">
+                            <el-tag readonly @click="changeName(item,idx,item_idx)" closable @close="delSize(spec,item_idx)">{{item.name}}</el-tag>
+<!--                            <el-button @click="delSize(spec,idx)" size="mini" type="text">删除</el-button>-->
+                        </template>
                     </div>
                 </div>
             </el-form-item>
@@ -150,11 +150,11 @@
                     <div v-for="(sku,sizeIdx) in form.sku" :key="sizeIdx">
                         <div>
                             <div class="name">
-                                <el-tag v-for="(item,idx) in sku.key" :key="idx">{{item.size.type}}:{{item.name.name}}</el-tag>
+                                <el-tag v-for="(item,idx) in sku" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
                             </div>
-                            <el-input :controls="false" :min="0" :step="1" v-model="sku.num_stock" class="sInput" placeholder="库存"></el-input>
-                            <el-input :controls="false" :min="0" :step="1" v-model="sku.num_stock_kill" class="sInput" placeholder="秒杀库存"></el-input>
-                            <el-input :controls="false" :min="0" v-model="sku.amount_cost" class="sInput" placeholder="成本价"></el-input>
+                            库存:<el-input :controls="false" :min="0" :step="1" v-model="sku.num_stock" class="smInput" placeholder="库存"></el-input>
+                            秒杀库存:<el-input :controls="false" :min="0" :step="1" v-model="sku.num_stock_kill" class="smInput" placeholder="秒杀库存"></el-input>
+                            成本价:<el-input :controls="false" :min="0" v-model="sku.amount_cost" class="smInput" placeholder="成本价"></el-input>
                         </div>
                     </div>
                 </div>
@@ -163,7 +163,9 @@
                 <div>
                     <div v-for="(sku,sizeIdx) in form.sku" :key="sizeIdx">
                         <div>
-                            <div class="name">{{sku.key|showName}}</div>
+                            <div class="name">
+                                <el-tag v-for="(item,idx) in sku" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
+                            </div>
                             <el-button size="mini" @click="addLadder(sku.amount_ladder)">添加</el-button>
                             <div v-for="(item,ladderIdx) in sku.amount_ladder">
                                 <el-input :controls="false" :min="0" :step="1" v-model="item.min" class="smInput" placeholder="数量区间"></el-input>
@@ -179,7 +181,9 @@
                 <div>
                     <div v-for="(sku,sizeIdx) in form.sku" :key="sizeIdx">
                         <div>
-                            <div class="name">{{sku.key|showName}}</div>
+                            <div class="name">
+                                <el-tag v-for="(item,idx) in sku" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
+                            </div>
                             <el-button size="mini" @click="addLadder(sku.amount_kill_ladder)">添加</el-button>
                             <div v-for="(item,ladderIdx) in sku.amount_kill_ladder">
                                 <el-input :controls="false" :min="0" :step="1" v-model="item.min" class="smInput" placeholder="数量区间"></el-input>
@@ -205,13 +209,15 @@
             </form>
             <el-form-item label="规格介绍">
                 <div>
-                    <div v-for="(size,sizeIdx) in form.detail" :key="sizeIdx">
-                        <div class="name">{{size.size.name}}&{{size.spec.name}}</div>
-                        <el-button size="mini" @click="addDetail(size.arr)">添加</el-button>
-                        <div v-for="(item,idx) in size.arr">
+                    <div v-for="(size,sizeIdx) in form.sku" :key="sizeIdx">
+                        <div class="name">
+                            <el-tag v-for="(item,idx) in size" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
+                        </div>
+                        <el-button size="mini" @click="addDetail(size.detail)">添加</el-button>
+                        <div v-for="(item,idx) in size.detail" :key="idx">
                             <el-input v-model="item.name" class="sInput" placeholder="参数名"></el-input>
                             <el-input v-model="item.value" class="sInput" placeholder="参数值"></el-input>
-                            <el-button @click="delDetail(size.arr,idx)" size="mini" type="danger">删除</el-button>
+                            <el-button @click="delDetail(size.detail,idx)" size="mini" type="danger">删除</el-button>
                         </div>
                     </div>
                 </div>

+ 104 - 42
public/assets/js/backend/goods.js

@@ -229,8 +229,8 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                             status:1,
                             logo:[],
                             video:null,
-                            size:{},
-                            sku:{},
+                            size:[],
+                            sku:[],
                             detail:{},
                             service:[{name:null,value:null}],
                         },
@@ -291,64 +291,126 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                         this.form.video=null
                     },
                     addMain(){
-                        let idx=Date.now()
-                        this.$set(this.form.size,idx,{
+                        let idx=this.form.size.length+1
+                        this.form.size.push({
+                            type:'',
+                            names:[],
+                        })
+                        /*this.$set(this.form.size,idx,{
                             type:null,
                             names:{},
-                        })
+                        })*/
                     },
                     delMain(idx){
                         this.$delete(this.form.size,idx)
+                        this.buildSku()
                     },
                     addName(spec){
-                        let idx=Date.now()
-                        this.$set(spec.names,idx,{
-                            name:null
-                        })
-                        let size=this.form.size
-                        let sizeLen=Object.keys(size).length
-                        let k=Object.keys(size)[0]
-                        let thisNames=size[k].names
-                        Object.keys(thisNames).forEach((_k)=>{
-                            let key={},show=false
-                            key[_k]={
-                                size:size[k],
-                                name:thisNames[_k]
-                            }
-                            Object.keys(size).forEach((kk)=>{
-                                if(k===kk){
-                                    return
-                                }
-                                show=true
-                                let nameKeys=Object.keys(size[kk].names)
-                                for (let i=0;i<nameKeys.length;i++){
-                                    let kkk=nameKeys[i]
-                                    key[kkk]={
-                                        size:size[kk],
-                                        name:size[kk].names[kkk]
+                        this.$prompt('请输入名称', '提示', {
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            inputErrorMessage: '请输入',
+                            inputPattern:/\S+/
+                        }).then(({value})=>{
+                            for (let i=0;i<Object.values(this.form.size).length;i++){
+                                for (let a=0;a<Object.values(this.form.size[i].names).length;a++){
+                                    if(this.form.size[i].names[a].name==value){
+                                        this.$message.error('名称已存在')
+                                        return false
                                     }
                                 }
+                            }
+                            spec.names.push({
+                                name:value
                             })
-                            if(show && Object.keys(key).length>1){
-                                let keyStr=Object.keys(key).join(',')
-                                if(!this.form.sku[keyStr]){
-                                    this.$set(this.form.sku,keyStr,{
-                                        key,
-                                        num_stock:null,
-                                        num_stock_kill:null,
-                                        amount_cost:null,
-                                        amount_ladder:[],
-                                        amount_kill_ladder:[],
-                                    })
+                            this.buildSku()
+                        })
+                    },
+                    changeName(item,idx,item_idx){
+                        this.$prompt('请输入名称', '提示', {
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            inputErrorMessage: '请输入',
+                            inputPattern:/\S+/,
+                            inputValue:item.name
+                        }).then(({value})=>{
+                            for (let i=0;i<Object.values(this.form.size).length;i++){
+                                for (let a=0;a<Object.values(this.form.size[i].names).length;a++){
+                                    if(this.form.size[i].names[a].name==value && i!==idx && a!==item_idx){
+                                        this.$message.error('名称已存在')
+                                        return false
+                                    }
                                 }
                             }
+                            item.name=value
+                            this.buildSku()
                         })
                     },
+                    buildSku(){
+                        this.setTableList()
+                    },
+                    /**
+                     * 设置表格数据 该方法在新增规格、新增规格值、规格和规格值的文本改变都要调用
+                     */
+                    setTableList(){
+                        let newList=[];
+                        this.getRowList(null,0,newList)
+                        this.form.sku=newList;
+                    },
+                    /**
+                     * 获取行数据 specList规格集合 tableList表格集合
+                     * @param specValues 多规格值通过逗号拼接组成每一行唯一值
+                     * @param specIndex 规格索引
+                     * @param newList 新表格数据
+                     */
+                    getRowList(specValues,specIndex,newList){
+                        if(specIndex<this.form.size.length){
+                            this.form.size[specIndex].names.forEach((t)=>{
+                                let newValues=(specValues===null?t.name:(specValues+","+t.name))
+                                //当前规格值,一直往下规格值循环完
+                                this.getRowList(newValues,specIndex+1,newList)
+                            })
+                            //当添加新规格(第二个规格的时候)没有规格值时,默认一个空值
+                            if(this.form.size[specIndex].names.length===0 && specValues!==null){
+                                let newValues=specValues+","
+                                this.getRowList(newValues,specIndex+1,newList)
+                            }
+                        }
+                        //当最后规格的规格值循环到最后后添加行数据
+                        else{
+                            //判断表格行数据是否已经存在,存在直接添加不创建新行
+                            let row = this.form.sku.find((r)=>{return r.specValues===specValues});
+                            if(row){
+                                newList.push({...row})
+                            }
+                            else{
+                                //默认的字段
+                                row = {
+                                    size:specIndex,
+                                    specValues:specValues,
+                                    num_stock:0,
+                                    num_stock_kill:0,
+                                    amount_cost:0,
+                                    amount_ladder:[],
+                                    amount_kill_ladder:[],
+                                    detail:[],
+                                }
+                                //console.log('row',row)
+                                //通过规格值循环出规格值列数
+                                specValues.split(',').forEach((c,index)=>{
+                                    row["sku-"+index]=c
+                                })
+                                newList.push(row);
+                            }
+                        }
+                    },
                     nameChange(idx,name){
-                        console.log(this.form.sku,this.sku)
+                        //console.log(this.form.sku,this.sku)
+                        this.setTableList()
                     },
                     delSize(spec,idx){
                         this.$delete(spec.names,idx)
+                        this.setTableList()
                     },
                     addLadder(ladder){
                         ladder.push({min:null,max:null,amount:null})