From bb87ee9ef0fc22fb85eebfffe89b8f06b201690c Mon Sep 17 00:00:00 2001
From: xiongchengqiang <xiongchengqiang@linzikg.com>
Date: Wed, 2 Dec 2020 15:09:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../edit/components/ApprovalList.vue          | 182 ++++++++++--------
 .../assessmentGroup/edit/components/Entry.vue |  63 ++++--
 2 files changed, 148 insertions(+), 97 deletions(-)

diff --git a/src/views/kpi/workbench/assessmentGroup/edit/components/ApprovalList.vue b/src/views/kpi/workbench/assessmentGroup/edit/components/ApprovalList.vue
index 4d09cb2..46eeef5 100644
--- a/src/views/kpi/workbench/assessmentGroup/edit/components/ApprovalList.vue
+++ b/src/views/kpi/workbench/assessmentGroup/edit/components/ApprovalList.vue
@@ -1,65 +1,89 @@
 <!-- 目标确认组件 -->
 <template>
-    <div class="ProcessList">
-       <div class="ProcessList-top">
-          <div class="ProcessList-top-item" v-for="(i,index) in handleGetList(list)" :key="i.id">
-            <div  class="itemH">
-              <div v-if="i.id !==9999" @click="handleClick(i)" class="ProcessList-top-item-contant commonFont" :class="{active:i.isCick}">
-                <span>{{i.name}}</span>
-                <span>{{i.label}}</span>
-                <i @click.stop="handleDelete(i)" class="el-icon-close close"></i>
-              </div>
-              <div v-if="index+1!==list.length && list.length!==0" class="process-title-item-img">
-                <img src="./imgs/right.png" alt="">
-              </div>
-            </div>
+  <div class="ProcessList">
+    <div class="ProcessList-top">
+      <div class="ProcessList-top-item"
+           v-for="(i,index) in handleGetList(list)"
+           :key="i.id">
+        <div class="itemH">
+          <div v-if="i.id !==9999"
+               @click="handleClick(i)"
+               class="ProcessList-top-item-contant commonFont"
+               :class="{active:i.isCick}">
+            <span>{{i.name}}</span>
+            <span>{{i.label}}</span>
+            <i @click.stop="handleDelete(i)"
+               class="el-icon-close close"></i>
           </div>
-          <div class='addP'>
-            <i @click="handleAdd" class="el-icon-circle-plus-outline add"></i>
+          <div v-if="index+1!==list.length && list.length!==0"
+               class="process-title-item-img">
+            <img src="./imgs/right.png"
+                 alt="">
           </div>
         </div>
-        <!-- v-if="JSON.stringify(itemInfo) !== '{}'" -->
-        <div v-if="JSON.stringify(itemInfo) !== '{}'" class="ProcessList-center">
-            <div class="ProcessList-center-zhixingren commonFont">
-              <span>执行人：</span>
-              <el-radio-group v-model="itemInfo.isActive">
-                <el-radio :label="1">主管（指定一级）</el-radio>
-                <el-radio :label="0">指定成员</el-radio>
-                 <el-radio :label="-1">被考核人自己</el-radio>
-              </el-radio-group>
-              <div v-if="itemInfo.isActive!==0 && itemInfo.isActive!==-1" style="padding:30px 0 0 20px;">
-                <span>被考评人的</span>
-                <el-select size="mini" style="width:100px;" v-model="itemInfo.optType" placeholder="请选择">
-                  <el-option
-                    v-for="item in options"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </div>
-              <div v-if="itemInfo.isActive===0" style="padding:30px 0 0 20px;">
-                <el-button size="mini" @click="itemInfo.isShow=true" plain>选择成员</el-button>
-                <span style="font-size:14px;padding:0 0 0 10px;">{{itemInfo.name}}</span>
-              </div>
-               <getpersonl v-if="itemInfo.isShow" :value.sync='itemInfo.optIds'  :isShow.sync='itemInfo.isShow' :showDataList.sync='itemInfo.list'/>
-              <div v-if="itemInfo.isActive!==-1" style="padding:20px 0 0 0 ">
-                <span>当执行人为多人时的处理方式：</span>
-                <div style="padding:10px 0 0 20px">
-                  <el-radio-group v-model="itemInfo.stepType">
-                    <el-radio :label="0">依次确认</el-radio>
-                    <el-radio :label="1">或签（一名审批人同意或拒绝即可）</el-radio>
-                    <el-radio :label="2">会签（所有人同时收到消息，需所有人都同意 ）</el-radio>
-                  </el-radio-group>
-                </div>
-              </div>
-              <div style="padding:20px 0 0 0 " v-for="i in itemInfo.roleDtos" :key="i.id">
-                <el-checkbox v-if="i.type !== 1" @change="handleChang(i)" v-model="i.checked">{{i.roleName}}</el-checkbox>
-              </div>
-            </div>
-        </div>
-
+      </div>
+      <div class='addP'>
+        <i @click="handleAdd"
+           class="el-icon-circle-plus-outline add"></i>
+      </div>
     </div>
+    <!-- v-if="JSON.stringify(itemInfo) !== '{}'" -->
+    <div v-if="JSON.stringify(itemInfo) !== '{}'"
+         class="ProcessList-center">
+      <div class="ProcessList-center-zhixingren commonFont">
+        <span>执行人：</span>
+        <el-radio-group v-model="itemInfo.isActive">
+          <el-radio :label="1">主管（指定一级）</el-radio>
+          <el-radio :label="0">指定成员</el-radio>
+          <el-radio :label="-1">被考核人自己</el-radio>
+        </el-radio-group>
+        <div v-if="itemInfo.isActive!==0 && itemInfo.isActive!==-1"
+             style="padding:30px 0 0 20px;">
+          <span>被考评人的</span>
+          <el-select size="mini"
+                     style="width:100px;"
+                     v-model="itemInfo.optType"
+                     placeholder="请选择">
+            <el-option v-for="item in options"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </div>
+        <div v-if="itemInfo.isActive===0"
+             style="padding:30px 0 0 20px;">
+          <el-button size="mini"
+                     @click="itemInfo.isShow=true"
+                     plain>选择成员</el-button>
+          <span style="font-size:14px;padding:0 0 0 10px;">{{itemInfo.name}}</span>
+        </div>
+        <getpersonl v-if="itemInfo.isShow"
+                    :value.sync='itemInfo.optIds'
+                    :isShow.sync='itemInfo.isShow'
+                    :showDataList.sync='itemInfo.list' />
+        <div v-if="itemInfo.isActive!==-1"
+             style="padding:20px 0 0 0 ">
+          <span>当执行人为多人时的处理方式：</span>
+          <div style="padding:10px 0 0 20px">
+            <el-radio-group v-model="itemInfo.stepType">
+              <el-radio :label="0">依次确认</el-radio>
+              <el-radio :label="1">或签（一名审批人同意或拒绝即可）</el-radio>
+              <el-radio :label="2">会签（所有人同时收到消息，需所有人都同意 ）</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <div style="padding:20px 0 0 0 "
+             v-for="i in itemInfo.roleDtos"
+             :key="i.id">
+          <el-checkbox v-if="i.type !== 1"
+                       @change="handleChang(i)"
+                       v-model="i.checked">{{i.roleName}}</el-checkbox>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -120,7 +144,7 @@ export default {
     }
   },
   computed: {},
-  beforeMount () {},
+  beforeMount () { },
   created () {
     this.list = this.handleListFor(this.info)
   },
@@ -300,32 +324,32 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.ProcessList{
-  .addP{
+.ProcessList {
+  .addP {
     padding-bottom: 20px;
-    .center()
+    .center();
   }
-  &-top{
+  &-top {
     padding: 20px 0 0 0;
     border-bottom: 1px solid @borderColor;
     display: flex;
     width: 100%;
     flex-wrap: wrap;
-    .itemH{
+    .itemH {
       display: flex;
       align-items: center;
     }
-     .add{
-        font-size: 30px;
-        color: #c5c5c5;
-        margin:0 4px ;
-      }
-    &-item{
+    .add {
+      font-size: 30px;
+      color: #c5c5c5;
+      margin: 0 4px;
+    }
+    &-item {
       display: flex;
       align-items: center;
       padding-bottom: 20px;
 
-      &-contant{
+      &-contant {
         position: relative;
         width: 136px;
         height: 56px;
@@ -336,10 +360,10 @@ export default {
         justify-content: center;
         font-size: 14px;
         border-radius: 4px;
-        span:nth-child(1){
+        span:nth-child(1) {
           margin-bottom: 4px;
         }
-        .close{
+        .close {
           position: absolute;
           right: 5px;
           top: 4px;
@@ -347,30 +371,28 @@ export default {
           cursor: pointer;
         }
       }
-      &-contant:hover{
-         background: rgb(236, 246, 253);
-        .close{
+      &-contant:hover {
+        background: rgb(236, 246, 253);
+        .close {
           display: block;
         }
       }
-      .active{
+      .active {
         background: @fontBlue;
         color: #fff;
       }
-      &-img{
+      &-img {
         width: 37px;
         height: 19px;
         margin: 0 10px;
-        img{
+        img {
           width: 100%;
           height: 100%;
         }
       }
-
     }
-
   }
-  &-center{
+  &-center {
     padding: 10px 0;
   }
 }
diff --git a/src/views/kpi/workbench/assessmentGroup/edit/components/Entry.vue b/src/views/kpi/workbench/assessmentGroup/edit/components/Entry.vue
index f91973a..47a5a19 100644
--- a/src/views/kpi/workbench/assessmentGroup/edit/components/Entry.vue
+++ b/src/views/kpi/workbench/assessmentGroup/edit/components/Entry.vue
@@ -1,18 +1,34 @@
 <!-- 录入 -->
 <template>
-    <div class="entry">
-        <div class="commonFont" style="padding:20px 0;">
-          <span>启用：</span>
-          <el-switch
-             v-model="form.chartDetails.status" :disabled='info.status===0' active-color="#3ba1ff" :active-value='1' :inactive-value='0' inactive-color="#dcdfe6">
-          </el-switch>
-        </div>
-        <div v-if="form.chartDetails.status" class="commonFont" style="padding:20px 0;">由谁录入</div>
-        <div v-if="form.chartDetails.status" class="commonFont" style="padding:20px 0;">
-          <span>执行人：</span>
-         <el-radio v-model="form.chartDetails.recordSimpleDtos[0].optType" :label="-1">被考核人</el-radio>
-        </div>
+  <div class="entry">
+    <div class="commonFont"
+         style="padding:20px 0;">
+      <span>启用：</span>
+      <el-switch v-model="form.chartDetails.status"
+                 :disabled='info.status===0'
+                 active-color="#3ba1ff"
+                 :active-value='1'
+                 :inactive-value='0'
+                 inactive-color="#dcdfe6">
+      </el-switch>
     </div>
+    <div v-if="form.chartDetails.status"
+         class="commonFont"
+         style="padding:20px 0;">由谁录入</div>
+    <div v-if="form.chartDetails.status"
+         class="commonFont"
+         style="padding:20px 0;">
+      <span>执行人：</span>
+      <el-radio v-model="form.chartDetails.recordSimpleDtos[0].optType"
+                :label="-1">被考核人</el-radio>
+      <div style="padding:20px 0 0 0 "
+           v-for="i in listinfo"
+           :key="i.id">
+        <el-checkbox v-if="i.type !== 1"
+                     v-model="i.checked">{{i.roleName}}</el-checkbox>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -20,6 +36,7 @@ export default {
   props: ['info'],
   data () {
     return {
+      listinfo: [],
       form: {
         chartDetails: {
           status: '',
@@ -34,7 +51,7 @@ export default {
     }
   },
   computed: {},
-  beforeMount () {},
+  beforeMount () { },
   mounted () {
     this.form = Object.assign({}, this.info)
     this.form.chartDetails.recordSimpleDtos = this.form.chartDetails.recordSimpleDtos.length ? this.form.chartDetails.recordSimpleDtos : [
@@ -42,13 +59,26 @@ export default {
         optType: -1
       }
     ]
+    this.listinfo = this.form.roleDtos.map(j => {
+      j.checked = this.form.chartDetails.recordSimpleDtos[0].roleIds ? this.form.chartDetails.recordSimpleDtos[0].roleIds.includes(String(j.roleId)) : false
+      return j
+    })
+    console.log(this.form.roleDtos)
+  },
+  methods: {
+    handleIsEmit (n) {
+      const roleIds = this._.compact(this.listinfo.map(j => {
+        if (j.type !== 1 && j.checked) return j.roleId
+      })).join(',')
+      n.chartDetails.recordSimpleDtos[0].roleIds = roleIds
+      this.$emit('update:info', Object.assign({}, n, { label: n.chartDetails.status ? '' : '已禁用' }))
+    }
   },
-  methods: {},
   watch: {
     form: {
       deep: true,
       handler (n, o) {
-        this.$emit('update:info', Object.assign({}, this.info, this.form, {label: n.chartDetails.status ? '' : '已禁用'}))
+        this.handleIsEmit(JSON.parse(JSON.stringify(n)))
         this.$forceUpdate()
       }
     }
@@ -59,7 +89,6 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.entry{
-
+.entry {
 }
 </style>