添加关联校区弹窗

back-ui/src/hooks/useSchool.js

@@ -6,13 +6,14 @@ import { listCampus } from "@/api/dz/campus";
 import { getExamTypes } from "@/api/dz/cards";
 
 const defaultOptions = {
-  autoLoad: true,
-  loadCampus: false,
-  loadClass: false,
-  loadExamType: false,
+  autoLoad: true, // 是否自动加载省份
+  loadCampus: false, // 切换省份时是否自动加载培训学校
+  loadCampusClass: false, // 切换培训学校时是否自动加载培训班级
+  loadClass: false, // 切换注册学校时是否自动加载注册班级
+  loadExamType: false, // 切换省份时是否自动加载考生类型
 };
 const useSchool = (options = {}) => {
-  const { autoLoad, loadCampus, loadClass, loadExamType } = Object.assign(
+  const { autoLoad, loadCampus, loadCampusClass, loadClass, loadExamType } = Object.assign(
     defaultOptions,
     options
   );
@@ -22,6 +23,7 @@ const useSchool = (options = {}) => {
 
   const schoolList = ref([]);
   const selectedSchool = ref();
+  const selectedAssignSchool = ref();
 
   const classList = ref([]);
   const selectedClass = ref();
@@ -98,6 +100,7 @@ const useSchool = (options = {}) => {
     (newVal) => {
       if (schoolList.value.length > 0) {
         selectedSchool.value = null;
+        selectedAssignSchool.value = null;
         schoolList.value = [];
       }
       if (campusList.value.length > 0) {
@@ -143,7 +146,9 @@ const useSchool = (options = {}) => {
         campusClassList.value = [];
       }
       if (newVal !== null) {
-        getCampusClassList();
+        if (loadCampusClass) {
+          getCampusClassList();
+        }
       }
     }
   );
@@ -163,6 +168,7 @@ const useSchool = (options = {}) => {
   const reset = () => {
     selectedArea.value = Array.isArray(selectedArea.value) ? [] : null;
     selectedSchool.value = null;
+    selectedAssignSchool.value = null;
     selectedClass.value = null;
     selectedCampus.value = null;
     selectedCampusClass.value = null;
@@ -192,7 +198,8 @@ const useSchool = (options = {}) => {
 
     schoolList,
     selectedSchool,
-
+    selectedAssignSchool,
+    
     classList,
     selectedClass,
     getClassList,

back-ui/src/views/dz/cards/components/AssignDialog.vue

@@ -139,12 +139,16 @@ const handleConfirm = () => {
   formRef.value.validate(async (valid) => {
     if (valid) {
       const { cardType, agentId, begin, end, provinceId, assignExamType, schoolId, days } = form.value;
-      await assignCard(cardType, agentId, begin, end, provinceId, assignExamType, schoolId, days);
-      proxy.$modal.msgSuccess('分配卡成功')
-      close();
-      setTimeout(() => {
-        emit('refresh')
-      }, 300);
+      modalRef.value.showLoading()
+      assignCard(cardType, agentId, begin, end, provinceId, assignExamType, schoolId, days).then(res => {
+        proxy.$modal.msgSuccess('分配卡成功')
+        close();
+        setTimeout(() => {
+          emit('refresh')
+        }, 300);
+      }).finally(() => {
+        modalRef.value.hideLoading()
+      });
     }
   })
 }

back-ui/src/views/dz/cards/components/MakeDialog.vue

@@ -45,17 +45,6 @@ const confirmButtonText = computed(() => {
   return operation.value === 'add' ? '确认制卡' : '确认修改';
 })
 
-// 获取卡类型枚举
-const getCardTypeEnum = (typeValue) => {
-  const cardTypeMap = {
-    6: "Platform",
-    2: "Dept",
-    7: "ECard",
-    8: "Test",
-  };
-  return cardTypeMap[typeValue] || "ECard";
-}
-
 const open = (type = 'add', data = { institutionId: null, cardType: null, count: 1 }) => {
   operation.value = type;
   form.value = data;
@@ -70,7 +59,7 @@ const handleConfirm = () => {
     if (valid) {
       const { institutionId, cardType, count } = form.value;
       modalRef.value.showLoading()
-      issueCard(institutionId, getCardTypeEnum(cardType), count).then(res => {
+      issueCard(institutionId, cardType, count).then(res => {
         proxy.$modal.msgSuccess('制卡成功')
         close();
         setTimeout(() => {

back-ui/src/views/dz/cards/components/OpenDialog.vue

@@ -102,12 +102,17 @@ const emit = defineEmits(['refresh'])
 const handleConfirm = () => {
   formRef.value.validate(async (valid) => {
     if (valid) {
-      await requestOpenCard(form.value.agentId, form.value.provinceId, form.value.schoolId, form.value.begin, form.value.end);
-      proxy.$modal.msgSuccess('开卡申请成功')
-      close();
-      setTimeout(() => {
-        emit('refresh')
-      }, 300);
+      modalRef.value.showLoading()
+      const { agentId, provinceId, schoolId, begin, end } = form.value;
+      requestOpenCard(agentId, provinceId, schoolId, begin, end).then(res => {
+        proxy.$modal.msgSuccess('开卡申请成功')
+        close();
+        setTimeout(() => {
+          emit('refresh')
+        }, 300);
+      }).finally(() => {
+        modalRef.value.hideLoading()
+      });
     }
   })
 }

back-ui/src/views/dz/cards/components/RelateDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <IeModal title="关联校区" confirmText="确认关联" ref="modalRef" width="500px" @beforeClose="handleBeforeClose"
+    @confirm="handleConfirm">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="卡号段" prop="cardNoRange" required>
+        <div class="flex items-center gap-x-3">
+          <el-input v-model="form.begin" type="text" maxlength="8" v-number class="w-[160px]!" placeholder="请输入开始卡号" />
+          <span class="text-gray-500">-</span>
+          <el-input v-model="form.end" type="text" maxlength="8" v-number class="w-[160px]!" placeholder="请输入结束卡号" />
+        </div>
+      </el-form-item>
+      <el-form-item label="校区" prop="campusId" required>
+        <ie-select v-model="selectedCampus" :options="campusList" label-key="name" value-key="id" filterable
+          class="w-[350px]!" />
+      </el-form-item>
+    </el-form>
+  </IeModal>
+</template>
+<script setup>
+import useSchool from '@/hooks/useSchool';
+import IeModal from '@/components/IeModal/index.vue';
+import IeSelect from '@/components/IeSelect/index.vue';
+
+import { associateCampus } from '@/api/dz/cards';
+import { getCurrentInstance, watchEffect } from 'vue';
+
+const { proxy } = getCurrentInstance();
+
+const {
+  reset,
+  campusList,
+  selectedCampus,
+  getCampusList
+} = useSchool({ autoLoad: false });
+
+const modalRef = ref(null);
+const formRef = ref(null);
+const form = ref({
+  institutionId: null,
+  cardType: null,
+  count: 1,
+})
+// 自定义验证
+const validateCardNoRange = (rule, value, callback) => {
+  if (!form.value.begin || !form.value.end) {
+    callback(new Error('请输入卡号段'))
+  } else if (Number(form.value.begin) > Number(form.value.end)) {
+    callback(new Error('开始卡号不能大于结束卡号'))
+  } else {
+    callback()
+  }
+}
+
+watchEffect(() => {
+  form.value.cardNoRange = `${form.value.begin}-${form.value.end}`;
+  form.value.campusId = selectedCampus.value;
+})
+
+const rules = ref({
+  cardNoRange: [
+    { validator: validateCardNoRange, trigger: ['blur', 'change'] },
+  ],
+  campusId: [
+    { required: true, message: '请选择校区', trigger: 'change' },
+  ],
+})
+
+const handleBeforeClose = () => {
+  form.value = {};
+  reset();
+}
+
+
+const open = () => {
+  getCampusList();
+  form.value = {};
+  modalRef.value.open()
+}
+const close = () => {
+  reset();
+  modalRef.value.close()
+}
+const emit = defineEmits(['refresh'])
+const handleConfirm = () => {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      modalRef.value.showLoading()
+      associateCampus(form.value.begin, form.value.end, form.value.campusId).then(res => {
+        proxy.$modal.msgSuccess('关联校区成功')
+        close();
+        setTimeout(() => {
+          emit('refresh')
+        }, 300);
+      }).finally(() => {
+        modalRef.value.hideLoading()
+      });
+    }
+  })
+}
+defineExpose({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped></style>

back-ui/src/views/dz/cards/index.vue

@@ -5,11 +5,11 @@
         <el-cascader class="w-[180px]!" :options="areaList" :props="cascaderProps" v-model="selectedArea" clearable />
       </el-form-item>
       <el-form-item label="分配学校" prop="assignSchoolId">
-        <ie-select v-model="selectedSchool" :options="schoolList" label-key="name" value-key="id" filterable
+        <ie-select v-model="selectedAssignSchool" :options="schoolList" label-key="name" value-key="id" filterable
           class="w-[180px]!" />
       </el-form-item>
       <el-form-item label="注册学校" prop="schoolId">
-        <ie-select v-model="queryParams.schoolId" :options="schoolList" label-key="name" value-key="id" filterable
+        <ie-select v-model="selectedSchool" :options="schoolList" label-key="name" value-key="id" filterable
           class="w-[180px]!" />
       </el-form-item>
       <el-form-item label="注册班级" prop="classId">
@@ -30,8 +30,8 @@
       <el-form-item label="姓名" prop="nickName">
         <el-input v-model="queryParams.nickName" type="text" class="w-[180px]!" placeholder="请输入姓名" clearable />
       </el-form-item>
-      <el-form-item label="手机" prop="mobile">
-        <el-input v-model="queryParams.mobile" type="text" maxlength="11" class="w-[180px]!" placeholder="请输入手机号"
+      <el-form-item label="手机" prop="phonenumber">
+        <el-input v-model="queryParams.phonenumber" type="text" v-number maxlength="11" class="w-[180px]!" placeholder="请输入手机号"
           clearable />
       </el-form-item>
       <el-form-item label="卡号段" prop="begin">
@@ -58,8 +58,8 @@
         <ie-select v-model="queryParams.distributeStatus" :options="card_distribute_status" class="w-[180px]!"
           clearable />
       </el-form-item>
-      <el-form-item label="使用状态" prop="cardStatus">
-        <ie-select v-model="queryParams.cardStatus" :options="CARD_STATUS" class="w-[180px]!" clearable />
+      <el-form-item label="使用状态" prop="status">
+        <ie-select v-model="queryParams.status" :options="CARD_STATUS" class="w-[180px]!" clearable />
       </el-form-item>
 
       <el-form-item label="过期状态" prop="timeStatus">
@@ -96,7 +96,7 @@
         <svg-icon icon-class="money" class="mr-1" style="font-size: 12px" />
         退费
       </CustomButton>
-      <CustomButton color="#9C27B0" v-hasPermi="['dz:cards:associateCampus']">
+      <CustomButton color="#9C27B0" v-hasPermi="['dz:cards:associateCampus']" @click="handleRelateCampus">
         <svg-icon icon-class="link" class="mr-1" style="font-size: 12px" />
         关联校区
       </CustomButton>
@@ -135,6 +135,7 @@
     <OpenDialog ref="openDialogRef" @refresh="getList" />
     <AssignDialog ref="assignDialogRef" @refresh="getList" />
     <EditDialog ref="editDialogRef" @refresh="getList" />
+    <RelateDialog ref="relateDialogRef" @refresh="getList" />
   </div>
 </template>
 
@@ -150,6 +151,7 @@ import MakeDialog from './components/MakeDialog.vue';
 import OpenDialog from './components/OpenDialog.vue';
 import AssignDialog from './components/AssignDialog.vue';
 import EditDialog from './components/EditDialog.vue';
+import RelateDialog from './components/RelateDialog.vue';
 import { listCards, delCards, payCard, closeCard, reopenCard, refundCard, settleCard, renewCard } from '@/api/dz/cards';
 import { CARD_STATUS } from '@/common/enum';
 import { getCurrentInstance, nextTick } from 'vue';
@@ -161,6 +163,7 @@ const {
   selectedArea,
   schoolList,
   selectedSchool,
+  selectedAssignSchool,
   classList,
   selectedClass,
   campusList,
@@ -201,6 +204,15 @@ const editDisabled = computed(() => {
   return selectedRows.value.length !== 1;
 })
 
+watchEffect(() => {
+  queryParams.value.areaIds = selectedArea.value;
+  queryParams.value.schoolId = selectedSchool.value;
+  queryParams.value.assignSchoolId = selectedAssignSchool.value;
+  queryParams.value.classId = selectedClass.value;
+  queryParams.value.campusId = selectedCampus.value;
+  queryParams.value.campusClassId = selectedCampusClass.value;
+})
+
 const handleQuery = () => {
   queryParams.page = 1;
   getList();
@@ -217,11 +229,7 @@ const resetQuery = () => {
 const getList = () => {
   loading.value = true;
   listCards({
-    ...queryParams.value,
-    areaIds: selectedArea.value,
-    assignSchoolId: selectedSchool.value,
-    classId: selectedClass.value,
-    campusId: selectedCampus.value
+    ...queryParams.value
   }).then(res => {
     cardList.value = res.rows;
     total.value = res.total;
@@ -257,6 +265,11 @@ const handleDeleteBatch = () => {
   });
 }
 
+const relateDialogRef = ref(null);
+const handleRelateCampus = () => {
+  relateDialogRef.value.open()
+}
+
 const openDialogRef = ref(null);
 const handleOpenCard = () => {
   openDialogRef.value.open()