提交

src/views/fileManager/components/rectificationList.vue

@@ -8,19 +8,30 @@
         </div>
       </template>
 
-      <!-- 表格：已移除详情按钮 -->
+      <!-- 表格：保留操作列 -->
       <avue-crud
         :data="tableData"
         :page="page"
         :table-loading="loading"
         :option="option"
-        addBtn: false
         @on-load="onLoad"
         @refresh-change="onLoad"
         @current-change="handleCurrentChange"
         @size-change="handleSizeChange"
-        @row-click="handleEdit"
+      >
-      />
+        <!-- 操作列：编辑按钮 -->
+        <template #menu="{ row, size }">
+          <el-button
+            :size="size"
+            type="primary"
+            link
+            :icon="Edit"
+            @click="handleEdit(row)"
+          >
+            编辑
+          </el-button>
+        </template>
+      </avue-crud>
     </el-card>
 
     <!-- 编辑弹窗 -->
@@ -38,33 +49,43 @@
       />
       <template #footer>
         <el-button @click="closeDialog">取消</el-button>
-        <el-button type="primary" @click="submitEdit" :loading="submitLoading">保存</el-button>
+        <el-button
+          type="primary"
+          @click="submitEdit"
+          :loading="submitLoading"
+        >
+          保存
+        </el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus';
-import { selectRectificationListApi, updateRectificationApi } from '@/api/archivesManagement/fileManager/fileManager.js'
+import { Edit } from '@element-plus/icons-vue';
+import {
+  selectRectificationListApi,
+  updateRectificationApi
+} from '@/api/archivesManagement/fileManager/fileManager.js';
 
-const route = useRoute()
+const route = useRoute();
-const router = useRouter()
+const router = useRouter();
 
 // 从路由获取参数
-const projectId = route.query.projectId
+const projectId = route.query.projectId;
 
-const loading = ref(false)
+const loading = ref(false);
-const tableData = ref([])
+const tableData = ref([]);
 const page = reactive({
   currentPage: 1,
   pageSize: 10,
   total: 0
-})
+});
 
-// 表格配置：移除了操作列（#menu 插槽已删除）
+// 表格配置：保留操作列
 const option = reactive({
   height: 'auto',
   index: true,
@@ -73,62 +94,62 @@ const option = reactive({
   editBtn: false,
   delBtn: false,
   viewBtn: false,
-  menu: false, // 👈 关键：不显示操作列
+  menu: true, // 启用操作列
   column: [
-    { label: '项目名称', },
+    { label: '项目名称', prop: 'proName' },
     { label: '单项工程名称', prop: 'singleProName' },
-    { label: '档案名称', prop: 'contentName'},
+    { label: '档案名称', prop: 'contentName' },
     { label: '整改内容', prop: 'description', sortable: true }
   ]
-})
+});
 
 // 查询数据
 const onLoad = async (pageParam = page) => {
   if (!projectId) {
-    ElMessage.error('缺少必要参数')
+    ElMessage.error('缺少必要参数');
-    return
+    return;
   }
-  loading.value = true
+  loading.value = true;
   try {
     const res = await selectRectificationListApi({
       proId: projectId,
       pageNum: pageParam.currentPage,
       pageSize: pageParam.pageSize
-    })
+    });
     if (res.data.code === 200) {
-      tableData.value = res.data.rows || []
+      tableData.value = res.data.rows || [];
-      page.total = res.data.total || 0
+      page.total = res.data.total || 0;
     } else {
-      ElMessage.error(res.data.msg || '加载失败')
+      ElMessage.error(res.data.msg || '加载失败');
     }
   } catch (error) {
-    ElMessage.error('网络错误')
+    ElMessage.error('网络错误');
-    console.error(error)
+    console.error(error);
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
 
 // 分页方法
 const handleCurrentChange = (val) => {
-  page.currentPage = val
+  page.currentPage = val;
-  onLoad()
+  onLoad();
-}
+};
 const handleSizeChange = (val) => {
-  page.pageSize = val
+  page.pageSize = val;
-  onLoad()
+  onLoad();
-}
+};
 
 // 返回
 const goBack = () => {
-  router.go(-1)
+  router.go(-1);
-}
+};
 
 // ================== 编辑功能 ==================
-const dialogVisible = ref(false)
+const dialogVisible = ref(false);
-const formData = ref({})
+const formData = ref({});
-const submitLoading = ref(false)
+const submitLoading = ref(false);
-const formRef = ref()
+const formRef = ref();
 
 // 编辑表单配置
 const editOption = reactive({
@@ -137,7 +158,7 @@ const editOption = reactive({
     {
       label: '档案名称',
       prop: 'contentName',
-      disabled: true, // 👈 禁用
+      disabled: true,
       placeholder: '档案名称'
     },
     {
@@ -148,52 +169,53 @@ const editOption = reactive({
       placeholder: '请输入整改内容'
     }
   ]
-})
+});
 
 const rules = {
   description: [{ required: true, message: '请输入整改内容', trigger: 'blur' }]
-}
+};
 
-// 点击行进入编辑
+// 点击编辑按钮
 const handleEdit = (row) => {
   formData.value = {
     id: row.id,
     contentName: row.contentName,
     description: row.description
-  }
+  };
-  dialogVisible.value = true
+  dialogVisible.value = true;
-}
+};
 
 // 关闭弹窗
 const closeDialog = () => {
-  dialogVisible.value = false
+  dialogVisible.value = false;
-  formData.value = {}
+  formData.value = {};
-}
+};
 
 // 提交编辑
 const submitEdit = async () => {
-  await formRef.value.validate()
+  await formRef.value.validate();
-  submitLoading.value = true
+  submitLoading.value = true;
   try {
-    const res = await updateRectificationApi(formData.value)
+    const res = await updateRectificationApi(formData.value);
     if (res.data.code === 200) {
-      ElMessage.success('保存成功')
+      ElMessage.success('保存成功');
-      closeDialog()
+      closeDialog();
-      onLoad() // 刷新列表
+      onLoad(); // 刷新列表
     } else {
-      ElMessage.error(res.data.msg || '保存失败')
+      ElMessage.error(res.data.msg || '保存失败');
     }
   } catch (error) {
-    ElMessage.error('网络错误')
+    ElMessage.error('网络错误');
+    console.error(error);
   } finally {
-    submitLoading.value = false
+    submitLoading.value = false;
   }
-}
+};
 
 // 初始加载
 onMounted(() => {
-  onLoad()
+  onLoad();
-})
+});
 </script>
 
 <style scoped>