采美百科页面绘制

src/main/resources/config/dev/application-dev.yml

@@ -4,13 +4,13 @@ spring:
   #数据源连接--start
   datasource:
     #本地连接数据库
-#    url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
-#    username: developer
-#    password: 05bZ/OxTB:X+yd%1
-    #测试连接数据库
-    url: jdbc:mysql://120.79.25.27:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+    url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
     username: developer
-    password: J5p3tgOVazNl4ydf
+    password: 05bZ/OxTB:X+yd%1
+    #测试连接数据库
+    #url: jdbc:mysql://120.79.25.27:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+    #username: developer
+    #password: J5p3tgOVazNl4ydf
     #type: com.zaxxer.hikari.HikariDataSource
     hikari:
       minimum-idle: 5
@@ -54,10 +54,10 @@ logging:
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
   #spiServer: http://192.168.2.68:8008
-  coreServer: https://core-b.caimei365.com
+  #coreServer: https://core-b.caimei365.com
   #coreServer: http://192.168.2.67:18002
-#  coreServer: http://192.168.2.17:18002
-  #coreServer: http://192.168.2.200:18002
+  #coreServer: http://192.168.2.17:18002
+  coreServer: http://192.168.2.103:18002
   imageDomain: https://img-b.caimei365.com
   wwwDomain: http://localhost:8009
   destPath: classpath:/

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

@@ -0,0 +1,377 @@
+#globalHead.fiexd{position:sticky !important;z-index: 999;}
+.navLayout{min-height:calc(100vh - 185px - 785px) !important}
+.bk-container .right{background:#fff;padding:24px 0}
+.bk-container .top-tip{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;height:60px;text-align:center;font-size:12px;color:#E15616;line-height:18px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0.1)),color-stop(51%,rgba(225,86,22,0.1)),to(rgba(255,255,255,0.1)));background:-o-linear-gradient(left,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%);background:linear-gradient(90deg,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%)}
+.max-width{width:100%}
+.valide-form{width:680px;margin:40px auto 0}
+.valide-form .el-input .el-input__inner{height:36px;line-height:34px;border-radius:2px}
+.valide-form .el-select .el-select__caret{line-height:36px}
+.valide-form .el-form--label-top .el-form-item__label{color:#627386;line-height:32px;padding:0}
+.valide-form .el-form--label-top .el-form-item__label span{color:#FFB496}
+.valide-form .el-form-item{margin-bottom:24px}
+.valide-form .el-form-item.is-required{margin-bottom:32px}
+.valide-form .el-textarea .el-input__count{line-height:initial}
+.valide-form .bk-label{font-size:14px;color:#4A4F58;font-weight:bold;margin:16px 0 8px}
+.valide-form .bk-label span,.valide-form .bk-label i{font-weight:normal;font-style:normal}
+.valide-form .bk-label em {color: #f56c6c; font-style: normal}
+.valide-form .bk-label i{color:#FFB496}
+.valide-form .bk-status{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:24px;-moz-column-gap:24px;column-gap:24px}
+.valide-form .bk-literature-list{margin-bottom:32px}
+.valide-form .bk-literature-list li{margin-top:16px}
+.valide-form .bk-literature-list li:first-child{margin-top:0}
+.valide-form .bk-control{display: flex;justify-content: center; align-items:center;margin-top:32px; column-gap: 16px;}
+.valide-form .bk-control button{width:230px;height:48px;border:1px solid #E15616;text-align:center;border-radius:2px;font-size:18px;cursor:pointer}
+.valide-form .bk-control .bk-back{background:#FFE6DC;color:#E15616}
+.valide-form .bk-control .bk-confirm{background:#E15616;color:#FFFFFF}
+.valide-form .bk-form-item{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.valide-form .bk-form-item .bk-section{
+    position: relative;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    margin-left: 16px;
+}
+
+.valide-form .bk-form-item .bk-section span{
+    color: #E15616;
+    text-decoration: underline;
+    font-size: 12px;
+    white-space: nowrap;
+    cursor: pointer;
+    line-height: initial;
+}
+
+.valide-form .bk-form-item .bk-section .delete{
+    position: absolute;
+    top: 0;
+    right: -8px;
+    transform: translateX(100%);
+}
+
+.valide-form .el-input {
+    position: relative;
+}
+
+.valide-form .el-input .bk-toolbar{
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 14px;
+    padding: 6px 18px;
+    background: #fff;
+    transform: translateY(-100%);
+    border: 1px solid #EEEEEE;
+    box-sizing: border-box;
+    line-height: initial;
+    cursor: pointer;
+    color: #9AA5B5;
+    z-index: 2;
+    user-select: none;
+}
+
+.valide-form .el-input .bk-toolbar::after{
+    content: "[1]";
+}
+
+.valide-form .el-input .bk-bubble{
+    position: absolute;
+    right: 0;
+    top: 0;
+    min-width: 20px;
+    transform: translate(50%, -50%);
+    height: 20px;
+    line-height: 20px;
+    border-radius: 10px;
+    background: #D7DCE4;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    z-index: 2;
+    user-select: none;
+    cursor: pointer;
+}
+
+.valide-form .el-input .bk-mask{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    z-index: 1;
+}
+
+.valide-form .el-input .bk-literature{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100%);
+    z-index: 2;
+    width: 96%;
+    background: #fff;
+    border: 1px solid #EEEEEE;
+}
+
+.valide-form .bk-literature-list li{
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+}
+
+.valide-form .el-input .bk-literature li{
+    display: flex;
+    justify-content: space-between;
+    line-height: 36px;
+    padding: 0 16px;
+    column-gap: 16px;
+}
+
+.valide-form .bk-literature-list li .bk-ref-control,
+.valide-form .el-input .bk-literature li .bk-ref-control{
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+}
+
+.valide-form .bk-literature-list li .edit,
+.valide-form .bk-literature-list li .delete,
+.valide-form .el-input .bk-literature li .edit,
+.valide-form .el-input .bk-literature li .delete{
+    display: block;
+    width: 18px;
+    height: 18px;
+    background: url("/img/encyclopedia/assets/pc-icon-edit.png") no-repeat center;
+    background-size: 18px;
+    cursor: pointer;
+}
+
+.valide-form .bk-literature-list li .delete,
+.valide-form .el-input .bk-literature li .delete{
+    background-image: url("/img/encyclopedia/assets/pc-icon-delete.png");
+}
+
+.valide-form .el-input .bk-input{
+    line-height: initial;
+    height: initial;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+.bk-file-upload{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    column-gap: 16px;
+    user-select: none;
+}
+
+.bk-file-upload .bk-upload{
+    position: relative;
+    width: 92px;
+    height: 92px;
+    border: 1px dashed #E2E7EF;
+    font-size: 14px;
+    color: #9AA5B5;
+    text-align: center;
+    box-sizing: border-box;
+    line-height: initial;
+    cursor: pointer;
+}
+
+.bk-file-upload .bk-upload div:first-child{
+    font-size: 40px;
+    font-weight: lighter;
+}
+
+.bk-file-upload .bk-upload div:last-child{
+    font-size: 14px;
+}
+
+.bk-file-upload .bk-file-wrap{
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 16px;
+}
+
+.bk-file-upload .bk-file-wrap li{
+    position: relative;
+    width: 90px;
+    height: 90px;
+    border: 1px dashed #E2E7EF;
+}
+
+.bk-file-upload .bk-file-wrap span{
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    width: 20px;
+    height: 20px;
+    background: #F94B4B;
+    text-align: center;
+    line-height: 20px;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.bk-file-upload .bk-file-wrap img{
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.bk-file-upload .bk-file-wrap video{
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.bk-dialog .mask{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,.6);
+    z-index: 1000;
+}
+
+.bk-dialog .bk-dialog-container{
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    width: 750px;
+    height: 526px;
+    background: #fff;
+    z-index: 1001;
+    box-sizing: border-box;
+    padding: 32px 0 32px 32px;
+}
+
+.bk-dialog .bk-dialog-container .bk-dialog-close{
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    font-size: 32px;
+    right: 24px;
+    top: 16px;
+    text-align: center;
+    line-height: 24px;
+    color: #9AA5B5;
+    font-weight: lighter;
+    cursor: pointer;
+}
+
+.bk-dialog .bk-dialog-container .bk-dialog-content{
+    height: 350px;
+    overflow-y: auto;
+    padding-right: 32px;
+}
+
+.bk-dialog .bk-tab{
+    display: flex;
+    align-items: center;
+    column-gap: 56px;
+    margin-bottom: 36px;
+}
+
+.bk-dialog .bk-tab .bk-tab-item{
+    font-size: 16px;
+    color: #22272E;
+    border-bottom: 3px solid #fff;
+    padding-bottom: 2px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.bk-dialog .bk-tab .bk-tab-item.active{
+    border-color: #E15616;
+}
+
+.bk-dialog .bk-literature-list li{
+    margin-top: 10px;
+    background: #F5F5F5;
+    color: #999999;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 36px;
+    padding: 0 16px;
+}
+
+.bk-dialog .bk-literature-list li:first-child{
+    margin-top: 0;
+}
+
+.bk-dialog .bk-literature-list li a{
+    color: #22272E;
+}
+
+.bk-dialog .bk-literature-list li a:hover{
+    text-decoration: underline;
+    color: #E15616;
+}
+
+.bk-dialog .bk-literature-list li a:hover i{
+    background-image: url("/img/encyclopedia/assets/pc-icon-link-hover.png");
+}
+
+.bk-dialog .bk-literature-list li i{
+    display: inline-block;
+    vertical-align: middle;
+    width: 18px;
+    height: 18px;
+    background-image: url("/img/encyclopedia/assets/pc-icon-link.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 18px;
+    cursor: pointer;
+}
+
+.bk-dialog .bk-literature-list li>i{
+    background-image: url("/img/encyclopedia/assets/pc-icon-img.png");
+}
+
+.bk-dialog .bk-literature-list li>i:hover{
+    background-image: url("/img/encyclopedia/assets/pc-icon-img-hover.png");
+}
+
+.bk-dialog .bk-dialog-footer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    column-gap: 16px;
+    margin-top: 20px;
+}
+
+.bk-dialog .bk-dialog-footer button{
+    width: 80px;
+    height: 30px;
+    text-align: center;
+    line-height: 28px;
+    font-size: 14px;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.bk-dialog .bk-dialog-footer .bk-cancel{
+    border: 1px solid #B8BFCA;
+    color: #22272E;
+    background: #fff;
+}
+
+.bk-dialog .bk-dialog-footer .bk-confirm{
+    background: #E15616;
+    color: #fff;
+}
+
+.scapegoat.hover {
+    background-color: #ddd;
+}

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

@@ -0,0 +1,105 @@
+var shopBikeApi = {
+    // 供应商百科获取分类下拉列表值
+    FetchTypeList: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/get/type/list',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 查询供应商词条信息
+    FetchEntryList: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/get/authuser/list',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 修改状态  0保存草稿箱  1已发布
+    UpdateEntryStatus: function(params, callback) {
+        Http.AjaxService({
+            url: '/commodity/up/entry/status',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 根据id删除词条
+    RemoveEntryById: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/del/entry',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 查询供应商词条详细信息（供应商界面点击编辑按钮时）
+    FetchEntryDetail: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/get/entry/info/by/id',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 根据id删除参考资料
+    RemoveReferenceById: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/del/Reference',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 根据id查询参考资料（点击参考资料编辑按钮时）
+    FetchReferenceById: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/get/Reference',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 保存资料（添加编辑的资料保存按钮
+    SaveEntrySumbit: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/save/referenceInfo',
+            type: 'post',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    }
+}

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

@@ -0,0 +1,293 @@
+function debounce(func, wait = 100, immediate = false) {
+    let timeout, result
+    return function () {
+        const context = this
+        const args = arguments
+        if (timeout) clearTimeout(timeout)
+        if (immediate) {
+            const callNow = !timeout
+            timeout = setTimeout(function () {
+                timeout = null
+            }, wait)
+            if (callNow) result = func.apply(context, args)
+        } else {
+            timeout = setTimeout(function () {
+                func.apply(context, args)
+            }, wait)
+        }
+        return result
+    }
+}
+
+class SelectionManager {
+    constructor(options) {
+        this.container = document.querySelector(options.el)
+        this.hiddenMark = options.hiddenMark
+        this.mouseDownEvn = null
+        this.selection = null
+        this.range = null
+        this.markCount = 0 // 标记数量
+        this.ctrid = '' // 当前标记id
+        this.ctridList = []
+        this.registEventListener()
+    }
+
+    /** 开始节点 */
+    get startContainer() {
+        return this.isTextNode(this.range.startContainer) ? this.range.startContainer : this.range.endContainer
+    }
+
+    /** 结束节点 */
+    get endContainer() {
+        return this.isTextNode(this.range.endContainer) ? this.range.endContainer : this.range.startContainer
+    }
+
+    /** 选中文本类容 */
+    get selectionText() {
+        return this.selection.toString()
+    }
+
+    /** 开始节点与结束接单公共父节点 */
+    get commonNode() {
+        const {commonAncestorContainer} = this.range
+        return this.isTextNode(commonAncestorContainer) ? commonAncestorContainer.parentNode : commonAncestorContainer
+    }
+
+    /** 开始节点的最外层节点 */
+    get startNode() {
+        return this.getTopNode(this.commonNode, this.startContainer)
+    }
+
+    /** 结束节点的最外层节点 */
+    get endNode() {
+        return this.getTopNode(this.commonNode, this.endContainer)
+    }
+
+    /** 开始节点与结束节点之间的节点列表 */
+    get centerNodes() {
+        if (this.startNode === this.endNode) return []
+        if (this.startNode.nextSibling === this.endNode) return []
+        return this.nextUntil(this.startNode, this.endNode)
+    }
+
+    /** 包裹 */
+    parcel(ctrid) {
+        this.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
+    }
+
+    /** 包裹开始结束节点内容 */
+    parcelNodeContent() {
+        const mark = this.createMark()
+        // 开始节点与结束节点相同
+        if (this.startContainer === this.endContainer) {
+            const prefixText = this.startContainer.nodeValue.substring(0, this.range.startOffset)
+            const centerText = this.startContainer.nodeValue.substring(this.range.startOffset, this.range.endOffset)
+            const suffixText = this.startContainer.nodeValue.substring(this.range.endOffset)
+            const prefix = document.createTextNode(prefixText)
+            const suffix = document.createTextNode(suffixText)
+            const parcel = this.createParcel()
+            parcel.innerText = centerText
+            const fragment = this.createFragment([prefix, parcel, mark, suffix])
+            this.startContainer.parentNode.replaceChild(fragment, this.startContainer)
+        } else {
+            // 开始节点
+            const prefixText = this.startContainer.nodeValue.substring(0, this.range.startOffset)
+            const startText = this.startContainer.nodeValue.substring(this.range.startOffset)
+            const prefix = document.createTextNode(prefixText)
+            const startSpan = this.createParcel()
+            startSpan.innerText = startText
+            const startFragment = this.createFragment([prefix, startSpan])
+            this.startContainer.parentNode.replaceChild(startFragment, this.startContainer)
+            // 结束节点
+            const endText = this.endContainer.nodeValue.substring(0, this.range.endOffset)
+            const suffixText = this.endContainer.nodeValue.substring(this.range.endOffset)
+            const suffix = document.createTextNode(suffixText)
+            const endSpan = this.createParcel()
+            endSpan.innerText = endText
+            const endFragment = this.createFragment([endSpan, mark, suffix])
+            this.endContainer.parentNode.replaceChild(endFragment, this.endContainer)
+        }
+    }
+
+    /** 包裹开始元素 */
+    parcelStartNode(node) {
+        if (node === this.commonNode) return
+        if (node === this.startNode) return
+        this.parcelNode(node.parentNode, this.nextAll(node))
+        this.parcelStartNode(node.parentNode)
+    }
+
+    /** 包裹结束元素 */
+    parcelEndNode(node) {
+        if (node === this.commonNode) return
+        if (node === this.endNode) return
+        this.parcelNode(node.parentNode, this.prevAll(node))
+        this.parcelEndNode(node.parentNode)
+    }
+
+    /** 包裹元素 */
+    parcelNode(container, nodeList = []) {
+        if (nodeList.length === 0) return
+        const parcel = this.createParcel()
+        container.insertBefore(parcel, nodeList[0])
+        nodeList.forEach((node) => {
+            container.removeChild(node)
+            parcel.appendChild(node)
+        })
+    }
+
+    /** 文本选中变动 */
+    selectionChange = debounce((e) => {
+        this.selection = document.getSelection()
+        if (this.selection.type.toLowerCase() !== 'range') return
+        this.range = this.selection.getRangeAt(0)
+    })
+
+    /** 获取节点元素 */
+    getTopNode(parent, node) {
+        if (parent === node.parentNode) return node
+        return this.getTopNode(parent, node.parentNode)
+    }
+
+    /** 开始节点与结束节点之间的节点列表 */
+    nextUntil(startNode, endNode) {
+        if (startNode.nextSibling === endNode) return []
+        return [startNode.nextSibling, ...this.nextUntil(startNode.nextSibling, endNode)]
+    }
+
+    /** 获取紧接着之后兄弟节点 */
+    nextAll(node) {
+        if (!node.nextSibling) return []
+        return [node.nextSibling, ...this.nextAll(node.nextSibling)]
+    }
+
+    /** 获取紧接着之前的兄弟节点 */
+    prevAll(node) {
+        if (!node.previousSibling) return []
+        return [node.previousSibling, ...this.prevAll(node.previousSibling)]
+    }
+
+    /** 是文本节点 */
+    isTextNode(node) {
+        return node.nodeType === 3
+    }
+
+    /** 创建包裹元素 */
+    createParcel() {
+        const parcel = document.createElement('span')
+        parcel.classList.add('scapegoat')
+        parcel.setAttribute('data-ctrid', this.ctrid)
+        return parcel
+    }
+
+    /** 创建标记 */
+    createMark() {
+        const img = document.createElement('img')
+        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.addEventListener('mouseover', (e) => this.markMouseOver(e))
+        img.addEventListener('mouseleave', (e) => this.markMouseLeave(e))
+        img.addEventListener('click', (e) => this.markMouseClick(e))
+        if (this.hiddenMark) {
+            img.style.display = 'none';
+        }
+        return img
+    }
+
+    /** 创建片段 */
+    createFragment(chidlren = []) {
+        const fragment = document.createDocumentFragment()
+        chidlren.forEach((node) => {
+            fragment.appendChild(node)
+        })
+        return fragment
+    }
+
+    /** 鼠标放在标记上 */
+    markMouseOver(e) {
+        const ctrid = e.target.getAttribute('data-ctrid')
+        const nodeList = document.querySelectorAll('.scapegoat')
+        nodeList.forEach((node) => {
+            const id = node.getAttribute('data-ctrid')
+            if (id === ctrid) {
+                node.classList.add('hover')
+            }
+        })
+    }
+
+    /** 鼠标从标记上移开 */
+    markMouseLeave(e) {
+        const ctrid = e.target.getAttribute('data-ctrid')
+        const nodeList = document.querySelectorAll('.scapegoat')
+        nodeList.forEach((node) => {
+            const id = node.getAttribute('data-ctrid')
+            if (id === ctrid) {
+                node.classList.remove('hover')
+            }
+        })
+    }
+
+    /** 标记点击事件 */
+    markMouseClick(e) {
+        const ctrid = e.target.getAttribute('data-ctrid')
+        this.markRemove(ctrid)
+    }
+
+    /** 标记清除 */
+    markRemove(ctrid) {
+        this.ctridList = this.ctridList.filter(item => item !== ctrid);
+        this.markCount--
+        const nodeList = document.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() // 清除空节点
+            }
+        })
+    }
+
+    /* 注册事件监听 */
+    registEventListener() {
+        // 获取文本选中
+        this.container.addEventListener('focus', () => {
+            document.addEventListener('selectionchange', this.selectionChange)
+        })
+        this.container.addEventListener('blur', () => {
+            document.removeEventListener('selectionchange', this.selectionChange)
+        })
+    }
+
+    /** 生成uuid的方法 */
+    uuid(len = 8, radix = 16) {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+        const value = []
+        let i = 0
+        radix = radix || chars.length
+        if (len) {
+            for (i = 0; i < len; i++) value[i] = chars[0 | (Math.random() * radix)]
+        } else {
+            let r
+            value[8] = value[13] = value[18] = value[23] = '-'
+            value[14] = '4'
+            for (i = 0; i < 36; i++) {
+                if (!value[i]) {
+                    r = 0 | (Math.random() * 16)
+                    value[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r]
+                }
+            }
+        }
+        return value.join('')
+    }
+}

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

@@ -0,0 +1,370 @@
+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: `
+        <div>
+            <input type="file" v-show="false" ref="fileInput" @change="handleFileChange" accept=".png,.jpg,.jpeg,.gif,.mp4"/>
+            <div class="bk-file-upload">
+                <template v-if="limit > list.length">
+                    <div class="bk-upload" @click="handleChooseFile"><div>+</div><div>添加图片</div></div>
+                </template>
+                <ul class="bk-file-wrap" v-if="list.length > 0">
+                    <template v-for="(item, index) in list">
+                        <li :key="index">
+                            <span @click="handleRemove(item)">×</span>
+                            <img :src="item.url" v-if="isImage(item)"/>
+                            <video :src="item.url" v-else></video>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+        </div>
+    `,
+    props: {
+        limit: {
+            type: Number,
+            default: 1
+        },
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            fileList: []
+        }
+    },
+    methods: {
+        isImage(file) {
+            return file.type.indexOf('image') > -1
+        },
+        handleChooseFile() {
+            this.$refs.fileInput.click();
+        },
+        handleRemove(file) {
+            this.$emit('remove', file)
+        },
+        generageRowfile(file) {
+            return {
+                uuid: uuidv4(),
+                fileName: file.name,
+                size: file.size,
+                type: file.type,
+                file: file,
+                percentage: 0,
+                status: -1, // 0 上次失败 1 上传成功 2 上传中 -1 待上传
+                response: null,
+                url: '',
+                checkpoint: null
+            }
+        },
+        handleFileChange(e) {
+            const self = this
+            let flag = true
+            this.fileList = Array.from(e.target.files).map(function (file) {
+                if (file.size > 1024 * 1024 * 50) {
+                    CAIMEI.dialog('请上传50MB以内的图片或视频', false);
+                    flag = false
+                }
+                return self.generageRowfile(file)
+            })
+            if (!flag) return
+            this.onUploadFile(this.fileList)
+        },
+        // 文件上传成功
+        onUploadSuccess(file, response, url) {
+            file.response = response
+            file.status = 1
+            file.url = url
+            this.$emit('upload-success', this.fileList)
+        },
+        // 文件上传失败
+        onUploadError(file, error) {
+            file.response = error
+            file.status = 0
+            this.$emit('upload-error', this.fileList)
+        },
+        // 文件上传进度条
+        onProgress(file, response) {
+            const {p, cpt, res} = response
+            file.percentage = p * 100
+            file.checkpoint = cpt
+            file.response = res
+            file.status = 2
+            this.$emit('upload-progress', this.fileList)
+        },
+        // 上传文件
+        onUploadFile(fileList) {
+            upload(fileList, {
+                success: this.onUploadSuccess,
+                faild: this.onUploadError,
+                progress: this.onProgress
+            })
+        }
+    }
+}
+
+const edit = new Vue({
+    el: '#edit',
+    components: {
+        [contentEdit.name]: contentEdit,
+        [ImageUpload.name]: ImageUpload
+    },
+    filters: {
+        reference(data) {
+            if (data.referenceType === 1) return data.articleName
+            if (data.referenceType === 2) return data.author + '.' + data.workName
+            return data.referenceDescription + '.' + data.imageDescription
+        }
+    },
+    data: {
+        isPC: window.innerWidth > 768,
+        referenceType: 1,
+        dateType: 1,
+        referenceDialog: false,
+        referenceEditType: 'add',
+        sm: null,
+        formData: {
+            id: '', // 词条id
+            name: '', // 词条名称
+            alias: '', // 义项名
+            description: '', // 词条概述
+            img: '', // 头图地址
+            typeId: '', // 分类id
+            seoKeyword: '', // seo关键字
+            status: 0, // 状态0保存草稿箱  1已发布
+            imageList: [], // 概述图册集合
+            infoList: [], //  信息栏集合
+            referenceList: [], // 参考资料集合
+            videoList: [], // 视频集合
+        },
+        rules: {
+            name: [{required: true, message: '词条名称不能为空', trigger: ['blur']}],
+            alias: [{required: true, message: '词条名称不能为空', trigger: ['change']}],
+            description: [{required: true, message: '词条名称不能为空', trigger: ['change']}],
+            img: [{required: true, message: '请上传词条头图', trigger: ['change']}],
+        },
+        referenceList: [{
+            id: 1,
+            ctrlId: 'SDAJKLJ4642', // 关联id
+            /* （网络资料） */
+            referenceType: 1, // '参考类型资料（1.网络；2.著作；3.其他）'
+            website: '网址',
+            articleName: '文章名称',
+            websiteName: '网址名称',
+            publishTimeStr: '发表时间',
+            acitationTimeStr: '引文时间',
+            /* 著作资料）*/
+            author: '作者',
+            workName: '著作名',
+            publicationPlace: '出版地',
+            press: '出版社',
+            publicationYearStr: '出版年',
+            acitationWeb: '引文编码',
+            /* （其他资料） */
+            referenceDescription: '参考资料说明',
+            imageDescription: '图片描述',
+            imageUrl: '图片地址',
+            entryId: '词条id',
+            entryType: '词条类型（先不传）'
+        }],
+        referenceData: {
+            id: 1,
+            ctrlId: '', // 关联id
+            /* （网络资料） */
+            referenceType: 1, // '参考类型资料（1.网络；2.著作；3.其他）'
+            website: '网址',
+            articleName: '文章名称',
+            websiteName: '网址名称',
+            publishTimeStr: '发表时间',
+            acitationTimeStr: '引文时间',
+            /* 著作资料）*/
+            author: '作者',
+            workName: '著作名',
+            publicationPlace: '出版地',
+            press: '出版社',
+            publicationYearStr: '出版年',
+            acitationWeb: '引文编码',
+            /* （其他资料） */
+            referenceDescription: '参考资料说明',
+            imageDescription: '图片描述',
+            imageUrl: '图片地址',
+            entryId: '词条id',
+            entryType: '词条类型（先不传）'
+        },
+        referenceRule: {
+            referenceType: [{required: true, message: '请选择参考类型资料', trigger: ['change']}],
+            website: [{required: true, message: '请输入网址', trigger: ['blur']}],
+            articleName: [{required: true, message: '请输入文章名字', trigger: ['blur']}],
+            websiteName: [{required: true, message: '请输入网站名称', trigger: ['blur']}],
+            author: [{required: true, message: '请输入作者名称', trigger: ['blur']}],
+            workName: [{required: true, message: '请输入著作名', trigger: ['blur']}],
+            press: [{required: true, message: '请输入出版社', trigger: ['blur']}],
+            publicationYearStr: [{required: true, message: '请输入出版年', trigger: ['blur']}],
+            referenceDescription: [{required: true, message: '请输入参考资料说明', trigger: ['blur']}],
+        },
+        fileList: [],
+        coverList: []
+    },
+    methods: {
+        // ref dialog 隐藏
+        handleRefDialogClose() {
+            this.referenceDialog = false
+            this.referenceType = 1
+        },
+        // 提交确定ref
+        handleConfirmReference() {
+            if (this.referenceEditType === 'add') {
+                this.referenceData.ctrlId = this.sm.parcel()
+                this.referenceList.push(deepClone(this.referenceData))
+            } else {
+                const index = this.referenceList.findIndex(ref => ref.ctrlId === this.referenceData.ctrlId);
+                this.referenceList.splice(index, 1, deepClone(this.referenceData))
+            }
+            this.referenceDialog = false
+            this.referenceEditType = 'add'
+        },
+        handleSelectReference(item) {
+            this.referenceDialog = false
+            this.sm.parcel(item.ctrlId)
+        },
+        // ref tab 切换
+        handleTabChange(index) {
+            this.referenceType = index;
+        },
+        handleToolbarClick(e) {
+            this.sm = e
+            this.referenceDialog = true
+        },
+        handleReferenceEdit(item) {
+            this.referenceEditType = 'edit'
+            this.referenceData = item
+            this.referenceDialog = true
+        },
+        handleReferenceDelete(item) {
+            console.log(item);
+            this.sm.markRemove(item.ctrlId);
+        },
+        // 文件上传成功
+        handleUploadSuccess(fileList) {
+            this.fileList = [...this.fileList, ...fileList]
+        },
+        // 文件移除
+        handleFileRemove(file) {
+            this.fileList = this.fileList.filter(item => item.uuid !== file.uuid);
+        },
+        // 封面上传成功
+        handleCoverUploadSuccess(fileList) {
+            this.coverList = fileList
+            this.formData.img = fileList[0].url
+        },
+        // 封面删除
+        handleCoverRemove(file) {
+            this.formData.img = ''
+            this.coverList = this.coverList.filter(item => item.uuid !== file.uuid);
+        }
+    }
+
+})

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

@@ -1,6 +1,33 @@
 const list = new Vue({
     el: '#list',
     data: {
-        isPC: window.innerWidth > 768
+        isPC: window.innerWidth > 768,
+        listQuery: {
+            id: '', //词条id
+            name: '', //词条名称
+            typeId: '', //分类id
+            auditStatus: '', //百科审核状态：1待审核，2审核通过，3审核失败
+            onlineStatus: '', //百科上线状态：1待上线，2已上线，3已下线
+            status: '', //状态：0保存草稿箱，1已发布
+            pageNum: 1, //页数
+            pageSize: 10 //条数
+        },
+        list:[]
+    },
+    created() {
+        this.getList()
+    },
+    mounted() {
+    },
+    methods:{
+        filterList(){
+            this.listQuery.pageNum = 1
+            this.list = []
+        },
+        getList(){
+            shopBikeApi.FetchEntryList(this.listQuery, function(res){
+                console.log(res);
+            })
+        }
     }
 })

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

@@ -2,10 +2,277 @@
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <title>采美365网-采美百科-编辑</title>
+    <title>采美365网-采美百科-我的词条</title>
     <meta charset="UTF-8">
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
+    <link th:href="@{/css/supplier-center/encyclopedia/edit.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
+<input type="hidden" th:value="${ossBucket}" id="ossBucket">
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
 
+<div id="edit" class="bk-container" v-cloak>
+    <div class="navLayout">
+        <div class="top-row">
+            <div class="crumbs">
+                <span>我的采美</span>
+                <span>&gt;</span>
+                <span>采美百科</span>
+                <span>&gt;</span>
+                <span>词条编辑</span>
+            </div>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="supplier-center/components/tableft"></template>
+            <div class="right ">
+                <div class="top-tip">温馨提示：多发布采美百科，加大您的品牌曝光率。（发布并且审核通过后，可在采美百科搜索您发布的词条）</div>
+                <div class="valide-form">
+                    <el-form :rules="rules" :model="formData" ref="ruleForm" label-position="top">
+                        <el-form-item label="词条名称：" prop="name">
+                            <el-input v-model="formData.name" placeholder="请输入词条名称"></el-input>
+                            <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
+                        </el-form-item>
+                        <el-form-item label="义项名：" prop="alias">
+                            <content-edit
+                                    :reference-list="referenceList"
+                                    @reference-edit="handleReferenceEdit"
+                                    @reference-delete="handleReferenceDelete"
+                                    @toolbar="handleToolbarClick"
+                            ></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>
+                            <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>
+                        <el-form-item>
+                            <label class="el-form-item__label">概述图册：<span>（注：未上传图片将不会显示在词条页上，最多上传6张）</span></label>
+                            <input type="file" v-show="false"/>
+                            <file-upload @upload-success="handleUploadSuccess" @remove="handleFileRemove" :list="fileList" :limit="6"></file-upload>
+                        </el-form-item>
+                        <!-- 信息栏 -->
+                        <div class="bk-label">信息栏<span>（注：未填写的信息项将不会显示在词条页上）</span></div>
+                        <el-form-item label="中文名：">
+                            <content-edit @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>
+                            <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>
+                            <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>
+                        <!-- 正文 -->
+                        <div class="bk-label">正文<span>（注：未填写的信息项将不会显示在词条页上）</span></div>
+                        <el-form-item>
+                            <div class="bk-form-item">
+                                <el-input v-model="formData.entryName" placeholder="定义（一级目录）"></el-input>
+                                <div class="bk-section">
+                                    <span>一级目录</span>
+                                    <span>二级目录</span>
+                                    <span>内容</span>
+                                    <span class="delete">删除</span>
+                                </div>
+                            </div>
+                            <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
+                        </el-form-item>
+                        <el-form-item>
+                            <div class="bk-form-item">
+                                <el-input v-model="formData.entryName" placeholder="定义（二级目录）"></el-input>
+                                <div class="bk-section">
+                                    <span>一级目录</span>
+                                    <span>二级目录</span>
+                                    <span>内容</span>
+                                    <span class="delete">删除</span>
+                                </div>
+                            </div>
+                            <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
+                        </el-form-item>
+                        <el-form-item>
+                            <div class="bk-form-item">
+                                <content-edit @toolbar="handleToolbarClick"></content-edit>
+                                <div class="bk-section">
+                                    <span>一级目录</span>
+                                    <span>二级目录</span>
+                                    <span>内容</span>
+                                    <span class="delete">删除</span>
+                                </div>
+                            </div>
+                            <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>
+                        <!-- 参考资料 -->
+                        <div class="bk-label">参考资料</div>
+                        <ul class="bk-literature-list">
+                            <li v-for="(item, index) in referenceList">
+                                <div><span>[{{index+1}}]</span><span>{{item | reference}}</span></div>
+                                <div class="bk-ref-control">
+                                    <span class="edit" @click="handleReferenceEdit(item)"></span>
+                                    <span class="delete" @click="handleReferenceDelete(item)"></span>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="bk-label"><em>*</em>头图<i>（建议图片尺寸210px*210px，并上传白底图片）</i></div>
+                        <el-form-item prop="img">
+                            <el-input v-show="false" v-model="formData.img"></el-input>
+                            <file-upload @upload-success="handleCoverUploadSuccess" @remove="handleCoverRemove" :list="coverList"></file-upload>
+                        </el-form-item>
+                        <el-form-item label="分类：">
+                            <el-select class="max-width" v-model="formData.typeId">
+                                <el-option label="分类1" value="1"></el-option>
+                                <el-option label="分类2" value="2"></el-option>
+                                <el-option label="分类3" value="3"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="SEO关键词：">
+                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜"></el-input>
+                            <div class="el-form-item__error" v-show="false">敏感词：减肥、溶脂</div>
+                        </el-form-item>
+                        <el-form-item>
+                            <div class="bk-status">
+                                <label class="el-form-item__label">状态：</label>
+                                <el-radio-group v-model="formData.status">
+                                    <el-radio :label="0">发布</el-radio>
+                                    <el-radio :label="1">保存草稿箱</el-radio>
+                                </el-radio-group>
+                            </div>
+                        </el-form-item>
+                        <el-form-item>
+                            <div class="bk-control">
+                                <button class="bk-back">返回</button>
+                                <button class="bk-confirm">保存</button>
+                            </div>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="bk-dialog" v-if="referenceDialog">
+        <div class="mask"></div>
+        <div class="bk-dialog-container">
+            <div class="bk-dialog-close" @click="handleRefDialogClose">×</div>
+            <div class="bk-tab">
+                <div class="bk-tab-item" :class="{active: referenceType === 1}" @click="handleTabChange(1)">添加参考资料</div>
+                <div class="bk-tab-item" :class="{active: referenceType === 2}" @click="handleTabChange(2)">引用已有资料</div>
+            </div>
+            <div class="bk-dialog-content">
+                <template v-if="referenceType === 1">
+                    <el-form label-width="110px" :model="referenceData" :rules="referenceRule">
+                        <el-form-item label="参考资料类型" prop="referenceType">
+                            <el-select class="max-width" v-model="referenceData.referenceType">
+                                <el-option label="网络资料" :value="1"></el-option>
+                                <el-option label="著作资料" :value="2"></el-option>
+                                <el-option label="其它资料" :value="3"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <template v-if="referenceData.referenceType === 1">
+                            <el-form-item label="输入网址" prop="website">
+                                <el-input placeholder="请以htpp(s)://开头" v-model="referenceData.website"></el-input>
+                            </el-form-item>
+                            <el-form-item label="文章名字" prop="articleName">
+                                <el-input placeholder="请输入文章名字" v-model="referenceData.articleName"></el-input>
+                            </el-form-item>
+                            <el-form-item label="网站名称" prop="websiteName">
+                                <el-input placeholder="请输入网站名称，如新华网" v-model="referenceData.websiteName"></el-input>
+                            </el-form-item>
+                            <el-form-item label="发表日期" prop="publishTimeStr">
+                                <el-input placeholder="发表日期" v-model="referenceData.publishTimeStr"></el-input>
+                            </el-form-item>
+                            <el-form-item label="引文日期" prop="acitationTimeStr">
+                                <el-input placeholder="引文日期" v-model="referenceData.acitationTimeStr"></el-input>
+                            </el-form-item>
+                        </template>
+                        <template v-if="referenceData.referenceType === 2">
+                            <el-form-item label="作者" prop="author">
+                                <el-input placeholder="请输入作者名称，多个作者使用英文半角都好分割" v-model="referenceData.author"></el-input>
+                            </el-form-item>
+                            <el-form-item label="著作名" prop="workName">
+                                <el-input placeholder="请输入著作名" v-model="referenceData.workName"></el-input>
+                            </el-form-item>
+                            <el-form-item label="出版地" prop="publicationPlace">
+                                <el-input placeholder="请输入出版地信息" v-model="referenceData.publicationPlace"></el-input>
+                            </el-form-item>
+                            <el-form-item label="出版社" prop="press">
+                                <el-input placeholder="请输入出版社名称" v-model="referenceData.press"></el-input>
+                            </el-form-item>
+                            <el-form-item label="出版年" prop="publicationYearStr">
+                                <el-input placeholder="请输入出版日期" v-model="referenceData.publicationYearStr"></el-input>
+                            </el-form-item>
+                            <el-form-item label="引文页码" prop="acitationWeb">
+                                <el-input placeholder="请输入引用著作的页码，如100-121" v-model="referenceData.acitationWeb"></el-input>
+                            </el-form-item>
+                        </template>
+                        <template v-if="referenceData.referenceType === 3">
+                            <el-form-item label="参考资料说明" prop="referenceDescription">
+                                <el-input type="textarea" rows="4" placeholder="请输入其他类型参考资料" v-model="referenceData.referenceDescription"></el-input>
+                            </el-form-item>
+                            <el-form-item label="图片描述" prop="imageDescription">
+                                <el-input placeholder="请输入其他类型参考资料的具体描述" v-model="referenceData.imageDescription"></el-input>
+                            </el-form-item>
+                            <el-form-item label="图片上传" prop="imageUrl">
+                                <el-input v-show="false" v-model="referenceData.imageUrl"></el-input>
+                                <input type="file" v-show="false" />
+                                <div class="bk-file-upload">
+                                    <div class="bk-upload">
+                                        <div>+</div>
+                                        <div>添加图片</div>
+                                    </div>
+                                    <ul class="bk-file-wrap">
+                                        <li>
+                                            <span>×</span>
+                                            <img src="https://picsum.photos/600/600"/>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </el-form-item>
+                        </template>
+                    </el-form>
+                </template>
+                <template v-if="referenceType === 2">
+                    <ul class="bk-literature-list">
+                        <template v-for="(item, index) in referenceList">
+                            <li :key="item.ctrlId" @click="handleSelectReference(item)"><span>[{{index+1}}]</span><span>{{item | reference}}</span></li>
+                        </template>
+                    </ul>
+                </template>
+            </div>
+            <div class="bk-dialog-footer">
+                <button class="bk-cancel" @click="handleRefDialogClose">取消</button>
+                <button class="bk-confirm" @click="handleConfirmReference">确定</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<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>
 </body>
 </html>

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

@@ -15,7 +15,7 @@
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
-<div id="list" class="bk-container">
+<div id="list" class="bk-container" v-cloak>
     <div class="navLayout">
         <div class="top-row">
             <div class="crumbs">
@@ -36,15 +36,15 @@
                     <div class="bk-filter-row">
                         <div class="bk-filter-control">
                             <div class="bk-label">ID：</div>
-                            <el-input class="bk-control" placeholder="请输入ID号"></el-input>
+                            <el-input class="bk-control" placeholder="请输入ID号" v-model="listQuery.id"></el-input>
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">词条名称：</div>
-                            <el-input class="bk-control" placeholder="请输入词条名称"></el-input>
+                            <el-input class="bk-control" placeholder="请输入词条名称" v-model="listQuery.name"></el-input>
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">分类：</div>
-                            <el-select class="bk-control">
+                            <el-select class="bk-control" v-model="listQuery.typeId">
                                 <el-option label="全部" value=""></el-option>
                             </el-select>
                         </div>
@@ -52,7 +52,7 @@
                     <div class="bk-filter-row">
                         <div class="bk-filter-control">
                             <div class="bk-label">审核状态：</div>
-                            <el-select>
+                            <el-select v-model="listQuery.auditStatus">
                                 <el-option label="全部" value=""></el-option>
                                 <el-option label="待审核" :value="1"></el-option>
                                 <el-option label="审核通过" :value="2"></el-option>
@@ -61,7 +61,7 @@
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">上线状态：</div>
-                            <el-select>
+                            <el-select v-model="listQuery.onlineStatus">
                                 <el-option label="全部" value=""></el-option>
                                 <el-option label="待上线" :value="1"></el-option>
                                 <el-option label="已上线" :value="2"></el-option>
@@ -70,7 +70,7 @@
                         </div>
                         <div class="bk-filter-control">
                             <div class="bk-label">状态：</div>
-                            <el-select>
+                            <el-select v-model="listQuery.status">
                                 <el-option label="全部" value=""></el-option>
                                 <el-option label="已发布" :value="1"></el-option>
                                 <el-option label="保存草稿箱" :value="0"></el-option>
@@ -159,7 +159,7 @@
 <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" th:src="@{/js/center.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/encyclopedia/list.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/supplier-center/encyclopedia/list.js(v=${version})}"></script>
 </body>
 </html>