社团选课

src/pages/clubCourse/detail/components/CheckAttendance.vue

@@ -0,0 +1,72 @@
+<script setup>
+const { currentRoute } = useRouter()
+const route = currentRoute.value
+const xsxk_id = route.query.xsxk_id
+
+const list = ref([])
+const loading = ref(false)
+const finished = ref(false)
+let page = 1
+const param = $ref({
+  keyword: "",
+  grade_id: "",
+  class_id: "",
+});
+function onLoad() {
+  loading.value = true
+  request({
+    url: '/xdjx/stxkgl_skdm/index',
+    data: {
+      page,
+      limit: 20,
+      xsxk_id,
+      ...param,
+    },
+  }).then((res) => {
+    const data = res.data
+    list.value = [...list.value, ...data.page_data]
+    finished.value = data.total_page === page
+    page++
+    loading.value = false
+  })
+}
+
+function reGetList() {
+  page = 1
+  list.value = []
+  finished.value = false
+  onLoad()
+}
+</script>
+
+<template>
+  <div class="index">
+    <!-- <van-cell>
+      <div class="flex space-x-15px">
+        <van-button class="flex-1" size="small" type="primary">新增</van-button>
+        <van-button class="flex-1" size="small" type="primary">统计</van-button>
+      </div>
+    </van-cell> -->
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <van-cell v-for="item in list" :key="item">
+        <template #title>
+          <div class="flex justify-between items-center">
+            <span>{{ `${item.xss_mc}` }}</span>
+            <span class="text-12px">{{ item.xss_dmsj }}</span>
+          </div>
+        </template>
+        <template #label>
+          <div class="flex text-black space-x-15px">
+            <div>缺课人数：
+              <span>{{ !item.xss_qkrs_json ? 0 : item.xss_qkrs_json.split(',').length }}</span>
+              <span v-if="item.xss_qkrs_json">（{{ item.xss_qkrs_json }}）</span>
+            </div>
+          </div>
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

src/pages/clubCourse/detail/components/CourseCondition.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { closeToast, showConfirmDialog, showFailToast, showSuccessToast } from 'vant'
+const { currentRoute } = useRouter()
+const route = currentRoute.value
+const xsxk_id = route.query.xsxk_id
+
+const list = ref([])
+const loading = ref(false)
+const finished = ref(false)
+let page = 1
+const param = $ref({
+  keyword: "",
+  grade_id: "",
+  class_id: "",
+});
+function onLoad() {
+  loading.value = true
+  request({
+    url: '/xdjx/stxkgl_xktj_xkqk/index',
+    data: {
+      page,
+      limit: 20,
+      xsxk_id,
+      ...param,
+    },
+  }).then((res) => {
+    const data = res.data
+    list.value = [...list.value, ...data.page_data]
+    finished.value = data.total_page === page
+    page++
+    loading.value = false
+  })
+}
+
+function onClickSearch() {
+  reGetList()
+}
+
+function dropGradeChange() {
+  param.class_id = "";
+  initClass();
+
+  dropItemChange();
+}
+
+function dropItemChange() {
+  reGetList()
+}
+function reGetList() {
+  page = 1
+  list.value = []
+  finished.value = false
+  onLoad()
+}
+
+const gradeOption = $ref([{ text: '年级', value: '' }])
+initSelectData();
+async function initSelectData() {
+  let res = await request({ url: '/jcxx/grade/index', data: { limit: '999' } });
+  if (res.code == 1) {
+    res.data.page_data.map(item => {
+      gradeOption.push({
+        text: item.grade_name,
+        value: item.grade_id
+      })
+    })
+  }
+}
+
+let classOption = $ref([{ text: '班级', value: '' }])
+async function initClass() {
+  if (!param.grade_id)
+    return
+
+  let res = await request({
+    url: "/jcxx/class/index",
+    data: { grade_id: param.grade_id, limit: "100" },
+  });
+  if (res.code == 1) {
+    classOption = [{ text: '班级', value: '' }];
+    res.data.page_data.map(item => {
+      classOption.push({
+        text: item.class_name,
+        value: item.class_num
+      })
+    })
+  }
+}
+
+const dialogVisible = ref(false)
+
+function beforeCloseDialog(action) {
+  if (action == 'confirm') {
+    showFailToast('请输入必填项！')
+    return
+    // if (dialogType.value != 1) {
+    //   if (currentData.value.lc_bt == 1 && currentData.value.xmlc_bt_value == '') {
+    //     showFailToast('请输入必填项！')
+    //     return false
+    //   }
+    //   handleClose()
+    // } else {
+    //   handleUpload()
+    // }
+  } else {
+    handleClose()
+  }
+}
+
+function handleClose() {
+  dialogVisible.value = false;
+  // currentData.value = {}
+  // dialogType.value = ''
+  // dialogTitle.value = ''
+  // fileData.value = []
+}
+</script>
+
+<template>
+  <div class="index">
+    <van-search v-model="param.keyword" :clearable="false" show-action placeholder="请输入搜索关键词" @search="onClickSearch">
+      <template #action>
+        <div @click="onClickSearch">
+          搜索
+        </div>
+      </template>
+    </van-search>
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="param.grade_id" :options="gradeOption" @change="dropGradeChange" />
+      <van-dropdown-item v-model="param.class_id" :options="classOption" @change="dropItemChange" />
+    </van-dropdown-menu>
+    <van-cell style="padding-top: 0 !important;">
+      <van-button class="w-full" size="small" type="primary" @click="dialogVisible=true">新增</van-button>
+    </van-cell>
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <van-cell v-for="item in list" :key="item">
+        <template #title>
+          <span>{{ `${item.xsxx_xsxm}` }}</span>
+          <span class="text-12px ml-15px">学籍号：{{ `${item.xsxx_xsxh}` }}</span>
+        </template>
+        <template #label>
+          <div class="flex text-black space-x-15px">
+            <div><span>年级：{{ item.grade_name }}</span></div>
+            <div><span>班级：{{ item.class_name }}</span></div>
+          </div>
+        </template>
+      </van-cell>
+    </van-list>
+
+    <van-dialog v-model:show="dialogVisible" title="课程报名" show-cancel-button :before-close="beforeCloseDialog">
+      888
+    </van-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

src/pages/clubCourse/detail/components/CourseDetail.vue

@@ -0,0 +1,102 @@
+<script setup>
+const loading = ref(false)
+const { currentRoute } = useRouter()
+const route = currentRoute.value
+const xsxk_id = route.query.xsxk_id
+const detailData = ref({})
+initDetailInfo()
+function initDetailInfo() {
+  loading.value = true
+  request({
+    url: '/xdjx/stxkgl_kcxkgl/detail',
+    data: {
+      xsxk_id,
+    },
+  }).then((res) => {
+    loading.value = false;
+    detailData.value = res.data.one_info;
+  })
+}
+</script>
+
+<template>
+  <div v-show="loading" class="h-100vh w-full absolute z-3000 bg-hex-000000b3 flex items-center justify-center">
+    <van-loading color="#ffffffcc" text-color="#ffffffcc" vertical>
+      加载中...
+    </van-loading>
+  </div>
+  <div class="xmgktParentDiv h-100vh overflow-auto bg-white">
+    <div class="tableContainer">
+      <div class="topPart">
+        <table class="Tb" width="100%" cellspacing="0" cellpadding="0">
+          <tr>
+            <td class="titleOpt">
+              课程名称
+            </td>
+            <td>{{ detailData.xsxk_kcmc }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              课程类型
+            </td>
+            <td>{{ detailData.xsxk_kclx_option_n }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              任课教师
+            </td>
+            <td>{{ detailData.xsxk_rkjs }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              学期名称
+            </td>
+            <td>{{ detailData.team_name }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              年级名称
+            </td>
+            <td>{{ detailData.grade_name }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              开课时间
+            </td>
+            <td>{{ detailData.xsxk_kksj }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              结课时间
+            </td>
+            <td>{{ detailData.xsxk_jksj }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              开班人数
+            </td>
+            <td>{{ detailData.xsxk_kbrs }}</td>
+          </tr>
+          <tr>
+            <td class="titleOpt">
+              选课时间
+            </td>
+            <td>{{ detailData.xsxk_xkkssj }}~{{ detailData.xsxk_xkjssj }}</td>
+          </tr>
+          <!-- <tr>
+            <td colspan="2">{{ detailData.xsxk_kcsm }}</td>
+          </tr> -->
+          <tr>
+            <td class="titleOpt">
+              课程说明
+            </td>
+            <td>{{ detailData.xsxk_kcsm }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

src/pages/clubCourse/detail/index.vue

@@ -0,0 +1,25 @@
+<script setup>
+import CourseDetail from "./components/CourseDetail.vue";
+import CourseCondition from "./components/CourseCondition.vue";
+import CheckAttendance from "./components/CheckAttendance.vue";
+const active = ref(0);
+</script>
+
+<template>
+  <div class="index">
+    <van-tabs v-model:active="active">
+      <van-tab title="课程选课详情">
+        <CourseDetail />
+      </van-tab>
+      <van-tab title="选课情况">
+        <CourseCondition />
+      </van-tab>
+      <van-tab title="上课点名">
+        <CheckAttendance />
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<style>
+</style>

src/pages/clubCourse/index.vue

@@ -0,0 +1,118 @@
+<script setup>
+const router = useRouter();
+function cellClick(xsxk_id) {
+  router.push({
+    path: "/clubCourse/detail",
+    query: { xsxk_id },
+  });
+}
+
+const list = ref([])
+const loading = ref(false)
+const finished = ref(false)
+let page = 1
+const param = $ref({
+  keyword: "",
+  team_id: "",
+  grade_id: ""
+});
+function onLoad() {
+  loading.value = true
+  request({
+    url: '/xdjx/stxkgl_kcxkgl/index',
+    data: {
+      page,
+      limit: 20,
+      ...param,
+    },
+  }).then((res) => {
+    const data = res.data
+    list.value = [...list.value, ...data.page_data]
+    finished.value = data.total_page === page
+    page++
+    loading.value = false
+  })
+}
+
+function onClickSearch() {
+  reGetList()
+}
+function dropItemChange() {
+  reGetList()
+}
+function reGetList() {
+  page = 1
+  list.value = []
+  finished.value = false
+  onLoad()
+}
+
+
+const teamOption = $ref([{ text: '学期', value: '' }])
+const gradeOption = $ref([{ text: '年级', value: '' }])
+initSelectData();
+async function initSelectData() {
+  let res1 = await request({ url: '/jcxx/team/index', data: { limit: '999' } });
+  if (res1.code == 1) {
+    res1.data.page_data.map(item => {
+      teamOption.push({
+        text: item.team_name,
+        value: item.team_id
+      })
+    })
+  }
+
+  let res2 = await request({ url: '/jcxx/grade/index', data: { limit: '999' } });
+  if (res2.code == 1) {
+    res2.data.page_data.map(item => {
+      gradeOption.push({
+        text: item.grade_name,
+        value: item.grade_id
+      })
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="index">
+    <van-search v-model="param.keyword" :clearable="false" show-action placeholder="请输入搜索关键词" @search="onClickSearch">
+      <template #action>
+        <div @click="onClickSearch">
+          搜索
+        </div>
+      </template>
+    </van-search>
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="param.team_id" :options="teamOption" @change="dropItemChange" />
+      <van-dropdown-item v-model="param.grade_id" :options="gradeOption" @change="dropItemChange" />
+    </van-dropdown-menu>
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <van-cell v-for="item in list" :key="item" @click="cellClick(item.xsxk_id)">
+        <template #title>
+          <span>{{ `${item.xsxk_kcmc}` }}</span>
+          <span class="text-12px ml-15px">{{ `${item.xsxk_kclx}` }}</span>
+        </template>
+        <template #label>
+          <div class="flex text-black space-x-15px">
+            <div><span>{{ item.team_name }}</span></div>
+            <div><span>{{ item.grade_name }}</span></div>
+            <div><span>任课教师：{{ item.xsxk_rkjs }}</span></div>
+          </div>
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.van-cell__title) {
+  width: 70% !important;
+  flex: auto;
+}
+
+:deep(.van-cell__value) {
+  width: 30% !important;
+  flex: auto;
+}
+</style>