以下mreditor.vue從MRInfo/?format=json獲得的mrorigin（醫案出處）及mrdoctor（醫案醫者）字段給予輸入欄位，比照mrname的功能式樣，
mreditor.vue：
<template>
<div>
<div>
<div class=
"wangeditor
">
<WangEditor v-model=
"content
" @response=
"(msg) => content = msg
" />
</div>
<div class=
"up-panel
">
<div class=
"tag-panel
">
<mrdncrud v-if=
"showDnCrud
" @tag-updated=
"handleDnTagUpdated
" />
<mrmncrud v-if=
"showMnCrud
" @tag-updated=
"handleMnTagUpdated
" />
<mrsncrud v-if=
"showSnCrud
" @tag-updated=
"handleSnTagUpdated
" />
<mrpncrud v-if=
"showPnCrud
" @tag-updated=
"handlePnTagUpdated
" />
<!-- 新增
人物编辑面板 -->
<mrfncrud v-if=
"showFnCrud
" @tag-updated=
"handleFnTagUpdated
" />
</div>
<div class=
"crud-buttons
">
<button @click=
"toggleDnCrud
" class=
"fixed-dncrud-btn
">
{{ showDnCrud ? '病態編輯' : '病態編輯' }}
</button>
<button @click=
"toggleMnCrud
" class=
"fixed-mncrud-btn
">
{{ showMnCrud ? '本草編輯' : '本草編輯' }}
</button>
<button @click=
"toggleSnCrud
" class=
"fixed-sncrud-btn
">
{{ showSnCrud ? '典籍編輯' : '典籍編輯' }}
</button>
<button @click=
"togglePnCrud
" class=
"fixed-pncrud-btn
">
{{ showPnCrud ? '方劑編輯' : '方劑編輯' }}
</button>
<!-- 新增
人物编辑按钮 -->
<button @click=
"toggleFnCrud
" class=
"fixed-fncrud-btn
">
{{ showFnCrud ? '
人物編輯' : '
人物編輯' }}
</button>
</div>
</div>
<div class=
"right-panel
">
<!-- 病态名称显示区域（带颜色） -->
<div class=
"dntag-display
" v-if=
"currentDnTags.length
">
<div class=
"field-name
">相關病態：</div>
<div class=
"dntag-value
">
<span v-for=
"(tag, index) in currentDnTags
" :key=
"'dn-'+index
"
class=
"dn-tag
" style=
"color: rgb(212, 107, 8);
">
{{ tag }}<span v-if=
"index < currentDnTags.length - 1
">；</span>
</span>
</div>
</div>
<div class=
"dntag-display
" v-else>
<div class=
"field-name
">相關病態：</div>
<div class=
"dntag-value
">無關聯病態名稱</div>
</div>
<!-- 草本名称显示区域（带颜色） -->
<div class=
"mntag-display
" v-if=
"currentMnTags.length
">
<div class=
"field-name
">相關本草：</div>
<div class=
"mntag-value
">
<span v-for=
"(tag, index) in currentMnTags
" :key=
"'mn-'+index
"
class=
"mn-tag
" style=
"color: rgb(0, 128, 0);
">
{{ tag }}<span v-if=
"index < currentMnTags.length - 1
">；</span>
</span>
</div>
</div>
<div class=
"mntag-display
" v-else>
<div class=
"field-name
">相關本草：</div>
<div class=
"mntag-value
">無關聯本草名稱</div>
</div>
<!--
出处名称显示区域（带颜色） -->
<div class=
"sntag-display
" v-if=
"currentSnTags.length
">
<div class=
"field-name
">相關典籍：</div>
<div class=
"sntag-value
">
<span v-for=
"(tag, index) in currentSnTags
" :key=
"'sn-'+index
"
class=
"sn-tag
" style=
"color: rgb(51, 102, 255);
">
{{ tag }}<span v-if=
"index < currentSnTags.length - 1
">；</span>
</span>
</div>
</div>
<div class=
"sntag-display
" v-else>
<div class=
"field-name
">相關典籍：</div>
<div class=
"sntag-value
">無關聯典籍名稱</div>
</div>
<!-- 方剂名称显示区域（带颜色） -->
<div class=
"pntag-display
" v-if=
"currentPnTags.length
">
<div class=
"field-name
">相關方劑：</div>
<div class=
"pntag-value
">
<span v-for=
"(tag, index) in currentPnTags
" :key=
"'pn-'+index
"
class=
"pn-tag
" style=
"color: rgb(138, 43, 226);
">
{{ tag }}<span v-if=
"index < currentPnTags.length - 1
">；</span>
</span>
</div>
</div>
<div class=
"pntag-display
" v-else>
<div class=
"field-name
">相關方劑：</div>
<div class=
"pntag-value
">無關聯方劑名稱</div>
</div>
<!-- 新增
人物名称显示区域（带颜色） -->
<div class=
"fntag-display
" v-if=
"currentFnTags.length
">
<div class=
"field-name
">相關
人物：</div>
<div class=
"fntag-value
">
<span v-for=
"(tag, index) in currentFnTags
" :key=
"'fn-'+index
"
class=
"fn-tag
" style=
"color: rgb(139, 69, 19);
">
{{ tag }}<span v-if=
"index < currentFnTags.length - 1
">；</span>
</span>
</div>
</div>
<div class=
"fntag-display
" v-else>
<div class=
"field-name
">相關
人物：</div>
<div class=
"fntag-value
">無關聯
人物名稱</div>
</div>
</div>
</div>
<div class=
"content-display
" v-html=
"displayContent
"></div>
<footer class=
"sticky-footer
">
<!-- 医案命名和提交者输入框 -->
<span class=
"form-input
">
<input v-model=
"formData.mrname
" placeholder=
"醫案命名
" class=
"name-input
" />
</span>
<span class=
"form-input
">
<input v-model=
"formData.mrposter
" placeholder=
"提交者姓名
" class=
"poster-input
" />
</span>
<span><button @click=
"toggleDisplayFormat
">{{ displayButtonText }}</button></span>
<span><button @click=
"resetAll
" class=
"reset-btn
">輸入新醫案</button></span>
<span class=
"id-input
">
<input v-model=
"fetchId
" placeholder=
"輸入醫案ID
" type=
"number
" min=
"1
" />
<button @click=
"fetchById
">載入醫案</button>
</span>
<span v-if=
"submittedId
">
<button @click=
"updateContent
" class=
"update-btn
">更新醫案</button>
<button @click=
"deleteContent
" class=
"delete-btn
">刪除醫案</button>
</span>
<span v-else>
<button @click=
"submitContent
" class=
"submit-btn
">提交醫案</button>
</span>
<span v-if=
"submittedId
" class=
"submitted-id
">醫案 ID: {{ submittedId }}</span>
<span>醫案編輯器</span>
</footer>
</div>
</template>
<script>
import WangEditor from './WangEditor.vue';
import mrdncrud from './mrdncrud.vue';
import mrmncrud from './mrmncrud.vue';
import mrsncrud from './mrsncrud.vue';
import mrpncrud from './mrpncrud.vue';
// 导入新增的
人物编辑组件
import mrfncrud from './mrfncrud.vue';
import LZString from 'lz-string';
export default {
name: 'mreditor',
components: {
WangEditor,
mrdncrud,
mrmncrud,
mrsncrud,
mrpncrud,
mrfncrud // 注册新组件
},
data() {
return {
content: '',
submittedId: null,
fetchId: null,
dnTags: [],
mnTags: [],
snTags: [],
pnTags: [],
fnTags: [], // 新增：
人物标签
showRawHtml: false,
stateVersion: '1.5', // 更新版本号（因为数据结构有变）
autoSaveTimer: null,
autoSaveInterval: 30000,
currentDnTags: [],
currentMnTags: [],
currentSnTags: [],
currentPnTags: [],
currentFnTags: [], // 新增：当前
人物标签
dnTagMap: {},
mnTagMap: {},
snTagMap: {},
pnTagMap: {},
fnTagMap: {}, // 新增：
人物标签映射
showDnCrud: false,
showMnCrud: false,
showSnCrud: false,
showPnCrud: false,
showFnCrud: false, // 新增：控制
人物编辑面板显示
formData: {
mrname:
"
",
mrposter:
"
"
}
};
},
computed: {
highlightedContent() {
if (!this.dnTags.length && !this.mnTags.length && !this.snTags.length && !this.pnTags.length && !this.fnTags.length)
return this.content;
const tempEl = document.createElement('div');
tempEl.innerHTML = this.content;
// 第一阶段：处理病态标签（橙色）
if (this.dnTags.length) {
const walker = document.createTreeWalker(
tempEl,
NodeFilter.SHOW_TEXT
);
const nodes = [];
while (walker.nextNode()) {
nodes.push(walker.currentNode);
}
nodes.forEach(node => {
let text = node.nodeValue;
let newHtml = text;
this.dnTags
.slice()
.sort((a, b) => b.length - a.length)
.forEach(tag => {
const regex = new RegExp(
this.escapeRegExp(tag),
'g'
);
newHtml = newHtml.replace(
regex,
`<span style=
"color: rgb(212, 107, 8); font-weight: bold;
">${tag}</span>`
);
});
if (newHtml !== text) {
const span = document.createElement('span');
span.innerHTML = newHtml;
node.parentNode.replaceChild(span, node);
}
});
}
// 第二阶段：处理草本标签（绿色）
if (this.mnTags.length) {
const mnWalker = document.createTreeWalker(
tempEl,
NodeFilter.SHOW_TEXT
);
const mnNodes = [];
while (mnWalker.nextNode()) mnNodes.push(mnWalker.currentNode);
mnNodes.forEach(node => {
let text = node.nodeValue;
let newHtml = text;
this.mnTags
.slice()
.sort((a, b) => b.length - a.length)
.forEach(tag => {
const regex = new RegExp(this.escapeRegExp(tag), 'g');
newHtml = newHtml.replace(
regex,
`<span style=
"color: rgb(0, 128, 0); font-weight: bold;
">${tag}</span>`
);
});
if (newHtml !== text) {
const span = document.createElement('span');
span.innerHTML = newHtml;
node.parentNode.replaceChild(span, node);
}
});
}
// 第三阶段：处理
出处标签（蓝色）
if (this.snTags.length) {
const snWalker = document.createTreeWalker(
tempEl,
NodeFilter.SHOW_TEXT
);
const snNodes = [];
while (snWalker.nextNode()) snNodes.push(snWalker.currentNode);
snNodes.forEach(node => {
let text = node.nodeValue;
let newHtml = text;
this.snTags
.slice()
.sort((a, b) => b.length - a.length)
.forEach(tag => {
const regex = new RegExp(this.escapeRegExp(tag), 'g');
newHtml = newHtml.replace(
regex,
`<span style=
"color: rgb(51, 102, 255); font-weight: bold;
">${tag}</span>`
);
});
if (newHtml !== text) {
const span = document.createElement('span');
span.innerHTML = newHtml;
node.parentNode.replaceChild(span, node);
}
});
}
// 第四阶段：处理方剂标签（紫色）
if (this.pnTags.length) {
const pnWalker = document.createTreeWalker(
tempEl,
NodeFilter.SHOW_TEXT
);
const pnNodes = [];
while (pnWalker.nextNode()) pnNodes.push(pnWalker.currentNode);
pnNodes.forEach(node => {
let text = node.nodeValue;
let newHtml = text;
this.pnTags
.slice()
.sort((a, b) => b.length - a.length)
.forEach(tag => {
const regex = new RegExp(this.escapeRegExp(tag), 'g');
newHtml = newHtml.replace(
regex,
`<span style=
"color: rgb(138, 43, 226); font-weight: bold;
">${tag}</span>`
);
});
if (newHtml !== text) {
const span = document.createElement('span');
span.innerHTML = newHtml;
node.parentNode.replaceChild(span, node);
}
});
}
// 第五阶段：处理
人物标签（棕色） - 新增
if (this.fnTags.length) {
const fnWalker = document.createTreeWalker(
tempEl,
NodeFilter.SHOW_TEXT
);
const fnNodes = [];
while (fnWalker.nextNode()) fnNodes.push(fnWalker.currentNode);
fnNodes.forEach(node => {
let text = node.nodeValue;
let newHtml = text;
this.fnTags
.slice()
.sort((a, b) => b.length - a.length)
.forEach(tag => {
const regex = new RegExp(this.escapeRegExp(tag), 'g');
newHtml = newHtml.replace(
regex,
`<span style=
"color: rgb(139, 69, 19); font-weight: bold;
">${tag}</span>`
);
});
if (newHtml !== text) {
const span = document.createElement('span');
span.innerHTML = newHtml;
node.parentNode.replaceChild(span, node);
}
});
}
return tempEl.innerHTML;
},
displayContent() {
if (this.showRawHtml) {
return this.escapeHtml(this.content);
}
return this.highlightedContent;
},
displayButtonText() {
return this.showRawHtml ? '病態渲染格式' : '病態原始標籤';
}
},
watch: {
content: {
handler() {
this.debouncedSaveState();
},
deep: true
}
},
async mounted() {
await this.fetchDNTags();
await this.fetchMNTags();
await this.fetchSNTags();
await this.fetchPNTags();
await this.fetchFNTags(); // 新增：获取
人物标签
this.restoreState();
this.setupAutoSave();
},
activated() {
console.log('醫案編輯器被激活');
this.restoreState();
this.setupAutoSave();
},
deactivated() {
console.log('醫案編輯器被停用');
this.saveState();
this.clearAutoSave();
},
beforeDestroy() {
this.clearAutoSave();
},
methods: {
toggleDnCrud() {
this.showDnCrud = !this.showDnCrud;
this.showMnCrud = false;
this.showSnCrud = false;
this.showPnCrud = false;
this.showFnCrud = false; // 新增
this.updatePanelDisplay();
},
toggleMnCrud() {
this.showMnCrud = !this.showMnCrud;
this.showDnCrud = false;
this.showSnCrud = false;
this.showPnCrud = false;
this.showFnCrud = false; // 新增
this.updatePanelDisplay();
},
toggleSnCrud() {
this.showSnCrud = !this.showSnCrud;
this.showDnCrud = false;
this.showMnCrud = false;
this.showPnCrud = false;
this.showFnCrud = false; // 新增
this.updatePanelDisplay();
},
togglePnCrud() {
this.showPnCrud = !this.showPnCrud;
this.showDnCrud = false;
this.showMnCrud = false;
this.showSnCrud = false;
this.showFnCrud = false; // 新增
this.updatePanelDisplay();
},
// 新增：切换
人物编辑面板
toggleFnCrud() {
this.showFnCrud = !this.showFnCrud;
this.showDnCrud = false;
this.showMnCrud = false;
this.showSnCrud = false;
this.showPnCrud = false;
this.updatePanelDisplay();
},
updatePanelDisplay() {
const panel = document.querySelector('.tag-panel');
if (this.showDnCrud || this.showMnCrud || this.showSnCrud || this.showPnCrud || this.showFnCrud) {
panel.style.display = 'block';
} else {
panel.style.display = 'none';
}
},
handleDnTagUpdated() {
console.log('病态标签已更新，刷新数据');
this.fetchDNTags();
},
handleMnTagUpdated() {
console.log('本草标签已更新，刷新数据');
this.fetchMNTags();
},
handleSnTagUpdated() {
console.log('典籍标签已更新，刷新数据');
this.fetchSNTags();
},
handlePnTagUpdated() {
console.log('方剂标签已更新，刷新数据');
this.fetchPNTags();
},
// 新增：
人物标签更新处理
handleFnTagUpdated() {
console.log('
人物标签已更新，刷新数据');
this.fetchFNTags();
},
// 获取方剂标签数据
async fetchPNTags() {
try {
const response = await fetch('PNTag/?format=json');
const data = await response.json();
this.pnTags = data
.map(item => item.pnname)
.filter(name => name && name.trim().length > 0);
this.pnTagMap = {};
data.forEach(item => {
if (item.id && item.pnname) {
this.pnTagMap[item.id] = item.pnname;
}
});
} catch (error) {
console.error('获取方剂标签失败:', error);
alert('方剂标签数据加载失败，高亮功能不可用');
}
},
// 获取
出处标签数据
async fetchSNTags() {
try {
const response = await fetch('SNTag/?format=json');
const data = await response.json();
this.snTags = data
.map(item => item.snname)
.filter(name => name && name.trim().length > 0);
this.snTagMap = {};
data.forEach(item => {
if (item.id && item.snname) {
this.snTagMap[item.id] = item.snname;
}
});
} catch (error) {
console.error('获取典籍标签失败:', error);
alert('典籍标签数据加载失败，高亮功能不可用');
}
},
// 新增：获取
人物标签数据
async fetchFNTags() {
try {
const response = await fetch('FNTag/?format=json');
const data = await response.json();
this.fnTags = data
.map(item => item.fnname)
.filter(name => name && name.trim().length > 0);
this.fnTagMap = {};
data.forEach(item => {
if (item.id && item.fnname) {
this.fnTagMap[item.id] = item.fnname;
}
});
} catch (error) {
console.error('获取
人物标签失败:', error);
alert('
人物标签数据加载失败，高亮功能不可用');
}
},
escapeHtml(unsafe) {
if (!unsafe) return '';
return unsafe
.replace(/&/g,
"&
")
.replace(/</g,
"<
")
.replace(/>/g,
">
")
.replace(/
"/g,
"
"
")
.replace(/'/g,
"'
");
},
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
},
setupAutoSave() {
this.clearAutoSave();
this.autoSaveTimer = setInterval(() => {
if (this.content || this.submittedId) {
console.log('自动保存状态...');
this.saveState();
}
}, this.autoSaveInterval);
},
clearAutoSave() {
if (this.autoSaveTimer) {
clearInterval(this.autoSaveTimer);
this.autoSaveTimer = null;
}
},
debouncedSaveState() {
this.clearAutoSave();
this.autoSaveTimer = setTimeout(() => {
this.saveState();
this.setupAutoSave();
}, 2000);
},
saveState() {
const state = {
version: this.stateVersion,
content: this.content,
submittedId: this.submittedId,
formData: this.formData,
showRawHtml: this.showRawHtml,
currentDnTags: this.currentDnTags,
currentMnTags: this.currentMnTags,
currentSnTags: this.currentSnTags,
currentPnTags: this.currentPnTags,
currentFnTags: this.currentFnTags, // 新增
timestamp: new Date().getTime()
};
if (this.content.length > 2000) {
try {
state.compressed = true;
state.content = LZString.compressToUTF16(this.content);
} catch (e) {
console.error('压缩失败，使用原始数据', e);
state.compressed = false;
}
}
sessionStorage.setItem('medicalRecordState', JSON.stringify(state));
},
restoreState() {
const savedState = sessionStorage.getItem('medicalRecordState');
if (!savedState) return;
try {
const state = JSON.parse(savedState);
if (state.version !== this.stateVersion) {
console.warn('状态版本不匹配，跳过恢复');
return;
}
let content = state.content;
if (state.compressed) {
try {
content = LZString.decompressFromUTF16(content);
} catch (e) {
console.error('解压失败，使用原始数据', e);
}
}
this.content = content;
this.submittedId = state.submittedId;
this.showRawHtml = state.showRawHtml;
this.currentDnTags = state.currentDnTags || [];
this.currentMnTags = state.currentMnTags || [];
this.currentSnTags = state.currentSnTags || [];
this.currentPnTags = state.currentPnTags || [];
this.currentFnTags = state.currentFnTags || []; // 新增
this.formData = state.formData || { mrname:
"
", mrposter:
"
" };
console.log('医案状态已恢复');
} catch (e) {
console.error('状态恢复失败', e);
sessionStorage.removeItem('medicalRecordState');
}
},
clearState() {
sessionStorage.removeItem('medicalRecordState');
},
toggleDisplayFormat() {
this.showRawHtml = !this.showRawHtml;
this.saveState();
},
async fetchDNTags() {
try {
const response = await fetch('DNTag/?format=json');
const data = await response.json();
this.dnTags = data
.map(item => item.dnname)
.filter(name => name && name.trim().length > 0);
this.dnTagMap = {};
data.forEach(item => {
if (item.id && item.dnname) {
this.dnTagMap[item.id] = item.dnname;
}
});
} catch (error) {
console.error('获取标签失败:', error);
alert('标签数据加载失败，高亮功能不可用');
}
},
async fetchMNTags() {
try {
const response = await fetch('MNTag/?format=json');
const data = await response.json();
this.mnTags = data
.map(item => item.mnname)
.filter(name => name && name.trim().length > 0);
this.mnTagMap = {};
data.forEach(item => {
if (item.id && item.mnname) {
this.mnTagMap[item.id] = item.mnname;
}
});
} catch (error) {
console.error('获取草本标签失败:', error);
alert('草本标签数据加载失败，高亮功能不可用');
}
},
async fetchById() {
if (!this.fetchId) {
alert('請輸入有效的醫案ID');
return;
}
try {
const response = await fetch(`MRInfo/${this.fetchId}/?format=json`);
if (response.ok) {
const data = await response.json();
this.formData.mrname = data.mrname || '';
this.formData.mrposter = data.mrposter || '';
this.content = data.mrcase || '';
this.submittedId = data.id;
this.fetchId = null;
// 病态标签处理
if (data.dntag && Array.isArray(data.dntag)) {
this.currentDnTags = data.dntag.map(id =>
this.dnTagMap[id] || `未知標籤(${id})`
);
} else {
this.currentDnTags = [];
}
// 草本标签处理
if (data.mntag && Array.isArray(data.mntag)) {
this.currentMnTags = data.mntag.map(id =>
this.mnTagMap[id] || `未知草本(${id})`
);
} else {
this.currentMnTags = [];
}
//
出处标签处理
if (data.sntag && Array.isArray(data.sntag)) {
this.currentSnTags = data.sntag.map(id =>
this.snTagMap[id] || `未知典籍(${id})`
);
} else {
this.currentSnTags = [];
}
// 方剂标签处理
if (data.pntag && Array.isArray(data.pntag)) {
this.currentPnTags = data.pntag.map(id =>
this.pnTagMap[id] || `未知方劑(${id})`
);
} else {
this.currentPnTags = [];
}
// 新增：
人物标签处理
if (data.fntag && Array.isArray(data.fntag)) {
this.currentFnTags = data.fntag.map(id =>
this.fnTagMap[id] || `未知
人物(${id})`
);
} else {
this.currentFnTags = [];
}
await this.fetchDNTags();
await this.fetchMNTags();
await this.fetchSNTags();
await this.fetchPNTags();
await this.fetchFNTags(); // 新增
this.saveState();
alert('醫案數據加載成功！');
} else if (response.status === 404) {
alert('未找到該ID的醫案');
} else {
throw new Error('獲取醫案失敗');
}
} catch (error) {
console.error('Error:', error);
alert(`獲取醫案失敗: ${error.message}`);
}
},
async submitContent() {
const postData = {
mrcase: this.content,
mrname: this.formData.mrname,
mrposter: this.formData.mrposter
};
try {
const response = await fetch('MRInfo/?format=json', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData),
});
if (response.ok) {
const data = await response.json();
this.submittedId = data.id;
// 病态标签处理
if (data.dntag && Array.isArray(data.dntag)) {
this.currentDnTags = data.dntag.map(id =>
this.dnTagMap[id] || `未知標籤(${id})`
);
} else {
this.currentDnTags = [];
}
// 草本标签处理
if (data.mntag && Array.isArray(data.mntag)) {
this.currentMnTags = data.mntag.map(id =>
this.mnTagMap[id] || `未知草本(${id})`
);
} else {
this.currentMnTags = [];
}
//
出处标签处理
if (data.sntag && Array.isArray(data.sntag)) {
this.currentSnTags = data.sntag.map(id =>
this.snTagMap[id] || `未知典籍(${id})`
);
} else {
this.currentSnTags = [];
}
// 方剂标签处理
if (data.pntag && Array.isArray(data.pntag)) {
this.currentPnTags = data.pntag.map(id =>
this.pnTagMap[id] || `未知方劑(${id})`
);
} else {
this.currentPnTags = [];
}
// 新增：
人物标签处理
if (data.fntag && Array.isArray(data.fntag)) {
this.currentFnTags = data.fntag.map(id =>
this.fnTagMap[id] || `未知
人物(${id})`
);
} else {
this.currentFnTags = [];
}
this.saveState();
alert('醫案提交成功！');
} else {
throw new Error('提交失败');
}
} catch (error) {
console.error('Error:', error);
alert(`提交失败: ${error.message}`);
}
},
async updateContent() {
if (!this.submittedId) return;
const postData = {
mrcase: this.content,
mrname: this.formData.mrname,
mrposter: this.formData.mrposter
};
try {
const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData),
});
if (response.ok) {
const data = await response.json();
// 病态标签处理
if (data.dntag && Array.isArray(data.dntag)) {
this.currentDnTags = data.dntag.map(id =>
this.dnTagMap[id] || `未知標籤(${id})`
);
}
// 草本标签处理
if (data.mntag && Array.isArray(data.mntag)) {
this.currentMnTags = data.mntag.map(id =>
this.mnTagMap[id] || `未知草本(${id})`
);
}
//
出处标签处理
if (data.sntag && Array.isArray(data.sntag)) {
this.currentSnTags = data.sntag.map(id =>
this.snTagMap[id] || `未知典籍(${id})`
);
}
// 方剂标签处理
if (data.pntag && Array.isArray(data.pntag)) {
this.currentPnTags = data.pntag.map(id =>
this.pnTagMap[id] || `未知方劑(${id})`
);
}
// 新增：
人物标签处理
if (data.fntag && Array.isArray(data.fntag)) {
this.currentFnTags = data.fntag.map(id =>
this.fnTagMap[id] || `未知
人物(${id})`
);
}
this.saveState();
alert('醫案更新成功！');
} else {
throw new Error('更新失败');
}
} catch (error) {
console.error('Error:', error);
alert(`更新失败: ${error.message}`);
}
},
async deleteContent() {
if (!this.submittedId) return;
if (!confirm('確定要刪除這個醫案嗎？')) return;
try {
const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
}
});
if (response.ok) {
this.clearState();
this.resetAll();
alert('醫案刪除成功！');
} else {
throw new Error('刪除失败');
}
} catch (error) {
console.error('Error:', error);
alert(`刪除失败: ${error.message}`);
}
},
resetAll() {
this.content = '';
this.submittedId = null;
this.fetchId = null;
this.showRawHtml = false;
this.currentDnTags = [];
this.currentMnTags = [];
this.currentSnTags = [];
this.currentPnTags = [];
this.currentFnTags = []; // 新增
this.showDnCrud = false;
this.showMnCrud = false;
this.showSnCrud = false;
this.showPnCrud = false;
this.showFnCrud = false; // 新增
this.formData = {
mrname:
"
",
mrposter:
"
"
};
document.querySelector('.tag-panel').style.display = 'none';
}
}
};
</script>
<style scoped>
.wangeditor {
flex: 1;
padding: 10px;
overflow-y: auto;
}
.up-panel {
position: fixed;
top: 55px;
right: 0;
width: 50%;
height: 45%; /* 调整高度以适应新按钮 */
padding: 0;
overflow: hidden;
background: #ffe6d4;
display: block;
}
.tag-panel {
width: 80%;
height: 100%;
background: lightyellow;
padding: 10px;
overflow-y: auto;
display: none;
z-index: 100;
}
.crud-buttons {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
z-index: 101;
gap: 5px;
}
.fixed-dncrud-btn {
background-color: #EF6C00;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
width: 120px;
text-align: center;
}
.fixed-dncrud-btn:hover {
background-color: #E65100;
}
.fixed-mncrud-btn {
background-color: #2E7D32;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
width: 120px;
text-align: center;
}
.fixed-mncrud-btn:hover {
background-color: #1B5E20;
}
.fixed-sncrud-btn {
background-color: #1976D2;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
width: 120px;
text-align: center;
}
.fixed-sncrud-btn:hover {
background-color: #0D47A1;
}
.fixed-pncrud-btn {
background-color: #8A2BE2;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
width: 120px;
text-align: center;
}
.fixed-pncrud-btn:hover {
background-color: #6A1B9A;
}
/* 新增
人物按钮样式 */
.fixed-fncrud-btn {
background-color: #8B4513;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
width: 120px;
text-align: center;
}
.fixed-fncrud-btn:hover {
background-color: #654321;
}
.right-panel {
position: fixed;
bottom: 45px;
right: 0;
width: 50%;
height: 43%; /* 调整高度以适应新标签 */
background: lightblue;
padding: 1px;
z-index: 100;
overflow-y: auto;
}
.dntag-display {
display: flex;
margin-top: 1px;
padding: 10px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.mntag-display {
display: flex;
margin-top: 10px;
padding: 10px;
background: #f0f9eb;
border: 1px solid #e1f3d8;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.sntag-display {
display: flex;
margin-top: 10px;
padding: 10px;
background: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.pntag-display {
display: flex;
margin-top: 10px;
padding: 10px;
background: #f3e5f5;
border: 1px solid #e1bee7;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* 新增
人物标签显示区域 */
.fntag-display {
display: flex;
margin-top: 10px;
padding: 10px;
background: #f5f0e6;
border: 1px solid #d2b48c;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.field-name {
font-weight: bold;
min-width: 80px;
color: #495057;
font-size: 1rem;
}
.dntag-value, .mntag-value, .sntag-value, .pntag-value, .fntag-value {
flex-grow: 1;
padding-left: 10px;
}
.dntag-value {
border-left: 2px solid #ffc107;
}
.mntag-value {
border-left: 2px solid #4CAF50;
}
.sntag-value {
border-left: 2px solid #2196F3;
}
.pntag-value {
border-left: 2px solid #8A2BE2;
}
.fntag-value {
border-left: 2px solid #8B4513;
}
.dn-tag {
color: rgb(212, 107, 8);
font-weight: bold;
margin-right: 2px;
}
.mn-tag {
color: rgb(0, 128, 0);
font-weight: bold;
margin-right: 2px;
}
.sn-tag {
color: rgb(51, 102, 255);
font-weight: bold;
margin-right: 2px;
}
.pn-tag {
color: rgb(138, 43, 226);
font-weight: bold;
margin-right: 2px;
}
.fn-tag {
color: rgb(139, 69, 19);
font-weight: bold;
margin-right: 2px;
}
.content-display {
position: fixed;
top: 350px;
left: 0;
width: 50%;
height: 60%;
bottom: 45px;
z-index: 999;
background-color: white;
overflow-y: auto;
padding: 10px;
border: 1px solid #eee;
white-space: pre-wrap;
}
.sticky-footer {
display: flex;
justify-content: flex-start;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffd800ff;
z-index: 999;
padding: 10px 20px;
box-sizing: border-box;
flex-wrap: wrap;
}
.sticky-footer > span {
margin-left: 5px;
display: flex;
align-items: center;
}
.submitted-id {
padding: 2px;
background-color: #e2f0fd;
color: #004085;
border-radius: 4px;
}
.reset-btn {
margin-left: 10px;
padding: 2px;
background-color: #dc3545;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
.reset-btn:hover {
background-color: #c82333;
}
.id-input {
display: flex;
align-items: center;
}
.id-input input {
width: 100px;
padding: 2px 5px;
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.submit-btn {
background-color: #28a745;
color: white;
border: none;
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
}
.update-btn {
background-color: #007bff;
color: white;
border: none;
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
}
.delete-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
}
.submit-btn:hover {
background-color: #218838;
}
.update-btn:hover {
background-color: #0069d9;
}
.delete-btn:hover {
background-color: #c82333;
}
.form-input {
margin-right: 10px;
}
.name-input, .poster-input {
padding: 5px 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 150px;
}
</style>
《孟子》中提到，只要自己站在正义的一方，即使面对强大的敌人也应勇往直前。此引言强调了正义和个人勇气的重要性。
扫一扫
3007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
