静态页面开发ing...

package.json

@@ -16,7 +16,7 @@
   "main": "dist/main.js",
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
-    "@qmth/ui": "^1.0.15",
+    "@qmth/ui": "^1.0.16",
     "@vueuse/core": "^10.11.0",
     "axios": "^1.5.0",
     "core-js": "^3.32.2",

src/render/router/routes.ts

@@ -30,6 +30,14 @@ const routes: RouteRecordRaw[] = [
           title: "基础数据配置",
         },
       },
+      {
+        path: "scan-manage",
+        name: "ScanManage",
+        component: () => import("@/views/ScanManage/index.vue"),
+        meta: {
+          title: "扫描管理",
+        },
+      },
       {
         path: "result-export",
         name: "ResultExport",

src/render/views/BaseDataConfig/AddCardDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <my-modal v-model:open="visible" title="导入卡格式">
+    <qm-low-form :params="params" :fields="fields" :label-width="80">
+    </qm-low-form>
+  </my-modal>
+</template>
+<script name="AddCardDialog" lang="ts" setup>
+import { ref } from "vue";
+import { setValueFromObj } from "@/utils/tool";
+const visible = defineModel();
+const props = defineProps<{ curRow: any }>();
+
+//todo 入参名
+const params = ref({
+  a: "1",
+  b: "",
+  c: "",
+});
+params.value = setValueFromObj(params.value, props.curRow);
+const fields = ref([
+  {
+    prop: "a",
+    label: "科目题卡",
+    colSpan: 24,
+  },
+  {
+    prop: "b",
+    label: "备注",
+    colSpan: 24,
+    type: "textarea",
+  },
+  {
+    cell: "c",
+    label: "选择卡格式",
+    colSpan: 24,
+  },
+]);
+</script>
+<style lang="less" scoped></style>

src/render/views/BaseDataConfig/CardImport.vue

@@ -1,5 +1,101 @@
 <template>
-  <div class="card-import">卡格式导入</div>
+  <div class="card-import">
+    <qm-low-form :fields="fields"> </qm-low-form>
+    <a-table :data-source="tableData" :columns="columns" size="middle" bordered>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'operation'">
+          <qm-button type="link" @click="editRow(record)">修改</qm-button>
+          <qm-button type="link" @click="deleteRow(record)">删除</qm-button>
+        </template>
+      </template>
+    </a-table>
+    <AddCardDialog
+      v-model="showAddDialog"
+      v-if="showAddDialog"
+      :cur-row="curRow"
+    ></AddCardDialog>
+  </div>
 </template>
-<script name="CardImport" lang="ts" setup></script>
-<style lang="less" scoped></style>
+<script name="CardImport" lang="ts" setup>
+import { ref } from "vue";
+import AddCardDialog from "./AddCardDialog.vue";
+import type { TableColumnsType } from "@qmth/ui";
+
+const showAddDialog = ref(false);
+const curRow = ref(null);
+const editRow = (row: any) => {
+  curRow.value = row;
+  showAddDialog.value = true;
+};
+const fields = ref([
+  {
+    type: "buttons",
+    children: [
+      {
+        text: "导入卡格式",
+        attrs: {
+          style: { marginLeft: 0 },
+        },
+      },
+      {
+        text: "新增卡格式",
+        attrs: {
+          type: "default",
+          onClick: () => {
+            showAddDialog.value = true;
+          },
+        },
+      },
+    ],
+  },
+]);
+const tableData = ref([{ a: 1, b: 2, c: 3, d: 4, e: 5 }]);
+const columns: TableColumnsType = [
+  {
+    title: "序号",
+    dataIndex: "index",
+    key: "index",
+    width: 100,
+    customRender: ({ index }) => `${index + 1}`,
+  },
+  {
+    title: "科目",
+    dataIndex: "a",
+  },
+  {
+    title: "属性",
+    dataIndex: "b",
+  },
+  {
+    title: "张数",
+    dataIndex: "c",
+  },
+  {
+    title: "备注",
+    dataIndex: "d",
+  },
+  {
+    title: "更新时间",
+    dataIndex: "e",
+  },
+  {
+    title: "操作",
+    key: "operation",
+    width: 300,
+  },
+];
+const deleteRow = (row: any) => {
+  window.$confirm({
+    title: () => "系统通知",
+    content: () => "请确认是否立即删除？",
+    onOk() {
+      //todo 执行删除接口
+    },
+  });
+};
+</script>
+<style lang="less" scoped>
+.card-import {
+  padding: 0 20px 20px 20px;
+}
+</style>

src/render/views/BaseDataConfig/SetImportParamsDialog.vue

@@ -0,0 +1,34 @@
+<template>
+  <my-modal v-model:open="visible" title="设置导入参数" :width="400">
+    <qm-low-form :params="params" :fields="fields" :label-width="80">
+    </qm-low-form>
+  </my-modal>
+</template>
+<script name="SetImportParamsDialog" lang="ts" setup>
+import { ref } from "vue";
+import { setValueFromObj } from "@/utils/tool";
+const visible = defineModel();
+const props = defineProps<{ curRow: any }>();
+
+//todo 入参名
+const params = ref({
+  a: "",
+  b: "",
+});
+//   params.value = setValueFromObj(params.value, props.curRow);
+const fields = ref([
+  {
+    prop: "a",
+    label: "考试年度",
+    colSpan: 24,
+    type: "select",
+  },
+  {
+    prop: "b",
+    label: "考次",
+    colSpan: 24,
+    type: "select",
+  },
+]);
+</script>
+<style lang="less" scoped></style>

src/render/views/BaseDataConfig/StuImport.vue

@@ -1,5 +1,92 @@
 <template>
-  <div class="stu-import">考生导入</div>
+  <div class="stu-import">
+    <qm-low-form :fields="fields">
+      <template #tip>
+        <div class="tip">导入参数设置为：考试年度 - 2024；考次 - 1</div>
+      </template>
+    </qm-low-form>
+    <a-table :data-source="tableData" :columns="columns" size="middle" bordered>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'operation'">
+          <qm-button type="link" @click="">导入</qm-button>
+          <qm-button type="link" @click="clear(record)">清空</qm-button>
+        </template>
+      </template>
+    </a-table>
+    <SetImportParamsDialog
+      v-model="showSetParamsDialog"
+      v-if="showSetParamsDialog"
+    ></SetImportParamsDialog>
+  </div>
 </template>
-<script name="StuImport" lang="ts" setup></script>
-<style lang="less" scoped></style>
+<script name="StuImport" lang="ts" setup>
+import { ref } from "vue";
+import SetImportParamsDialog from "./SetImportParamsDialog.vue";
+import type { TableColumnsType } from "@qmth/ui";
+
+const showSetParamsDialog = ref(false);
+const fields = ref([
+  {
+    type: "button",
+    text: "设置导入参数",
+    attrs: {
+      onClick: () => {
+        showSetParamsDialog.value = true;
+      },
+    },
+  },
+  {
+    cell: "tip",
+  },
+]);
+const tableData = ref([{ a: 1, b: 2, c: 3, d: 4, e: 5 }]);
+const columns: TableColumnsType = [
+  {
+    title: "序号",
+    dataIndex: "index",
+    key: "index",
+    width: 100,
+    customRender: ({ index }) => `${index + 1}`,
+  },
+  {
+    title: "科目代码",
+    dataIndex: "a",
+  },
+  {
+    title: "科目名称",
+    dataIndex: "b",
+  },
+  {
+    title: "已导入考生数",
+    dataIndex: "c",
+  },
+  {
+    title: "操作",
+    key: "operation",
+    width: 300,
+  },
+];
+const deleteRow = (row: any) => {
+  window.$confirm({
+    title: () => "系统通知",
+    content: () => "请确认是否立即删除？",
+    onOk() {
+      //todo 执行删除接口
+    },
+  });
+};
+</script>
+<style lang="less" scoped>
+.stu-import {
+  padding: 0 20px 20px 20px;
+  .tip {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 6px;
+    background: #e8f3ff;
+    margin-left: 8px;
+    padding: 0 12px;
+    color: #165dff;
+  }
+}
+</style>

src/render/views/CurExam/index.vue

@@ -75,6 +75,7 @@
               <div
                 class="flex items-center cursor-pointer"
                 :style="{ color: token.colorPrimary }"
+                @click="toPage('ScanManage')"
               >
                 <span>进入</span>
                 <RightOutlined />

src/render/views/ScanManage/ImageView.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="image-view h-full">
+    <div class="tree-wrap">
+      <div class="top">
+        <div class="result-list">科目1；机器1；批次1</div>
+        <div class="bread">
+          <span :class="{ active: chooseLevel >= 1 }">科目</span>
+          <i>&gt;</i>
+          <span :class="{ active: chooseLevel >= 2 }">机器</span>
+          <i>&gt;</i>
+          <span :class="{ active: chooseLevel == 3 }">批次</span>
+        </div>
+      </div>
+      <div class="bottom">
+        <div
+          v-for="(item, index) in leftList"
+          :key="index"
+          class="list-row"
+          :class="{ active: activeIndex === index }"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <div class="info-wrap"></div>
+    <div class="image-wrap"></div>
+  </div>
+</template>
+<script name="ImageView" lang="ts" setup>
+import { ref, computed } from "vue";
+const listType = ref("kemu");
+const chooseLevel = computed(() => {
+  return listType.value === "kemu" ? 1 : listType.value === "jiqi" ? 2 : 3;
+});
+const leftList = ref([{ name: "批次1" }, { name: "批次2" }, { name: "批次3" }]);
+const activeIndex = ref(0);
+const imgList = ref([
+  {
+    url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203102-1.jpg",
+  },
+  {
+    url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203101-1.jpg",
+  },
+  {
+    url: "https://cet-test.markingtool.cn/file/slice/1/2/10100/1/035/1/101001221203502-1.jpg",
+  },
+]);
+</script>
+<style lang="less" scoped>
+.image-view {
+  .image-wrap {
+    height: 100%;
+    border-left: 1px solid #e5e6eb;
+    border-right: 1px solid #e5e6eb;
+    background: #eceef1;
+    margin-left: 284px;
+    margin-right: 400px;
+  }
+  .tree-wrap {
+    width: 284px;
+    float: left;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .bottom {
+      flex: 1;
+      overflow: auto;
+      padding: 10px 8px;
+      .list-row {
+        padding: 6px 12px;
+        line-height: 22px;
+        color: @text-color1;
+        cursor: pointer;
+        &.active {
+          font-weight: bold;
+          background: #e8f3ff !important;
+          border-radius: 6px;
+        }
+        &:hover {
+          background: #f6f6f6;
+          border-radius: 6px;
+        }
+      }
+    }
+    .top {
+      border-bottom: 1px solid #e5e5e5;
+      padding: 16px;
+      .bread {
+        margin-top: 16px;
+        i {
+          font-style: normal;
+          color: @text-color3;
+          margin: 0 4px;
+        }
+        span {
+          color: @text-color3;
+          &.active {
+            color: @text-color1;
+          }
+        }
+      }
+      .result-list {
+        background: #f2f3f5;
+        border-radius: 6px;
+        padding: 6px 8px;
+        line-height: 20px;
+        color: @text-color1;
+      }
+    }
+  }
+  .info-wrap {
+    width: 400px;
+    float: right;
+    height: 100%;
+  }
+}
+</style>

src/render/views/ScanManage/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="scan-manage h-full">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1" tab="图片查看">
+        <ImageView></ImageView>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="扫描进度"> </a-tab-pane>
+      <a-tab-pane key="3" tab="工作量统计"> </a-tab-pane>
+      <a-tab-pane key="4" tab="扫描查漏"> </a-tab-pane>
+      <a-tab-pane key="5" tab="考生信息"> </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script name="ScanManage" lang="ts" setup>
+import { ref } from "vue";
+import ImageView from "./ImageView.vue";
+const activeKey = ref("1");
+</script>
+<style lang="less" scoped>
+.scan-manage {
+  :deep(.ant-tabs) {
+    height: 100%;
+    .ant-tabs-nav {
+      padding: 8px 15px 0 15px;
+      margin-bottom: 0;
+    }
+    .ant-tabs-content-holder {
+      overflow: auto;
+      .ant-tabs-content {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>