FE_preschoolEdu_server/src/pages/activity/manage/matchSignup.vue

<template>
  <div class="page-content"
       style="padding: 24px">
    <div class="tool">
      <ul class="filter">
        <li>
          <label>报名人员状态：</label>
          <el-select v-model="form.isDisable"
                     clearable
                     @change="initData">
            <el-option v-for="(item, i) in isDisable"
                       :key="i"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </li>
        <li>
          <label>组织类型</label>
          <el-select v-model="form.platformId"
                     clearable
                     @change="initData">
            <el-option v-for="(item, i) in platformId"
                       :key="i"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </li>
        <li>
          <label>签到情况：</label>
          <el-select v-model="form.signInStatus"
                     clearable
                     @change="initData">
            <el-option v-for="(item, i) in signInStatus"
                       :key="i"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </li>
        <li>
          <label>搜索：</label>
          <el-input placeholder="请输入姓名、手机号进行查询"
                    prefix-icon="el-icon-search"
                    v-model="form.keyWord"
                    clearable
                    size="mini"
                    style="width: 250px"></el-input>
        </li>
      </ul>
      <div>
        <el-button type="primary"
                   @click="add">新增</el-button>
        <el-button @click="exportAll">批量导出</el-button>
      </div>
    </div>

    <el-table ref="table"
              :data="list"
              class="table"
              stripe
              header-align="center"
              @selection-change="handleSelectionChange"
              row-key="id"
              @sort-change="sortChange">
      <el-table-column type="selection"
                       width="80"
                       align="center"
                       :reserve-selection="true"></el-table-column>
      <el-table-column type="index"
                       width="60"
                       label="序号"
                       align="center">
        <template slot-scope="scope">
          {{ scope.$index + (page - 1) * pageSize + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username"
                       label="姓名">
      </el-table-column>
      <el-table-column prop="organizationName"
                       label="组织名称"
                       sortable="custom">
      </el-table-column>
      <el-table-column prop="platformId"
                       label="组织类型"></el-table-column>
      <el-table-column prop="createTime"
                       label="报名时间">
      </el-table-column>
      <el-table-column prop="signInStatus"
                       label="签到情况"></el-table-column>
      <el-table-column prop="phone"
                       label="手机号">
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="320">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="edit(scope.row, true)">查看</el-button>
          <el-button type="text"
                     @click="edit(scope.row, false)">编辑</el-button>
          <el-switch v-model="scope.row.isDisable"
                     :active-text="scope.row.isDisable ? '关' : '开'"
                     :active-value="0"
                     :inactive-value="1"
                     style="margin-left: 5px"
                     @change="switchOff($event,scope.row,scope.$index)"></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next"
                     :total="total"
                     @current-change="handleCurrentChange"
                     :current-page="page">
      </el-pagination>
    </div>

    <el-dialog :title="(memberForm.id ? '编辑' : '新增') + '报名人员'"
               :visible.sync="memberVisible"
               width="400px"
               class="dialog"
               :close-on-click-modal="false"
               @close="closeAdd">
      <el-form ref="form"
               :model="memberForm"
               :rules="rules"
               label-width="80px"
               :disabled="disalbed"
               style='margin-right: 10px;'>
        <el-form-item prop="phone"
                      label="手机号">
          <el-input v-model="memberForm.phone"
                    maxlength="11"
                    placeholder="请输入手机号"
                    @input="phoneChange"></el-input>
        </el-form-item>
        <el-form-item prop="username"
                      label="姓名">
          <el-input v-model="memberForm.username"
                    placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="teamId"
                      label="组织">
          <el-select v-model="memberForm.teamId"
                     filterable
                     style="width: 100%">
            <el-option v-for="(item, i) in orgs"
                       :key="i"
                       :label="item.organizationName"
                       :value="item.teamId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="memberForm.id"
                      prop="signInTime"
                      label="签到时间">
          <el-date-picker v-model="memberForm.signInTime"
                          style="width: 100%"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="请选择">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="memberVisible = false">取消</el-button>
        <el-button v-if="!disalbed"
                   type="primary"
                   @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Util from "@/libs/util";
import axios from 'axios'
import Setting from "@/setting";
export default {
  name: "matchSignup",
  data () {
    return {
      token: Util.local.get(Setting.tokenKey),
      id: this.$route.query.id,
      teamId: this.$route.query.teamId,
      form: {
        isDisable: '',
        platformId: '',
        signInStatus: '',
        keyWord: '',
      },
      isDisable: [
        {
          id: '',
          name: '不限'
        },
        {
          id: 1,
          name: '已禁用'
        },
        {
          id: 0,
          name: '未禁用'
        },
      ],
      platformId: [
        {
          id: '',
          name: '不限'
        },
        {
          id: 7,
          name: '无组织'
        },
        {
          id: 6,
          name: '供应商'
        },
        {
          id: 5,
          name: '幼儿园'
        },
      ],
      signInStatus: [
        {
          id: '',
          name: '不限'
        },
        {
          id: 1,
          name: '已签到'
        },
        {
          id: 0,
          name: '待签到'
        },
        {
          id: 2,
          name: '未签到'
        },
      ],
      keyword: "",
      list: [],
      multipleSelection: [],
      page: 1,
      pageSize: 10,
      total: 0,

      memberVisible: false,
      memberForm: {
        accountId: '',
        identification: 1,
        signInTime: '',
        teamId: '',
        phone: '',
        username: '',
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
      },
      orgs: [],
      disalbed: false,
      timer: null,
      submiting: false
    };
  },
  watch: {
    'form.keyWord': function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    getData () {
      this.$post(this.api.queryRegistrationByCondition, {
        pageNum: this.page,
        pageSize: this.pageSize,
        competitionId: this.id,
        ...this.form
      }).then(({ data }) => {
        this.list = data.records;
        this.total = data.total;
      }).catch(res => { });
    },
    initData () {
      this.page = 1
      this.getData()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData();
    },
    switchOff (val, row, index) {
      this.$put(`${this.api.disableRegistration}?competitionRegistrationId=${row.id}&isDisable=${val}`).then(res => { }).catch(err => { });
    },
    delData (row) {
      this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$post(`${this.api.delActivityApplicant}?id=${row.id}`).then(res => {
            Util.successMsg("删除成功");
            this.getData();
          }).catch(res => { });
        })
        .catch(() => { });
    },
    // 排序回调
    sortChange (column) {
      // 1上2下
      if (column.prop === 'school') this.schoolOrder = column.order ? column.order === 'ascending' ? 2 : 1 : ''
      if (column.prop === 'teamName') this.teamOrder = column.order ? column.order === 'ascending' ? 2 : 1 : ''
      this.getData()
    },
    exportAll () {
      const data = this.multipleSelection
      if (data.length) {
        data.map((e, i) => e.id = i + 1)
        axios.post(this.api.exportDataInBatchesCom, data, {
          headers: {
            token: this.token
          },
          responseType: 'blob'
        }).then((res) => {
          Util.downloadFileDirect(`报名人员.xls`, new Blob([res.data]))
        }).catch(res => { })
      } else {
        axios.get(`${this.api.excelExportCom}?competitionId=${this.id}`, {
          headers: {
            token: this.token
          },
          responseType: 'blob'
        }).then((res) => {
          Util.downloadFileDirect(`报名人员.xls`, new Blob([res.data]))
        }).catch(res => { })
      }
    },
    // 手机号变化后带出用户信息
    phoneChange (val) {
      clearTimeout(this.timer)
      if (/^1[3456789]\d{9}$/.test(val)) {
        this.timer = setTimeout(async () => {
          const { data } = await this.$post(`${this.api.getOrganizationInformationByPhone}?phone=${val}`)
          const peoole = data.find(e => !e.organizationName) // 个人
          const orgs = data.filter(e => e.platformId === '幼儿园' || e.platformId === '供应商') // 组织
          orgs.forEach(e => {
            if (!e.organizationName) e.organizationName = e.userName
          })
          this.orgs = orgs
          this.memberForm.username = peoole.userName
          this.memberForm.accountId = peoole.accountId
          // this.memberForm.username = org.organizationName
        }, 500)
      }
    },
    // 编辑
    async edit (row, disalbed) {
      // const res = await this.$post(`${this.api.detailsOfApplicants}?competitionId=${this.id}&accountId=${row.accountId}`)
      row.phone && this.phoneChange(row.phone)
      this.memberForm = {
        accountId: row.accountId,
        identification: 1,
        signInTime: row.signInStatus === '待签到' ? '' : new Date(),
        teamId: '',
        phone: row.phone,
        username: row.username,
        signInStatus: 1,
        id: row.id,
      }
      this.disalbed = disalbed
      this.memberVisible = true
    },
    // 新增
    add () {
      this.memberVisible = true
    },
    // 关闭弹框回调
    closeAdd () {
      this.memberForm = {
        accountId: '',
        identification: 1,
        signInTime: '',
        teamId: '',
        phone: '',
        username: '',
        signInStatus: 1,
      }
    },
    // 新增人员
    submit () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.submiting) return false
          this.submiting = true
          const form = JSON.parse(JSON.stringify(this.memberForm))
          form.competitionId = this.id
          if (!form.signInTime) form.signInTime = Util.formatDate('yyyy-MM-dd hh:mm:ss', new Date())
          await this.$post(this.api[form.id ? 'editRegistrationInformation' : 'addNewApplicantsInTheBackground'], form)
          this.memberVisible = false
          this.submiting = false
          this.getData()
        }
      })
    },
  }
};
</script>

<style lang="scss" scoped>
/deep/.dia-form {
    .w-100 {
        width: 100%;
    }
    .tips {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>