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('保存成功');
}
/**

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

@ -1,25 +1,34 @@
<template>
<div :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">
<a href="javascript:void(0)" @click.stop="close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
<path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
</svg>
</a>
<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">
<a href="javascript:void(0)" @click.stop="close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
<path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
</svg>
</a>
</div>
<ResizeLine v-if="resize" class="overlay-resize" v-model="width" :max-width="0"/>
<div class="overlay-content"><slot/></div>
</div>
<ResizeLine v-if="resize" class="overlay-resize" v-model="width" :max-width="0"/>
<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(() => {});
}
}
}

29
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,11 +26,13 @@ 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: {
ReportEdit, ReportMy, ReportReceive,ReportDetail
DrawerOverlay,
ReportEdit, ReportMy, ReportReceive, ReportDetail
},
data() {
return {
@ -37,9 +43,6 @@ export default {
}
},
methods: {
closeDrawer(){
this.showDetailDrawer = false
},
showDetail(row) {
this.showDetailDrawer = true;
this.detailData = row;

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

@ -1,46 +1,46 @@
<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-profile">
<Row>
<div class="report-title">{{ data.title }}</div>
<div class="report-detail-context">
<div class="report-profile">
<Row>
<Col span="2">
<div class="report-submitter"><p>{{ $L('汇报人') }} </p></div>
</Col>
<Col span="6">
<div class="report-submitter">
<UserAvatar :userid="data.userid" :size="28"/>
</div>
</Col>
<Col span="2">
<div class="report-submitter"> <p>{{ $L('提交时间') }}</p></div>
</Col>
<Col span="6">
<div class="report-submitter">
<div>{{ data.created_at }}</div>
</div>
</Col>
<Col span="2">
<div class="report-submitter"><p>{{ $L('汇报对象') }}</p></div>
</Col>
<Col span="6">
<div class="report-submitter">
<UserAvatar v-for="item in data.receives" :key="item" :userid="item" :size="28"/>
</div>
</Col>
</Row>
</div>
<Row class="report-main">
<Col span="2">
<div class="report-submitter"><p>{{ $L('汇报人') }} </p></div>
<div class="report-submitter"><p>{{ $L('汇报内容') }}</p></div>
</Col>
<Col span="6">
<div class="report-submitter">
<UserAvatar :userid="data.userid" :size="28"/>
</div>
</Col>
<Col span="2">
<div class="report-submitter"> <p>{{ $L('提交时间') }}</p></div>
</Col>
<Col span="6">
<div class="report-submitter">
<div>{{ data.created_at }}</div>
</div>
</Col>
<Col span="2">
<div class="report-submitter"><p>{{ $L('汇报对象') }}</p></div>
</Col>
<Col span="6">
<div class="report-submitter">
<UserAvatar v-for="item in data.receives" :key="item" :userid="item" :size="28"/>
<Col span="22">
<div class="report-content" v-html="data.content">
</div>
</Col>
</Row>
</div>
<Row class="report-main">
<Col span="2">
<div class="report-submitter"><p>{{ $L('汇报内容') }}</p></div>
</Col>
<Col span="22">
<div class="report-content" v-html="data.content">
</div>
</Col>
</Row>
</div>
</template>
@ -75,9 +75,6 @@ export default {
// msg 错误原因
});
},
closeDrawer(){
this.$emit('closeDrawer')
},
}
}
</script>

49
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>
@ -24,37 +22,38 @@
</ButtonGroup>
</Col>
</Row>
<Row class="report-row report-row-header">
<Row class="report-row report-row-header">
<Col span="2"><p class="report-titles">{{ $L("汇报名称") }}</p></Col>
<Col span="22">
<Input v-model="reportData.title" disabled placeholder=""></Input>
</Col>
</Row>
<Row class="report-row report-row-header">
<Col span="2"><p class="report-titles">{{ $L("汇报对象") }}</p></Col>
<Col span="16">
<UserInput
v-if="userInputShow"
v-model="reportData.receive"
:placeholder="$L('选择接收人')" />
</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>
<Row class="report-row report-row-header">
<Col span="2"><p class="report-titles">{{ $L("汇报对象") }}</p></Col>
<Col span="22">
<FormItem>
<TEditor v-model="reportData.content" height="550px"/>
<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>
</Row>
<Row class="report-row report-row-content">
<Col span="2"><p class="report-titles">{{ $L("汇报内容") }}</p></Col>
<Col span="22">
<FormItem class="report-row-content-editor">
<TEditor v-model="reportData.content" height="100%"/>
</FormItem>
</Col>
</Row>
<Row class="report-row report-row-foot">
<Col span="2"></Col>
<Row class="report-row report-row-foot">
<Col span="2"></Col>
<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();
},

201
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,14 +10,17 @@
padding-top: 53px;
flex-direction: column;
position: absolute;
.report-row-header,.report-row-foot{
.report-row-header, .report-row-foot {
flex: 0 0 auto;
}
.report-row-content{
flex:1 1 auto;
.report-row-content {
flex: 1 1 auto;
overflow-y: auto;
.ivu-table{
.ivu-table-body{
.ivu-table {
.ivu-table-body {
height: 100%;
overflow-y: auto;
padding-bottom: 50px;
@ -29,21 +33,25 @@
text-align: center;
margin-top: 15px;
}
.ivu-tabs{
.ivu-tabs {
height: 100%;
position: relative;
.ivu-tabs-bar{
.ivu-tabs-bar {
position: relative;
z-index: 2;
background: #fff;
}
.ivu-tabs-content{
.ivu-tabs-content {
height: 100%;
width: 100%;
margin-top: -53px;
padding-top: 53px;
}
.ivu-tabs-tabpane{
.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,119 +79,170 @@
flex-wrap: wrap;
height: 28px;
line-height: 28px;
p{
p {
display: block;
width: 100%;
text-align: justify;
padding-right: 12px;
&:after{
&:after {
content: '';
display: inline-block;
width: 100%;
}
}
& > div {
margin-right: 8px;
}
}
.ivu-col{
.ivu-col {
margin-bottom: 12px;
}
.report-content {
margin-top: 12px;
width: 100%;
h2{
h2 {
margin-bottom: 10px;
}
ol{
ol {
margin-bottom: 20px;
padding-left: 18px;
li{
li {
font-size: 14px;
line-height: 24px;
}
}
}
}
.report-box{
.report-box {
display: flex;
flex-direction: column;
height: 100%;
.report-row-header,.report-row-foot{
.report-row-header, .report-row-foot {
flex: 0 0 auto;
}
.report-row-content{
flex:1 1 auto;
overflow-y: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{
.report-row-foot {
margin-bottom: 0;
}
}
.report-row{
.report-row {
margin-bottom: 20px;
.report-row-a{
.report-row-a {
float: right;
line-height: 32px;
.report-row-a-icon{
.report-row-a-icon {
transform: rotate(-90deg);
font-size: 16px;
margin-right: 2px;
}
}
.report-bottom{
width: 120px;
.report-bottom {
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{
.report-titles {
line-height: 32px;
}
.report-radiogroup{
.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{
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;
border: none !important;
&:before {
width: 0 !important;
}
&:after{
width: 0!important;
&:after {
width: 0 !important;
}
}
.ivu-radio-focus{
.ivu-radio-focus {
box-shadow: none !important;
border: none!important;
&:after{
background: none!important;
border: none !important;
&:after {
background: none !important;
}
}
.ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled){
.ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
background: #fff !important;
color: #8BCF70 !important;
box-shadow: none !important;
border: none!important;
border-radius: 4px!important;
border: none !important;
border-radius: 4px !important;
}
}
.report-buttongroup{
margin-top: 2px;
background: #F4F5F7!important;
.report-buttongroup {
margin-left: 20px;
background: #F4F5F7 !important;
border-radius: 4px;
.report-buttongroup-shu{
.report-buttongroup-shu {
position: absolute;
left: 47px;
width: 1px;
@ -191,30 +250,38 @@
background-color: #E5E5E5;
top: 5px;
}
.ivu-btn-primary{
background: #F4F5F7!important;
.ivu-btn-primary {
background: #F4F5F7 !important;
box-shadow: none !important;
border: none!important;
border: none !important;
color: #8BCF70 !important;
&[disabled]{
height: 36px;
line-height: 34px;
&[disabled] {
color: #515A6E !important;
}
}
}
.report-poptip{
.ivu-tooltip-inner{
.report-poptip {
.ivu-tooltip-inner {
min-width: 60px !important;
font-size: 12px !important;
}
}
.reportmy-row{
.reportmy-row {
margin-bottom: 20px;
.reportmy-titles{
.reportmy-titles {
line-height: 32px;
}
}
.report-main{
.report-submitter{
.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;