From 6616ec1602985046202576f701f8276392adc944 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Thu, 6 Mar 2025 17:52:53 +0800
Subject: [PATCH] init

---
 src/api/batch-sub-school/batch-sub-school.js  |  37 ++
 src/views/BatchSub/components/AddBatchSub.vue |  81 ++-
 src/views/BatchSubSchool/BatchSubSchool.vue   | 536 ++++++++++++++++++
 .../components/AddBatchSubSchool.vue          | 339 +++++++++++
 .../components/ShowBatchSubSchool.vue         | 109 ++++
 5 files changed, 1086 insertions(+), 16 deletions(-)
 create mode 100644 src/api/batch-sub-school/batch-sub-school.js
 create mode 100644 src/views/BatchSubSchool/BatchSubSchool.vue
 create mode 100644 src/views/BatchSubSchool/components/AddBatchSubSchool.vue
 create mode 100644 src/views/BatchSubSchool/components/ShowBatchSubSchool.vue

diff --git a/src/api/batch-sub-school/batch-sub-school.js b/src/api/batch-sub-school/batch-sub-school.js
new file mode 100644
index 0000000..670f251
--- /dev/null
+++ b/src/api/batch-sub-school/batch-sub-school.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function index(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/batch-sub-school/index',
+    params,
+isLoading
+  })
+}
+
+export function show(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/batch-sub-school/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/batch-sub-school/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/batch-sub-school/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/views/BatchSub/components/AddBatchSub.vue b/src/views/BatchSub/components/AddBatchSub.vue
index fd4740c..0961a28 100644
--- a/src/views/BatchSub/components/AddBatchSub.vue
+++ b/src/views/BatchSub/components/AddBatchSub.vue
@@ -30,19 +30,38 @@
             </el-form-item>
 
             <el-form-item label="归属批次" prop="batch_id" clearable>
-              <el-select
+              <el-cascader
                 v-model="form['batch_id']"
-                clearable
-                placeholder="请填写归属批次"
                 style="width: 100%"
-              >
-                <el-option
-                  v-for="(option, optionIndex) in batch"
-                  :key="optionIndex"
-                  :label="option['name']"
-                  :value="option['id']"
-                ></el-option>
-              </el-select>
+                :options="aspirations"
+                :props="{
+                  value: 'id',
+                  label: 'name',
+                  lazy: true,
+                  emitPath: false,
+                  lazyLoad: (node, resolve) => {
+                    const { level, value } = node
+                    getBatches(value).then(res => {
+                      resolve(res.map(i => ({
+                        ...i,
+                        leaf: true
+                      })))
+                    })
+                  }
+                }"></el-cascader>
+<!--              <el-select-->
+<!--                v-model="form['batch_id']"-->
+<!--                clearable-->
+<!--                placeholder="请填写归属批次"-->
+<!--                style="width: 100%"-->
+<!--              >-->
+<!--                <el-option-->
+<!--                  v-for="(option, optionIndex) in batch"-->
+<!--                  :key="optionIndex"-->
+<!--                  :label="option['name']"-->
+<!--                  :value="option['id']"-->
+<!--                ></el-option>-->
+<!--              </el-select>-->
             </el-form-item>
 
             <el-form-item label="排序" prop="sort">
@@ -116,6 +135,8 @@
 </template>
 
 <script>
+import { index as batchIndex } from "@/api/batch/batch"
+import { index as aspirationIndex } from "@/api/aspiration/aspiration";
 import { save, show } from "@/api/batch-sub/batch-sub";
 import axios from "axios";
 import { getToken } from "@/utils/auth";
@@ -130,11 +151,6 @@ export default {
       default: false,
       required: true,
     },
-
-    batch: {
-      type: Array,
-      default: () => [],
-    },
   },
   data() {
     return {
@@ -168,6 +184,9 @@ export default {
           },
         ],
       },
+
+      aspirations: [],
+      batches: [],
     };
   },
   watch: {
@@ -179,6 +198,33 @@ export default {
     },
   },
   methods: {
+    async getAspiration() {
+      try {
+        const res = await aspirationIndex({
+          page: 1,
+          page_size: 999
+        })
+        this.aspirations = res.data
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    async getBatches(aspirationId) {
+      try {
+        const res = await batchIndex({
+          page: 1,
+          page_size: 999,
+          'filter[0][key]': 'aspiration_id',
+          'filter[0][op]': 'eq',
+          'filter[0][value]': aspirationId,
+        })
+        return res.data
+      } catch (err) {
+        console.error(err)
+        return []
+      }
+    },
+
     uploadBefore(file) {
       if (file.size > uploadSize) {
         this.$message({
@@ -256,6 +302,9 @@ export default {
       });
     },
   },
+  created() {
+    this.getAspiration()
+  }
 };
 </script>
 
diff --git a/src/views/BatchSubSchool/BatchSubSchool.vue b/src/views/BatchSubSchool/BatchSubSchool.vue
new file mode 100644
index 0000000..3beb43c
--- /dev/null
+++ b/src/views/BatchSubSchool/BatchSubSchool.vue
@@ -0,0 +1,536 @@
+<template>
+  <div>
+    <el-card shadow="never" style="margin-top: 20px">
+      <template #header>
+        <slot name="header">
+          <vxe-toolbar :print="isHasAuth('print')" custom ref="toolbar">
+            <template #toolSuffix>
+              <vxe-button
+                style="margin-right: 10px"
+                v-if="isHasAuth('export')"
+                icon="vxe-icon-download"
+                circle
+                @click="exportMethod"
+              ></vxe-button>
+            </template>
+            <template #buttons>
+              <el-button
+                v-if="isHasAuth('create')"
+                icon="el-icon-plus"
+                type="primary"
+                size="small"
+                @click="isShowAdd = true"
+                >新增</el-button
+              >
+              <el-button
+                v-if="isHasAuth('search')"
+                icon="el-icon-search"
+                type="primary"
+                plain
+                size="small"
+                @click="getList"
+                >搜索</el-button
+              >
+            </template>
+          </vxe-toolbar>
+        </slot>
+      </template>
+
+      <vxe-table
+        ref="table"
+        stripe
+        style="margin-top: 10px"
+        :loading="loading"
+        :height="tableHeight"
+        keep-source
+        show-overflow
+        :menu-config="{
+          className: 'my-menus',
+          body: {
+            options: [
+              [
+                {
+                  code: 'copy',
+                  name: '复制',
+                  prefixConfig: { icon: 'vxe-icon-copy' },
+                  suffixConfig: { content: 'Ctrl+C' },
+                },
+                {
+                  code: 'remove',
+                  name: '删除',
+                  prefixConfig: {
+                    icon: 'vxe-icon-delete-fill',
+                    className: 'color-red',
+                  },
+                },
+              ],
+            ],
+          },
+        }"
+        @menu-click="contextMenuClickEvent"
+        :row-config="{ isCurrent: true, isHover: true }"
+        :column-config="{ resizable: true }"
+        :export-config="{}"
+        :edit-rules="validRules"
+        :edit-config="{
+          trigger: 'manual',
+          mode: 'row',
+          showStatus: true,
+          isHover: true,
+          autoClear: false,
+        }"
+        :align="allAlign"
+        :data="tableData"
+      >
+        <vxe-column type="checkbox" width="50" align="center" />
+        <vxe-column type="seq" width="58" align="center" />
+        <vxe-column type="expand" title="专业详情" width="80" align="center">
+          <template #content="{ row }">
+            <vxe-table
+              stripe
+              :height="500"
+              :data="row['specialty']"
+              :column-config="{ resizable: true }"
+            >
+              <vxe-column type="seq" width="70" align="center">
+                <template #header>
+                  <el-button
+                    :disabled="!isActiveStatus(row)"
+                    size="small"
+                    icon="el-icon-plus"
+                    type="primary"
+                    @click="row.specialty.push({ number: '' })"
+                  ></el-button>
+                </template>
+              </vxe-column>
+              <vxe-column
+                field="number"
+                min-width="140"
+                title="名称"
+                align="center"
+              >
+                <template #default="{ row: row1 }">
+                  <el-input
+                    v-model="row1['number']"
+                    clearable
+                    :readonly="!isActiveStatus(row)"
+                    placeholder="请填写详细名称"
+                    style="width: 100%"
+                  ></el-input>
+                </template>
+              </vxe-column>
+              <vxe-column
+                :visible="isActiveStatus(row)"
+                field="operate"
+                title="操作"
+                min-width="140"
+                header-align="center"
+              >
+                <el-button size="small" type="danger">删除</el-button>
+              </vxe-column>
+            </vxe-table>
+          </template>
+        </vxe-column>
+        <vxe-column
+          align="center"
+          field="batch_sub.name"
+          width="180"
+          title="归属批次详情"
+        />
+<!--
+:edit-render="{
+            name: 'VxeSelect',
+            options: batchSub,
+            props: { multiple: false },
+            optionProps: { value: 'id', label: 'name' },
+          }"
+          -->
+
+        <vxe-column
+          header-align="center"
+          align="center"
+          field="number"
+          width="160"
+          title="志愿序号"
+          :edit-render="{ name: 'input' }"
+        />
+
+        <vxe-column
+          field="operate"
+          header-align="center"
+          title="操作"
+          min-width="220"
+          fixed="right"
+        >
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button size="small" type="primary" @click="saveRowEvent(row)"
+                >保存</el-button
+              >
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                @click="cancelRowEvent(row)"
+                >取消</el-button
+              >
+            </template>
+            <template v-else>
+              <el-button
+                v-if="isHasAuth('detail')"
+                size="small"
+                type="primary"
+                plain
+                @click="detail(row)"
+                >查看</el-button
+              >
+              <el-button
+                v-if="isHasAuth('edit')"
+                size="small"
+                type="warning"
+                @click="editRowEvent(row)"
+                >编辑</el-button
+              >
+              <el-button
+                v-if="isHasAuth('delete')"
+                size="small"
+                type="danger"
+                @click="destroyRowEvent(row)"
+                >删除</el-button
+              >
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+      <el-pagination
+        style="margin-top: 10px; display: flex; justify-content: flex-end"
+        :current-page.sync="select.page"
+        :page-sizes="[20, 30, 40, 50]"
+        :page-size.sync="select.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="
+          (e) => {
+            select.page_size = e;
+            select.page = 1;
+            getList();
+          }
+        "
+        @current-change="
+          (e) => {
+            select.page = e;
+            getList();
+          }
+        "
+      />
+    </el-card>
+
+    <AddBatchSubSchool
+      ref="AddBatchSubSchool"
+      :batch-sub="batchSub"
+      :is-show.sync="isShowAdd"
+      @refresh="getList"
+    />
+    <ShowBatchSubSchool
+      ref="ShowBatchSubSchool"
+      :batch-sub="batchSub"
+      :is-show.sync="isShowDetail"
+    />
+  </div>
+</template>
+
+<script>
+import VxeUI from "vxe-pc-ui";
+
+import { authMixin } from "@/mixin/authMixin";
+import { uploadSize } from "@/settings";
+import { deepCopy } from "@/utils";
+import { download } from "@/utils/downloadRequest";
+import { destroy, index, save } from "@/api/batch-sub-school/batch-sub-school";
+import AddBatchSubSchool from "./components/AddBatchSubSchool.vue";
+import ShowBatchSubSchool from "./components/ShowBatchSubSchool.vue";
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+
+import { index as batchSubIndex } from "@/api/batch-sub/batch-sub";
+
+export default {
+  name: "BatchSubSchool",
+  mixins: [authMixin],
+  components: {
+    AddBatchSubSchool,
+    ShowBatchSubSchool,
+  },
+  data() {
+    return {
+      uploadSize,
+      examineKey: 0,
+      isShowAdd: false,
+      isShowDetail: false,
+
+      loading: false,
+      tableHeight: 400,
+      select: {
+        page: 1,
+        page_size: 20,
+        keyword: "",
+        show_relation: ["batchSub"],
+      },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      form: {
+        id: "",
+
+        batch_sub_id: "",
+
+        number: "",
+
+        specialty: [],
+      },
+      validRules: {
+        batch_sub_id: [
+          {
+            required: true,
+            message: "归属批次详情" + "必填",
+          },
+        ],
+      },
+
+      batchSub: [],
+    };
+  },
+  computed: {
+    isActiveStatus() {
+      return function (row) {
+        if (this.$refs["table"]) {
+          return this.$refs["table"].isEditByRow(row);
+        }
+      };
+    },
+    isHasAuth() {
+      return function (auth) {
+        return this.auths_auth_mixin.indexOf(auth) !== -1;
+      };
+    },
+  },
+  created() {
+    // this.getBatchSub();
+
+    this.getList();
+  },
+  mounted() {
+    this.bindToolbar();
+    this.calcTableHeight();
+  },
+  methods: {
+    exportMethod() {
+      this.$confirm("请选择导出方式", "提示", {
+        confirmButtonText: "全量导出",
+        cancelButtonText: "部分导出",
+        distinguishCancelAndClose: true,
+      })
+        .then((_) => {
+          download("/api/admin/school/index", "get", {
+            ...this.select,
+            page: 1,
+            page_size: 9999,
+            is_export: 1,
+            export_fields: Object.keys(this.form),
+          });
+        })
+        .catch((action) => {
+          if (action === "cancel" && this.$refs["table"]) {
+            this.$refs["table"].openExport();
+          }
+        });
+    },
+    calcTableHeight() {
+      let clientHeight = document.documentElement.clientHeight;
+      let cardTitle = document
+        .querySelector(".el-card__header")
+        ?.getBoundingClientRect()?.height;
+      let search = document
+        .querySelector(".vxe-toolbar")
+        ?.getBoundingClientRect()?.height;
+      let paginationHeight =
+        (document.querySelector(".el-pagination")?.getBoundingClientRect()
+          ?.height ?? 0) + 10; //分页的高度
+      let topHeight = 50; //页面 头部
+      let padding = 80;
+      let margin = 20;
+      this.tableHeight =
+        clientHeight -
+        cardTitle -
+        search -
+        paginationHeight -
+        topHeight -
+        padding -
+        margin;
+    },
+    contextMenuClickEvent({ menu, row, column }) {
+      switch (menu.code) {
+        case "copy":
+          // 示例
+          if (row && column) {
+            if (VxeUI.clipboard.copy(row[column.field])) {
+              this.$message.success("已复制到剪贴板！");
+            }
+          }
+          break;
+        case "remove":
+          if (row && column) {
+            this.destroyRowEvent(row);
+          }
+        default:
+      }
+    },
+    async detail(row) {
+      await this.$refs["ShowBatchSubSchool"].getDetail(row.id);
+      this.isShowDetail = true;
+    },
+
+    async getBatchSub() {
+      try {
+        const res = await batchSubIndex(
+          {
+            page: 1,
+            page_size: 999,
+          },
+          false
+        );
+        this.batchSub = res.data;
+      } catch (err) {
+        console.error(err);
+      }
+    },
+
+    uploadMethod(file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      window.$_uploading = true;
+      return axios
+        .post(process.env.VUE_APP_UPLOAD_API, formData, {
+          headers: {
+            Authorization: `Bearer ${getToken()}`,
+          },
+        })
+        .then((response) => {
+          window.$_uploading = false;
+          if (response.status === 200 && !response.data.code) {
+            return {
+              response: response.data,
+              name: response.data.original_name,
+              url: response.data.url,
+            };
+          } else {
+            this.$message.error("上传失败");
+          }
+        })
+        .catch((_) => {
+          window.$_uploading = false;
+        });
+    },
+    bindToolbar() {
+      this.$nextTick(() => {
+        if (this.$refs["table"] && this.$refs["toolbar"]) {
+          this.$refs["table"].connect(this.$refs["toolbar"]);
+        }
+      });
+    },
+
+    editRowEvent(row) {
+      if (this.$refs["table"]) {
+        this.$refs["table"].setEditRow(row);
+      }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs["table"]) {
+        this.$refs["table"].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs["table"].revertData(row);
+        });
+      }
+    },
+
+    async getList() {
+      this.loading = true;
+      try {
+        const res = await index(this.select, false);
+        this.tableData = res.data;
+        this.total = res.total;
+        this.loading = false;
+      } catch (err) {
+        console.error(err);
+        this.loading = false;
+      }
+    },
+
+    async saveRowEvent(row) {
+      if (window.$_uploading) {
+        this.$message.warning("文件正在上传中");
+        return;
+      }
+      try {
+        const errMap = await this.$refs["table"].validate();
+        if (errMap) {
+          throw new Error(errMap);
+        }
+        await this.$confirm("确认保存？", "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+        });
+        await this.$refs["table"].clearEdit();
+        let form = deepCopy(this.form);
+        for (const key in form) {
+          form[key] = row[key];
+        }
+
+        this.loading = true;
+        await save(form, false);
+        await this.getList();
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+    async destroyRowEvent(row) {
+      try {
+        await this.$confirm("确认删除？", "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+        });
+        this.loading = true;
+        if (row.id) {
+          await destroy(
+            {
+              id: row.id,
+            },
+            false
+          );
+          await this.getList();
+        } else {
+          console.log(row);
+          this.tableData.splice(
+            this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+            1
+          );
+        }
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-card__header {
+  padding: 6px 20px;
+}
+::v-deep .el-tag + .el-tag {
+  margin-left: 4px;
+}
+</style>
diff --git a/src/views/BatchSubSchool/components/AddBatchSubSchool.vue b/src/views/BatchSubSchool/components/AddBatchSubSchool.vue
new file mode 100644
index 0000000..e2cf22f
--- /dev/null
+++ b/src/views/BatchSubSchool/components/AddBatchSubSchool.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <el-drawer
+      :title="$route.meta.title"
+      direction="rtl"
+      size="68%"
+      :visible.sync="visible"
+      append-to-body
+      :before-close="handleClose"
+      @close="$emit('update:isShow', false)"
+    >
+      <section class="drawer-container">
+        <el-form
+          class="drawer-container__form"
+          ref="elForm"
+          :model="form"
+          :rules="rules"
+          label-position="top"
+          label-width="120px"
+          size="small"
+        >
+          <div class="form-layout">
+            <el-form-item label="归属批次详情" prop="batch_sub_id" clearable>
+              <el-cascader
+                v-model="form['batch_sub_id']"
+                style="width: 100%"
+                :options="aspirations"
+                :props="{
+                  value: 'id',
+                  label: 'name',
+                  lazy: true,
+                  emitPath: false,
+                  lazyLoad: (node, resolve) => {
+                    const { level, value } = node
+                    level === 1 ? (
+                      getBatches(value).then(res => {
+                        resolve(res.map(i => ({
+                          ...i,
+                          id: level + '-' + i.id,
+                          leaf: false
+                        })))
+                      })
+                    ) : (
+                      getSubBatches(value).then(res => {
+                        resolve(res.map(i => ({
+                          ...i,
+                          id: level + '-' + i.id,
+                          leaf: true
+                        })))
+                      })
+                    )
+                  }
+                }"
+                @input="form = Object.assign({}, form)"></el-cascader>
+<!--              <el-select-->
+<!--                v-model="form['batch_sub_id']"-->
+<!--                clearable-->
+<!--                placeholder="请填写归属批次详情"-->
+<!--                style="width: 100%"-->
+<!--              >-->
+<!--                <el-option-->
+<!--                  v-for="(option, optionIndex) in batchSub"-->
+<!--                  :key="optionIndex"-->
+<!--                  :label="option['name']"-->
+<!--                  :value="option['id']"-->
+<!--                ></el-option>-->
+<!--              </el-select>-->
+            </el-form-item>
+
+            <el-form-item label="志愿序号" prop="number">
+              <el-input
+                v-model="form['number']"
+                clearable
+                placeholder="请填写序号"
+                style="width: 100%"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item class="span2" label="专业" prop="specialty">
+              <vxe-table
+                stripe
+                :height="500"
+                :data="form['specialty']"
+                :column-config="{ resizable: true }"
+              >
+                <vxe-column type="seq" width="70" align="center">
+                  <template #header>
+                    <el-button
+                      icon="el-icon-plus"
+                      type="primary"
+                      @click="form.specialty.push({ number: '' })"
+                    ></el-button>
+                  </template>
+                </vxe-column>
+                <vxe-column
+                  field="number"
+                  min-width="140"
+                  title="名称"
+                  align="center"
+                >
+                  <template #default="{ row }">
+                    <el-input
+                      v-model="row['number']"
+                      clearable
+                      placeholder="请填写详细名称"
+                      style="width: 100%"
+                    ></el-input>
+                  </template>
+                </vxe-column>
+                <vxe-column field="operate" title="操作" min-width="120">
+                  <template #default="{ row, rowIndex }">
+                    <el-button
+                      size="small"
+                      type="danger"
+                      @click="form.specialty.splice(rowIndex, 1)"
+                    >删除</el-button
+                    >
+                  </template>
+                </vxe-column>
+              </vxe-table>
+            </el-form-item>
+          </div>
+        </el-form>
+
+        <div class="drawer-container__footer">
+          <el-button @click="reset">重 置</el-button>
+          <el-button type="primary" @click="submit" :loading="loading">{{
+            loading ? "提交中 ..." : "确 定"
+          }}</el-button>
+        </div>
+      </section>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { index as batchSubIndex } from "@/api/batch-sub/batch-sub";
+import { index as batchIndex } from "@/api/batch/batch";
+import { index as aspirationIndex } from "@/api/aspiration/aspiration";
+import { save, show } from "@/api/batch-sub-school/batch-sub-school";
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import { uploadSize } from "@/settings";
+import { formatFileSize } from "@/utils";
+
+export default {
+  name: "BatchSubSchoolDrawer",
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true,
+    },
+
+  },
+  data() {
+    return {
+      uploadSize,
+      action: process.env.VUE_APP_UPLOAD_API,
+      loading: false,
+      visible: false,
+      form: {
+        batch_sub_id: "",
+
+        number: "",
+
+        specialty: [],
+      },
+      rules: {
+        batch_sub_id: [
+          {
+            required: true,
+            message: "归属批次详情" + "必填",
+          },
+        ],
+      },
+
+      aspirations: [],
+
+    };
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal;
+    },
+    visible(newVal) {
+      this.$emit("update:isShow", newVal);
+    },
+  },
+  methods: {
+    async getSubBatches(batchId) {
+      try {
+        const res = await batchSubIndex({
+          page: 1,
+          page_size: 999,
+          'filter[0][key]': 'batch_id',
+          'filter[0][op]': 'eq',
+          'filter[0][value]': batchId.split('-')?.at(-1),
+        })
+        return res.data
+      } catch (err) {
+        console.error(err)
+        return []
+      }
+    },
+    async getBatches(aspirationId) {
+      try {
+        const res = await batchIndex({
+          page: 1,
+          page_size: 999,
+          'filter[0][key]': 'aspiration_id',
+          'filter[0][op]': 'eq',
+          'filter[0][value]': aspirationId,
+        })
+        return res.data
+      } catch (err) {
+        console.error(err)
+        return []
+      }
+    },
+    async getAspiration() {
+      try {
+        const res = await aspirationIndex({
+          page: 1,
+          page_size: 999
+        })
+        this.aspirations = res.data
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    uploadBefore(file) {
+      if (file.size > uploadSize) {
+        this.$message({
+          type: "warning",
+          message: `上传图片大小超过${formatFileSize(uploadSize)}！`,
+        });
+        return false;
+      }
+      window.$_uploading = true;
+    },
+    uploadSuccess(response, file, fileList, fieldName) {
+      window.$_uploading = false;
+      fileList.forEach((file) => {
+        if (file.response?.data && !file.response?.code) {
+          file.response = file.response.data;
+        }
+      });
+      this.form[fieldName] = fileList;
+    },
+    uploadRemove(file, fileList, fieldName) {
+      this.form[fieldName] = fileList;
+    },
+    uploadError(err, file, fileList, fieldName) {
+      window.$_uploading = false;
+      this.form[fieldName] = fileList;
+      this.$message({
+        type: "warning",
+        message: err,
+      });
+    },
+    formatFileSize,
+    getToken,
+    handleClose(done) {
+      this.$confirm("确定关闭窗口？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+
+    reset() {
+      this.form = {
+        batch_sub_id: "",
+
+        number: "",
+
+        specialty: [],
+      };
+      this.$refs["elForm"].resetFields();
+    },
+    submit() {
+      if (window.$_uploading) {
+        this.$message.warning("文件正在上传中");
+        return;
+      }
+
+      this.$refs["elForm"].validate(async (valid) => {
+        if (valid) {
+          this.loading = true;
+          try {
+            this.form.batch_sub_id = this.form.batch_sub_id.split('-')?.at(-1)
+            await save(this.form);
+            this.$message.success("新增成功");
+            this.$emit("refresh");
+            this.$emit("update:isShow", false);
+            this.loading = false;
+            this.reset();
+          } catch (err) {
+            this.loading = false;
+          }
+        }
+      });
+    },
+  },
+  created() {
+    this.getAspiration()
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.span2 {
+  grid-column: span 2;
+}
+::v-deep .el-form-item > * {
+  max-width: 100%;
+}
+.form-layout {
+  display: grid;
+  grid-gap: 2%;
+  grid-template-columns: repeat(2, 1fr);
+}
+.drawer-container {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+
+  &__form {
+    flex: 1;
+    overflow-y: scroll;
+  }
+  &__footer {
+    margin-top: 20px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/BatchSubSchool/components/ShowBatchSubSchool.vue b/src/views/BatchSubSchool/components/ShowBatchSubSchool.vue
new file mode 100644
index 0000000..f36ae88
--- /dev/null
+++ b/src/views/BatchSubSchool/components/ShowBatchSubSchool.vue
@@ -0,0 +1,109 @@
+
+<template>
+    <div>
+        <el-drawer
+                :title="$route.meta.title"
+                direction="rtl"
+                size="68%"
+                :visible.sync="visible"
+                append-to-body
+                @close="$emit('update:isShow',false)">
+            <section class="drawer-container">
+                <el-descriptions class="drawer-container__desc" size="small" border ref="elDesc" :column="2" direction="vertical" :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }">
+                    
+                    <el-descriptions-item label="归属批次详情">
+                        {{ batchSub.find(i => i['id'] === form['batch_sub_id']) ? batchSub.find(i => i['id'] === form['batch_sub_id'])['name'] : '' }}
+                    </el-descriptions-item>
+                    
+                    <el-descriptions-item label="序号">
+                        {{ typeof form['number'] === 'number' ? form['number'].toFixed(2) : form['number'] }}
+                    </el-descriptions-item>
+                    
+                    <el-descriptions-item label="专业">
+                        {{ form['specialty'] }}
+                    </el-descriptions-item>
+                    
+                </el-descriptions>
+            </section>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+  import { show } from "@/api/batch-sub-school/batch-sub-school";
+
+  export default {
+    name: "BatchSubSchoolShow",
+    props: {
+      isShow: {
+        type: Boolean,
+        default: false,
+        required: true
+      },
+  
+  batchSub : {
+    type: Array,
+  default: () => []
+  },
+  
+  },
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      form: {
+      
+      batch_sub_id: '',
+      
+      number: '',
+      
+      specialty: '',
+      
+  },
+  }
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    },
+  },
+  methods: {
+    async getDetail(id) {
+      try {
+        const detail = await show({
+          id
+        })
+        for (let key in this.form) {
+          if (detail.hasOwnProperty(key)) {
+            this.form[key] = detail[key]
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .span2 {
+    grid-column: span 2;
+  }
+  ::v-deep .el-form-item > * {
+    max-width: 100%;
+  }
+  .drawer-container {
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      flex: 1;
+    }
+  }
+</style>