diff --git a/src/components/animate/index.js b/src/components/animate/index.js new file mode 100644 index 0000000..ac8c10f --- /dev/null +++ b/src/components/animate/index.js @@ -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) + } +} diff --git a/src/views/kpi/assessment/performance/components/process.vue b/src/views/kpi/assessment/performance/components/process.vue index db260c6..00c4856 100644 --- a/src/views/kpi/assessment/performance/components/process.vue +++ b/src/views/kpi/assessment/performance/components/process.vue @@ -26,6 +26,42 @@ type="text">添加 +
+
+ + + + + + +
+ + +
+
+ +
+
@@ -217,7 +253,7 @@
- @@ -246,7 +282,7 @@ type="primary" @click="handleEditTask(3)">确 定 - + --> @@ -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; } }