解决冲突

This commit is contained in:
13684185576
2025-07-31 11:39:51 +08:00
98 changed files with 55172 additions and 809 deletions

View 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>

View File

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

View File

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

View File

@ -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]"
>&nbsp;</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>

View 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>