供应商文章发布->编辑界面组件整改

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

@@ -1,104 +1,45 @@
-@charset "UTF-8";
-input[hidden]{display:none !important}
-textarea{resize: none;}
+.max-width{width:100% !important}
+.hide-upload .el-upload{display:none}
+.cm-label{margin-right:24px}
+.cm-label em{color:#f56c6c;margin-right:4px}
 
 @media screen  and (min-width: 768px){
-.form{width:500px;margin:0 auto;color:#22272E}
-.form .form-item{width:100%;position:relative;padding-bottom:24px;margin-top:16px}
-.form .form-label{display:block;line-height:26px;font-size:14px;color:#627386}
-.form .form-label em{display:none;color:#FF2A2A;font-style:normal;margin-right:2px}
-.form .form-item[required] .form-label em{display:inline}
-.form .form-item .errTips{position:absolute;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:24px;white-space:nowrap;color:red;font-size:12px}
-.form .form-item .errTips::before{content:"×";font-size:12px;display:block;width:14px;height:14px;margin-right:2px;line-height:14px;background:#FF2A2A;color:#fff;border-radius:50%;text-align:center}
-.form .form-control::-webkit-input-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control::-moz-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control:-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control::-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control::placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control{outline:none;display:block;width:100%;padding:8px 16px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px}
-.form .form-select{color:#627386}
-.form .control-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .control-group .form-control{width:auto}
-.form .form-button{padding:0 16px;height:36px;line-height:36px;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:14px;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.form .upload-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100px;height:100px;background:#FFFFFF;border:1px solid #E2E7EF;border-radius:2px;color:#9AA5B5;cursor:pointer}
-.form .upload-control span:first-child{font-size:38px}
-.form .upload-control span:last-child{font-size:14px}
-.form .radio-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .radio-control input[type="radio"]{display:none}
-.form .radio-control label.radio{position:relative;padding-left:26px;cursor:pointer;font-size:14px;color:#22272E}
-.form .radio-control label.radio::before{content:"";position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:18px;height:18px;border:1px solid #B8BFCA;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form .radio-control label.radio::after{content:"";display:block;opacity:0;position:absolute;left:5px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px;height:8px;background:#E15616;border-radius:50%}
-.form .radio-control input[type="radio"]:checked + label.radio{color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::before{border-color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::after{opacity:1}
-.form .btn{width:232px;height:50px;text-align:center;line-height:50px;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
-.form .btn.submit{background:#E15616;color:#FFFFFF}
-.article-edit{}
-.article-edit .navLayout .right{width:auto}
-.article-edit .navLayout .right-box{width:968px}
-.article-edit .row{-webkit-box-sizing:border-box;box-sizing:border-box;padding:24px 0;background:#FFFFFF;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.07);box-shadow:0 3px 6px rgba(0,0,0,0.07)}
 .article-edit .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;line-height:20px;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
-.article-edit .tag-list{width:100%;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.article-edit .row{-webkit-box-sizing:border-box;box-sizing:border-box;padding:24px 0;background:#FFFFFF;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.07);box-shadow:0 3px 6px rgba(0,0,0,0.07)}
+/* 标签 */
+.article-edit .tag-list{width:100%;padding-bottom: 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
 .article-edit .tag-list .tag{position:relative;padding:0 6px;margin:8px 8px 0 0;height:28px;line-height:28px;background:#FFF3E5;border-radius:2px;font-size:14px;font-weight:400;color:#4A4F58;cursor:pointer;border:1px solid #FFF3E5}
 .article-edit .tag-list .tag.active{color:#E15616;background:#FFE6DC;border-color:#E15616}
 .article-edit .tag-list .tag .close{display:none;position:absolute;top:-8px;right:-8px;width:16px;height:16px;background:#F94B4B;border-radius:50%;font-size:10px;line-height:16px;text-align:center;color:#fff;cursor:pointer}
-.article-edit .radio-group .form-label{width:80px}
-.article-edit .control-group{padding-bottom:24px}
-.article-edit .control-group .tagName{width:388px}
-.article-edit .control-group .addTag{width:90px}
-.article-edit .radio-control{margin-right:32px}
-.article-edit .btns{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}
-.article-edit .btns .btn{margin:0 16px}
+/* 添加标签 */
+.article-edit .label-add{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.article-edit .label-add .el-input{ width: auto;flex: 1 }
+.article-edit .label-add .add-tag{padding:0 16px;margin-left:16px;height:40px;line-height:38px;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:14px;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+/* 表单区域 */
+.valide-form{width:500px;margin:0 auto;margin-top:40px}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 16px 0}
+.valide-form .btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.valide-form .btn{width:232px;height:50px;text-align:center;line-height:50px;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
+.valide-form .btn.submit{background:#E15616;color:#FFFFFF}
 }
 
 @media screen  and (max-width: 768px){
-.form{width:100%;margin:0 auto;color:#22272E; padding: 0 3.2vw; box-sizing: border-box}
-.form .form-item:first-child{margin-top:6.4vw }
-.form .form-item{width:100%;position:relative;padding-bottom:5.6vw;}
-.form .form-label{display:block;line-height:4.8vw;font-size:3.4vw;color:#627386; margin-bottom: 1.4vw}
-.form .form-label em{display:none;color:#FF2A2A;font-style:normal;margin-right:2px}
-.form .form-item[required] .form-label em{display:inline}
-.form .form-item .errTips{position:absolute;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:4.8vw;white-space:nowrap;color:red;font-size:2.8vw}
-.form .form-item .errTips::before{content:"×";font-size:2.8vw;display:block;width:2.8vw;height:2.8vw;margin-right:2px;line-height:2.8vw;background:#FF2A2A;color:#fff;border-radius:50%;text-align:center}
-.form .form-control::-webkit-input-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control::-moz-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control:-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control::-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control::placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control{outline:none;display:block;width:100%;padding:3.6vw 2.2vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px}
-.form .form-select{color:#627386}
-.form .control-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .control-group .form-control{width:auto}
-.form .form-button{padding:3.6vw 7vw;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:3.4vw;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.form .upload-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100px;height:100px;background:#FFFFFF;border:1px solid #E2E7EF;border-radius:2px;color:#9AA5B5;cursor:pointer}
-.form .upload-control span:first-child{font-size:38px}
-.form .upload-control span:last-child{font-size:14px}
-.form .radio-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .radio-control input[type="radio"]{display:none}
-.form .radio-control label.radio{position:relative;padding-left:26px;cursor:pointer;font-size:14px;color:#22272E}
-.form .radio-control label.radio::before{content:"";position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:18px;height:18px;border:1px solid #B8BFCA;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form .radio-control label.radio::after{content:"";display:block;opacity:0;position:absolute;left:5px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px;height:8px;background:#E15616;border-radius:50%}
-.form .radio-control input[type="radio"]:checked + label.radio{color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::before{border-color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::after{opacity:1}
-.form .btn{width:100%;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.8vw;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
-.form .btn.submit{background:#E15616;color:#FFFFFF}
-.article-edit{}
-.article-edit .navLayout .right{width:auto}
-.article-edit .navLayout .right-box{width:100%;box-sizing: border-box;}
-.article-edit .row{-webkit-box-sizing:border-box;box-sizing:border-box;padding:24px 0;background:#FFFFFF;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.07);box-shadow:0 3px 6px rgba(0,0,0,0.07)}
+.article-edit .row{padding:2.4vw; background: #fff;}
 .article-edit .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:9.6vw;text-align:center;font-size:2.8vw;line-height:3.2vw;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
+/* 标签 */
 .article-edit .tag-list{width:100%;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
 .article-edit .tag-list .tag{position:relative;padding:0 1vw;margin:2.4vw 2.4vw 0 0;height:7.2vw;line-height:7.2vw;background:#FFF3E5;border-radius:2px;font-size:2.8vw;font-weight:400;color:#4A4F58;cursor:pointer;border:1px solid #FFF3E5}
 .article-edit .tag-list .tag.active{color:#E15616;background:#FFE6DC;border-color:#E15616}
 .article-edit .tag-list .tag .close{display:none;position:absolute;top:-8px;right:-8px;width:16px;height:16px;background:#F94B4B;border-radius:50%;font-size:10px;line-height:16px;text-align:center;color:#fff;cursor:pointer}
-.article-edit .radio-group .form-label{width:80px}
-.article-edit .control-group{padding-bottom:5.6vw}
-.article-edit .control-group .tagName{width:69.4vw}
-.article-edit .control-group .addTag{width:21.4vw}
-.article-edit .radio-control{margin-right:5.6vw}
-/*.article-edit .btns{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}*/
-.article-edit .btns .btn{margin-bottom: 2.4vw }
+/* 添加标签 */
+.article-edit .label-add{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.article-edit .label-add .el-input{width:auto; flex: 1}
+.article-edit .label-add .add-tag{padding:0 16px;margin-left:16px;height:40px;line-height:38px;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:14px;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+/* 表单区域 */
+.valide-form{margin:0 auto;}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 4.6vw 0}
+.valide-form .btn{width:100%;display:block;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin-bottom:2.4vw}
+.valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
+.valide-form .btn.submit{background:#E15616;color:#FFFFFF}
 }

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

@@ -1,259 +1,46 @@
 
-.cm-label {
-    margin-right: 24px;
+.cm-label{margin-right:24px}
+.cm-label em{color:#f56c6c;margin-right:4px}
+.el-form-item__label,.cm-label{color:#666}
+.cm-big-label .cm-label,.cm-big-label-el .el-form-item__label{font-weight:bold;color:#333}
+.max-width{width:100% !important}
+.edit-page .row{-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFFFFF;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.07);box-shadow:0 3px 6px rgba(0,0,0,0.07)}
+.edit-page .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;text-align:center;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
+.cover-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}
+.cover-uploader .el-upload:hover{border-color:#409eff}
+.cover-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}
+.cover{position:relative;width:178px;height:178px;display:block}
+.cover-uploader .el-upload::after{content:'更换图片';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;width:100%;height:100%;position:absolute;top:0;left:0;z-index:999;background:rgba(0,0,0,0.4);color:#eee;opacity:0;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+.cover-uploader .el-upload:hover::after{opacity:1}
+.hide-upload .el-upload{display:none}
+.form-params-group,.form-question-group{position:relative}
+.form-params-group .add-one,.form-question-group .add-one{position:absolute;right:0;top:-40px;width:50px;height:30px;font-size:12px;line-height:30px;color:#e15616;cursor:pointer;text-decoration:underline}
+.form-params-group .form-params-group-row{position:relative;margin-bottom:12px}
+.form-params-group .form-params-group-row:last-of-type{margin-bottom:0}
+.form-params-group .form-params-group-row .remove,.form-question-group .form-question-group-row .remove{position:absolute;top:0;right:4px;width:20px;height:20px;background:#f94b4b;opacity:1;border-radius:0px 2px 0px 2px;text-align:center;line-height:20px;color:#fff;cursor:pointer;border-radius:4px}
+.form-question-group .form-question-group-row{position:relative;margin-bottom:24px}
+.form-question-group .form-question-group-row:last-of-type{margin-bottom:0}
+.form-question-group .add-one{top:-50px}
+.form-question-group .form-question-group-row .remove{right:0;top:40px}
+.el-upload-list--picture-card .el-upload-list__item,.el-upload--picture-card{width:110px;height:110px}
+.el-upload--picture-card{line-height:120px}
+
+@media screen and (min-width:768px){
+.edit-page .row{-webkit-box-sizing:border-box;box-sizing:border-box;padding:24px 0;background:#FFFFFF;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.07);box-shadow:0 3px 6px rgba(0,0,0,0.07)}
+.edit-page .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;line-height:20px;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
+.valide-form{width:500px;margin:0 auto;margin-top:40px}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 16px 0}
+.valide-form .btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.valide-form .btn{width:232px;height:50px;text-align:center;line-height:50px;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
+.valide-form .btn.submit{background:#E15616;color:#FFFFFF}
+}
+
+@media screen and (max-width:768px){
+.edit-page .row{padding:2.4vw}
+.valide-form{margin:0 auto;margin-top:40px}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 4.6vw 0}
+.valide-form .btn{width:100%;display:block;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin-bottom:2.4vw}
+.valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
+.valide-form .btn.submit{background:#E15616;color:#FFFFFF}
 }
-
-.cm-label em {
-    color: #f56c6c;
-    margin-right: 4px;
-}
-
-.el-form-item__label, .cm-label {
-    color: #666;
-}
-
-.cm-big-label .cm-label,
-.cm-big-label-el .el-form-item__label {
-    font-weight: bold;
-    color: #333;
-}
-
-.max-width {
-    width: 100% !important;
-}
-
-.edit-page .row {
-    box-sizing: border-box;
-    background: #FFFFFF;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
-}
-
-.edit-page .top-tip {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    color: #E15616;
-    background: linear-gradient(90deg, #FFFFFF 0%, rgba(225, 86, 22, 0.1) 50%, #FFFFFF 100%)
-}
-
-
-
-.cover-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-
-.cover-uploader .el-upload:hover {
-    border-color: #409eff;
-}
-
-.cover-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-}
-
-.cover {
-    position: relative;
-    width: 178px;
-    height: 178px;
-    display: block;
-}
-
-.cover-uploader .el-upload::after {
-    content: '更换图片';
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    background: rgba(0, 0, 0, 0.4);
-    color: #eee;
-    opacity: 0;
-    transition: all 0.2s;
-}
-
-.cover-uploader .el-upload:hover::after {
-    opacity: 1;
-}
-
-.hide-upload .el-upload {
-    display: none;
-}
-
-.form-params-group,
-.form-question-group {
-    position: relative;
-}
-
-.form-params-group .add-one,
-.form-question-group .add-one {
-    position: absolute;
-    right: 0;
-    top: -40px;
-    width: 50px;
-    height: 30px;
-    font-size: 12px;
-    line-height: 30px;
-    color: #e15616;
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-.form-params-group .form-params-group-row {
-    position: relative;
-    margin-bottom: 12px;
-}
-
-.form-params-group .form-params-group-row:last-of-type {
-    margin-bottom: 0;
-}
-
-.form-params-group .form-params-group-row .remove,
-.form-question-group .form-question-group-row .remove {
-    position: absolute;
-    top: 0;
-    right: 4px;
-    width: 20px;
-    height: 20px;
-    background: #f94b4b;
-    opacity: 1;
-    border-radius: 0px 2px 0px 2px;
-    text-align: center;
-    line-height: 20px;
-    color: #fff;
-    cursor: pointer;
-    border-radius: 4px;
-}
-
-.form-question-group .form-question-group-row {
-    position: relative;
-    margin-bottom: 24px;
-}
-
-.form-question-group .form-question-group-row:last-of-type {
-    margin-bottom: 0;
-}
-
-.form-question-group .add-one {
-    top: -50px;
-}
-
-.form-question-group .form-question-group-row .remove {
-    right: 0;
-    top: 40px;
-}
-
-.el-upload-list--picture-card .el-upload-list__item, .el-upload--picture-card {
-    width: 110px;
-    height: 110px;
-}
-
-.el-upload--picture-card {
-    line-height: 120px;
-}
-
-/* pc端 */
-@media screen and (min-width: 768px) {
-    .edit-page .row {
-        box-sizing: border-box;
-        padding: 24px 0;
-        background: #FFFFFF;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
-    }
-
-    .edit-page .top-tip {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 60px;
-        text-align: center;
-        font-size: 12px;
-        line-height: 20px;
-        color: #E15616;
-        background: linear-gradient(90deg, #FFFFFF 0%, rgba(225, 86, 22, 0.1) 50%, #FFFFFF 100%)
-    }
-
-    .valide-form {
-        width: 500px;
-        margin: 0 auto;
-        margin-top: 40px;
-    }
-
-    .valide-form .btns {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .valide-form .btn {
-        width: 232px;
-        height: 50px;
-        text-align: center;
-        line-height: 50px;
-        font-size: 18px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        cursor: pointer
-    }
-
-    .valide-form .btn.break {
-        background: #FFE6DC;
-        border: 1px solid #E15616;
-        border-radius: 2px;
-        color: #E15616
-    }
-
-    .valide-form .btn.submit {
-        background: #E15616;
-        color: #FFFFFF
-    }
-}
-
-/* 移动端 */
-@media screen and (max-width: 768px) {
-    .edit-page .row{
-        padding:2.4vw;
-    }
-
-    .valide-form {
-        margin: 0 auto;
-        margin-top: 40px;
-    }
-
-    .valide-form .btn {
-        width: 100%;
-        display: block;
-        height: 11.2vw;
-        text-align: center;
-        line-height: 11.2vw;
-        font-size: 3.6vw;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        cursor: pointer;
-        margin-bottom: 2.4vw;
-    }
-
-    .valide-form .btn.break {
-        background: #FFE6DC;
-        border: 1px solid #E15616;
-        border-radius: 2px;
-        color: #E15616
-    }
-
-    .valide-form .btn.submit {
-        background: #E15616;
-        color: #FFFFFF
-    }
-}
-

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

@@ -1,41 +1,89 @@
 "use strict";
+const Editor = window.createEditorComponent();
 
 var articleEdit = new Vue({
     el: '#articleEdit',
-    mixins: [formMixin, uploadMixin],
+    components: {
+        Editor
+    },
     data: {
-        NODE_ENV_BASE_URL: '',
-        editor: null,
-        shopId: GLOBAL_SHOP_ID,
         // 供应商id
+        shopId: GLOBAL_SHOP_ID,
+        // 图片上传
+        action: $('#coreServer').val() + '/tools/image/upload/multi',
+        /* 表单提交数据 */
         formData: {
-            articleId: 0,
             // 文章id
-            title: '',
+            articleId: 0,
             // 标题
-            articleContent: '',
+            title: '',
             // 内容
-            guidanceImage: '',
+            articleContent: '',
             // 引导图
-            keyword: '',
+            guidanceImage: '',
             // seo关键词
-            label: '',
+            keyword: '',
             // 标签
-            publisher: '',
+            label: '',
             // 发布人
-            recommendContent: '',
+            publisher: '',
             // 推荐语
-            source: '',
+            recommendContent: '',
             // 来源
-            status: 1,
+            source: '',
             // 状态
-            typeId: '' // 文章分类
-
+            status: 1,
+            // 文章分类
+            typeId: ''
         },
+        // 图片列表
+        articleImageList: [],
+        // 文章标签列表
         articleLabels: [],
+        // 已选择标签列表
         chooseLabels: [],
+        // 文章分类列表
         articleTypeList: [],
-        addLabelName: ''
+        // 待添加标签名
+        addLabelName: '',
+        /* 表单验证规则 */
+        rules: {
+            // 标题
+            title: [
+                {required: true, message: '文章标题不能为空', trigger: 'blur'},
+                {maxLength: 9999, message: '标题字数超过最大限制(9999)', trigger: 'blur'},
+            ],
+            // 内容
+            articleContent: [
+                {required: true, message: '文章内容不能为空', trigger: 'change'},
+                {maxLength: 999999, message: '标题字数超过最大限制(999999)', trigger: 'change'},
+            ],
+            // 引导图
+            guidanceImage: [
+                {required: true, message: '请上传文章引导图', trigger: 'change'}
+            ],
+            // seo关键词
+            keyword: [
+                {required: true, message: 'SEO关键词不能为空', trigger: 'blur'}
+            ],
+            // 标签
+            label: [
+                {required: true, message: '文章标签不能为空', trigger: ['change', 'blur']}
+            ],
+            // 发布人
+            publisher: [
+                {required: true, message: '发布人信息不能为空', trigger: 'blur'}
+            ],
+            // 推荐语
+            recommendContent: [
+                {required: true, message: '推荐语/描述不能为空', trigger: 'blur'}
+            ],
+            // 文章分类
+            typeId: [
+                {required: true, message: '请选择文章所属分类', trigger: 'change'}
+            ]
+        },
+
     },
     watch: {
         chooseLabels: function chooseLabels(newVal) {
@@ -53,15 +101,10 @@ var articleEdit = new Vue({
         this.init();
     },
     mounted: function mounted() {
-        this.NODE_ENV_BASE_URL = $('#coreServer').val(); // console.log(this.NODE_ENV_BASE_URL);
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
-        this.initEditor();
     },
     beforeDestroy: function beforeDestroy() {
-        // 销毁编辑器
-        this.editor.destroy();
-        this.editor = null;
         localStorage.removeItem('articleId');
     },
     methods: {
@@ -79,9 +122,8 @@ var articleEdit = new Vue({
                 articleId: this.formData.articleId
             }, function (res) {
                 if (res.code === 0) {
-                    // console.log(res);
+                    console.log(res);
                     that.articleLabels = res.data.articleLabels.split(','); // 初始化表单数据
-
                     if (res.data.shopArticle) {
                         that.setFormData(res.data.shopArticle);
                     }
@@ -93,14 +135,12 @@ var articleEdit = new Vue({
         // 设置表单初始数据
         setFormData: function setFormData(shopArticle) {
             for (var key in this.formData) {
-                if (key === 'status' || key === 'typeId') {
-                    this.formData[key] = shopArticle[key].toString();
-                } else {
-                    this.formData[key] = shopArticle[key];
-                }
+                this.formData[key] = shopArticle[key];
+            }
+            // 初始化引导图
+            if (this.formData.guidanceImage) {
+                this.articleImageList = [{url: this.formData.guidanceImage}]
             }
-
-            this.editor.txt.html(this.formData.articleContent);
         },
         // 获取文章分类
         fetchArticleCatagory: function fetchArticleCatagory() {
@@ -136,31 +176,22 @@ var articleEdit = new Vue({
         checkLabel: function checkLabel(index) {
             return this.chooseLabels.indexOf(this.articleLabels[index]) > -1;
         },
-        // 引导图上传（文章封面图）
-        fileInputChange: function fileInputChange(e) {
-            var _this = this;
-
-            this.uploadImage(e.target.files[0]).then(function (res) {
-                _this.formData.guidanceImage = res;
-            });
+        // 图片上传成功
+        handleUploadSuccess: function handleUploadSuccess(response, file, fileList) {
+            this.formData.guidanceImage = response.data;
+            this.articleImageList = fileList;
         },
-        // 初始化富文本
-        initEditor: function initEditor() {
-            var E = window.wangEditor;
-            this.editor = new E("#editor");
-            this.initEditorOptions(this.editor, this.NODE_ENV_BASE_URL);
-            this.editor.create();
+        // 图片移除
+        handleImageRemove: function handleImageRemove(response, file, fileList) {
+            this.formData.guidanceImage = "";
+            this.articleImageList = [];
         },
         // 保存 提交表单
         handleSave: function handleSave() {
             var _this = this;
-            this.formData.articleContent = this.editor.txt.html();
-            this.handleFormData(); // console.log(this.formData);
-            this.validAll(this.formData).then(function (valid) {
-                console.log(valid);
+            this.$refs.ruleForm.validate(valide=>{
+                if(!valide) return;
                 _this.save();
-            }).catch(function (err) {
-                console.log(err);
             });
         },
         // 保存接口
@@ -178,23 +209,6 @@ var articleEdit = new Vue({
                 }
             });
         },
-        // 处理表单数据
-        handleFormData: function handleFormData() {
-            var that = this;
-            $('.form').submit(function (eventData) {
-                var formData = that.serializeArrayToObj($(this).serializeArray());
-
-                for (var key in formData) {
-                    if (key === 'typeId' || key === 'status') {
-                        that.formData[key] = Number(formData[key]);
-                    } else {
-                        that.formData[key] = formData[key];
-                    }
-                }
-
-                return false;
-            });
-        },
         // 表单数据转为对象
         serializeArrayToObj: function serializeArrayToObj(serializeArray) {
             var obj = Object.create(null);

src/main/resources/static/js/supplier-center/article/editor-component.js

@@ -0,0 +1,99 @@
+//富文本框封装
+function createEditorComponent() {
+	window.editorCount = 0;
+	const Editor = {
+		render: function render(h) {
+			return h('div', { class: { cm: true, editor: true }, attrs: { id: this.editorId } })
+		},
+		model: {
+			prop: 'value',
+			event: 'input',
+		},
+		props: {
+			value: {
+				type: String,
+				default: '',
+			},
+			placeholder: {
+				type: String,
+				default: '',
+			},
+			defaultTxt: {
+				type: String,
+				default: '',
+			},
+		},
+		data() {
+			return {
+				editorId: '',
+				editor: null,
+			}
+		},
+		watch: {
+			value(nVal, oldVal) {
+				if (nVal === oldVal) return
+				this.editor && this.editor.txt.html(nVal)
+			},
+		},
+
+		created: function created() {
+			window.editorCount++
+			this.editorId = 'editorId-' + window.editorCount
+			this.$nextTick(function () {
+				this.createEditor()
+			})
+		},
+		beforeDestroy: function beforeDestroy() {
+			this.editor.destroy()
+			this.editor = null
+		},
+		methods: {
+			// 创建编辑器
+			createEditor: function createEditor() {
+				const E = window.wangEditor
+				this.editor = new E('#' + this.editorId)
+				this.initEditorOptions()
+				this.editor.create()
+				this.editor.txt.html(this.value)
+			},
+			// 富文本框配置
+			initEditorOptions: function initEditorOptions() {
+				this.editor.config.zIndex = 333
+				this.editor.config.height = 200
+				this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024
+				this.editor.config.uploadImgMaxLength = 9 // 一次最多上传 5 个图片
+				this.editor.config.placeholder = this.placeholder
+				var that = this
+				// 监听输入事件
+				this.editor.config.onchange = function (newHtml) {
+					that.$emit('input', newHtml)
+				}
+
+				this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+					that.$emit('choose-image', resultFiles)
+					resultFiles.forEach(function (file) {
+						// resultFiles 是 input 中选中的文件列表
+						// insertImgFn 是获取图片 url 后，插入到编辑器的方法
+						that.uploadImage(file).then(function (res) {
+							insertImgFn(res)
+						})
+					})
+				}
+			},
+			// 上传图片
+			uploadImage: function uploadImage(file) {
+				var formData = new FormData()
+				formData.append('file', file)
+				return new Promise(function (resolve, reject) {
+					PublicApi.uploadimg(formData, function (res) {
+						if (res.code === 0) {
+							resolve(res.data)
+						}
+						reject()
+					})
+				})
+			},
+		},
+	};
+	return Editor
+}

src/main/resources/static/js/supplier-center/article/formMixin.js

@@ -1,158 +0,0 @@
-"use strict";
-
-var formMixin = {
-    data: {
-        validData: {},
-        rules: {
-            title: [{
-                required: true,
-                type: 'string',
-                message: '请输入文章标题',
-                trigger: 'blur'
-            }],
-            label: [{
-                required: true,
-                message: '请输入文章标签',
-                trigger: ['blur', 'change']
-            }],
-            keyword: [{
-                required: true,
-                message: '请输入文章seo关键词',
-                trigger: 'blur'
-            }],
-            publisher: [{
-                required: true,
-                message: '请输入发布人',
-                trigger: 'blur'
-            }],
-            recommendContent: [{
-                required: true,
-                message: '请输入文章推荐语',
-                trigger: 'blur'
-            }],
-            articleContent: [{
-                required: true,
-                message: '请输入文章内容',
-                trigger: 'change'
-            }],
-            typeId: [{
-                required: true,
-                message: '请选择文章分类',
-                trigger: 'change'
-            }],
-            guidanceImage: [{
-                required: true,
-                message: '请上传文章引导图',
-                trigger: 'change'
-            }],
-            status: [{
-                required: true,
-                message: '请选择文章状态',
-                trigger: 'change'
-            }]
-        }
-    },
-    mounted: function mounted() {
-        //初始化表单验证
-        this.initValidForm(this.formData);
-    },
-    created: function created() {
-        //初始化验证关系对象
-        this.initValidData();
-    },
-    methods: {
-        //初始化验证关系对象
-        initValidData: function initValidData() {
-            for (var key in this.rules) {
-                this.$set(this.validData, key, {
-                    valid: true,
-                    message: ''
-                });
-            }
-        },
-        //初始化表单验证
-        initValidForm: function initValidForm(formData) {
-            var _this = this;
-
-            var that = this;
-
-            var _loop = function _loop(key) {
-                var rules = _this.rules[key];
-                var input = document.querySelector(".form-item[prop=\"".concat(key, "\"] input"));
-                var textarea = document.querySelector(".form-item[prop=\"".concat(key, "\"] textarea"));
-                var trigger = rules[0].trigger.toString();
-
-                if (trigger.indexOf('blur') > -1) {
-                    if (input) {
-                        input.addEventListener('blur', function () {
-                            that.validInputHandle(formData, key, rules);
-                        });
-                    }
-
-                    if (textarea) {
-                        textarea.addEventListener('blur', function () {
-                            that.validInputHandle(formData, key, rules);
-                        });
-                    }
-                }
-
-                if (trigger.indexOf('change') > -1) {
-                    var str = 'formData.' + key;
-                    that.$watch(str, function (newVal, oldVal) {
-                        that.validInputHandle(formData, key, rules);
-                    });
-                }
-            };
-
-            for (var key in this.rules) {
-                _loop(key);
-            }
-        },
-        //数据校验
-        validInputHandle: function validInputHandle(formData, key, rules) {
-            var validData = {
-                valid: true,
-                message: ''
-            };
-            rules.forEach(function (rule, index) {
-                if (!validData.valid) return; // 字符长度
-
-                var len = formData[key].toString().trim().length; // 是否必填
-
-                if (rule.required && !formData[key]) {
-                    validData.valid = false;
-                    validData.message = rule.message || '';
-                } // 最大值最小值
-
-
-                if (rule.maxLength && len < rule.minLength || rule.maxLength && len > rule.maxLength) {
-                    validData.valid = false;
-                    validData.message = rule.message || '';
-                } // 自定义校验规则
-
-
-                if (rule.pattern && !rule.pattern.test(formData[key])) {
-                    validData.valid = false;
-                    validData.message = rule.message || '';
-                }
-            });
-            this.validData[key] = validData;
-        },
-        // 验证全部数据
-        validAll: function validAll(formData) {
-            for (var key in this.rules) {
-                var rules = this.rules[key];
-                this.validInputHandle(formData, key, rules);
-            }
-
-            for (var _key in this.validData) {
-                // console.log(key, this.validData[key].valid);
-                if (!this.validData[_key].valid) {
-                    return Promise.reject(false);
-                }
-            }
-
-            return Promise.resolve(true);
-        }
-    }
-};

src/main/resources/static/js/supplier-center/article/uploadMixin.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var uploadMixin = {
-    methods: {
-        // 富文本框配置
-        initEditorOptions: function initEditorOptions(editor, baseUrl) {
-            var that = this;
-            this.editor.config.zIndex = 333;
-            this.editor.config.height = 400;
-            this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024;
-            this.editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
-
-            this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
-                resultFiles.forEach(function (file) {
-                    // resultFiles 是 input 中选中的文件列表
-                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-                    that.uploadImage(file).then(function (res) {
-                        insertImgFn(res);
-                    });
-                });
-            };
-        },
-        // 上传图片
-        uploadImage: function uploadImage(file) {
-            var formData = new FormData();
-            formData.append('file', file);
-            return new Promise(function (resolve, reject) {
-                PublicApi.uploadimg(formData, function (res) {
-                    if (res.code === 0) {
-                        resolve(res.data);
-                    }
-                    reject();
-                });
-            });
-        }
-    }
-};

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

@@ -4,10 +4,12 @@
 <head>
     <title>采美365网-采美文章-编辑文章</title>
     <template th:replace="components/head-link"></template>
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
+    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/supplier-center/article/article-edit.css(v=${version})}" charset="UTF-8" rel="stylesheet"
-          type="text/css">
+    <link th:href="@{/css/supplier-center/article/article-edit.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -31,128 +33,93 @@
             <div class="right-box right">
                 <div class="row">
                     <div class="top-tip">温馨提示：发布采美文章有利于曝光您的店铺商品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
-                    <form class="form">
-                        <!-- 标题 -->
-                        <div class="form-item" required prop="title">
-                            <label for="title" class="form-label"><em>*</em>标题:</label>
-                            <input id="title" name="title" class="form-control" placeholder="请输入文章标题"
-                                   v-model="formData.title"/>
-                            <template v-if="validData['title'] && !validData['title'].valid">
-                                <div class="errTips" v-html="validData['title'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 文章标签 -->
-                        <div class="form-item" required prop="label">
-                            <label for="tag" class="form-label"><em>*</em>文章标签:</label>
-                            <input id="tag" name="label" class="form-control" placeholder="多个标签请用英文逗号( , )分割，例如：美白,祛痘"
-                                   v-model="formData.label"/>
-                            <template v-if="validData['label'] && !validData['label'].valid">
-                                <div class="errTips" v-html="validData['label'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 预选标签列表 -->
-                        <div class="tag-list">
-                            <div v-for="(label, index) in articleLabels" class="tag"
-                                 :class="{active: checkLabel(index)}" @click.stop="labelClick(index)">{{label}}<span
-                                    class="close">×</span></div>
-                        </div>
-                        <!-- 新增标签 -->
-                        <div class="control-group">
-                            <input id="tagName" name="addLabel" class="form-control tagName" placeholder="请输入标签名"
-                                   v-model="addLabelName"/>
-                            <button class="form-button addTag" type="button" @click.stop="addLabel">添加</button>
-                        </div>
-                        <!-- SEO关键词 -->
-                        <div class="form-item" required prop="keyword">
-                            <label for="keyword" class="form-label"><em>*</em>SEO关键词:</label>
-                            <input id="keyword" type="text" name="keyword" class="form-control" placeholder="请输入SEO关键词"
-                                   v-model="formData.keyword"/>
-                            <template v-if="validData['keyword'] && !validData['keyword'].valid">
-                                <div class="errTips" v-html="validData['keyword'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 发布人 -->
-                        <div class="form-item" required prop="publisher">
-                            <label for="postAuthor" class="form-label"><em>*</em>发布人:</label>
-                            <input id="postAuthor" name="publisher" class="form-control" placeholder="请输入发布人"
-                                   v-model="formData.publisher"/>
-                            <template v-if="validData['publisher'] && !validData['publisher'].valid">
-                                <div class="errTips" v-html="validData['publisher'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 来源 -->
-                        <div class="form-item">
-                            <label for="source" class="form-label"><em>*</em>来源:</label>
-                            <input id="source" name="source" class="form-control" placeholder="请输入文章来源"
-                                   v-model="formData.source"/>
-                            <template v-if="validData['source'] && !validData['source'].valid">
-                                <div class="errTips" v-html="validData['source'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 推荐语 -->
-                        <div class="form-item" required prop="recommendContent">
-                            <label for="desc" class="form-label"><em>*</em>推荐语（描述）:</label>
-                            <textarea id="desc" name="recommendContent" placeholder="请输入推荐语" rows="4"
-                                      v-model="formData.recommendContent" class="form-control"></textarea>
-                            <template v-if="validData['recommendContent'] && !validData['recommendContent'].valid">
-                                <div class="errTips" v-html="validData['recommendContent'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 文章内容 -->
-                        <div class="form-item" required prop="articleContent">
-                            <label class="form-label"><em>*</em>文章内容:</label>
-                            <div id="editor"></div>
-                            <template v-if="validData['articleContent'] && !validData['articleContent'].valid">
-                                <div class="errTips" v-html="validData['articleContent'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 文章分类 -->
-                        <div class="form-item" required prop="typeId">
-                            <label for="category" class="form-label"><em>*</em>文章分类:</label>
-                            <select id="category" name="typeId" class="form-control form-select"
-                                    v-model="formData.typeId">
-                                <option value="">请选择</option>
-                                <template v-for="(typeInfo, index) in articleTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
-                                </template>
-                            </select>
-                            <template v-if="validData['typeId'] && !validData['typeId'].valid">
-                                <div class="errTips" v-html="validData['typeId'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 引导图 -->
-                        <div class="form-item" required prop="guidanceImage">
-                            <label class="form-label"><em>*</em>引导图:</label>
-                            <label for="cover" class="upload-control">
-                                <template v-if="!formData.guidanceImage">
-                                    <span>+</span>
-                                    <span>添加图片</span>
-                                </template>
-                                <img :src="formData.guidanceImage" alt="guidanceImage" v-show="formData.guidanceImage">
-                            </label>
-                            <input type="file" name="guidanceImage" id="cover" class="form-control" hidden
-                                   @change="fileInputChange(event)"/>
-                            <template v-if="validData['guidanceImage'] && !validData['guidanceImage'].valid">
-                                <div class="errTips" v-html="validData['guidanceImage'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 状态 -->
-                        <div class="form-item radio-group" required prop="status">
-                            <div class="form-label"><em>*</em>状态:</div>
-                            <div class="radio-control">
-                                <input id="on" type="radio" value="1" name="status" v-model="formData.status"/>
-                                <label for="on" class="radio">发布</label>
-                            </div>
-                            <div class="radio-control">
-                                <input id="off" type="radio" value="0" name="status" v-model="formData.status"/>
-                                <label for="off" class="radio">保存草稿箱</label>
-                            </div>
-                        </div>
+
+                    <div class="valide-form">
+                        <el-form :model="formData" :rules="rules" ref="ruleForm" label-position="top">
+                            <!-- 标题 -->
+                            <el-form-item label="标题" prop="title">
+                                <el-input v-model="formData.title" placeholder="请输入文章标题"></el-input>
+                            </el-form-item>
+                            <!-- 文章标签 -->
+                            <el-form-item label="文章标签" prop="label">
+                                <el-input v-model="formData.label" placeholder="请输入文章标签"></el-input>
+                            </el-form-item>
+                            <el-form-item  label="">
+                                <!-- 预选标签列表 -->
+                                <div class="tag-list">
+                                    <div v-for="(label, index) in articleLabels"
+                                         class="tag"
+                                         :class="{active: checkLabel(index)}" @click.stop="labelClick(index)">
+                                        <span>{{label}}</span>
+                                        <span class="close">×</span>
+                                    </div>
+                                </div>
+                                <!-- 新增标签 -->
+                                <div class="label-add">
+                                    <el-input v-model="addLabelName" placeholder="请输入标签名"></el-input>
+                                    <button class="add-tag" type="button" @click.stop="addLabel">添加</button>
+                                </div>
+                            </el-form-item>
+                            <!-- SEO关键词 -->
+                            <el-form-item label="SEO关键词" prop="keyword">
+                                <el-input v-model="formData.keyword" placeholder="请输入SEO关键词"></el-input>
+                            </el-form-item>
+                            <!-- 发布人 -->
+                            <el-form-item label="发布人" prop="publisher">
+                                <el-input v-model="formData.publisher" placeholder="请填写发布人姓名"></el-input>
+                            </el-form-item>
+                            <!-- 来源 -->
+                            <el-form-item label="来源" prop="source">
+                                <el-input v-model="formData.source" placeholder="请填写文章来源"></el-input>
+                            </el-form-item>
+                            <!-- 推荐语(描述) -->
+                            <el-form-item label="推荐语(描述)" prop="recommendContent">
+                                <el-input type="textarea" :rows="3" v-model="formData.recommendContent" placeholder="请填写推荐语(描述)"></el-input>
+                            </el-form-item>
+                            <!-- 文章内容 -->
+                            <el-form-item label="文章内容" prop="articleContent">
+                                <el-input v-model="formData.articleContent" v-show="false"></el-input>
+                                <editor v-model="formData.articleContent" placeholder="请输入文章内容"></editor>
+                            </el-form-item>
+                            <!-- 文章分类 -->
+                            <el-form-item label="文章分类" prop="typeId">
+                                <el-select v-model="formData.typeId" class="max-width">
+                                    <template v-for="(typeInfo, index) in articleTypeList">
+                                        <el-option :label="typeInfo.typeName" :value="typeInfo.typeId" :key="typeInfo.typeId"></el-option>
+                                    </template>
+                                </el-select>
+                            </el-form-item>
+                            <!-- 引导图 -->
+                            <el-form-item label="引导图" prop="guidanceImage">
+                                <el-input v-model="formData.guidanceImage" placeholder="引导图" v-show="false"></el-input>
+                                <el-upload
+                                        :class="{ 'hide-upload': articleImageList.length >= 1 }"
+                                        :action="action"
+                                        list-type="picture-card"
+                                        :on-success="handleUploadSuccess"
+                                        :on-remove="handleImageRemove"
+                                        :file-list="articleImageList"
+                                        :limit="1"
+                                >
+                                    <i class="el-icon-plus"></i>
+                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
+                                </el-upload>
+                            </el-form-item>
+                            <!-- 状态 -->
+                            <el-form-item label="" prop="status">
+                                <span class="cm-label"><em>*</em>状态:</span>
+                                <el-radio-group v-model="formData.status">
+                                    <el-radio :label="1">发布</el-radio>
+                                    <el-radio :label="0">保存草稿箱</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-form>
+                        <!-- 提交 -->
                         <div class="form-item btns">
                             <button class="btn break" @click="handleBack">返回</button>
                             <button class="btn submit" @click="handleSave">保存</button>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
         </div>
@@ -162,14 +129,10 @@
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript"
-        th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/article/formMixin.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/article/uploadMixin.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/article/article-edit.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/editor-component.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/article-edit.js(v=${version})}"></script>
 </body>
 </html>