解决冲突
This commit is contained in:
125
src/components/MarkdownEdit/index.vue
Normal file
125
src/components/MarkdownEdit/index.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div style="border: 1px solid #ccc">
|
||||
<!-- 工具栏 -->
|
||||
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
|
||||
<!-- 编辑器 -->
|
||||
<Editor :style="`height: ${props.heightNumber}px; overflow-y: hidden`" v-model="editorVal" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { compressImage } from "@/utils/tools.js";
|
||||
import "@wangeditor/editor/dist/css/style.css";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
shallowRef,
|
||||
onBeforeUnmount,
|
||||
defineEmits,
|
||||
defineProps,
|
||||
watch
|
||||
} from "vue";
|
||||
const props = defineProps({
|
||||
// 编辑器内容
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
markitVal: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入内容。。。。"
|
||||
},
|
||||
heightNumber: {
|
||||
type: Number,
|
||||
default: 500
|
||||
}
|
||||
});
|
||||
const editorVal = ref("");
|
||||
const editorRef = shallowRef();
|
||||
const mode = "default";
|
||||
const valueHtml = ref(""); //内容
|
||||
//工具配置
|
||||
const toolbarConfig = {
|
||||
excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具,引用和代码块
|
||||
};
|
||||
const emits = defineEmits(["update:modelValue", "changeFn"]);
|
||||
//编辑器配置
|
||||
const editorConfig = {
|
||||
withCredentials: true, //允许跨域
|
||||
placeholder: props.placeholder, //提示语
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
// 自定义上传图片
|
||||
async customUpload(file, insertFn) {
|
||||
let fileBlob = await compressImage(file);
|
||||
let fileData = new File([fileBlob], fileBlob.name, {
|
||||
type: fileBlob.type
|
||||
});
|
||||
if (fileData.size > 2 * 1024 * 1024) {
|
||||
ElMessage({
|
||||
message: "图片超过2MB",
|
||||
type: "success"
|
||||
});
|
||||
} else {
|
||||
await uploadFn(fileData, insertFn);
|
||||
}
|
||||
}
|
||||
// server: "/mosty-api/mosty-base/minio/image/upload",
|
||||
// base64LimitSize: 10000 * 1024,
|
||||
},
|
||||
uploadVideo: {
|
||||
// 自定义上传视频
|
||||
async customUpload(file, insertFn) {
|
||||
await uploadFn(file, insertFn);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
watch(
|
||||
[() => props.markitVal, () => editorRef.value],
|
||||
(val) => {
|
||||
// if (val) editorRef.value = val;
|
||||
if ((val[0] && val[1]) || val[0] == "") {
|
||||
editorVal.value = val[0];
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
const uploadFn = (file, insertFn) => {
|
||||
let param = new FormData();
|
||||
param.append("file", file);
|
||||
qcckPost(param, "/mosty-base/minio/image/upload").then((res) => {
|
||||
insertFn(res);
|
||||
});
|
||||
};
|
||||
//编辑器创建成功
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor;
|
||||
};
|
||||
//内容发生变化
|
||||
const handChange = (editor) => {
|
||||
// console.log(editor.getHtml(),'editor.getText()');
|
||||
// 判断是否是一个空段落,是空就传空文本
|
||||
if (editor.isEmpty()) {
|
||||
emits("changeFn", editor.getText());
|
||||
} else {
|
||||
emits("changeFn", editor.getHtml());
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
if (editor) editor.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,12 +1,21 @@
|
||||
<template>
|
||||
<div class="form-item-box" :style="{ width: width }">
|
||||
<el-date-picker style="width:100%" v-model="modelValue" type="date" v-bind="$attrs" @change="onInput" :placeholder="placeholder" :value-format="props.format"/>
|
||||
<el-date-picker
|
||||
style="width:100%"
|
||||
v-model="localModelValue"
|
||||
:type="props.type"
|
||||
v-bind="$attrs"
|
||||
@change="onInput"
|
||||
:placeholder="placeholder"
|
||||
:value-format="props.format"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { COMPONENT_WIDTH } from "@/constant";
|
||||
import { ref, defineProps, defineEmits, defineExpose } from "vue";
|
||||
import { ref, defineProps, defineEmits, defineExpose, computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
//获取组件传值
|
||||
placeholder: {
|
||||
@ -25,12 +34,21 @@ const props = defineProps({
|
||||
default: COMPONENT_WIDTH,
|
||||
type: String
|
||||
},
|
||||
|
||||
type: {
|
||||
default: "date",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
|
||||
// 使用计算属性处理双向绑定
|
||||
const localModelValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emits("update:modelValue", value)
|
||||
});
|
||||
|
||||
const onInput = (e) => {
|
||||
emits("update:modelValue", e);
|
||||
};
|
||||
</script>
|
||||
|
||||
</script>
|
||||
@ -83,6 +83,10 @@ const props = defineProps({
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const elform = ref();
|
||||
@ -103,18 +107,25 @@ const reset = () => {
|
||||
elform.value.resetFields()
|
||||
}
|
||||
|
||||
// 修改这里的watch逻辑,避免无限循环
|
||||
let isUpdatingFromProps = false;
|
||||
|
||||
watch(() => listQuery.value, (newVal) => {
|
||||
if (newVal) emits("update:modelValue", newVal);
|
||||
}, { immediate: true, deep: true });
|
||||
if (newVal && !isUpdatingFromProps) {
|
||||
emits("update:modelValue", newVal);
|
||||
}
|
||||
}, { deep: true });
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
// 只有在新值确实变化时才更新(避免空值覆盖)
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
isUpdatingFromProps = true;
|
||||
listQuery.value = { ...newVal };
|
||||
setTimeout(() => {
|
||||
isUpdatingFromProps = false;
|
||||
}, 0);
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
|
||||
|
||||
defineExpose({ submit, reset });
|
||||
</script>
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<div style="width: 100%" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
|
||||
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
@selection-change="handleSelectionChange"
|
||||
@current-change="handleCurrentChange"
|
||||
@row-click="singleElection"
|
||||
:row-key="getConfiger.rowKey"
|
||||
:border="getConfiger.border"
|
||||
:default-expand-all="getConfiger.defaultExpandAll"
|
||||
@ -21,23 +19,7 @@
|
||||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||||
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px'}"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
v-if="getConfiger.showSelectType === 'checkBox'"
|
||||
/>
|
||||
<el-table-column
|
||||
width="55"
|
||||
v-else-if="getConfiger.showSelectType === 'radio'"
|
||||
#default="{ row }"
|
||||
>
|
||||
<el-radio
|
||||
class="radio"
|
||||
v-model="getConfiger.radioChoose"
|
||||
:label="row[getConfiger.rowKey]"
|
||||
> </el-radio
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
@ -148,19 +130,16 @@ onMounted(() => {
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const handleSelectionChange = (val) => {
|
||||
emit("chooseData", val);
|
||||
};
|
||||
// 单选的时候选择的数据
|
||||
const handleCurrentChange = (val) => {
|
||||
currentRow.value = val;
|
||||
emit("chooseData", val);
|
||||
};
|
||||
const singleElection = (val) => {
|
||||
if (getConfiger.showSelectType === "radio") {
|
||||
getConfiger.radioChoose = val[getConfiger.rowKey];
|
||||
if(getConfiger.showSelectType === 'radio' && val.length > 1){
|
||||
let del_row = val.shift();
|
||||
multipleTableRef.value.toggleRowSelection(del_row, false);
|
||||
currentRow.value = val;
|
||||
emit("chooseData", val);
|
||||
}else{
|
||||
emit("chooseData", val);
|
||||
}
|
||||
};
|
||||
|
||||
// 懒加载数据的方法
|
||||
const load = (date, treeNode, resolve) => {
|
||||
setTimeout(() => {
|
||||
@ -184,25 +163,14 @@ const load = (date, treeNode, resolve) => {
|
||||
function setDefaultChoose() {
|
||||
nextTick(() => {
|
||||
// 多选的默认选中
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "checkBox"
|
||||
) {
|
||||
if ( props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox" ) {
|
||||
props.tableData.forEach((item) => {
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys.findIndex(
|
||||
(v) => v === item[props.tableConfiger.rowKey]
|
||||
) > -1
|
||||
) {
|
||||
if ( props.tableConfiger.defaultSelectKeys.findIndex( (v) => v === item[props.tableConfiger.rowKey] ) > -1) {
|
||||
multipleTableRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
// 单选的默认选中
|
||||
} else if (
|
||||
props.tableConfiger.defaultSelectKeys &&
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "radio"
|
||||
) {
|
||||
} else if ( props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio" ) {
|
||||
getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
|
||||
}
|
||||
});
|
||||
@ -212,3 +180,12 @@ function setDefaultChoose() {
|
||||
<style lang = "scss">
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
114
src/components/ypModel/index.vue
Normal file
114
src/components/ypModel/index.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<el-dialog v-model="modelValue" center width="1000px" :destroy-on-close="true" title="报告模板" @close="close" :close-on-click-modal="false">
|
||||
<div class="cntBox">
|
||||
<!-- 工具栏 -->
|
||||
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
|
||||
<!-- 编辑器 -->
|
||||
<Editor :style="`height: ${props.heightNumber}px; overflow-y: hidden`" v-model="textContent" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary">暂存</el-button>
|
||||
<el-button type="primary">下载</el-button>
|
||||
<el-button type="primary" @click="close">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { compressImage } from "@/utils/tools.js";
|
||||
import "@wangeditor/editor/dist/css/style.css";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import { ref, shallowRef, onBeforeUnmount, defineEmits, defineProps, watch } from "vue";
|
||||
const props = defineProps({
|
||||
modelValue:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
// 编辑器内容
|
||||
textContent: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入内容。。。。"
|
||||
},
|
||||
heightNumber: {
|
||||
type: Number,
|
||||
default: 448
|
||||
}
|
||||
});
|
||||
const editorRef = shallowRef();
|
||||
const mode = "default";
|
||||
//工具配置
|
||||
const toolbarConfig = {
|
||||
excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具,引用和代码块
|
||||
};
|
||||
const emits = defineEmits(["update:textContent", "changeFn"]);
|
||||
//编辑器配置
|
||||
const editorConfig = {
|
||||
withCredentials: true, //允许跨域
|
||||
placeholder: props.placeholder, //提示语
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
// 自定义上传图片
|
||||
async customUpload(file, insertFn) {
|
||||
let fileBlob = await compressImage(file);
|
||||
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
|
||||
if (fileData.size > 2 * 1024 * 1024) {
|
||||
ElMessage({ message: "图片超过2MB", type: "success" });
|
||||
} else {
|
||||
await uploadFn(fileData, insertFn);
|
||||
}
|
||||
}
|
||||
},
|
||||
uploadVideo: {
|
||||
// 自定义上传视频
|
||||
async customUpload(file, insertFn) {
|
||||
await uploadFn(file, insertFn);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const uploadFn = (file, insertFn) => {
|
||||
let param = new FormData();
|
||||
param.append("file", file);
|
||||
qcckPost(param, "/mosty-base/minio/image/upload").then((res) => {
|
||||
insertFn(res);
|
||||
});
|
||||
};
|
||||
//编辑器创建成功
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor;
|
||||
};
|
||||
//内容发生变化
|
||||
const handChange = (editor) => {
|
||||
console.log(editor.getHtml(),'====editor.getHtml()');
|
||||
// 判断是否是一个空段落,是空就传空文本
|
||||
if (editor.isEmpty()) {
|
||||
emits("changeFn", editor.getText());
|
||||
} else {
|
||||
emits("changeFn", editor.getHtml());
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
if (editor) editor.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cntBox{
|
||||
height: 60vh;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
border: 1px dashed #e9e9e9;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user