分析mreditor.vue及mrdncrud中病態編輯的功能為範例，新加入一個辨證編輯的功能，修改mreditor.vue代碼，並增加一個mrdiancrud.vue
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="handleDn
TagUpdated" />
<mrmncrud v-if="showMnCrud" @
tag-updated="handleMn
TagUpdated" />
<mrsncrud v-if="showSnCrud" @
tag-updated="handleSn
TagUpdated" />
<mrpncrud v-if="showPnCrud" @
tag-updated="handlePn
TagUpdated" />
<mrfncrud v-if="showFnCrud" @
tag-updated="handleFn
TagUpdated" />
</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="dn
tag-display" v-if="currentDn
Tags.length">
<div class="field-name">相關病態：</div>
<div class="dn
tag-value">
<span v-for="(
tag, index) in currentDn
Tags" :key="'dn-'+index"
class="dn-
tag" style="color: rgb(212, 107, 8);">
{{
tag }}<span v-if="index < currentDn
Tags.length - 1">；</span>
</span>
</div>
</div>
<div class="dn
tag-display" v-else>
<div class="field-name">相關病態：</div>
<div class="dn
tag-value">無關聯病態名稱</div>
</div>
<div class="mn
tag-display" v-if="currentMn
Tags.length">
<div class="field-name">相關本草：</div>
<div class="mn
tag-value">
<span v-for="(
tag, index) in currentMn
Tags" :key="'mn-'+index"
class="mn-
tag" style="color: rgb(0, 128, 0);">
{{
tag }}<span v-if="index < currentMn
Tags.length - 1">；</span>
</span>
</div>
</div>
<div class="mn
tag-display" v-else>
<div class="field-name">相關本草：</div>
<div class="mn
tag-value">無關聯本草名稱</div>
</div>
<div class="sn
tag-display" v-if="currentSn
Tags.length">
<div class="field-name">相關典籍：</div>
<div class="sn
tag-value">
<span v-for="(
tag, index) in currentSn
Tags" :key="'sn-'+index"
class="sn-
tag" style="color: rgb(51, 102, 255);">
{{
tag }}<span v-if="index < currentSn
Tags.length - 1">；</span>
</span>
</div>
</div>
<div class="sn
tag-display" v-else>
<div class="field-name">相關典籍：</div>
<div class="sn
tag-value">無關聯典籍名稱</div>
</div>
<div class="pn
tag-display" v-if="currentPn
Tags.length">
<div class="field-name">相關方劑：</div>
<div class="pn
tag-value">
<span v-for="(
tag, index) in currentPn
Tags" :key="'pn-'+index"
class="pn-
tag" style="color: rgb(138, 43, 226);">
{{
tag }}<span v-if="index < currentPn
Tags.length - 1">；</span>
</span>
</div>
</div>
<div class="pn
tag-display" v-else>
<div class="field-name">相關方劑：</div>
<div class="pn
tag-value">無關聯方劑名稱</div>
</div>
<div class="fn
tag-display" v-if="currentFn
Tags.length">
<div class="field-name">相關人物：</div>
<div class="fn
tag-value">
<span v-for="(
tag, index) in currentFn
Tags" :key="'fn-'+index"
class="fn-
tag" style="color: rgb(139, 69, 19);">
{{
tag }}<span v-if="index < currentFn
Tags.length - 1">；</span>
</span>
</div>
</div>
<div class="fn
tag-display" v-else>
<div class="field-name">相關人物：</div>
<div class="fn
tag-value">無關聯人物名稱
</div>
</div>
</div>
</div>
<div class="content-display" v-html="displayContent"></div>
<footer class="sticky-footer">
<!-- 修改点：将reset按钮绑定到confirmReset方法 -->
<span><button @click="confirmReset" class="reset-btn">輸入新醫案</button></span>
<span class="form-in
put">
<in
put v-model="formData.mrname" placeholder="醫案命名" class="name-in
put" />
</span>
<span class="form-in
put">
<in
put v-model="formData.mrorigin" placeholder="醫案出處" class="origin-in
put" />
</span>
<span class="form-in
put">
<in
put v-model="formData.mrdoctor" placeholder="醫案醫者" class="doctor-in
put" />
</span>
<span class="form-in
put">
<in
put v-model="formData.mrposter" placeholder="提交者姓名" class="poster-in
put" />
</span>
<span><button @click="toggleDisplayFormat">{{ displayButtonText }}</button></span>
<span class="id-in
put">
<in
put 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,
dn
Tags: [],
mn
Tags: [],
sn
Tags: [],
pn
Tags: [],
fn
Tags: [],
showRawHtml: false,
stateVersion: '1.5',
autoSaveTimer: null,
autoSaveInterval: 30000,
currentDn
Tags: [],
currentMn
Tags: [],
currentSn
Tags: [],
currentPn
Tags: [],
currentFn
Tags: [],
dn
TagMap: {},
mn
TagMap: {},
sn
TagMap: {},
pn
TagMap: {},
fn
TagMap: {},
showDnCrud: false,
showMnCrud: false,
showSnCrud: false,
showPnCrud: false,
showFnCrud: false,
formData: {
mrname: "",
mrorigin: "",
mrdoctor: "",
mrposter: ""
}
};
},
com
puted: {
highlightedContent() {
if (!this.dn
Tags.length && !this.mn
Tags.length && !this.sn
Tags.length && !this.pn
Tags.length && !this.fn
Tags.length)
return this.content;
const tempEl = document.createElement('div');
tempEl.
innerHTML = this.content;
if (this.dn
Tags.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.dn
Tags
.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.mn
Tags.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.mn
Tags
.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.sn
Tags.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.sn
Tags
.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.pn
Tags.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.pn
Tags
.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.fn
Tags.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.fn
Tags
.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.fetchDN
Tags();
await this.fetchMN
Tags();
await this.fetchSN
Tags();
await this.fetchPN
Tags();
await this.fetchFN
Tags();
this.restoreState();
this.setupAutoSave();
},
activated() {
console.log('醫案編輯器被激活');
this.restoreState();
this.setupAutoSave();
},
deactivated() {
console.log('醫案編輯器被停用');
this.saveState();
this.clearAutoSave();
},
beforeDestroy() {
this.clearAutoSave();
},
methods: {
// 新增方法：确认重置逻辑
confirmReset() {
// 检查是否有需要保存的数据
const hasData = this.content ||
this.submittedId ||
this.formData.mrname ||
this.formData.mrorigin ||
this.formData.mrdoctor ||
this.formData.mrposter;
if (hasData) {
// 显示警告对话框
if (confirm('輸入欄位中有資料！回原頁面繼續更新檔案請按確定，離開原頁面請按取消。')) {
// 用户选择"是"：回到原来页面（不执行任何操作）
return;
} else {
// 用户选择"否"：清除数据并重置
this.resetAll();
}
} else {
// 没有数据时直接重置
this.resetAll();
}
},
// 重置所有数据
resetAll() {
this.content = '';
this.submittedId = null;
this.fetchId = null;
this.showRawHtml = false;
this.currentDn
Tags = [];
this.currentMn
Tags = [];
this.currentSn
Tags = [];
this.currentPn
Tags = [];
this.currentFn
Tags = [];
this.showDnCrud = false;
this.showMnCrud = false;
this.showSnCrud = false;
this.showPnCrud = false;
this.showFnCrud = false;
this.formData = {
mrname: "",
mrorigin: "",
mrdoctor: "",
mrposter: ""
};
// 清除自动保存状态
this.clearState();
// 关闭标签面板
const panel = document.querySelector('.
tag-panel');
if (panel) panel.style.display = 'none';
},
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';
}
},
handleDn
TagUpdated() {
console.log('病态标签已更新，刷新数据');
this.fetchDN
Tags();
},
handleMn
TagUpdated() {
console.log('本草标签已更新，刷新数据');
this.fetchMN
Tags();
},
handleSn
TagUpdated() {
console.log('典籍标签已更新，刷新数据');
this.fetchSN
Tags();
},
handlePn
TagUpdated() {
console.log('方剂标签已更新，刷新数据');
this.fetchPN
Tags();
},
handleFn
TagUpdated() {
console.log('人物标签已更新，刷新数据');
this.fetchFN
Tags();
},
async fetchPN
Tags() {
try {
const response = await fetch('PN
Tag/?format=json');
const data = await response.json();
this.pn
Tags = data
.map(item => item.pnname)
.filter(name => name && name.trim().length > 0);
this.pn
TagMap = {};
data.forEach(item => {
if (item.id && item.pnname) {
this.pn
TagMap[item.id] = item.pnname;
}
});
} catch (error) {
console.error('获取方剂标签失败:', error);
alert('方剂标签数据加载失败，高亮功能不可用');
}
},
async fetchSN
Tags() {
try {
const response = await fetch('SN
Tag/?format=json');
const data = await response.json();
this.sn
Tags = data
.map(item => item.snname)
.filter(name => name && name.trim().length > 0);
this.sn
TagMap = {};
data.forEach(item => {
if (item.id && item.snname) {
this.sn
TagMap[item.id] = item.snname;
}
});
} catch (error) {
console.error('获取典籍标签失败:', error);
alert('典籍标签数据加载失败，高亮功能不可用');
}
},
async fetchFN
Tags() {
try {
const response = await fetch('FN
Tag/?format=json');
const data = await response.json();
this.fn
Tags = data
.map(item => item.fnname)
.filter(name => name && name.trim().length > 0);
this.fn
TagMap = {};
data.forEach(item => {
if (item.id && item.fnname) {
this.fn
TagMap[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,
currentDn
Tags: this.currentDn
Tags,
currentMn
Tags: this.currentMn
Tags,
currentSn
Tags: this.currentSn
Tags,
currentPn
Tags: this.currentPn
Tags,
currentFn
Tags: this.currentFn
Tags,
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.currentDn
Tags = state.currentDn
Tags || [];
this.currentMn
Tags = state.currentMn
Tags || [];
this.currentSn
Tags = state.currentSn
Tags || [];
this.currentPn
Tags = state.currentPn
Tags || [];
this.currentFn
Tags = state.currentFn
Tags || [];
this.formData = state.formData || {
mrname: "",
mrorigin: "",
mrdoctor: "",
mrposter: ""
};
console.log('医案状态已恢复');
} catch (e) {
console.error('状态恢复失败', e);
sessionStorage.removeItem('medicalRecordState');
}
},
clearState() {
sessionStorage.removeItem('medicalRecordState');
},
toggleDisplayFormat() {
this.showRawHtml = !this.showRawHtml;
this.saveState();
},
async fetchDN
Tags() {
try {
const response = await fetch('DN
Tag/?format=json');
const data = await response.json();
this.dn
Tags = data
.map(item => item.dnname)
.filter(name => name && name.trim().length > 0);
this.dn
TagMap = {};
data.forEach(item => {
if (item.id && item.dnname) {
this.dn
TagMap[item.id] = item.dnname;
}
});
} catch (error) {
console.error('获取标签失败:', error);
alert('标签数据加载失败，高亮功能不可用');
}
},
async fetchMN
Tags() {
try {
const response = await fetch('MN
Tag/?format=json');
const data = await response.json();
this.mn
Tags = data
.map(item => item.mnname)
.filter(name => name && name.trim().length > 0);
this.mn
TagMap = {};
data.forEach(item => {
if (item.id && item.mnname) {
this.mn
TagMap[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 || '',
mrorigin: data.mrorigin || '',
mrdoctor: data.mrdoctor || '',
mrposter: data.mrposter || ''
};
this.content = data.mrcase || '';
this.submittedId = data.id;
this.fetchId = null;
if (data.dn
tag && Array.isArray(data.dn
tag)) {
this.currentDn
Tags = data.dn
tag.map(id =>
this.dn
TagMap[id] || `未知標籤(${id})`
);
} else {
this.currentDn
Tags = [];
}
if (data.mn
tag && Array.isArray(data.mn
tag)) {
this.currentMn
Tags = data.mn
tag.map(id =>
this.mn
TagMap[id] || `未知草本(${id})`
);
} else {
this.currentMn
Tags = [];
}
if (data.sn
tag && Array.isArray(data.sn
tag)) {
this.currentSn
Tags = data.sn
tag.map(id =>
this.sn
TagMap[id] || `未知典籍(${id})`
);
} else {
this.currentSn
Tags = [];
}
if (data.pn
tag && Array.isArray(data.pn
tag)) {
this.currentPn
Tags = data.pn
tag.map(id =>
this.pn
TagMap[id] || `未知方劑(${id})`
);
} else {
this.currentPn
Tags = [];
}
if (data.fn
tag && Array.isArray(data.fn
tag)) {
this.currentFn
Tags = data.fn
tag.map(id =>
this.fn
TagMap[id] || `未知人物(${id})`
);
} else {
this.currentFn
Tags = [];
}
await this.fetchDN
Tags();
await this.fetchMN
Tags();
await this.fetchSN
Tags();
await this.fetchPN
Tags();
await this.fetchFN
Tags();
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,
mrorigin: this.formData.mrorigin,
mrdoctor: this.formData.mrdoctor,
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.dn
tag && Array.isArray(data.dn
tag)) {
this.currentDn
Tags = data.dn
tag.map(id =>
this.dn
TagMap[id] || `未知標籤(${id})`
);
} else {
this.currentDn
Tags = [];
}
if (data.mn
tag && Array.isArray(data.mn
tag)) {
this.currentMn
Tags = data.mn
tag.map(id =>
this.mn
TagMap[id] || `未知草本(${id})`
);
} else {
this.currentMn
Tags = [];
}
if (data.sn
tag && Array.isArray(data.sn
tag)) {
this.currentSn
Tags = data.sn
tag.map(id =>
this.sn
TagMap[id] || `未知典籍(${id})`
);
} else {
this.currentSn
Tags = [];
}
if (data.pn
tag && Array.isArray(data.pn
tag)) {
this.currentPn
Tags = data.pn
tag.map(id =>
this.pn
TagMap[id] || `未知方劑(${id})`
);
} else {
this.currentPn
Tags = [];
}
if (data.fn
tag && Array.isArray(data.fn
tag)) {
this.currentFn
Tags = data.fn
tag.map(id =>
this.fn
TagMap[id] || `未知人物(${id})`
);
} else {
this.currentFn
Tags = [];
}
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,
mrorigin: this.formData.mrorigin,
mrdoctor: this.formData.mrdoctor,
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.dn
tag && Array.isArray(data.dn
tag)) {
this.currentDn
Tags = data.dn
tag.map(id =>
this.dn
TagMap[id] || `未知標籤(${id})`
);
}
if (data.mn
tag && Array.isArray(data.mn
tag)) {
this.currentMn
Tags = data.mn
tag.map(id =>
this.mn
TagMap[id] || `未知草本(${id})`
);
}
if (data.sn
tag && Array.isArray(data.sn
tag)) {
this.currentSn
Tags = data.sn
tag.map(id =>
this.sn
TagMap[id] || `未知典籍(${id})`
);
}
if (data.pn
tag && Array.isArray(data.pn
tag)) {
this.currentPn
Tags = data.pn
tag.map(id =>
this.pn
TagMap[id] || `未知方劑(${id})`
);
}
if (data.fn
tag && Array.isArray(data.fn
tag)) {
this.currentFn
Tags = data.fn
tag.map(id =>
this.fn
TagMap[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}`);
}
}
}
};
</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;
}
.dn
tag-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);
}
.mn
tag-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);
}
.sn
tag-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);
}
.pn
tag-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);
}
.fn
tag-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;
}
.dn
tag-value, .mn
tag-value, .sn
tag-value, .pn
tag-value, .fn
tag-value {
flex-grow: 1;
padding-left: 10px;
}
.dn
tag-value {
border-left: 2px solid #ffc107;
}
.mn
tag-value {
border-left: 2px solid #4CAF50;
}
.sn
tag-value {
border-left: 2px solid #2196F3;
}
.pn
tag-value {
border-left: 2px solid #8A2BE2;
}
.fn
tag-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-in
put {
display: flex;
align-items: center;
}
.id-in
put in
put {
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-in
put {
margin-right: 10px;
}
.name-in
put, .origin-in
put, .doctor-in
put, .poster-in
put {
padding: 5px 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 150px;
}
</style>
mrdncrud:
<template>
<div class="dncrud-container">
<div class="dncrud-controls">
<in
put v-model="searchQuery"
placeholder="搜索病態名稱..."
class="search-in
put"
@in
put="filterDN
Tags" />
</div>
<!-- 创建表单 -->
<div class="form-section">
<form @submit.prevent="createDN
Tag" class="create-form">
<in
put v-model="newDN
Tag.dnname"
placeholder="輸入新病態名稱"
required
class="form-in
put"
:disabled="isLoading" />
<button type="submit" class="form-btn create-btn" :disabled="isLoading">創建</button>
</form>
</div>
<div class="dncrud-content">
<div v-if="isLoading" class="loading">
<div class="loading-spinner"></div>
<span>加載中...</span>
</div>
<div v-else>
<!-- 标签列表 -->
<div class="dncrud-list" v-if="filtered
Tags.length > 0">
<div v-for="
tag in filtered
Tags" :key="
tag.id" class="dncrud-item">
<div class="
tag-info">
<span class="
tag-id">ID: {{
tag.id }}</span>
<span class="
tag-name">{{
tag.dnname }}</span>
</div>
<div class="
tag-actions">
<button @click="editDN
Tag(
tag)" class="action-btn edit-btn">編輯</button>
<button @click="deleteDN
Tag(
tag.id)" class="action-btn delete-btn">刪除</button>
</div>
</div>
</div>
<div v-else class="no-
tags">
沒有找到匹配的病態標籤
</div>
</div>
</div>
<!-- 编辑模态框 -->
<div v-if="editing
Tag" class="edit-modal">
<div class="modal-content">
<h3>編輯病態名稱</h3>
<form @submit.prevent="updateDN
Tag">
<in
put v-model="editing
Tag.dnname"
required
class="form-in
put"
:disabled="isLoading" />
<div class="modal-actions">
<button type="submit" class="form-btn save-btn">保存</button>
<button type="button" @click="cancelEdit" class="form-btn cancel-btn">取消</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'mrdncrud',
data() {
return {
dn
Tags: [],
filtered
Tags: [],
searchQuery: '',
newDN
Tag: { dnname: '' },
editing
Tag: null,
isLoading: false
};
},
methods: {
async fetchDN
Tags() {
this.isLoading = true;
try {
const response = await fetch('DN
Tag/?format=json');
if (!response.ok) throw new Error('获取数据失败');
this.dn
Tags = await response.json();
this.filterDN
Tags();
} catch (error) {
console.error('获取病态标签失败:', error);
alert('加载数据失败，请重试');
} finally {
this.isLoading = false;
}
},
filterDN
Tags() {
const query = this.searchQuery.trim().toLowerCase();
if (!query) {
this.filtered
Tags = [...this.dn
Tags];
} else {
this.filtered
Tags = this.dn
Tags.filter(
tag =>
tag.dnname.toLowerCase().includes(query) ||
tag.id.toString().includes(query)
);
}
},
async createDN
Tag() {
if (!this.newDN
Tag.dnname.trim()) {
alert('病态名称
不能为空');
return;
}
this.isLoading = true;
try {
const response = await fetch('DN
Tag/?format=json', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(this.newDN
Tag),
});
if (!response.ok) throw new Error('创建失败');
await this.fetchDN
Tags();
this.newDN
Tag.dnname = '';
this.$emit('
tag-updated'); // 通知父组件标签已更新
} catch (error) {
console.error('创建病态标签失败:', error);
alert(error.message);
} finally {
this.isLoading = false;
}
},
editDN
Tag(
tag) {
this.editing
Tag = { ...
tag };
},
async updateDN
Tag() {
if (!this.editing
Tag.dnname.trim()) {
alert('病态名称
不能为空');
return;
}
this.isLoading = true;
try {
const response = await fetch(`DN
Tag/${this.editing
Tag.id}/?format=json`, {
method: '
PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(this.editing
Tag),
});
if (!response.ok) throw new Error('更新失败');
await this.fetchDN
Tags();
this.editing
Tag = null;
this.$emit('
tag-updated'); // 通知父组件标签已更新
} catch (error) {
console.error('更新病态标签失败:', error);
alert(error.message);
} finally {
this.isLoading = false;
}
},
cancelEdit() {
this.editing
Tag = null;
},
async deleteDN
Tag(id) {
if (!confirm('确定要删除这个病态标签吗？')) return;
this.isLoading = true;
try {
const response = await fetch(`DN
Tag/${id}/?format=json`, {
method: 'DELETE'
});
if (!response.ok) throw new Error('删除失败');
await this.fetchDN
Tags();
this.$emit('
tag-updated'); // 通知父组件标签已更新
} catch (error) {
console.error('删除病态标签失败:', error);
alert(error.message);
} finally {
this.isLoading = false;
}
}
},
mounted() {
this.fetchDN
Tags();
}
};
</script>
<style scoped>
.dncrud-container {
height: 100%;
display: flex;
flex-direction: column;
}
.dncrud-controls {
padding: 10px;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.search-in
put {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.dncrud-content {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.form-section {
padding: 10px;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.create-form {
display: flex;
gap: 10px;
}
.form-in
put {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-btn {
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.create-btn {
background-color: #4CAF50;
color: white;
}
.dncrud-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.dncrud-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: white;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.
tag-info {
display: flex;
flex-direction: column;
}
.
tag-id {
font-size: 0.8rem;
color: #666;
}
.
tag-name {
font-weight: 500;
}
.
tag-actions {
display: flex;
gap: 5px;
}
.action-btn {
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
.edit-btn {
background-color: #2196F3;
color: white;
}
.delete-btn {
background-color: #f44336;
color: white;
}
.no-
tags {
padding: 20px;
text-align: center;
color: #666;
font-style: italic;
}
.edit-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 15px;
}
.save-btn {
background-color: #4CAF50;
color: white;
}
.cancel-btn {
background-color: #9E9E9E;
color: white;
}
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.loading-spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4px solid #3498db;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin-bottom: 10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
本文讨论了在使用innerHTML时遇到的问题，特别是对于某些特定标签如tr、td、tbody和table等的操作可能导致文档解析错误的情况。
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
