报名信息

杨泽宇
1 parent a3dbfdbd
Showing 2 changed files with 154 additions and 3 deletions
src/views/event/handwork/index.vue
src/views/event/handwork/signup.vue
@@ -187,7 +187,9 @@ onMounted(() =&gt; {
             ></el-button
           >
           <el-button type="text">删除</el-button>
-          <el-button type="text">查看人员</el-button>
+          <el-button type="text"><router-link :to="{ path: '/event/handwork/signup', query: scope.row }"
+              >查看人员</router-link
+            ></el-button>
           <el-button type="text">编辑/查看/发布活动总结</el-button>
         </template>
       </el-table-column>
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { signupList, cancelSignup } from "@/api/event";
+import { parseTime } from "@/utils/tool";
+import Pagination from "@/components/Pagination/index.vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+interface Form {
+  page: number;
+  pageSize: number;
+  name: string;
+  mobile: string;
+  handworkId: number | null;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[] | null;
+  params: Params;
+}
+let data = reactive({
+  list: [],
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      name: "",
+      mobile: "",
+      handworkId: 4,
+    },
+  },
+});
+/**
+ * 列表
+ */
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await signupList(data.params.query);
+    data.list = res?.data?.data.list;
+    data.params.total = res?.data?.data?.total;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+/**
+ * 移除报名信息
+ */
+const handleRemove = async (obj: any) => {
+  ElMessageBox.confirm("确认移除吗?", "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        let res = await cancelSignup({
+          signupId: obj.id,
+        });
+        if (res?.data) {
+          ElMessage({
+            type: "success",
+            message: "操作成功",
+          });
+          getList();
+        } else {
+          ElMessage({
+            type: "error",
+            message: "操作失败",
+          });
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
 <template>
-  报名信息
-</template>
 \ No newline at end of file
+  <div class="page-container">
+    <!-- <h1>报名信息</h1> -->
+    <el-row style="padding-bottom: 20px">
+      <el-form :inline="true" label-width="70px">
+        <el-form-item label="名称">
+          <el-input
+            v-model.trim="data.params.query.name"
+            placeholder="请填写名称"
+            maxlength="15"
+            @change="getList"
+          />
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input
+            v-model.trim="data.params.query.mobile"
+            placeholder="请填写手机号"
+            maxlength="15"
+            @change="getList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border
+      v-loading="data.loading"
+      align="center"
+      element-loading-text="拼命加载中"
+    >
+      <el-table-column prop="id" label="ID" align="center"></el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名"
+        align="center"
+      ></el-table-column>
+      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
+      <el-table-column
+        prop="mobile"
+        label="联系方式"
+        align="center"
+      ></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="text" @click="handleRemove(scope.row)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="data.params.total"
+      v-model:currentPage="data.params.query.page"
+      v-model:pageSize="data.params.query.pageSize"
+      @pageChange="getList"
+    ></Pagination>
+  </div>
+</template>