考评组 选择添加复选

src/components/ChooseInitiate/index.vue

@@ -92,6 +92,12 @@ export default {
       type: Boolean,
       default: false
     },
+    oldSelectedList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
     options: {
       type: Object,
       default: () => {
@@ -101,14 +107,13 @@ export default {
   },
   data () {
     return {
-      // showChooseList: true,
       popupData: {
         tableList: [],
         selectedList: []
       },
       rqAssessmentParameter: {
         currPage: 1,
-        pageSize: 100,
+        pageSize: 1,
         searchName: '',
         totalCount: 1,
         totalPage: 1
@@ -119,7 +124,8 @@ export default {
     PopupRight
   },
   computed: {},
-  beforeMount () {},
+  beforeMount () {
+  },
   mounted () {
     this.handleGainAssessmentGroupList()
     console.log('showChooseList: ', this.showChooseList)
@@ -154,7 +160,7 @@ export default {
         return item.id
       }).join(',')
       if (this.$listeners.cb) {
-        this.$emit('cb', {value: id, list})
+        this.$emit('cb', { value: id, list })
       } else {
         this.$emit('update:list', id)
         this.$emit('update:showChooseList', false)
@@ -179,14 +185,27 @@ export default {
       this.handleGainAssessmentGroupList(val)
     }
   },
-  watch: {}
+  watch: {
+    'showChooseList': function (newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(res => {
+          if (this.oldSelectedList.length > 0) {
+            this.oldSelectedList.forEach((row) => {
+              this.$refs.popupMultipleTable.toggleRowSelection(row, true)
+            })
+          }
+        })
+      }
+      console.log('showChooseList', newVal, oldVal)
+    }
+  }
 
 }
 
 </script>
 
 <style lang='less' scoped>
-.popup-search{
+.popup-search {
   margin: 10px 0;
 }
 </style>

src/views/kpi/workbench/initiateAssessment/index.vue

@@ -96,77 +96,14 @@
       </div>
     </el-form>
     <div>
-      <popup-right
+      <ChooseInitiate
-        v-if="showChooseList"
+        @cb='handleCallBackChoose'
-        @cancel="hundlePopupHide"
+        subumitText='确定'
-        @submit="handleSubmitPopup"
+        :popupRightTitle='popupTitle'
-        :title="popupRightTitle"
+        :oldSelectedList='formData.assessmentList'
-        class="popup"
+        :showChooseList.sync='showChooseList'
-      >
-        <div slot="content">
-          <div class="popup-search">
-            <el-input
-              v-model="rqAssessmentParameter.searchName"
-              @change="handlePopupSearchChange"
-              prefix-icon="el-icon-search"
-              placeholder="搜索考评组"
-              size="mini"
-            ></el-input>
-          </div>
-          <div class="popup-table">
-            <el-table
-              v-if="popupData.tableList.length"
-              ref="popupMultipleTable"
-              :data="popupData.tableList"
-              @selection-change="handleSelectionChange"
-              tooltip-effect="dark"
-              :row-key="handleGetRowKeys"
-            >
-              <el-table-column
-                type="selection"
-                width="40"
-                :reserve-selection="true"
-              ></el-table-column>
-              <el-table-column
-                label="全选"
-                width="250"
-              ><template slot-scope="scope">{{scope.row.name}}</template></el-table-column>
-              <el-table-column
-                width="80"
-                align="right"
-              ><template slot-scope="scope">{{scope.row.counts}}人</template></el-table-column>
-            </el-table>
-            <div
-              v-else
-              class="popup-empty comonPromptFont"
-            >
-              <img
-                src=""
-                style="height: 150px; width: 150px;"
       />
-              <div>暂无考评组</div>
+
-              <div>考评组用于自定义配置“被考核人”的考核指标和考核流程</div>
-              <el-button
-                @click="handlePopupCreat"
-                type="text"
-              >新建考评组</el-button>
-            </div>
-          </div>
-          <el-pagination
-            :hide-on-single-page="true"
-            :current-page.sync="rqAssessmentParameter.currPage"
-            :page-size="rqAssessmentParameter.pageSize"
-            :total="rqAssessmentParameter.totalCount"
-            :page-count="rqAssessmentParameter.totalPage"
-            @current-change="handleCurrentChange"
-            layout="total, prev, pager, next, jumper"
-          ></el-pagination>
-        </div>
-        <div
-          slot="footer-left"
-          class="popup-footer-left"
-        >已选择：{{popupData.selectedList.length}}个</div>
-      </popup-right>
       <el-dialog
         title="发起考核"
         :visible.sync="dialogSendVisible"
@@ -187,14 +124,13 @@
   </div>
 </template>
 <script>
-import PopupRight from '@/components/PopupRight'
+import ChooseInitiate from '@/components/ChooseInitiate'
-import { getWorkList } from '@/api/workbench'
 import { apiInitiateAssessmentInfo } from '@/api/initiateAssessment'
 export default {
   data () {
     return {
       dialogSendVisible: false,
-      popupRightTitle: '选择考评组（月度）考核',
+      popupTitle: '选择考评组（月度）考核',
       showChooseList: false,
       formData: {
         cycleTimeType: 0,
@@ -210,22 +146,11 @@ export default {
         rangDate: [{ required: true, message: '请选择时间周期', trigger: 'change' }],
         assessmentList: [{ type: 'array', required: true, message: '请选择参与考评组', trigger: 'change' }],
         'mergeType.name': [{ required: true, message: '请填写新建考核名称', trigger: 'blur' }]
-      },
-      popupData: {
-        tableList: [],
-        selectedList: []
-      },
-      rqAssessmentParameter: {
-        currPage: 1,
-        pageSize: 100,
-        searchName: '',
-        totalCount: 1,
-        totalPage: 1
       }
     }
   },
   components: {
-    PopupRight
+    ChooseInitiate
   },
   watch: {
     'formData.cycleTimeType': function (newVal, oldVal) {
@@ -233,31 +158,24 @@ export default {
     }
   },
   created () {
-    this.handleGainAssessmentGroupList()
   },
   methods: {
     handleChangeRangDate (chgVal) {
+      this.popupTitle = '选择考评组（月度）考核'
       let nameStr = this.$format(chgVal, 'yyyy年MM月绩效考核')
       if (this.formData.cycleTimeType === 1) {
         // 自定义
+        this.popupTitle = '选择考评组（自定义）考核'
         nameStr = chgVal[0] + '至' + chgVal[1] + '绩效考核'
       }
       this.formData.mergeType.name = nameStr
     },
     hundlePopupHide () {
-      this.popupData.selectedList = []
       this.$refs.popupMultipleTable.clearSelection()
       this.showChooseList = false
     },
     handleChooseGroup () {
       this.showChooseList = !this.showChooseList
-      this.$nextTick(res => {
-        if (this.formData.assessmentList.length > 0) {
-          this.formData.assessmentList.forEach((row) => {
-            this.$refs.popupMultipleTable.toggleRowSelection(row, true)
-          })
-        }
-      })
     },
     handleGetRowKeys (row) {
       return row.id
@@ -297,41 +215,10 @@ export default {
         })
       })
     },
-    handlePopupSearchChange (val) {
+    handleCallBackChoose (val) {
-      // 去搜搜
+      // 选择数据
-      this.handleGainAssessmentGroupList()
+      this.formData.assessmentList = val.list
-    },
-    handleSelectionChange (val) {
-      //  选择发生变化
-      this.popupData.selectedList = val
-    },
-    handlePopupCreat () {
       this.showChooseList = false
-      // 新建考评组
-      this.$router.push({ name: 'workbench-edit-group' })
-    },
-    handleSubmitPopup () {
-      const list = this.popupData.selectedList
-      this.formData.assessmentList = this.popupData.selectedList
-      this.showChooseList = false
-    },
-    handleCurrentChange (val) {
-      this.handleGainAssessmentGroupList(val)
-    },
-    // 获取数据
-    handleGainAssessmentGroupList (currPage) {
-      currPage = currPage > 0 ? currPage : this.rqAssessmentParameter.currPage
-      let para = {
-        pageSize: this.rqAssessmentParameter.pageSize,
-        currPage: currPage,
-        name: this.rqAssessmentParameter.searchName
-      }
-      getWorkList(para).then(res => {
-        this.rqAssessmentParameter.totalPage = res.data.totalPage
-        this.rqAssessmentParameter.totalCount = res.data.totalCount
-        this.currPage = res.data.currPage
-        this.popupData.tableList = res.data.list
-      })
     }
   }
 }
@@ -348,24 +235,5 @@ export default {
   .line-space {
     margin-top: 20px;
   }
-  .popup {
-    &-search {
-      margin-bottom: 20px;
-    }
-    &-empty {
-      padding-top: 100px;
-      height: 500px;
-      width: 410px;
-      font-size: 14px;
-      text-align: center;
-      display: block;
-      align-content: center;
-      justify-content: center;
-    }
-
-    &-footer-left {
-      color: @fontBlue;
-    }
-  }
 }
 </style>