采美百科相关推荐

src/main/resources/static/css/supplier-center/encyclopedia/recommend-edit.css

@@ -1,6 +1,8 @@
 table{border-collapse:initial}
 table,td,th{border:initial}
 #recommendEdit .navLayout{min-height:auto}
+.el-input.center .el-input__inner{text-align: center}
+
 @media screen and (min-width:768px){
 .recommend-edit .right{background:#fff;padding:32px 40px;-webkit-box-sizing:border-box;box-sizing:border-box}
 .recommend-edit .recommend-title{font-size:16px;font-weight:bold;color:#4A4F58;text-align:center}

src/main/resources/static/js/common/serviceapi/supplier.service.js

@@ -4,6 +4,78 @@
  * auther ZHJY
  */
 var SupplierApi = {
+        ShopBaikeRecommendTypeChange: function(params, callback){ // 百科商品/相关推荐 保存
+            Http.AjaxService({
+                url:'/user/shop/baike/recommend/type/save',
+                type:'post',
+                data:params,
+                json:false,
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
+
+        ShopBaikeRecommendSort: function(params, callback){ // 百科商品/相关推荐 保存
+            Http.AjaxService({
+                url:'/user/shop/baike/recommend/sort/save',
+                type:'post',
+                data:params,
+                json:false,
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
+
+        ShopBaikeRecommendRemove: function(params, callback){ // 百科商品/相关推荐 保存
+            Http.AjaxService({
+                url:'/user/shop/baike/recommend/delete',
+                type:'post',
+                data:params,
+                json:false,
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
+
+        ShopBaikeRecommendAdd: function(params, callback){ // 百科商品/相关推荐 保存
+            Http.AjaxService({
+                url:'/user/shop/baike/recommend/add',
+                type:'post',
+                data:params,
+                json:false,
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
+
+        ShopBaikeRecommendAddList: function(params, callback){ // 百科商品/相关推荐选择列表
+            Http.AjaxService({
+                url:'/user/shop/baike/recommend/add/list',
+                type:'get',
+                data:params,
+                json:false,
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
+
+        ShopBaikeRecommendForm: function(params, callback){ // 百科商品/相关推荐回显
+            Http.AjaxService({
+                url:'/user/shop/baike/recommend/form',
+                type:'get',
+                data:params,
+                json:false,
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
+
         ShopBaikeProductDelete: function(params, callback){ // 百科商品/仪器 删除
             Http.AjaxService({
                 url:'/user/shop/baike/product/delete',

src/main/resources/static/js/supplier-center/encyclopedia/instrument-list.js

@@ -119,8 +119,7 @@ var productList = new Vue({
 
         // 配置推荐信息
         handleEditRecommend(product){
-            localStorage.setItem('productId', product.productId);
-            window.open('/supplier/encyclopedia/recommend-edit.html');
+            window.open('/supplier/encyclopedia/recommend-edit.html?type=2&id=' + product.productId + '&name=' + product.name);
         },
 
         //跳转编辑页面

src/main/resources/static/js/supplier-center/encyclopedia/product-list.js

@@ -117,8 +117,7 @@ var productList = new Vue({
 
         // 配置推荐信息
         handleEditRecommend(product){
-            localStorage.setItem('productId', product.productId);
-            window.open('/supplier/encyclopedia/recommend-edit.html');
+            window.open('/supplier/encyclopedia/recommend-edit.html?type=1&id=' + product.productId + '&name=' + product.name);
         },
 
         //跳转编辑页面

src/main/resources/static/js/supplier-center/encyclopedia/recommend-edit.js

@@ -1,17 +1,190 @@
+function getQueryObject(url) {
+    url = url == null ? window.location.href : url
+    var search = url.substring(url.lastIndexOf('?') + 1)
+    var obj = {}
+    var reg = /([^?&=]+)=([^?&=]*)/g
+    search.replace(reg, (rs, $1, $2) => {
+        var name = decodeURIComponent($1)
+        var val = decodeURIComponent($2)
+        val = String(val)
+        obj[name] = val
+        return rs
+    })
+    return obj
+}
+
 var RecommendEdit = new Vue({
     el: '#recommendEdit',
     data: {
+        query:{},
+        listQuery: {
+            productId: '',
+            typeId: '',
+            name: '',
+            pageNum: '',
+            pageSize: ''
+        },
+        pageInput: '',
+        list: [],
+        listRecord: 0,
+        pageTotal: 0,
         recommendList: [],
-        typeList: [{
-            typeName: '胚胎层',
-            typeId: 1
-        }],
-        recommendType: 0,
+        typeList: [],
+        recommendType: '',
+        selectedList: []
+    },
+    created(){
+        this.query = getQueryObject()
+        this.fetchProductTypeList()
+        this.fetchRecommendForm()
+        // this.fetchRecommendAddList()
+    },
+    computed: {
+        pageName(){
+            return this.query.type === 1 ? '产品' : '仪器'
+        },
+        pageTotal: function pageTotal() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function showPageBtn() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum,
+                arr = [];
+
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
     },
     methods: {
+        // 选择推荐产品
+        onCheckboxChange(row){
+            this.selectedList =  this.list.filter(function(item){ return item.checked })
+            if(this.selectedList.length > 15){
+                row.ischecked = false;
+            }
+        },
+        // 获取列表
+        fetchList(){
+            if(!this.listQuery.typeId && !this.listQuery.name) {
+                CAIMEI.dialog('请选择产品分类', false);
+                return;
+            }
+            this.listQuery.pageNum = 1;
+            this.list = [];
+            this.fetchRecommendAddList();
+        },
+        // 获取相关推荐可选择列表
+        fetchRecommendAddList(){
+            var self = this;
+            this.listQuery.productId = this.query.id;
+            SupplierApi.ShopBaikeRecommendAddList(this.listQuery, function(res){
+                self.listRecord = res.data.total;
+                self.list = self.formatRecommendAddList(res.data.list);
+            })
+        },
+        // 格式化相关推荐可选择列表
+        formatRecommendAddList(list = []){
+            list = list ? list : [];
+            return list.map(function(item){
+                item.checked = false;
+                item.sort = 0;
+                return item;
+            })
+        },
+        // 获取已推荐列表 回显数据
+        fetchRecommendForm(){
+            var self = this;
+            SupplierApi.ShopBaikeRecommendForm({ productId: this.query.id }, function(res){
+                if (self.recommendType === '') {
+                    self.recommendType = res.data.recommendType;
+                }
+                if (self.recommendType === 1) {
+                    self.recommendList = res.data.manualRecommendList;
+                } else {
+                    self.recommendList = res.data.autoRecommendList;
+                }
+            })
+        },
+        // 保存勾选数据
+        saveSelectRecommend() {
+            var self = this;
+            var list = this.selectedList.map(function (item) {
+                return {
+                    recommendProductId: item.productId,
+                    sort: item.sort
+                };
+            });
+            SupplierApi.ShopBaikeRecommendAdd({baikeRecommendList: JSON.stringify(list), productId: this.query.id}, function (res) {
+                CAIMEI.dialog('保存成功', false);
+                self.fetchRecommendForm();
+                self.fetchRecommendAddList();
+            })
+        },
+        // 获取产品分类
+        fetchProductTypeList(){
+            var self = this;
+            SupplierApi.ShopBaikeProductTypeList({ commodityType: this.query.type }, function(res){
+                self.typeList = res.data;
+            })
+        },
+
+        // 类型切换
+        recommendTypeChange(){
+            var self = this;
+            SupplierApi.ShopBaikeRecommendTypeChange({productId: this.query.id, recommendType: this.recommendType}, function (res) {
+                self.fetchRecommendForm();
+            })
+        },
+
+        onRemove(row){
+            var self = this;
+            self.$confirm('确认移除该条推荐?', '提示', {
+                confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
+            }).then(function () {
+                SupplierApi.ShopBaikeRecommendRemove({recommendId: row.recommendId}, function (res) {
+                    CAIMEI.dialog('移除成功', false);
+                    self.fetchRecommendForm();
+                    self.fetchRecommendAddList();
+                })
+            }).catch(function () {
+                CAIMEI.dialog('已取消操作', false);
+            })
+        },
+
+        onSortChange(row){
+            var self = this;
+            SupplierApi.ShopBaikeRecommendSort({recommendId: row.recommendId, sort: row.sort}, function (res) {
+                self.fetchRecommendForm();
+            })
+        },
+
+        onRecommendTypeChange(){
+            this.fetchRecommendForm()
+        },
+
+        // 页码跳转
+        toPagination(){
+
+        },
+        // 页码切换
+        checkNum(){},
+        // 取消
         handleBack() {
         },
+        // 保存
         handleSave() {
+            if(this.recommendType === 1) this.saveSelectRecommend()
+            this.recommendTypeChange()
         }
     }
 })

src/main/resources/templates/encyclopedia/instrument-detail.html

@@ -273,106 +273,31 @@
             <!-- <div class="line"></div> -->
         </div>
         <div class="content">
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
+            <block th:each="recommend,stat : *{recommendList}">
+                <a class="recommend-section" th:href="${ 'product-' +  recommend.productId + '.html'} ">
+                    <div class="cover">
+                        <img th:src="${recommend.image}" th:alt="${recommend.name}"/>
                     </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
+                    <div class="content">
+                        <h3 th:text="${recommend.name}"></h3>
+                        <div class="title" th:text="${recommend.discription}"></div>
+                        <div class="question">
+                            <p th:each="question : ${recommend.questionList}" th:text="${question}"></p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：<span th:text="${recommend.publishTime}"></span></time>
+                            <span>浏览量：<span th:text="${recommend.pv lt 10000 ? recommend.pv : '9999+'}"></span></span>
+                        </footer>
                     </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
+                </a>
+            </block>
         </div>
     </section>
 </article>

src/main/resources/templates/encyclopedia/product-detail.html

@@ -248,112 +248,37 @@
     </section>
 
     <!--  猜你喜欢 -->
-    <section class="section recommend">
+    <section class="section recommend" th:if="*{recommendList != null}">
         <div class="title">
             <h2>猜你喜欢</h2>
             <!-- <div class="line"></div> -->
         </div>
         <div class="content">
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
+            <block th:each="recommend,stat : *{recommendList}">
+                <a class="recommend-section" th:href="${ 'product-' +  recommend.productId + '.html'} ">
+                    <div class="cover">
+                        <img th:src="${recommend.image}" th:alt="${recommend.name}"/>
                     </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
+                    <div class="content">
+                        <h3 th:text="${recommend.name}"></h3>
+                        <div class="title" th:text="${recommend.discription}"></div>
+                        <div class="question">
+                            <p th:each="question : ${recommend.questionList}" th:text="${question}"></p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：<span th:text="${recommend.publishTime}"></span></time>
+                            <span>浏览量：<span th:text="${recommend.pv lt 10000 ? recommend.pv : '9999+'}"></span></span>
+                        </footer>
                     </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
-            <a class="recommend-section">
-                <div class="cover">
-                    <img src="https://picsum.photos/400/400"/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span>2022-06-01   16:52</span></time>
-                        <span>浏览量：<span>999</span></span>
-                    </footer>
-                </div>
-            </a>
+                </a>
+            </block>
         </div>
     </section>
 

src/main/resources/templates/supplier-center/encyclopedia/recommend-edit.html

@@ -24,7 +24,7 @@
         <span>&gt;</span>
         <span>采美百科</span>
         <span>&gt;</span>
-        <span>产品</span>
+        <span>{{pageName}}</span>
         <span>&gt;</span>
         <span>相关推荐</span>
       </div>
@@ -33,46 +33,84 @@
       <!--左侧导航-->
       <template th:replace="supplier-center/components/tableft"></template>
       <div class="right">
-        <div class="recommend-title">产品名称：无纺布脱毛纸</div>
+        <div class="recommend-title">{{pageName}}名称：{{query.name}}</div>
         <div class="recommend-list">
-          <div class="recommend-list-label">推荐列表<span>（当前列表推荐数为1，最多可推荐15条）</span></div>
+          <div class="recommend-list-label">推荐列表<span>（当前列表推荐数为{{recommendList.length}}，最多可推荐15条）</span></div>
           <el-table :data="recommendList" style="width: 100%" :border="true">
-            <el-table-column prop="date" label="ID" align="center"></el-table-column>
-            <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
-            <el-table-column prop="address" label="排序" align="center"></el-table-column>
-            <el-table-column prop="address" label="操作" align="center"></el-table-column>
+            <el-table-column prop="productId" label="ID" align="center" width="80"></el-table-column>
+            <el-table-column prop="recommendProductName" :label="pageName + '名称'" align="center"></el-table-column>
+            <template v-if="recommendType === 1">
+              <el-table-column label="排序" align="center" width="120">
+                <template slot-scope="{ row }">
+                  <el-input v-model.lazy="row.sort" class="center" size="mini" @change="onSortChange(row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="120">
+                <template slot-scope="{ row }">
+                  <el-button type="danger" @click="onRemove(row)" size="mini">删除</el-button>
+                </template>
+              </el-table-column>
+            </template>
           </el-table>
         </div>
         <!-- 推荐配置 -->
         <div class="recommend-control">
           <div class="recommend-control-item">
             <span class="recommend-control-label">设置类型：</span>
-            <el-radio-group v-model="recommendType">
+            <el-radio-group v-model="recommendType" @change="onRecommendTypeChange">
               <el-radio :label="1">手动选择</el-radio>
-              <el-radio :label="0">自动选择<span class="tip">（设置自动选择后，系统将自动推荐相同分类中的前15个）</span></el-radio>
+              <el-radio :label="2">自动选择<span class="tip">（设置自动选择后，系统将自动推荐相同分类中的前15个）</span></el-radio>
             </el-radio-group>
           </div>
         </div>
         <!-- 产品 仪器筛选 -->
-        <div class="recommend-filter">
-          <div class="recommend-filter-item">
-            <span class="recommend-filter-label">产品分类：</span>
-            <el-select  placeholder="请选择产品类别" class="max-width">
-              <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
-            </el-select>
+        <template v-if="recommendType === 1">
+          <div class="recommend-filter">
+            <div class="recommend-filter-item">
+              <span class="recommend-filter-label">{{pageName}}分类：</span>
+              <el-select :placeholder="'请选择' + pageName + '类别'" class="max-width" v-model="listQuery.typeId" clearable>
+                <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName"
+                           :value="item.typeId"></el-option>
+              </el-select>
+            </div>
+            <div class="recommend-filter-item">
+              <span class="recommend-filter-label">{{pageName}}名称：</span>
+              <el-input class="serach-input" clearable></el-input>
+              <button class="button" @click="fetchList">查询</button>
+            </div>
           </div>
-          <div class="recommend-filter-item">
-            <span class="recommend-filter-label">产品名称：</span>
-            <el-input class="serach-input"></el-input>
-            <button class="button">查询</button>
+          <el-table :data="list" style="width: 100%" :border="true">
+            <el-table-column prop="productId" label="ID" align="center" width="80"></el-table-column>
+            <el-table-column prop="name" :label="pageName + '名称'" align="center"></el-table-column>
+            <el-table-column label="排序" align="center" width="100">
+              <template slot-scope="{ row }">
+                <el-input v-model="row.sort" class="center" size="mini"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="100">
+              <template slot-scope="{ row }">
+                <el-checkbox v-model="row.checked" @change="onCheckboxChange(row)" size="mini"></el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div class="pageWrap clear" v-if="pageTotal>1">
+            <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
+               href="javascript:void(0);"></a>
+            <template v-for="n in showPageBtn">
+              <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)"
+                 href="javascript:void(0);" v-text="n"></a>
+              <span v-else>···</span>
+            </template>
+            <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)"
+               href="javascript:void(0);"></a>
+            <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+            <span>跳至</span>
+            <input v-model="pageInput" @blur="checkNum()"/>
+            <span>页</span>&nbsp;
+            <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
           </div>
-        </div>
-        <el-table :data="recommendList" style="width: 100%" :border="true">
-          <el-table-column prop="date" label="ID" align="center"></el-table-column>
-          <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
-          <el-table-column prop="address" label="排序" align="center"></el-table-column>
-          <el-table-column prop="address" label="操作" align="center"></el-table-column>
-        </el-table>
+        </template>
 
         <div class="btns">
           <button class="btn break" @click.prevent="handleBack">返回</button>
@@ -87,6 +125,7 @@
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/recommend-edit.js(v=${version})}"></script>
 </body>
 </html>