修改状态字段
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="editor-container">
|
||||
<div ref="editorToolbar"></div>
|
||||
<div ref="editorContent" :style="{ height }"></div>
|
||||
<div class="editor-container" :class="{ 'disabled-editor': disableExceptEmotion }">
|
||||
<div ref="editorToolbar" class="editor-toolbar"></div>
|
||||
<div ref="editorContent" :style="{ height }" class="editor-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -32,6 +32,11 @@ export default defineComponent({
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 是否禁用除表情外的所有功能
|
||||
disableExceptEmotion: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 内容框默认 placeholder
|
||||
placeholder: {
|
||||
type: String,
|
||||
@@ -70,6 +75,11 @@ export default defineComponent({
|
||||
emit('update:modelValue', editor.getHtml());
|
||||
};
|
||||
|
||||
// 即使编辑器只读,也允许表情插入
|
||||
if (props.disableExceptEmotion) {
|
||||
editorConfig.readOnly = false; // 允许编辑,但通过CSS禁用其他功能
|
||||
}
|
||||
|
||||
(<any>editorConfig).MENU_CONF['uploadImage'] = {
|
||||
base64LimitSize: 10 * 1024 * 1024,
|
||||
};
|
||||
@@ -94,7 +104,6 @@ export default defineComponent({
|
||||
|
||||
// 初始化富文本
|
||||
const initWangeditor = () => {
|
||||
// 先销毁旧的编辑器
|
||||
destroyEditor();
|
||||
|
||||
nextTick(() => {
|
||||
@@ -115,6 +124,35 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
state.isInitialized = true;
|
||||
|
||||
// 初始化后应用禁用状态
|
||||
applyDisableState();
|
||||
});
|
||||
};
|
||||
|
||||
// 应用禁用状态
|
||||
const applyDisableState = () => {
|
||||
if (!state.editorToolbar || !props.disableExceptEmotion) return;
|
||||
|
||||
nextTick(() => {
|
||||
const toolbarItems = state.editorToolbar!.querySelectorAll('.w-e-bar-item');
|
||||
toolbarItems.forEach((item: Element) => {
|
||||
const button = item.querySelector('button');
|
||||
if (button) {
|
||||
const dataTitle = button.getAttribute('data-title') || '';
|
||||
const isEmotionButton = dataTitle.includes('表情') || dataTitle.toLowerCase().includes('emotion');
|
||||
|
||||
if (!isEmotionButton) {
|
||||
(item as HTMLElement).style.opacity = '0.5';
|
||||
(item as HTMLElement).style.pointerEvents = 'none';
|
||||
(item as HTMLElement).style.cursor = 'not-allowed';
|
||||
} else {
|
||||
(item as HTMLElement).style.opacity = '1';
|
||||
(item as HTMLElement).style.pointerEvents = 'auto';
|
||||
(item as HTMLElement).style.cursor = 'pointer';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@@ -133,7 +171,6 @@ export default defineComponent({
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
if (state.editor && state.isInitialized) {
|
||||
// 只有当内容确实改变时才更新
|
||||
const currentHtml = state.editor.getHtml();
|
||||
if (currentHtml !== value) {
|
||||
state.editor.setHtml(value || '');
|
||||
@@ -152,9 +189,61 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
|
||||
// 监听禁用除表情外的状态变化
|
||||
watch(
|
||||
() => props.disableExceptEmotion,
|
||||
(disabled) => {
|
||||
if (state.editor && state.isInitialized) {
|
||||
applyDisableState();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 禁用除表情外的所有工具栏按钮 */
|
||||
.disabled-editor :deep(.w-e-bar-item) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* 允许表情按钮正常使用 */
|
||||
.disabled-editor :deep(.w-e-bar-item[data-title*='表情']),
|
||||
.disabled-editor :deep(.w-e-bar-item[data-title*='emotion']) {
|
||||
opacity: 1 !important;
|
||||
cursor: pointer !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
/* 禁用编辑区域的所有操作(除了通过表情插入) */
|
||||
.disabled-editor :deep(.w-e-text-container) {
|
||||
cursor: not-allowed;
|
||||
user-select: text; /* 允许选择文本 */
|
||||
}
|
||||
|
||||
/* 禁用所有菜单项,除了表情相关的 */
|
||||
.disabled-editor :deep(.w-e-menu-tooltip:not([data-title*='表情']):not([data-title*='emotion'])) {
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* 允许表情菜单正常使用 */
|
||||
.disabled-editor :deep(.w-e-menu-tooltip[data-title*='表情']),
|
||||
.disabled-editor :deep(.w-e-menu-tooltip[data-title*='emotion']) {
|
||||
opacity: 1 !important;
|
||||
cursor: pointer !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,8 @@ const service: AxiosInstance = axios.create({
|
||||
|
||||
// 配置新建第二个 axios 实例(新功能服务)
|
||||
const newService: AxiosInstance = axios.create({
|
||||
baseURL: 'http://192.168.3.95:8000/', // 新后端地址
|
||||
// baseURL: 'http://192.168.3.95:8000/', // 新后端地址
|
||||
baseURL: 'http://192.168.3.49:8000/', // 后端地址
|
||||
timeout: 50000, // 50秒超时
|
||||
headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
|
||||
paramsSerializer: {
|
||||
|
||||
@@ -33,12 +33,12 @@
|
||||
</el-icon>
|
||||
新增客服
|
||||
</el-button>
|
||||
<!-- <el-button size="default" class="ml10" @click="handleReset" :disabled="tableData.loading">
|
||||
<el-button size="default" class="ml10" @click="handleReset" :disabled="tableData.loading">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button> -->
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -195,6 +195,7 @@ const handleSearch = () => {
|
||||
*/
|
||||
const handleReset = () => {
|
||||
// 重新获取数据
|
||||
tableData.param = { ...initialParam };
|
||||
getList();
|
||||
};
|
||||
|
||||
@@ -257,7 +258,7 @@ const handleStatusChange = async (row: TableDataItem) => {
|
||||
|
||||
await updatestate({
|
||||
id: row.id,
|
||||
status: newStatus, // 接口可能需要status字段
|
||||
isDisabled: newStatus, // 接口可能需要status字段
|
||||
});
|
||||
|
||||
ElMessage.success(`客服账号已${newStatus == 0 ? '禁用' : '启用'}`);
|
||||
|
||||
Reference in New Issue
Block a user