完成的添加的弹窗效果。

src/api/common.js

@@ -1,36 +1,39 @@
 // 公共API
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export const animationRoute = (url, username) => {
   return request({
-    url:url,
-    method: 'GET',
+    url: url,
+    method: "GET",
     params: username,
     headers: {
-      "Content-Type": "application/json"
-    }
-  })
-}
+      "Content-Type": "application/json",
+    },
+  });
+};
 
 export const getData = (url) => {
   return request({
     url: url,
     method: "GET",
-  })
-}
+  });
+};
 
-export const initWork =(url,data)=>{
+export const initWork = (url, data) => {
   return request({
     url: url,
     method: "GET",
-    params: data
-  })
-}
+    params: data,
+  });
+};
 
-export const addWork = (url,data) =>{
+export const addWork = (url, data) => {
   return request({
     url: url,
-    method:"POST",
-    data: data
-  })
-}
+    method: "POST",
+    data: data,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+};

src/views/admin1/work/index.vue

@@ -9,6 +9,7 @@ import { ElMessage } from "element-plus";
 const Router = useRoute();
 const tableData = ref([]);
 const addDialogVisible = ref(false);
+const background = ref(null);
 
 const addForm = reactive({
   workId: "",
@@ -57,7 +58,6 @@ const tableColumn = ref([
 ]);
 
 // TODO 添加 添加操作弹窗
-const handleEdite = () => {};
 const handleSelectionChange = (val) => {
   if (!val) return getWorkListData("/work/page", queryInfo.info);
   if (val.data != null && val.data != "") {
@@ -73,34 +73,38 @@ const handleSelectionChange = (val) => {
 const handleAdd = () => {
   console.log("被调用了");
   addDialogVisible.value = true;
+  console.log(addDialogVisible.value);
 };
 
 // 添加部门的逻辑（这里只是一个示例，你需要根据实际需求实现添加部门的功能）
-const addWork = async () => {
+// 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("请填写部门编号和部门名称");
     return;
+  } else {
+    const reslt = addWork("/work/add", addForm);
+    console.log(reslt);
   }
-
-  // 在这里调用后端接口添加部门，然后刷新部门列表
-  // 例如：await addWorkAPI(addForm);
-<<<<<<< HEAD
-  const reslt = await addWork("/work/add", addForm);
-  console.log(reslt);
-
-=======
-  const rsl = await initWork('/work/add', addForm)
-  console.log(rsl);
-  
->>>>>>> 04aa138 (弹窗的请求)
-  ElMessage.success("添加成功");
-  addDialogVisible.value = false;
-  addForm.workId = "";
-  addForm.workName = "";
-  addForm.workDescription = "";
-
-  // 刷新部门列表
-  getWorkListData("/work/page", queryInfo.info);
 };
 
 // TODO 返回操作状态
@@ -148,13 +152,7 @@ const addWork = async () => {
       />
       <el-table-column fixed="right" label="操作" align="center" width="240">
         <template #default="scoped">
-          <el-button
-            link
-            type="primary"
-            size="small"
-            :icon="Edit"
-            @click="handleEdite"
-            plain
+          <el-button link type="primary" size="small" :icon="Edit" plain
             >操作</el-button
           >
           <!-- <WorkrowForm /> -->
@@ -163,17 +161,42 @@ const addWork = async () => {
     </el-table>
     <!--   分页区   -->
     <el-pagination
-      background
-      :current-page="queryInfo.info.pageNum"
+      v-model:page-count="queryInfo.info.pageNum"
       :page-sizes="[15, 30, 45, 60]"
-      :page-size="15"
-      layout="total,sizes,prev, pager,next"
+      v-model:page-size="queryInfo.info.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
       :total="queryInfo.total"
-    >
-    </el-pagination>
+      :background="background"
+    />
   </el-card>
   <!-- 添加部门弹窗 -->
-  <el-dialog
+  <el-dialog v-model="addDialogVisible" width="30%">
+    <el-form :model="addForm" label-width="120px">
+      <el-form-item label="部门编号">
+        <el-input
+          v-model="addForm.workId"
+          placeholder="请输入部门编号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="部门名称">
+        <el-input
+          v-model="addForm.workName"
+          placeholder="请输入部门名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          v-model="addForm.workDescription"
+          placeholder="请输入备注"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="addDialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="addWork">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- <el-dialog
     title="添加部门"
     :visible.sync="addDialogVisible"
     width="30%"
@@ -203,7 +226,7 @@ const addWork = async () => {
       <el-button @click="addDialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="addWork">确 定</el-button>
     </span>
-  </el-dialog>
+  </el-dialog> -->
 </template>
 
 <style scoped lang="less">