seecoder-devcloud-frontend/src/components/List.vue

<template>
  <div style="width: 100%">
    <div>
      <el-button type="primary"  v-if="!isShowCheckbox" size="small" @click="showCheckbox">批量操作</el-button>
      <span  v-if="isShowCheckbox">
      <el-button type="info" size="small" @click="isShowCheckbox=false">取消操作</el-button>
      <el-button type="danger"  size="small" @click="handleMultipleDelete">批量删除</el-button>
      <el-select
        @change="handleMultipleStatusChange"
        v-model="status"
        size='medium'
        placeholder="批量修改状态"
        style="margin-left: 30px">
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select
        @change="handleMultipleAssignmentChange"
        v-model="assignment"
        size='medium'
        placeholder="批量修改负责人"
        style="margin-left: 30px">
        <el-option
          v-for="item in assignmentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </span>
    </div>
    <el-table
      :data="listData"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        v-if="isShowCheckbox"
        type="selection"
        width="60">
      </el-table-column>
      <el-table-column
        prop="projectCode"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        min-width="180"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="assignment"
        label="优先级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="180">
      </el-table-column>
      <el-table-column
        prop="assignment"
        label="计划时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="assignment"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="assignment"
        label="经办人"
        width="180">
      </el-table-column>
    </el-table>
    <el-pagination
      style="display: flex;flex-direction: row;justify-content: center;margin-top: 20px"
      background
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'List',
  props: {
    listData: Array,
    total: Number,
    statusOptions: {
      type: Array,
      default() {
        return [
          {
            label: '未分配',
            value: 1,
          },
          {
            label: '未完成',
            value: 2,
          },
          {
            label: '已完成',
            value: 3,
          },
          {
            label: '已关闭',
            value: 4,
          }];
      },
    },
    assignmentOptions: {
      type: Array,
      default() {
        return [
          {
            label: '组员A',
            value: 1,
          },
          {
            label: '组员B',
            value: 2,
          },
          {
            label: '组员C',
            value: 3,
          },
          {
            label: '组员D',
            value: 4,
          }];
      },
    },
  },
  data() {
    return {
      isShowCheckbox: false,
      pageSize: 10,
      selectedId: [],
      status: null,
      assignment: null,
    };
  },
  methods: {
    showCheckbox() {
      this.isShowCheckbox = true;
    },
    handleSelectionChange(val) {
      console.warn(val);
      const tempArray = [];
      val.forEach((item) => {
        tempArray.push(item.projectCode);
      });
      this.selectedId = tempArray;
    },
    // 分页切换事件
    handleCurrentChange(currentPage) {
      console.log(currentPage);
      this.$emit('current-change', currentPage);
    },
    // 批量删除
    handleMultipleDelete() {
      console.warn('deleteMultiply');
      this.$emit('multiple-delete', this.selectedId);
    },
    // 批量修改状态
    handleMultipleStatusChange() {
      this.$emit('multiple-status-change', this.selectedId);
    },
    // 批量修改分配人
    handleMultipleAssignmentChange() {
      this.$emit('multiple-assignment-change', this.selectedId);
    },
  },
};
</script>

<style scoped>
</style>