以下子組件依上述修改：
<!
-- mrdnrelate.vue
-->
<template>
<div class="mrdnrelate
-c
onta
iner">
<!
-- 相关病态区域（上方）
-->
<div class="tags
-secti
on">
<h3>尚未與此醫案關聯的病態列表</h3>
<div class="filter
-info" v
-if="filteredTags.length > 0">
顯示與當前醫案不同但相關的病態標籤（{{ filteredTags.length }}個）
</div>
<div v
-if="filteredTags.length > 0" class="dntag
-list">
<div v
-for="
(tag,
index
) in filteredTags"
:key="tag.id" class="dntag
-item">
<div class="tag
-c
ontent">
<span class="tag
-index">{{
index + 1 }}.</span>
<span class="tag
-name">{{ tag.id }}
: {{ tag.dnname || '未命名標籤' }}</span>
</div>
</div>
</div>
<div v
-else class="no
-tags">
沒有符合條件的相關病態標籤
</div>
</div>
<!
-- 分隔线
-->
<div class="divider"></div>
<!
-- MRDN数据区域（下方）
-->
<div class="mrdn
-secti
on">
<h3>醫案病態關聯管理</h3>
<!
-- 操作按钮
-->
<div class="mrdn
-c
ontrols">
<butt
on @click="fetchMRDNData" class="refresh
-btn">刷新數據</butt
on>
<butt
on @click="manualCreateMRDN" class="create
-btn">手動新增關聯</butt
on>
</div>
<!
-- 数据列表
-->
<div v
-if="mrdnData.length > 0" class="mrdn
-list">
<table class="mrdn
-table">
<thead>
<tr>
<th>ID</th>
<th>醫案ID</th>
<th>病態ID</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v
-for="item
in mrdnData"
:key="item.id">
<td>{{ item.id }}</td>
<td>
<span v
-if="!item.edit
ing">{{ item.mr
info }}</span>
<textarea v
-else v
-model="item.editData.mr
info" class="edit
-textarea"></textarea>
</td>
<td>
<span v
-if="!item.edit
ing">{{ item.dntag }}</span>
<
input v
-else v
-model="item.editData.dntag" type="text" class="edit
-input">
</td>
<td class="acti
ons">
<template v
-if="!item.edit
ing">
<butt
on @click="startEdit
(item
)" class="edit
-btn">編輯</butt
on>
<butt
on @click="c
onfirmDelete
(item.id
)" class="delete
-btn">刪除</butt
on>
</template>
<template v
-else>
<butt
on @click="saveEdit
(item
)" class="save
-btn">保存</butt
on>
<butt
on @click="
cancelEdit
(item
)" class="
cancel-btn">取消</butt
on>
</template>
</td>
</tr>
</tbody>
</table>
</div>
<div v
-else class="no
-data">
沒有醫案病態關聯數據
</div>
</div>
</div>
</template>
<script>
import { secureFetch } from '../utils/request';
export default {
name
: 'mrdnrelate',
props
: {
currentCase
: {
type
: Object,
default
: null
},
allTags
: {
type
: Array,
required
: true
}
},
data
() {
return {
mrdnData
: [],
isCreat
ing
: false,
hasAutoCreated
: false
};
},
computed
: {
filteredTags
() {
if
(!this.currentCase
) return [];
c
onst currentTagIds = this.currentCase.dntag
? this.currentCase.dntag.map
(tag => tag.id
)
: [];
c
onst caseC
ontent = this.currentCase.mrcase || '';
c
onst c
ontentLower = caseC
ontent.toLowerCase
();
return this.allTags.filter
(tag => {
if
(currentTagIds.
includes
(tag.id
)) return false;
if
(!tag.dnname
) return false;
return c
ontentLower.
includes
(tag.dnname.toLowerCase
());
}
);
}
},
watch
: {
currentCase
: {
immediate
: true,
handler(newVal
) {
if
(newVal && newVal.id
) {
// 确保自动创建逻辑执行
this.autoCreateMRDN
();
}
}
}
},
methods
: {
async fetchMRDNData
() {
try {
c
onst resp
onse = await fetch
("MRDN/?format=js
on"
);
c
onst data = await resp
onse.js
on();
this.mrdnData = data.map
(item =>
({
id
: item.id,
mr
info
: item.mr
info || '',
dntag
: item.dntag || '',
edit
ing
: false,
editData
: {
mr
info
: item.mr
info || '',
dntag
: item.dntag || ''
}
}
));
} catch
(error) {
c
onsole.
error("獲取MRDN數據失敗
:",
error);
alert
("MRDN數據加載失敗"
);
}
},
async autoCreateMRDN
() {
if
(this.isCreat
ing
) return;
if
(!this.currentCase || !this.currentCase.id
) return;
if
(this.filteredTags.length === 0
) return;
if
(this.hasAutoCreated
) return; // 防止重复执行
try {
this.isCreat
ing = true;
c
onst createRequests = this.filteredTags.map
(tag => {
return secureFetch
("MRDN/", {
method
: "POST",
headers
: {
"C
ontent
-Type"
: "applicati
on/js
on",
"X
-CSRFToken"
: this.getCSRFToken
()
},
body
: JS
ON.str
ingify
({
mr
info
: `${this.currentCase.id}`,
dntag
: `${tag.id}`
}
)
}
);
}
);
c
onst resp
onses = await
Promise.all
(createRequests
);
c
onst allSuccess = resp
onses.every
(res => res.ok
);
if
(allSuccess
) {
c
onsole.log
(`成功新增 ${this.filteredTags.length} 筆MRDN數據！`
);
this.fetchMRDNData
();
this.triggerDataUpdate
();
this.hasAutoCreated = true; // 标记已执行
} else {
throw new
Error("部分新增失敗"
);
}
} catch
(error) {
c
onsole.
error("批量新增MRDN失敗
:",
error);
alert
("自動新增關聯時發生錯誤"
);
} f
inally {
this.isCreat
ing = false;
}
},
async manualCreateMRDN
() {
try {
await this.autoCreateMRDN
();
if
(this.filteredTags.length > 0
) {
alert
(`成功新增 ${this.filteredTags.length} 筆MRDN數據！`
);
}
} catch
(error) {
alert
("新增過程中發生錯誤"
);
}
},
startEdit
(item
) {
item.edit
ing = true;
item.editData = {
mr
info
: item.mr
info,
dntag
: item.dntag
};
},
cancelEdit
(item
) {
item.edit
ing = false;
},
async saveEdit
(item
) {
try {
c
onst resp
onse = await secureFetch
(`MRDN/${item.id}/`, {
method
: "PUT",
headers
: {
"C
ontent
-Type"
: "applicati
on/js
on",
"X
-CSRFToken"
: this.getCSRFToken
()
},
body
: JS
ON.str
ingify
({
mr
info
: item.editData.mr
info,
dntag
: item.editData.dntag
}
)
}
);
if
(resp
onse.ok
) {
item.mr
info = item.editData.mr
info;
item.dntag = item.editData.dntag;
item.edit
ing = false;
alert
("更新成功!"
);
this.triggerDataUpdate
();
} else {
throw new
Error("更新失敗"
);
}
} catch
(error) {
c
onsole.
error("更新MRDN失敗
:",
error);
alert
("更新失敗"
);
}
},
c
onfirmDelete
(id
) {
if
(c
onfirm
("確定要刪除此數據嗎？"
)) {
this.deleteMRDN
(id
);
}
},
async deleteMRDN
(id
) {
try {
c
onst resp
onse = await secureFetch
(`MRDN/${id}/`, {
method
: "DELETE",
headers
: {
"X
-CSRFToken"
: this.getCSRFToken
()
}
}
);
if
(resp
onse.ok
) {
this.mrdnData = this.mrdnData.filter
(item => item.id !== id
);
alert
("刪除成功!"
);
this.triggerDataUpdate
();
} else {
throw new
Error("刪除失敗"
);
}
} catch
(error) {
c
onsole.
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
-c
onta
iner {
padd
ing
: 15px;
background
: #FFE0B2; /* 浅蓝色
-> 浅橙色 */
height
: 100%;
overflow
-y
: auto;
display
: flex;
flex
-directi
on: column;
gap
: 15px;
}
.tags
-secti
on {
flex
: 0 0 40%;
overflow
-y
: auto;
background
: rgba
(255, 255, 255, 0.3
);
border
-radius
: 8px;
padd
ing
: 15px;
box
-shadow
: 0 2px 8px rgba
(0,0,0,0.1
);
}
.divider {
height
: 2px;
background
: #FF9800; /* 蓝色
-> 橙色 */
marg
in: 10px 0;
}
.mrdn
-secti
on {
flex
: 1;
overflow
-y
: auto;
background
: rgba
(255, 255, 255, 0.3
);
border
-radius
: 8px;
padd
ing
: 15px;
box
-shadow
: 0 2px 8px rgba
(0,0,0,0.1
);
}
h3 {
marg
in-top
: 0;
padd
ing
-bottom
: 8px;
color
: #2c3e50;
text
-align
: center;
border
-bottom
: 2px solid #FF9800; /* 蓝色
-> 橙色 */
}
.filter
-info {
text
-align
: center;
marg
in: 10px 0;
f
ont
-size
: 0.9em;
color
: #555;
background
: rgba
(255, 255, 255, 0.3
);
padd
ing
: 5px;
border
-radius
: 4px;
}
.dntag
-list {
display
: grid;
grid
-template
-columns
: 1fr;
gap
: 12px;
marg
in-top
: 15px;
}
.dntag
-item {
background
: #fff;
border
-radius
: 8px;
box
-shadow
: 0 2px 8px rgba
(0,0,0,0.1
);
overflow
: hidden;
transiti
on: all 0.3s ease;
border
-left
: 4px solid #FF9800; /* 蓝色
-> 橙色 */
}
.tag
-c
ontent {
padd
ing
: 12px 15px;
display
: flex;
align
-items
: center;
}
.tag
-index {
f
ont
-weight
: bold;
marg
in-right
: 10px;
m
in-width
: 25px;
height
: 25px;
display
: flex;
align
-items
: center;
justify
-c
ontent
: center;
background
: #FF9800; /* 蓝色
-> 橙色 */
color
: white;
border
-radius
: 50%;
}
.tag
-name {
flex
-grow
: 1;
f
ont
-weight
: 500;
color
: #2c3e50;
}
.no
-tags, .no
-data {
padd
ing
: 25px;
text
-align
: center;
color
: #666;
f
ont
-style
: italic;
marg
in-top
: 20px;
border
: 1px dashed #FF9800; /* 蓝色
-> 橙色 */
border
-radius
: 8px;
background
: rgba
(255, 255, 255, 0.5
);
}
/* MRDN数据管理样式 */
.mrdn
-c
ontrols {
display
: flex;
justify
-c
ontent
: space
-between;
marg
in-bottom
: 15px;
}
.mrdn
-c
ontrols butt
on {
padd
ing
: 6px 12px;
border
-radius
: 4px;
border
: n
one;
cursor
: po
inter;
f
ont
-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 {
padd
ing
: 12px 15px;
text
-align
: left;
border
-bottom
: 1px solid #eee;
}
.mrdn
-table th {
background
-color
: #FF9800; /* 蓝色
-> 橙色 */
color
: white;
f
ont
-weight
: bold;
}
.mrdn
-table tr
:hover {
background
-color
: #f5f5f5;
}
.acti
ons {
display
: flex;
gap
: 5px;
}
.acti
ons butt
on {
padd
ing
: 5px 10px;
border
: n
one;
border
-radius
: 3px;
cursor
: po
inter;
f
ont
-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%;
padd
ing
: 5px;
border
: 1px solid #ddd;
border
-radius
: 3px;
}
.edit
-textarea {
m
in-height
: 60px;
resize
: vertical;
}
</style>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
