项目管理下拉字典对接

src/main.js

@@ -5,14 +5,16 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElIcons from '@element-plus/icons'
 import router from './router'
+import { createPinia } from 'pinia';
 import "./assets/fonts/font.less"; // 字体样式
 import "../public/iconFont/iconfont.css"; // 图标字体样式
 import { $get, $post } from "@/data/https.js";
 
+const pinia = createPinia()
 const app = createApp(App)
 app.config.globalProperties.$get = $get;
 app.config.globalProperties.$post = $post;
 for (const [key, component] of Object.entries(ElIcons)) {
   app.component(key, component)
 }
-app.use(ElementPlus).use(router).mount('#app')
+app.use(ElementPlus).use(router).use(pinia).mount('#app')

src/router/index.js

@@ -24,15 +24,15 @@ const routes = [
       },
       {
         path: '/projectManage',
-        name: '项目管理',
-        title: 'projectManage',
+        name: 'projectManage',
+        title: '项目管理',
         component: () => import('@/views/managePage/projectManage.vue'),
         meta: { menuName: '项目管理', icon: 'Management' }
       },
       {
         path: '/addProject',
-        name: '新增项目',
-        title: 'addProject',
+        name: 'addProject',
+        title: '新增项目',
         component: () => import('@/views/managePage/addProject.vue'),
         meta: {
           menuName: '新增项目',

src/stores/project.js

+import { defineStore } from "pinia";
+export const useProjectStore = defineStore('project', {
+  state: () => ({
+    params: {}
+  }),
+  actions: {
+    setParams(data) {
+      this.params = { ...this.params, ...data }
+    }
+  }
+})
\ No newline at end of file

src/styles/manage.less

+.tab-content{
+    th{
+        text-align: center;
+    }
+}
\ No newline at end of file

src/views/managePage/projectManage.vue

@@ -16,8 +16,9 @@
                     <el-table-column prop="projectCode" label="项目编号" />
                     <el-table-column fixed="right" label="操作" min-width="120">
                         <template #default="scope">
-                            <el-button link type="primary" size="small">查看</el-button>
-                            <el-button link type="primary" size="small">编辑</el-button>
+                            <el-button link type="primary" size="small" @click="previewProject(scope.row)">查看</el-button>
+                            <el-button link type="primary" size="small" @click="editProject(scope.row)">编辑</el-button>
+                            <el-button link type="danger" size="small" @click="deleteProject(scope.row)">删除</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
@@ -32,6 +33,10 @@
 <script setup>
     import { reactive, ref, onMounted, getCurrentInstance } from "vue";
     import { useRouter } from "vue-router";
+    import { useProjectStore } from "@/stores/project.js";
+    import { ElMessage, ElMessageBox } from "element-plus";
+    const projectStore = useProjectStore();
+    
     const router = useRouter();
     const { proxy } = getCurrentInstance();
 
@@ -52,8 +57,46 @@
     const addProject = () => {
         router.push("/addProject");
     };
+    const editProject = (item) => {
+        projectStore.setParams({
+            projectInfo: { ...item }
+        });
+        router.push("/addProject");
+    };
+    const previewProject = (item) => {
+        projectStore.setParams({
+            projectInfo: { ...item }
+        });
+        router.push({
+            name: "addProject",
+            query: {
+                isPreview: true
+            }
+        })
+    }
+    const deleteProject = (item) => {
+        ElMessageBox.confirm("确认删除该项？", "提示",{
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }).then(() => {
+            proxy.$post({
+                url: "/api/project/deleteProject",
+                data: {
+                    id: item.id
+                },
+                callback: (data) => {
+                    ElMessage.success("删除成功");
+                    getProjectData();
+                }
+            }).catch(() => {})
+        })
+    }
     onMounted(() => {
         getProjectData();
+        projectStore.setParams({
+            projectInfo: undefined
+        });
     })
 </script>