119 lines
3.1 KiB
Vue
119 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import {onMounted, ref} from "vue";
|
|
|
|
import Login from "./components/login/index.vue";
|
|
import DataFields from "./components/data-fields/index.vue";
|
|
import Product from "./components/product/index.vue";
|
|
import Field from "./components/field/index.vue";
|
|
import Result from "./components/result/index.vue";
|
|
|
|
import {MenuItem, Menu, Icon} from "view-ui-plus";
|
|
import {useHash} from "./service/router.ts";
|
|
|
|
const page_data = ref({
|
|
showLogin: false,
|
|
})
|
|
// 登录相关
|
|
const LOGIN_SESSION_KEY = 'x-yy-js-data-user';
|
|
const onLoginSuccess = () => {
|
|
page_data.value.showLogin = false
|
|
localStorage.setItem(LOGIN_SESSION_KEY, Date.now().toString(16));
|
|
}
|
|
onMounted(() => {
|
|
const loginSession = localStorage.getItem(LOGIN_SESSION_KEY);
|
|
console.log('loginSession', loginSession)
|
|
if (!loginSession || (Date.now() - parseInt(loginSession, 16) > 3600 * 24 * 1000)) {
|
|
page_data.value.showLogin = true
|
|
}
|
|
})
|
|
const MENU_LIST = [
|
|
{title: '药品管理', name: 'product', icon: 'ios-cube'},
|
|
{title: '数据项管理', name: 'field', icon: 'ios-apps'},
|
|
{title: '数据管理', name: 'product_value', icon: 'ios-paper'},
|
|
{title: '计算结果', name: 'result', icon: 'ios-calculator'},
|
|
]
|
|
const hash = useHash()
|
|
const activeMenu = ref((hash.value || MENU_LIST[0].name))
|
|
const onMenuSelect = (name: string) => {
|
|
activeMenu.value = name
|
|
window.location.hash = name
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<Login v-if="page_data.showLogin" @login-success="onLoginSuccess"/>
|
|
<!-- <Layout />-->
|
|
<div class="app-header">
|
|
<div class="app-logo">
|
|
<img class="logo" src="./assets/images/logo.png" alt=""/>
|
|
</div>
|
|
<div class="app-menu">
|
|
<Menu mode="horizontal" :active-name="activeMenu" @on-select="onMenuSelect">
|
|
<MenuItem v-for="m in MENU_LIST" :key="m.name" :name="m.name">
|
|
<Icon :type="m.icon" size="18"/>
|
|
<span>{{ m.title }}</span>
|
|
</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
<div class="app-content">
|
|
<DataFields v-if="activeMenu == 'product_value'"/>
|
|
<Field v-else-if="activeMenu == 'field'"/>
|
|
<Product v-else-if="activeMenu == 'product'"/>
|
|
<Result v-else/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.app-header {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: solid 1px #dcdee2;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 0 50px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.app-menu {
|
|
.ivu-menu {
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-content {
|
|
padding: 20px 50px;
|
|
}
|
|
|
|
.app-logo {
|
|
padding: 10px;
|
|
margin-right: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
body {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.logo {
|
|
height: 34px;
|
|
will-change: filter;
|
|
transition: filter 300ms;
|
|
}
|
|
|
|
</style>
|