TCM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

建立管理師控制頁

Browse Source
This commit is contained in:
威勝 張 2025-02-19 21:04:18 +08:00
parent 767406b14c
commit 3c6e478575
2 changed files with 123 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
layouts/defaultmanager.vue
View File

@ -53,7 +53,7 @@
aria-controls="collapseTwo" aria-controls="collapseTwo"
> >
<i class="fas fa-fw fa-cog"></i> <i class="fas fa-fw fa-cog"></i>
<span>Components</span> <span>設定</span>
</a> </a>
<div <div
id="collapseTwo" id="collapseTwo"
@ -61,10 +61,9 @@
aria-labelledby="headingTwo" aria-labelledby="headingTwo"
data-parent="#accordionSidebar" data-parent="#accordionSidebar"
> >
<div class="bg-white py-2 collapse-inner rounded"> <div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6> <h6 class="collapse-header">企業設定</h6>
<a class="collapse-item" href="buttons.html">Buttons</a> <a class="collapse-item" href="/Manage_pages/Health_Control_page">健康管理師管理</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div> </div>
</div> </div>
</li> </li>

119
pages/Manage_pages/Health_Control_page.vue Normal file
View File

@ -0,0 +1,119 @@
<template>
<div>
<button type="button" class="btn btn-primary" @click="add_health_manager">
新增健管師
</button>
<br /><br />
<div class="row">
<div v-for="company in companies" :key="company.guid" class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2" @click="edit_company(company.guid)">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
企業名稱：
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ company.campant_name }}</div>
</div>
<div class="col-auto">
<i class="fas fa-building fa-2x text-gray-300"></i> <!-- 改為企業圖標 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--新增管理師-彈跳視窗-->
<div>
<dialog ref="add_Company_view" class="dialog-box">
<div><button class="btn btn-danger" style="float:right" @click="close_add_Company_view">關閉</button>
<h2>新增管理師</h2>
</div>
<!-- 表單內容 -->
<div class="form-group">
<label for="companyName">企業名稱：</label>
<input id="companyName" v-model="companyName" type="text" class="form-control" placeholder="請輸入企業名稱">
</div>
<div class="form-group">
<label for="companyPhone">聯絡電話：</label>
<input id="companyPhone" v-model="companyPhone" type="tel" class="form-control" placeholder="請輸入聯絡電話">
</div>
<div class="form-group">
<label for="companyPhone">預設帳號：</label>
<input id="companyPhone" v-model="companyaccount" type="text" class="form-control"
placeholder="請輸入預設帳號">
</div>
<div class="form-group">
<label for="companyPhone">預設密碼：</label>
<input id="companyPhone" v-model="companypassword" type="text" class="form-control"
placeholder="請輸入預設密碼">
</div>
<!-- 操作按鈕 -->
<div class="button-group">
<button class="btn btn-success" @click="submitCompany">確認</button>
</div>
</dialog>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router"; //匯入路徑
const { $api_host } = useNuxtApp(); //匯入API host
const router = useRouter(); // 匯入
const add_Company_view = ref(null);
definePageMeta({
layout: 'defaultmanager' // 指定自定義的佈局名稱
})
//新增企業
async function add_health_manager() {
add_Company_view.value?.showModal();
}
//關閉 <新增企業-彈跳視窗>
function close_add_Company_view() {
add_Company_view.value?.close();
}
</script>
<style>
/* 簡單美化對話框 */
.dialog-box {
width: 50%;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.form-group {
margin-bottom: 10px;
}
.form-control {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.button-group {
display: flex;
justify-content: center;
/* 讓按鈕水平置中 */
margin-top: 15px;
}
</style>