优化

src/api/assessment.js

@@ -104,4 +104,31 @@ export function apiAssessresetdata(query) {
         method: 'get',
         params: query
     })
+}
+
+//  获取绩效任务详情
+export function apiTaskDetail(query) {
+    return request({
+        url: '/lz_management/performance/result/taskDetail',
+        method: 'get',
+        params: query
+    })
+}
+
+//  删除绩效任务
+export function apiDeleteTask(query) {
+    return request({
+        url: '/lz_management/performance/result/deleteTask',
+        method: 'get',
+        params: query
+    })
+}
+
+//  修改任务
+export function apiEditTask(query) {
+    return request({
+        url: '/lz_management/performance/result/changeTask',
+        method: 'post',
+        data: query
+    })
 }

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

@@ -15,11 +15,11 @@
               <span>
                 <span>整体进度：</span>
               </span>
-              <el-progress :percentage="50"></el-progress>
+              <el-progress :percentage="handleGetProgress(taskInfo.resultTasks)"></el-progress>
             </div>
           </div>
           <div class="drawer-content-left-title">
-            <div> 关键结果（3）</div>
+            <div> 关键结果（{{handleFilter(taskInfo.resultTasks).length}}）</div>
             <div>
               <i style="color:#409EFF;"
                  class="el-icon-plus"></i>
@@ -27,9 +27,123 @@
                          type="text">添加</el-button>
             </div>
           </div>
-          <div v-for="i in 10"
+          <div v-for="i in handleFilter(taskInfo.resultTasks)"
                class="boderAndRadius drawer-content-left-content">
-            ss
+            <div :style="{border:!(!i.updateProcess && i.label)?'none':''}"
+                 class="drawer-content-left-content-top">
+              <div class="drawer-content-left-content-top-process">
+                <el-progress type="circle"
+                             :width='40'
+                             :stroke-width='4'
+                             :percentage="Math.round((i.processRate * 100)*1000)/1000 "></el-progress>
+                <div style="margin-left:10px;">
+                  <span v-if="!i.editProcess">{{i.name}}</span>
+                  <el-input v-if="i.editProcess"
+                            size="small"
+                            placeholder="请输入内容"
+                            v-model="form.input"
+                            clearable>
+                  </el-input>
+                </div>
+              </div>
+              <div class="right">
+                <div v-if="i.editProcess">
+                  <el-button size="mini"
+                             type="primary">确认</el-button>
+                  <el-button size="mini"
+                             @click="handleEditProcess(i,false)"
+                             type="danger">取消</el-button>
+                </div>
+                <div v-if="!i.editProcess"
+                     class="right-item">
+                  <div>
+                    <el-tooltip class="item"
+                                effect="dark"
+                                content="更新进度"
+                                placement="top-start">
+                      <i @click="handleUpdateProcess(i,true)"
+                         class="el-icon-refresh-left"></i>
+                    </el-tooltip>
+
+                  </div>
+                  <div class="right-item-center">
+                    <el-tooltip class="item"
+                                effect="dark"
+                                content="评论"
+                                placement="top-start">
+                      <i class="el-icon-chat-square"></i>
+                    </el-tooltip>
+                  </div>
+                  <div>
+                    <el-dropdown size="mini">
+                      <el-tooltip class="item"
+                                  effect="dark"
+                                  content="更多"
+                                  placement="top-start">
+                        <i class="el-icon-more"></i>
+                      </el-tooltip>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item @click.native="handleEditProcess(i,true)">编辑</el-dropdown-item>
+                        <el-dropdown-item @click.native="handleDetele(i.id)">删除</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-if="!i.updateProcess && i.label"
+                 class="drawer-content-left-content-center"
+                 :class="{bg:false}">
+              <div class="content commonFont">
+                <div class="drawer-content-left-content-center-left">
+                  <img v-if="true"
+                       :onerror="defaultImg"
+                       :src='i.avatar'
+                       alt="">
+                  <span v-if="true">{{i.staffName}}</span>
+                  <span v-if="true">:{{i.label}}</span>
+                </div>
+                <div>
+                  <i :class="{rate:false}"
+                     style=" cursor: pointer;color:#3ba1ff;"
+                     class="el-icon-arrow-down"></i>
+                </div>
+              </div>
+              <pinglun v-if="false" />
+            </div>
+            <div v-if="i.updateProcess"
+                 class="drawer-content-left-content-bottom">
+              <el-form :model="form"
+                       :rules="formRules"
+                       label-width="80px">
+                <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>
+                </el-form-item>
+                <el-form-item label="进度说明:"
+                              prop="remake">
+                  <el-input type="textarea"
+                            size="small"
+                            v-model="form.remake">
+                  </el-input>
+                </el-form-item>
+                <el-form-item>
+                  <div style="text-align: right;">
+                    <el-button type="primary"
+                               size="mini"
+                               @click="handleEditTask">确定</el-button>
+                    <el-button @click="handleUpdateProcess(i,false)"
+                               size="mini">取消</el-button>
+                  </div>
+                </el-form-item>
+              </el-form>
+            </div>
           </div>
         </div>
         <div class="drawer-content-right">
@@ -97,16 +211,27 @@
 </template>
 
 <script>
+import InfoHeader from '@/components/InfoHeader'
 import pinglun from './pinglun.vue'
+
+import { apiDeleteTask, apiEditTask } from '@/api/assessment'
+
 export default {
   props: {
     drawer: {
       type: Boolean,
       default: false
+    },
+    taskObj: {
+      type: Object,
+      default: () => {
+        return {}
+      }
     }
   },
   data () {
     return {
+      taskInfo: {},
       activeName: '1',
       formRules: {
         name: [{
@@ -121,14 +246,77 @@ export default {
         process: '0'
       },
       dialogFormVisible: false,
-      title: '添加任务'
+      title: '添加任务',
+      defaultImg: 'this.src="' + require('@/assets/img/default.jpg') + '"'
     }
   },
-  components: { pinglun },
+  components: { pinglun, InfoHeader },
   computed: {},
   beforeMount () { },
-  mounted () { },
+  mounted () {
+    this.taskInfo = Object.assign({}, this.taskObj)
+    console.log(this.taskInfo)
+  },
   methods: {
+    async handleEditTask () {
+      const res = await apiEditTask(Object.assign({}, this.form, { processRate: this.form.processRate / 100 }))
+      if (res.code !== 200) {
+        this.$message.error(res.msg)
+        return
+      }
+      this.form = {}
+      this.taskInfo = await this.$parent.handleGetTaskDetail(this.taskInfo.detailId)
+      this.$message({
+        message: res.msg,
+        type: 'success'
+      })
+    },
+    handleGetProgress (arr = []) {
+      const result = this.handleFilter(arr).reduce((result, item) => {
+        result += Number(item.processRate)
+        return result
+      }, 0)
+      const _process = Number(result.toFixed(2)) / this.handleFilter(arr).length || 0
+      return Number((_process * 100).toFixed(2))
+    },
+    async handleDetele (id) {
+      let res = await apiDeleteTask({ taskId: id })
+      if (res.code !== 200) {
+        this.$message.error(res.msg)
+        return
+      }
+      this.taskInfo = await this.$parent.handleGetTaskDetail(this.taskInfo.detailId)
+      this.$message({
+        message: res.msg,
+        type: 'success'
+      })
+    },
+    // 更新进度
+    handleUpdateProcess (i, type = false) {
+      this.taskInfo.resultTasks.map(i => {
+        i.updateProcess = false
+      })
+      if (type) {
+        this.form = Object.assign({}, i)
+        this.form.taskId = this.form.id
+        this.form.processRate = Math.round(Number(this.form.processRate) * 100)
+      } else {
+        this.form = {}
+      }
+      i.updateProcess = type
+      console.log(this.form)
+      this.$forceUpdate()
+    },
+    // 编辑/取消编辑进度
+    handleEditProcess (i, type = false) {
+      i.editProcess = type
+      this.form = Object.assign({}, i)
+      this.form.taskId = this.form.id
+      this.$forceUpdate()
+    },
+    handleFilter (item) {
+      return item ? item.filter(i => !i.isDelete) : []
+    },
     handleClick (tab, event) {
       console.log(tab, event);
     },
@@ -136,7 +324,7 @@ export default {
       this.dialogFormVisible = true
     },
     handleClose () {
-      this.$emit("update:drawer", false)
+      this.$emit('update:drawer', false)
     }
   },
   watch: {}
@@ -156,6 +344,9 @@ export default {
 .el-drawer__body {
   overflow: auto;
 }
+.el-progress-bar {
+  width: 94% !important;
+}
 </style>
 <style lang='less'>
 .drawer {
@@ -199,8 +390,72 @@ export default {
         font-size: 16px;
       }
       &-content {
-        padding: 20px;
         margin-bottom: 10px;
+        &-top {
+          display: flex;
+          align-content: center;
+          justify-content: space-between;
+          border-bottom: 1px solid @borderColor;
+          margin: 20px 20px 0;
+          padding-bottom: 6px;
+          &-process {
+            display: flex;
+            align-content: center;
+            > div {
+              .center();
+            }
+          }
+          .right {
+            .center();
+            &-item {
+              cursor: pointer;
+              border: 1px solid @borderColor;
+              > div {
+                padding: 2px;
+              }
+              display: flex;
+              &-center {
+                border-left: 1px solid @borderColor;
+                border-right: 1px solid @borderColor;
+              }
+            }
+          }
+        }
+        .bg {
+          background: #fafafa;
+        }
+        .rate {
+          transform: rotate(180deg);
+          transition: all 0.2s;
+        }
+        &-center {
+          padding: 6px 20px 6px;
+
+          .content {
+            display: flex;
+            align-content: center;
+            justify-content: space-between;
+          }
+          &-left {
+            flex: 1 0 auto;
+            display: flex;
+            align-content: center;
+            img {
+              width: 28px;
+              height: 28px;
+              border-radius: 50%;
+              overflow: hidden;
+              margin-right: 10px;
+            }
+            span {
+              .center();
+            }
+          }
+        }
+        &-bottom {
+          padding: 10px 20px 6px;
+          border-top: 1px solid @borderColor;
+        }
       }
     }
     &-right {

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

@@ -46,16 +46,16 @@
               <el-progress type="circle"
                            :width='40'
                            :stroke-width='4'
-                           :percentage="25"></el-progress>
+                           :percentage="Math.round((i.processRate * 100) * 1000) / 1000 "></el-progress>
               <el-button type="text"
-                         @click="handleLookProcess"
+                         @click="handleLookProcess(i)"
                          size="mini">
                 查看任务
               </el-button>
             </div>
             <div class="kaohe pre">
               <pre>
-                     {{i.keyResult}}o7
+                     {{i.keyResult}}
                    </pre>
             </div>
             <div class="jieguo pre"
@@ -178,11 +178,13 @@
     <div v-if="scoreListForParams.length>0"
          class="commonFont"
          style="font-size:12px;margin:10px 0;">{{handleGetAllScore(scoreListForParams)}}</div>
-    <process :drawer.sync='drawer' />
+    <process v-if="!_.isEmpty(taskInfo)"
+             :taskObj='taskInfo'
+             :drawer.sync='drawer' />
   </div>
 </template>
 <script>
-import { apiSaveDetail, apiGet375, apiSaveapproval } from '@/api/assessment'
+import { apiSaveDetail, apiGet375, apiSaveapproval, apiTaskDetail } from '@/api/assessment'
 import process from './process.vue';
 import { mapGetters } from 'vuex'
 
@@ -215,11 +217,12 @@ export default {
   },
   data () {
     return {
-      drawer: true,
+      drawer: false,
       loadingTi: false,
       loadingZan: false,
       input: '',
-      scoreList: []
+      scoreList: [],
+      taskInfo: {},
       // score: {
       //   lastScore: '',
       //   scoreLevel: ''
@@ -282,8 +285,24 @@ export default {
     this.handleGrt375()
   },
   methods: {
-    handleLookProcess () {
+    // 获取指标任务详情
-      this.drawer = true
+    async handleGetTaskDetail (id = '') {
+      let res = await apiTaskDetail({ detailId: id })
+      if (res.code !== 200) {
+        this.$message.error(res.msg)
+        return false
+      }
+      return Object.assign({}, res.data, { detailId: id })
+    },
+    async handleLookProcess (item) {
+      console.log(item)
+      this.taskInfo = {}
+      let result = await this.handleGetTaskDetail(item.id)
+      if (!result) return
+      this.taskInfo = result
+      this.$nextTick(() => {
+        this.drawer = true
+      })
     },
     handleGetAllScore (arr) {
       const result = arr.reduce((result, item) => {