perf: 优化工作报告前端

This commit is contained in:
kuaifan 2022-03-16 15:46:47 +08:00
parent 1263603c7b
commit c53db63cc7
6 changed files with 140 additions and 218 deletions

View File

@ -849,6 +849,10 @@ export default {
this.addTaskShow = true; this.addTaskShow = true;
}, },
openTask(task) {
this.$store.dispatch("openTask", task)
},
addDialogMsg(data) { addDialogMsg(data) {
if (!this.natificationReady) { if (!this.natificationReady) {
return; return;
@ -893,7 +897,7 @@ export default {
taskVisibleChange(visible) { taskVisibleChange(visible) {
if (!visible) { if (!visible) {
this.$store.dispatch('openTask', 0) this.openTask(0)
} }
}, },
@ -1026,10 +1030,6 @@ export default {
} }
document.addEventListener(visibilityChangeEvent, visibilityChangeListener); document.addEventListener(visibilityChangeEvent, visibilityChangeListener);
}, },
openTask(task) {
this.$store.dispatch("openTask", task)
},
} }
} }
</script> </script>

View File

@ -2,10 +2,10 @@
<div class="report"> <div class="report">
<Tabs v-model="reportTabs"> <Tabs v-model="reportTabs">
<TabPane :label="$L('我的汇报')" name="my"> <TabPane :label="$L('我的汇报')" name="my">
<ReportMy ref="report" v-if="reportTabs === 'my'" @on-view="onView" @on-edit="onEditReport"></ReportMy> <ReportMy ref="report" v-if="reportTabs === 'my'" @on-view="onView" @on-edit="onEditReport"/>
</TabPane> </TabPane>
<TabPane :label="tabRebder(reportUnreadNumber)" name="receive"> <TabPane :label="tabRebder(reportUnreadNumber)" name="receive">
<ReportReceive v-if="reportTabs === 'receive'" @on-view="onView"></ReportReceive> <ReportReceive v-if="reportTabs === 'receive'" @on-view="onView"/>
</TabPane> </TabPane>
</Tabs> </Tabs>
<DrawerOverlay <DrawerOverlay
@ -61,6 +61,10 @@ export default {
mounted() { mounted() {
this.reportTabs = this.reportType; this.reportTabs = this.reportType;
//
if (this.$isMainElectron) {
this.$Electron.registerMsgListener('reportSaveSuccess', this.saveSuccess)
}
}, },
methods: { methods: {
@ -135,7 +139,3 @@ export default {
} }
} }
</script> </script>
<style scoped>
</style>

View File

@ -2,50 +2,22 @@
<div class="report-detail"> <div class="report-detail">
<div class="report-title">{{ data.title }}</div> <div class="report-title">{{ data.title }}</div>
<div class="report-detail-context"> <div class="report-detail-context">
<div class="report-profile"> <Form class="report-form" label-width="auto" inline>
<Row> <FormItem :label="$L('汇报人')">
<Col span="2"> <UserAvatar :userid="data.userid" :size="28"/>
<div class="report-submitter"> </FormItem>
<p>{{ $L('汇报人') }}</p> <FormItem :label="$L('提交时间')">
</div> {{ data.created_at }}
</Col> </FormItem>
<Col span="6"> <FormItem :label="$L('汇报对象')">
<div class="report-submitter"> <UserAvatar v-for="(item, key) in data.receives_user" :key="key" :userid="item.userid" :size="28"/>
<UserAvatar :userid="data.userid" :size="28"/> </FormItem>
</div> </Form>
</Col> <Form class="report-form" label-width="auto">
<Col span="2"> <FormItem :label="$L('汇报内容')">
<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, key) in data.receives_user" :key="key" :userid="item.userid" :size="28"/>
</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> <div class="report-content" v-html="data.content"></div>
</Col> </FormItem>
</Row> </Form>
</div> </div>
</div> </div>
</template> </template>
@ -58,12 +30,12 @@ export default {
default: {}, default: {},
} }
}, },
mounted() {
if (this.data.id > 0) this.sendRead();
},
watch: { watch: {
data() { 'data.id': {
if (this.data.id > 0) this.sendRead(); handler(id) {
if (id > 0) this.sendRead();
},
immediate: true
}, },
}, },
methods: { methods: {
@ -73,11 +45,10 @@ export default {
data: { data: {
ids: [this.data.id] ids: [this.data.id]
}, },
}).then(({data, msg}) => { }).then(() => {
// data //
// msg }).catch(() => {
}).catch(({msg}) => { //
// msg
}); });
}, },
} }

View File

@ -1,70 +1,51 @@
<template> <template>
<Form class="report-box" label-position="top" @submit.native.prevent> <Form class="report-edit" label-width="auto" @submit.native.prevent>
<Row class="report-row"> <FormItem :label="$L('汇报类型')">
<Col span="2"> <RadioGroup
<p class="report-titles">{{ $L("汇报类型") }}</p> type="button"
</Col> button-style="solid"
<Col span="12"> v-model="reportData.type"
<RadioGroup type="button" button-style="solid" v-model="reportData.type" @on-change="typeChange" class="report-radiogroup" :readonly="id > 0"> @on-change="typeChange"
<Radio label="weekly" :disabled="id > 0 && reportData.type =='daily'">{{ $L("周报") }}</Radio> class="report-radiogroup"
<Radio label="daily" :disabled="id > 0 && reportData.type =='weekly'">{{ $L("日报") }}</Radio> :readonly="id > 0">
</RadioGroup> <Radio label="weekly" :disabled="id > 0 && reportData.type =='daily'">{{ $L("周报") }}</Radio>
<ButtonGroup class="report-buttongroup" v-if="id === 0"> <Radio label="daily" :disabled="id > 0 && reportData.type =='weekly'">{{ $L("日报") }}</Radio>
<ETooltip class="report-poptip" :content="prevCycleText" placement="bottom"> </RadioGroup>
<Button type="primary" @click="prevCycle"> <ButtonGroup v-if="id === 0" class="report-buttongroup">
<Icon type="ios-arrow-back" /> <ETooltip :content="prevCycleText" placement="bottom">
</Button> <Button type="primary" @click="prevCycle">
</ETooltip> <Icon type="ios-arrow-back" />
<div class="report-buttongroup-vertical"></div> </Button>
<ETooltip class="report-poptip" :disabled="reportData.offset >= 0" :content="nextCycleText" placement="bottom"> </ETooltip>
<Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0"> <div class="report-buttongroup-vertical"></div>
<Icon type="ios-arrow-forward" /> <ETooltip :disabled="reportData.offset >= 0" :content="nextCycleText" placement="bottom">
</Button> <Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">
</ETooltip> <Icon type="ios-arrow-forward" />
</ButtonGroup> </Button>
</Col> </ETooltip>
</Row> </ButtonGroup>
<Row class="report-row"> </FormItem>
<Col span="2"> <FormItem :label="$L('汇报名称')">
<p class="report-titles">{{ $L("汇报名称") }}</p> <Input v-model="reportData.title" disabled/>
</Col> </FormItem>
<Col span="22"> <FormItem :label="$L('汇报对象')">
<Input v-model="reportData.title" disabled/> <div class="report-users">
</Col> <UserInput
</Row> v-model="reportData.receive"
<Row class="report-row"> :disabledChoice="[userId]"
<Col span="2"> :placeholder="$L('选择接收人')"
<p class="report-titles">{{ $L("汇报对象") }}</p> :transfer="false"/>
</Col> <a class="report-user-link" href="javascript:void(0);" @click="getLastSubmitter">
<Col span="22"> <Icon type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}
<div class="report-users"> </a>
<UserInput </div>
v-model="reportData.receive" </FormItem>
:disabledChoice="[userId]" <FormItem :label="$L('汇报内容')" class="report-content-editor">
:placeholder="$L('选择接收人')" <TEditor v-model="reportData.content" height="100%"/>
:transfer="false"/> </FormItem>
<a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"> <FormItem class="report-foot">
<Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }} <Button type="primary" @click="handleSubmit" class="report-bottom">{{$L(id > 0 ? '修改' : '提交')}}</Button>
</a> </FormItem>
</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>
<Col span="4">
<Button type="primary" @click="handleSubmit" class="report-bottom">{{$L(id > 0 ? '修改' : '提交')}}</Button>
</Col>
</Row>
</Form> </Form>
</template> </template>

View File

@ -33,6 +33,12 @@ export default {
methods: { methods: {
saveSuccess(data) { saveSuccess(data) {
this.detail = data; this.detail = data;
if (this.$isSubElectron) {
$A.Electron.sendMessage('sendForwardMain', {
channel: 'reportSaveSuccess',
data,
});
}
} }
} }
} }

View File

@ -39,10 +39,6 @@
margin-top: -53px; margin-top: -53px;
padding-top: 53px; padding-top: 53px;
} }
.ivu-tabs-tabpane {
}
} }
} }
@ -62,55 +58,30 @@
.report-detail-context { .report-detail-context {
flex: 1; flex: 1;
height: 0;
padding: 12px 0 12px 24px; padding: 12px 0 12px 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 0; overflow: auto;
}
.report-main { .report-form {
display: flex;
margin-bottom: 12px;
.ivu-form-item {
flex: 1; flex: 1;
overflow: auto; flex-shrink: 0;
margin-top: 12px;
}
.report-submitter { .ivu-form-item-label {
p { padding-top: 8px;
opacity: 0.8; opacity: 0.8;
} }
}
}
.report-profile { .ivu-form-item-content {
font-size: 14px; line-height: 30px;
padding-right: 24px;
}
.report-submitter {
display: flex;
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;
}
}
.ivu-col {
margin-bottom: 12px;
} }
.report-content { .report-content {
@ -136,21 +107,21 @@
} }
} }
.report-box { .report-edit {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
padding: 24px; padding: 24px;
.report-row-foot { .ivu-input[disabled] {
flex: 0 0 auto; color: #666666;
} }
.report-row-content { .report-content {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
.report-row-content-editor { .report-content-editor {
height: 100%; height: 100%;
.ivu-form-item-content { .ivu-form-item-content {
@ -165,21 +136,6 @@
} }
} }
.report-row-foot {
margin-bottom: 0;
}
.report-titles {
line-height: 32px;
}
.report-poptip {
.ivu-tooltip-inner {
min-width: 60px !important;
font-size: 12px !important;
}
}
.report-users { .report-users {
display: flex; display: flex;
align-items: center; align-items: center;
@ -189,8 +145,14 @@
margin-right: 12px; margin-right: 12px;
} }
.report-row-a { .report-user-link {
flex-shrink: 0; flex-shrink: 0;
> i {
font-size: 16px;
margin-right: 2px;
transform: rotate(-90deg);
}
} }
} }
@ -206,6 +168,10 @@
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
&.ivu-radio-wrapper-disabled {
color: #c6c6c6 !important;
}
&:before { &:before {
width: 0 !important; width: 0 !important;
} }
@ -241,11 +207,13 @@
.report-buttongroup-vertical { .report-buttongroup-vertical {
position: absolute; position: absolute;
left: 47px; left: 50%;
width: 1px; width: 1px;
height: 23px; height: 15px;
background-color: #E5E5E5; background-color: #e9e9e9;
top: 5px; top: 50%;
transform: translate(-50%, -50%);
z-index: 9;
} }
.ivu-btn-primary { .ivu-btn-primary {
@ -257,34 +225,30 @@
line-height: 34px; line-height: 34px;
&[disabled] { &[disabled] {
color: #515A6E !important; color: #c6c6c6 !important;
} }
} }
} }
}
.report-row { .report-content-editor {
margin-bottom: 20px; flex: 1;
.ivu-form-item-content {
.report-row-a { display: flex;
float: right; height: 100%;
line-height: 32px; .teditor-wrapper {
display: flex;
.report-row-a-icon { flex: 1;
transform: rotate(-90deg); }
font-size: 16px;
margin-right: 2px;
} }
} }
.report-bottom { .report-foot {
height: 38px; margin-bottom: 0;
line-height: 36px; .report-bottom {
min-width: 120px; height: 38px;
} line-height: 36px;
min-width: 120px;
.ivu-input[disabled] { }
color: #666666;
} }
} }