USB纯DOS启动盘制作工具.rar

將mrdnrelate.vue的功能整合在mrviewer.vue中，而不再需要依賴mrdnrelate.vue： mrviewer.vue： <template>

<button @click="fetchData" class="refresh-btn">刷新數據</button> <button @click="toggleMNRelative" class="relative-btn"> {{ showMNRelative ? '本草關聯' : '本草關聯' }} </button> <button @click="togglePNRelative" class="relative-btn"> {{ showPNRelative ? '方劑關聯' : '方劑關聯' }} </button> <button @click="toggleSNRelative" class="relative-btn"> {{ showSNRelative ? '典籍關聯' : '典籍關聯' }} </button> <button @click="toggleFNRelative" class="relative-btn"> {{ showFNRelative ? '人物關聯' : '人物關聯' }} </button> <button @click="toggleDianNRelative" class="relative-btn"> {{ showDianNRelative ? '辨證關聯' : '辨證關聯' }} </button> <input v-model="searchQuery" placeholder="搜索..." class="search-input" />

每頁顯示: <select v-model.number="pageSize" class="page-size-select"> <option value="1">1筆</option> <option value="4">4筆</option> <option value="10">10筆</option> </select> <button @click="prevPage" :disabled="currentPage === 1">上一页</button> 第 <input type="number" v-model.number="inputPage" min="1" :max="totalPages" class="page-input" @input="handlePageInput"> 頁 / 共 {{ totalPages }} 頁 <button @click="nextPage" :disabled="currentPage === totalPages">下一頁</button> 醫案閱讀器

醫案 #{{ (currentPage - 1) * pageSize + index + 1 }}

{{ key }}:

；

沒有找到匹配的數據

<mrdnrelate v-if="showRelative" :currentCase="currentCase" :allTags="api2Data" @data-updated="handleDataUpdated" style="display: none;"></mrdnrelate> <mrmnrelate v-else-if="showMNRelative" :currentCase="currentCase" :allTags="api3Data" @data-updated="handleDataUpdated"></mrmnrelate> <mrpnrelate v-else-if="showPNRelative" :currentCase="currentCase" :allTags="api5Data" @data-updated="handleDataUpdated"></mrpnrelate> <mrsnrelate v-else-if="showSNRelative" :currentCase="currentCase" :allTags="api4Data" @data-updated="handleDataUpdated"></mrsnrelate> <mrfnrelate v-else-if="showFNRelative" :currentCase="currentCase" :allTags="api6Data" @data-updated="handleDataUpdated"></mrfnrelate> <mrdianrelate v-else-if="showDianNRelative" :currentCase="currentCase" :allTags="api7Data" @data-updated="handleDataUpdated"></mrdianrelate> 點按下方關聯器，顯示醫案相關專有名詞

</template> <script> import mrdnrelate from './mrdnrelate.vue'; import mrmnrelate from './mrmnrelate.vue'; import mrpnrelate from './mrpnrelate.vue'; import mrsnrelate from './mrsnrelate.vue'; import mrfnrelate from './mrfnrelate.vue'; import mrdianrelate from './mrdianrelate.vue'; // 导入辨證关联器组件 export default { name: 'mrviewer', components: { mrdnrelate, mrmnrelate, mrpnrelate, mrsnrelate, mrfnrelate, mrdianrelate }, data() { return { api1Data: [], api2Data: [], api3Data: [], api4Data: [], api5Data: [], api6Data: [], api7Data: [], // 辨證标签数据 mergedData: [], currentPage: 1, pageSize: 1, searchQuery: '', sortKey: '', sortOrders: {}, inputPage: 1, fieldNames: { 'mrcase': '醫案全文', 'mrorigin': '醫案出處', 'mrdoctor': '醫案醫者', 'mrname': '醫案命名', 'mrposter': '醫案提交者', 'mrlasttime': '最後編輯時間', 'mreditnumber': '編輯次數', 'mrreadnumber': '閱讀次數', 'mrpriority': '重要性', 'dntag': '相關病態', 'mntag': '相關本草', 'pntag': '相關方劑', 'sntag': '相關典籍', 'fntag': '相關人物', 'diantag': '相關辨證' // 新增辨證字段 }, inputTimeout: null, dnNames: [], mnNames: [], pnNames: [], snNames: [], fnNames: [], dianNames: [], // 辨證名称列表 stateVersion: '1.0', showRelative: true, // 保持功能但不再显示 showMNRelative: false, showPNRelative: false, showSNRelative: false, showFNRelative: false, showDianNRelative: false, // 控制辨證关联器显示 currentCase: null }; }, computed: { filteredData() { const query = this.searchQuery.trim(); if (query && /^\d+$/.test(query)) { const idToSearch = parseInt(query, 10); return this.mergedData.filter(item => item.id === idToSearch); } if (!query) return this.mergedData; const lowerQuery = query.toLowerCase(); return this.mergedData.filter(item => { return Object.values(item).some(value => { if (value === null || value === undefined) return false; if (Array.isArray(value)) { return value.some(subValue => { if (typeof subValue === 'object' && subValue !== null) { return JSON.stringify(subValue).toLowerCase().includes(lowerQuery); } return String(subValue).toLowerCase().includes(lowerQuery); }); } if (typeof value === 'object' && value !== null) { return JSON.stringify(value).toLowerCase().includes(lowerQuery); } return String(value).toLowerCase().includes(lowerQuery); }); }); }, sortedData() { if (!this.sortKey) return this.filteredData; const order = this.sortOrders[this.sortKey] || 1; return [...this.filteredData].sort((a, b) => { const getValue = (obj) => { const val = obj[this.sortKey]; if (Array.isArray(val)) return JSON.stringify(val); return val; }; const aValue = getValue(a); const bValue = getValue(b); if (aValue === bValue) return 0; return aValue > bValue ? order : -order; }); }, paginatedData() { const start = (this.currentPage - 1) * Number(this.pageSize); const end = start + Number(this.pageSize); const data = this.sortedData.slice(start, end); if (data.length > 0) { this.currentCase = data[0]; } else { this.currentCase = null; } return data; }, totalPages() { return Math.ceil(this.filteredData.length / this.pageSize) || 1; } }, watch: { pageSize() { this.currentPage = 1; this.inputPage = 1; this.saveState(); }, currentPage(newVal) { this.inputPage = newVal; this.saveState(); }, filteredData() { if (this.currentPage > this.totalPages) { this.currentPage = Math.max(1, this.totalPages); } this.inputPage = this.currentPage; }, searchQuery() { this.saveState(); } }, methods: { handleDataUpdated() { alert('數據已更新，正在刷新醫案數據...'); this.fetchData(); }, toggleMNRelative() { if (!this.showMNRelative) { this.showRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; } this.showMNRelative = !this.showMNRelative; }, togglePNRelative() { if (!this.showPNRelative) { this.showRelative = false; this.showMNRelative = false; this.showSNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; } this.showPNRelative = !this.showPNRelative; }, toggleSNRelative() { if (!this.showSNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; } this.showSNRelative = !this.showSNRelative; }, toggleFNRelative() { if (!this.showFNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showDianNRelative = false; } this.showFNRelative = !this.showFNRelative; }, // 辨證关联器切换方法 toggleDianNRelative() { if (!this.showDianNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; } this.showDianNRelative = !this.showDianNRelative; }, // 辨證名称HTML格式化方法 (使用红色) formatDiantagValueHTML(diantagArray) { return diantagArray.map(tagObj => { const name = tagObj.dianname || tagObj.name || '未命名標籤'; return `${this.escapeHtml(name)}`; }).join('；'); }, // 病态名称HTML格式化方法 (使用橙色) formatDntagValueHTML(dntagArray) { return dntagArray.map(tagObj => { const name = tagObj.dnname || tagObj.name || '未命名標籤'; return `${this.escapeHtml(name)}`; }).join('；'); }, // 本草名称HTML格式化方法 (使用绿色) formatMntagValueHTML(mntagArray) { return mntagArray.map(tagObj => { const name = tagObj.mnname || tagObj.name || '未命名標籤'; return `${this.escapeHtml(name)}`; }).join('；'); }, // 方剂名称HTML格式化方法 (使用紫色) formatPntagValueHTML(pntagArray) { return pntagArray.map(tagObj => { const name = tagObj.pnname || tagObj.name || '未命名標籤'; return `${this.escapeHtml(name)}`; }).join('；'); }, // 出处名称HTML格式化方法 (使用蓝色) formatSntagValueHTML(sntagArray) { return sntagArray.map(tagObj => { const name = tagObj.snname || tagObj.name || '未命名標籤'; return `${this.escapeHtml(name)}`; }).join('；'); }, // 人物名称HTML格式化方法 (使用棕色) formatFntagValueHTML(fntagArray) { return fntagArray.map(tagObj => { const name = tagObj.fnname || tagObj.name || '未命名標籤'; return `${this.escapeHtml(name)}`; }).join('；'); }, escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); }, saveState() { const state = { version: this.stateVersion, currentPage: this.currentPage, pageSize: this.pageSize, searchQuery: this.searchQuery, timestamp: new Date().getTime() }; sessionStorage.setItem('mrviewerState', JSON.stringify(state)); }, restoreState() { const savedState = sessionStorage.getItem('mrviewerState'); if (!savedState) return; try { const state = JSON.parse(savedState); if (state.version !== this.stateVersion) return; this.currentPage = state.currentPage || 1; this.pageSize = state.pageSize || 1; this.searchQuery = state.searchQuery || ''; this.inputPage = this.currentPage; } catch (e) { sessionStorage.removeItem('mrviewerState'); } }, clearState() { sessionStorage.removeItem('mrviewerState'); }, // 修改后的fetchData方法：保留当前页码 async fetchData() { try { // 保存当前页码 const oldPage = this.currentPage; // 获取原有数据 const api1Response = await fetch("MRInfo/?format=json"); this.api1Data = await api1Response.json(); const api2Response = await fetch("DNTag/?format=json"); this.api2Data = await api2Response.json(); const api3Response = await fetch("MNTag/?format=json"); this.api3Data = await api3Response.json(); const api4Response = await fetch("SNTag/?format=json"); this.api4Data = await api4Response.json(); const api5Response = await fetch("PNTag/?format=json"); this.api5Data = await api5Response.json(); const api6Response = await fetch("FNTag/?format=json"); this.api6Data = await api6Response.json(); // 辨證数据获取 const api7Response = await fetch("DiaNTag/?format=json"); this.api7Data = await api7Response.json(); // 本草名称列表 this.mnNames = this.api3Data.map(item => item.mnname).filter(name => name && name.trim()); this.mnNames.sort((a, b) => b.length - a.length); // 方剂名称列表 this.pnNames = this.api5Data.map(item => item.pnname).filter(name => name && name.trim()); this.pnNames.sort((a, b) => b.length - a.length); // 病态名称列表 this.dnNames = this.api2Data.map(item => item.dnname).filter(name => name && name.trim()); this.dnNames.sort((a, b) => b.length - a.length); // 出处名称列表 this.snNames = this.api4Data.map(item => item.snname).filter(name => name && name.trim()); this.snNames.sort((a, b) => b.length - a.length); // 人物名称列表 this.fnNames = this.api6Data.map(item => item.fnname).filter(name => name && name.trim()); this.fnNames.sort((a, b) => b.length - a.length); // 辨證名称列表 this.dianNames = this.api7Data.map(item => item.dianname).filter(name => name && name.trim()); this.dianNames.sort((a, b) => b.length - a.length); this.mergeData(); // 计算新数据的总页数 const newTotalPages = Math.ceil(this.filteredData.length / this.pageSize) || 1; // 调整页码（不超过新总页数） if (oldPage > newTotalPages) { this.currentPage = newTotalPages; // 超过范围时设为最后一页 } else { this.currentPage = oldPage; // 保持原页码 } this.inputPage = this.currentPage; this.saveState(); } catch (error) { console.error("獲取數據失敗:", error); alert("數據加載失敗，請稍後重試"); } }, mergeData() { this.mergedData = this.api1Data.map((item) => { const newItem = { ...item }; // 处理病态标签 if (newItem.dntag && Array.isArray(newItem.dntag)) { newItem.dntag = newItem.dntag.map((tagId) => { const matchedItem = this.api2Data.find(api2Item => api2Item.id === tagId); return matchedItem || { id: tagId, dnname: "未找到匹配的數據" }; }); } // 处理本草标签 if (newItem.mntag && Array.isArray(newItem.mntag)) { newItem.mntag = newItem.mntag.map((tagId) => { const matchedItem = this.api3Data.find(api3Item => api3Item.id === tagId); return matchedItem || { id: tagId, mnname: "未找到匹配的數據" }; }); } // 处理方剂标签 if (newItem.pntag && Array.isArray(newItem.pntag)) { newItem.pntag = newItem.pntag.map((tagId) => { const matchedItem = this.api5Data.find(api5Item => api5Item.id === tagId); return matchedItem || { id: tagId, pnname: "未找到匹配的數據" }; }); } // 处理出处标签 if (newItem.sntag && Array.isArray(newItem.sntag)) { newItem.sntag = newItem.sntag.map((tagId) => { const matchedItem = this.api4Data.find(api4Item => api4Item.id === tagId); return matchedItem || { id: tagId, snname: "未找到匹配的數據" }; }); } // 处理人物标签 if (newItem.fntag && Array.isArray(newItem.fntag)) { newItem.fntag = newItem.fntag.map((tagId) => { const matchedItem = this.api6Data.find(api6Item => api6Item.id === tagId); return matchedItem || { id: tagId, fnname: "未找到匹配的數據" }; }); } // 处理辨證标签 if (newItem.diantag && Array.isArray(newItem.diantag)) { newItem.diantag = newItem.diantag.map((tagId) => { const matchedItem = this.api7Data.find(api7Item => api7Item.id === tagId); return matchedItem || { id: tagId, dianname: "未找到匹配的數據" }; }); } return newItem; }); // 初始化排序顺序 this.sortOrders = {}; if (this.mergedData.length > 0) { Object.keys(this.mergedData[0]).forEach(key => { this.sortOrders[key] = 1; }); } }, processFieldNames(item) { const result = {}; for (const key in item) { const newKey = this.fieldNames[key] || key; result[newKey] = item[key]; } return result; }, formatValue(value, fieldName) { if (value === null || value === undefined) return ''; // 醫案全文的高亮 if (fieldName === '醫案全文' && typeof value === 'string') { let highlighted = this.highlightMatches(value, this.dnNames, 'rgb(212, 107, 8)'); highlighted = this.highlightMatches(highlighted, this.mnNames, 'rgb(0, 128, 0)'); highlighted = this.highlightMatches(highlighted, this.pnNames, 'rgb(128, 0, 128)'); highlighted = this.highlightMatches(highlighted, this.snNames, 'rgb(51, 102, 255)'); highlighted = this.highlightMatches(highlighted, this.fnNames, '#8B4513'); highlighted = this.highlightMatches(highlighted, this.dianNames, 'rgb(255, 0, 0)'); // 辨證高亮 return highlighted; } // 醫案出處字段 else if (fieldName === '醫案出處' && typeof value === 'string') { return this.highlightMatches(value, this.snNames, 'rgb(51, 102, 255)'); } // 醫案醫者字段 else if (fieldName === '醫案醫者' && typeof value === 'string') { return this.highlightMatches(value, this.fnNames, '#8B4513'); } if (typeof value === 'string' && value.startsWith('http')) { return `${value}`; } return value; }, highlightMatches(text, words, color) { if (!text || typeof text !== 'string' || words.length === 0) { return text; } const pattern = new RegExp( words .map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) .join('|'), 'gi' ); return text.replace(pattern, match => `${this.escapeHtml(match)}` ); }, prevPage() { if (this.currentPage > 1) { this.currentPage--; this.saveState(); } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++; this.saveState(); } }, handlePageInput() { clearTimeout(this.inputTimeout); this.inputTimeout = setTimeout(() => { this.goToPage(); this.saveState(); }, 300); }, goToPage() { if (this.inputPage === null || this.inputPage === undefined || this.inputPage === '') { this.inputPage = this.currentPage; return; } const page = parseInt(this.inputPage); if (isNaN(page)) { this.inputPage = this.currentPage; return; } if (page < 1) { this.currentPage = 1; } else if (page > this.totalPages) { this.currentPage = this.totalPages; } else { this.currentPage = page; } this.inputPage = this.currentPage; }, // 添加初始化方法 initViewer() { this.restoreState(); this.fetchData(); // 自动刷新数据 // 自动启动病态关联器（隐藏）和本草关联器（显示） this.initRelatives(); }, // 新增初始化关联器方法 initRelatives() { // 步骤1：启动病态关联（隐藏） this.showRelative = true; // 步骤2：启动本草关联（显示） this.showMNRelative = true; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; }, // 新增方法：触发本草关联器的刷新和手动新增功能 triggerMNRelateFunctions() { if (this.$refs.mnRelateComponent) { // 调用本草关联器内部的刷新方法 this.$refs.mnRelateComponent.fetchMNData(); // 调用本草关联器内部的手动新增方法 this.$refs.mnRelateComponent.manualAddAssociation(); } } }, mounted() { this.initViewer(); // 调用初始化方法 }, activated() { this.initViewer(); // 组件激活时也调用初始化 }, // 监听数据加载完成，然后触发本草关联器功能 updated() { if (this.showMNRelative && this.api3Data.length > 0) { this.$nextTick(() => { this.triggerMNRelateFunctions(); }); } }, deactivated() { this.saveState(); } }; </script> <style scoped> .container { max-width: 1200px; margin: 0px; padding: 0px; } .control-panel { margin-bottom: 0px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffd800ff; z-index: 999; padding: 10px 20px; box-sizing: border-box; } .content-area { position: fixed; top: 56px; bottom: 45px; left: 0; width: 70%; background: white; padding: 1px; z-index: 100; overflow-y: auto; } .relative-area { position: fixed; top: 56px; bottom: 45px; right: 0; width: 30%; background: lightblue; padding: 1px; z-index: 100; overflow-y: auto; } .refresh-btn, .relative-btn { padding: 4px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .refresh-btn:hover, .relative-btn:hover { background-color: #45a049; } .search-input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; flex-grow: 1; max-width: 300px; } .pagination-controls { display: flex; align-items: center; gap: 5px; } .page-size-select { padding: 4px; border-radius: 4px; width: 70px; } .page-input { width: 50px; padding: 4px; border: 1px solid #ddd; border-radius: 4px; text-align: center; } .horizontal-records { display: flex; flex-direction: column; gap: 20px; } .record-card { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .record-header { padding: 12px 16px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; } .record-header h3 { margin: 0; font-size: 1.1em; } .record-body { padding: 16px; } .record-field { display: flex; margin-bottom: 12px; line-height: 1.5; } .record-field:last-child { margin-bottom: 0; } .field-name { font-weight: bold; min-width: 120px; color: #555; } .field-value { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 8px; } .dntag-value { display: flex; flex-wrap: wrap; gap: 8px; } .mntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #006400; font-weight: 500; } .pntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #800080; font-weight: 500; } .sntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #0094ff; font-weight: 500; } .fntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #8B4513; font-weight: 500; } /* 辨證名称样式 */ .diantag-value { display: flex; flex-wrap: wrap; gap: 8px; color: rgb(255, 0, 0); font-weight: 500; } .array-value { display: flex; flex-wrap: wrap; gap: 8px; } .no-data { padding: 20px; text-align: center; color: #666; font-style: italic; } button:disabled { opacity: 0.5; cursor: not-allowed; } </style> mrdnrelate.vue： <template>

尚未與此醫案關聯的病態列表

顯示與當前醫案不同但相關的病態標籤（{{ filteredTags.length }}個）

{{ index + 1 }}. {{ tag.id }}: {{ tag.dnname || '未命名標籤' }}

沒有符合條件的相關病態標籤

醫案病態關聯管理

<button @click="fetchMRDNData" class="refresh-btn">刷新數據</button> <button @click="manualCreateMRDN" class="create-btn">手動新增關聯</button>

ID	醫案ID	病態ID	操作
{{ item.id }}	{{ item.mrinfo }} <textarea v-else v-model="item.editData.mrinfo" class="edit-textarea"></textarea>	{{ item.dntag }} <input v-else v-model="item.editData.dntag" type="text" class="edit-input">	<template v-if="!item.editing"> <button @click="startEdit(item)" class="edit-btn">編輯</button> <button @click="confirmDelete(item.id)" class="delete-btn">刪除</button> </template> <template v-else> <button @click="saveEdit(item)" class="save-btn">保存</button> <button @click="cancelEdit(item)" class="cancel-btn">取消</button> </template>

沒有醫案病態關聯數據

</template> <script> export default { name: 'mrdnrelate', props: { currentCase: { type: Object, default: null }, allTags: { type: Array, required: true } }, data() { return { mrdnData: [], isCreating: false, hasAutoCreated: false }; }, computed: { filteredTags() { if (!this.currentCase) return []; const currentTagIds = this.currentCase.dntag ? this.currentCase.dntag.map(tag => tag.id) : []; const caseContent = this.currentCase.mrcase || ''; const contentLower = caseContent.toLowerCase(); return this.allTags.filter(tag => { if (currentTagIds.includes(tag.id)) return false; if (!tag.dnname) return false; return contentLower.includes(tag.dnname.toLowerCase()); }); } }, watch: { currentCase: { immediate: true, handler(newVal) { if (newVal && newVal.id) { // 确保自动创建逻辑执行 this.autoCreateMRDN(); } } } }, methods: { async fetchMRDNData() { try { const response = await fetch("MRDN/?format=json"); const data = await response.json(); this.mrdnData = data.map(item => ({ id: item.id, mrinfo: item.mrinfo || '', dntag: item.dntag || '', editing: false, editData: { mrinfo: item.mrinfo || '', dntag: item.dntag || '' } })); } catch (error) { console.error("獲取MRDN數據失敗:", error); alert("MRDN數據加載失敗"); } }, async autoCreateMRDN() { if (this.isCreating) return; if (!this.currentCase || !this.currentCase.id) return; if (this.filteredTags.length === 0) return; if (this.hasAutoCreated) return; // 防止重复执行 try { this.isCreating = true; const createRequests = this.filteredTags.map(tag => { return fetch("MRDN/", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRFToken": this.getCSRFToken() }, body: JSON.stringify({ mrinfo: `${this.currentCase.id}`, dntag: `${tag.id}` }) }); }); const responses = await Promise.all(createRequests); const allSuccess = responses.every(res => res.ok); if (allSuccess) { console.log(`成功新增 ${this.filteredTags.length} 筆MRDN數據！`); this.fetchMRDNData(); this.triggerDataUpdate(); this.hasAutoCreated = true; // 标记已执行 } else { throw new Error("部分新增失敗"); } } catch (error) { console.error("批量新增MRDN失敗:", error); alert("自動新增關聯時發生錯誤"); } finally { this.isCreating = false; } }, async manualCreateMRDN() { try { await this.autoCreateMRDN(); if (this.filteredTags.length > 0) { alert(`成功新增 ${this.filteredTags.length} 筆MRDN數據！`); } } catch (error) { alert("新增過程中發生錯誤"); } }, startEdit(item) { item.editing = true; item.editData = { mrinfo: item.mrinfo, dntag: item.dntag }; }, cancelEdit(item) { item.editing = false; }, async saveEdit(item) { try { const response = await fetch(`MRDN/${item.id}/`, { method: "PUT", headers: { "Content-Type": "application/json", "X-CSRFToken": this.getCSRFToken() }, body: JSON.stringify({ mrinfo: item.editData.mrinfo, dntag: item.editData.dntag }) }); if (response.ok) { item.mrinfo = item.editData.mrinfo; item.dntag = item.editData.dntag; item.editing = false; alert("更新成功!"); this.triggerDataUpdate(); } else { throw new Error("更新失敗"); } } catch (error) { console.error("更新MRDN失敗:", error); alert("更新失敗"); } }, confirmDelete(id) { if (confirm("確定要刪除此數據嗎？")) { this.deleteMRDN(id); } }, async deleteMRDN(id) { try { const response = await fetch(`MRDN/${id}/`, { method: "DELETE", headers: { "X-CSRFToken": this.getCSRFToken() } }); if (response.ok) { this.mrdnData = this.mrdnData.filter(item => item.id !== id); alert("刪除成功!"); this.triggerDataUpdate(); } else { throw new Error("刪除失敗"); } } catch (error) { console.error("刪除MRDN失敗:", error); alert("刪除失敗"); } }, getCSRFToken() { return document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''; }, triggerDataUpdate() { this.$emit('data-updated'); } }, mounted() { // 确保自动执行刷新数据和新增关联 this.fetchMRDNData(); if (this.currentCase && this.currentCase.id) { this.autoCreateMRDN(); } } }; </script> <style scoped> .mrdnrelate-container { padding: 15px; background: #FFE0B2; /* 浅蓝色 -> 浅橙色 */ height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; } .tags-section { flex: 0 0 40%; overflow-y: auto; background: rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .divider { height: 2px; background: #FF9800; /* 蓝色 -> 橙色 */ margin: 10px 0; } .mrdn-section { flex: 1; overflow-y: auto; background: rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } h3 { margin-top: 0; padding-bottom: 8px; color: #2c3e50; text-align: center; border-bottom: 2px solid #FF9800; /* 蓝色 -> 橙色 */ } .filter-info { text-align: center; margin: 10px 0; font-size: 0.9em; color: #555; background: rgba(255, 255, 255, 0.3); padding: 5px; border-radius: 4px; } .dntag-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 15px; } .dntag-item { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.3s ease; border-left: 4px solid #FF9800; /* 蓝色 -> 橙色 */ } .tag-content { padding: 12px 15px; display: flex; align-items: center; } .tag-index { font-weight: bold; margin-right: 10px; min-width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; background: #FF9800; /* 蓝色 -> 橙色 */ color: white; border-radius: 50%; } .tag-name { flex-grow: 1; font-weight: 500; color: #2c3e50; } .no-tags, .no-data { padding: 25px; text-align: center; color: #666; font-style: italic; margin-top: 20px; border: 1px dashed #FF9800; /* 蓝色 -> 橙色 */ border-radius: 8px; background: rgba(255, 255, 255, 0.5); } /* MRDN数据管理样式 */ .mrdn-controls { display: flex; justify-content: space-between; margin-bottom: 15px; } .mrdn-controls button { padding: 6px 12px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; } .refresh-btn { background-color: #4CAF50; color: white; } .create-btn { background-color: #FF9800; /* 蓝色 -> 橙色 */ color: white; } .mrdn-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .mrdn-table th, .mrdn-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; } .mrdn-table th { background-color: #FF9800; /* 蓝色 -> 橙色 */ color: white; font-weight: bold; } .mrdn-table tr:hover { background-color: #f5f5f5; } .actions { display: flex; gap: 5px; } .actions button { padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; font-size: 0.85em; } .edit-btn { background-color: #FFC107; color: #333; } .delete-btn { background-color: #F44336; color: white; } .save-btn { background-color: #4CAF50; color: white; } .cancel-btn { background-color: #9E9E9E; color: white; } .edit-input, .edit-textarea { width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 3px; } .edit-textarea { min-height: 60px; resize: vertical; } </style>