公告信息页面

zhangwei

7 天以前 3324a54fa4d0840f8a5dc8adb21753180ecd3f3c

公告信息页面

 .env

@@ -2,4 +2,4 @@
VITE_PORT = 8848

# 是否隐藏首页 隐藏 true 不隐藏 false （勿删除，VITE_HIDE_HOME只需在.env文件配置）
VITE_HIDE_HOME = true
VITE_HIDE_HOME = false

 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" });
        }

 src/router/modules/home.ts

@@ -9,8 +9,8 @@
  meta: {
    icon: "ep/home-filled",
    title: "首页",
    rank: 0,
    showLink: false
    rank: 0
    // showLink: false
  },
  children: [
    {

 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"),

 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;

 src/views/home/component/tableList.vue

New file
@@ -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>

 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 => {

 src/views/home/info.vue

New file
@@ -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>

 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
  };
}