cxyy-web2/src/views/center/sign.vue

<template>
  <div class="index">
    <el-row>
      <el-col :span="24" class="main" v-loading="loading">
        <!-- <el-col :span="24" class="one">
          <el-radio-group size="large" v-model="searchForm.type">
            <el-radio-button label="活动报名" value="1" />
            <el-radio-button label="大赛报名" value="2" />
          </el-radio-group>
        </el-col> -->
        <el-col :span="24" class="two">
          <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }">
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
            <el-table-column prop="matchInfo.name" align="center" label="活动名称" />
            <el-table-column prop="time" align="center" label="报名时间" width="180" />
            <el-table-column prop="status" align="center" label="状态" width="180">
              <template #default="scope">
                <div>{{ getDict(scope.row.status, 'status') }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template #default="{ row }">
                <el-link :underline="false" type="primary" size="mini" @click="toView(row)" style="margin-right: 10px">查看活动</el-link>
                <el-link :underline="false" v-if="row.status != '1'" type="warning" size="mini" @click="toEdit(row)" style="margin-right: 10px">修改报名信息</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="thr">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
        </el-col>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose">
      <el-row>
        <el-col :span="24" v-if="dialog.type == '1'">
          <el-form label-position="top" ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input clearable v-model="form.name" placeholder="请输入姓名"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话号" prop="phone">
                  <el-input clearable v-model="form.phone" placeholder="请输入电话号"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="证件类型" prop="cardType">
                  <el-select clearable v-model="form.cardType" placeholder="请选择证件类型">
                    <el-option v-for="(item, index) in cardTypeList" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件号码" prop="card">
                  <el-input clearable v-model="form.card" placeholder="请输入证件号码"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="微信/QQ" prop="communication">
                  <el-input clearable v-model="form.communication" placeholder="请输入微信/QQ"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电子邮箱" prop="email">
                  <el-input clearable v-model="form.email" placeholder="请输入电子邮箱"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注" prop="brief">
              <el-input v-model="form.remark" :autosize="{ minRows: 2, maxRows: 8 }" type="textarea" placeholder="请输入备注" />
            </el-form-item>
            <el-form-item>
              <el-col :span="24" class="button">
                <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import moment from 'moment'
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')

import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 接口
import { SignStore } from '@/store/api/platform/sign'
import { DictDataStore } from '@/store/api/system/dictData'
const store = SignStore()
const dictDataStore = DictDataStore()
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const currentPage = ref(1)
// const searchForm = ref({ type: '1' })
const dialog = ref({ type: '1', show: false, title: '修改报名信息' })
const ruleFormRef = ref()
const form = ref({})
const validatePhoneNumber = (rule, value, callback) => {
  const reg = /^1[3-9]\d{9}$/
  if (!value) {
    return callback(new Error('手机号不能为空'))
  }
  if (!reg.test(value)) {
    return callback(new Error('请输入正确的手机号'))
  }
  callback()
}
const validateCardNumber = (rule, value, callback) => {
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    return callback(new Error('证件号码不能为空'))
  }
  if (!reg.test(value)) {
    return callback(new Error('请输入正确的证件号码'))
  }
  callback()
}
const rules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
  cardType: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
  card: [{ required: true, validator: validateCardNumber, trigger: 'change' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
})
// 字典表
const statusList = ref([])
const cardTypeList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  loading.value = false
})
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit,
    user: user.value.id
    // ...searchForm.value
  }
  const res = await store.sign(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const searchOther = async () => {
  let result
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 证件类型
  result = await dictDataStore.query({ code: 'cardType', is_use: '0' })
  if ($checkRes(result)) cardTypeList.value = result.data
}
// 字典数据转换
const getDict = (data, model) => {
  if (data) {
    let res
    if (model == 'status') res = statusList.value.find((f) => f.value == data)
    return get(res, 'label')
  }
}
// 修改
const toEdit = (data) => {
  form.value = data
  dialog.value = { type: '1', show: true, title: '修改报名信息' }
}
// 查看赛事
const toView = (item) => {
  router.push({ path: '/match/detail', query: { id: item.match } })
}
// 报名
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(`您确定修改该数据将会重新审核?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .then(async () => {
          const data = cloneDeep(form.value)
          const other = { time: moment().format('YYYY-MM-DD'), status: '0' }
          let res = await store.update({ ...data, ...other })
          if ($checkRes(res, true)) {
            await toClose()
            await search()
          } else {
            ElMessage({ message: `${res.errmsg}`, type: 'error' })
          }
        })
        .catch(() => {})
    } else {
      console.log('error submit!', fields)
    }
  })
}
const toClose = () => {
  form.value = {}
  dialog.value = { show: false }
}
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    margin: 0 0 10px 0;
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
  .button {
    text-align: center;
  }
}
</style>