feat: 细节优化

postcss.config.cjs

@@ -6,7 +6,7 @@ module.exports = {
       rootValue: 12.8,
       unitPrecision: 5,
       propList: ['*'],
-      selectorBlackList: [],
+      selectorBlackList: ['ignore-rem'],
       replace: true,
       mediaQuery: false,
       minPixelValue: 0

src/assets/less/global.less

@@ -7,6 +7,7 @@ body {
   background-color: @bg-color;
   line-height: 1;
   min-height: 100vh;
+  min-width: 1280PX;
 }
 
 #app {

src/layout/index.vue

@@ -20,6 +20,7 @@ import LeftMenu from "@/layout/left-menu.vue";
   display: flex;
   .layout-left {
     width: 200px;
+    min-width: 200PX;
     height: 100%;
     background: @white;
   }
@@ -28,6 +29,7 @@ import LeftMenu from "@/layout/left-menu.vue";
     height: 100%;
     overflow: auto;
     padding: 24px;
+    min-width: 1080PX;
   }
 }
 </style>

src/pages/exam-manage/index.vue

@@ -110,10 +110,10 @@
           </a-select>
         </a-form-item>
         <a-form-item label="考试批次" v-bind="validateInfos.name">
-          <a-input v-model:value="examInfo.name"></a-input>
+          <a-input v-model:value="examInfo.name" placeholder="请输入考试批次"></a-input>
         </a-form-item>
         <a-form-item label="状态" v-bind="validateInfos.examStatus">
-          <a-select v-model:value="examInfo.examStatus">
+          <a-select v-model:value="examInfo.examStatus" placeholder="选择考试状态">
             <a-select-option value="EDIT">{{
               EXAM_STATUS.EDIT
             }}</a-select-option>
@@ -185,9 +185,9 @@ const examInfo = reactive<
   BaseExamInfo & { schoolTableData: MultiplePageData<SchoolListInfo> }
 >({
   schoolTableData: { totalCount: 0, result: [] },
-  examStatus: "",
+  examStatus: void 0,
   name: "",
-  schoolId: "",
+  schoolId: void 0,
   id: void 0,
 });
 
@@ -227,6 +227,9 @@ const querySchoolList = throttle(
 const toggleAddExamModal = (show: boolean = true) => {
   showModal.value = show;
   if (show) {
+    if(!examInfo.id){
+      Object.assign(examInfo, { schoolId: query.schoolId || mainStore.systemUserInfo?.schoolId });
+    }
     querySchoolList("", "form");
   }
 };

src/pages/school-manage/index.vue

@@ -178,12 +178,12 @@ const query = reactive<FetchSchoolListQuery>({
 const columns: TableColumnType[] = [
   { title: "序号", dataIndex: "index", align: "center" },
   { title: "学校ID", dataIndex: "id" },
-  { title: "学校名称", dataIndex: "name" },
-  { title: "地区", dataIndex: "region" },
+  { title: "学校名称", dataIndex: "name", ellipsis: true },
+  { title: "地区", dataIndex: "region",maxWidth: 300 },
   { title: "状态", dataIndex: "enable", align: "center" },
-  { title: "负责人", dataIndex: "contacts" },
+  { title: "负责人", dataIndex: "contacts", ellipsis: true },
   { title: "联系方式", dataIndex: "telephone" },
-  { title: "更新时间", dataIndex: "updateTime" },
+  { title: "更新时间", dataIndex: "updateTime", ellipsis: true },
   { title: "操作", dataIndex: "operation" },
 ];
 
@@ -230,7 +230,7 @@ const onEdit = (record: SchoolListInfo) => {
     region: record.region,
     telephone: record.telephone,
     enable: !!record.enable,
-    id: record.id
+    id: record.id,
   });
   toggleAddSchoolModal(true);
 };

src/pages/subjects-manage/index.vue

@@ -26,6 +26,7 @@
             @search="(name:string) => queryExamList(name, 'list')"
             placeholder="考试批次"
           >
+            <a-select-option value="">全部</a-select-option>
             <a-select-option
               v-for="exam in examTableData.result"
               :key="exam.id"
@@ -143,7 +144,7 @@
             <a-select-option
               v-for="school in uploadQuery.schoolTableData.result"
               :key="school.id"
-              :value="`${school.id}`"
+              :value="school.id"
               >{{ school.name }}</a-select-option
             >
           </a-select>
@@ -244,8 +245,8 @@ const ImportDownloadApi: Record<
 /** 导入参数 */
 const uploadQuery = reactive<{
   type: ImportType;
-  schoolId: string;
-  examId: string;
+  schoolId?: string| number;
+  examId?: string;
   fileList: UploadProps["fileList"];
   schoolTableData: MultiplePageData<SchoolListInfo>;
   examTableData: MultiplePageData<ExamListInfo>;
@@ -253,8 +254,8 @@ const uploadQuery = reactive<{
   type: "subject",
   schoolTableData: { totalCount: 0, result: [] },
   examTableData: { totalCount: 0, result: [] },
-  schoolId: "",
-  examId: "",
+  schoolId: void 0,
+  examId: void 0,
   fileList: [],
 });
 
@@ -398,7 +399,7 @@ watch(
 watch(
   () => uploadQuery.schoolId,
   () => {
-    uploadQuery.examId = "";
+    uploadQuery.examId = void 0;
     Object.assign(uploadQuery.examTableData, { result: [], totalCount: 0 });
     if (uploadQuery.schoolId) {
       queryExamList("", "form");
@@ -446,7 +447,8 @@ const downloadTemplate = async () => {
 /** 显示导入弹窗 */
 const showImportModalType = async (type: ImportType) => {
   uploadQuery.type = type;
-  showImportModal.value = true;
+  uploadQuery.schoolId = query.schoolId || mainStore.systemUserInfo?.schoolId
+  showImportModal.value = true
   querySchoolList("", "form");
 };
 
@@ -456,7 +458,7 @@ const onImport = async () => {
     const valid = await validate();
     if (valid) {
       const formData = new FormData();
-      formData.append("examId", uploadQuery.examId);
+      formData.append("examId", uploadQuery.examId || '');
       uploadQuery.fileList?.forEach((file: any) => {
         formData.append("file", file);
       });

src/pages/user-manage/index.vue

@@ -26,6 +26,7 @@
         </a-form-item>
         <a-form-item label="角色">
           <a-select v-model:value="query.role" placeholder="用户角色">
+            <a-select-option :value="void 0">全部</a-select-option>
             <a-select-option value="SCHOOL_ADMIN">{{
               ROLE.SCHOOL_ADMIN
             }}</a-select-option>
@@ -149,7 +150,11 @@
             :disabled="!!userInfo.id"
             v-model:value="userInfo.loginName"
             maxlength="11"
-            placeholder="请输入登录手机号"
+            :placeholder="
+              userInfo.role === 'SECTION_LEADER'
+                ? '请输入登录手机号'
+                : '请输入登录名'
+            "
           ></a-input>
         </a-form-item>
         <a-form-item
@@ -250,7 +255,7 @@
 </template>
 
 <script setup lang="ts" name="PageUsers">
-import { reactive, ref, watch } from "vue";
+import { nextTick, reactive, ref, watch, markRaw } from "vue";
 import {
   PlusCircleOutlined,
   CheckCircleFilled,
@@ -304,6 +309,7 @@ const userInfo = reactive<
   name: "",
   loginName: "",
   course: "",
+  passwd: void 0,
   role: void 0,
   id: void 0,
   schoolTableData: { totalCount: 0, result: [] },
@@ -314,13 +320,14 @@ const resetPwd = reactive({
   userId: "",
 });
 
-const userRules = {
-  schoolId: [{ required: true, message: "请选择用户所属学校" }],
+const editUserRules = () => ({
   name: [{ required: true, message: "请填写用户姓名" }],
-  loginName: [
-    { required: true, message: "请填写登录手机号" },
-    { pattern: /\d{11}/, message: "请填写正确的手机号" },
-  ],
+  role: [{ required: true, message: "请选择用户角色" }],
+});
+
+const addUserRules = () => ({
+  schoolId: [{ required: true, message: "请选择用户所属学校" }],
+  loginName: [{ required: true, message: "请填写登录名" }],
   passwd: [
     { required: true, message: "请填写登录密码" },
     {
@@ -328,8 +335,12 @@ const userRules = {
       message: "密码只能由数字、字母组成，长度6-18个字符",
     },
   ],
-  role: [{ required: true, message: "请选择用户角色" }],
-};
+});
+
+const userRules = reactive({
+  ...addUserRules(),
+  ...editUserRules(),
+});
 
 const pwdRules = {
   passwd: [
@@ -424,11 +435,18 @@ const querySchoolList = throttle(
 
 /** 显示新增用户弹窗 */
 const toggleAddUserModal = (show: boolean = true) => {
-  showModal.value = show;
   if (show) {
-    Object.assign(userInfo, { schoolId: mainStore.systemUserInfo?.schoolId });
+    if (userInfo.id) {
+      Object.assign(userRules, { schoolId: [], loginName: [], passwd: [] });
+    } else {
+      Object.assign(userInfo, { schoolId: query.schoolId || mainStore.systemUserInfo?.schoolId });
+      Object.assign(userRules, { ...addUserRules() });
+    }
     querySchoolList("", "form");
   }
+  nextTick(() => {
+    showModal.value = show;
+  });
 };
 
 /** 查询用户列表 */
@@ -471,6 +489,23 @@ const onResetPwd = (record: UserInfo) => {
 
 /** 新增用户 */
 const onPutUser = () => {
+  const role = userInfo.role;
+  const isEdit = !!userInfo.id;
+  if (!isEdit) {
+    if (role === "SECTION_LEADER") {
+      Object.assign(userRules, {
+        loginName: [
+          { required: true, message: "请填写登录手机号" },
+          // @ts-ignore
+          { pattern: /\d{11}/, message: "请填写正确的手机号" },
+        ],
+      });
+    } else {
+      Object.assign(userRules, {
+        loginName: [{ required: true, message: "请填写登录名" }],
+      });
+    }
+  }
   validate().then((valid) => {
     if (valid) {
       const { role, course, schoolTableData, ...info } = userInfo;
@@ -479,7 +514,7 @@ const onPutUser = () => {
         role,
         course: role === "SECTION_LEADER" ? course : "",
       }).then(() => {
-        message.success(`${userInfo.id ? "修改" : "添加"}成功`);
+        message.success(`${isEdit ? "修改" : "添加"}成功`);
         queryUserList();
         toggleAddUserModal(false);
       });
@@ -491,7 +526,7 @@ const onPutUser = () => {
 const importUserList = () => {
   showImportModal.value = true;
   Object.assign(importUserForm, {
-    schoolId: mainStore.systemUserInfo?.schoolId,
+    schoolId: query.schoolId || mainStore.systemUserInfo?.schoolId,
   });
   querySchoolList("", "import");
 };

src/utils/flexible.ts

@@ -1,7 +1,8 @@
 import { debounce } from "lodash-es";
 
 const flexible = debounce((designWidth: number = 1280) => {
-  const ratio = document.documentElement.clientWidth / designWidth;
+  const ratio =
+    Math.max(document.documentElement.clientWidth, 1280) / designWidth;
   document.documentElement.style.fontSize = (ratio * designWidth) / 100 + "px";
 
   addEventListener("resize", () => {