zhaichao/oa_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基本样式变更

Browse Source
This commit is contained in:
zhaichao
2026-09-23 17:38:24 +08:00
parent e464c2ad13
commit 9a22980071
35 changed files with 413 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/tabs/workbench.vue
+101 -52
View File
@@ -1,41 +1,59 @@
<template>
<view class="page">
<fy-header title="工作台">
<fy-header :title="greet">
<template #right>
<text class="ico" @click="goSearch">搜</text>
<text class="ico" @click="goSearch">搜索</text>
</template>
</fy-header>
<view class="body">
<view class="hello">
<text class="hello-sub">今天也要高效完成工作</text>
</view>
<view class="stats">
<view class="stat" @click="goTodo">
<text class="sn">{{ todoCount }}</text>
<text class="sl">待办</text>
</view>
<view class="stat" @click="goApply">
<text class="sn">{{ flows.length }}</text>
<text class="sl">可发起</text>
</view>
<view class="stat" @click="openNotice">
<text class="sn">{{ apps.length }}</text>
<text class="sl">办公应用</text>
</view>
</view>
<view v-if="announce" class="notice" @click="openNotice">
<text class="nlab">公告 · {{ announce }}</text>
<text class="ntag">公告</text>
<text class="nlab">{{ announce }}</text>
<text class="arr">›</text>
</view>
<view class="sec-h">
<text class="sec-t">快捷办公</text>
<text class="more" @click="goApply">全部流程</text>
</view>
<view class="card apps">
<view class="cap">
<text>常用业务入口</text>
<text class="cap-sub more" @click="goApply">全部流程 ›</text>
</view>
<view v-if="!flows.length" class="empty">暂无可用审批流，请确认账号已开通申请权限</view>
<view class="grid">
<view v-for="a in flows" :key="a.key" class="app" @click="openFlow(a)">
<view class="icon"><text>{{ a.emoji }}</text></view>
<view class="icon"><text class="mark">{{ mark(a.label) }}</text></view>
<text class="al">{{ a.label }}</text>
<text v-if="a.desc" class="ad">{{ a.desc }}</text>
</view>
</view>
</view>
<view v-if="apps.length" class="sec-h">
<text class="sec-t">个人办公</text>
</view>
<view v-if="apps.length" class="card apps">
<view class="cap">
<text>个人办公</text>
<text class="cap-sub">按你的权限显示</text>
</view>
<view class="grid">
<view v-for="a in apps" :key="a.id" class="app" @click="open(a)">
<view class="icon">
<text>{{ a.icon }}</text>
<text class="mark">{{ mark(a.title) }}</text>
<text v-if="a.badge === 'todo' && todoCount" class="badge abs">{{ todoCount }}</text>
</view>
<text class="al">{{ a.title }}</text>
@@ -43,33 +61,36 @@
</view>
</view>
<view v-if="erp.length" class="sec-h">
<text class="sec-t">管理应用</text>
</view>
<view v-if="erp.length" class="card mods">
<view class="cap">
<text>管理应用</text>
<text class="cap-sub">Web 授权后才会出现</text>
</view>
<view v-for="m in erp" :key="m.id" class="mod" @click="open(m)">
<text class="mi">{{ m.icon }}</text>
<view class="mi"><text>{{ mark(m.title) }}</text></view>
<text class="mt">{{ m.title }}</text>
<text class="arr">›</text>
</view>
</view>
<view class="todo-head">
<view class="sec-h">
<view class="th">
<text>我的待办</text>
<text class="sec-t">我的待办</text>
<text v-if="todoCount" class="badge">{{ todoCount }}</text>
</view>
<text class="more" @click="goTodo">查看全部 ›</text>
<text class="more" @click="goTodo">查看全部</text>
</view>
<view v-if="!pending.length" class="empty-card">
<text class="et">暂无待办</text>
<text class="es">需要处理的审批和协同会出现在这里</text>
</view>
<view v-if="!pending.length" class="empty">暂无待办</view>
<view v-for="t in pending" :key="pendKey(t)" class="card todo" @click="openPending(t)">
<view class="av">{{ (t.submitter || t.applicant || '?').slice(0, 1) }}</view>
<view class="tm">
<text class="tag">{{ t.tag || t.typeLabel || t.type || '流程审批' }}</text>
<text class="tn">{{ t.title || t.no }}</text>
<text class="ts">{{ t.tag || t.typeLabel || t.type || '流程审批' }} · {{ t.submitter || '' }}</text>
<text class="ts">{{ t.submitter || '—' }}</text>
</view>
<text class="chip">{{ t.btn || '去办理' }}</text>
<text class="arr">›</text>
</view>
</view>
</view>
@@ -89,6 +110,12 @@ export default {
return { apps: [], erp: [], todos: [], pendingItems: [], shortcuts: [], todoCount: 0, announce: '', off: null }
},
computed: {
greet() {
const name = (store.me && store.me.name) || ''
const h = new Date().getHours()
const hi = h < 12 ? '上午好' : h < 18 ? '下午好' : '晚上好'
return name ? hi + '，' + name : '工作台'
},
flows() {
const fromApi = (this.shortcuts || []).map((s, i) => ({
key: 'sc-' + (s.to || s.label || i),
@@ -160,6 +187,7 @@ export default {
else toast('没有发起申请权限')
},
goTodo() { uni.navigateTo({ url: '/pages/todo/list' }) },
mark(s) { return String(s || '应').replace(/\s/g, '').slice(0, 1) },
pendKey(t) { return t.no || t.id || t.to || t.title },
openPending(t) {
if (t.source === 'work' || t.taskId) {
@@ -180,37 +208,58 @@ export default {
</script>
<style scoped>
.body { padding: 16rpx 24rpx 40rpx; }
.notice {
background: rgba(219, 225, 255, 0.4);
border: 1rpx solid #dbe1ff;
border-radius: 16rpx;
padding: 20rpx 24rpx;
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20rpx;
.body { padding: 8rpx 28rpx 48rpx; }
.hello { margin: 4rpx 4rpx 20rpx; }
.hello-sub { font-size: 26rpx; color: #6B7280; }
.stats { display: flex; gap: 16rpx; margin-bottom: 20rpx; }
.stat {
flex: 1; background: #fff; border-radius: 20rpx; padding: 22rpx 8rpx;
text-align: center; border: 1rpx solid rgba(17,24,39,0.06);
}
.nlab { font-size: 24rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arr { color: #737686; }
.apps, .mods { padding: 24rpx; margin-bottom: 20rpx; }
.cap { display: flex; justify-content: space-between; align-items: center; font-size: 30rpx; font-weight: 600; margin-bottom: 16rpx; border-bottom: 1rpx solid #eaedff; padding-bottom: 16rpx; }
.cap-sub { font-size: 22rpx; color: #737686; font-weight: 400; }
.sn { display: block; font-size: 36rpx; font-weight: 650; color: #1677FF; font-variant-numeric: tabular-nums; }
.sl { font-size: 24rpx; color: #6B7280; }
.notice {
background: #fff;
border: 1rpx solid rgba(17,24,39,0.06);
border-radius: 20rpx;
padding: 20rpx 24rpx;
display: flex; align-items: center;
margin-bottom: 8rpx;
}
.ntag { font-size: 22rpx; color: #EA8C00; background: #FFF6E8; border-radius: 8rpx; padding: 4rpx 10rpx; margin-right: 12rpx; }
.nlab { font-size: 26rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; }
.arr { color: #C4C9D4; font-size: 32rpx; margin-left: 8rpx; }
.sec-h { display: flex; justify-content: space-between; align-items: center; margin: 28rpx 4rpx 14rpx; }
.sec-t { font-size: 30rpx; font-weight: 650; color: #111827; }
.th { display: flex; align-items: center; gap: 10rpx; }
.more { font-size: 26rpx; color: #1677FF; }
.apps, .mods { padding: 12rpx 8rpx 20rpx; }
.grid { display: flex; flex-wrap: wrap; }
.app { width: 25%; display: flex; flex-direction: column; align-items: center; padding: 16rpx 4rpx; box-sizing: border-box; }
.icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; background: #f2f3ff; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 8rpx; font-size: 32rpx; }
.icon {
width: 88rpx; height: 88rpx; border-radius: 24rpx; background: #F3F6FB;
display: flex; align-items: center; justify-content: center;
position: relative; margin-bottom: 10rpx;
}
.mark { font-size: 30rpx; font-weight: 650; color: #1677FF; }
.abs { position: absolute; top: -8rpx; right: -8rpx; }
.al { font-size: 22rpx; text-align: center; }
.ad { font-size: 18rpx; color: #737686; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod { display: flex; align-items: center; padding: 20rpx 0; border-top: 1rpx solid #eaedff; }
.mi { width: 48rpx; }
.al { font-size: 24rpx; text-align: center; color: #111827; line-height: 1.35; }
.mod { display: flex; align-items: center; padding: 22rpx 16rpx; }
.mod + .mod { border-top: 1rpx solid #F0F2F5; }
.mi {
width: 64rpx; height: 64rpx; border-radius: 16rpx; background: #F3F6FB;
color: #1677FF; display: flex; align-items: center; justify-content: center;
font-weight: 650; margin-right: 16rpx;
}
.mt { flex: 1; font-size: 28rpx; }
.todo-head { display: flex; justify-content: space-between; align-items: center; margin: 16rpx 8rpx; }
.th { display: flex; align-items: center; gap: 10rpx; font-size: 30rpx; font-weight: 600; }
.more { font-size: 22rpx; color: #434655; }
.todo { display: flex; align-items: center; padding: 24rpx; margin-bottom: 16rpx; }
.av { width: 80rpx; height: 80rpx; border-radius: 50%; background: #dbe1ff; color: #004ac6; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tm { flex: 1; margin: 0 16rpx; min-width: 0; }
.todo { display: flex; align-items: center; padding: 24rpx 24rpx; margin-bottom: 16rpx; }
.tm { flex: 1; min-width: 0; }
.tag { display: inline-block; font-size: 22rpx; color: #1677FF; background: #E8F1FF; border-radius: 8rpx; padding: 2rpx 10rpx; margin-bottom: 8rpx; }
.tn { display: block; font-size: 28rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts { font-size: 22rpx; color: #737686; }
.empty { padding: 24rpx; text-align: center; color: #737686; font-size: 24rpx; }
.ico { padding: 8rpx 16rpx; }
.ts { display: block; font-size: 24rpx; color: #6B7280; margin-top: 4rpx; }
.empty { padding: 28rpx; text-align: center; color: #6B7280; font-size: 26rpx; }
.empty-card { background: #fff; border-radius: 24rpx; padding: 48rpx 32rpx; text-align: center; border: 1rpx solid rgba(17,24,39,0.06); }
.et { display: block; font-size: 28rpx; font-weight: 600; }
.es { display: block; font-size: 24rpx; color: #6B7280; margin-top: 8rpx; }
.ico { padding: 8rpx 8rpx; font-size: 28rpx; color: #1677FF; }
</style>