UNION_NSI/target/classes/static/components/activity/school/DeleteInfo.vue

<template>
  <div>
    <div class="pull-right offscreen-right mt5">
      <el-button icon="el-icon-close" type="primary" size="small" :loading="submitLoading" plain
                 @click="joinMemberFamily">批量删除
      </el-button>
    </div>

    <el-table :data="tableData" style="width: 100%;" row-key="id"
              @sort-change="pageOrder" v-loading="tableLoading" :size="tableSize" class="vi-table"
              @selection-change="handleSelectionChange">
      <el-table-column :reserve-selection="true"
                       type="selection"
                       width="55">
      </el-table-column>
      <el-table-column align="center" header-align="center" type="index" :index="indexMethod"
                       label="序号"
                       width="80px"></el-table-column>

      <el-table-column
          align="center"
          header-align="center"
          v-for="column in tableColumns"
          :label="column.label"
          :prop="column.prop"
          :sortable="column.sortable"
          show-overflow-tooltip>

        <template scope="{row}" v-if="column.prop=='name'">
          <span v-if="row.name">{{ row.name }}</span>
          <span v-if="!row.name">暂无</span>
        </template>

        <template scope="{row}" v-else-if="column.prop=='identity'">
          <el-tag v-if="row.identity.includes(1)" effect="light">运动员</el-tag>
          <el-tag v-if="row.identity.includes(2)" type="success" effect="light">教练
          </el-tag>
          <el-tag v-if="row.identity.includes(3)" type="warning" effect="light">领队
          </el-tag>
          <el-tag v-if="row.identity.includes(4)" type="warning"
                  effect="light">处级领导
          </el-tag>
          <el-tag v-if="row.identity.includes(5)" type="warning" effect="light">替补
          </el-tag>

        </template>

        <template scope="{row}" v-else-if="column.prop=='divisionLevelLeadership'">
          <span v-if="row.divisionLevelLeadership==true">是</span>
          <span v-else>否</span>
        </template>

        <template scope="{row}" v-else-if="column.prop=='status'">
          <span v-if="row.status==1">待审核</span>
          <span v-if="row.status==2" style="color: #66BD3D">报名成功</span>
          <span v-if="row.status==3" style="color: red">审核不通过</span>
        </template>
        <template scope="{row}" v-else-if="column.prop=='awardsMode'">
          <span v-if="row.awardsMode==1">团体</span>
          <span v-if="row.awardsMode==2">单项</span>
        </template>


      </el-table-column>

      <el-table-column prop="userOnline" align="center" header-align="center" label="操作"
                       width="150px">
        <template scope="{row}">
          <el-button type="danger" icon="el-icon-delete" circle plain
                     @click="doDelete(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row class="el-pagination-container" style="margin-bottom: 0px">
      <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumberChange"
          :current-page="pageForm.pageNumber"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageForm.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="pageForm.totalCount">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
module.exports = {
  props: {
    event_list: {
      type: Object,
      default: {},
    },
  },
  mixins: [initTableMixins],
  data() {
    return {
      pageForm: {
        searchName: "",
        searchKeyword: "",
        pageNumber: 1,
        pageSize: 10,
        totalCount: 0,
        pageOrderName: "",
        pageOrderBy: ""
      },
      selection: [],
      tableColumns: [
        {prop: 'name', label: '所属小队'},
        {prop: 'username', label: '姓名'},
        {prop: 'loginname', label: '工号'},
        {prop: 'mobile', label: '电话'},
        {prop: 'sex', label: '性别'},
        {prop: 'identity', label: '身份', sortable: true},
        // {prop: 'divisionLevelLeadership', label: '是否处级领导', sortable: true},
        {prop: 'status', label: '状态', sortable: true},
        {prop: 'awardsMode', label: '项目类型'},
        {prop: 'allName', label: '报名项目'},
      ],
    }
  },
  watch: {
    event_list(val) {
      this.pageForm.activityId = val.activityId
      this.pageForm.eventId = val.eventId
      this.applyPageData(val)
    }
  },
  methods: {
    pageOrder(column) {
      this.pageForm.pageOrderName = column.prop;
      this.pageForm.pageOrderBy = column.order;
      this.applyPageData();
    },
    pageNumberChange(val) {
      this.pageForm.pageNumber = val;
      this.applyPageData();
    },
    pageSizeChange(val) {
      this.pageForm.pageSize = val;
      this.applyPageData();
    },
    doDelete(row) {
      const {id} = row
      this.$confirm('确定要删除该报名人员吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async (a, b) => {
          if ("confirm" === a) {
            this.$set(row, "loading", true)
            const resp = await $.post(loc() + "/doDelete", {id: id});
            if (resp.code === 0) {
              this.applyPageData()
              this.$emit('flush')
              this.notifySuccess(resp.msg)
            }else{
              this.notifyError(resp.msg)
            }
            this.$set(row, "loading", false)


          }
        }
      });
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    applyPageData() {
      sublime.showLoadingbar();
      this.tableLoading = true
      $.post(loc() + "/applyPageData", this.pageForm, (data) => {
        sublime.closeLoadingbar();
        this.tableLoading = false
        if (data.code == 0) {
          this.tableData = data.data.list;
          this.pageForm.totalCount = data.data.totalCount;
        } else {
          this.$message.error(data.msg);
        }
      }, "json");
    },
    joinMemberFamily() {
      if (!this.selection.length) {
        this.$notify({
          title: '警告',
          message: '请先勾选需要删除的用户！',
          type: 'warning'
        });
        return
      }
      this.$confirm('是否将已勾选的人员删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.submitLoading = true
        const resp = await $.post(loc() + "/joinMemberFamily", {applysId: JSON.stringify(this.selection.map(v => v.id))})
        if (resp.code === 0) {
          this.applyPageData()
          this.$emit('flush')
          this.notifySuccess(resp.msg)
        }else{
          this.notifyError(resp.msg)
        }
        this.submitLoading = false

      })

    },
  },
  async created() {
  }
}
</script>