management_UI/src/components/ChooseInitiate/index.vue

<!--  -->
<template>
  <popup-right
    v-if="showChooseList"
    @cancel="hundlePopupHide"
    @submit="handleSubmitPopup"
    :title="popupRightTitle"
    :subumitText='subumitText'
    class="popup"
  >
    <div slot="content">
      <div class="popup-search">
        <el-input
          v-model="rqAssessmentParameter.searchName"
          @change="handlePopupSearchChange"
          prefix-icon="el-icon-search"
          clearable
          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>
</template>

<script>
import PopupRight from '@/components/PopupRight'
import { getWorkList } from '@/api/workbench'
export default {
  props: {
    subumitText: {
      type: String,
      default: '确 定'
    },
    popupRightTitle: {
      type: String,
      default: '选择考评组（月度）考核'
    },
    showChooseList: {
      type: Boolean,
      default: false
    },
    oldSelectedList: {
      type: Array,
      default: () => {
        return []
      }
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      popupData: {
        tableList: [],
        selectedList: []
      },
      rqAssessmentParameter: {
        currPage: 1,
        pageSize: 1,
        searchName: '',
        totalCount: 1,
        totalPage: 1
      }
    }
  },
  components: {
    PopupRight
  },
  computed: {},
  beforeMount () {
  },
  mounted () {
    this.handleGainAssessmentGroupList()
    console.log('showChooseList: ', this.showChooseList)
  },
  methods: {
    handlePopupCreat () {
      this.$emit('update:showChooseList', false)
      // 新建考评组
      this.$router.push({ name: 'workbench-edit-group' })
    },
    hundlePopupHide () {
      this.popupData.selectedList = []
      if (this.$refs.popupMultipleTable) {
        this.$refs.popupMultipleTable.clearSelection()
      }
      this.$emit('update:showChooseList', false)
    },
    handlePopupSearchChange (val) {
      // 去搜搜
      this.handleGainAssessmentGroupList()
    },
    handleSelectionChange (val) {
      //  选择发生变化
      this.popupData.selectedList = val
    },
    handleGetRowKeys (row) {
      return row.id
    },
    handleSubmitPopup () {
      const list = this.popupData.selectedList
      const id = list.map((item, index) => {
        return item.id
      }).join(',')
      if (this.$listeners.cb) {
        this.$emit('cb', { value: id, list })
      } else {
        this.$emit('update:list', id)
        this.$emit('update:showChooseList', false)
      }
    },
    // 获取数据
    handleGainAssessmentGroupList (currPage) {
      currPage = currPage > 0 ? currPage : this.rqAssessmentParameter.currPage
      let para = {
        pageSize: this.rqAssessmentParameter.pageSize,
        currPage: currPage,
        name: this.rqAssessmentParameter.searchName
      }
      getWorkList(Object.assign({}, para, this.options)).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
      })
    },
    handleCurrentChange (val) {
      this.handleGainAssessmentGroupList(val)
    }
  },
  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 {
  margin: 10px 0;
}
</style>