gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf: 工作汇报样式

Browse Source
This commit is contained in:
kuaifan 2022-01-14 17:57:51 +08:00
parent e63c5c074c
commit ede298a142
9 changed files with 263 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/Api/ReportController.php
View File

@ -189,7 +189,7 @@ class ReportController extends AbstractController
}
} );
return Base::retSuccess('success');
return Base::retSuccess('保存成功');
}
/**

15
resources/assets/js/components/DrawerOverlay.vue
View File

@ -1,5 +1,10 @@
<template>
<div :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']">
<transition name="transition-drop">
<div
:data-transfer="transfer"
:transfer="transfer"
v-transfer-dom
:class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']">
<div class="overlay-mask" @click="mask"></div>
<div class="overlay-body" :style="bodyStyle">
<div class="overlay-close">
@ -13,13 +18,17 @@
<div class="overlay-content"><slot/></div>
</div>
</div>
</transition>
</template>
<script>
import ResizeLine from "./ResizeLine";
import TransferDom from '../directives/transfer-dom';
export default {
name: 'DrawerOverlay',
components: {ResizeLine},
directives: { TransferDom },
props: {
value: {
type: Boolean,
@ -47,6 +56,10 @@
type: Boolean,
default: true
},
transfer: {
type: Boolean,
default: false
},
},
data() {

17
resources/assets/js/components/TEditor.vue
View File

@ -76,6 +76,10 @@
height: {
default: 360,
},
minHeight: {
type: Number,
default: 0,
},
htmlClass: {
default: '',
type: String
@ -115,6 +119,10 @@
type: Boolean,
default: false
},
autoSize: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: ''
@ -212,7 +220,7 @@
},
option(isFull) {
return {
let optionInfo = {
inline: isFull ? false : this.inline,
selector: (isFull ? '#T_' : '#') + this.id,
base_url: $A.originUrl('js/tinymce'),
@ -374,6 +382,13 @@
}
},
};
if (this.autoSize) {
optionInfo.plugins.push('autoresize')
}
if (this.minHeight > 0) {
optionInfo.min_height = this.minHeight
}
return optionInfo;
},
closeFull() {

15
resources/assets/js/pages/manage.vue
View File

@ -23,7 +23,7 @@
:divided="!!item.divided"
:name="item.path">
{{$L(item.name)}}
<Badge v-if="item.path === 'workReport'" :count="reportUnreadNumber"/>
<Badge v-if="item.path === 'workReport'" class="manage-menu-report-badge" :count="reportUnreadNumber"/>
</DropdownItem>
<Dropdown placement="right-start" @on-click="setLanguage">
<DropdownItem divided>
@ -167,7 +167,7 @@
<DrawerOverlay
v-model="workReportShow"
placement="right"
:size="900">
:size="1100">
<Report v-if="workReportShow" @read="reportUnread" />
</DrawerOverlay>
@ -263,6 +263,7 @@ export default {
natificationHidden: false,
natificationReady: false,
notificationClass: null,
reportUnreadNumber: 0,
}
},
@ -278,6 +279,7 @@ export default {
//
this.notificationInit();
this.onVisibilityChange();
this.reportUnread(); // 工作汇报未读标记
//
this.addTaskSubscribe = Store.subscribe('addTask', this.onAddTask);
this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', this.addDialogMsg);
@ -288,9 +290,6 @@ export default {
if (this.$Electron) {
this.$Electron.ipcRenderer.send('setDockBadge', 0);
}
// 工作汇报未读标记
this.reportUnread();
},
beforeDestroy() {
@ -712,11 +711,9 @@ export default {
this.$store.dispatch("call", {
url: 'report/unread',
method: 'get',
}).then(({data, msg}) => {
// data 结果数据
}).then(({data}) => {
this.reportUnreadNumber = data.total ? data.total : 0;
// msg 结果描述
});
}).catch(() => {});
}
}
}

27
resources/assets/js/pages/manage/components/Report.vue
View File

@ -1,19 +1,23 @@
<template>
<div class="report">
<Tabs v-model="reportTabs">
<TabPane label="填写" name="edit" icon="md-create">
<ReportEdit :id="reportId" @saveSuccess="saveSuccess">填写</ReportEdit>
<TabPane :label="$L('填写汇报')" name="edit">
<ReportEdit :id="reportId" @saveSuccess="saveSuccess"></ReportEdit>
</TabPane>
<TabPane label="我的汇报" name="my" icon="ios-paper-plane-outline">
<ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport">我的汇报</ReportMy>
<TabPane :label="$L('我的汇报')" name="my">
<ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport"></ReportMy>
</TabPane>
<TabPane label="收到的汇报" name="receive" icon="ios-paper-outline">
<ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail">收到的汇报</ReportReceive>
<TabPane :label="$L('收到的汇报')" name="receive">
<ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail"></ReportReceive>
</TabPane>
</Tabs>
<Drawer v-model="showDetailDrawer" width="900px" :closable="false">
<ReportDetail :data="detailData" @closeDrawer="closeDrawer"/>
</Drawer>
<DrawerOverlay
v-model="showDetailDrawer"
placement="right"
:size="950"
transfer>
<ReportDetail :data="detailData"/>
</DrawerOverlay>
</div>
</template>
@ -22,10 +26,12 @@ import ReportEdit from "./ReportEdit"
import ReportMy from "./ReportMy"
import ReportReceive from "./ReportReceive"
import ReportDetail from "./ReportDetail"
import DrawerOverlay from "../../../components/DrawerOverlay";
export default {
name: "Report",
components: {
DrawerOverlay,
ReportEdit, ReportMy, ReportReceive, ReportDetail
},
data() {
@ -37,9 +43,6 @@ export default {
}
},
methods: {
closeDrawer(){
this.showDetailDrawer = false
},
showDetail(row) {
this.showDetailDrawer = true;
this.detailData = row;

9
resources/assets/js/pages/manage/components/ReportDetail.vue
View File

@ -1,9 +1,8 @@
<template>
<div class="report-detail">
<p class="report-title"><Icon type="ios-arrow-back" class="report-title-icon" @click="closeDrawer"/> {{ data.title }}</p>
<Divider />
<div class="report-title">{{ data.title }}</div>
<div class="report-detail-context">
<div class="report-profile">
<Row>
<Col span="2">
@ -41,6 +40,7 @@
</div>
</Col>
</Row>
</div>
</div>
</template>
@ -75,9 +75,6 @@ export default {
// msg 错误原因
});
},
closeDrawer(){
this.$emit('closeDrawer')
},
}
}
</script>

23
resources/assets/js/pages/manage/components/ReportEdit.vue
View File

@ -2,13 +2,11 @@
<Form class="report-box" label-position="top" @submit.native.prevent>
<Row class="report-row report-row-header" >
<Col span="2"><p class="report-titles">{{ $L("汇报类型") }}</p></Col>
<Col span="6">
<Col span="12">
<RadioGroup type="button" button-style="solid" v-model="reportData.type" @on-change="typeChange" class="report-radiogroup">
<Radio label="weekly">{{ $L("周报") }}</Radio>
<Radio label="daily">{{ $L("日报") }}</Radio>
</RadioGroup>
</Col>
<Col span="6">
<ButtonGroup class="report-buttongroup">
<Tooltip class="report-poptip" trigger="hover" :content="prevCycleText" placement="bottom">
<Button type="primary" @click="prevCycle">
@ -16,7 +14,7 @@
</Button>
</Tooltip>
<div class="report-buttongroup-shu"></div>
<Tooltip class="report-poptip" trigger="hover" :content="nextCycleText" placement="bottom">
<Tooltip class="report-poptip" trigger="hover" :disabled="reportData.offset >= 0" :content="nextCycleText" placement="bottom">
<Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">
<Icon type="ios-arrow-forward" />
</Button>
@ -32,19 +30,22 @@
</Row>
<Row class="report-row report-row-header">
<Col span="2"><p class="report-titles">{{ $L("汇报对象") }}</p></Col>
<Col span="16">
<Col span="22">
<div class="report-users">
<UserInput
v-if="userInputShow"
v-model="reportData.receive"
:disabledChoice="[userId]"
:placeholder="$L('选择接收人')" />
<a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"><Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}</a>
</div>
</Col>
<Col span="6"><a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"><Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}</a></Col>
</Row>
<Row class="report-row report-row-content">
<Col span="2"><p class="report-titles">{{ $L("汇报内容") }}</p></Col>
<Col span="22">
<FormItem>
<TEditor v-model="reportData.content" height="550px"/>
<FormItem class="report-row-content-editor">
<TEditor v-model="reportData.content" height="100%"/>
</FormItem>
</Col>
</Row>
@ -53,8 +54,6 @@
<Col span="4">
<FormItem>
<Button type="primary" @click="handleSubmit" class="report-bottom">提交</Button>
<!-- <Button type="primary" @click="prevCycle">{{ prevCycleText }}</Button>-->
<!-- <Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">{{ nextCycleText }}</Button>-->
</FormItem>
</Col>
</Row>
@ -63,6 +62,7 @@
<script>
import UserInput from "../../../components/UserInput"
import {mapState} from "vuex";
const TEditor = () => import('../../../components/TEditor');
export default {
@ -96,6 +96,9 @@ export default {
if (this.id > 0) this.getDetail(val);
},
},
computed: {
...mapState(["userId"])
},
mounted() {
this.getTemplate();
},

91
resources/assets/sass/components/report.scss vendored
View File

@ -1,6 +1,7 @@
.report {
height: 100%;
padding: 10px 20px;
.report-list-wrap {
width: 100%;
height: 100%;
@ -9,12 +10,15 @@
padding-top: 53px;
flex-direction: column;
position: absolute;
.report-row-header, .report-row-foot {
flex: 0 0 auto;
}
.report-row-content {
flex: 1 1 auto;
overflow-y: auto;
.ivu-table {
.ivu-table-body {
height: 100%;
@ -29,20 +33,24 @@
text-align: center;
margin-top: 15px;
}
.ivu-tabs {
height: 100%;
position: relative;
.ivu-tabs-bar {
position: relative;
z-index: 2;
background: #fff;
}
.ivu-tabs-content {
height: 100%;
width: 100%;
margin-top: -53px;
padding-top: 53px;
}
.ivu-tabs-tabpane {
}
@ -54,12 +62,12 @@
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
padding-top: 20px;
.report-title-icon{
font-size: 22px;
cursor: pointer;
margin-right: 20px;
padding: 20px 24px;
border-bottom: 1px solid #eeeeee;
}
.report-detail-context {
padding: 12px 24px;
}
.report-profile {
@ -71,17 +79,20 @@
flex-wrap: wrap;
height: 28px;
line-height: 28px;
p {
display: block;
width: 100%;
text-align: justify;
padding-right: 12px;
&:after {
content: '';
display: inline-block;
width: 100%;
}
}
& > div {
margin-right: 8px;
}
@ -94,12 +105,15 @@
.report-content {
margin-top: 12px;
width: 100%;
h2 {
margin-bottom: 10px;
}
ol {
margin-bottom: 20px;
padding-left: 18px;
li {
font-size: 14px;
line-height: 24px;
@ -107,69 +121,112 @@
}
}
}
.report-box {
display: flex;
flex-direction: column;
height: 100%;
.report-row-header, .report-row-foot {
flex: 0 0 auto;
}
.report-row-content {
flex: 1 1 auto;
overflow-y: auto;
.report-row-content-editor {
height: 100%;
.ivu-form-item-content {
height: 100%;
display: flex;
.teditor-wrapper {
flex: 1;
display: flex;
}
}
}
}
.report-row-foot {
margin-bottom: 0;
}
}
.report-row {
margin-bottom: 20px;
.report-row-a {
float: right;
line-height: 32px;
.report-row-a-icon {
transform: rotate(-90deg);
font-size: 16px;
margin-right: 2px;
}
}
.report-bottom {
width: 120px;
height: 36px;
line-height: 34px;
min-width: 110px;
}
.report-bottom-save{
width: 120px;
background: #F4F5F7 ;
color: #515A6E;
border-color: #F4F5F7 ;
.ivu-input[disabled] {
color: #666666;
}
}
.report-titles {
line-height: 32px;
}
.report-users {
display: flex;
align-items: center;
.common-user {
flex: 1;
margin-right: 12px;
}
.report-row-a {
flex-shrink: 0;
}
}
.report-radiogroup {
background: #F4F5F7 !important;
padding: 2px !important;
border-radius: 4px !important;
.ivu-radio-wrapper {
padding: 0 30px !important;
background: #F4F5F7 !important;
color: #515A6E !important;
box-shadow: none !important;
border: none !important;
&:before {
width: 0 !important;
}
&:after {
width: 0 !important;
}
}
.ivu-radio-focus {
box-shadow: none !important;
border: none !important;
&:after {
background: none !important;
}
}
.ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
background: #fff !important;
color: #8BCF70 !important;
@ -179,10 +236,12 @@
}
}
.report-buttongroup {
margin-top: 2px;
margin-left: 20px;
background: #F4F5F7 !important;
border-radius: 4px;
.report-buttongroup-shu {
position: absolute;
left: 47px;
@ -191,28 +250,36 @@
background-color: #E5E5E5;
top: 5px;
}
.ivu-btn-primary {
background: #F4F5F7 !important;
box-shadow: none !important;
border: none !important;
color: #8BCF70 !important;
height: 36px;
line-height: 34px;
&[disabled] {
color: #515A6E !important;
}
}
}
.report-poptip {
.ivu-tooltip-inner {
min-width: 60px !important;
font-size: 12px !important;
}
}
.reportmy-row {
margin-bottom: 20px;
.reportmy-titles {
line-height: 32px;
}
}
.report-main {
.report-submitter {
padding-top: 13px;

5
resources/assets/sass/pages/page-manage.scss vendored
View File

@ -70,6 +70,11 @@
}
}
}
.manage-menu-report-badge {
margin-left: 6px;
transform: scale(0.9);
vertical-align: top;
}
.manage-menu-language {
display: flex;
align-items: center;