采美百科页面接口调试

src/main/resources/static/css/supplier-center/encyclopedia/list.css

@@ -25,11 +25,13 @@
 .bk-list .bk-tr:nth-child(1) .bk-td{border-bottom:1px solid #E2E7EF}
 .bk-list .bk-td{display:table-cell;padding:16px 0}
 .bk-list .bk-td button{height:22px;padding:0 6px;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:20px;color:#E15616;font-size:12px;border:1px solid #E15616;border-radius:2px;background:#FFE6DC;cursor:pointer}
-.bk-list .bk-td:nth-child(5),.bk-list .bk-td:nth-child(6){width:120px}
+.bk-list .bk-td:nth-child(5),.bk-list .bk-td:nth-child(5),.bk-list .bk-td:nth-child(9){width:80px}
+.bk-list .bk-td:nth-child(7),.bk-list .bk-td:nth-child(8){width:100px}
 .bk-list .bk-td:last-child{width:200px}
 .bk-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;padding:32px 0;font-size:14px}
 .bk-pagination .bk-pagesize{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
 .bk-pagination .bk-pagesize span,.bk-pagination .bk-pagesize i{display:block;height:40px;min-width:40px;padding:0 10px;line-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1px solid #EBECEF;text-align:center;cursor:pointer}
+.bk-pagination .bk-pagesize span.active{background: #e15616; color: #fff;border-color: #e15616}
 .bk-pagination .bk-pagesize i{min-width:initial;padding:0;border:0;background:transparent}
 .bk-pagination .bk-total{color:#93979F}
 .bk-pagination .bk-total span{color:#4A4F58}

src/main/resources/static/js/base.js

@@ -952,4 +952,22 @@ function debounce(func, wait = 200, immediate = false) {
         }
         return result;
     };
-}
+}
+
+/* 深度克隆 */
+function deepClone(obj, cache = new WeakMap()) {
+    if (typeof obj !== 'object') return obj // 普通类型，直接返回
+    if (obj === null) return obj
+    if (cache.get(obj)) return cache.get(obj) // 防止循环引用，程序进入死循环
+    if (obj instanceof Date) return new Date(obj)
+    if (obj instanceof RegExp) return new RegExp(obj)
+    // 找到所属原型上的constructor，所属原型上的constructor指向当前对象的构造函数
+    let cloneObj = new obj.constructor()
+    cache.set(obj, cloneObj) // 缓存拷贝的对象，用于处理循环引用的情况
+    for (let key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            cloneObj[key] = deepClone(obj[key], cache) // 递归拷贝
+        }
+    }
+    return cloneObj
+}

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

@@ -1,10 +1,9 @@
 var shopBikeApi = {
     // 供应商百科获取分类下拉列表值
-    FetchTypeList: function (params, callback) {
+    FetchTypeList: function (callback) {
         Http.AjaxService({
             url: '/commodity/get/type/list',
             type: 'get',
-            data: params,
             json: false,
         })
             .then(function (res) {

src/main/resources/static/js/supplier-center/encyclopedia/contentedit.js → src/main/resources/static/js/supplier-center/encyclopedia/components/content-edit/content-edit.js

@@ -19,6 +19,8 @@ function debounce(func, wait = 100, immediate = false) {
     }
 }
 
+let markCount = 0;
+
 class SelectionManager {
     constructor(options) {
         this.container = document.querySelector(options.el)
@@ -26,10 +28,12 @@ class SelectionManager {
         this.mouseDownEvn = null
         this.selection = null
         this.range = null
-        this.markCount = 0 // 标记数量
+        // this.markCount = 0 // 标记数量
         this.ctrid = '' // 当前标记id
         this.ctridList = []
         this.registEventListener()
+        this.observe = new MutationObserver(options.observe || function () {});
+        this.observe.observe(this.container, {childList: true, attributes: true, subtree: true});
     }
 
     /** 开始节点 */
@@ -72,15 +76,19 @@ class SelectionManager {
 
     /** 包裹 */
     parcel(ctrid) {
-        this.markCount++
+        markCount++
         this.ctrid = ctrid ? ctrid : this.uuid()
-        this.ctridList.push(this.ctrid)
-        this.parcelNode(this.commonNode, this.centerNodes)
-        this.parcelStartNode(this.startContainer)
-        this.parcelEndNode(this.endContainer)
-        this.parcelNodeContent()
-        this.selection.removeAllRanges()
-        return this.ctrid
+        try {
+            this.ctridList.push(this.ctrid)
+            this.parcelNode(this.commonNode, this.centerNodes)
+            this.parcelStartNode(this.startContainer)
+            this.parcelEndNode(this.endContainer)
+            this.parcelNodeContent()
+            this.selection.removeAllRanges()
+            return this.ctrid
+        } catch (e) {
+            return this.ctrid
+        }
     }
 
     /** 包裹开始结束节点内容 */
@@ -194,7 +202,7 @@ class SelectionManager {
         img.classList.add('scapegoat')
         img.setAttribute('height', 20)
         img.setAttribute('data-ctrid', this.ctrid)
-        img.setAttribute('src', `https://baikebcs.bdimg.com/cms/wiki-react-editor/ref/${this.markCount}.svg`)
+        img.setAttribute('src', `https://baikebcs.bdimg.com/cms/wiki-react-editor/ref/${markCount}.svg`)
         img.addEventListener('mouseover', (e) => this.markMouseOver(e))
         img.addEventListener('mouseleave', (e) => this.markMouseLeave(e))
         img.addEventListener('click', (e) => this.markMouseClick(e))
@@ -245,16 +253,20 @@ class SelectionManager {
 
     /** 标记清除 */
     markRemove(ctrid) {
+        markCount--
         this.ctridList = this.ctridList.filter(item => item !== ctrid);
-        this.markCount--
-        const nodeList = document.querySelectorAll('.scapegoat')
+        const nodeList = this.container.querySelectorAll('.scapegoat')
         nodeList.forEach((node) => {
             const id = node.getAttribute('data-ctrid')
-            if (id === ctrid) {
-                const parentNode = node.parentNode
-                parentNode.replaceChild(this.createFragment([...node.childNodes]), node)
-                parentNode.normalize() // 清除空节点
+            if (id !== ctrid) return
+            const parentNode = node.parentNode
+            if(node.nodeName === 'IMG'){
+                parentNode.removeChild(node)
+            }else if(node.nodeName === 'SPAN'){
+                const fragment = this.createFragment(node.childNodes)
+                parentNode.replaceChild(fragment, node)
             }
+            parentNode.normalize() // 清除空节点
         })
     }
 

src/main/resources/static/js/supplier-center/encyclopedia/components/content-edit/index.js

@@ -0,0 +1,102 @@
+let editIdIndex = 0
+const contentEdit = {
+    name: 'content-edit',
+    template: `
+    <div class="el-input" :id="editId">
+        <div class="bk-toolbar" @click="handleToolBarClick" v-show="isFocus"></div>
+        <div class="bk-bubble" @click="handleBubbleClick" v-if="bubbleNum>0">{{bubbleNum}}</div>
+        <div class="el-input__inner bk-input" contenteditable="true" @focus="onFocus" @blur="onBlur" @input="onInput"></div>
+        <ul class="bk-literature" v-show="showBubble && bubbleNum>0">
+            <li v-for="item in refList" :key="item.ctrlId">
+                <div>{{item | reference}}</div>
+                <div class="bk-ref-control">
+                    <span class="edit" @click="$emit('reference-edit', item)"></span>
+                    <span class="delete" @click="handleDeleteReference(item)"></span>
+                </div>    
+            </li>
+        </ul>
+        <div class="bk-mask" @click="showBubble=false" v-if="showBubble && bubbleNum>0"></div>
+    </div>
+    `,
+    filters: {
+        reference(data) {
+            if (data.referenceType === 1) return data.articleName
+            if (data.referenceType === 2) return data.author + '.' + data.workName
+            return data.referenceDescription + '.' + data.imageDescription
+        }
+    },
+    props: {
+        referenceList: {
+            type: Array,
+            default: () => []
+        },
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    model: {
+        event: 'change',
+        prop: 'value'
+    },
+    computed: {
+        refList() {
+            if (!this.sm) return []
+            return this.referenceList.filter(item => this.sm.ctridList.includes(item.ctrlId))
+        },
+        bubbleNum() {
+            return this.refList.length
+        }
+    },
+    data() {
+        return {
+            editId: `myEdit` + ++editIdIndex,
+            isFocus: false,
+            showBubble: false,
+            sm: null
+        }
+    },
+    mounted() {
+        this.initEdit();
+    },
+    methods: {
+        // 初始化
+        initEdit() {
+            this.sm = new SelectionManager({
+                el: `#${this.editId} .bk-input`,
+                hiddenMark: true,
+                observe: () => {
+                    console.log(this.sm.container.innerHTML)
+                    this.$emit('change', this.sm.container.innerHTML);
+                }
+            })
+        },
+        // 获取焦点
+        onFocus() {
+            this.isFocus = true
+        },
+        // 失去焦点
+        onBlur() {
+            setTimeout(() => {
+                this.isFocus = false
+            }, 200)
+        },
+        // 工具栏点击
+        handleToolBarClick() {
+            this.$emit('toolbar', this.sm)
+        },
+        // 用户输入事件
+        onInput(e) {
+            this.$emit('change', e.target.innerHTML);
+        },
+        // 气泡点击
+        handleBubbleClick() {
+            if (this.bubbleNum === 0) return
+            this.showBubble = true
+        },
+        // 删除标记点
+        handleDeleteReference(item) {
+            this.sm.markRemove(item.ctrlId);
+        }
+    }
+}

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

@@ -1,105 +1,3 @@
-let editIdIndex = 0
-
-function deepClone(obj, cache = new WeakMap()) {
-    if (typeof obj !== 'object') return obj // 普通类型，直接返回
-    if (obj === null) return obj
-    if (cache.get(obj)) return cache.get(obj) // 防止循环引用，程序进入死循环
-    if (obj instanceof Date) return new Date(obj)
-    if (obj instanceof RegExp) return new RegExp(obj)
-
-    // 找到所属原型上的constructor，所属原型上的constructor指向当前对象的构造函数
-    let cloneObj = new obj.constructor()
-    cache.set(obj, cloneObj) // 缓存拷贝的对象，用于处理循环引用的情况
-    for (let key in obj) {
-        if (obj.hasOwnProperty(key)) {
-            cloneObj[key] = deepClone(obj[key], cache) // 递归拷贝
-        }
-    }
-    return cloneObj
-}
-
-const contentEdit = {
-    name: 'content-edit',
-    template: `
-    <div class="el-input" :id="editId">
-        <div class="bk-toolbar" @click="handleToolBarClick" v-show="isFocus"></div>
-        <div class="bk-bubble" @click="handleBubbleClick" v-if="bubbleNum>0">{{bubbleNum}}</div>
-        <div class="el-input__inner bk-input" contenteditable="true" @focus="onFocus" @blur="onBlur" @input="onInput"></div>
-        <ul class="bk-literature" v-show="showBubble && bubbleNum>0">
-            <li v-for="item in refList" :key="item.ctrlId">
-                <div>{{item | reference}}</div>
-                <div class="bk-ref-control">
-                    <span class="edit" @click="$emit('reference-edit', item)"></span>
-                    <span class="delete" @click="$emit('reference-delete', item)"></span>
-                </div>    
-            </li>
-        </ul>
-        <div class="bk-mask" @click="showBubble=false" v-if="showBubble && bubbleNum>0"></div>
-    </div>
-    `,
-    filters: {
-        reference(data) {
-            if (data.referenceType === 1) return data.articleName
-            if (data.referenceType === 2) return data.author + '.' + data.workName
-            return data.referenceDescription + '.' + data.imageDescription
-        }
-    },
-    props: {
-        referenceList: {
-            type: Array,
-            default: () => []
-        }
-    },
-    computed: {
-        refList() {
-            if (!this.sm) return []
-            return this.referenceList.filter(item => this.sm.ctridList.includes(item.ctrlId))
-        },
-        bubbleNum() {
-            return this.refList.length
-        }
-    },
-    data() {
-        return {
-            editId: `myEdit` + ++editIdIndex,
-            isFocus: false,
-            showBubble: false,
-            sm: null
-        }
-    },
-    mounted() {
-        this.initEdit();
-    },
-    methods: {
-        initEdit() {
-            this.sm = new SelectionManager({
-                el: `#${this.editId} .bk-input`,
-                toolbar: `#${this.editId} .bk-toolbar`,
-                hiddenMark: false
-            })
-            console.log(this.sm);
-        },
-        onFocus() {
-            this.isFocus = true
-        },
-        onBlur() {
-            setTimeout(() => {
-                this.isFocus = false
-            }, 200)
-        },
-        handleToolBarClick() {
-            this.$emit('toolbar', this.sm)
-        },
-        onInput(e) {
-            this.$emit('change', e.target.innerHTML);
-        },
-        handleBubbleClick() {
-            if (this.bubbleNum === 0) return
-            this.showBubble = true
-        }
-    }
-}
-
 const ImageUpload = {
     name: 'file-upload',
     template: `
@@ -344,8 +242,7 @@ const edit = new Vue({
             this.referenceDialog = true
         },
         handleReferenceDelete(item) {
-            console.log(item);
-            this.sm.markRemove(item.ctrlId);
+            this.referenceList = this.referenceList.filter(ref => ref.ctrlId !== item.ctrlId)
         },
         // 文件上传成功
         handleUploadSuccess(fileList) {
@@ -364,7 +261,9 @@ const edit = new Vue({
         handleCoverRemove(file) {
             this.formData.img = ''
             this.coverList = this.coverList.filter(item => item.uuid !== file.uuid);
+        },
+        handleContentEditChange(html) {
+            console.log(html)
         }
     }
-
-})
+})

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

@@ -1,6 +1,13 @@
 const list = new Vue({
     el: '#list',
+    filters: {
+        dateFormat(date) {
+            if (!date) return
+            return dateFormat(new Date(date), 'yyyy-MM-dd')
+        }
+    },
     data: {
+        name: 'supplier-entry-list',
         isPC: window.innerWidth > 768,
         listQuery: {
             id: '', //词条id
@@ -12,22 +19,102 @@ const list = new Vue({
             pageNum: 1, //页数
             pageSize: 10 //条数
         },
-        list:[]
+        totalPage: 0,
+        hasNextPage: false,
+        list: [],
+        typeList: []
+    },
+    computed: {
+        pagiantion(){
+            const total = this.totalPage > 0 ? this.totalPage : 1;
+            const index = this.listQuery.pageNum,arr = [];
+            if (total <= 6) {
+                for (let 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];
+        }
     },
     created() {
         this.getList()
+        this.fetchEntryTypeList()
     },
     mounted() {
+        window.name = this.name;
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
     },
-    methods:{
-        filterList(){
+    methods: {
+        // 页码跳转
+        hanldePageClick(item){
+            if(item === this.listQuery.pageNum) return
+            this.listQuery.pageNum = item
+            this.getList()
+        },
+        filterList() {
             this.listQuery.pageNum = 1
-            this.list = []
+            this.getList()
+        },
+        getList() {
+            const self = this
+            shopBikeApi.FetchEntryList(this.listQuery, function (res) {
+                self.list = res.data.results
+                self.totalPage = res.data.totalPage
+                self.hasNextPage = res.data.hasNextPage
+            })
+        },
+        // 添加词条
+        handleAddEntery() {
+            window.open('/supplier/encyclopedia/edit.html');
+        },
+        // 发布词条
+        handlePublishEntry(item) {
+            const self = this
+            shopBikeApi.UpdateEntryStatus({id: item.id, status: 1}, function (res) {
+                CAIMEI.dialog('词条已保存到草稿箱', false);
+                self.getList()
+            })
+        },
+        // 保存草稿箱
+        handleStorageEntry(item) {
+            const self = this
+            shopBikeApi.UpdateEntryStatus({id: item.id, status: 0}, function (res) {
+                CAIMEI.dialog('词条已发布', false);
+                self.getList()
+            })
+        },
+        // 编辑词条
+        handleEditEntry(item) {
+            window.open('/supplier/encyclopedia/edit.html?id=' + item.id);
+        },
+        // 词条详情
+        handleDetailEntry() {
+        },
+        // 删除词条
+        handleRemoveEntry(item) {
+            const slef = this
+            const params = {
+                content: '确认删除该词条?',
+                cancelBtnText: '取消',
+                confitmBtnText: '删除',
+                closeIcon: true
+            };
+            CAIMEI.Popup(params, function () {
+                shopBikeApi.RemoveEntryById({id: item.id}, function () {
+                    CAIMEI.dialog('词条已删除', false);
+                    slef.getList()
+                })
+            });
         },
-        getList(){
-            shopBikeApi.FetchEntryList(this.listQuery, function(res){
-                console.log(res);
+        // 获取词条分类
+        fetchEntryTypeList() {
+            const self = this
+            shopBikeApi.FetchTypeList(function (res) {
+                self.typeList = res.data
             })
         }
     }
+
 })

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

@@ -42,15 +42,19 @@
                             <content-edit
                                     :reference-list="referenceList"
                                     @reference-edit="handleReferenceEdit"
-                                    @reference-delete="handleReferenceDelete"
                                     @toolbar="handleToolbarClick"
+                                    v-model="formData.alias"
                             ></content-edit>
                             <el-input v-model="formData.alias" placeholder="请输入义项名，简要说明该事物区别于同名事物的显著特征"
                                       v-show="false"></el-input>
                             <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
                         </el-form-item>
                         <el-form-item label="词条概述：" prop="description">
-                            <content-edit @toolbar="handleToolbarClick"></content-edit>
+                            <content-edit
+                                    :reference-list="referenceList"
+                                    @reference-edit="handleReferenceEdit"
+                                    @toolbar="handleToolbarClick"
+                            ></content-edit>
                             <el-input v-model="formData.description" placeholder="请输入词条概述" v-show="false"></el-input>
                             <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
                         </el-form-item>
@@ -62,17 +66,29 @@
                         <!-- 信息栏 -->
                         <div class="bk-label">信息栏<span>（注：未填写的信息项将不会显示在词条页上）</span></div>
                         <el-form-item label="中文名：">
-                            <content-edit @toolbar="handleToolbarClick"></content-edit>
+                            <content-edit
+                                    :reference-list="referenceList"
+                                    @reference-edit="handleReferenceEdit"
+                                    @toolbar="handleToolbarClick"
+                            ></content-edit>
                             <el-input v-model="formData.entryName" placeholder="请输入中文名" v-show="false"></el-input>
                             <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
                         </el-form-item>
                         <el-form-item label="别名：">
-                            <content-edit @toolbar="handleToolbarClick"></content-edit>
+                            <content-edit
+                                    :reference-list="referenceList"
+                                    @reference-edit="handleReferenceEdit"
+                                    @toolbar="handleToolbarClick"
+                            ></content-edit>
                             <el-input v-model="formData.entryName" placeholder="请输入别名" v-show="false"></el-input>
                             <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
                         </el-form-item>
                         <el-form-item label="英文名：">
-                            <content-edit @toolbar="handleToolbarClick"></content-edit>
+                            <content-edit
+                                    :reference-list="referenceList"
+                                    @reference-edit="handleReferenceEdit"
+                                    @toolbar="handleToolbarClick"
+                            ></content-edit>
                             <el-input v-model="formData.entryName" placeholder="请输入英文名" v-show="false"></el-input>
                             <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
                         </el-form-item>
@@ -263,16 +279,15 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/uuidv4.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/shopBaike.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/oss-upload.js(v=${version})}"></script>
-<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/encyclopedia/contentedit.js(v=${version})}"></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/supplier-center/encyclopedia/edit.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components/content-edit/content-edit.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components/content-edit/index.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/edit.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/supplier-center/encyclopedia/list.html

@@ -36,23 +36,26 @@
                     <div class="bk-filter-row">
                         <div class="bk-filter-control">
                             <div class="bk-label">ID：</div>
-                            <el-input class="bk-control" placeholder="请输入ID号" v-model="listQuery.id"></el-input>
+                            <el-input class="bk-control" placeholder="请输入ID号" v-model="listQuery.id" @keyup.enter.native="filterList"></el-input>
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">词条名称：</div>
-                            <el-input class="bk-control" placeholder="请输入词条名称" v-model="listQuery.name"></el-input>
+                            <el-input class="bk-control" placeholder="请输入词条名称" v-model="listQuery.name" @keyup.enter.native="filterList"></el-input>
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">分类：</div>
-                            <el-select class="bk-control" v-model="listQuery.typeId">
+                            <el-select class="bk-control" v-model="listQuery.typeId" @change="filterList">
                                 <el-option label="全部" value=""></el-option>
+                                <template v-for="item in typeList">
+                                    <el-option :label="item.name" :value="item.typeId" :key="item.typeId"></el-option>
+                                </template>
                             </el-select>
                         </div>
                     </div>
                     <div class="bk-filter-row">
                         <div class="bk-filter-control">
                             <div class="bk-label">审核状态：</div>
-                            <el-select v-model="listQuery.auditStatus">
+                            <el-select v-model="listQuery.auditStatus" @change="filterList">
                                 <el-option label="全部" value=""></el-option>
                                 <el-option label="待审核" :value="1"></el-option>
                                 <el-option label="审核通过" :value="2"></el-option>
@@ -61,7 +64,7 @@
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">上线状态：</div>
-                            <el-select v-model="listQuery.onlineStatus">
+                            <el-select v-model="listQuery.onlineStatus" @change="filterList">
                                 <el-option label="全部" value=""></el-option>
                                 <el-option label="待上线" :value="1"></el-option>
                                 <el-option label="已上线" :value="2"></el-option>
@@ -70,21 +73,23 @@
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">状态：</div>
-                            <el-select v-model="listQuery.status">
+                            <el-select v-model="listQuery.status" @change="filterList">
                                 <el-option label="全部" value=""></el-option>
                                 <el-option label="已发布" :value="1"></el-option>
                                 <el-option label="保存草稿箱" :value="0"></el-option>
                             </el-select>
                         </div>
                         <div class="bk-filter-control bk-filter-button">
-                            <button class="bk-search-btn">搜索</button>
-                            <button class="bk-add-btn">添加</button>
+                            <button class="bk-search-btn" @click="filterList">搜索</button>
+                            <button class="bk-add-btn" @click="handleAddEntery">添加</button>
                         </div>
                     </div>
                 </div>
                 <!-- 词条列表 -->
                 <div class="bk-list">
                     <div class="bk-tr">
+                        <div class="bk-td">ID</div>
+                        <div class="bk-td">词条名称</div>
                         <div class="bk-td">分类</div>
                         <div class="bk-td">浏览量</div>
                         <div class="bk-td">审核状态</div>
@@ -94,59 +99,58 @@
                         <div class="bk-td">状态</div>
                         <div class="bk-td">操作</div>
                     </div>
-                    <div class="bk-tr">
-                        <div class="bk-td">新品上线</div>
-                        <div class="bk-td">234</div>
-                        <div class="bk-td bk-warning">待审核</div>
-                        <div class="bk-td bk-warning">待上线</div>
-                        <div class="bk-td">2022-12-20 17:23</div>
-                        <div class="bk-td">2022-12-20 17:23</div>
-                        <div class="bk-td">已发布</div>
-                        <div class="bk-td">
-                            <!-- <button>保存草稿箱</button> -->
-                            <button>发布</button>
-                            <button>编辑</button>
-                            <button>查看</button>
-                            <button>删除</button>
+                    <template v-for="item in list">
+                        <div class="bk-tr" :key="item.id">
+                            <div class="bk-td">{{item.id}}</div>
+                            <div class="bk-td">{{item.name}}</div>
+                            <div class="bk-td">{{item.typeName}}</div>
+                            <div class="bk-td">{{item.pv}}</div>
+                            <template>
+                                <div class="bk-td bk-warning" v-if="item.auditStatus === 1">待审核</div>
+                                <div class="bk-td bk-success" v-if="item.auditStatus === 2">审核通过</div>
+                                <div class="bk-td bk-danger" v-if="item.auditStatus === 3">审核未通过</div>
+                            </template>
+                            <template>
+                                <div class="bk-td bk-warning" v-if="item.onlineStatus === 1">待上线</div>
+                                <div class="bk-td bk-primary" v-if="item.onlineStatus === 2">已上线</div>
+                                <div class="bk-td" v-if="item.onlineStatus === 3">已下线</div>
+                            </template>
+                            <div class="bk-td">{{item.publishTime | dateFormat}}</div>
+                            <div class="bk-td">{{item.addTime | dateFormat}}</div>
+                            <template>
+                                <div class="bk-td" v-if="item.status === 1">已发布</div>
+                                <div class="bk-td bk-primary" v-if="item.status === 0">保存草稿箱</div>
+                            </template>
+                            <div class="bk-td">
+                                <template v-if="item.status === 1">
+                                    <button @click="handleStorageEntry(item)">保存草稿箱</button>
+                                </template>
+                                <template v-if="item.status === 0">
+                                    <button @click="handlePublishEntry(item)">发布</button>
+                                </template>
+                                <button @click="handleEditEntry(item)">编辑</button>
+                                <button @click="handleDetailEntry(item)">查看</button>
+                                <button @click="handleRemoveEntry(item)">删除</button>
+                            </div>
                         </div>
-                    </div>
-                    <div class="bk-tr">
-                        <div class="bk-td">新品上线</div>
-                        <div class="bk-td">234</div>
-                        <div class="bk-td bk-success">审核通过</div>
-                        <div class="bk-td bk-primary">已上线</div>
-                        <div class="bk-td">2022-12-20 17:23</div>
-                        <div class="bk-td">2022-12-20 17:23</div>
-                        <div class="bk-td">已发布</div>
-                        <div class="bk-td">
-                            <button>保存草稿箱</button>
-                            <button>编辑</button>
-                            <button>查看</button>
-                            <button>删除</button>
-                        </div>
-                    </div>
+                    </template>
                 </div>
                 <!-- 页码 -->
                 <div class="bk-pagination">
                     <div class="bk-pagesize">
-                        <span>1</span>
-                        <span>2</span>
-                        <span>3</span>
-                        <span>4</span>
-                        <span>5</span>
-                        <i>…</i>
-                        <span>87</span>
-                        <span>89</span>
-                        <span>90</span>
+                        <template v-for="item in pagiantion">
+                            <span v-if="item" :class="{active: item === listQuery.pageNum}" @click="hanldePageClick(item)">{{item}}</span>
+                            <i v-else>…</i>
+                        </template>
                     </div>
                     <div class="bk-total">
-                        共<span>90</span>页
+                        共<span>{{totalPage}}</span>页
                     </div>
                     <div class="bk-control">
                         <span>跳至</span>
-                        <input type="text"/>
+                        <input type="text" v-model="listQuery.pageNum"/>
                         <span>页</span>
-                        <button class="bk-btn">点击跳转</button>
+                        <button class="bk-btn" @click="getList">点击跳转</button>
                     </div>
                 </div>
             </div>