采美百科编辑页面增加定位到必填项

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

@@ -1,3 +1,4 @@
+
 .cm-label {
     margin-right: 24px;
 }
@@ -7,12 +8,12 @@
     margin-right: 4px;
 }
 
-.el-form-item__label, .cm-label{
+.el-form-item__label, .cm-label {
     color: #666;
 }
 
 .cm-big-label .cm-label,
-.cm-big-label-el .el-form-item__label{
+.cm-big-label-el .el-form-item__label {
     font-weight: bold;
     color: #333;
 }
@@ -23,7 +24,6 @@
 
 .edit-page .row {
     box-sizing: border-box;
-    padding: 24px 0;
     background: #FFFFFF;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
 }
@@ -32,49 +32,12 @@
     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
-}
-
 
 .cover-uploader .el-upload {
     border: 1px dashed #d9d9d9;
@@ -192,11 +155,105 @@
     top: 40px;
 }
 
-.el-upload-list--picture-card .el-upload-list__item,.el-upload--picture-card{
+.el-upload-list--picture-card .el-upload-list__item, .el-upload--picture-card {
     width: 110px;
     height: 110px;
 }
 
-.el-upload--picture-card{
+.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/css/supplier-center/encyclopedia/edit-page.css

@@ -1,412 +0,0 @@
-.fiexd{
-    position: fixed;
-    width: 100%;
-    background: #fff;
-    z-index: 999;
-}
-
-@media screen and (min-width: 768px) {
-    .product-edit .navLayout .right {
-        width: auto
-    }
-
-    .product-edit .navLayout .right-box {
-        width: 968px
-    }
-
-    .product-edit .row {
-        box-sizing: border-box;
-        padding: 24px 0;
-        background: #FFFFFF;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
-    }
-
-    .product-edit .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%)
-    }
-
-    /*验证表单*/
-    .valid-form {
-        width: 500px;
-        margin: 0 auto;
-        margin-top: 40px;
-    }
-
-    .valid-form h2 {
-        font-size: 14px;
-        font-weight: bold;
-        color: #4A4F58;
-        margin-bottom: 16px;
-    }
-
-    .valid-form h2 em {
-        color: #e74c3c;
-        margin-right: 4px;
-    }
-
-
-    .valid-form .form-item {
-        position: relative;
-        padding-bottom: 30px;
-        margin-bottom: 4px;
-    }
-
-    .valid-form .form-item[required] em {
-        display: inline;
-    }
-
-    .valid-form .form-item.vertical {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-    }
-
-    .valid-form .form-item.vertical .form-label {
-        width: 100px;
-        padding: 4px 0;
-        margin-bottom: 0;
-    }
-
-    .valid-form .form-item.vertical .form-label.right {
-        text-align: right;
-    }
-
-    .valid-form .form-group {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .valid-form .valid-message {
-        position: absolute;
-        bottom: 0;
-        height: 30px;
-        line-height: 30px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        color: #e74c3c;
-        font-size: 12px;
-        /*display: none;*/
-    }
-
-    .valid-form .form-label {
-        margin-bottom: 4px;
-        line-height: 1.6;
-    }
-
-    .valid-form .form-label span {
-        color: #606266;
-    }
-
-    .valid-form .form-label em {
-        display: none;
-        color: #e74c3c;
-        margin-right: 4px;
-    }
-
-    .valid-form .cm-radio {
-        margin-right: 16px;
-    }
-
-    .valid-form .cm-select {
-        width: 100%;
-    }
-
-    .valid-form .cm-select .cm {
-        width: 100%;
-    }
-
-    .valid-form .form-item.btns {
-        justify-content: space-between;
-    }
-
-    .valid-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
-    }
-
-    .valid-form .btn.break {
-        background: #FFE6DC;
-        border: 1px solid #E15616;
-        border-radius: 2px;
-        color: #E15616
-    }
-
-    .valid-form .btn.submit {
-        background: #E15616;
-        color: #FFFFFF
-    }
-
-    /*input-group*/
-    .valid-form .input-group .form-group {
-        position: relative;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        width: 100%;
-    }
-
-    .valid-form .input-group .add-btn,
-    .question-group .add-btn {
-        position: absolute;
-        right: 0;
-        top: -30px;
-        font-size: 12px;
-        color: #E15616;
-        cursor: pointer;
-        text-decoration: underline;
-    }
-
-    .valid-form .input-group .form-group input:nth-child(1) {
-        width: 30%;
-    }
-
-    .valid-form .input-group .form-group input:nth-child(2) {
-        flex: 1;
-        margin-left: 16px;
-    }
-
-    .question-group .form-group .remove {
-        top: 28px;
-    }
-
-    .question-group .form-group {
-        position: relative;
-        margin-top: 32px;
-        display: block;
-    }
-
-    .question-group .form-group:first-child {
-        margin-top: 0;
-    }
-
-    .question-group .form-group:first-child .question .form-label {
-        margin-top: 0;
-    }
-
-    .question-group .form-group .answer .form-label,
-    .question-group .form-group .question .form-label {
-        margin-top: 8px;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .product-edit .navLayout .right {
-        width: auto
-    }
-
-    .product-edit .navLayout .right-box {
-        width: 100vw
-    }
-
-    .product-edit .row {
-        box-sizing: border-box;
-        padding: 3.2vw 0;
-        background: #FFFFFF;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
-    }
-
-    .product-edit .top-tip {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 19.6vw;
-        box-sizing: border-box;
-        padding: 0 2.4vw;
-        text-align: center;
-        font-size: 2.8vw;
-        line-height: 3.6vw;
-        color: #E15616;
-        background: linear-gradient(90deg, #FFFFFF 0%, rgba(225, 86, 22, 0.1) 50%, #FFFFFF 100%)
-    }
-
-    /*验证表单*/
-    .valid-form {
-        width: 100%;
-        box-sizing: border-box;
-        padding: 0 3.2vw;
-        margin-top: 4vw;
-    }
-
-    .valid-form h2 {
-        font-size: 14px;
-        font-weight: bold;
-        color: #4A4F58;
-        margin-bottom: 1.2vw;
-    }
-
-    .valid-form h2 em {
-        color: #e74c3c;
-        margin-right: 0.8vw;
-    }
-
-
-    .valid-form .form-item {
-        position: relative;
-        padding-bottom: 4.2vw;
-        margin-bottom: 0.6vw;
-    }
-
-    .valid-form .form-item[required] em {
-        display: inline;
-    }
-
-    .valid-form .form-item.vertical {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-    }
-
-    .valid-form .form-item.vertical .form-label {
-        width: 100px;
-        padding: 4px 0;
-        margin-bottom: 0;
-    }
-
-    .valid-form .form-item.vertical .form-label.right {
-        text-align: right;
-    }
-
-    .valid-form .form-group {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .valid-form .valid-message {
-        position: absolute;
-        bottom: 0;
-        height: 4.2vw;
-        line-height: 4.2vw;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        color: #e74c3c;
-        font-size: 2.4vw;
-        display: none;
-    }
-
-    .valid-form .form-label {
-        margin-bottom: 1vw;
-        line-height: 1.6;
-    }
-
-    .valid-form .form-label span {
-        color: #606266;
-    }
-
-    .valid-form .form-label em {
-        display: none;
-        color: #e74c3c;
-        margin-right: 0.8vw;
-    }
-
-    .valid-form .cm-radio {
-        margin-right: 3.2vw;
-    }
-
-    .valid-form .cm-select {
-        width: 100%;
-    }
-
-    .valid-form .cm-select .cm {
-        width: 100%;
-    }
-    .valid-form .form-item.btns{
-        display: block;
-    }
-    .valid-form .btn {
-        width: 100%;
-        height: 11.2vw;
-        text-align: center;
-        line-height: 11.2vw;
-        margin-top: 3.4vw;
-        font-size: 3.8vw;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        cursor: pointer
-    }
-
-    .valid-form .btn.break {
-        background: #FFE6DC;
-        border: 1px solid #E15616;
-        border-radius: 2px;
-        color: #E15616
-    }
-
-    .valid-form .btn.submit {
-        background: #E15616;
-        color: #FFFFFF
-    }
-
-    /*input-group*/
-    .valid-form .input-group .form-group {
-        position: relative;
-        justify-content: space-between;
-        margin-bottom: 3.2vw;
-        width: 100%;
-    }
-
-    .valid-form .input-group .add-btn,
-    .question-group .add-btn {
-        position: absolute;
-        right: 0;
-        top: -30px;
-        font-size: 2.4vw;
-        color: #E15616;
-        cursor: pointer;
-        text-decoration: underline;
-    }
-
-    .valid-form .input-group .form-group input:nth-child(1) {
-        width: 30%;
-    }
-
-    .valid-form .input-group .form-group input:nth-child(2) {
-        flex: 1;
-        margin-left: 3.2vw;
-    }
-
-    .question-group .form-group .remove {
-        top: 7.4vw;
-    }
-
-    .question-group .form-group {
-        position: relative;
-        margin-top: 4.2vw;
-        display: block;
-    }
-
-    .question-group .form-group:first-child {
-        margin-top: 0;
-    }
-
-    .question-group .form-group:first-child .question .form-label {
-        margin-top: 0;
-    }
-
-    .question-group .form-group .answer .form-label,
-    .question-group .form-group .question .form-label {
-        margin-top: 1vw;
-    }
-}

src/main/resources/static/css/supplier-center/encyclopedia/form-component-style.css

@@ -1,270 +0,0 @@
-@font-face {
-	font-family: 'iconfont'; /* Project id 2996139 */
-	src: url('//at.alicdn.com/t/font_2996139_9eqk1x8ei1h.woff2?t=1638926796866') format('woff2'),
-		url('//at.alicdn.com/t/font_2996139_9eqk1x8ei1h.woff?t=1638926796866') format('woff'),
-		url('//at.alicdn.com/t/font_2996139_9eqk1x8ei1h.ttf?t=1638926796866') format('truetype');
-}
-
-.iconfont {
-	font-family: 'iconfont' !important;
-	font-size: 16px;
-	font-style: normal;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-.icon-arrow-up:before {
-	content: '\e602';
-}
-
-.icon-arrow-down:before {
-	content: '\e604';
-}
-
-.cm {
-  display: inline-block;
-  line-height: 1.8;
-  box-sizing: border-box;
-  font-size: 14px;
-  color: #303133;
-}
-.cm .remove {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 20px;
-  height: 20px;
-  background: #e74c3c;
-  color: #fff;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-.cm.border {
-  border: 1px solid #dcdfe6 !important;
-}
-.cm.radius {
-  border-radius: 6px !important;
-}
-.cm.max {
-  width: 100%;
-}
-.cm.btn {
-  position: relative;
-  border: 0;
-  background: #ecf0f1;
-  padding: 8px 16px;
-  cursor: pointer;
-}
-.cm.btn::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  left: 0;
-  top: 0;
-  z-index: 2;
-  opacity: 0;
-  transition: opacity 0.4s;
-}
-.cm.btn:hover::after {
-  opacity: 0.08;
-}
-.cm.btn.info {
-  background: #ecf0f1;
-}
-.cm.btn.primary {
-  background: #3498db;
-  color: #fff;
-}
-.cm.btn.success {
-  background: #2ecc71;
-  color: #fff;
-}
-.cm.btn.warning {
-  background: #e6a23c;
-  color: #fff;
-}
-.cm.btn.danger {
-  background: #e74c3c;
-  color: #fff;
-}
-.cm.input[type=text], .cm.input[type=number],.cm.input[type=date], .cm.textarea {
-  border: 0;
-  outline: none;
-  padding: 4px 12px;
-}
-.cm.input[type=text]::placeholder, .cm.input[type=number]::placeholder, .cm.textarea::placeholder {
-  color: #909399;
-}
-.cm.textarea.no-resize {
-  resize: none;
-}
-.cm.radio {
-  position: relative;
-  padding-left: 24px;
-  cursor: pointer;
-}
-.cm.radio.checked {
-  color: #e15616;
-}
-.cm.radio.checked::before {
-  border-color: #e15616;
-}
-.cm.radio.checked::after {
-  opacity: 1;
-}
-.cm.radio::before {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  content: "";
-  display: block;
-  width: 18px;
-  height: 18px;
-  border: 1px solid #dcdfe6;
-  border-radius: 50%;
-  opacity: 1;
-}
-.cm.radio::after {
-  position: absolute;
-  content: "";
-  width: 8px;
-  height: 8px;
-  background: #e15616;
-  border-radius: 50%;
-  opacity: 0;
-  left: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: opacity 0.4s;
-}
-.cm.select {
-  position: relative;
-  cursor: pointer;
-}
-.cm.select input[type=text] {
-  padding-right: 36px;
-}
-.cm.select .cm-icon {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  transform: translateY(-50%);
-  color: #606266;
-}
-.cm.select::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 2;
-}
-.cm.select .options {
-  position: absolute;
-  z-index: 3;
-  width: 100%;
-  box-sizing: border-box;
-  transform: translateY(5px);
-  padding: 8px 0;
-  max-height: 200px;
-  overflow-y: auto;
-  background: #fff;
-}
-.cm.select .options::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-  background-color: #fff;
-}
-.cm.select .options::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background-color: #dcdfe6;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-.cm.select .options.border {
-  border: 1px solid #ebeef5;
-}
-.cm.select .options.shadow {
-  box-shadow: 0 0 12px rgba(26, 10, 10, 0.1);
-}
-.cm.select .options.radius {
-  border-radius: 6px;
-}
-.cm.option {
-  display: block;
-  padding: 4px 12px;
-  transition: all 0.2s;
-  background: #fff;
-}
-.cm.option:hover {
-  background: #e15616;
-  color: #fff;
-}
-.cm.image-upload {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.cm.image-upload .border {
-  border: 1px solid #dcdfe6;
-}
-.cm.image-upload .dashed {
-  border: 1px dashed #dcdfe6;
-}
-.cm.image-upload .choose-image,
-.cm.image-upload .image {
-  position: relative;
-  width: 90px;
-  height: 90px;
-  box-sizing: border-box;
-  cursor: pointer;
-  margin: 0 8px 8px 0;
-}
-.cm.image-upload .image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-.cm.image-upload .image img {
-  height: 100%;
-}
-.cm.image-upload .choose-image {
-  margin-right: 0;
-}
-.cm.image-upload .choose-image input[type=file] {
-  display: none;
-}
-.cm.image-upload .choose-image span {
-  position: absolute;
-  bottom: 10%;
-  text-align: center;
-  width: 100%;
-  color: #909399;
-  font-size: 12px;
-}
-.cm.image-upload .choose-image::before, .cm.image-upload .choose-image::after {
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  content: "";
-  display: block;
-  background: #dcdfe6;
-  transform: translate(-50%, -50%);
-}
-.cm.image-upload .choose-image::before {
-  width: 27px;
-  height: 4px;
-}
-.cm.image-upload .choose-image::after {
-  height: 27px;
-  width: 4px;
-}

src/main/resources/static/js/supplier-center/encyclopedia/form-component.js

@@ -1,505 +0,0 @@
-'use strict';
-
-function _toConsumableArray(arr) {
-    if (Array.isArray(arr)) {
-        for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
-            arr2[i] = arr[i];
-        }
-        return arr2;
-    } else {
-        return Array.from(arr);
-    }
-}
-
-// 查找html元素
-function queryElement(el) {
-    return document.querySelector(el);
-}
-
-// 返回模板字符串
-function templateHtml(el) {
-    return queryElement(el).innerHTML;
-}
-
-// Radio组件
-function createnRadio() {
-    var Radio = {
-        template: templateHtml('#radio'),
-        model: {
-            prop: 'value',
-            event: 'click'
-        },
-        props: {
-            label: {
-                type: [Number, String],
-                default: ''
-            },
-            value: {
-                type: [Number, String],
-                default: ''
-            }
-        },
-        computed: {
-            isChecked: function isChecked() {
-                return this.value === this.label;
-            }
-        },
-        methods: {
-            handleClick: function handleClick() {
-                this.$emit('click', this.label);
-            }
-        }
-    };
-    return Radio;
-}
-
-// Select组件
-function createSelect() {
-    var Select = {
-        template: templateHtml('#select'),
-        props: {
-            value: {
-                type: [Number, String],
-                default: ''
-            },
-            placeholder: {
-                type: String,
-                default: ''
-            }
-        },
-        model: {
-            prop: 'value',
-            event: 'change'
-        },
-        data: function data() {
-            return {
-                optionsVisible: false,
-                label: '',
-            };
-        },
-        watch:{
-            value(nVal){
-                const that = this;
-                this.$children.forEach(function(o){
-                    if(o.value === nVal){
-                        that.label = o.label
-                    }
-                });
-            },
-        },
-        mounted: function mounted() {
-            var _this = this;
-
-            document.addEventListener('click', function () {
-                _this.optionsVisible = false;
-            });
-        },
-        beforeDestroy: function beforeDestroy() {
-            document.removeEventListener('click');
-        }
-    };
-    return Select;
-}
-
-// Option组件
-function createOption() {
-    var Option = {
-        template: templateHtml('#option'),
-        props: {
-            label: {
-                type: [String, Number],
-                default: ''
-            },
-            value: {
-                type: [String, Number],
-                default: ''
-            }
-        },
-        methods: {
-            handleClick: function handleClick() {
-                this.$parent.$emit('change', this.value);
-                this.$parent.$data.optionsVisible = false;
-                // this.$parent.$data.label = this.label;
-            }
-        }
-    };
-    return Option;
-}
-
-// 上传文件组件
-function createUploadImage() {
-    var UploadImage = {
-        template: templateHtml('#imageUpload'),
-        props: {
-            placeholder: {
-                type: String,
-                default: '上传图片'
-            },
-            multiple: {
-                type: Boolean,
-                default: false
-            },
-            limit: {
-                type: Number,
-                default: 9
-            },
-            imgList: {
-                type: Array,
-                default: function _default() {
-                    return [];
-                }
-            }
-        },
-        data: function data() {
-            return {
-                files: [],
-                accept: '.jpg, .jpeg, .png, .gif',
-            };
-        },
-        created: function created() {
-            // 初始化列表
-            this.initImagelist(this.imgList);
-        },
-        computed: {
-            // 当前选中的图片数量
-            fileCount: function fileCount() {
-                return this.files.length;
-            },
-            // 是否能选择图片
-            canChooseImage: function canChooseImage() {
-                return (this.multiple && this.fileCount < this.limit) || (!this.multiple && this.fileCount === 0);
-            }
-        },
-        watch: {
-            imgList: function(nVal){
-                this.initImagelist(nVal)
-            }
-        },
-
-        methods: {
-
-            // 初始化图片列表
-            initImagelist: function initImagelist(fileList = []){
-                if(fileList.length <=0) return;
-                this.files = [];
-                if(this.multiple){
-                    this.files = fileList.slice(0, this.limit);
-                }else{
-                    this.files.push(fileList[0]);
-                }
-            },
-
-            // 点击事件
-            handleClick: function handleClick() {
-                this.$refs.file.click();
-            },
-
-            // 选择图片
-            handleChooseImage: function handleChooseImage(e) {
-                var that = this;
-                var files = [].concat(_toConsumableArray(e.target.files));
-                e.target.value = '';
-                // 如果能选取图片
-                if(!this.canChooseImage) return;
-                // 取合适数量的图片
-                files = this.handleFilterImage(files);
-                // 图片本地预览链接
-                files.forEach(function(file){
-                    file.url = URL.createObjectURL(file);
-                    that.files.push(file);
-                });
-                this.$emit('change', this.files);
-            },
-
-            // 筛选图片 单张 ||  limit张
-            handleFilterImage: function handleFilterImage(files) {
-                if(files.length <= 0) return [];
-                if(this.multiple){
-                    console.log(this.limit - this.fileCount);
-                    // 多选
-                    files = files.slice(0, this.limit - this.fileCount)
-                }else{
-                    // 单选
-                    files = files.slice(0, 1)
-                }
-                return files
-            },
-
-            // 删除图片
-            removeImage: function removeImage(file, index) {
-                this.files.splice(index, 1);
-                this.$emit('remove', index);
-            }
-        }
-    };
-    return UploadImage;
-}
-
-//富文本框封装
-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: 'change'
-        },
-        props:{
-            value: {
-                type: String,
-                default: ''
-            },
-            placeholder:{
-                type: String,
-                default: ''
-            },
-            text: {
-                type: String,
-                default: ''
-            }
-        },
-        data() {
-            return {
-                editorId: '',
-                editor: null
-            }
-        },
-        watch:{
-            text(nVal){
-                if(!this.editor) return;
-                this.editor.txt.html(this.value) // 重新设置编辑器内容
-            }
-        },
-        created: function created() {
-            window.editorCount++;
-            this.editorId = 'editorId-' + window.editorCount;
-        },
-        mounted: function mounted() {
-            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);
-                // 或者 const editor = new E( document.getElementById('div1') )
-                this.initEditorOptions();
-                this.editor.create();
-            },
-            // 富文本框配置
-            initEditorOptions: function initEditorOptions() {
-                this.editor.config.zIndex = 333;
-                this.editor.config.height = 200;
-                this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024;
-                this.editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
-                this.editor.config.placeholder = this.placeholder;
-                var that = this;
-                this.editor.config.onchange = function (newHtml) {
-                    that.$emit('change', newHtml)
-                };
-
-                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();
-                    });
-                });
-            }
-        }
-    };
-    return Editor;
-}
-
-// 文本框列表
-function  createInputGroup() {
-    const InputGroup = {
-        template: templateHtml('#inputGroup'),
-        props:{
-            // 最小数量
-            minLimit: {
-                type: Number,
-                default: 5
-            },
-            // 回显列表
-            list: {
-                type: Array,
-                default: function _default() {
-                    return [];
-                }
-            },
-            placeholderList: {
-                type: Array,
-                default: function _default() {
-                    return [];
-                }
-            },
-            keyMap: {
-                type: Object,
-                default: () => ({
-                    key: 'name',
-                    value: 'value'
-                })
-            },
-            addText:{
-                type: String,
-                default: ''
-            }
-        },
-        data: function(){
-            return {
-                dataList: [],
-                placeholder: { label: '参数名',value: '请输入参数信息'},
-            }
-        },
-        computed:{
-            showList: function(){
-                const len = this.dataList.length;
-                if(len >= this.minLimit) return this.dataList;
-                const emptyList = this.setEmptyData(this.minLimit - len);
-                return this.dataList.concat(emptyList);
-            }
-        },
-        created: function(){
-            this.dataList = this.list;
-        },
-        watch:{
-            list: function(nVal){
-                this.dataList = nVal;
-            }
-        },
-        methods:{
-            // add
-            getPlaceholder(index){
-                if(this.placeholderList.length <= 0) return this.placeholder;
-                return this.placeholderList[index] || this.placeholder;
-            },
-            //添加空数据
-            setEmptyData(size) {
-                const list = [];
-                for (let i = 0; i < size; i++) {
-                    let obj = Object.create(null);
-                    obj[this.keyMap.key] = "";
-                    obj[this.keyMap.value] = '';
-                    list.push(obj)
-                }
-                return list
-            },
-            handleRemove(item, index){
-                this.$emit('remove', { item, index});
-            },
-            handleAddOnce(){
-                this.$emit('add')
-            }
-        }
-    };
-    return InputGroup;
-}
-
-// 问答组件
-function createQuestionGroup(){
-    const QuestionGroup = {
-        template: templateHtml('#questionGroup'),
-        props:{
-            // 最小数量
-            minLimit: {
-                type: Number,
-                default: 5
-            },
-            // 回显列表
-            list: {
-                type: Array,
-                default: function _default() {
-                    return [];
-                }
-            },
-            placeholderList: {
-                type: Array,
-                default: function _default() {
-                    return [];
-                }
-            },
-            keyMap: {
-                type: Object,
-                default: () => ({
-                    key: 'name',
-                    value: 'value'
-                })
-            },
-            addText:{
-                type: String,
-                default: ''
-            }
-        },
-        data: function(){
-            return {
-                dataList: [],
-                placeholder: { label: '请输入问题',value: '请输入回答'},
-            }
-        },
-        computed:{
-            showList: function(){
-                const len = this.dataList.length;
-                if(len >= this.minLimit) return this.dataList;
-                const emptyList = this.setEmptyData(this.minLimit - len);
-                return this.dataList.concat(emptyList);
-            }
-        },
-        created: function(){
-            this.dataList = this.list;
-        },
-        watch:{
-            list: function(nVal){
-                this.dataList = nVal;
-            }
-        },
-        methods:{
-            // add
-            getPlaceholder(index){
-                if(this.placeholderList.length <= 0) return this.placeholder;
-                return this.placeholderList[index] || this.placeholder;
-            },
-            //添加空数据
-            setEmptyData(size) {
-                const list = [];
-                for (let i = 0; i < size; i++) {
-                    let obj = Object.create(null);
-                    obj[this.keyMap.key] = "";
-                    obj[this.keyMap.value] = '';
-                    list.push(obj)
-                }
-                return list
-            },
-            handleRemove(item){
-                this.$emit('remove', item);
-            },
-            handleAddOnce(){
-                this.$emit('add')
-            }
-        }
-    };
-    return QuestionGroup;
-}
-
-

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

@@ -163,11 +163,16 @@ const app = new Vue({
             return []
         },
     },
+
+    mounted: function mounted() {
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
+    },
+
     created() {
         this.getTypeList();
         this.watchArrayStatus(['paramList', 'questionList', 'authImageList', 'displayImageList']);
         this.getProductFormData();
-
     },
 
     methods: {
@@ -182,7 +187,10 @@ const app = new Vue({
         handleSave() {
             this.$refs.ruleForm.validate(valide => {
                 console.log(valide);
-                if (!valide) return;
+                if (!valide) {
+                    this.socrllToErrorInput()
+                    return;
+                }
                 this.saveFormData()
             })
         },
@@ -430,6 +438,16 @@ const app = new Vue({
                 }
             })
         },
+
+        // 滚动到必填位置
+        socrllToErrorInput(){
+            this.$nextTick(() => {
+                const scrollTop = $('.el-form-item__error').eq(0).parent().siblings('.el-form-item__label').offset().top
+                $('body,html').animate({
+                    scrollTop: scrollTop - $('#globalHead').height() -  40
+                }, 800)
+            })
+        }
     },
 })
 

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

@@ -1,537 +0,0 @@
-const Radio = createnRadio();
-const Select = createSelect();
-const Option = createOption();
-const UploadImage = createUploadImage();
-const Editor = createEditorComponent();
-const InputGroup = createInputGroup();
-const QuestionGroup = createQuestionGroup()
-
-new Vue({
-    el: '#productEdit',
-    mixins: [validFormMixin],
-    components: {
-        'cm-radio': Radio,
-        'cm-select': Select,
-        'cm-option': Option,
-        'cm-upload-image': UploadImage,
-        'cm-editor': Editor,
-        'cm-input-group': InputGroup,
-        'cm-question-group': QuestionGroup
-    },
-    data: {
-        // 商品类型 1： 产品  2： 仪器
-        productId: 0,
-        commodityType: 1,
-        shopId: GLOBAL_SHOP_ID,
-        formData: {
-            // 产品名称
-            name: '',
-            // 产品别名
-            alias: '',
-            // 产品概述
-            discription: '',
-            // 产品图片
-            image: '',
-            // 产品参数
-            paramList: [],
-            // 产品优点
-            advantage: '',
-            // 产品缺点
-            disadvantage: '',
-            // 产品原理
-            principle: '',
-            // 品牌
-            brand: '',
-            // 产地
-            producePlace: '',
-            // 上市时间
-            marketTime: '',
-            // 公司/厂商
-            company: '',
-            // NMPA认证时间
-            nmpaTime: '',
-            // 产品认证
-            authImageList: [],
-            // 适应人群
-            adaptiveMan: '',
-            // 不适应人群
-            unAdaptiveMan: '',
-            // 术前术后
-            aroundOperation: '',
-            // 效果展示图片列表
-            displayImageList: [],
-            // 常见问题
-            questionList: [],
-            // 产品类别
-            typeId: '',
-            // 产品状态
-            status: 1,
-        },
-        // 预览图片列表
-        imageList: [],
-        authImageList: [],
-        displayImageList: [],
-        // 产品分类
-        typeList: [],
-
-        // 产品参数表单数据
-        paramsPlaceholderList: [{
-            label: '例如：名牌',
-            value: '请输入名牌信息'
-        }],
-        paramsMinLimit: 2,
-        paramskeyMap: {
-            key: 'name',
-            value: 'content'
-        },
-
-        // 问题数据表单列表
-        questionPlaceHolderList: [{
-            label: '请输入问题',
-            value: '请输入回答'
-        }],
-        questionMinLimit: 2,
-        questionkeyMap: {
-            key: 'question',
-            value: 'answer'
-        },
-        // 表单校验规则
-        rules: {
-            // 产品名称
-            name: [{
-                type: 'string',
-                required: true,
-                message: '名称不能为空',
-                trigger: ['blur', 'change']
-            }],
-            // 产品别名
-            alias: [{
-                type: 'string',
-                required: true,
-                message: '别名不能为空',
-                trigger: ['blur', 'change']
-            }],
-            // 产品概述
-            discription: [{
-                type: 'string',
-                required: true,
-                message: '概述不能为空',
-                trigger: ['blur', 'change']
-            }],
-            // 产品图片
-            image: [{
-                type: 'string',
-                required: true,
-                message: '图片不能为空',
-                trigger: 'change'
-            }],
-            // 产品参数
-            paramList: [{
-                type: 'array',
-                required: true,
-                message: '参数信息不能为空',
-                trigger: ['change', 'blur'],
-                valid: ['name', 'content']
-            }],
-            // 产品优点
-            advantage: [{
-                type: 'string',
-                required: true,
-                message: '优点不能为空',
-                trigger: 'change'
-            }],
-            // 产品缺点
-            disadvantage: [{
-                type: 'string',
-                required: true,
-                message: '缺点不能为空',
-                trigger: 'change'
-            }],
-            // 产品原理
-            principle: [{
-                type: 'string',
-                required: true,
-                message: '原理不能为空',
-                trigger: 'change'
-            }],
-            // 品牌
-            brand: [{
-                type: 'string',
-                required: true,
-                message: '品牌不能为空',
-                trigger: ['change', 'blur']
-            }],
-            // 产地
-            producePlace: [{
-                type: 'string',
-                required: true,
-                message: '产地不能为空',
-                trigger: ['change', 'blur']
-            }],
-
-            // 上市时间
-            marketTime: [{
-                type: 'string',
-                required: true,
-                message: '上市时间不能为空',
-                trigger: ['change', 'blur'],
-                pattern: {
-                    reg: /^\d{4}/g,
-                    regMessage: '时间格式不正确，年月日请以"-"连接'
-                },
-            }],
-            // 公司/厂商
-            company: [{
-                type: 'string',
-                required: true,
-                message: '公司/厂商不能为空',
-                trigger: ['change', 'blur']
-            }],
-            // NMPA认证时间
-            nmpaTime: [{
-                type: 'string',
-                required: true,
-                message: 'NMPA认证时间不能为空',
-                trigger: ['change', 'blur']
-            }],
-            // 产品认证
-            authImageList: [{
-                type: 'array',
-                required: true,
-                message: '产品认证图片不能为空',
-                trigger: 'change'
-            }],
-            // 适应人群
-            adaptiveMan: [{
-                type: 'string',
-                required: true,
-                message: '适应人群不能为空',
-                trigger: 'change'
-            }],
-            // 不适应人群
-            unAdaptiveMan: [{
-                type: 'string',
-                required: true,
-                message: '不适应人群不能为空',
-                trigger: 'change'
-            }],
-            // 术前术后
-            aroundOperation: [{
-                type: 'string',
-                required: true,
-                message: '术前术后内容不能为空',
-                trigger: 'change'
-            }],
-            // 效果展示
-            displayImageList: [{
-                type: 'array',
-                required: true,
-                message: '效果展示图片不能为空',
-                trigger: 'change'
-            }],
-            // 常见问题
-            questionList: [{
-                type: 'array',
-                required: true,
-                message: '常见问题不能为空',
-                trigger: ['change', 'blur'],
-                valid: ['question', 'answer']
-            }],
-            // 产品类别
-            typeId: [{
-                type: 'number',
-                required: true,
-                message: '产品类别不能为空',
-                trigger: 'change'
-            }],
-            // 产品状态
-            status: [{
-                type: 'number',
-                required: true,
-                message: '状态不能为空',
-                trigger: 'change'
-            }],
-        },
-    },
-    created() {
-        this.getTypeList();
-        this.getProductFormData();
-        this.resetQuestionListLimit();
-        this.resetParamsListLimit();
-        this.registerForm(this.formData, this.rules);
-    },
-    mounted: function () {
-        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
-    },
-    methods: {
-        // 获取分类列表
-        getTypeList() {
-            const that = this;
-            SupplierApi.ShopBaikeProductTypeList({commodityType: this.commodityType}, function (res) {
-                that.typeList = res.data;
-                console.log(res);
-            })
-        },
-
-        // 初始化表单数据
-        initFormData: function(formData) {
-            console.log(formData);
-            // 初始化this.formData
-            for (var key in this.formData) {
-                if (formData.hasOwnProperty(key)) {
-                    // this.$set(this.formData, key, formData[key]);
-                    this.formData[key] = formData[key];
-                }
-            }
-
-            this.formData.marketTime = dateFormat(new Date(this.formData.marketTime), 'yyyy-MM-dd');
-            this.formData.nmpaTime = dateFormat(new Date(this.formData.nmpaTime), 'yyyy-MM-dd');
-
-            // 初始化图片列表 imageList  authImageList  displayImageList
-            this.imageList = this.initPreviewImageList([formData.image], {name: '授权图片'});
-            this.authImageList = this.initPreviewImageList(formData.authImageList, {name: '授权图片'});
-            this.displayImageList = this.initPreviewImageList(formData.displayImageList, {name: '效果图'});
-
-
-            // 初始化参数列表
-            if (formData.questionList.length < this.questionMinLimit) {
-                const newQuestionList = [];
-                for (var i = 0; i < this.questionMinLimit; i++) {
-                    if (formData.questionList[i]) {
-                        newQuestionList[i] = formData.questionList[i]
-                    } else {
-                        newQuestionList[i] = {question: '', answer: '',}
-                    }
-                }
-                this.formData.questionList = newQuestionList
-            }
-            // 初始化问题列表
-            if (formData.paramList.length < this.paramsMinLimit) {
-                const newParamList = [];
-                for (var i = 0; i < this.paramsMinLimit; i++) {
-                    if (formData.paramList[i]) {
-                        newParamList[i] = formData.paramList[i]
-                    } else {
-                        newParamList[i] = {name: '', content: '',}
-                    }
-                }
-                this.formData.paramList = newParamList
-            }
-        },
-
-        // 初始化图片
-        initPreviewImageList(imageList, options) {
-            if (!options) {
-                options.name = '图片'
-            }
-
-            return imageList.map(function (item) {
-                return {
-                    name: options.name,
-                    url: item
-                }
-            });
-        },
-
-
-        // 获取表单数据
-        getProductFormData() {
-            this.productId = localStorage.getItem('productId');
-            // localStorage.removeItem('productId');
-
-            // if (!this.productId) return;
-
-            const that = this;
-            SupplierApi.GetShopBaikeProductForm({productId: this.productId}, function (res) {
-                if (res.code === 0) {
-                    that.initFormData(res.data);
-                } else {
-                    CAIMEI.dialog('获取产品数据失败', false);
-                    setTimeout(function () {
-                        that.handleBack();
-                    }, 2000);
-                }
-            });
-        },
-        // 保存表单数据
-        saveFormData() {
-            const that = this;
-            const params = {
-                ...this.formData,
-                shopId: this.shopId,
-                commodityType: this.commodityType,
-                paramList: JSON.stringify(this.formData.paramList),
-                questionList: JSON.stringify(this.formData.questionList)
-            };
-
-            if (this.productId) params.productId = this.productId;
-
-            SupplierApi.ShopBaikeProductSave(params, function (res) {
-                if (res.code === 0) {
-                    CAIMEI.dialog('保存成功', false);
-                    setTimeout(function () {
-                        that.handleBack();
-                    }, 2000);
-                } else {
-                    CAIMEI.Alert(res.msg, '确认', false)
-                }
-            })
-        },
-
-        // 返回文章列表页面
-        handleBack: function handleBack() {
-            localStorage.removeItem('target-name');
-            window.open('/supplier/encyclopedia/product-list.html', 'supplier-product-list');
-            window.close();
-        },
-
-        // 保存事件
-        handleSave() {
-            console.log(this.formData);
-            const that = this;
-            // that.saveFormData();
-            this.validFormData(this.formData, this.rules).then(res => {
-                that.saveFormData()
-            }).catch(() => {
-                // CAIMEI.dialog('必填项不能为空', false);
-                // console.log(this.validMessage)
-                this.scorllToValid(this.validMessage);
-            })
-        },
-
-        scorllToValid: function(validData){
-            var currentKey = '';
-            for(var key in validData){
-                var validValue = validData[key];
-                if(!validValue.valid) {
-                    currentKey = key;
-                    continue;
-                }
-            }
-
-            $('html, body').animate({
-                scrollTop: $(`[props=${currentKey}]`).offset().top - $('#globalHead').height() - 40
-            }, 1000);
-        },
-
-
-        // 上传封面图片
-        handleUploadProductImage(files) {
-            this.uploadImage(files[0]).then(res => {
-                this.formData.image = res;
-                this.imageList.push({url: res, name: '封面'})
-            }).catch(err => {
-                console.log(err)
-            })
-        },
-
-        // 删除上传的封面图片
-        handleRemoveProductImage() {
-            this.formData.image = ''
-        },
-
-        // 上传授权图片
-        handleUploadAuthImage(files) {
-            const that = this;
-            files.forEach(function (file) {
-                if (file.type) {
-                    // resultFiles 是 input 中选中的文件列表
-                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-                    that.uploadImage(file).then(function (res) {
-                        that.formData.authImageList.push(res);
-                        that.authImageList.push({url: res, name: '图片'})
-                    });
-                }
-            });
-        },
-        // 删除上传的授权图片
-        handleRemoveAuthImage(index) {
-            this.formData.authImageList.splice(index, 1);
-            this.authImageList.splice(index, 1);
-            console.log(this.formData.authImageList);
-            console.log(this.authImageList);
-        },
-
-        // 上传效果展示图片
-        handleUploadDisplayImageList(files) {
-            const that = this;
-            files.forEach(function (file) {
-                if (file.type) {
-                    // resultFiles 是 input 中选中的文件列表
-                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-                    that.uploadImage(file).then(function (res) {
-                        that.formData.displayImageList.push(res);
-                        that.displayImageList.push({url: res, name: '图片'})
-                    });
-                }
-            });
-        },
-        // 删除上传的效果展示图片
-        handleRemoveDisplayImageList(index) {
-            this.formData.displayImageList.splice(index, 1);
-            this.displayImageList.splice(index, 1);
-        },
-
-
-        // 上传图片
-        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();
-                });
-            });
-        },
-
-        // 初始化问题表单个数
-        resetParamsListLimit() {
-            for (let i = 0; i < this.paramsMinLimit; i++) {
-                this.formData.paramList.push({
-                    name: '',
-                    content: ''
-                });
-            }
-        },
-        // 移除参数
-        handleRemoveParams(params) {
-            console.log(params);
-            this.formData.paramList.splice(params.index, 1);
-        },
-        // 添加参数
-        handleAddParams() {
-            this.formData.paramList.push({
-                name: '',
-                content: ''
-            });
-            this.registerForm(this.formData, this.rules);
-        },
-
-
-        // 初始化问题表单个数
-        resetQuestionListLimit() {
-            for (let i = 0; i < this.questionMinLimit; i++) {
-                this.formData.questionList.push({
-                    question: '',
-                    answer: '',
-                });
-            }
-        },
-        // 移除问题
-        handleRemoveQuestion(question) {
-            this.formData.questionList.splice(question.index, 1);
-        },
-        // 添加问题
-        handleAddQuestion() {
-            this.formData.questionList.push({
-                question: '',
-                answer: '',
-            });
-            this.registerForm(this.formData, this.rules);
-        },
-    }
-});

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

@@ -155,6 +155,12 @@ const app = new Vue({
             return []
         },
     },
+
+    mounted: function mounted() {
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    },
+
     created() {
         this.getTypeList();
         this.watchArrayStatus(['paramList', 'questionList', 'authImageList', 'displayImageList']);
@@ -174,7 +180,10 @@ const app = new Vue({
         handleSave() {
             this.$refs.ruleForm.validate(valide => {
                 console.log(valide);
-                if (!valide) return;
+                if (!valide) {
+                    this.socrllToErrorInput()
+                    return
+                }
                 this.saveFormData()
             })
         },
@@ -417,6 +426,17 @@ const app = new Vue({
                 }
             })
         },
+
+        // 滚动到必填位置
+        socrllToErrorInput(){
+            this.$nextTick(() => {
+                const scrollTop = $('.el-form-item__error').eq(0).parent().siblings('.el-form-item__label').offset().top
+                $('body,html').animate({
+                    scrollTop: scrollTop - $('#globalHead').height() -  40
+                }, 800)
+            })
+        }
+
     },
 })
 

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

@@ -1,205 +0,0 @@
-const validFormMixin = {
-    data: {
-        validMessage: {}
-    },
-    methods: {
-        // 注册验证表单
-        registerForm: function registerForm(model, rules) {
-            var _this = this;
-
-            var _loop = function _loop(key) {
-                // 初始化验证信息
-                _this.$set(_this.validMessage, key, {
-                    valid: true,
-                    message: ''
-                });
-
-                rules[key].forEach(function (rule) {
-                    if (Array.isArray(rule.trigger)) {
-                        _this.registerTrigger(key, rule.trigger, model, rules);
-                    } else if (typeof rule.trigger === 'string') {
-                        _this.registerTrigger(key, [rule.trigger], model, rules);
-                    }
-                });
-            };
-
-            for (var key in rules) {
-                _loop(key);
-            }
-        },
-
-        // 验证所有表单信息
-        validFormData: function validFormData(model, rules) {
-            for (var key in model) {
-                this.validation(key, model, rules);
-            }
-            for (var _key in this.validMessage) {
-                if (!this.validMessage[_key].valid) {
-                    return Promise.reject(false);
-                }
-            }
-            return Promise.resolve(true);
-        },
-
-        // 绑定事件监听
-        registerTrigger: function registerTrigger(key, trigger, model, rules) {
-            var _this2 = this;
-            this.$nextTick(function () {
-                trigger.forEach(function (item) {
-                    // 如果是change 则使用vue中的watch进行数据变化的监听
-                    if (item === 'change') {
-                        _this2.$watch(function () {
-                            return model[key];
-                        }, function (nVal, oVal) {
-                            _this2.validation(key, model, rules);
-                            console.log('valid change')
-                        });
-                    } else {
-                        _this2.$nextTick(function(){
-                            var element = document.querySelector('[props="' + key + '"]');
-                            if (!element) return;
-                            var validControl = element.querySelectorAll('.valid-control');
-                            validControl.forEach(function (el, index) {
-                                el.addEventListener(item, function () {
-                                    _this2.validation(key, model, rules);
-                                    console.log('valid blur')
-                                });
-                            });
-                        })
-                    }
-                });
-            });
-        },
-
-        // 验证
-        validation: function validation(key, model, rules) {
-            var _this3 = this;
-            rules[key].forEach(function (rule) {
-                if (rule.type === 'string') {
-                    var validValue = model[key];
-                    _this3.validString(key, rule, validValue);
-                }
-                if (rule.type === 'number') {
-                    var validValue = parseFloat(model[key]);
-                    _this3.validNumber(key, rule, validValue);
-                }
-                if (rule.type === 'array'){
-                    _this3.validArray(key, rule ,model[key]);
-                }
-            });
-        },
-
-        // 验证数组
-        validArray: function validArray(key, rule ,validValue){
-            const validKeys = rule.valid || [];
-            let flag = false;
-            if(validKeys.length > 0){
-                flag = validValue.every(function (item) {
-                    let result = true;
-                    validKeys.forEach(function (key) {
-                        if (item[key] === '') {
-                            result = false
-                        }
-                    });
-                    return result
-                });
-            }else{
-                flag = validValue.length > 0
-            }
-
-            if(!flag) {
-                this.$set(this.validMessage, key, {
-                    valid: false,
-                    message: rule.message
-                });
-                return;
-            }
-            this.$set(this.validMessage, key, {
-                valid: true,
-                message: ''
-            });
-        },
-
-        // 验证字符串类型
-        validString: function validString(key, rule, validValue) {
-            if(!validValue) validValue = '';
-
-
-            if (rule.minLength && validValue.length < rule.minLength) {
-                this.$set(this.validMessage, key, {
-                    valid: false,
-                    message: rule.message
-                });
-                return;
-            }
-
-            if (rule.maxLength && validValue.length > rule.maxLength) {
-                this.$set(this.validMessage, key, {
-                    valid: false,
-                    message: rule.message
-                });
-                return;
-            }
-
-            if (rule.required && validValue.length <= 0) {
-                this.$set(this.validMessage, key, {
-                    valid: false,
-                    message: rule.message
-                });
-                return;
-            }
-
-            // 正则验证
-            // if(rule.pattern){
-            //     console.log('正则表达式, ', rule.pattern.reg);
-            //     console.log('验证字符串, ', validValue,' ', typeof validValue);
-            //     const valide = rule.pattern.reg.test(validValue);
-            //     console.log('验证结果, ', valide);
-            //     if (!valide) {
-            //         this.$set(this.validMessage, key, {
-            //             valid: false,
-            //             message: rule.pattern.regMessage
-            //         });
-            //         return;
-            //     }
-            // }
-
-
-            this.$set(this.validMessage, key, {
-                valid: true,
-                message: ''
-            });
-        },
-
-        // 验证数字类型
-        validNumber: function validNumber(key, rule, validValue) {
-            validValue = parseFloat(validValue);
-
-            if (rule.min && validValue < rule.min) {
-                this.$set(this.validMessage, key, {
-                    valid: false,
-                    message: rule.message
-                });
-                return;
-            }
-            if (rule.max && validValue > rule.max) {
-                this.$set(this.validMessage, key, {
-                    valid: false,
-                    message: rule.message
-                });
-                return;
-            }
-            if (rule.required && typeof validValue !== 'number') {
-                this.$set(this.validMessage, key, {
-                    valid: false,
-                    message: rule.message
-                });
-                return;
-            }
-            this.$set(this.validMessage, key, {
-                valid: true,
-                message: ''
-            });
-        }
-    },
-};

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

@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<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>
-    <template th:replace="components/head-link"></template>
-    <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/encyclopedia/form-component-style.css(v=${version})}" rel="stylesheet" type="text/css">
-    <!--  编辑页面样式  -->
-    <link th:href="@{/css/supplier-center/encyclopedia/edit-page.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<input type="hidden" th:value="${coreServer}" id="coreServer">
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 我的采美 -->
-<div id="productEdit" class="product-edit">
-    <div class="navLayout" v-cloak>
-        <div class="crumbs" v-if="isPC">
-            <span>我的采美</span>
-            <span>&gt;</span>
-            <span>百科文库</span>
-            <span>&gt;</span>
-            <span>添加产品百科</span>
-        </div>
-        <div class="wrap clear">
-            <!--左侧导航-->
-            <template th:replace="supplier-center/components/tableft"></template>
-            <div class="right-box right">
-                <div class="row">
-                    <div class="top-tip">温馨提示：发布百科文章有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率<br />发布并且审核通过后，可在采美百科搜索您的百科文章</div>
-                    <!-- 带验证的表单 -->
-                    <form class="valid-form">
-                        <h2><em>*</em>产品简述</h2>
-                        <!-- 产品名称 -->
-                        <div class="form-item" required props="name">
-                            <div class="form-label"><em>*</em><span>产品名称</span></div>
-                            <input type="text" class="cm input max border valid-control" placeholder="请输入产品名称" v-model="formData.name"/>
-                            <div class="valid-message" v-if="!validMessage['name'].valid">{{ validMessage['name'].message }}</div>
-                        </div>
-                        <!-- 产品别名 -->
-                        <div class="form-item" required props="alias">
-                            <div class="form-label"><em>*</em><span>产品别名</span></div>
-                            <input type="text" class="cm input max border valid-control" placeholder="请输入英文名或其他名称" v-model="formData.alias"/>
-                            <div class="valid-message" v-if="!validMessage['alias'].valid">{{ validMessage['alias'].message }}</div>
-                        </div>
-                        <!-- 产品概述 -->
-                        <div class="form-item" required props="discription">
-                            <div class="form-label"><em>*</em><span>产品概述</span></div>
-                            <textarea class="cm textarea border max no-resize valid-control" rows="3" v-model="formData.discription"></textarea>
-                            <div class="valid-message" v-if="!validMessage['discription'].valid">{{ validMessage['discription'].message }}</div>
-                        </div>
-                        <!-- 产品图片 -->
-                        <div class="form-item" required props="image">
-                            <div class="form-label"><em>*</em><span>产品图片</span></div>
-                            <cm-upload-image @change="handleUploadProductImage" @remove="handleRemoveProductImage" :img-list="imageList"></cm-upload-image>
-                            <div class="valid-message" v-if="!validMessage['image'].valid">{{ validMessage['image'].message }}</div>
-                        </div>
-                        <h2><em>*</em>产品参数</h2>
-                        <div class="form-item" required props="paramList">
-                            <cm-input-group
-                                    :list="formData.paramList"
-                                    :placeholder-list="paramsPlaceholderList"
-                                    :min-limit="paramsMinLimit"
-                                    :key-map="paramskeyMap"
-                                    add-text = '添加一条'
-                                    @remove="handleRemoveParams"
-                                    @add="handleAddParams"
-                            ></cm-input-group>
-                            <div class="valid-message" v-if="!validMessage['paramList'].valid">{{ validMessage['paramList'].message }}</div>
-                        </div>
-                        <h2><em>*</em>产品优点</h2>
-                        <div class="form-item" required props="advantage">
-                            <cm-editor v-model="formData.advantage" :text="formData.advantage"></cm-editor>
-                            <div class="valid-message" v-if="!validMessage['advantage'].valid">{{ validMessage['advantage'].message }}</div>
-                        </div>
-                        <h2><em>*</em>产品缺点</h2>
-                        <div class="form-item" required props="disadvantage">
-                            <cm-editor v-model="formData.disadvantage" :text="formData.disadvantage"></cm-editor>
-                            <div class="valid-message" v-if="!validMessage['disadvantage'].valid">{{ validMessage['disadvantage'].message }}</div>
-                        </div>
-                        <h2><em>*</em>产品原理</h2>
-                        <div class="form-item" required props="principle">
-                            <cm-editor v-model="formData.principle" :text="formData.principle"></cm-editor>
-                            <div class="valid-message" v-if="!validMessage['principle'].valid">{{ validMessage['principle'].message }}</div>
-                        </div>
-                        <h2><em>*</em>产品档案</h2>
-                        <!-- 品牌 -->
-                        <div class="form-item" required props="brand">
-                            <div class="form-label"><em>*</em><span>品牌</span></div>
-                            <input type="text" class="cm input max border valid-control" placeholder="请输入品牌" v-model="formData.brand"/>
-                            <div class="valid-message" v-if="!validMessage['brand'].valid">{{ validMessage['brand'].message }}</div>
-                        </div>
-                        <!-- 产地 -->
-                        <div class="form-item" required props="producePlace">
-                            <div class="form-label"><em>*</em><span>产地</span></div>
-                            <input type="text" class="cm input max border valid-control" placeholder="请输入产地" v-model="formData.producePlace"/>
-                            <div class="valid-message" v-if="!validMessage['producePlace'].valid">{{ validMessage['producePlace'].message }}</div>
-                        </div>
-                        <!-- 上市时间 -->
-                        <div class="form-item" required props="marketTime">
-                            <div class="form-label"><em>*</em><span>上市时间</span></div>
-                            <input type="date" class="cm input max border valid-control" placeholder="请选择上市时间" v-model="formData.marketTime"/>
-                            <div class="valid-message" v-if="!validMessage['marketTime'].valid">{{ validMessage['marketTime'].message }}</div>
-                        </div>
-                        <!-- 公司/厂商 -->
-                        <div class="form-item" required props="company">
-                            <div class="form-label"><em>*</em><span>公司/厂商</span></div>
-                            <input type="text" class="cm input max border valid-control" placeholder="请输入公司/厂商" v-model="formData.company"/>
-                            <div class="valid-message" v-if="!validMessage['company'].valid">{{ validMessage['company'].message }}</div>
-                        </div>
-                        <!-- NMPA认证时间 -->
-                        <div class="form-item" required props="nmpaTime">
-                            <div class="form-label"><em>*</em><span>NMPA认证时间</span></div>
-                            <input type="date" class="cm input max border valid-control" placeholder="请选择NMPA认证时间" v-model="formData.nmpaTime"/>
-                            <div class="valid-message" v-if="!validMessage['nmpaTime'].valid">{{ validMessage['nmpaTime'].message }}</div>
-                        </div>
-                        <!-- 产品认证 -->
-                        <div class="form-item" required props="authImageList">
-                            <div class="form-label"><em>*</em><span>产品认证</span></div>
-                            <cm-upload-image @change="handleUploadAuthImage" @remove="handleRemoveAuthImage" :multiple="true" :img-list="authImageList"></cm-upload-image>
-                            <div class="valid-message" v-if="!validMessage['authImageList'].valid">{{ validMessage['authImageList'].message }}</div>
-                        </div>
-                        <h2><em>*</em>适应人群</h2>
-                        <div class="form-item" required props="adaptiveMan">
-                            <cm-editor v-model="formData.adaptiveMan" :text="formData.adaptiveMan"></cm-editor>
-                            <div class="valid-message" v-if="!validMessage['adaptiveMan'].valid">{{ validMessage['adaptiveMan'].message }}</div>
-                        </div>
-                        <h2><em>*</em>不适应人群</h2>
-                        <div class="form-item" required props="unAdaptiveMan">
-                            <cm-editor v-model="formData.unAdaptiveMan" :text="formData.unAdaptiveMan"></cm-editor>
-                            <div class="valid-message" v-if="!validMessage['unAdaptiveMan'].valid">{{ validMessage['unAdaptiveMan'].message }}</div>
-                        </div>
-                        <h2><em>*</em>术前术后</h2>
-                        <div class="form-item" required props="aroundOperation">
-                            <cm-editor v-model="formData.aroundOperation" :text="formData.aroundOperation"></cm-editor>
-                            <div class="valid-message" v-if="!validMessage['aroundOperation'].valid">{{ validMessage['aroundOperation'].message }}</div>
-                        </div>
-                        <!-- 效果展示 -->
-                        <h2><em>*</em>效果展示</h2>
-                        <div class="form-item" required props="displayImageList">
-                            <cm-upload-image @change="handleUploadDisplayImageList" @remove="handleRemoveDisplayImageList" :multiple="true" :img-list="displayImageList"></cm-upload-image>
-                            <div class="valid-message" v-if="!validMessage['displayImageList'].valid">{{ validMessage['displayImageList'].message }}</div>
-                        </div>
-
-                        <h2><em>*</em>常见问题</h2>
-                        <div class="form-item" required props="questionList">
-                            <cm-question-group
-                                    :list="formData.questionList"
-                                    :placeholder-list="questionPlaceHolderList"
-                                    :min-limit="questionMinLimit"
-                                    add-text='添加一条'
-                                    :key-map="questionkeyMap"
-                                    @remove="handleRemoveQuestion"
-                                    @add="handleAddQuestion"
-                            ></cm-question-group>
-                            <div class="valid-message" v-if="!validMessage['questionList'].valid">{{ validMessage['questionList'].message }}</div>
-                        </div>
-                        <!-- 产品类别 -->
-                        <div class="form-item" required>
-                            <div class="form-label"><em>*</em><span>产品类别</span></div>
-                            <cm-select v-model="formData.typeId" placeholder="请选择" class="cm-select">
-                                <cm-option v-for="(item, index) in typeList" :key="index" :label="item.typeName" :value="item.typeId"></cm-option>
-                            </cm-select>
-                            <div class="valid-message" v-if="!validMessage['typeId'].valid">{{ validMessage['typeId'].message }}</div>
-                        </div>
-                        <!-- 产品状态 -->
-                        <div class="form-item vertical" required props="status">
-                            <div class="form-label"><em>*</em><span>产品状态</span></div>
-                            <div class="form-group">
-                                <cm-radio class="cm-radio" :label="1" v-model="formData.status">启用</cm-radio>
-                                <cm-radio class="cm-radio" :label="0" v-model="formData.status">停用</cm-radio>
-                            </div>
-                            <div class="valid-message" v-if="!validMessage['status'].valid">{{ validMessage['status'].message }}</div>
-                        </div>
-
-                        <div class="form-item vertical btns">
-                            <button class="btn break" @click.prevent="handleBack">返回</button>
-                            <button class="btn submit" @click.prevent="handleSave">保存</button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- 引入底部 -->
-<template th:replace="components/footer"></template>
-<template th:replace="components/foot-link"></template>
-<!-- 引入vue组件 -->
-<template th:replace="supplier-center/encyclopedia/components/form-component"></template>
-
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/form-component.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/validFormMixin.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/product-edit.js(v=${version})}"></script>
-</body>
-</html>