优化

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)
+  }
+}

src/views/kpi/assessment/performance/components/process.vue

@@ -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;
             }
           }