修改状态字段

This commit is contained in:
WUSIJIAN
2025-12-02 16:21:00 +08:00
parent 2d203c7b61
commit 4634a13692
3 changed files with 100 additions and 9 deletions

View File

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

View File

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

View File

@@ -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 ? '禁用' : '启用'}`);