From 3324a54fa4d0840f8a5dc8adb21753180ecd3f3c Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期二, 02 九月 2025 14:25:06 +0800
Subject: [PATCH] 公告信息页面
---
src/router/modules/remaining.ts | 10 +
src/views/home/component/myHeader.vue | 1
src/views/home/index.vue | 10 -
src/router/modules/home.ts | 4
src/views/home/info.vue | 75 +++++++++
.env | 2
src/layout/hooks/useNav.ts | 7
src/views/home/component/tableList.vue | 166 ++++++++++++++++++++
src/views/home/utils/hook.tsx | 157 ++++++++++++++++--
9 files changed, 396 insertions(+), 36 deletions(-)
diff --git a/.env b/.env
index a5f8b9a..09344c1 100644
--- a/.env
+++ b/.env
@@ -2,4 +2,4 @@
VITE_PORT = 8848
# 鏄惁闅愯棌棣栭〉 闅愯棌 true 涓嶉殣钘� false 锛堝嬁鍒犻櫎锛孷ITE_HIDE_HOME鍙渶鍦�.env鏂囦欢閰嶇疆锛�
-VITE_HIDE_HOME = true
+VITE_HIDE_HOME = false
diff --git a/src/layout/hooks/useNav.ts b/src/layout/hooks/useNav.ts
index 88ff49c..b3b11a0 100644
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -108,8 +108,11 @@
.then(res => {
if (res.code == 200) {
// 鑾峰彇鍚庣璺敱
- initRouter();
- onFresh();
+ initRouter().then(() => {
+ const path = getTopMenu(true);
+ router.push({ name: path.name });
+ });
+ // onFresh();
} else {
message(res?.message, { type: "warning" });
}
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index fd848f0..258f521 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -9,8 +9,8 @@
meta: {
icon: "ep/home-filled",
title: "棣栭〉",
- rank: 0,
- showLink: false
+ rank: 0
+ // showLink: false
},
children: [
{
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 56d2518..887cda0 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -32,6 +32,16 @@
}
},
{
+ path: "/gonggaoInfo",
+ name: "gonggaoInfo",
+ component: () => import("@/views/home/info.vue"),
+ meta: {
+ title: "鍏憡淇℃伅",
+ showLink: false,
+ rank: 101
+ }
+ },
+ {
path: "/login",
name: "Login",
component: () => import("@/views/login/index.vue"),
diff --git a/src/views/home/component/myHeader.vue b/src/views/home/component/myHeader.vue
index da8f022..c71498b 100644
--- a/src/views/home/component/myHeader.vue
+++ b/src/views/home/component/myHeader.vue
@@ -36,6 +36,7 @@
justify-content: space-evenly;
height: 80px;
width: 100%;
+ background-color: white;
.middle {
width: 50%;
display: flex;
diff --git a/src/views/home/component/tableList.vue b/src/views/home/component/tableList.vue
new file mode 100644
index 0000000..c716672
--- /dev/null
+++ b/src/views/home/component/tableList.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { useRole } from "./utils/hook";
+import { ref, computed, nextTick, onMounted } from "vue";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { useIndex } from "@/views/home/utils/hook";
+
+import {
+ delay,
+ subBefore,
+ deviceDetection,
+ useResizeObserver
+} from "@pureadmin/utils";
+
+// import Database from "~icons/ri/database-2-line";
+// import More from "~icons/ep/more-filled";
+import Delete from "~icons/ep/delete";
+import EditPen from "~icons/ep/edit-pen";
+import Refresh from "~icons/ep/refresh";
+import Menu from "~icons/ep/menu";
+import AddFill from "~icons/ri/add-circle-line";
+import Close from "~icons/ep/close";
+import Check from "~icons/ep/check";
+
+defineOptions({
+ name: "SystemRole"
+});
+
+const treeRef = ref();
+const formRef = ref();
+const tableRef = ref();
+const contentRef = ref();
+const treeHeight = ref();
+const size = "small";
+const {
+ form,
+ loading,
+ columns,
+ rowStyle,
+ dataList,
+ pagination,
+ onSearch,
+ resetForm,
+ handleDelete,
+ handleSizeChange,
+ handleCurrentChange,
+ handleSelectionChange
+} = useIndex();
+
+onMounted(() => {
+ useResizeObserver(contentRef, async () => {
+ await nextTick();
+ delay(60).then(() => {
+ treeHeight.value = parseFloat(
+ subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
+ );
+ });
+ });
+});
+</script>
+
+<template>
+ <div class="main">
+ <el-card shadow="never">
+ <el-form
+ ref="formRef"
+ :inline="true"
+ size="small"
+ :model="form"
+ class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+ >
+ <el-form-item label="鍏抽敭瀛楋細" prop="name">
+ <el-input
+ v-model="form.keyword"
+ placeholder="璇疯緭鍏ヨ鑹插悕绉�"
+ clearable
+ class="w-[180px]!"
+ />
+ </el-form-item>
+ <el-form-item label="鍙戝竷鏃ユ湡锛�">
+ <el-date-picker
+ v-model="form.createDateRange"
+ type="daterange"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+ class="w-[100%]!"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" :loading="loading" @click="onSearch">
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetForm(formRef)"> 閲嶇疆 </el-button>
+ </el-form-item>
+ </el-form>
+ <pure-table
+ ref="tableRef"
+ align-whole="center"
+ showOverflowTooltip
+ table-layout="auto"
+ :loading="loading"
+ :size="size"
+ adaptive
+ :row-style="rowStyle"
+ :adaptiveConfig="{ offsetBottom: 108 }"
+ :data="dataList"
+ :columns="columns"
+ :pagination="{ ...pagination, size }"
+ :header-cell-style="{
+ background: 'var(--el-fill-color-light)',
+ color: 'var(--el-text-color-primary)'
+ }"
+ @selection-change="handleSelectionChange"
+ @page-size-change="handleSizeChange"
+ @page-current-change="handleCurrentChange"
+ >
+ <template #operation="{ row }">
+ <el-button
+ class="reset-margin"
+ link
+ type="primary"
+ :size="size"
+ :icon="useRenderIcon(EditPen)"
+ @click="openDialog('淇敼', row)"
+ >
+ 淇敼
+ </el-button>
+ <el-popconfirm
+ :title="`鏄惁纭鍒犻櫎瑙掕壊鍚嶇О涓�${row.name}鐨勮繖鏉℃暟鎹甡"
+ @confirm="handleDelete(row)"
+ >
+ <template #reference>
+ <el-button
+ class="reset-margin"
+ link
+ type="primary"
+ :size="size"
+ :icon="useRenderIcon(Delete)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-popconfirm>
+ </template>
+ </pure-table>
+ </el-card>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-dropdown-menu__item i) {
+ margin: 0;
+}
+
+.main-content {
+ margin: 24px 24px 0 !important;
+}
+
+.search-form {
+ :deep(.el-form-item) {
+ margin-bottom: 12px;
+ }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 87a030d..ab1abe3 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,7 +3,7 @@
<div class="notice">
<div class="left">
<div
- v-for="(item, index) in state.gonggaoList"
+ v-for="(item, index) in stateHook.gonggaoList"
:key="index"
:class="['item', stateHook.active == index ? 'item1' : '']"
@click="getShouyeOrder(index)"
@@ -373,13 +373,7 @@
roleList: [],
rolesCode: [],
userInfo: {} as userType,
- accessToken: "",
- gonggaoList: [
- { name: "鎷涢噰鍏憡" },
- { name: "鏇存鍏憡" },
- { name: "缁撴灉鍏憡" }
- // { name: "鍏朵粬鍏憡" }
- ]
+ accessToken: ""
});
onMounted(() => {
// exRole().then(res => {
diff --git a/src/views/home/info.vue b/src/views/home/info.vue
new file mode 100644
index 0000000..a99860c
--- /dev/null
+++ b/src/views/home/info.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, h } from "vue";
+import MyHeader from "./component/myHeader.vue";
+import MyFooter from "./component/myFooter.vue";
+import { useIndex } from "../home/utils/hook";
+import tableList from "./component/tableList.vue";
+import { ArrowRight } from "@element-plus/icons-vue";
+import EosIconsClusterManagement from "~icons/eos-icons/cluster-management";
+const {
+ getNeirongfabuDetail,
+ route,
+ router,
+ getFeizhengfuDetail,
+ stateHook,
+ getOrderList
+} = useIndex();
+defineOptions({
+ name: "gonggaoInfo"
+});
+</script>
+
+<template>
+ <div class="bg-[#f5f5f5] min-h-[100%]">
+ <my-header />
+ <div class="w-[80%] m-auto p-5">
+ <div class="h=[52px] w-[100%] bg-white p-2 pl-4 flex items-center">
+ <span class="text-sm">鎮ㄧ殑褰撳墠浣嶇疆锛�</span>
+ <el-breadcrumb :separator-icon="ArrowRight">
+ <el-breadcrumb-item :to="{ path: '/index' }" replace>
+ 棣栭〉
+ </el-breadcrumb-item>
+ <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>
+ <el-row class="mt-5 flex justify-between">
+ <el-col :span="3">
+ <div class="left">
+ <div
+ v-for="(item, index) in stateHook.gonggaoList"
+ :key="index"
+ :class="['item', stateHook.activeList == index ? 'item1' : '']"
+ class="h-[58px] w-[188px] bg-white flex items-center justify-center"
+ @click="getOrderList(index)"
+ >
+ <EosIconsClusterManagement
+ :style="{ color: stateHook.activeList == index ? 'white' : '' }"
+ />
+ <span class="ml-4">{{ item.name }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="21">
+ <div class="right">
+ <tableList />
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ <my-footer />
+ </div>
+</template>
+
+<style lang="scss" scoped>
+.item {
+ background: white;
+ cursor: pointer;
+ font-size: 14px;
+}
+.item1 {
+ background: rgb(20, 92, 205);
+ span {
+ color: rgb(254, 254, 254);
+ }
+}
+</style>
diff --git a/src/views/home/utils/hook.tsx b/src/views/home/utils/hook.tsx
index dd2df48..9cf3975 100644
--- a/src/views/home/utils/hook.tsx
+++ b/src/views/home/utils/hook.tsx
@@ -1,5 +1,8 @@
-import { onMounted, reactive } from "vue";
+import { reactive, ref, onMounted, h, toRaw, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import type { PaginationProps } from "@pureadmin/table";
import {
pageGonggao,
pageGengzgeng,
@@ -7,7 +10,8 @@
neirongfabuDetail,
shouyeOrder,
shouyeChangeOrder,
- feizhengfuDetail
+ feizhengfuDetail,
+ pageZhongbiaoGonggao
} from "@/api/item/shouye";
const convertFujianToObjects = (fujianStr, fujianNameStr) => {
// 鍒嗗壊瀛楃涓蹭负鏁扮粍骞惰繃婊ょ┖鍊�
@@ -44,20 +48,15 @@
shouyeZhongbiaoOrderList: [],
shouyeOrderList: [],
active: 0,
- gonggaoDetail: {}
+ activeList: 0,
+ gonggaoDetail: {},
+ gonggaoList: [
+ { name: "鎷涢噰鍏憡" },
+ { name: "鏇存鍏憡" },
+ { name: "缁撴灉鍏憡" }
+ // { name: "鍏朵粬鍏憡" }
+ ]
});
- async function getPageGonggao() {
- const res = await pageGonggao();
- stateHook.pageGonggaoList = res.result;
- }
- async function getPageGengzgeng() {
- const res = await pageGengzgeng();
- stateHook.pageGonggaoList = res.result;
- }
- async function getShouyeZhongbiaoOrder() {
- const res = await shouyeZhongbiaoOrder();
- stateHook.shouyeZhongbiaoOrderList = res.result;
- }
async function getNeirongfabuDetail(data) {
const res = await neirongfabuDetail(data);
stateHook.pageGonggaoList = res.result;
@@ -88,6 +87,9 @@
break;
}
}
+ async function getOrderList(active) {
+ stateHook.activeList = active;
+ }
async function getShouyeChangeOrder() {
const res = await shouyeChangeOrder();
stateHook.shouyeOrderList = res.result;
@@ -95,21 +97,130 @@
function goDetail(id) {
router.push({ name: "gonggaoDetail", query: { id } });
}
- onMounted(() => {
- console.log("---");
- // getNeirongfabuDetail();
- // getPageGonggao();
- // getPageGengzgeng();
- // getShouyeZhongbiaoOrder();
+ const form = reactive({
+ keyword: "",
+ createDateRange: ""
});
+ const curRow = ref();
+ const dataList = ref([]);
+ const loading = ref(true);
+
+ const pagination = reactive<PaginationProps>({
+ total: 0,
+ pageSize: 10,
+ currentPage: 1,
+ background: true
+ });
+ const columns: TableColumnList = [
+ {
+ label: "鍖哄煙",
+ prop: "xingzhengquyuName",
+ minWidth: 80
+ },
+ {
+ label: "閲囪喘鏂瑰紡",
+ prop: "caigoufangshiName",
+ width: 100
+ },
+ {
+ label: "鍚嶇О",
+ prop: "projectName",
+ minWidth: 100
+ },
+ {
+ label: "鍙戝竷鏃堕棿",
+ prop: "fabuDate",
+ width: 160,
+ formatter: ({ fabuDate }) => dayjs(fabuDate).format("YYYY-MM-DD HH:mm:ss")
+ }
+ ];
+
+ function handleDelete(row) {
+ message(`鎮ㄥ垹闄や簡瑙掕壊鍚嶇О涓�${row.name}鐨勮繖鏉℃暟鎹甡, { type: "success" });
+ onSearch();
+ }
+
+ function handleSizeChange(val: number) {
+ console.log(`${val} items per page`);
+ }
+
+ function handleCurrentChange(val: number) {
+ console.log(`current page: ${val}`);
+ }
+
+ function handleSelectionChange(val) {
+ console.log("handleSelectionChange", val);
+ }
+
+ async function onSearch() {
+ loading.value = true;
+ let res;
+ switch (stateHook.activeList) {
+ case 0:
+ res = await pageGonggao(form);
+ break;
+ case 1:
+ res = await pageGengzgeng(form);
+ break;
+ case 2:
+ res = await pageZhongbiaoGonggao(form);
+ break;
+ }
+ const { result } = res;
+ // dataList.value = data.list;
+ dataList.value = result.items;
+ loading.value = false;
+ pagination.total = result.total;
+ pagination.pageSize = result.pageSize;
+ pagination.currentPage = result.page;
+
+ // setTimeout(() => {
+ // loading.value = false;
+ // }, 500);
+ }
+
+ const resetForm = formEl => {
+ if (!formEl) return;
+ formEl.resetFields();
+ onSearch();
+ };
+
+ /** 楂樹寒褰撳墠鏉冮檺閫変腑琛� */
+ function rowStyle({ row: { id } }) {
+ return {
+ cursor: "pointer",
+ background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
+ };
+ }
+
+ onMounted(async () => {
+ onSearch();
+ // const { data } = await getRoleMenu();
+ // treeIds.value = getKeyList(data, "id");
+ // treeData.value = handleTree(data);
+ });
+
return {
stateHook,
- getPageGonggao,
getShouyeOrder,
getNeirongfabuDetail,
goDetail,
route,
router,
- getFeizhengfuDetail
+ getFeizhengfuDetail,
+ getOrderList,
+ form,
+ curRow,
+ loading,
+ columns,
+ rowStyle,
+ dataList,
+ pagination,
+ onSearch,
+ resetForm,
+ handleDelete,
+ handleSizeChange,
+ handleCurrentChange,
+ handleSelectionChange
};
}
--
Gitblit v1.9.1