以下mreditor.vue及mreditor.vue提交時，同時送到drf api上的同一id資料上的個別欄位中，提交按扭使用mreditor.vue上的按鈕，mreditor.vue上的按鈕取消掉：
mreditor.vue代碼：
<template>
<div>
<!-- 固定头部
<header class="sticky-header">
<div class="menu">
</div>
</header> -->
<!-- 主内容区（左右分栏） -->
<div>
<!-- 左侧编辑器 -->
<div class="wangeditor">
<WangEditor @response="(msg) => content = msg" />
</div>
<!-- 右侧面板（导入 mreditor1.vue） -->
<div class="right-
panel">
<mreditor1 />
</div>
</div>
<!-- 可切换显示的内容 -->
<div v-if="isVisible" class="content-display">
{{ content }}
</div>
<!-- 固定底部 -->
<footer class="sticky-footer">
<span>醫案編輯器</span>
<span><
button @click="toggleContent">顯示/隱藏標籤</
button></span>
<span><
button @click="submitContent">提交醫案</
button></span>
</footer>
</div>
</template>
<script>
import WangEditor from './WangEditor.vue';
import mreditor1 from './mreditor1.vue'; // 导入 mreditor1 组件
export default {
components: {
WangEditor,
mreditor1 // 注册组件
},
data() {
return {
content: '',
isVisible: true
};
},
methods: {
submitContent() {
fetch('MRInfo/?format=json', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ mrcase: this.content }),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch(error => {
console.error('Error:', error);
});
},
toggleContent() {
this.isVisible = !this.isVisible;
}
}
};
</script>
<style scoped>
/* 整体容器使用 Flex
布局 */
/* .container {*/
/* position: static;
/* display: flex;
/* flex-direction: column;
/* height: 100vh; /* 占满整个视口高度 */
/*
/* }
/* 主内容区（左右分栏） */
/* .main-content {*/
/* display: flex;
/* position: static;
/* flex: 1; /* 占据剩余
空间 */
/* margin-top: 90px; /* 为固定头部留出
空间 */
/* margin-bottom: 30px; /* 为固定底部留出
空间 */
/* /*overflow: hidden; /* 防止内容溢出 */
/* }
/* 左侧编辑器 */
.wangeditor {
flex: 1; /* 占据剩余
空间 */
padding: 10px;
overflow-y: auto; /* 可滚动 */
}
/* 右侧面板 */
.right-
panel {
/* display: flex;*/
/* width: 35%; /* 固定宽度 */
/* right: 0px;
/* padding: 10px;
/* border-left: 1px solid #ccc; /* 分隔线 */
/* overflow-y: auto; /* 可滚动 */
/* background: #f9f9f9; /* 可选
背景色 */
position: fixed;
top: 120px;
bottom: 45px; /* 位于底部按钮上方 */
right: 0;
width: 35%;
background: white;
padding: 10px;
z-index: 100;
/*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);*/
overflow-y: auto;
}
/* 可切换显示的内容 */
.content-display {
position: fixed;
bottom: 45px; /* 位于底部按钮上方 */
left: 0;
width: 100%;
background: white;
padding: 10px;
z-index: 100;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
/* 固定头部
.sticky-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ffd800ff;
z-index: 999;
text-align: center;
padding: 10px 0;
}
*/
/* 固定底部 */
.sticky-footer {
margin-bottom: 0px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffd800ff;
z-index: 999;
padding: 10px 20px;
box-sizing: border-box;
}
</style>
mreditor1.vue代碼：
<template>
<div class="editor-container">
<!-- 提交結果顯示在最上方 -->
<div v-if="submitStatus" class="submit-status" :class="{ 'error': isError }">
{{ submitStatus }}
</div>
<h2>醫案編輯器</h2>
<!-- 醫案名稱（對應 DRF 的 mrname） -->
<div class="form-
group">
<label for="mrname">醫案名稱:</label>
<input id="mrname"
v-model="formData.mrname"
type="text"
class="form-control"
placeholder="請輸入醫案名稱" />
</div>
<!-- 醫案提交者（對應 DRF 的 mrposter） -->
<div class="form-
group">
<label for="mrposter">醫案提交者:</label>
<input id="mrposter"
v-model="formData.mrposter"
type="text"
class="form-control"
placeholder="請輸入提交者姓名" />
</div>
<!-- 提交按鈕 -->
<
button @click="submitForm" class="submit-btn" :disabled="isSubmitting">
{{ isSubmitting ? "提交中..." : "提交醫案" }}
</
button>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
mrname: "", // 對應 DRF 的 mrname
mrposter: "", // 對應 DRF 的 mrposter
},
submitStatus: "", // 提交狀態提示
isError: false, // 是否為錯誤訊息
isSubmitting: false, // 是否正在提交
};
},
methods: {
async submitForm() {
if (!this.formData.mrname || !this.formData.mrposter) {
this.submitStatus = "請填寫完整資訊！";
this.isError = true;
return;
}
this.isSubmitting = true;
this.submitStatus = ""; // 清空舊狀態
this.isError = false;
try {
const response = await fetch("MRInfo/?format=json", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.formData),
});
if (response.ok) {
const data = await response.json();
this.submitStatus = `提交成功！醫案 ID: ${data.id}`;
this.resetForm(); // 清空表單
} else {
throw new Error("提交失敗，請檢查後端日誌！");
}
} catch (error) {
console.error("提交錯誤:", error);
this.submitStatus = "提交失敗: " + error.message;
this.isError = true;
} finally {
this.isSubmitting = false;
}
},
resetForm() {
this.formData = {
mrname: "",
mrposter: "",
};
},
},
};
</script>
<style scoped>
.editor-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.submit-status {
margin-bottom: 15px;
padding: 10px;
border-radius: 4px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.submit-status.error {
background-color: #f8d7da;
color: #721c24;
border-color: #f5c6cb;
}
.form-
group {
margin-bottom: 15px;
}
.form-control {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.submit-btn {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
.submit-btn:hover {
background-color: #45a049;
}
.submit-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
</style>
Flex对话框设计
本文介绍了一个使用Adobe Flex创建的对话框组件，详细展示了如何通过MXML定义对话框样式及交互逻辑，包括背景图片、按钮点击事件等。
扫一扫
60
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
