|
@@ -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;
|