修改状态字段
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor-container">
|
<div class="editor-container" :class="{ 'disabled-editor': disableExceptEmotion }">
|
||||||
<div ref="editorToolbar"></div>
|
<div ref="editorToolbar" class="editor-toolbar"></div>
|
||||||
<div ref="editorContent" :style="{ height }"></div>
|
<div ref="editorContent" :style="{ height }" class="editor-content"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -32,6 +32,11 @@ export default defineComponent({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: () => false,
|
default: () => false,
|
||||||
},
|
},
|
||||||
|
// 是否禁用除表情外的所有功能
|
||||||
|
disableExceptEmotion: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false,
|
||||||
|
},
|
||||||
// 内容框默认 placeholder
|
// 内容框默认 placeholder
|
||||||
placeholder: {
|
placeholder: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -70,6 +75,11 @@ export default defineComponent({
|
|||||||
emit('update:modelValue', editor.getHtml());
|
emit('update:modelValue', editor.getHtml());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 即使编辑器只读,也允许表情插入
|
||||||
|
if (props.disableExceptEmotion) {
|
||||||
|
editorConfig.readOnly = false; // 允许编辑,但通过CSS禁用其他功能
|
||||||
|
}
|
||||||
|
|
||||||
(<any>editorConfig).MENU_CONF['uploadImage'] = {
|
(<any>editorConfig).MENU_CONF['uploadImage'] = {
|
||||||
base64LimitSize: 10 * 1024 * 1024,
|
base64LimitSize: 10 * 1024 * 1024,
|
||||||
};
|
};
|
||||||
@@ -94,7 +104,6 @@ export default defineComponent({
|
|||||||
|
|
||||||
// 初始化富文本
|
// 初始化富文本
|
||||||
const initWangeditor = () => {
|
const initWangeditor = () => {
|
||||||
// 先销毁旧的编辑器
|
|
||||||
destroyEditor();
|
destroyEditor();
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
@@ -115,6 +124,35 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
|
|
||||||
state.isInitialized = true;
|
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,
|
() => props.modelValue,
|
||||||
(value) => {
|
(value) => {
|
||||||
if (state.editor && state.isInitialized) {
|
if (state.editor && state.isInitialized) {
|
||||||
// 只有当内容确实改变时才更新
|
|
||||||
const currentHtml = state.editor.getHtml();
|
const currentHtml = state.editor.getHtml();
|
||||||
if (currentHtml !== value) {
|
if (currentHtml !== value) {
|
||||||
state.editor.setHtml(value || '');
|
state.editor.setHtml(value || '');
|
||||||
@@ -152,9 +189,61 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 监听禁用除表情外的状态变化
|
||||||
|
watch(
|
||||||
|
() => props.disableExceptEmotion,
|
||||||
|
(disabled) => {
|
||||||
|
if (state.editor && state.isInitialized) {
|
||||||
|
applyDisableState();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</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 实例(新功能服务)
|
// 配置新建第二个 axios 实例(新功能服务)
|
||||||
const newService: AxiosInstance = axios.create({
|
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秒超时
|
timeout: 50000, // 50秒超时
|
||||||
headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
|
headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
|
||||||
paramsSerializer: {
|
paramsSerializer: {
|
||||||
|
|||||||
@@ -33,12 +33,12 @@
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
新增客服
|
新增客服
|
||||||
</el-button>
|
</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>
|
<el-icon>
|
||||||
<ele-Refresh />
|
<ele-Refresh />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
重置
|
重置
|
||||||
</el-button> -->
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
@@ -195,6 +195,7 @@ const handleSearch = () => {
|
|||||||
*/
|
*/
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
// 重新获取数据
|
// 重新获取数据
|
||||||
|
tableData.param = { ...initialParam };
|
||||||
getList();
|
getList();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -257,7 +258,7 @@ const handleStatusChange = async (row: TableDataItem) => {
|
|||||||
|
|
||||||
await updatestate({
|
await updatestate({
|
||||||
id: row.id,
|
id: row.id,
|
||||||
status: newStatus, // 接口可能需要status字段
|
isDisabled: newStatus, // 接口可能需要status字段
|
||||||
});
|
});
|
||||||
|
|
||||||
ElMessage.success(`客服账号已${newStatus == 0 ? '禁用' : '启用'}`);
|
ElMessage.success(`客服账号已${newStatus == 0 ? '禁用' : '启用'}`);
|
||||||
|
|||||||
Reference in New Issue
Block a user