Browse Source

bugfix: 8466

reaper 4 năm trước cách đây
mục cha
commit
cbbcd63a14

+ 2 - 2
src/components/knowledgeExtra/AddAssess/index.vue

@@ -328,12 +328,12 @@ it .ql-editor,
       />
     </el-form>
     <!-- 暂时用的按钮 -->
-    <!-- <button
+    <button
       style="position: fixed; bottom: 20px; right: 20px; font-size: 16px"
       @click="assessCommitTest"
     >
       暂时用的按钮
-    </button> -->
+    </button>
   </div>
 </template>
 

+ 144 - 67
src/components/knowledgeExtra/DevInfo.vue

@@ -14,12 +14,19 @@
                 <el-option label="是" :value="1"></el-option>
             </el-select>
     </el-form-item>-->
-    <el-form-item label="段落标题:" prop="title" label-width="160px" class="is-required">
+    <el-form-item
+      label="段落标题:"
+      prop="title"
+      label-width="160px"
+      class="is-required"
+    >
       <el-input v-model="data.title"></el-input>
     </el-form-item>
     <el-form-item label="内容类型:" prop="position" label-width="160px">
       <el-checkbox-group v-model="data.position">
-        <el-checkbox v-for="it in positions" :key="it.key" :label="it.key">{{it.name}}</el-checkbox>
+        <el-checkbox v-for="it in positions" :key="it.key" :label="it.key">{{
+          it.name
+        }}</el-checkbox>
       </el-checkbox-group>
     </el-form-item>
     <el-form-item label="内容" prop="content" label-width="160px" ref="editor">
@@ -30,41 +37,89 @@
         ref="quillEditor"
       ></quillEditor>
     </el-form-item>
-    <div class="order-btn">
-      <a v-if="index!==0" :class="index===total-1?'order-spc':'order-up'" @click="reOrder(1)">上升</a>
-      <a v-if="index!==total-1" :class="index===0?'order-spc':'order-down'" @click="reOrder(0)">下降</a>
+    <!-- <div class="order-btn">
+      <a
+        v-if="index !== 0"
+        :class="index === total - 1 ? 'order-spc' : 'order-up'"
+        @click="reOrder(1)"
+        >上升</a
+      >
+      <a
+        v-if="index !== total - 1"
+        :class="index === 0 ? 'order-spc' : 'order-down'"
+        @click="reOrder(0)"
+        >下降</a
+      >
+    </div> -->
+    <div class="move_btn">
+      <div
+        v-if="index !== 0"
+        @mouseover="moveTopHover = true"
+        @mouseout="moveTopHover = false"
+        title="上升"
+        @click="reOrder(1)"
+      >
+        <img
+          :src="
+            moveTopHover
+              ? require('@/images/icon_hover_top.png')
+              : require('@/images/icon_default_top.png')
+          "
+          alt=""
+        />
+      </div>
+      <div
+        v-if="index !== total - 1"
+        @mouseover="moveBottomHover = true"
+        @mouseout="moveBottomHover = false"
+        title="下降"
+        @click="reOrder(0)"
+      >
+        <img
+          :src="
+            moveBottomHover
+              ? require('@/images/icon_hover_down.png')
+              : require('@/images/icon_default_down.png')
+          "
+          alt=""
+        />
+      </div>
     </div>
     <el-form-item label-width="160px" class="btns">
       <el-button size="small" @click="addEmit">添加段落</el-button>
-      <el-button size="small" @click="delEmit" type="info">删除本段落</el-button>
+      <el-button size="small" @click="delEmit" type="info"
+        >删除本段落</el-button
+      >
     </el-form-item>
   </el-form>
 </template>
 
 <script>
-import 'quill/dist/quill.core.css';
-import 'quill/dist/quill.snow.css';
-import 'quill/dist/quill.bubble.css';
-import { quillEditor, Quill } from 'vue-quill-editor';
-import config from '@api/config';
-import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module';
-Quill.register('modules/ImageExtend', ImageExtend);
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { quillEditor, Quill } from "vue-quill-editor";
+import config from "@api/config";
+import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
+Quill.register("modules/ImageExtend", ImageExtend);
 export default {
-  props: ['data', 'index', 'isEdit', 'isCopy', 'total', 'showType'],
-  name: 'DevInfo',
+  props: ["data", "index", "isEdit", "isCopy", "total", "showType"],
+  name: "DevInfo",
   components: {
     quillEditor
   },
   data() {
     return {
+      moveTopHover: false,
+      moveBottomHover: false,
       toolbars: [
         [
-          ['bold', 'underline', 'strike'],
-          [{ list: 'ordered' }, { list: 'bullet' }],
-          [{ script: 'sub' }, { script: 'super' }],
+          ["bold", "underline", "strike"],
+          [{ list: "ordered" }, { list: "bullet" }],
+          [{ script: "sub" }, { script: "super" }],
           [{ color: [] }, { background: [] }],
           [{ align: [] }],
-          ['image']
+          ["image"]
         ]
       ],
       toolbarMode: 0,
@@ -72,24 +127,24 @@ export default {
         modules: {
           ImageExtend: {
             loading: true,
-            name: 'upfile',
+            name: "upfile",
             size: 1,
             sizeError: () => {
               this.$message({
                 showClose: true,
-                message: '请上传 1M 以内的图片!',
-                type: 'warning'
+                message: "请上传 1M 以内的图片!",
+                type: "warning"
               });
             },
             action: config.urls.promptServer,
-            response: res => {
-              if (res.code == '0') {
+            response: (res) => {
+              if (res.code == "0") {
                 return config.imgHost + res.data.url;
               } else {
                 this.$message({
                   showClose: true,
                   message: res.msg,
-                  type: 'warning'
+                  type: "warning"
                 });
               }
             }
@@ -97,7 +152,7 @@ export default {
           toolbar: {
             container: container,
             handlers: {
-              image: function() {
+              image: function () {
                 QuillWatch.emit(this.quill.id);
               }
             }
@@ -113,103 +168,103 @@ export default {
     };
   },
   watch: {
-    'data.content': function() {
-      if (this.data.content !== '') {
+    "data.content": function () {
+      if (this.data.content !== "") {
         this.$refs.editor && this.$refs.editor.clearValidate(); // 清除校验
       }
-      if (this.data.content === '') {
+      if (this.data.content === "") {
         // console.log('内容为空');
-        this.$refs['form'].validateField('content'); // 手动校验
+        this.$refs["form"].validateField("content"); // 手动校验
       }
       this.data.text = this.$refs.quillEditor.quill.root.innerText;
-    },
+    }
   },
   created() {
     // console.log(this.showType, 'showType','需要显示的类型');
-    this.editorOption.modules.toolbar.container = this.toolbars[
-      this.toolbarMode
-    ];
+    this.editorOption.modules.toolbar.container =
+      this.toolbars[this.toolbarMode];
     this.renderPositions();
-    if (this.isEdit||this.isCopy) {
+    if (this.isEdit || this.isCopy) {
       setTimeout(() => {
         this.rules = {
           position: [
-            { required: true, message: '请选择内容类型', trigger: 'change' }
+            { required: true, message: "请选择内容类型", trigger: "change" }
           ],
           title: [
             {
               validator: (rule, value, callback) => {
                 if (!value.trim()) {
-                  callback(new Error('请输入段落标题'));
+                  callback(new Error("请输入段落标题"));
                 } else {
                   callback();
                 }
               },
-              trigger: 'change'
+              trigger: "change"
             },
-            { max: 30, message: '标题名称不能超过30字', trigger: 'change' }
+            { max: 30, message: "标题名称不能超过30字", trigger: "change" }
           ],
           content: [
-            { required: true, message: '请输入段落内容', trigger: 'change' }
+            { required: true, message: "请输入段落内容", trigger: "change" }
           ]
         };
       }, 100);
     } else {
       this.rules = {
         position: [
-          { required: true, message: '请选择内容类型', trigger: 'change' }
+          { required: true, message: "请选择内容类型", trigger: "change" }
         ],
         title: [
           {
             validator: (rule, value, callback) => {
               if (!value.trim()) {
-                callback(new Error('请输入段落标题'));
+                callback(new Error("请输入段落标题"));
               } else {
                 callback();
               }
             },
-            trigger: 'change'
+            trigger: "change"
           },
-          { max: 30, message: '标题名称不能超过30字', trigger: 'change' }
+          { max: 30, message: "标题名称不能超过30字", trigger: "change" }
         ],
         content: [
-          { required: true, message: '请输入段落内容', trigger: 'change' }
+          { required: true, message: "请输入段落内容", trigger: "change" }
         ]
       };
     }
-      setTimeout(()=>{
-          this.filterHiddenPosition();
-      },200)
-  },
-  mounted() {
+    setTimeout(() => {
+      this.filterHiddenPosition();
+    }, 200);
   },
+  mounted() {},
   methods: {
     reOrder(i) {
-      this.$emit('reOrder', i, this.index);
+      this.$emit("reOrder", i, this.index);
     },
     addEmit() {
-      this.$emit('add');
+      this.$emit("add");
     },
     delEmit() {
-      this.$emit('del', this.index);
+      this.$emit("del", this.index);
     },
-    filterHiddenPosition(){
-        const pos = this.data.position;
-        const pArr = this.positions.map((it)=>{return it.key});
-        const pStr = pArr.join(",");
-        const arr=pos.filter((it)=>{
-            return pStr.indexOf(it)>-1;
-        });
-        this.data.position=arr;
+    filterHiddenPosition() {
+      const pos = this.data.position;
+      const pArr = this.positions.map((it) => {
+        return it.key;
+      });
+      const pStr = pArr.join(",");
+      const arr = pos.filter((it) => {
+        return pStr.indexOf(it) > -1;
+      });
+      this.data.position = arr;
     },
     // 渲染内容类型
     renderPositions() {
       //显示位置枚举列表
-      const pos = localStorage.getItem('knowledgeEnumsData');
+      const pos = localStorage.getItem("knowledgeEnumsData");
       let positions = config.contentTypes;
       if (this.showType == 1) {
         // 诊断
-        this.positions = positions.filter(item => item.key !== 2);
+        this.positions = positions.filter((item) => item.key !== 2);
       } else if (
         this.showType == 3 ||
         this.showType == 4 ||
@@ -217,12 +272,17 @@ export default {
         this.showType == 6
       ) {
         // 检验/检查
-        this.positions = positions.filter(item => {
+        this.positions = positions.filter((item) => {
           return item.key <= 2;
         });
-      } else if (this.showType == 2 || this.showType == 7 || this.showType == 8 || this.showType == 9) {
+      } else if (
+        this.showType == 2 ||
+        this.showType == 7 ||
+        this.showType == 8 ||
+        this.showType == 9
+      ) {
         // 药品/手术
-        this.positions = positions.filter(item => item.key === 1);
+        this.positions = positions.filter((item) => item.key === 1);
       } else {
         this.positions = positions;
       }
@@ -295,7 +355,24 @@ it .ql-editor,
 .btns {
   margin-top: 20px;
 }
-
+.move_btn {
+  position: absolute;
+  top: 12px;
+  right: 0;
+  font-size: 14px;
+  margin-left: 10px;
+  display: flex;
+  div {
+    width: 12px;
+    height: 16px;
+    margin-right: 8px;
+    img {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+}
 /deep/ .el-form-item.is-success .el-input__inner,
 .el-form-item.is-success .el-textarea__inner {
   border-color: #c9c9c9 !important;