优化

src/views/kpi/workbench/assessmentGroup/edit/components/ApprovalList.vue

@@ -2,24 +2,34 @@
 <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="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}">
+          <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>
+            <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">
+          <div v-if="index+1!==list.length && list.length!==0"
-                <img src="./imgs/right.png" alt="">
+               class="process-title-item-img">
+            <img src="./imgs/right.png"
+                 alt="">
           </div>
         </div>
       </div>
       <div class='addP'>
-            <i @click="handleAdd" class="el-icon-circle-plus-outline add"></i>
+        <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 v-if="JSON.stringify(itemInfo) !== '{}'"
+         class="ProcessList-center">
       <div class="ProcessList-center-zhixingren commonFont">
         <span>执行人：</span>
         <el-radio-group v-model="itemInfo.isActive">
@@ -27,23 +37,33 @@
           <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;">
+        <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-select size="mini"
-                  <el-option
+                     style="width:100px;"
-                    v-for="item in options"
+                     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;">
+        <div v-if="itemInfo.isActive===0"
-                <el-button size="mini" @click="itemInfo.isShow=true" plain>选择成员</el-button>
+             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'/>
+        <getpersonl v-if="itemInfo.isShow"
-              <div v-if="itemInfo.isActive!==-1" style="padding:20px 0 0 0 ">
+                    :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">
@@ -53,8 +73,12 @@
             </el-radio-group>
           </div>
         </div>
-              <div style="padding:20px 0 0 0 " v-for="i in itemInfo.roleDtos" :key="i.id">
+        <div style="padding:20px 0 0 0 "
-                <el-checkbox v-if="i.type !== 1" @change="handleChang(i)" v-model="i.checked">{{i.roleName}}</el-checkbox>
+             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>
@@ -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{
+.ProcessList {
-  .addP{
+  .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{
+    .add {
       font-size: 30px;
       color: #c5c5c5;
-        margin:0 4px ;
+      margin: 0 4px;
     }
-    &-item{
+    &-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{
+      &-contant:hover {
         background: rgb(236, 246, 253);
-        .close{
+        .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;
   }
 }

src/views/kpi/workbench/assessmentGroup/edit/components/Entry.vue

@@ -1,16 +1,32 @@
 <!-- 录入 -->
 <template>
   <div class="entry">
-        <div class="commonFont" style="padding:20px 0;">
+    <div class="commonFont"
+         style="padding:20px 0;">
       <span>启用：</span>
-          <el-switch
+      <el-switch v-model="form.chartDetails.status"
-             v-model="form.chartDetails.status" :disabled='info.status===0' active-color="#3ba1ff" :active-value='1' :inactive-value='0' inactive-color="#dcdfe6">
+                 :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"
-        <div v-if="form.chartDetails.status" class="commonFont" style="padding:20px 0;">
+         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>
+      <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>
@@ -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>