wulin/management_UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
xiongchengqiang 2020-12-14 15:04:10 +08:00
parent 1d8a4d3ba9
commit 693a35191a
2 changed files with 123 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/animate/index.js Normal file
View File

@ -0,0 +1,73 @@
const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {
'before-enter' (el) {
el.style.transition = elTransition
if (!el.dataset) el.dataset = {}
el.dataset.oldPaddingTop = el.style.paddingTop
el.dataset.oldPaddingBottom = el.style.paddingBottom
el.style.height = 0
el.style.paddingTop = 0
el.style.paddingBottom = 0
},
'enter' (el) {
el.dataset.oldOverflow = el.style.overflow
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + 'px'
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
} else {
el.style.height = ''
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
}
el.style.overflow = 'hidden'
},
'after-enter' (el) {
el.style.transition = ''
el.style.height = ''
el.style.overflow = el.dataset.oldOverflow
},
'before-leave' (el) {
if (!el.dataset) el.dataset = {}
el.dataset.oldPaddingTop = el.style.paddingTop
el.dataset.oldPaddingBottom = el.style.paddingBottom
el.dataset.oldOverflow = el.style.overflow
el.style.height = el.scrollHeight + 'px'
el.style.overflow = 'hidden'
},
'leave' (el) {
if (el.scrollHeight !== 0) {
el.style.transition = elTransition
el.style.height = 0
el.style.paddingTop = 0
el.style.paddingBottom = 0
}
},
'after-leave' (el) {
el.style.transition = ''
el.style.height = ''
el.style.overflow = el.dataset.oldOverflow
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
}
}
export default {
name: 'collapseTransition',
functional: true,
render (h, { children }) {
const data = {
on: Transition
}
return h('transition', data, children)
}
}

56
src/views/kpi/assessment/performance/components/process.vue
View File

@ -26,6 +26,42 @@
type="text">添加</el-button>
</div>
</div>
<div style="overflow:hidden;box-sizing: border-box;" :style="{height:!dialogFormVisible?'0px':'274px'}" :class="{boderAndRadius:dialogFormVisible}" class=" drawer-content-left-content">
<div style="padding:20px;">
<el-form :model="form"
:rules="formRules">
<el-form-item prop="name"
label='任务名称'>
<el-input clearable
size="small"
placeholder="请输入任务名称"
v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="任务进度:"
prop="weight">
<!-- <el-input size="small"
@blur="$handleBlur('form.processRate')"
@input.native="$handleInputInt('form.processRate')"
v-model="form.processRate">
<template slot="append">%</template>
</el-input> -->
<br />
<el-slider
v-model="form.processRate"
:step="10">
</el-slider>
</el-form-item>
</el-form>
<div slot="footer"
class="dialog-footer" style="text-align:right;">
<el-button size="small"
@click="dialogFormVisible = false">取 消</el-button>
<el-button size="small"
type="primary"
@click="handleEditTask(3)">确 定</el-button>
</div>
</div>
</div>
<div v-for="(i,index) in handleFilter(taskInfo.resultTasks)"
:key="i.id"
class="boderAndRadius drawer-content-left-content">
@ -217,7 +253,7 @@
</div>
</div>
</el-drawer>
<el-dialog :title="title"
<!-- <el-dialog :title="title"
:visible.sync="dialogFormVisible">
<el-form :model="form"
:rules="formRules">
@ -246,7 +282,7 @@
type="primary"
@click="handleEditTask(3)">确 定</el-button>
</div>
</el-dialog>
</el-dialog> -->
<getPersonnel @cb='handleCheckStaffIds' v-if="isShow" :value.sync='form.ids' :isShow.sync='isShow' :showDataList.sync='staffList'/>
</div>
</template>
@ -255,7 +291,7 @@
import InfoHeader from '@/components/InfoHeader'
import pinglun from './pinglun.vue'
import getPersonnel from '@/components/getPersonnel'
import animate from '@/components/animate'
import { apiDeleteTask, apiEditTask, apiChangeTaskList, apiTaskCommentList, apiAddTaskComment } from '@/api/assessment'
export default {
@ -301,7 +337,7 @@ export default {
defaultImg: 'this.src="' + require('@/assets/img/default.jpg') + '"'
}
},
components: { pinglun, InfoHeader, getPersonnel },
components: { pinglun, animatess: animate, InfoHeader, getPersonnel },
computed: {},
beforeMount () { },
mounted () {
@ -481,6 +517,11 @@ export default {
console.log(tab, event)
},
handleAddTask () {
this.taskInfo.resultTasks.map(i => {
i.updateProcess = false
i.editProcess = false
i.showTask = false
})
this.dialogFormVisible = true
},
handleClose () {
@ -551,7 +592,8 @@ export default {
}
&-content {
margin-bottom: 10px;
transition: 2s all;
max-height:2000px;
transition:all 0.4s;
&-top {
display: flex;
align-content: center;
@ -591,7 +633,7 @@ export default {
&-center {
padding: 6px 20px 6px;
.label {
width: 400px;
width: 300px;
}
.content {
flex:1;
@ -606,11 +648,13 @@ export default {
flex: 1 ;
display: flex;
align-items: center;
img {
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
}