From a7523d380f769beec7df8b74b77a32ab4c702876 Mon Sep 17 00:00:00 2001
From: adiao <1819192616@qq.com>
Date: Fri, 26 May 2023 16:23:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8B=97=E9=83=BD=E4=B8=8D=E5=86=99=E4=BA=86?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Development.md                  |  35 +++++++
 src/router/modules/home.js      |   5 +-
 src/views/admin1/work/index.vue | 178 ++++++++++++++++++++------------
 3 files changed, 150 insertions(+), 68 deletions(-)

diff --git a/Development.md b/Development.md
index 746cdc4..3143575 100644
--- a/Development.md
+++ b/Development.md
@@ -124,3 +124,38 @@ export default {
 ```
 
 在上面的代码中，我们在`<el-image>`标签中添加了一个"error"事件监听器，并在事件处理程序中将loaded属性设置为false，并将error属性设置为true。在`<transition>`元素中，我们使用了v-else指令来显示一个错误信息。最后，我们在`<style>`标签中定义了错误信息的样式.
+
+## 对于table 的弹窗基本操作
+
+// 添加部门的逻辑（这里只是一个示例，你需要根据实际需求实现添加部门的功能）
+
+```vue3
+
+// TODO 渲染后端数据
+const tableColumn = ref([
+  { id: 1, prop: "id", label: "序号" },
+  { id: 2, prop: "workId", label: "部门编号" },
+  { id: 3, prop: "workName", label: "部门名称" },
+  { id: 4, prop: "workDescription", label: "备注" },
+  { id: 5, prop: "createDate", label: "部门创建时间" },
+]);
+
+ const addWork = async () => {
+   console.log(addForm.workId);
+   if (!addForm.workId || !addForm.workName) {
+     ElMessage.warning("请填写部门编号和部门名称");
+     return;
+   }
+   // 在这里调用后端接口添加部门，然后刷新部门列表
+   // 例如：await addWorkAPI(addForm);
+   const reslt = await addWork("/work/add", addForm);
+   console.log(reslt);
+   ElMessage.success("添加成功");
+   addDialogVisible.value = false;
+   addForm.workId = "";
+   addForm.workName = "";
+   addForm.workDescription = "";
+   // 刷新部门列表
+   getWorkListData("/work/page", queryInfo.info);
+ };
+ ```
diff --git a/src/router/modules/home.js b/src/router/modules/home.js
index fc5ac88..745cc73 100644
--- a/src/router/modules/home.js
+++ b/src/router/modules/home.js
@@ -1,8 +1,5 @@
 export const homeRoutes = [
-  {
-    path: '/',
-    redirect: '/login'
-  },
+  
   {
     name: 'home',
     path: '/home',
diff --git a/src/views/admin1/work/index.vue b/src/views/admin1/work/index.vue
index 36f0e7c..a765e64 100644
--- a/src/views/admin1/work/index.vue
+++ b/src/views/admin1/work/index.vue
@@ -1,15 +1,21 @@
 <script setup>
 import { ArrowRight, Search, Edit } from "@element-plus/icons-vue";
 import { initWork } from "@/api/common";
-import { onMounted, reactive, ref } from "vue";
+import {
+  getCurrentInstance,
+  onBeforeMount,
+  onMounted,
+  reactive,
+  ref,
+} from "vue";
 import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 
 // 定义数据和变量的区域
-const Router = useRoute();
+// const Router = useRoute();
 const tableData = ref([]);
 const addDialogVisible = ref(false);
-const background = ref(null);
+const a = ref([1]);
 
 const addForm = reactive({
   workId: "",
@@ -23,40 +29,47 @@ const queryInfo = reactive({
     pageNum: 1,
     pageSize: 15,
   },
-  total: "",
+  total: 0,
 });
 
 // 开发功能步骤：
 // TODO 初始化数据
+// onBeforeMount(() => {
+//   if (getWorkListData !== '') {
+//
+//   }
+// });
+
 onMounted(() => {
-  getWorkListData("/work/page", queryInfo.info);
+  const inst = getCurrentInstance();
+  const apply = inst.type.apply;
+  if (apply > 1) {
+    apply = 1;
+    setTimeout(() => {
+      getWorkListData("/work/page", queryInfo.info);
+    }, 1000);
+  }
 });
 
 // TODO 获取后端数据
 const getWorkListData = async (url, val) => {
-  let { data } = await initWork(url, val);
-  ElMessage.success("获取成功");
-  if (data) {
-    tableData.value = data.records;
-    queryInfo.total = data.total;
-    queryInfo.info.pageNum = data.current;
-    queryInfo.info.pageSize = data.size;
-    return {
-      tableData,
-      queryInfo,
-    };
+  if (val) {
+    let { data } = await initWork(url, val);
+    console.log(data);
+    if (data) {
+      ElMessage.success("获取成功");
+      tableData.value = data.records;
+      queryInfo.total = data.total;
+      queryInfo.info.pageNum = data.current;
+      queryInfo.info.pageSize = data.size;
+      return {
+        tableData,
+        queryInfo,
+      };
+    }
   }
 };
 
-// TODO 渲染后端数据
-const tableColumn = ref([
-  { id: 1, prop: "id", label: "序号" },
-  { id: 2, prop: "workId", label: "部门编号" },
-  { id: 3, prop: "workName", label: "部门名称" },
-  { id: 4, prop: "workDescription", label: "备注" },
-  { id: 5, prop: "createDate", label: "部门创建时间" },
-]);
-
 // TODO 添加 添加操作弹窗
 const handleSelectionChange = (val) => {
   if (!val) return getWorkListData("/work/page", queryInfo.info);
@@ -76,27 +89,6 @@ const handleAdd = () => {
   console.log(addDialogVisible.value);
 };
 
-// 添加部门的逻辑（这里只是一个示例，你需要根据实际需求实现添加部门的功能）
-// const addWork = async () => {
-//   console.log(addForm.workId);
-//   if (!addForm.workId || !addForm.workName) {
-//     ElMessage.warning("请填写部门编号和部门名称");
-//     return;
-//   }
-
-//   // 在这里调用后端接口添加部门，然后刷新部门列表
-//   // 例如：await addWorkAPI(addForm);
-//   const reslt = await addWork("/work/add", addForm);
-//   console.log(reslt);
-//   ElMessage.success("添加成功");
-//   addDialogVisible.value = false;
-//   addForm.workId = "";
-//   addForm.workName = "";
-//   addForm.workDescription = "";
-
-//   // 刷新部门列表
-//   getWorkListData("/work/page", queryInfo.info);
-// };
 const addWork = () => {
   if (!addForm.workId || !addForm.workName) {
     ElMessage.warning("请填写部门编号和部门名称");
@@ -106,8 +98,6 @@ const addWork = () => {
     console.log(reslt);
   }
 };
-
-// TODO 返回操作状态
 </script>
 
 <template>
@@ -116,13 +106,12 @@ const addWork = () => {
     <el-breadcrumb-item :to="{ path: '/admin1' }"
       >系统管理员</el-breadcrumb-item
     >
-    <el-breadcrumb-item>{{ Router.meta.title }}</el-breadcrumb-item>
+    <!-- <el-breadcrumb-item>{{ meta.title }}</el-breadcrumb-item> -->
   </el-breadcrumb>
   <!-- 卡片区域 -->
   <el-card>
-    <el-row :gutter="20">
-      <!-- 搜索区域 -->
-      <el-col :span="5">
+    <el-row class="row-bg" justify="space-between">
+      <el-col :span="4">
         <el-input
           placeholder="Please input"
           v-model="queryInfo.info.query"
@@ -135,13 +124,74 @@ const addWork = () => {
           </template>
         </el-input>
       </el-col>
-      <!-- 添加按钮区域 -->
-      <el-col :span="4" :push="16">
-        <el-button :icon="plus" @click="handleAdd">添加部门</el-button>
+      <el-col :span="3">
+        <el-button @click="handleAdd">添加部门</el-button>
       </el-col>
     </el-row>
+    <el-table :data="tableData" style="width: 100%">
+      <!-- <el-table-column
+        v-for="{ id, prop, label } in tableColumn"
+        :prop="prop"
+        :key="id"
+        :label="label"
+        :width="label === '序号' ? 100 : ''"
+        align="center"
+      /> -->
+      <el-table-column type="index" label="序号" width="70%"></el-table-column>
+      <el-table-column
+        sortable
+        prop="workId"
+        label="部门编号"
+      ></el-table-column>
+      <el-table-column prop="workName" label="部门名称"></el-table-column>
+      <el-table-column prop="workDescription" label="备注"></el-table-column>
+      <el-table-column
+        sortable
+        prop="createDate"
+        label="创建时间"
+      ></el-table-column>
+
+      <el-table-column align="right">
+        <template #default="scope">
+          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+            >Edit</el-button
+          >
+          <el-button
+            size="small"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+            >Delete</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      layout="prev, pager, next"
+      :total="queryInfo.total"
+    />
+    <!-- <el-row :gutter="20"> -->
+    <!-- 搜索区域 -->
+    <!-- <el-col :span="5">
+        <el-input
+          placeholder="Please input"
+          v-model="queryInfo.info.query"
+          class="input-with-select"
+        >
+          <template #append>
+            <el-button :icon="Search" @click="handleSelectionChange"
+              >Search</el-button
+            >
+          </template>
+        </el-input>
+      </el-col> -->
+    <!-- 添加按钮区域 -->
+    <!-- <el-col :span="4">
+        <el-button :icon="plus" @click="handleAdd">添加部门</el-button>
+      </el-col>
+    </el-row> -->
     <!-- 部门列表区 -->
-    <el-table :data="tableData" border stripe :height="680">
+    <!-- <el-table :data="tableData" border stripe :height="680">
       <el-table-column
         v-for="{ id, prop, label } in tableColumn"
         :prop="prop"
@@ -155,19 +205,19 @@ const addWork = () => {
           <el-button link type="primary" size="small" :icon="Edit" plain
             >操作</el-button
           >
-          <!-- <WorkrowForm /> -->
         </template>
       </el-table-column>
-    </el-table>
+    </el-table> -->
     <!--   分页区   -->
-    <el-pagination
-      v-model:page-count="queryInfo.info.pageNum"
+    <!-- <el-pagination
+      background
+      :current-page="queryInfo.info.pageNum"
       :page-sizes="[15, 30, 45, 60]"
-      v-model:page-size="queryInfo.info.pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
+      :page-size="15"
+      layout="total,sizes,prev, pager,next"
       :total="queryInfo.total"
-      :background="background"
-    />
+      :hide-on-single-page="false"
+    /> -->
   </el-card>
   <!-- 添加部门弹窗 -->
   <el-dialog v-model="addDialogVisible" width="30%">