304 lines
7.8 KiB
Vue
304 lines
7.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form
|
|
:model="queryParams"
|
|
ref="queryForm"
|
|
v-show=""
|
|
:inline="true"
|
|
@submit.native.prevent
|
|
>
|
|
<el-form-item label="姓名/单位" prop="name">
|
|
<el-input
|
|
v-model="queryParams.name"
|
|
placeholder="请输入关键字"
|
|
clearable
|
|
size="small"
|
|
style="width: 240px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="small"
|
|
@click="handleQuery"
|
|
>搜索</el-button
|
|
>
|
|
<el-button icon="el-icon-refresh" size="small" @click="resetQuery"
|
|
>重置</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- <el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="el-icon-plus"
|
|
size="small"
|
|
@click="handleAdd()"
|
|
>新增</el-button
|
|
>
|
|
</el-col>
|
|
<right-toolbar
|
|
:showSearch.sync="showSearch"
|
|
@queryTable="getList"
|
|
></right-toolbar>
|
|
</el-row> -->
|
|
|
|
<el-table v-loading="loading" :data="dataList">
|
|
<el-table-column
|
|
label="活动id"
|
|
prop="activityId"
|
|
align="center"
|
|
width="80"
|
|
/>
|
|
<el-table-column
|
|
label="活动报名id"
|
|
prop="id"
|
|
align="center"
|
|
width="100"
|
|
/>
|
|
<el-table-column label="姓名" prop="name" align="center" />
|
|
<!-- <el-table-column label="分类" prop="name" align="center" /> -->
|
|
<!-- <el-table-column label="所属领域" prop="name" align="center" /> -->
|
|
<el-table-column label="手机号" prop="phone" align="center" />
|
|
<el-table-column label="报名时间" align="center" prop="createTime">
|
|
<!-- <template #default="{ row }">
|
|
<span>{{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
|
|
</template> -->
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center">
|
|
<!-- class-name="small-padding fixed-width" -->
|
|
<template #default="{ row }">
|
|
<el-button
|
|
round
|
|
size="small"
|
|
type="primary"
|
|
@click="handleUpdate(row)"
|
|
>修改</el-button
|
|
>
|
|
<el-button round size="small" type="danger" @click="handleDelete(row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="queryParams.page_num"
|
|
:limit.sync="queryParams.page_size"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
<el-dialog title="活动报名" v-model="showSignUp">
|
|
<el-form
|
|
:model="activityEnrollForm"
|
|
:rules="signUpRules"
|
|
ref="activityEnrollFormRef"
|
|
labelWidth="100px"
|
|
>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名" prop="name">
|
|
<el-input
|
|
placeholder="请输入姓名"
|
|
v-model="activityEnrollForm.name"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input
|
|
placeholder="请输入手机号"
|
|
maxlength="11"
|
|
v-model="activityEnrollForm.phone"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<el-form-item label="年龄" prop="age">
|
|
<el-input-number
|
|
placeholder="请输入年龄"
|
|
v-model="activityEnrollForm.age"
|
|
></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="性别" prop="gender">
|
|
<el-radio-group v-model="activityEnrollForm.gender">
|
|
<el-radio label="1">男</el-radio>
|
|
<el-radio label="2">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-row justify="end">
|
|
<el-button @click="showSignUp = false">取消</el-button>
|
|
<el-button @click="submitSignUp" type="primary">报名</el-button>
|
|
</el-row>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script setup name="SignUpList">
|
|
import {
|
|
activityEnrollList,
|
|
activityEnrollDelete,
|
|
activityEnrollUpdate,
|
|
} from "@/api/website/activity";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import { cloneDeep } from "lodash";
|
|
|
|
// import dayjs from "dayjs";
|
|
import { reactive, toRefs } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
const route = useRoute();
|
|
const data = reactive({
|
|
queryParams: {
|
|
activityId: route.query.id,
|
|
},
|
|
activityEnrollForm: {},
|
|
signUpRules: {
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: "请输入姓名！",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
age: [
|
|
{
|
|
required: true,
|
|
message: "请输入年龄！",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
gender: [
|
|
{
|
|
required: true,
|
|
message: "请选择性别！",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
message: "请输入手机号！",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
});
|
|
const { queryParams, activityEnrollForm, signUpRules } = toRefs(data);
|
|
const dataList = ref([]);
|
|
const total = ref(0);
|
|
const loading = ref(true);
|
|
const queryForm = ref();
|
|
const showSignUp = ref(false);
|
|
|
|
const getList = async () => {
|
|
const resp = await activityEnrollList(queryParams.value);
|
|
dataList.value = resp.rows;
|
|
total.value = resp.total;
|
|
loading.value = false;
|
|
};
|
|
|
|
const handleQuery = () => {
|
|
queryParams.value.pageNum = 1;
|
|
getList();
|
|
};
|
|
const resetQuery = () => {
|
|
queryForm.value.resetFields();
|
|
handleQuery();
|
|
};
|
|
getList();
|
|
|
|
const handleDelete = async (row) => {
|
|
await ElMessageBox.confirm(
|
|
`是否确认删除${row.name}的活动报名`,
|
|
"删除活动报名"
|
|
);
|
|
await activityEnrollDelete([row.id]);
|
|
ElMessage.success("删除成功");
|
|
getList();
|
|
};
|
|
const activityEnrollFormRef = ref();
|
|
const handleUpdate = (row) => {
|
|
activityEnrollForm.value = cloneDeep(row);
|
|
activityEnrollForm.value.age = parseInt(activityEnrollForm.value.age);
|
|
if (activityEnrollFormRef.value) {
|
|
activityEnrollFormRef.value.resetFields();
|
|
}
|
|
showSignUp.value = true;
|
|
};
|
|
|
|
const submitSignUp = async () => {
|
|
await activityEnrollUpdate(activityEnrollForm.value);
|
|
ElMessage.success("修改成功");
|
|
showSignUp.value = false;
|
|
getList();
|
|
};
|
|
</script>
|
|
|
|
<!-- <script>
|
|
import { signUpList } from "@/api/website/activity";
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 遮罩层
|
|
loading: true,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
// 总条数
|
|
total: 0,
|
|
dataList: [],
|
|
queryParams: {
|
|
activity_id: undefined,
|
|
name: undefined,
|
|
page_num: 1,
|
|
page_size: 10,
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.page_num = 1;
|
|
this.getList();
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
},
|
|
getList() {
|
|
this.loading = true;
|
|
signUpList(this.queryParams).then((response) => {
|
|
this.dataList = response.data.data;
|
|
this.total = response.data.count;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
let { id } = this.$route.query;
|
|
if (!id) {
|
|
this.$message.error("无ID");
|
|
this.$router.go(-1);
|
|
return;
|
|
}
|
|
this.queryParams.activity_id = id;
|
|
// this.getList();
|
|
},
|
|
};
|
|
</script> -->
|