DIGITAL_MANAGEMENT
/
finance
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

资源管理界面tab栏固定和发起申请按钮样式

apply^2
Min5203 4 years ago
parent
5b4043ba09
commit
c51474ac2f
5 changed files with 94 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components/RingEcharts.vue
  2. 28
      pages/applicant.vue
  3. 12
      pages/application-details.vue
  4. 9
      pages/financial-approval-details.vue
  5. 160
      pages/index.vue

1
components/RingEcharts.vue
View File

@ -12,7 +12,6 @@ onMounted(()=>{
if(props.id){
var myChart = echarts.init(document.getElementById(props.id));
}
const data = [
{
name: '办公费',

28
pages/applicant.vue
View File

@ -9,24 +9,27 @@
title-active-color="#59B4FF"
>
<van-tab title="我的申请">
<div class="mt-8 bg-white flex flex-col">
<div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div>
<Search class="px-4 pt-0" />
<HistoricalApplication class="px-4 mt-0" />
</div>
<!-- 底部提交按钮部分 -->
<div class="mt-20" @click="toApplication">
<van-button type="primary" block>发起申请</van-button>
<div class="h-full bg-white px-4">
<div class="mt-4 flex flex-col h-96 overflow-hidden">
<div class="py-4 pb-0 text-gray-500 font-semibold">历史申请</div>
<Search class="px-4 pt-0" />
<HistoricalApplication class="px-4 mt-0" />
</div>
<!-- 底部提交按钮部分 -->
<div class="fixed w-11/12 box-border bottom-10 " @click="toApplication">
<van-button type="primary" block size="small">发起申请</van-button>
</div>
</div>
</van-tab>
<van-tab title="我的奖金">
<div class="mt-8 bg-white">
<div class="mt-4 bg-white">
<div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
<Search class="px-4 pt-0" />
<BonusCollection class="px-4 mt-0" />
</div>
<div class="my-4 bg-white">
<div class="mt-4 bg-white">
<div class="text-gray-500 font-semibold m-4 py-3 border-b">
待领取奖金
</div>
@ -61,13 +64,8 @@ import { useRouter } from 'vue-router';
const router = useRouter();
const active = ref(0);
const isShow = ref(true);
const isBonus = ref(true);
function onClickLeft() {
console.log('返回上一页');
}
function toApplication() {
const routeValue = router.currentRoute.value;
const query = routeValue.query;

12
pages/application-details.vue
View File

@ -1,14 +1,5 @@
<template>
<div>
<!-- 导航栏 -->
<NuxtLink to="Initiate-application">
<van-nav-bar
title="申请详情"
left-arrow
@click-left="onClickLeft"
/>
</NuxtLink>
<!-- 审核结果 -->
<div class="bg-white px-3">
<div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
@ -164,9 +155,6 @@ const submitter = ref([
},
])
function onClickLeft(){
console.log("上一页")
}
/**
* 查询申请详情

9
pages/financial-approval-details.vue
View File

@ -1,11 +1,5 @@
<template>
<div>
<van-nav-bar
title="财务审批详情"
left-arrow
@click-left="onClickLeft"
/>
<!-- 发票信息 -->
<div class="bg-white px-3">
<div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
@ -173,9 +167,6 @@ const checkerList = ref([
}
]);
function onClickLeft(){
console.log('返回')
}
</script>
<style lang="less" scoped>

160
pages/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="mb-60">
<div class="fixed bg-gray-100">
<van-tabs
v-model:active="active"
shrink
@ -8,98 +8,100 @@
title-active-color="#59B4FF"
>
<van-tab title="财务管理">
<!-- 财务管理页面 -->
<div class="bg-white p-4 mt-5 text-gray-500 flex-col">
<div>
<span class="font-semibold" id="finance-manage">财务管理</span>
<span class="ml-2">对项目预算、奖金进行配置</span>
</div>
<Search />
<FinanceManage />
</div>
<!-- 财务审批页面 -->
<div class="bg-white p-4 mt-5 text-gray-500 flex-col">
<div>
<span class="font-semibold" id="finance-audit">财务审批</span>
<span class="ml-2">对员工提交的申请进行审批</span>
</div>
<Search />
<FinanceExamine />
</div>
<!-- 财务统计页面 -->
<div class="bg-white p-4 mt-5 text-gray-500 flex-col">
<div>
<span class="font-semibold" id="finance-statistical">财务统计</span>
<span class="ml-2">财务明细统计查看</span>
</div>
<!-- 任务支出统计 -->
<div class="h-64 overflow-hidden">
<div class="mt-5 flex justify-between">
<div class="h-screen overflow-y-scroll w-screen mt-4">
<!-- 财务管理页面 -->
<div class="bg-white p-4 text-gray-500 flex-col">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>任务支出统计</span>
<span class="font-semibold" id="finance-manage">财务管理</span>
<span class="ml-2">对项目预算、奖金进行配置</span>
</div>
<Search />
<FinanceManage />
</div>
<!-- 财务审批页面 -->
<div class="bg-white p-4 mt-5 text-gray-500 flex-col">
<div>
<van-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</van-button>
<van-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</van-button>
<span class="font-semibold" id="finance-audit">财务审批</span>
<span class="ml-2">对员工提交的申请进行审批</span>
</div>
</div>
<!-- 任务支出统计的图表展示 -->
<div v-show="taskState">
<!-- <van-empty description="暂无图表数据信息" /> -->
<RingEcharts class="w-full h-full" id="taskEcharts"/>
</div>
<!-- 任务支出统计的表格展示 -->
<div v-show="!taskState">
<Search />
<FinanceExamine />
</div>
</div>
<!-- 名目支出统计 -->
<div class="h-64 overflow-hidden">
<div class="mt-5 flex justify-between">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>名目支出统计</span>
<!-- 财务统计页面 -->
<div class="bg-white p-4 mt-5 mb-60 text-gray-500 flex-col">
<div>
<span class="font-semibold" id="finance-statistical">财务统计</span>
<span class="ml-2">财务明细统计查看</span>
</div>
<!-- 任务支出统计 -->
<div class="h-64 overflow-hidden">
<div class="mt-5 flex justify-between">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>任务支出统计</span>
</div>
<div>
<van-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</van-button>
<van-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</van-button>
</div>
</div>
<div>
<van-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</van-button>
<van-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</van-button>
<!-- 任务支出统计的图表展示 -->
<div v-show="taskState">
<!-- <van-empty description="暂无图表数据信息" /> -->
<RingEcharts class="w-full h-full" id="taskEcharts"/>
</div>
<!-- 任务支出统计的表格展示 -->
<div v-show="!taskState">
<FinanceExamine />
</div>
</div>
<!-- 名目支出统计的图表展示 -->
<div v-show="nameState">
<!-- <van-empty description="暂无图表数据信息" /> -->
<RingEcharts class="w-full h-full" id="nameEcharts"/>
</div>
<!-- 名目支出统计的表格展示 -->
<div v-show="!nameState">
<FinanceExamine />
<!-- 名目支出统计 -->
<div class="h-64 overflow-hidden">
<div class="mt-5 flex justify-between">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>名目支出统计</span>
</div>
<div>
<van-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</van-button>
<van-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</van-button>
</div>
</div>
<!-- 名目支出统计的图表展示 -->
<div v-show="nameState">
<!-- <van-empty description="暂无图表数据信息" /> -->
<RingEcharts class="w-full h-full" id="nameEcharts"/>
</div>
<!-- 名目支出统计的表格展示 -->
<div v-show="!nameState">
<FinanceExamine />
</div>
</div>
</div>
<!-- 成员财务图 -->
<div class="h-64 overflow-hidden">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>成员财务图</span>
</div>
<RingEcharts class="w-full h-full" id="memberEcharts"/>
</div>
<!-- 时间财务图 -->
<div class="overflow-hidden">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>时间财务图</span>
<!-- 成员财务图 -->
<div class="h-64 overflow-hidden">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>成员财务图</span>
</div>
<RingEcharts class="w-full h-full" id="memberEcharts"/>
</div>
<BarEcharts class="w-full h-full mt-5" />
<!-- 时间财务图 -->
<div class="overflow-hidden">
<div>
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
<span>时间财务图</span>
</div>
<BarEcharts class="w-full h-full mt-5" />
<!-- 没有数据展示空组件 -->
<!-- <van-empty description="暂无图表数据信息" /> -->
</div>
<!-- 没有数据展示空组件 -->
<!-- <van-empty description="暂无图表数据信息" /> -->
</div>
</div>
</div>
</van-tab>
<van-tab title="角色管理">角色管理</van-tab>
<van-tab title="任务管理">任务管理</van-tab>
<van-tab title="成员管理">成员管理</van-tab>
<van-tab title="角色管理"> <div class="h-screen overflow-y-scroll w-screen mt-4">角色管理</div></van-tab>
<van-tab title="任务管理"><div class="h-screen overflow-y-scroll w-screen mt-4">任务管理</div></van-tab>
<van-tab title="成员管理"><div class="h-screen overflow-y-scroll w-screen mt-4">成员管理</div></van-tab>
</van-tabs>
<div class="menu">

Write Preview
Loading…
Cancel
Save