tj

+<template>
+    <com-pageheader :module-name="'店铺管理'" :page-name="'店铺销售类目管理'" :sub-page-name="'店铺销售类目管理详情'"></com-pageheader>
+
+    <div class="contentpanel">
+        <div class="panel">
+            <div class="chooseShop">
+                <div class="shopSelect">
+                    <com-selection :disabled="true" :selected-data="currentShop"></com-selection>
+                </div>
+                <div class="shopInfo">
+                    <span>店铺ID：<b>{{currentShop.id}}</b></span>
+                    <span>店铺名称：<b>{{currentShop.text}}</b></span>
+                </div>
+                <div class="clearfix"></div>
+            </div>
+
+            <div class="panel-body">
+                <div class="setCategoryName form-inline">
+                    <div class="form-group">
+                        <label>销售类目名称：</label>
+                        <input type="text" class="form-control" v-model="categoryName" />
+                    </div>
+                    <div class="submit form-group">
+                        <a href="javascript:" class="btn btn-success btn-save" @click="">保存</a>
+                        <a href="javascript:" class="btn btn-default">返回</a>
+                    </div>
+                </div>
+
+                <com-tab :rows="tab.rows" :active.sync="tab.active"></com-tab>
+
+                <div class="productList">
+                    <div class="listFilter form-inline">
+                        <input type="text" class="form-control" placeholder="SKN" v-model="params.produckSkn" />
+                        <input type="text" class="form-control" placeholder="商家编码" v-model="params.factoryId" />
+                        <a href="javascript:" class="btn btn-info" @click="open()">查询</a>
+                        <a v-show="tab.active==1" href="javascript:" class="btn btn-warning" @click="" style="float: right">全部取消</a>
+                    </div>
+                    <div v-show="tab.active==0">
+                        <com-grid :columns="allGrid.columns" :url="allGrid.url"></com-grid>
+                    </div>
+                    <div v-show="tab.active==1">
+                        <com-grid :columns="selectedGrid.columns" :url="selectedGrid.url"></com-grid>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import pageheader from '../../../../components/pageheader/index';
+    import selection from '../../../../components/selection/index';
+    import tab from '../../../../components/tab/index';
+    import grid from '../../../../components/grid/index';
+    import common from '../../../../static/js.jquery/common/common';
+
+    export default{
+        components: {
+            comPageheader: pageheader,
+            comSelection: selection,
+            comTab: tab,
+            comGrid: grid
+        },
+        data() {
+            return {
+                currentShop:{id:10,text:"淋淋店"},
+                categoryName:'123',
+                tab:{
+                    rows:[{name:"全部"}, {name:"已选"}],
+                    active:0
+                },
+                params:{
+                    produckSkn:'',
+                    factoryId:''
+                },
+                allGrid:{
+                    url: '',
+                    columns: [
+                        {display: '商品图片', name: 'id'},
+                        {display: 'SKN', name: 'name'},
+                        {display: '商品名称', name: 'time'},
+                        {display: '销售价（元）', name: 'num'},
+                        {display: '分类', name: 'num'},
+                        {display: '操作', render: function (item) {
+                            return "<a href='javascript:' class='btn btn-xs btn-primary'>选择</a>";
+                        }}
+                    ]
+                },
+                selectedGrid:{
+                    url: '',
+                    columns: [
+                        {display: '商品图片', name: 'id'},
+                        {display: 'SKN', name: 'name'},
+                        {display: '商品名称', name: 'time'},
+                        {display: '销售价（元）', name: 'num'},
+                        {display: '分类', name: 'num'},
+                        {display: '操作', render: function (item) {
+                            return "<a href='javascript:' class='btn btn-xs btn-danger'>取消选择</a>";
+                        }}
+                    ]
+                }
+            }
+        },
+        ready(){
+            this.eventBlind();
+        },
+        methods: {
+            open(){
+                common.dialog.confirm(this.currentShop.text,"2",function () {},function(){})
+            },
+            eventBlind(){
+                $(document).on('click','.btn-save', function () {
+                    alert(1);
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+    .shopSelect, .shopInfo {
+        float: left
+    }
+
+    .shopInfo {
+        font-family: 'microsoft yahei';
+        font-size: 18px;
+        line-height: 40px;
+        float: left;
+        margin-left: 40px;
+    }
+
+    .shopInfo span {
+        color: #999;
+        margin-right: 20px
+    }
+
+    .shopInfo b {
+        color: #585858
+    }
+
+    .panel-body {
+        background: #eeeeee;
+        margin-top: 20px
+    }
+
+    .setCategoryName{
+        margin-bottom: 20px;
+    }
+
+    .setCategoryName label{
+        font-size: 14px;
+    }
+
+    .productList{
+        background: #FFFFFF;
+        padding: 20px;
+    }
+
+    .nav-tabs{
+        border: 0;
+    }
+
+    .nav-tabs a{
+        border:0;
+    }
+
+    .listFilter{
+        margin-bottom: 20px;
+    }
+
+    .listFilter .form-control{
+        margin-right: 10px;
+    }
+
+    .submit{
+       float: right;
+    }
+</style>

@@ -4,7 +4,7 @@ Vue.use(require('vue-resource'));
 new Vue({
     el: 'body',
     components: {
-        app:require("./info.vue")
+        app:require("./edit.vue")
     }
 });
 

 <template>
-    <com-pageheader :module-name="'店铺管理'" :page-name="'店铺销售类目管理'"></com-pageheader>
+    <com-pageheader :module-name="'店铺管理'" :page-name="'店铺销售类目管理'" :sub-page-name="'店铺销售类目管理详情'"></com-pageheader>
 
     <div class="contentpanel">
         <div class="panel">
@@ -8,8 +8,8 @@
                     <com-selection :disabled="true" :selected-data="currentShop"></com-selection>
                 </div>
                 <div class="shopInfo">
-                    <span>店铺ID：<b>{{showShopId}}</b></span>
-                    <span>店铺名称：<b>{{showShopName}}</b></span>
+                    <span>店铺ID：<b>{{currentShop.id}}</b></span>
+                    <span>店铺名称：<b>{{currentShop.text}}</b></span>
                 </div>
                 <div class="clearfix"></div>
             </div>
@@ -34,6 +34,34 @@
             return {
                 currentShop:{id:10,text:"淋淋店"}
             }
-        },
+        }
     }
 </script>
+
+<style>
+    .shopSelect, .shopInfo {
+        float: left
+    }
+
+    .shopInfo {
+        font-family: 'microsoft yahei';
+        font-size: 18px;
+        line-height: 40px;
+        float: left;
+        margin-left: 40px;
+    }
+
+    .shopInfo span {
+        color: #999;
+        margin-right: 20px
+    }
+
+    .shopInfo b {
+        color: #585858
+    }
+
+    .panel-body {
+        background: #eeeeee;
+        margin-top: 20px
+    }
+</style>

@@ -13,7 +13,7 @@ module.exports = function (app){
         }
     });
 
-    app.get("/shop/shopCategory/add", "shop.ShopCategory.Info", function (rs,req,res){
+    app.vue("/shop/shopCategory/add", "shop.ShopCategory.Info", function (rs,req,res){
         this.$extend={
             moduleName:"店铺管理",
             pageName:"店铺销售类目管理",

@@ -10,8 +10,8 @@
                 <input type="text" class="form-control" v-model="searchText" style="height: 30px">
             </div>
             <ul class="selection-dropdown-option">
-                <li value="-1" class="{{-1==selectedShopId?'selected':''}}" @click="selectOption({id:-1,text:''})">{{placeholder}}</li>
-                <li v-for="data in seachList" value="{{data.id}}" class="{{data.id==selectedShopId?'selected':''}}" @click="selectOption(data)">
+                <li value="-1" class="{{-1==selectedData.id?'selected':''}}" @click="selectOption({id:-1,text:''})">{{placeholder}}</li>
+                <li v-for="data in seachList" value="{{data.id}}" class="{{data.id==selectedData.id?'selected':''}}" @click="selectOption(data)">
                     {{data.text}}
                 </li>
             </ul>
@@ -22,7 +22,7 @@
 <script>
     export default {
         props: {
-            selectedData:{type: Object, default: {id:-1,text:"请选择"}},//默认选中选项
+            selectedData:{type: Object, default: {id:-1}},//默认选中选项
             url: {type: String, default: ""},
             options: {type: Array, default: []},
             placeholder: {type: String, default: "请选择"},
@@ -38,7 +38,6 @@
         },
         computed:{
             showSelectedData(){
-                console.log(this.selectedData);
                 return this.selectedData.id < 0 ? this.placeholder : this.selectedData.text;
             }
         },
@@ -136,7 +135,7 @@
         white-space: nowrap;
     }
     .selection-disabled{
-        background-color: #CCCCCC;
+        background-color: #DDDDDD;
     }
     .selection-main-arrow{
         height: 36px;

@@ -14,7 +14,7 @@ components=require('./edit2'),
 drag=require('./drag'),
 drag2=require('./drag2'),
 config=require('./config'),
-popImg=require('./popImg');
+popImg=require('./popImg'),
 sizeInfo = require('./sizeInfo');
 
 require('./index');