Parcourir la source

样式修改;列表宽度修改;新增学校选择日期逻辑添加

zhangguohua il y a 1 an
Parent
commit
0d47bb46ae

Fichier diff supprimé car celui-ci est trop grand
+ 0 - 1
src/assets/icon/refresh.svg


+ 1 - 1
src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory,createWebHashHistory  } from 'vue-router'
+import { createRouter, createWebHistory, createWebHashHistory  } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 import Layout from '@/layout/index.vue'
 

+ 22 - 5
src/styles/common.scss

@@ -93,6 +93,18 @@ body {
     color: #606266;
   }
 }
+.el-button.button_refresh {
+  min-width: 72px!important;
+  background: #fff;
+  border: 1px solid #DCDFE6;
+  color: #606266;
+  &:hover {
+    background: none;
+  }
+  &.cancel  {
+    color: #606266;
+  }
+}
 
 .el-checkbox__input.is-indeterminate .el-checkbox__inner,
 .el-checkbox__input.is-checked .el-checkbox__inner {
@@ -160,6 +172,10 @@ button:focus, button:focus-visible {
   box-shadow: 0 0 0 1px #2E64FA inset;
 }
 
+.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
+  background: #2E64FA;
+}
+
 
 
 // 全局滚动条样式修改
@@ -531,9 +547,10 @@ button:focus, button:focus-visible {
 //页面公共样式
 .page_item {
   width: 100%;
+  // height: 100%;
   background: #fff;
   border-radius: 10px;
-  padding: 10px 20px;
+  padding: 20px;
   // box-sizing: border-box;
 }
 .page_tag {
@@ -596,9 +613,6 @@ button:focus, button:focus-visible {
       width: auto;
       height: 36px;
       line-height: 36px;
-      font-weight: 400;
-      font-size: 14px;
-      color: #666666;
       .tab_button {
         width: auto;
         height: 36px !important;
@@ -872,6 +886,10 @@ button:focus, button:focus-visible {
     .el-form .el-form-item:last-child {
       margin-bottom: 0;
     }
+    .el-form-item__label {
+      font-size: 16px;
+      color: #000000CC;
+    }
   }
 
   .max_height_540 {
@@ -1332,7 +1350,6 @@ button:focus, button:focus-visible {
         margin-bottom: 20px;
       }
     }
-
     //弹窗 el-from-item__content
     .el-form-item__content {
       display: flex;

+ 15 - 10
src/views/examination/addSchool.vue

@@ -3,7 +3,7 @@
     <div class="page_search">
       <div class="search_content">
         <div class="content_left">
-          <el-select v-model="provinceSelect" placeholder="全部省份" clearable>
+          <el-select v-model="provinceSelect" placeholder="请选择" clearable @change="SearchChange">
             <el-option v-for="province in provincesList" :key="province.provinceCode" :label="province.provinceName" :value="province.provinceCode"></el-option>
           </el-select>
           <el-input v-model="schooltName" placeholder="请输入学校名称或编号" @input="SearchChange">
@@ -18,21 +18,21 @@
     <div class="page_table"> 
       <el-table :data="tableData" stripe v-loading="tableLoading" element-loading-text="拼命加载中……" height="500px" ref="tableDataRef"
         element-loading-spinner="el-icon-loading" element-loading-background="#ffffff" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" align="center" />
-          <el-table-column type="index" label="序号" align="center" />
-          <el-table-column prop="tenantCode" label="账号" align="center" />
+          <el-table-column type="selection" align="center" width="50" />
+          <el-table-column type="index" label="序号" align="center" width="50" />
+          <el-table-column prop="tenantCode" label="账号" align="center" width="80" />
           <el-table-column prop="tenantName" label="学校名称" align="center" />
-          <el-table-column prop="cityAndAreaName" label="区域" align="center">
+          <el-table-column prop="cityAndAreaName" label="区域" align="center" width="150">
             <template #default="{ row }">
               {{ row.cityAndAreaName ||  '-' }}
             </template>
           </el-table-column>
-          <el-table-column prop="schoolType" label="账号类型" align="center">
+          <el-table-column prop="schoolType" label="账号类型" align="center" width="80">
             <template #default="{ row }">
               {{ row.schoolType == 0 ? '单校版' : row.schoolType == 1 ? '联考版' :  '-' }}
             </template>
           </el-table-column>
-          <el-table-column prop="status" label="状态" align="center">
+          <el-table-column prop="status" label="状态" align="center" width="70">
             <template #default="{ row }">
               <div class="table_row_status">
                 <!-- 正式 -->
@@ -81,7 +81,7 @@ interface Province {
   children?: any[] // 可选字段
 }
 const provincesList = ref<Province[]>([])
-const provinceSelect = ref('')
+const provinceSelect = ref('0')
 const schooltName =  ref('')
 const tableData = ref([])
 const selUserList = ref([])
@@ -98,7 +98,12 @@ const GetProvinceTree = async () => {
   const res = await provinceTree()
   if(res.code == 200 && res.data) {
     const { data } = res
-    provincesList.value = data
+    let allObj = {
+      provinceName: '全部省份',
+      provinceCode: '0'
+    }
+    provincesList.value.push(allObj)
+    provincesList.value.push(...data)
   }
 }
 const tableLoading = ref(false)
@@ -107,7 +112,7 @@ const GetSingleExamList = async () => {
     tableLoading.value = true
     const res = await getSingleExamList({
       queryStr: schooltName.value,
-      provinceCode: provinceSelect.value,
+      provinceCode: provinceSelect.value == '0' ? '' : provinceSelect.value,
       // cityCode: '',
       // areaCode: '',
     })

+ 19 - 14
src/views/examination/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page_container">
     <div class="page_item">
       <div class="page_left">
         <div class="page_search">
@@ -22,16 +22,16 @@
                   <el-radio v-model="selectRow.id" :value="row.id"></el-radio>
                 </template>
               </el-table-column>
-              <el-table-column type="index" label="序号" align="center" />
-              <el-table-column prop="tenantCode" label="学校编号" align="center" />
+              <el-table-column type="index" label="序号" align="center" width="50" />
+              <el-table-column prop="tenantCode" label="学校编号" align="center" width="80" />
               <el-table-column prop="tenantName" label="学校名称" align="center" />
-              <el-table-column prop="cityAndAreaName" label="区域" align="center" />
-              <el-table-column prop="schoolType" label="账号类型" align="center">
+              <el-table-column prop="cityAndAreaName" label="区域" align="center" width="120" />
+              <el-table-column prop="schoolType" label="账号类型" align="center" width="90">
                 <template #default="{ row }">
                   {{ row.schoolType == 0 ? '单校版' : row.schoolType == 1 ? '联考版' :  '-' }}
                 </template>
               </el-table-column>
-              <el-table-column prop="status" label="状态" align="center">
+              <el-table-column prop="status" label="状态" align="center" width="70">
                 <template #default="{ row }">
                   <div class="table_row_status">
                     <!-- 正式 -->
@@ -45,7 +45,7 @@
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column prop="childrenCount" label="下辖学校" align="center" />
+              <el-table-column prop="childrenCount" label="下辖学校" align="center" width="80" />
           </el-table>
         </div>
       </div>
@@ -64,16 +64,16 @@
         <div class="page_table">
           <el-table :data="selectRow?.children" stripe v-loading="tableLoading" element-loading-text="拼命加载中……" show-overflow-tooltip
             element-loading-spinner="el-icon-loading" element-loading-background="#ffffff">
-              <el-table-column type="index" label="序号" align="center" />
-              <el-table-column prop="tenantCode" label="学校编号" align="center" />
+              <el-table-column type="index" label="序号" align="center" width="50" />
+              <el-table-column prop="tenantCode" label="学校编号" align="center" width="80" />
               <el-table-column prop="tenantName" label="学校名称" align="center" />
-              <el-table-column prop="cityAndAreaName" label="区域" align="center" />
-              <el-table-column prop="schoolType" label="账号类型" align="center">
+              <el-table-column prop="cityAndAreaName" label="区域" align="center" width="120" />
+              <el-table-column prop="schoolType" label="账号类型" align="center" width="90">
                 <template #default="{ row }">
                   {{ row.schoolType == 0 ? '单校版' : row.schoolType == 1 ? '联考版' :  '-' }}
                 </template>
               </el-table-column>
-              <el-table-column prop="status" label="状态" align="center">
+              <el-table-column prop="status" label="状态" align="center" width="70">
                 <template #default="{ row }">
                   <div class="table_row_status">
                     <!-- 正式 -->
@@ -192,6 +192,10 @@ const RefTable = () => {
 </script>
 
 <style lang="scss" scoped>
+.page_container {
+  display: flex;
+  height: 100%;
+}
 .page_table {
   .el-radio :deep(.el-radio__label) {
     padding: 0;
@@ -206,7 +210,8 @@ const RefTable = () => {
   }
 }
 .content_left {
-  font-size: 16px!important;
-  font-weight: 400;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
 }
 </style>

+ 3 - 3
src/views/manager/index.vue

@@ -3,14 +3,14 @@
     <div class="page_search">
       <div class="search_content">
         <div class="content_left">
-          <el-input v-model="keyWord" placeholder="请输入姓名或账号">
+          <el-input v-model="keyWord" placeholder="请输入姓名或账号" @input="GoSearch">
             <template #append>
-              <el-button :icon="Search" @click="GoSearch()" />
+              <el-button :icon="Search" @click="GoSearch" />
             </template>
           </el-input>
         </div>
         <div class="content_right">
-          <el-button class="button_border_gray" @click="Refresh"><img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新</el-button>
+          <el-button class="button_refresh" @click="Refresh"><img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新</el-button>
           <el-button class="button_background" @click="AddManager" v-if="permissions.includes('managerCreate')">新增用户</el-button>
         </div>
       </div>

+ 72 - 12
src/views/school/SearchMain.vue

@@ -16,6 +16,14 @@
         </div>
       </div>
     </div>
+    <div class="tag_group" v-if="districtNode.length > 0">
+      <div class="tag_group_title">区/县:</div>
+      <div class="tag_group_content">
+        <div class="tag_item" v-for="item in districtNode" :key="item.districtCode" @click="selectItem(item.districtCode, 'districtCode', item)" :class="item.districtCode === searchData.districtCode ? 'active' : ''">
+          {{ item.districtName }}
+        </div>
+      </div>
+    </div>
     <div class="tag_group" v-if="searchList.userInfo.length > 1">
       <div class="tag_group_title">运维:</div>
       <div class="tag_group_content">
@@ -41,29 +49,32 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, nextTick } from 'vue'
 import { getSearchList } from '@/api/school'
 const searchData = ref({
   provinceCode: '',
   cityCode: '',
+  districtCode: '',
   type: '',
   userId: '',
 })
-interface City {
-  cityCode:  string
-  cityName:  string
-}
-const cityNode = ref<City[]>([])
+
 interface Province {
   provinceCode: string;
   provinceName: string;
   children?: City[]; // 如果有子级城市数据的话
 }
-
 interface City {
-  cityCode: string;
-  cityName: string;
+  cityCode:  string
+  cityName:  string
+  children?: District[]; // 如果有子级区县数据的话
+}
+interface District {
+  districtCode:  string
+  districtName:  string
 }
+const cityNode = ref<City[]>([])
+const districtNode = ref<District[]>([])
 
 interface TypeNode {
   type: string;
@@ -78,18 +89,22 @@ interface UserInfo {
 interface SearchList {
   examTypes: any[]; 
   provinceNode: Province[];
+  cityNode: City[];
+  districtNode: District[];
   typeNode: TypeNode[];
   userInfo: UserInfo[];
 }
 const searchList =  ref<SearchList>({
   examTypes: [],
   provinceNode: [],
+  cityNode: [],
+  districtNode: [],
   typeNode: [],
   userInfo: []
 })
 const emit = defineEmits(['FnSearch'])
 
-type SearchDataKey = 'provinceCode' | 'cityCode' | 'type' | 'userId'
+type SearchDataKey = 'provinceCode' | 'cityCode' | 'districtCode' | 'type' | 'userId'
 const selectItem = (value: string, str: SearchDataKey, item: any) => {
   searchData.value[str] = value
   let arr = []
@@ -104,11 +119,55 @@ const selectItem = (value: string, str: SearchDataKey, item: any) => {
       searchData.value.cityCode = ''
     }
   }
+  if(str == 'cityCode') {
+    if(value) {
+      arr = [...item.children]
+      arr.splice(0, 0, { districtCode: "", districtName: "全部" })
+      districtNode.value = arr
+      searchData.value.districtCode = ''
+    }else {
+      districtNode.value = []
+      searchData.value.districtCode = ''
+    }
+  }
   emit('FnSearch', searchData);
 }
+
 onMounted(() => {
   GetSearchList()
+
+    // HandleScroll()
+    // window.addEventListener('scroll', function() {
+    //   console.log('12123123')
+    // });
 })
+
+const filterRef = ref(null)
+const isSticky = ref(false)
+let observer = null;
+const HandleScroll = () => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      console.log(entries, '>>>>>>entries')
+      entries.forEach(entry => {
+        if (entry.boundingClientRect.top <= 65) {
+          isSticky.value = true;
+        } else {
+          isSticky.value = false;
+        }
+      });
+    },
+    {
+      root: null, // 使用视口作为根元素
+      threshold: 0, // 当元素顶部接触视口顶部时触发
+      rootMargin: `-${65}px 0px 0px 0px` // 相对于视口顶部的偏移
+    }
+  );
+  
+  if (filterRef.value) {
+    observer.observe(filterRef.value);
+  }
+}
 const GetSearchList = () => {
   getSearchList().then((res: any) => {
     console.log(res)
@@ -138,12 +197,13 @@ const GetSearchList = () => {
   display: flex;
   justify-content: flex-start;
   .tag_group_title {
-    width: auto;
+    // width: auto;
+    width: 50px;
     height: auto;
     margin-right: 8px;
     color: #303133;
     font-size: 14px;
-    text-align: left;
+    text-align: right;
     line-height: 30px;
     font-weight: 500;
     letter-spacing: 0em;

+ 18 - 0
src/views/school/addUser.vue

@@ -69,6 +69,7 @@
             placeholder="请选择"
             format="YYYY/MM/DD"
             value-format="YYYY-MM-DD"
+            :disabled-date="disabledBeforeDate"
           /><span class="margin_10">至</span>
         </el-form-item>
         <el-form-item prop="endDate">
@@ -78,6 +79,7 @@
             placeholder="请选择"
             format="YYYY/MM/DD"
             value-format="YYYY-MM-DD"
+            :disabled-date="disabledAfterDate"
           />
         </el-form-item>
       </el-form-item>
@@ -329,6 +331,22 @@ const UploadLogo = (file: any) => {
     }
   })
 }
+// 禁用目标日期之后的所有日期
+const disabledBeforeDate = (time) => {
+  const targetDate = userForm.endDate
+  if(!targetDate) return false
+  const end = new Date(targetDate)
+  end.setHours(23, 59, 59, 999); // 设置为当天最后一刻
+  return time.getTime() >= end.getTime();
+};
+// 禁用目标日期之前的所有日期
+const disabledAfterDate = (time) => {
+  const targetDate = userForm.startDate
+  if(!targetDate) return false
+  const start = new Date(targetDate)
+  start.setHours(0, 0, 0, 0); // 设置为当天开始
+  return time.getTime() <= start.getTime();
+};
 // 选择运维人员
 const handleUserChange = (val: any) => {
   console.log(val)

+ 87 - 6
src/views/school/index.vue

@@ -30,14 +30,22 @@
         <div class="item_right">{{ userNumber.freezeUser }}</div>
       </div>
     </div>
-    <SearchMain @FnSearch="FnSearch" />
+
+    <!-- <div class="filter_box" :style="{ display: filterVisible ? 'block' : 'none' }" ref="filterAreaRef">
+      <div>
+        111
+      </div>
+    </div> -->
+    <div ref="filterRef" class="filter_area">
+      <SearchMain @FnSearch="FnSearch" />
+    </div>
     <div class="page_jg_20"></div>
     <div class="page_item">
       <div class="page_search">
         <div class="search_content">
           <div class="content_left">
             <el-select v-model="schoolTypeSelect" @change="SearchChange" placeholder="">
-              <el-option label="全部类型" value=" "></el-option>
+              <el-option label="全部类型" value="all"></el-option>
               <el-option label="单校" :value="0"></el-option>
               <el-option label="联考" :value="1"></el-option>
             </el-select>
@@ -48,7 +56,7 @@
             </el-input>
           </div>
           <div class="content_right">
-            <el-button class="button_border_gray" @click="Refresh">
+            <el-button class="button_refresh" @click="Refresh">
               <img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新
             </el-button>
             <el-button class="button_border" @click="OpenSubject" v-if="permissions.includes('schoolOpenSubjects')">开通科目</el-button>
@@ -142,7 +150,7 @@ import ResetPassword from '@/components/resetPassword.vue'
 import { Search } from '@element-plus/icons-vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { getSchoolNumber, getSchoolList, changeStatus } from '@/api/school'
-import { ref, reactive, provide, onMounted } from 'vue'
+import { ref, reactive, provide, onMounted, nextTick, onUnmounted } from 'vue'
 interface UserNumber {
   allUser: number
   officialUser: number
@@ -173,7 +181,7 @@ interface User {
 // 初始化列表数据
 const tableData = ref<User[]>([])
 
-const schoolTypeSelect = ref<string>(" ")
+const schoolTypeSelect = ref<string>("all")
 const schoolNameCode = ref('')
 const tableLoading = ref(false)
 const showDialog = ref(false)
@@ -210,6 +218,16 @@ onMounted(() => {
   GetSchoolNumber()
   GetSchoolList()
 })
+onUnmounted(() => {
+  // if (observer) {
+  //   observer.disconnect();
+  //   observer = null;
+  // }
+  window.addEventListener('scroll', aaa);
+});
+const aaa = () => {
+  console.log('aaa')
+} 
 // 新增用户
 const addUser = () => {
   showDialog.value = true
@@ -266,7 +284,7 @@ const GetSchoolList = () => {
     userId: searchData.value.userId,
     cityCode: searchData.value.cityCode,
     provinceCode: searchData.value.provinceCode,
-    schoolType:  schoolTypeSelect.value,
+    schoolType:  schoolTypeSelect.value == 'all' ? '' : schoolTypeSelect.value,
     queryStr: schoolNameCode.value
   }
   tableLoading.value = true
@@ -324,6 +342,52 @@ const Refresh = () => {
   schoolNameCode.value = ""
   GetSchoolList()
 }
+const filterRef = ref(null)
+const isSticky = ref(false)
+let observer = null;
+const HandleScroll = () => {
+  console.log('1111')
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach(entry => {
+        if (entry.boundingClientRect.top <= 65) {
+          isSticky.value = true;
+        } else {
+          isSticky.value = false;
+        }
+      });
+    },
+    {
+      root: null, // 使用视口作为根元素
+      threshold: 0, // 当元素顶部接触视口顶部时触发
+      rootMargin: `-${65}px 0px 0px 0px` // 相对于视口顶部的偏移
+    }
+  );
+  
+  if (filterRef.value) {
+    observer.observe(filterRef.value);
+  }
+}
+
+
+const filterVisible = ref(false)
+// 获取筛选区域的引用
+const filterAreaRef = ref<HTMLDivElement | null>(null);
+
+// 监听页面滚动
+const OnScroll = () => {
+  console.log('123', window.scrollY)
+  const filterArea = filterAreaRef.value;
+  const scrollPosition = window.scrollY;
+  const contentTop = document.querySelector('.filter_area')?.getBoundingClientRect().top || 0;
+  console.log(contentTop)
+  // 当页面滚动到内容区域中间时显示筛选区域
+  if (scrollPosition >= contentTop - 100) {
+    filterVisible.value = true;
+  } else {
+    filterVisible.value = false;
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -404,4 +468,21 @@ const Refresh = () => {
   color: #ccc; 
   cursor: not-allowed;
 }
+.filter_box {
+  display: none;
+}
+.sticky-top {
+  display: block;
+  width: calc(100% - 190px);
+  position: fixed;
+  top: 65px; /* 与header高度一致 */
+  left: 170px;
+  right: 20px;
+  padding: 20px;
+  background: #F0F4FB;
+  z-index: 20;
+
+  // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
 </style>

+ 1 - 1
src/views/school/subjectList.vue

@@ -152,7 +152,7 @@ const delSubject = (id: number) => {
     }
   }
   :deep(.input_item.el-input) {
-    width: 74px;
+    width: 120px;
     height: 36px;
     border-radius: 4px;
     border: 1px solid #2E64FA!important;

Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff