From 9003ef9c1c94aeec80eed8fbc4e24a730eb18841 Mon Sep 17 00:00:00 2001
From: yaojian <1161995598@qq.com>
Date: Wed, 11 Mar 2026 14:52:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AC=E7=8F=AD=E5=BC=82=E5=8A=A8=E8=A7=84?=
 =?UTF-8?q?=E5=88=99+=E5=AD=A6=E7=94=9F=E5=B7=A1=E6=A3=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/basic/basicstudent.ts                 |   2 +-
 src/api/stuwork/stuturnoverrule.ts            |  83 +++++
 .../basic/basicstudent/queryStuindex.vue      |  14 +-
 src/views/stuwork/stuturnoverrule/form.vue    | 271 ++++++++++++++
 src/views/stuwork/stuturnoverrule/index.vue   | 337 ++++++++++++++++++
 5 files changed, 702 insertions(+), 5 deletions(-)
 create mode 100644 src/api/stuwork/stuturnoverrule.ts
 create mode 100644 src/views/stuwork/stuturnoverrule/form.vue
 create mode 100644 src/views/stuwork/stuturnoverrule/index.vue

diff --git a/src/api/basic/basicstudent.ts b/src/api/basic/basicstudent.ts
index dca1daa..9aadd91 100644
--- a/src/api/basic/basicstudent.ts
+++ b/src/api/basic/basicstudent.ts
@@ -460,7 +460,7 @@ export const queryStuBaseByNo = (obj: string | number) => {
  */
 export const queryStuindex = (query?: any) => {
 	return request({
-		url: '/basic/basicstudent/queryStuindex',
+		url: '/basic/basicstudentinfo/queryXJDataByPage',
 		method: 'get',
 		params: query,
 	});
diff --git a/src/api/stuwork/stuturnoverrule.ts b/src/api/stuwork/stuturnoverrule.ts
new file mode 100644
index 0000000..14453d1
--- /dev/null
+++ b/src/api/stuwork/stuturnoverrule.ts
@@ -0,0 +1,83 @@
+import request from '/@/utils/request';
+
+/**
+ * 分页查询异动规则配置列表
+ * @param query
+ */
+export const fetchList = (query?: any) => {
+	return request({
+		url: '/stuwork/stuturnoverrule/page',
+		method: 'get',
+		params: query,
+	});
+};
+
+/**
+ * 新增异动规则配置
+ * @param data
+ */
+export const addObj = (data: any) => {
+	return request({
+		url: '/stuwork/stuturnoverrule',
+		method: 'post',
+		data,
+	});
+};
+
+/**
+ * 获取详情
+ * @param id
+ */
+export const getDetail = (id: string) => {
+	return request({
+		url: '/stuwork/stuturnoverrule/detail',
+		method: 'get',
+		params: { id },
+	});
+};
+
+/**
+ * 编辑异动规则配置
+ * @param data
+ */
+export const editObj = (data: any) => {
+	return request({
+		url: '/stuwork/stuturnoverrule/edit',
+		method: 'post',
+		data,
+	});
+};
+
+/**
+ * 删除异动规则配置
+ * @param ids
+ */
+export const delObj = (ids: string[]) => {
+	return request({
+		url: '/stuwork/stuturnoverrule/delete',
+		method: 'post',
+		data: ids,
+	});
+};
+
+/**
+ * 获取所有启用的异动规则
+ */
+export const getAllActiveRules = () => {
+	return request({
+		url: '/stuwork/stuturnoverrule/getAllActiveRules',
+		method: 'get',
+	});
+};
+
+/**
+ * 根据异动类型获取规则
+ * @param turnoverType 异动类型
+ */
+export const getRulesByTurnoverType = (turnoverType: string) => {
+	return request({
+		url: '/stuwork/stuturnoverrule/getRulesByTurnoverType',
+		method: 'get',
+		params: { turnoverType },
+	});
+};
\ No newline at end of file
diff --git a/src/views/basic/basicstudent/queryStuindex.vue b/src/views/basic/basicstudent/queryStuindex.vue
index 91c61f7..cda1147 100644
--- a/src/views/basic/basicstudent/queryStuindex.vue
+++ b/src/views/basic/basicstudent/queryStuindex.vue
@@ -168,7 +168,10 @@
 				</el-table-column>
 			</el-table>
 
-			<pagination v-show="state.total > 0" :total="state.total" v-model:page="state.page" v-model:limit="state.limit" @pagination="getDataList" />
+			<!-- 分页 -->
+			<div class="pagination-wrapper">
+				<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+			</div>
 		</el-card>
 	</div>
 </template>
@@ -231,16 +234,14 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 	createdIsNeed: true,
 });
 
-const { getDataList, sortChangeHandle, tableStyle } = useTable(state);
+const { getDataList, sortChangeHandle, sizeChangeHandle, currentChangeHandle, tableStyle } = useTable(state);
 
 const handleSearch = () => {
-	state.page = 1;
 	getDataList();
 };
 
 const handleReset = () => {
 	searchFormRef.value?.resetFields();
-	state.page = 1;
 	getDataList();
 };
 </script>
@@ -252,4 +253,9 @@ const handleReset = () => {
 .mb12 {
 	margin-bottom: 12px;
 }
+.pagination-wrapper {
+	margin-top: 20px;
+	display: flex;
+	justify-content: flex-end;
+}
 </style>
diff --git a/src/views/stuwork/stuturnoverrule/form.vue b/src/views/stuwork/stuturnoverrule/form.vue
new file mode 100644
index 0000000..ad89b7a
--- /dev/null
+++ b/src/views/stuwork/stuturnoverrule/form.vue
@@ -0,0 +1,271 @@
+<template>
+  <el-dialog
+    :title="form.id ? '编辑异动规则' : '新增异动规则'"
+    v-model="visible"
+    :close-on-click-modal="false"
+    draggable
+    width="600px">
+    <el-form
+      ref="dataFormRef"
+      :model="form"
+      :rules="dataRules"
+      label-width="120px"
+      v-loading="loading">
+      <el-row :gutter="24">
+        <el-col :span="24" class="mb20">
+          <el-form-item label="规则名称" prop="ruleName">
+            <el-input
+              v-model="form.ruleName"
+              placeholder="请输入规则名称"
+              clearable
+              maxlength="100" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="异动类型" prop="turnoverType">
+            <el-select
+              v-model="form.turnoverType"
+              placeholder="请选择异动类型"
+              clearable
+              style="width: 100%">
+              <el-option
+                v-for="item in turnoverTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="最短间隔" prop="minIntervalDays">
+            <el-input-number
+              v-model="form.minIntervalDays"
+              :min="0"
+              :max="365"
+              placeholder="天"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="最长持续" prop="maxDurationDays">
+            <el-input-number
+              v-model="form.maxDurationDays"
+              :min="0"
+              :max="3650"
+              placeholder="天"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="提醒天数" prop="remindDays">
+            <el-input-number
+              v-model="form.remindDays"
+              :min="0"
+              :max="365"
+              placeholder="天"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="排序" prop="sort">
+            <el-input-number
+              v-model="form.sort"
+              :min="0"
+              :max="999"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="是否启用" prop="isActive">
+            <el-switch
+              v-model="form.isActive"
+              active-value="1"
+              inactive-value="0"
+              active-text="启用"
+              inactive-text="禁用" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="规则描述" prop="ruleDescription">
+            <el-input
+              v-model="form.ruleDescription"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入规则描述"
+              maxlength="500"
+              show-word-limit />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="备注" prop="remarks">
+            <el-input
+              v-model="form.remarks"
+              type="textarea"
+              :rows="2"
+              placeholder="请输入备注"
+              maxlength="200" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="StuTurnoverRuleFormDialog">
+import { ref, reactive, nextTick, onMounted } from 'vue'
+import { useMessage } from '/@/hooks/message'
+import { addObj, editObj, getDetail } from '/@/api/stuwork/stuturnoverrule'
+import { getDicts } from '/@/api/admin/dict'
+
+const emit = defineEmits(['refresh'])
+
+// 定义变量内容
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+const turnoverTypeList = ref<any[]>([])
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  ruleName: '',
+  turnoverType: '',
+  minIntervalDays: 0,
+  maxDurationDays: 0,
+  remindDays: 0,
+  ruleDescription: '',
+  isActive: '1',
+  sort: 0,
+  remarks: ''
+})
+
+// 定义校验规则
+const dataRules = reactive({
+  ruleName: [
+    { required: true, message: '请输入规则名称', trigger: 'blur' }
+  ],
+  turnoverType: [
+    { required: true, message: '请选择异动类型', trigger: 'change' }
+  ]
+})
+
+// 打开弹窗
+const openDialog = async (row?: any) => {
+  visible.value = true
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    form.id = ''
+    form.ruleName = ''
+    form.turnoverType = ''
+    form.minIntervalDays = 0
+    form.maxDurationDays = 0
+    form.remindDays = 0
+    form.ruleDescription = ''
+    form.isActive = '1'
+    form.sort = 0
+    form.remarks = ''
+
+    // 编辑时填充数据
+    if (row?.id) {
+      loading.value = true
+      getDetail(row.id).then((res: any) => {
+        if (res.data) {
+          form.id = res.data.id
+          form.ruleName = res.data.ruleName || ''
+          form.turnoverType = res.data.turnoverType || ''
+          form.minIntervalDays = res.data.minIntervalDays || 0
+          form.maxDurationDays = res.data.maxDurationDays || 0
+          form.remindDays = res.data.remindDays || 0
+          form.ruleDescription = res.data.ruleDescription || ''
+          form.isActive = res.data.isActive || '1'
+          form.sort = res.data.sort || 0
+          form.remarks = res.data.remarks || ''
+        }
+      }).finally(() => {
+        loading.value = false
+      })
+    }
+  })
+}
+
+// 提交表单
+const onSubmit = async () => {
+  if (!dataFormRef.value) return
+
+  await dataFormRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+
+    loading.value = true
+    try {
+      const submitData = {
+        id: form.id || undefined,
+        ruleName: form.ruleName,
+        turnoverType: form.turnoverType,
+        minIntervalDays: form.minIntervalDays,
+        maxDurationDays: form.maxDurationDays,
+        remindDays: form.remindDays,
+        ruleDescription: form.ruleDescription,
+        isActive: form.isActive,
+        sort: form.sort,
+        remarks: form.remarks
+      }
+
+      if (form.id) {
+        await editObj(submitData)
+        useMessage().success('编辑成功')
+      } else {
+        await addObj(submitData)
+        useMessage().success('新增成功')
+      }
+      visible.value = false
+      emit('refresh')
+    } catch (err: any) {
+      useMessage().error(err.msg || (form.id ? '编辑失败' : '新增失败'))
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+// 获取异动类型字典
+const getTurnoverTypeDict = async () => {
+  try {
+    const res = await getDicts('turnover_type')
+    if (res.data) {
+      turnoverTypeList.value = Array.isArray(res.data) ? res.data.map((item: any) => ({
+        label: item.label || item.dictLabel || item.name,
+        value: item.value || item.dictValue || item.code
+      })) : []
+    }
+  } catch (err) {
+    turnoverTypeList.value = []
+  }
+}
+
+// 初始化
+onMounted(() => {
+  getTurnoverTypeDict()
+})
+
+// 暴露方法给父组件
+defineExpose({
+  openDialog
+})
+</script>
\ No newline at end of file
diff --git a/src/views/stuwork/stuturnoverrule/index.vue b/src/views/stuwork/stuturnoverrule/index.vue
new file mode 100644
index 0000000..9ed70be
--- /dev/null
+++ b/src/views/stuwork/stuturnoverrule/index.vue
@@ -0,0 +1,337 @@
+<template>
+  <div class="modern-page-container">
+    <div class="page-wrapper">
+      <!-- 搜索表单卡片 -->
+      <el-card v-show="showSearch" class="search-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Search /></el-icon>
+              筛选条件
+            </span>
+          </div>
+        </template>
+        <el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
+          <el-form-item label="规则名称" prop="ruleName">
+            <el-input
+              v-model="searchForm.ruleName"
+              placeholder="请输入规则名称"
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="异动类型" prop="turnoverType">
+            <el-select
+              v-model="searchForm.turnoverType"
+              placeholder="请选择异动类型"
+              clearable
+              style="width: 200px">
+              <el-option
+                v-for="item in turnoverTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="是否启用" prop="isActive">
+            <el-select
+              v-model="searchForm.isActive"
+              placeholder="请选择状态"
+              clearable
+              style="width: 200px">
+              <el-option label="启用" value="1" />
+              <el-option label="禁用" value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
+            <el-button icon="Refresh" @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <!-- 内容卡片 -->
+      <el-card class="content-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Setting /></el-icon>
+              异动规则配置列表
+            </span>
+            <div class="header-actions">
+              <el-button
+                icon="Plus"
+                type="primary"
+                v-auth="'stuwork_stuturnoverrule_add'"
+                @click="formDialogRef.openDialog()">
+                新增规则
+              </el-button>
+              <right-toolbar
+                v-model:showSearch="showSearch"
+                class="ml10"
+                @queryTable="getDataList">
+                <TableColumnControl
+                  ref="columnControlRef"
+                  :columns="tableColumns"
+                  v-model="visibleColumns"
+                  trigger-type="default"
+                  trigger-circle
+                  @change="handleColumnChange"
+                  @order-change="handleColumnOrderChange"
+                >
+                  <template #trigger>
+                    <el-tooltip class="item" effect="dark" content="列设置" placement="top">
+                      <el-button circle style="margin-left: 0;">
+                        <el-icon><Menu /></el-icon>
+                      </el-button>
+                    </el-tooltip>
+                  </template>
+                </TableColumnControl>
+              </right-toolbar>
+            </div>
+          </div>
+        </template>
+
+        <!-- 表格 -->
+        <el-table
+          :data="state.dataList"
+          v-loading="state.loading"
+          stripe
+          :cell-style="tableStyle.cellStyle"
+          :header-cell-style="tableStyle.headerCellStyle"
+          class="modern-table">
+          <el-table-column type="index" label="序号" width="70" align="center">
+            <template #header>
+              <el-icon><List /></el-icon>
+            </template>
+            <template #default="{ $index }">
+              {{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
+            </template>
+          </el-table-column>
+          <template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
+            <el-table-column
+              v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
+              :prop="col.prop"
+              :label="col.label"
+              show-overflow-tooltip
+              align="center"
+              :min-width="col.minWidth"
+              :width="col.width">
+              <template #header>
+                <el-icon><component :is="columnConfigMap[col.prop]?.icon || Document" /></el-icon>
+                <span style="margin-left: 4px">{{ col.label }}</span>
+              </template>
+              <!-- 异动类型列特殊模板 -->
+              <template v-if="col.prop === 'turnoverType'" #default="scope">
+                <el-tag size="small" type="warning" effect="plain">
+                  {{ formatTurnoverType(scope.row.turnoverType) }}
+                </el-tag>
+              </template>
+              <!-- 是否启用列特殊模板 -->
+              <template v-else-if="col.prop === 'isActive'" #default="scope">
+                <el-tag size="small" :type="scope.row.isActive === '1' ? 'success' : 'danger'" effect="plain">
+                  {{ scope.row.isActive === '1' ? '启用' : '禁用' }}
+                </el-tag>
+              </template>
+              <!-- 天数相关列 -->
+              <template v-else-if="col.prop === 'minIntervalDays'" #default="scope">
+                <span>{{ scope.row.minIntervalDays ?? '-' }} 天</span>
+              </template>
+              <template v-else-if="col.prop === 'maxDurationDays'" #default="scope">
+                <span>{{ scope.row.maxDurationDays ?? '-' }} 天</span>
+              </template>
+              <template v-else-if="col.prop === 'remindDays'" #default="scope">
+                <span>{{ scope.row.remindDays ?? '-' }} 天</span>
+              </template>
+            </el-table-column>
+          </template>
+          <el-table-column label="操作" width="160" align="center" fixed="right">
+            <template #header>
+              <el-icon><Setting /></el-icon>
+              <span style="margin-left: 4px">操作</span>
+            </template>
+            <template #default="scope">
+              <el-button
+                icon="Edit"
+                link
+                type="primary"
+                v-auth="'stuwork_stuturnoverrule_edit'"
+                @click="handleEdit(scope.row)">
+                编辑
+              </el-button>
+              <el-button
+                icon="Delete"
+                link
+                type="danger"
+                v-auth="'stuwork_stuturnoverrule_del'"
+                @click="handleDelete(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-wrapper">
+          <pagination
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            v-bind="state.pagination" />
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 新增/编辑表单弹窗 -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList" />
+  </div>
+</template>
+
+<script setup lang="ts" name="StuTurnoverRule">
+import { reactive, ref, onMounted, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/stuwork/stuturnoverrule";
+import { getDicts } from "/@/api/admin/dict";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import TableColumnControl from '/@/components/TableColumnControl/index.vue'
+import FormDialog from './form.vue'
+import { List, Setting, Document, Collection, Menu, Search, Clock } from '@element-plus/icons-vue'
+import { useTableColumnControl } from '/@/hooks/tableColumn'
+
+// 定义变量内容
+const route = useRoute()
+const searchFormRef = ref()
+const columnControlRef = ref<any>()
+const showSearch = ref(true)
+const turnoverTypeList = ref<any[]>([])
+const formDialogRef = ref()
+
+// 表格列配置
+const tableColumns = [
+  { prop: 'ruleName', label: '规则名称', minWidth: 150 },
+  { prop: 'turnoverType', label: '异动类型', width: 120 },
+  { prop: 'minIntervalDays', label: '最短间隔', width: 100 },
+  { prop: 'maxDurationDays', label: '最长持续', width: 100 },
+  { prop: 'remindDays', label: '提醒天数', width: 100 },
+  { prop: 'sort', label: '排序', width: 80 },
+  { prop: 'isActive', label: '状态', width: 80 },
+  { prop: 'ruleDescription', label: '规则描述', minWidth: 200 },
+  { prop: 'remarks', label: '备注', minWidth: 150 }
+]
+
+// 列配置映射（用于图标显示）
+const columnConfigMap: Record<string, { icon: any }> = {
+  ruleName: { icon: Document },
+  turnoverType: { icon: Collection },
+  minIntervalDays: { icon: Clock },
+  maxDurationDays: { icon: Clock },
+  remindDays: { icon: Clock },
+  sort: { icon: Setting },
+  isActive: { icon: Setting },
+  ruleDescription: { icon: Document },
+  remarks: { icon: Document }
+}
+
+// 使用表格列控制hook
+const {
+  visibleColumns,
+  visibleColumnsSorted,
+  checkColumnVisible,
+  handleColumnChange,
+  handleColumnOrderChange
+} = useTableColumnControl(tableColumns, route.path)
+
+// 搜索表单
+const searchForm = reactive({
+  ruleName: '',
+  turnoverType: '',
+  isActive: ''
+})
+
+// 配置 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: searchForm,
+  pageList: fetchList,
+  props: {
+    item: 'records',
+    totalCount: 'total'
+  },
+  createdIsNeed: true
+})
+
+// table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  tableStyle
+} = useTable(state)
+
+// 格式化异动类型
+const formatTurnoverType = (value: string) => {
+  if (!value) return '-'
+  const item = turnoverTypeList.value.find((item: any) => item.value === value)
+  return item ? item.label : value
+}
+
+// 查询
+const handleSearch = () => {
+  getDataList()
+}
+
+// 重置
+const handleReset = () => {
+  searchFormRef.value?.resetFields()
+  searchForm.ruleName = ''
+  searchForm.turnoverType = ''
+  searchForm.isActive = ''
+  getDataList()
+}
+
+// 编辑
+const handleEdit = (row: any) => {
+  formDialogRef.value?.openDialog(row)
+}
+
+// 删除
+const handleDelete = async (row: any) => {
+  try {
+    await useMessageBox().confirm('确定要删除该异动规则吗？')
+    await delObj([row.id])
+    useMessage().success('删除成功')
+    getDataList()
+  } catch (err: any) {
+    if (err !== 'cancel') {
+      useMessage().error(err.msg || '删除失败')
+    }
+  }
+}
+
+// 获取异动类型字典
+const getTurnoverTypeDict = async () => {
+  try {
+    const res = await getDicts('turnover_type')
+    if (res.data) {
+      turnoverTypeList.value = Array.isArray(res.data) ? res.data.map((item: any) => ({
+        label: item.label || item.dictLabel || item.name,
+        value: item.value || item.dictValue || item.code
+      })) : []
+    }
+  } catch (err) {
+    turnoverTypeList.value = []
+  }
+}
+
+// 初始化
+onMounted(() => {
+  getTurnoverTypeDict()
+  nextTick(() => {
+    if (visibleColumns.value.length === 0) {
+    }
+  })
+})
+</script>
+
+<style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
+</style>
\ No newline at end of file