tijaodaim

src/views/finance/purchasingrequisition/form.vue

@@ -21,43 +21,85 @@
         ref="formRef" 
         :model="dataForm" 
         :rules="dataRules" 
-        :label-width="isView ? '120px' : '140px'"
+        :label-width="isView ? '160px' : '140px'"
         :class="{ 'view-form': isView }">
         
         <!-- 第一步：基本信息 -->
         <div v-show="currentStep === 0 || isView">
-          <el-row :gutter="isView ? 16 : 24" v-if="isView">
-            <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+          <!-- 查看模式：第一行 - 申请单编号、需求部门、采购项目名称 -->
+          <el-row v-if="isView" :gutter="16">
+            <el-col :span="8" class="mb16">
               <el-form-item label="申请单编号" prop="purchaseNo">
                 <span class="view-text">{{ dataForm.purchaseNo || '-' }}</span>
               </el-form-item>
             </el-col>
-            <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+            <el-col :span="8" class="mb16">
               <el-form-item label="需求部门" prop="deptName">
                 <span class="view-text">{{ dataForm.deptName || '-' }}</span>
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="isView ? 16 : 24">
-            <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+            <el-col :span="8" class="mb16">
+              <el-form-item label="采购项目名称" prop="projectName">
+                <span class="view-text">{{ dataForm.projectName || '-' }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <!-- 查看模式：第二行 - 填报日期、资金来源、预算金额 -->
+          <el-row v-if="isView" :gutter="16">
+            <el-col :span="8" class="mb16">
+              <el-form-item label="填报日期" prop="applyDate">
+                <span class="view-text">{{ dataForm.applyDate || '-' }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" class="mb16">
+              <el-form-item label="资金来源" prop="fundSource">
+                <span class="view-text">{{ getDictLabel(fundSourceList, dataForm.fundSource) || '-' }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" class="mb16">
+              <el-form-item label="预算金额" prop="budget">
+                <span class="view-text">{{ dataForm.budget ? Number(dataForm.budget).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '-' }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <!-- 查看模式：第三行 - 是否集采、是否特殊情况、品目编码 -->
+          <el-row v-if="isView" :gutter="16">
+            <el-col :span="8" class="mb16">
+              <el-form-item label="是否集采" prop="isCentralized">
+                <el-tag v-if="dataForm.isCentralized === '1'" type="success">是</el-tag>
+                <el-tag v-else-if="dataForm.isCentralized === '0'" type="info">否</el-tag>
+                <span v-else class="view-text">-</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" class="mb16">
+              <el-form-item label="是否特殊情况" prop="isSpecial">
+                <el-tag v-if="String(dataForm.isSpecial) === '1'" type="warning">紧急</el-tag>
+                <el-tag v-else-if="String(dataForm.isSpecial) === '2'" type="danger">单一</el-tag>
+                <el-tag v-else-if="String(dataForm.isSpecial) === '3'" type="info">进口</el-tag>
+                <el-tag v-else-if="String(dataForm.isSpecial) === '0'" type="info">否</el-tag>
+                <span v-else class="view-text">-</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" class="mb16">
+              <el-form-item label="品目编码" prop="categoryCode">
+                <span class="view-text">{{ getCategoryDisplayText() }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          
+          <!-- 编辑模式：保持原有布局 -->
+          <el-row v-if="!isView" :gutter="24">
+            <el-col :span="12" class="mb20">
               <el-form-item label="采购项目名称" prop="projectName">
-                <template v-if="isView">
-                  <span class="view-text">{{ dataForm.projectName || '-' }}</span>
-                </template>
                 <el-input 
-                  v-else
                   v-model="dataForm.projectName" 
                   placeholder="请输入采购项目名称" 
                   clearable />
               </el-form-item>
             </el-col>
-            <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+            <el-col :span="12" class="mb20">
               <el-form-item label="填报日期" prop="applyDate">
-                <template v-if="isView">
-                  <span class="view-text">{{ dataForm.applyDate || '-' }}</span>
-                </template>
                 <el-date-picker
-                  v-else
                   v-model="dataForm.applyDate"
                   type="date"
                   placeholder="请选择填报日期"
@@ -66,13 +108,9 @@
                   style="width: 100%" />
               </el-form-item>
             </el-col>
-            <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+            <el-col :span="12" class="mb20">
               <el-form-item label="资金来源" prop="fundSource">
-                <template v-if="isView">
-                  <span class="view-text">{{ getDictLabel(fundSourceList, dataForm.fundSource) || '-' }}</span>
-                </template>
                 <el-select 
-                  v-else
                   v-model="dataForm.fundSource" 
                   placeholder="请选择资金来源" 
                   clearable
@@ -84,12 +122,10 @@
                     :value="item.value" />
                 </el-select>
               </el-form-item>
-            </el-col>  <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+            </el-col>
+            <el-col :span="12" class="mb20">
               <el-form-item label="预算金额" prop="budget">
-                <template v-if="isView">
-                  <span class="view-text">{{ dataForm.budget ? Number(dataForm.budget).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '-' }}</span>
-                </template>
-                <div v-else class="budget-input-group">
+                <div class="budget-input-group">
                   <el-input-number
                     v-model="budgetInputValue"
                     :min="0.01"
@@ -109,18 +145,9 @@
                 </div>
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="isView ? 16 : 24">
-          
-            <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+            <el-col :span="12" class="mb20">
               <el-form-item label="是否集采" prop="isCentralized">
-                <template v-if="isView">
-                  <el-tag v-if="dataForm.isCentralized === '1'" type="success">是</el-tag>
-                  <el-tag v-else-if="dataForm.isCentralized === '0'" type="info">否</el-tag>
-                  <span v-else class="view-text">-</span>
-                </template>
                 <el-select 
-                  v-else
                   v-model="dataForm.isCentralized" 
                   placeholder="请选择是否集采" 
                   clearable
@@ -133,17 +160,9 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="isView ? 8 : 12" :class="isView ? 'mb16' : 'mb20'">
+            <el-col :span="12" class="mb20">
               <el-form-item label="是否特殊情况" prop="isSpecial">
-                <template v-if="isView">
-                  <el-tag v-if="String(dataForm.isSpecial) === '1'" type="warning">紧急</el-tag>
-                  <el-tag v-else-if="String(dataForm.isSpecial) === '2'" type="danger">单一</el-tag>
-                  <el-tag v-else-if="String(dataForm.isSpecial) === '3'" type="info">进口</el-tag>
-                  <el-tag v-else-if="String(dataForm.isSpecial) === '0'" type="info">否</el-tag>
-                  <span v-else class="view-text">-</span>
-                </template>
                 <el-select 
-                  v-else
                   v-model="dataForm.isSpecial" 
                   placeholder="请选择是否特殊情况" 
                   clearable
@@ -156,15 +175,9 @@
                 </el-select>
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="isView ? 16 : 24">
-            <el-col :span="24" :class="isView ? 'mb16' : 'mb20'">
+            <el-col :span="24" class="mb20">
               <el-form-item label="品目编码" prop="categoryCode">
-                <template v-if="isView">
-                  <span class="view-text">{{ getCategoryDisplayText() }}</span>
-                </template>
                 <el-cascader
-                  v-else
                   v-model="categoryCodePath"
                   :options="categoryTreeData"
                   :props="{ value: 'code', label: 'name', children: 'children', checkStrictly: true }"
@@ -399,9 +412,9 @@
                 </el-form-item>
               </template>
 
-              <!-- 其他方式（货物类） -->
+              <!-- 其他方式 -->
               <el-form-item 
-                v-if="dataForm.entrustCenterType === 'other' && isGoodsCategory"
+                v-if="dataForm.entrustCenterType === 'other'"
                 label="采购需求填报模板" 
                 prop="purchaseRequirementTemplate" 
                 :class="isView ? 'mb16' : 'mb20'">
@@ -976,6 +989,9 @@ const visible = ref(false);
 const loading = ref(false);
 const dialogType = ref<'add' | 'edit' | 'view'>('add');
 
+// 文件ID到标题的映射（用于查看模式显示文件标题）
+const fileTitleMap = ref<Record<string, string>>({});
+
 // 预算金额输入相关
 const budgetUnit = ref<'yuan' | 'thousand' | 'wan'>('yuan');
 const budgetInputValue = ref<number | null>(null);
@@ -1598,6 +1614,7 @@ const openDialog = async (type: 'add' | 'edit' | 'view', rowData?: any) => {
   
   // 重置表单
   categoryCodePath.value = []; // 重置级联选择器路径
+  fileTitleMap.value = {}; // 清空文件标题映射
   Object.assign(dataForm, {
     id: '',
     projectName: '',
@@ -1665,14 +1682,17 @@ const openDialog = async (type: 'add' | 'edit' | 'view', rowData?: any) => {
       loading.value = true;
       Promise.all([
         getObj(rowData.id),
-        type === 'view' ? getApplyFiles(rowData.id).catch(() => ({ data: [] })) : Promise.resolve({ data: [] })
+        (type === 'view' || type === 'edit') ? getApplyFiles(rowData.id).catch(() => ({ data: [] })) : Promise.resolve({ data: [] })
       ])
         .then(([detailRes, filesRes]) => {
           Object.assign(dataForm, detailRes.data || {});
           
-          // 查看模式下，根据文件类型分类文件
-          if (type === 'view' && filesRes.data && Array.isArray(filesRes.data)) {
-            const filesByType: Record<string, string[]> = {};
+          // 查看模式和编辑模式下，根据文件类型分类文件
+          if ((type === 'view' || type === 'edit') && filesRes.data && Array.isArray(filesRes.data)) {
+            const filesByType: Record<string, any[]> = {};
+            
+            // 清空文件标题映射
+            fileTitleMap.value = {};
             
             // 按fileType分类文件
             filesRes.data.forEach((file: any) => {
@@ -1684,19 +1704,41 @@ const openDialog = async (type: 'add' | 'edit' | 'view', rowData?: any) => {
                 // 构建文件URL或ID
                 const fileId = file.id || file.fileId || file.file_id;
                 const fileUrl = file.url || file.fileUrl || file.file_url;
+                const fileTitle = file.fileTitle || file.file_title || '';
+                
+                // 保存文件ID到标题的映射
+                if (fileId && fileTitle) {
+                  fileTitleMap.value[fileId] = fileTitle;
+                }
+                
+                // 构建文件对象，包含ID、URL和标题
+                const fileObj: any = {
+                  id: fileId,
+                  url: fileUrl,
+                  fileTitle: fileTitle
+                };
+                
                 if (fileId) {
-                  filesByType[fileType].push(fileId);
+                  filesByType[fileType].push(fileObj);
                 } else if (fileUrl) {
-                  filesByType[fileType].push(fileUrl);
+                  filesByType[fileType].push(fileObj);
                 }
               }
             });
             
-            // 将文件分配到对应字段
+            // 将文件分配到对应字段（查看模式和编辑模式下存储为对象数组，包含标题信息）
             Object.keys(FILE_TYPE_MAP).forEach(field => {
               const fileType = FILE_TYPE_MAP[field];
               if (filesByType[fileType] && filesByType[fileType].length > 0) {
-                (dataForm as any)[field] = filesByType[fileType].join(',');
+                // 将文件对象数组转换为包含name字段的对象数组（name字段为fileTitle）
+                const fileObjects = filesByType[fileType].map((file: any) => ({
+                  id: file.id,
+                  url: file.url || '',
+                  name: file.fileTitle || '', // 使用fileTitle作为name，这样UploadFile组件会显示标题
+                  fileTitle: file.fileTitle || ''
+                }));
+                // 在查看模式和编辑模式下，直接存储对象数组
+                (dataForm as any)[field] = fileObjects;
               }
             });
           }
@@ -1909,12 +1951,20 @@ const getPurchaseTypeUnionDict = async () => {
   }
 };
 
-// 处理文件ID字符串转数组
-const getFileIdsArray = (fileIds: string | string[]): string[] => {
+// 处理文件ID字符串转数组（支持字符串、字符串数组和对象数组）
+const getFileIdsArray = (fileIds: string | string[] | any[]): string[] => {
   if (!fileIds) return [];
+  
+  // 如果是对象数组（查看模式），提取ID
+  if (Array.isArray(fileIds) && fileIds.length > 0 && typeof fileIds[0] === 'object') {
+    return fileIds.map((file: any) => file.id || file.fileId || '').filter((id: string) => id);
+  }
+  
+  // 如果是字符串数组，直接返回
   if (Array.isArray(fileIds)) return fileIds;
   
-  const urls = fileIds.split(',').filter(url => url.trim());
+  // 如果是字符串，按逗号分割并处理
+  const urls = fileIds.split(',').filter((url: string) => url.trim());
   const ids: string[] = [];
   
   urls.forEach(url => {
@@ -2111,6 +2161,12 @@ defineExpose({
 .view-form :deep(.el-form-item__label) {
   font-weight: bold;
   color: #606266;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+  padding-right: 12px;
+  flex-shrink: 0;
 }
 
 /* 所有表单label加粗 */
@@ -2141,6 +2197,30 @@ defineExpose({
   margin-bottom: 16px;
 }
 
+/* 查看模式下表单项布局优化 */
+.view-form :deep(.el-form-item) {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.view-form :deep(.el-form-item__label) {
+  flex-shrink: 0;
+  min-width: 160px;
+  max-width: 200px;
+  text-align: right;
+  padding-right: 12px;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.view-form :deep(.el-form-item__content) {
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
 /* 预算金额输入组样式 - 并排显示，无缝连接 */
 .budget-input-group {
   display: flex;

src/views/finance/purchasingrequisition/index.vue

@@ -160,8 +160,10 @@
               <span style="margin-left: 4px">是否特殊</span>
             </template>
             <template #default="scope">
-              <el-tag v-if="scope.row.isSpecial === '1' || scope.row.isSpecial === 1" type="warning">是</el-tag>
-              <el-tag v-else-if="scope.row.isSpecial === '0' || scope.row.isSpecial === 0" type="info">否</el-tag>
+              <el-tag v-if="String(scope.row.isSpecial) === '1'" type="warning">紧急</el-tag>
+              <el-tag v-else-if="String(scope.row.isSpecial) === '2'" type="danger">单一</el-tag>
+              <el-tag v-else-if="String(scope.row.isSpecial) === '3'" type="info">进口</el-tag>
+              <el-tag v-else-if="String(scope.row.isSpecial) === '0'" type="info">否</el-tag>
               <span v-else>-</span>
             </template>
           </el-table-column>
@@ -171,8 +173,8 @@
               <span style="margin-left: 4px">是否集采</span>
             </template>
             <template #default="scope">
-              <el-tag v-if="scope.row.isCentralized === '1'" type="success">是</el-tag>
-              <el-tag v-else-if="scope.row.isCentralized === '0'" type="info">否</el-tag>
+              <el-tag v-if="String(scope.row.isCentralized) === '1'" type="success">是</el-tag>
+              <el-tag v-else-if="String(scope.row.isCentralized) === '0'" type="info">否</el-tag>
               <span v-else>-</span>
             </template>
           </el-table-column>

src/views/stuwork/onlinebooks/form.vue

@@ -0,0 +1,270 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :width="600" :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="120px" v-loading="loading">
+      <el-form-item label="学院" prop="deptCode">
+        <el-select 
+          v-model="form.deptCode" 
+          placeholder="请选择学院" 
+          clearable
+          filterable
+          style="width: 100%">
+          <el-option
+            v-for="item in deptList"
+            :key="item.deptCode"
+            :label="item.deptName"
+            :value="item.deptCode">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="类别编码" prop="categoryCode">
+        <el-select 
+          v-model="form.categoryCode" 
+          placeholder="请选择类别" 
+          clearable
+          filterable
+          style="width: 100%">
+          <el-option
+            v-for="item in categoryList"
+            :key="item.categoryCode"
+            :label="item.categoryName"
+            :value="item.categoryCode">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="封面" prop="bookImg">
+        <upload-img 
+          v-model="form.bookImg"
+          :width="'150px'"
+          :height="'200px'"
+          upload-file-url="/admin/sys-file/upload" />
+      </el-form-item>
+      <el-form-item label="书名" prop="bookName">
+        <el-input 
+          v-model="form.bookName" 
+          placeholder="请输入书名" 
+          clearable
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="作者" prop="bookAuthor">
+        <el-input 
+          v-model="form.bookAuthor" 
+          placeholder="请输入作者" 
+          clearable
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="链接" prop="webUrl">
+        <el-input 
+          v-model="form.webUrl" 
+          placeholder="请输入链接，例如：https://www.example.com" 
+          clearable
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <el-input 
+          v-model="form.remarks" 
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注"
+          maxlength="250"
+          show-word-limit
+          style="width: 100%" />
+      </el-form-item>
+    </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="OnlineBooksFormDialog">
+import { ref, reactive, nextTick, onMounted } from 'vue'
+import { useMessage } from '/@/hooks/message'
+import { addObj, editObj, getDetail } from '/@/api/stuwork/onlinebooks'
+import request from '/@/utils/request'
+import UploadImg from '/@/components/Upload/Image.vue'
+
+const emit = defineEmits(['refresh'])
+
+// 定义变量内容
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+const operType = ref('add') // add 或 edit
+const deptList = ref<any[]>([])
+const categoryList = ref<any[]>([])
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  deptCode: '',
+  categoryCode: '',
+  bookImg: '',
+  bookName: '',
+  bookAuthor: '',
+  webUrl: '',
+  remarks: ''
+})
+
+// URL验证函数
+const validateUrl = (rule: any, value: any, callback: any) => {
+  if (!value) {
+    callback(new Error('链接不能为空'))
+    return
+  }
+  const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/[^\s]*)?$/i
+  if (urlPattern.test(value)) {
+    callback()
+  } else {
+    callback(new Error('请输入合法的网址，例如：https://www.baidu.com'))
+  }
+}
+
+// 定义校验规则
+const dataRules = {
+  deptCode: [
+    { required: true, message: '请选择学院', trigger: 'change' }
+  ],
+  categoryCode: [
+    { required: true, message: '请选择类别', trigger: 'change' }
+  ],
+  bookName: [
+    { required: true, message: '请输入书名', trigger: 'blur' }
+  ],
+  bookAuthor: [
+    { required: true, message: '请输入作者', trigger: 'blur' }
+  ],
+  webUrl: [
+    { validator: validateUrl, trigger: 'blur' }
+  ],
+  remarks: [
+    { max: 250, message: '备注不能超过250个字符', trigger: 'blur' }
+  ]
+}
+
+// 打开弹窗
+const openDialog = async (type: string = 'add', row?: any) => {
+  visible.value = true
+  operType.value = type
+  
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    form.id = ''
+    form.deptCode = ''
+    form.categoryCode = ''
+    form.bookImg = ''
+    form.bookName = ''
+    form.bookAuthor = ''
+    form.webUrl = ''
+    form.remarks = ''
+    
+    // 编辑时填充数据
+    if (type === 'edit' && row) {
+      loading.value = true
+      getDetail(row.id)
+        .then((res: any) => {
+          if (res.data) {
+            form.id = res.data.id || row.id
+            form.deptCode = res.data.deptCode || ''
+            form.categoryCode = res.data.categoryCode || ''
+            form.bookImg = res.data.bookImg || ''
+            form.bookName = res.data.bookName || ''
+            form.bookAuthor = res.data.bookAuthor || ''
+            form.webUrl = res.data.webUrl || ''
+            form.remarks = res.data.remarks || ''
+          }
+        })
+        .catch((err: any) => {
+          useMessage().error(err.msg || '获取详情失败')
+          visible.value = false
+        })
+        .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: any = {
+        deptCode: form.deptCode,
+        categoryCode: form.categoryCode,
+        bookImg: form.bookImg,
+        bookName: form.bookName,
+        bookAuthor: form.bookAuthor,
+        webUrl: form.webUrl,
+        remarks: form.remarks
+      }
+      
+      if (operType.value === 'add') {
+        await addObj(submitData)
+        useMessage().success('新增成功')
+      } else {
+        submitData.id = form.id
+        await editObj(submitData)
+        useMessage().success('编辑成功')
+      }
+      visible.value = false
+      emit('refresh')
+    } catch (err: any) {
+      useMessage().error(err.msg || (operType.value === 'add' ? '新增失败' : '编辑失败'))
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+// 获取学院列表
+const getDeptList = async () => {
+  try {
+    const res = await request({
+      url: '/basic/basicdept/getDeptList',
+      method: 'get',
+      params: { secondFlag: 1 }
+    })
+    if (res.data) {
+      deptList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    deptList.value = []
+  }
+}
+
+// 获取类别列表
+const getCategoryList = async () => {
+  try {
+    const res = await request({
+      url: '/stuwork/onlinebookscategory/list',
+      method: 'get'
+    })
+    if (res.data) {
+      categoryList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    categoryList.value = []
+  }
+}
+
+// 初始化
+onMounted(() => {
+  getDeptList()
+  getCategoryList()
+})
+
+// 暴露方法给父组件
+defineExpose({
+  openDialog
+})
+</script>
+

src/views/stuwork/onlinebooks/index.vue

@@ -0,0 +1,347 @@
+<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="deptCode">
+            <el-select 
+              v-model="searchForm.deptCode" 
+              placeholder="请选择学院" 
+              clearable
+              filterable
+              style="width: 200px">
+              <el-option
+                v-for="item in deptList"
+                :key="item.deptCode"
+                :label="item.deptName"
+                :value="item.deptCode">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类别编码" prop="categoryCode">
+            <el-select 
+              v-model="searchForm.categoryCode" 
+              placeholder="请选择类别" 
+              clearable
+              filterable
+              style="width: 200px">
+              <el-option
+                v-for="item in categoryList"
+                :key="item.categoryCode"
+                :label="item.categoryName"
+                :value="item.categoryCode">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="书名" prop="bookName">
+            <el-input 
+              v-model="searchForm.bookName" 
+              placeholder="请输入书名" 
+              clearable
+              style="width: 200px" />
+          </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"><Document /></el-icon>
+              在线书列表
+            </span>
+            <div class="header-actions">
+              <el-button 
+                icon="FolderAdd" 
+                type="primary" 
+                @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"
+          @sort-change="sortChangeHandle">
+          <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">
+              <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 === 'bookImg'" #default="scope">
+                <el-image
+                  v-if="scope.row.bookImg"
+                  :src="scope.row.bookImg"
+                  :preview-src-list="[scope.row.bookImg]"
+                  fit="cover"
+                  style="width: 60px; height: 80px; cursor: pointer; border-radius: 4px;"
+                  preview-teleported>
+                </el-image>
+                <span v-else>-</span>
+              </template>
+              <!-- 链接 -->
+              <template v-else-if="col.prop === 'webUrl'" #default="scope">
+                <el-link 
+                  v-if="scope.row.webUrl" 
+                  :href="scope.row.webUrl" 
+                  target="_blank" 
+                  type="primary">
+                  {{ scope.row.webUrl }}
+                </el-link>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+          </template>
+          <el-table-column label="操作" width="150" 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" 
+                @click="handleEdit(scope.row)">
+                编辑
+              </el-button>
+              <el-button 
+                icon="Delete" 
+                link 
+                type="danger" 
+                @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>
+
+    <!-- 新增/编辑对话框 -->
+    <FormDialog ref="formDialogRef" @refresh="getDataList()" />
+  </div>
+</template>
+
+<script setup lang="ts" name="OnlineBooks">
+import { reactive, ref, onMounted, computed, nextTick } from 'vue'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/stuwork/onlinebooks";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import request from '/@/utils/request';
+import TableColumnControl from '/@/components/TableColumnControl/index.vue'
+import FormDialog from './form.vue';
+import { List, Document, Picture, Link, User, Collection, Setting, Menu, Search } from '@element-plus/icons-vue'
+import { useTableColumnControl } from '/@/hooks/tableColumn'
+
+// 定义变量
+const searchFormRef = ref()
+const columnControlRef = ref<any>()
+const formDialogRef = ref()
+const showSearch = ref(true)
+const deptList = ref<any[]>([])
+const categoryList = ref<any[]>([])
+
+// 表格列配置
+const tableColumns = [
+  { prop: 'deptCode', label: '学院' },
+  { prop: 'categoryCode', label: '类别编码' },
+  { prop: 'bookImg', label: '封面' },
+  { prop: 'bookName', label: '书名' },
+  { prop: 'bookAuthor', label: '作者' },
+  { prop: 'webUrl', label: '链接' },
+  { prop: 'remarks', label: '备注' }
+]
+
+// 列配置映射
+const columnConfigMap: Record<string, { icon: any }> = {
+  deptCode: { icon: Collection },
+  categoryCode: { icon: Collection },
+  bookImg: { icon: Picture },
+  bookName: { icon: Document },
+  bookAuthor: { icon: User },
+  webUrl: { icon: Link },
+  remarks: { icon: Document }
+}
+
+// 表格列控制hook
+const {
+  visibleColumns,
+  visibleColumnsSorted,
+  checkColumnVisible,
+  handleColumnChange,
+  handleColumnOrderChange
+} = useTableColumnControl(tableColumns)
+
+// 搜索表单
+const searchForm = reactive({
+  deptCode: '',
+  categoryCode: '',
+  bookName: ''
+})
+
+// 使用 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: searchForm,
+  pageList: fetchList,
+  props: {
+    item: 'records',
+    totalCount: 'total'
+  },
+  createdIsNeed: true
+})
+
+// table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  tableStyle
+} = useTable(state)
+
+// 查询
+const handleSearch = () => {
+  getDataList()
+}
+
+// 重置
+const handleReset = () => {
+  searchFormRef.value?.formRef?.resetFields()
+  searchForm.deptCode = ''
+  searchForm.categoryCode = ''
+  searchForm.bookName = ''
+  getDataList()
+}
+
+// 编辑
+const handleEdit = (row: any) => {
+  formDialogRef.value.openDialog('edit', 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 getDeptList = async () => {
+  try {
+    const res = await request({
+      url: '/basic/basicdept/getDeptList',
+      method: 'get',
+      params: { secondFlag: 1 }
+    })
+    if (res.data) {
+      deptList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    deptList.value = []
+  }
+}
+
+// 获取类别列表
+const getCategoryList = async () => {
+  try {
+    const res = await request({
+      url: '/stuwork/onlinebookscategory/list',
+      method: 'get'
+    })
+    if (res.data) {
+      categoryList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    categoryList.value = []
+  }
+}
+
+// 初始化
+onMounted(() => {
+  getDeptList()
+  getCategoryList()
+  nextTick(() => {
+    if (visibleColumns.value.length === 0) {
+    }
+  })
+})
+</script>
+
+<style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
+</style>
+

src/views/stuwork/onlinebooksbrowsinghistory/form.vue

@@ -0,0 +1,257 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :width="600" :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="120px" v-loading="loading">
+      <el-form-item label="学院" prop="deptCode">
+        <el-select 
+          v-model="form.deptCode" 
+          placeholder="请选择学院" 
+          clearable
+          filterable
+          style="width: 100%">
+          <el-option
+            v-for="item in deptList"
+            :key="item.deptCode"
+            :label="item.deptName"
+            :value="item.deptCode">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select 
+          v-model="form.userType" 
+          placeholder="请选择用户类型" 
+          clearable
+          style="width: 100%">
+          <el-option
+            v-for="item in userTypeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户名" prop="userName">
+        <el-input 
+          v-model="form.userName" 
+          placeholder="请输入用户名" 
+          clearable
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="姓名" prop="realName">
+        <el-input 
+          v-model="form.realName" 
+          placeholder="请输入姓名" 
+          clearable
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="图书" prop="bookId">
+        <el-select 
+          v-model="form.bookId" 
+          placeholder="请选择图书" 
+          clearable
+          filterable
+          style="width: 100%">
+          <el-option
+            v-for="item in bookList"
+            :key="item.id"
+            :label="item.bookName"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="浏览时间" prop="readTime">
+        <el-date-picker
+          v-model="form.readTime"
+          type="datetime"
+          placeholder="请选择浏览时间"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <el-input 
+          v-model="form.remarks" 
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注"
+          style="width: 100%" />
+      </el-form-item>
+    </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="OnlineBooksBrowsingHistoryFormDialog">
+import { ref, reactive, nextTick, onMounted } from 'vue'
+import { useMessage } from '/@/hooks/message'
+import { addObj, editObj, getDetail } from '/@/api/stuwork/onlinebooksbrowsinghistory'
+import { getList as getBookList } from '/@/api/stuwork/onlinebooks'
+import request from '/@/utils/request'
+
+const emit = defineEmits(['refresh'])
+
+// 定义变量内容
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+const operType = ref('add') // add 或 edit
+const deptList = ref<any[]>([])
+const bookList = ref<any[]>([])
+
+// 用户类型列表
+const userTypeList = [
+  { label: '学生', value: '0' },
+  { label: '老师', value: '1' }
+]
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  deptCode: '',
+  userType: '',
+  userName: '',
+  realName: '',
+  bookId: '',
+  readTime: '',
+  remarks: ''
+})
+
+// 定义校验规则
+const dataRules = {
+  deptCode: [
+    { required: true, message: '请选择学院', trigger: 'change' }
+  ],
+  userType: [
+    { required: true, message: '请选择用户类型', trigger: 'change' }
+  ],
+  bookId: [
+    { required: true, message: '请选择图书', trigger: 'change' }
+  ]
+}
+
+// 打开弹窗
+const openDialog = async (type: string = 'add', row?: any) => {
+  visible.value = true
+  operType.value = type
+  
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    form.id = ''
+    form.deptCode = ''
+    form.userType = ''
+    form.userName = ''
+    form.realName = ''
+    form.bookId = ''
+    form.readTime = ''
+    form.remarks = ''
+    
+    // 编辑时填充数据
+    if (type === 'edit' && row) {
+      loading.value = true
+      getDetail(row.id)
+        .then((res: any) => {
+          if (res.data) {
+            form.id = res.data.id || row.id
+            form.deptCode = res.data.deptCode || ''
+            form.userType = res.data.userType || ''
+            form.userName = res.data.userName || ''
+            form.realName = res.data.realName || ''
+            form.bookId = res.data.bookId || ''
+            form.readTime = res.data.readTime || ''
+            form.remarks = res.data.remarks || ''
+          }
+        })
+        .catch((err: any) => {
+          useMessage().error(err.msg || '获取详情失败')
+          visible.value = false
+        })
+        .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: any = {
+        deptCode: form.deptCode,
+        userType: form.userType,
+        userName: form.userName,
+        realName: form.realName,
+        bookId: form.bookId,
+        readTime: form.readTime,
+        remarks: form.remarks
+      }
+      
+      if (operType.value === 'add') {
+        await addObj(submitData)
+        useMessage().success('新增成功')
+      } else {
+        submitData.id = form.id
+        await editObj(submitData)
+        useMessage().success('编辑成功')
+      }
+      visible.value = false
+      emit('refresh')
+    } catch (err: any) {
+      useMessage().error(err.msg || (operType.value === 'add' ? '新增失败' : '编辑失败'))
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+// 获取学院列表
+const getDeptList = async () => {
+  try {
+    const res = await request({
+      url: '/basic/basicdept/getDeptList',
+      method: 'get',
+      params: { secondFlag: 1 }
+    })
+    if (res.data) {
+      deptList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    deptList.value = []
+  }
+}
+
+// 获取图书列表
+const getBookListData = async () => {
+  try {
+    const res = await getBookList()
+    if (res.data) {
+      bookList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    bookList.value = []
+  }
+}
+
+// 初始化
+onMounted(() => {
+  getDeptList()
+  getBookListData()
+})
+
+// 暴露方法给父组件
+defineExpose({
+  openDialog
+})
+</script>
+

src/views/stuwork/onlinebooksbrowsinghistory/index.vue

@@ -0,0 +1,381 @@
+<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="deptCode">
+            <el-select 
+              v-model="searchForm.deptCode" 
+              placeholder="请选择学院" 
+              clearable
+              filterable
+              style="width: 200px">
+              <el-option
+                v-for="item in deptList"
+                :key="item.deptCode"
+                :label="item.deptName"
+                :value="item.deptCode">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="用户类型" prop="userType">
+            <el-select 
+              v-model="searchForm.userType" 
+              placeholder="请选择用户类型" 
+              clearable
+              style="width: 200px">
+              <el-option
+                v-for="item in userTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="用户名" prop="userName">
+            <el-input 
+              v-model="searchForm.userName" 
+              placeholder="请输入用户名" 
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="姓名" prop="realName">
+            <el-input 
+              v-model="searchForm.realName" 
+              placeholder="请输入姓名" 
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="图书" prop="bookId">
+            <el-select 
+              v-model="searchForm.bookId" 
+              placeholder="请选择图书" 
+              clearable
+              filterable
+              style="width: 200px">
+              <el-option
+                v-for="item in bookList"
+                :key="item.id"
+                :label="item.bookName"
+                :value="item.id">
+              </el-option>
+            </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"><Document /></el-icon>
+              在线书浏览记录列表
+            </span>
+            <div class="header-actions">
+              <el-button 
+                icon="FolderAdd" 
+                type="primary" 
+                @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"
+          @sort-change="sortChangeHandle">
+          <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">
+              <template #header>
+                <el-icon><component :is="col.prop ? (columnConfigMap[col.prop]?.icon || Document) : Document" /></el-icon>
+                <span style="margin-left: 4px">{{ col.label }}</span>
+              </template>
+              <!-- 用户类型格式化 -->
+              <template v-if="col.prop === 'userType'" #default="scope">
+                <el-tag v-if="String(scope.row.userType) === '0'" type="primary" size="small">学生</el-tag>
+                <el-tag v-else-if="String(scope.row.userType) === '1'" type="success" size="small">老师</el-tag>
+                <span v-else>-</span>
+              </template>
+              <!-- 浏览时间格式化 -->
+              <template v-else-if="col.prop === 'readTime'" #default="scope">
+                <span v-if="scope.row.readTime">{{ formatDateTime(scope.row.readTime) }}</span>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+          </template>
+          <el-table-column label="操作" width="150" 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" 
+                @click="handleEdit(scope.row)">
+                编辑
+              </el-button>
+              <el-button 
+                icon="Delete" 
+                link 
+                type="danger" 
+                @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>
+
+    <!-- 新增/编辑对话框 -->
+    <FormDialog ref="formDialogRef" @refresh="getDataList()" />
+  </div>
+</template>
+
+<script setup lang="ts" name="OnlineBooksBrowsingHistory">
+import { reactive, ref, onMounted, computed, nextTick } from 'vue'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/stuwork/onlinebooksbrowsinghistory";
+import { getList as getBookList } from "/@/api/stuwork/onlinebooks";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import request from '/@/utils/request';
+import TableColumnControl from '/@/components/TableColumnControl/index.vue'
+import FormDialog from './form.vue';
+import { List, Document, User, Avatar, Collection, Clock, Setting, Menu, Search } from '@element-plus/icons-vue'
+import { useTableColumnControl } from '/@/hooks/tableColumn'
+
+// 定义变量
+const searchFormRef = ref()
+const columnControlRef = ref<any>()
+const formDialogRef = ref()
+const showSearch = ref(true)
+const deptList = ref<any[]>([])
+const bookList = ref<any[]>([])
+
+// 用户类型列表
+const userTypeList = [
+  { label: '学生', value: '0' },
+  { label: '老师', value: '1' }
+]
+
+// 表格列配置
+const tableColumns = [
+  { prop: 'deptCode', label: '学院' },
+  { prop: 'userType', label: '用户类型' },
+  { prop: 'userName', label: '用户名' },
+  { prop: 'realName', label: '姓名' },
+  { prop: 'bookId', label: '图书' },
+  { prop: 'readTime', label: '浏览时间' },
+  { prop: 'remarks', label: '备注' }
+]
+
+// 列配置映射
+const columnConfigMap: Record<string, { icon: any }> = {
+  deptCode: { icon: Collection },
+  userType: { icon: User },
+  userName: { icon: User },
+  realName: { icon: Avatar },
+  bookId: { icon: Document },
+  readTime: { icon: Clock },
+  remarks: { icon: Document }
+}
+
+// 表格列控制hook
+const {
+  visibleColumns,
+  visibleColumnsSorted,
+  checkColumnVisible,
+  handleColumnChange,
+  handleColumnOrderChange
+} = useTableColumnControl(tableColumns)
+
+// 搜索表单
+const searchForm = reactive({
+  deptCode: '',
+  userType: '',
+  userName: '',
+  realName: '',
+  bookId: ''
+})
+
+// 使用 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: searchForm,
+  pageList: fetchList,
+  props: {
+    item: 'records',
+    totalCount: 'total'
+  },
+  createdIsNeed: true
+})
+
+// table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  tableStyle
+} = useTable(state)
+
+// 查询
+const handleSearch = () => {
+  getDataList()
+}
+
+// 重置
+const handleReset = () => {
+  searchFormRef.value?.formRef?.resetFields()
+  searchForm.deptCode = ''
+  searchForm.userType = ''
+  searchForm.userName = ''
+  searchForm.realName = ''
+  searchForm.bookId = ''
+  getDataList()
+}
+
+// 编辑
+const handleEdit = (row: any) => {
+  formDialogRef.value.openDialog('edit', 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 formatDateTime = (dateTime: string) => {
+  if (!dateTime) return '-'
+  try {
+    const date = new Date(dateTime)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  } catch (e) {
+    return dateTime
+  }
+}
+
+// 获取学院列表
+const getDeptList = async () => {
+  try {
+    const res = await request({
+      url: '/basic/basicdept/getDeptList',
+      method: 'get',
+      params: { secondFlag: 1 }
+    })
+    if (res.data) {
+      deptList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    deptList.value = []
+  }
+}
+
+// 获取图书列表
+const getBookListData = async () => {
+  try {
+    const res = await getBookList()
+    if (res.data) {
+      bookList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    bookList.value = []
+  }
+}
+
+// 初始化
+onMounted(() => {
+  getDeptList()
+  getBookListData()
+  nextTick(() => {
+    if (visibleColumns.value.length === 0) {
+    }
+  })
+})
+</script>
+
+<style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
+</style>
+

src/views/stuwork/onlinebookscategory/form.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :width="600" :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="120px" v-loading="loading">
+      <el-form-item label="类别名称" prop="categoryName">
+        <el-input 
+          v-model="form.categoryName" 
+          placeholder="请输入类别名称" 
+          clearable
+          maxlength="30"
+          show-word-limit
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="类别编码" prop="categoryCode">
+        <el-input 
+          v-model="form.categoryCode" 
+          placeholder="请输入类别编码" 
+          clearable
+          maxlength="30"
+          show-word-limit
+          :disabled="!!form.id"
+          style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <el-input 
+          v-model="form.remarks" 
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注"
+          maxlength="250"
+          show-word-limit
+          style="width: 100%" />
+      </el-form-item>
+    </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="OnlineBooksCategoryFormDialog">
+import { ref, reactive, nextTick } from 'vue'
+import { useMessage } from '/@/hooks/message'
+import { addObj, editObj, getDetail } from '/@/api/stuwork/onlinebookscategory'
+
+const emit = defineEmits(['refresh'])
+
+// 定义变量内容
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+const operType = ref('add') // add 或 edit
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  categoryName: '',
+  categoryCode: '',
+  remarks: ''
+})
+
+// 定义校验规则
+const dataRules = {
+  categoryName: [
+    { required: true, message: '请输入类别名称', trigger: 'blur' },
+    { max: 30, message: '类别名称不能超过30个字符', trigger: 'blur' }
+  ],
+  categoryCode: [
+    { required: true, message: '请输入类别编码', trigger: 'blur' },
+    { max: 30, message: '类别编码不能超过30个字符', trigger: 'blur' }
+  ],
+  remarks: [
+    { max: 250, message: '备注不能超过250个字符', trigger: 'blur' }
+  ]
+}
+
+// 打开弹窗
+const openDialog = async (type: string = 'add', row?: any) => {
+  visible.value = true
+  operType.value = type
+  
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    form.id = ''
+    form.categoryName = ''
+    form.categoryCode = ''
+    form.remarks = ''
+    
+    // 编辑时填充数据
+    if (type === 'edit' && row) {
+      loading.value = true
+      getDetail(row.id)
+        .then((res: any) => {
+          if (res.data) {
+            form.id = res.data.id || row.id
+            form.categoryName = res.data.categoryName || ''
+            form.categoryCode = res.data.categoryCode || ''
+            form.remarks = res.data.remarks || ''
+          }
+        })
+        .catch((err: any) => {
+          useMessage().error(err.msg || '获取详情失败')
+          visible.value = false
+        })
+        .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: any = {
+        categoryName: form.categoryName,
+        categoryCode: form.categoryCode,
+        remarks: form.remarks
+      }
+      
+      if (operType.value === 'add') {
+        await addObj(submitData)
+        useMessage().success('新增成功')
+      } else {
+        submitData.id = form.id
+        await editObj(submitData)
+        useMessage().success('编辑成功')
+      }
+      visible.value = false
+      emit('refresh')
+    } catch (err: any) {
+      useMessage().error(err.msg || (operType.value === 'add' ? '新增失败' : '编辑失败'))
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+// 暴露方法给父组件
+defineExpose({
+  openDialog
+})
+</script>
+

src/views/stuwork/onlinebookscategory/index.vue

@@ -0,0 +1,269 @@
+<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="categoryName">
+            <el-input 
+              v-model="searchForm.categoryName" 
+              placeholder="请输入类别名称" 
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="类别编码" prop="categoryCode">
+            <el-input 
+              v-model="searchForm.categoryCode" 
+              placeholder="请输入类别编码" 
+              clearable
+              style="width: 200px" />
+          </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"><Document /></el-icon>
+              在线书类别列表
+            </span>
+            <div class="header-actions">
+              <el-button 
+                icon="FolderAdd" 
+                type="primary" 
+                @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"
+          @sort-change="sortChangeHandle">
+          <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">
+              <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 === 'qrCode'" #default="scope">
+                <el-image
+                  v-if="scope.row.qrCode"
+                  :src="scope.row.qrCode"
+                  :preview-src-list="[scope.row.qrCode]"
+                  fit="cover"
+                  style="width: 80px; height: 80px; cursor: pointer; border-radius: 4px;"
+                  preview-teleported>
+                </el-image>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+          </template>
+          <el-table-column label="操作" width="150" 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" 
+                @click="handleEdit(scope.row)">
+                编辑
+              </el-button>
+              <el-button 
+                icon="Delete" 
+                link 
+                type="danger" 
+                @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>
+
+    <!-- 新增/编辑对话框 -->
+    <FormDialog ref="formDialogRef" @refresh="getDataList()" />
+  </div>
+</template>
+
+<script setup lang="ts" name="OnlineBooksCategory">
+import { reactive, ref, onMounted, computed, nextTick } from 'vue'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/stuwork/onlinebookscategory";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import TableColumnControl from '/@/components/TableColumnControl/index.vue'
+import FormDialog from './form.vue';
+import { List, Document, Picture, Setting, Menu, Search } from '@element-plus/icons-vue'
+import { useTableColumnControl } from '/@/hooks/tableColumn'
+
+// 定义变量
+const searchFormRef = ref()
+const columnControlRef = ref<any>()
+const formDialogRef = ref()
+const showSearch = ref(true)
+
+// 表格列配置
+const tableColumns = [
+  { prop: 'categoryName', label: '类别名称' },
+  { prop: 'categoryCode', label: '类别编码' },
+  { prop: 'qrCode', label: '二维码' },
+  { prop: 'remarks', label: '备注' }
+]
+
+// 列配置映射
+const columnConfigMap: Record<string, { icon: any }> = {
+  categoryName: { icon: Document },
+  categoryCode: { icon: Document },
+  qrCode: { icon: Picture },
+  remarks: { icon: Document }
+}
+
+// 表格列控制hook
+const {
+  visibleColumns,
+  visibleColumnsSorted,
+  checkColumnVisible,
+  handleColumnChange,
+  handleColumnOrderChange
+} = useTableColumnControl(tableColumns)
+
+// 搜索表单
+const searchForm = reactive({
+  categoryName: '',
+  categoryCode: ''
+})
+
+// 使用 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: searchForm,
+  pageList: fetchList,
+  props: {
+    item: 'records',
+    totalCount: 'total'
+  },
+  createdIsNeed: true
+})
+
+// table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  tableStyle
+} = useTable(state)
+
+// 查询
+const handleSearch = () => {
+  getDataList()
+}
+
+// 重置
+const handleReset = () => {
+  searchFormRef.value?.formRef?.resetFields()
+  searchForm.categoryName = ''
+  searchForm.categoryCode = ''
+  getDataList()
+}
+
+// 编辑
+const handleEdit = (row: any) => {
+  formDialogRef.value.openDialog('edit', 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 || '删除失败')
+    }
+  }
+}
+
+// 初始化
+onMounted(() => {
+  nextTick(() => {
+    if (visibleColumns.value.length === 0) {
+    }
+  })
+})
+</script>
+
+<style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
+</style>
+