图片规则选择

src/features/ExamList/ExamList.vue

@@ -36,12 +36,13 @@ import { store } from "@/store";
 import { onMounted, reactive, ref } from "vue";
 import { getExams } from "@/api/api";
 import { useRouter } from "vue-router";
+import { Store } from "@/types";
 const router = useRouter();
 
 let currentPage = ref(1);
 let pageSize = 10;
-let examList = reactive({ items: [] });
-let showExams = reactive({ items: [] });
+let examList = reactive({ items: [] as Array<Store["env"]["exam"]> });
+let showExams = reactive({ items: [] as Array<Store["env"]["exam"]> });
 
 onMounted(async () => {
   await fetchData();
@@ -56,7 +57,7 @@ const fetchData = async () => {
   );
 };
 
-const pageChange = (page, pageSize) => {
+const pageChange = (page: number, pageSize: number) => {
   console.log(page, pageSize);
   currentPage.value = page;
   // fetchData();
@@ -66,7 +67,7 @@ const pageChange = (page, pageSize) => {
   );
 };
 
-const selectExam = (exam) => {
+const selectExam = (exam: Store["env"]["exam"]) => {
   store.env.exam = exam;
   store.env.examId = exam.id;
   router.push("/home");

src/features/Home/Home.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="title cl" id="exam-title">
-    <em class="id"></em><span class="name">{{ userName }}</span
+    <em class="id">{{ exam.id }}</em
+    ><span class="name">{{ exam.name }}</span
     ><span class="pipe">|</span>
-    <span class="time"></span>
+    <span class="time">{{ exam.examTime }}</span>
   </div>
   <div class="list">
     <h3>功能选择</h3>
@@ -11,7 +12,7 @@
         <router-link to="/exam-list"><span></span>考试切换</router-link>
       </li>
       <li class="l2">
-        <a href="/sync"><span></span>数据同步</a>
+        <router-link to="/sync"><span></span>数据同步</router-link>
       </li>
       <li class="l3">
         <router-link to="/image"><span></span>图片下载</router-link>
@@ -22,14 +23,5 @@
 
 <script setup lang="ts">
 import { store } from "@/store";
-const {
-  user: { userName },
-  // exam: { iid, name, examTime },
-} = store.env;
-
-// $("#user-name").html(env.user.userName);
-
-// $("#exam-title").find(".id").html(env.exam.id);
-// $("#exam-title").find(".name").html(env.exam.name);
-// $("#exam-title").find(".time").html(env.exam.examTime);
+const exam = store.env.exam;
 </script>

src/features/Image/Image.vue

@@ -1,143 +1,119 @@
 <template>
-  <div class="wp">
-    <div class="hd">
-      <div class="logo"><img src="img/logo.png" /></div>
-      <span class="y">
-        欢迎您，<span id="user-name"></span> <span class="pipe">|</span
-        ><a href="login.html">退出</a>
-      </span>
-    </div>
-    <div class="cont">
-      <div class="title cl">
-        <span class="y"
-          ><router-link to="/home">返回考试主页</router-link></span
-        >
-        <h2>图片下载</h2>
-      </div>
-      <div class="picture cl">
-        <table cellpadding="0" cellspacing="0" width="100%">
-          <tr>
-            <th>下载内容：</th>
-            <td>
-              <div class="input-radio">
-                <a-radio-group name="radioGroup" v-model:value="type">
-                  <a-radio value="1">考生原图</a-radio>
-                  <a-radio value="2">签到表图片</a-radio>
-                </a-radio-group>
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <th>本地保存地址：</th>
-            <td>
-              <input
-                id="path-text"
-                type="text"
-                style="width: 400px"
-                class="filetext"
-                :value="dir"
-              />
-              <a
-                href="##"
-                id="path-select"
-                class="filebtn"
-                @click="chooseDirectory"
-                >选择</a
-              >
-            </td>
-          </tr>
-          <tr>
-            <th>图片转存规则：</th>
-            <td>
-              <a-input v-model="template" style="width: 600px" />
-            </td>
-          </tr>
-          <tr id="append-select">
-            <th>是否续传：</th>
-            <td>
-              <div class="input-radio">
-                <a-radio-group name="radioGroup" v-model:value="append">
-                  <a-radio :value="true">是</a-radio>
-                  <a-radio :value="false">否</a-radio>
-                </a-radio-group>
-              </div>
-            </td>
-          </tr>
-          <tr id="exception-select">
-            <th>异常处理：</th>
-            <td>
-              <div class="input-radio">
-                <a-radio-group name="radioGroup" v-model:value="failover">
-                  <a-radio :value="true">终止</a-radio>
-                  <a-radio :value="false">跳过</a-radio>
-                </a-radio-group>
-              </div>
-            </td>
-          </tr>
-          <tr id="watermark-select" v-if="type === '1'">
-            <th>添加分数水印：</th>
-            <td>
-              <div class="input-radio">
-                <a-radio-group name="radioGroup" v-model:value="watermark">
-                  <a-radio :value="true">是</a-radio>
-                  <a-radio :value="false">否</a-radio>
-                </a-radio-group>
-              </div>
-            </td>
-          </tr>
-          <tr id="track-mode-select" v-if="type === '1'">
-            <th>水印模式：</th>
-            <td>
-              <div class="input-radio">
-                <a-radio-group name="radioGroup" v-model:value="trackMode">
-                  <a-radio :value="true">普通</a-radio>
-                  <a-radio :value="false">研究生</a-radio>
-                </a-radio-group>
-              </div>
-            </td>
-          </tr>
-          <tr id="examNumber-select" v-if="type === '1'">
-            <th>准考证号：</th>
-            <td>
-              <a-input
-                v-model="examNumber"
-                style="width: 600px"
-                placeholder="多个准考证号用逗号分隔"
-              />
-            </td>
-          </tr>
-          <tr id="subjectCode-select" v-if="type === '1'">
-            <th>科目代码：</th>
-            <td>
-              <a-input
-                v-model="subjectCode"
-                style="width: 600px"
-                placeholder="多个科目代码用逗号分隔"
-              />
-            </td>
-          </tr>
+  <div class="title cl">
+    <span class="y"><router-link to="/home">返回考试主页</router-link></span>
+    <h2>图片下载</h2>
+  </div>
+  <div class="picture cl">
+    <table cellpadding="0" cellspacing="0" width="100%">
+      <tr>
+        <th>下载内容：</th>
+        <td>
+          <div class="input-radio">
+            <a-radio-group name="radioGroup" v-model:value="type">
+              <a-radio value="1">考生原图</a-radio>
+              <a-radio value="2">签到表图片</a-radio>
+            </a-radio-group>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <th>本地保存地址：</th>
+        <td>
+          <input
+            type="text"
+            style="width: 400px"
+            class="filetext"
+            :value="dir"
+          />
+          <a href="##" class="filebtn" @click="chooseDirectory">选择</a>
+        </td>
+      </tr>
+      <tr>
+        <th>图片转存规则：</th>
+        <td>
+          <a-input v-model:value="template" style="width: 600px" />
+        </td>
+      </tr>
+      <tr id="append-select">
+        <th>是否续传：</th>
+        <td>
+          <div class="input-radio">
+            <a-radio-group name="radioGroup" v-model:value="append">
+              <a-radio :value="true">是</a-radio>
+              <a-radio :value="false">否</a-radio>
+            </a-radio-group>
+          </div>
+        </td>
+      </tr>
+      <tr id="exception-select">
+        <th>异常处理：</th>
+        <td>
+          <div class="input-radio">
+            <a-radio-group name="radioGroup" v-model:value="failover">
+              <a-radio :value="true">终止</a-radio>
+              <a-radio :value="false">跳过</a-radio>
+            </a-radio-group>
+          </div>
+        </td>
+      </tr>
+      <tr id="watermark-select" v-if="type === '1'">
+        <th>添加分数水印：</th>
+        <td>
+          <div class="input-radio">
+            <a-radio-group name="radioGroup" v-model:value="watermark">
+              <a-radio :value="true">是</a-radio>
+              <a-radio :value="false">否</a-radio>
+            </a-radio-group>
+          </div>
+        </td>
+      </tr>
+      <tr id="track-mode-select" v-if="type === '1'">
+        <th>水印模式：</th>
+        <td>
+          <div class="input-radio">
+            <a-radio-group name="radioGroup" v-model:value="trackMode">
+              <a-radio value="1">普通</a-radio>
+              <a-radio value="2">研究生</a-radio>
+            </a-radio-group>
+          </div>
+        </td>
+      </tr>
+      <tr id="examNumber-select" v-if="type === '1'">
+        <th>准考证号：</th>
+        <td>
+          <a-input
+            v-model:value="examNumber"
+            style="width: 600px"
+            placeholder="多个准考证号用逗号分隔"
+          />
+        </td>
+      </tr>
+      <tr id="subjectCode-select" v-if="type === '1'">
+        <th>科目代码：</th>
+        <td>
+          <a-input
+            v-model:value="subjectCode"
+            style="width: 600px"
+            placeholder="多个科目代码用逗号分隔"
+          />
+        </td>
+      </tr>
 
-          <tr id="message-tr" v-if="type === '1'">
-            <th></th>
-            <td>
-              <p class="error-tetx" id="message-text">{{ ruleExample }}</p>
-            </td>
-          </tr>
-          <tr>
-            <th></th>
-            <td>
-              <a id="run-button" href="##" class="start-btn" @click="start"
-                ><span>开始图片下载</span></a
-              >
-              <!-- <a-button @click="start">开始图片下载</a-button> -->
-            </td>
-          </tr>
-        </table>
-      </div>
-    </div>
-    <div class="ft">
-      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
-    </div>
+      <tr id="message-tr">
+        <th></th>
+        <td>
+          <p class="error-tetx" id="message-text">{{ ruleExample }}</p>
+        </td>
+      </tr>
+      <tr>
+        <th></th>
+        <td>
+          <a href="##" class="start-btn" @click="start">
+            <span>开始图片下载</span>
+          </a>
+        </td>
+      </tr>
+    </table>
   </div>
 </template>
 
@@ -181,6 +157,23 @@ const chooseDirectory = () => {
 };
 
 const start = () => {
+  if (!type.value) {
+    alert("请选择图片类型");
+    return false;
+  }
+  if (!dir.value) {
+    alert("请选择图片转存目录");
+    return false;
+  }
+  if (!template.value) {
+    alert("请填写图片转存规则");
+    return false;
+  }
+  if (type.value == "1" && trackMode.value == "") {
+    alert("请选择水印模式");
+    return false;
+  }
+
   store.pageInputs["/image-download"] = {
     type: type.value,
     template: template.value,