|
@@ -18,7 +18,9 @@
|
|
|
</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.val" :label="it.val">{{it.name}}</el-checkbox>
|
|
|
+ <el-checkbox v-for="it in positions" :key="it.val" :label="it.val">{{
|
|
|
+ it.name
|
|
|
+ }}</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="内容" prop="content" label-width="160px" ref="editor">
|
|
@@ -30,8 +32,18 @@
|
|
|
></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>
|
|
|
+ <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>
|
|
|
<el-form-item label-width="160px" class="btns">
|
|
|
<el-button @click="addEmit">添加段落</el-button>
|
|
@@ -41,122 +53,136 @@
|
|
|
</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 api from '@api/knowledgeLib.js';
|
|
|
-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 api from "@api/knowledgeLib.js";
|
|
|
+import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
|
|
|
+Quill.register("modules/ImageExtend", ImageExtend);
|
|
|
export default {
|
|
|
- props: ['data', 'index', 'isEdit', 'total', 'showType'],
|
|
|
- name: 'MedicineInfoParagraph',
|
|
|
+ props: [
|
|
|
+ "data",
|
|
|
+ "index",
|
|
|
+ "isEdit",
|
|
|
+ "total",
|
|
|
+ "showType",
|
|
|
+ "positionMap",
|
|
|
+ "positionList",
|
|
|
+ ],
|
|
|
+ name: "MedicineInfoParagraph",
|
|
|
components: {
|
|
|
- quillEditor
|
|
|
+ quillEditor,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
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,
|
|
|
editorOption: {
|
|
|
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",
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
toolbar: {
|
|
|
container: container,
|
|
|
handlers: {
|
|
|
- image: function() {
|
|
|
+ image: function () {
|
|
|
QuillWatch.emit(this.quill.id);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
form: {
|
|
|
position: [],
|
|
|
- orderNo: 0
|
|
|
+ orderNo: 0,
|
|
|
},
|
|
|
- positions: [], //位置列表
|
|
|
- rules: {}
|
|
|
+ rules: {},
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ positions: function () {
|
|
|
+ if (this.showType !== -1) {
|
|
|
+ return this.positionMap[this.showType];
|
|
|
+ }
|
|
|
+ return this.positionList || [];
|
|
|
+ },
|
|
|
+ },
|
|
|
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.zskgetDict();
|
|
|
+ this.editorOption.modules.toolbar.container =
|
|
|
+ this.toolbars[this.toolbarMode];
|
|
|
+ // this.zskgetDict();
|
|
|
if (this.isEdit) {
|
|
|
setTimeout(() => {
|
|
|
this.rules = {
|
|
|
position: [
|
|
|
- { required: true, message: '请选择内容类型', trigger: 'change' }
|
|
|
+ { required: true, message: "请选择内容类型", trigger: "change" },
|
|
|
],
|
|
|
title: [
|
|
|
- { required: true, message: '请输入段落标题', trigger: 'change' },
|
|
|
- { max: 30, message: '标题名称不能超过30字', trigger: 'change' }
|
|
|
+ { required: true, message: "请输入段落标题", 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: [
|
|
|
- { required: true, message: '请输入段落标题', trigger: 'change' },
|
|
|
- { max: 30, message: '标题名称不能超过30字', trigger: 'change' }
|
|
|
+ { required: true, message: "请输入段落标题", trigger: "change" },
|
|
|
+ { max: 30, message: "标题名称不能超过30字", trigger: "change" },
|
|
|
],
|
|
|
content: [
|
|
|
- { required: true, message: '请输入段落内容', trigger: 'change' }
|
|
|
- ]
|
|
|
+ { required: true, message: "请输入段落内容", trigger: "change" },
|
|
|
+ ],
|
|
|
};
|
|
|
}
|
|
|
setTimeout(() => {
|
|
@@ -168,54 +194,54 @@ export default {
|
|
|
zskgetDict() {
|
|
|
api
|
|
|
.zskgetDict()
|
|
|
- .then(res => {
|
|
|
- if (res.data.code == '0') {
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code == "0") {
|
|
|
const data = res.data.data;
|
|
|
- this.positions = data['50'];
|
|
|
- this.renderPositions(data['50'], data['51']);
|
|
|
+ this.positions = data["50"];
|
|
|
+ this.renderPositions(data["50"], data["51"]);
|
|
|
}
|
|
|
})
|
|
|
- .catch(error => {
|
|
|
+ .catch((error) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
},
|
|
|
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 => {
|
|
|
+ const pArr = this.positions.map((it) => {
|
|
|
return it.val;
|
|
|
});
|
|
|
- const pStr = pArr.join(',');
|
|
|
- const arr = pos.filter(it => {
|
|
|
+ const pStr = pArr.join(",");
|
|
|
+ const arr = pos.filter((it) => {
|
|
|
return pStr.indexOf(it) > -1;
|
|
|
});
|
|
|
this.data.position = arr;
|
|
|
},
|
|
|
// 渲染内容类型
|
|
|
- renderPositions(data1,data2) {
|
|
|
+ renderPositions(data1, data2) {
|
|
|
//显示位置枚举列表
|
|
|
- if (this.showType>0) {
|
|
|
- data2 = data2.filter(item => item.name == this.showType);
|
|
|
- let val = data2[0].val.split(',');
|
|
|
- this.positions = data1.filter(it => {
|
|
|
- let arr = val.map(v => v);
|
|
|
+ if (this.showType > 0) {
|
|
|
+ data2 = data2.filter((item) => item.name == this.showType);
|
|
|
+ let val = data2[0].val.split(",");
|
|
|
+ this.positions = data1.filter((it) => {
|
|
|
+ let arr = val.map((v) => v);
|
|
|
return arr.includes(it.val);
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|