系统管理

src/config/constants.js

@@ -0,0 +1,5 @@
+export const NOTICE_TYPE = {
+  COMMON: '公告',
+  SERVICE_UNIT: '服务单元通知',
+  SUPPLIER: '供应商通知',
+};

src/mock/index.js

@@ -313,6 +313,86 @@ const menusList = [
     sort: 1,
     name: 'PasswordModify',
   },
+  {
+    id: 41,
+    title: '系统管理',
+    parentId: 0,
+    url: '/system',
+    sort: 8,
+    name: 'System',
+  },
+  {
+    id: 42,
+    title: '配置管理',
+    parentId: 41,
+    url: '/system/config-manage',
+    sort: 1,
+    name: 'ConfigManage',
+  },
+  {
+    id: 43,
+    title: '客户配置',
+    parentId: 42,
+    url: '/system/config-manage/customer-manage',
+    sort: 1,
+    name: 'CustomerManage',
+  },
+  {
+    id: 44,
+    title: '供应商配置',
+    parentId: 42,
+    url: '/system/config-manage/supplier-manage',
+    sort: 1,
+    name: 'SupplierManage',
+  },
+  {
+    id: 45,
+    title: '设备配置',
+    parentId: 42,
+    url: '/system/config-manage/device-manage',
+    sort: 1,
+    name: 'DeviceManage',
+  },
+  {
+    id: 46,
+    title: '服务档位配置',
+    parentId: 42,
+    url: '/system/config-manage/service-level-manage',
+    sort: 1,
+    name: 'ServiceLevelManage',
+  },
+  {
+    id: 47,
+    title: '考勤配置',
+    parentId: 42,
+    url: '/system/config-manage/checkin-manage',
+    sort: 1,
+    name: 'CheckinManage',
+  },
+  {
+    id: 48,
+    title: '通知日志',
+    parentId: 41,
+    url: '/system/notice-log',
+    sort: 2,
+    name: 'NoticeLog',
+  },
+  {
+    id: 49,
+    title: '通知公告管理',
+    parentId: 48,
+    url: '/system/notice-log/notice-manage',
+    sort: 1,
+    name: 'NoticeManage',
+  },
+  {
+    id: 50,
+    title: '日志查询',
+    parentId: 48,
+    url: '/system/notice-log/log-manage',
+    sort: 2,
+    name: 'LogManage',
+  },
 ];
 
 export const menusApi = Mock.mock('/api/getMenus', 'get', () => {

src/router/asyncRoutes.js

@@ -5,6 +5,7 @@ import resourceGuard from './modules/resourceGuard';
 import workHours from './modules/workHours';
 import projectQuality from './modules/projectQuality';
 import User from './modules/user';
+import System from './modules/system';
 
 const asyncRoutes = [
   myWorkbenches,
@@ -14,6 +15,7 @@ const asyncRoutes = [
   workHours,
   projectQuality,
   User,
+  System,
 ];
 export const moduleMap = asyncRoutes.reduce((obj, item) => {
   obj[item.path.slice(1)] = item.name;

src/router/modules/system.js

@@ -0,0 +1,108 @@
+export default {
+  name: 'System',
+  path: '/system',
+  redirect: { name: 'CustomerManage' },
+  meta: {
+    title: '系统管理',
+    sort: 2,
+    isModule: true,
+  },
+  children: [
+    {
+      name: 'ConfigManage',
+      path: '/system/config-manage',
+      redirect: { name: 'CustomerManage' },
+      meta: {
+        title: '配置管理',
+        sort: 1,
+        icon: 'setting',
+      },
+      children: [
+        {
+          name: 'CustomerManage',
+          path: '/system/config-manage/customer-manage',
+          component: () =>
+            import('@/views/system/config-manage/customer-manage/index.vue'),
+          meta: {
+            title: '客户配置',
+            sort: 1,
+          },
+        },
+        {
+          name: 'SupplierManage',
+          path: '/system/config-manage/supplier-manage',
+          component: () =>
+            import('@/views/system/config-manage/supplier-manage/index.vue'),
+          meta: {
+            title: '供应商配置',
+            sort: 1,
+          },
+        },
+        {
+          name: 'DeviceManage',
+          path: '/system/config-manage/device-manage',
+          component: () =>
+            import('@/views/system/config-manage/device-manage/index.vue'),
+          meta: {
+            title: '设备配置',
+            sort: 1,
+          },
+        },
+        {
+          name: 'ServiceLevelManage',
+          path: '/system/config-manage/service-level-manage',
+          component: () =>
+            import(
+              '@/views/system/config-manage/service-level-manage/index.vue'
+            ),
+          meta: {
+            title: '服务档位配置',
+            sort: 1,
+          },
+        },
+        {
+          name: 'CheckinManage',
+          path: '/system/config-manage/checkin-manage',
+          component: () =>
+            import('@/views/system/config-manage/checkin-manage/index.vue'),
+          meta: {
+            title: '考勤配置',
+            sort: 1,
+          },
+        },
+      ],
+    },
+    {
+      name: 'NoticeLog',
+      path: '/system/notice-log',
+      redirect: { name: 'NoticeManage' },
+      meta: {
+        title: '通知日志',
+        sort: 1,
+        icon: 'root-list',
+      },
+      children: [
+        {
+          name: 'NoticeManage',
+          path: '/system/notice-log/notice-manage',
+          component: () =>
+            import('@/views/system/notice-log/notice-manage/index.vue'),
+          meta: {
+            title: '通知公告管理',
+            sort: 1,
+          },
+        },
+        {
+          name: 'LogManage',
+          path: '/system/notice-log/log-manage',
+          component: () =>
+            import('@/views/system/notice-log/log-manage/index.vue'),
+          meta: {
+            title: '日志查询',
+            sort: 2,
+          },
+        },
+      ],
+    },
+  ],
+};

src/views/system/config-manage/checkin-manage/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="registration-query flex flex-col h-full">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success" @click="handleAdd">新增</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="CheckinManage">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const columns = [
+  { colKey: 'a', title: '服务单元' },
+  { colKey: 'b', title: '发布状态' },
+  { colKey: 'c', title: '考勤组名称' },
+  { colKey: 'd', title: '适用考勤对象' },
+  { colKey: 'e', title: '适用供应商' },
+  { colKey: 'f', title: '签到时段' },
+  { colKey: 'g', title: '签退时段' },
+  { colKey: 'h', title: '审核角色' },
+  { colKey: 'i', title: '是否开启人脸' },
+  { colKey: 'j', title: '允许补卡次数' },
+  { colKey: 'k', title: '创建人' },
+  { colKey: 'l', title: '创建时间' },
+  {
+    title: '管理',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 120,
+    align: 'center',
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEdit(row);
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="danger"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDelete(row);
+            }}
+          >
+            删除
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元名称',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    options: [
+      { value: 1, label: '已发布' },
+      { value: 2, label: '未发布' },
+    ],
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+]);
+const params = reactive({
+  a: '',
+});
+
+const handleAdd = () => {
+  console.log('add');
+};
+const handleEdit = (row) => {
+  console.log(row);
+};
+const handleDelete = (row) => {
+  console.log(row);
+};
+</script>
+
+<style></style>

src/views/system/config-manage/customer-manage/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="registration-query flex flex-col h-full">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success" @click="handleAdd">新增</t-button>
+        <t-button theme="success" @click="handleImport">批量导入</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="CustomerManage">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const columns = [
+  { colKey: 'a', title: '客户ID' },
+  { colKey: 'b', title: '客户名称' },
+  { colKey: 'c', title: '客户类型' },
+  { colKey: 'd', title: '省份' },
+  { colKey: 'e', title: '城市' },
+  { colKey: 'f', title: '县区' },
+  { colKey: 'g', title: '地址' },
+  { colKey: 'h', title: '客户经理' },
+  { colKey: 'i', title: '服务档位名称' },
+  { colKey: 'j', title: '项目角色配置' },
+  { colKey: 'k', title: '标准人天' },
+  { colKey: 'l', title: '创建人' },
+  { colKey: 'm', title: '创建时间' },
+  {
+    title: '管理',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 120,
+    align: 'center',
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEdit(row);
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="danger"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDelete(row);
+            }}
+          >
+            删除
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const fields = ref([
+  {
+    prop: 'a',
+    label: '客户类型',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    options: [
+      { value: 1, label: '研究生' },
+      { value: 2, label: '高校教务处' },
+    ],
+  },
+  {
+    prop: 'b',
+    label: '客户经理',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    options: [{ value: 1, label: '张三' }],
+  },
+  {
+    prop: 'd',
+    label: '客户名称',
+    labelWidth: 100,
+    colSpan: 5,
+    attrs: {
+      placeholder: '消息名称模糊查询',
+      clearable: true,
+    },
+  },
+  {
+    prop: 'b',
+    label: '服务档位',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    options: [{ value: 1, label: '一档' }],
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: [],
+  d: '',
+});
+
+const handleAdd = () => {
+  console.log('add');
+};
+const handleImport = () => {
+  console.log('import');
+};
+const handleDelete = (row) => {
+  console.log(row);
+};
+const handleEdit = (row) => {
+  console.log(row);
+};
+</script>
+
+<style></style>

src/views/system/config-manage/device-manage/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="registration-query flex flex-col h-full">
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success" @click="handleAdd">新增</t-button>
+        <t-button theme="danger" @click="handleDelete">作废</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="DeviceManage">
+// import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const columns = [
+  { colKey: 'a', title: '设别编号' },
+  { colKey: 'b', title: '序列号' },
+  { colKey: 'c', title: '品牌' },
+  { colKey: 'e', title: '购买时间' },
+  { colKey: 'f', title: '供应商' },
+  { colKey: 'g', title: '运行状态' },
+  { colKey: 'h', title: '当前所在地' },
+  { colKey: 'i', title: '总扫描量' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 80,
+    align: 'center',
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEdit(row);
+            }}
+          >
+            修改
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const handleAdd = () => {
+  console.log('add');
+};
+const handleDelete = () => {
+  console.log('delete');
+};
+const handleEdit = (row) => {
+  console.log(row);
+};
+</script>
+
+<style></style>

src/views/system/config-manage/service-level-manage/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="registration-query flex flex-col h-full">
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success" @click="handleAdd">新增</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="ServiceLevelManage">
+// import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const columns = [
+  { colKey: 'a', title: '服务档位名称' },
+  { colKey: 'b', title: '业务类型' },
+  { colKey: 'c', title: '项目角色配置' },
+  { colKey: 'd', title: '创建人' },
+  { colKey: 'e', title: '创建时间' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 120,
+    align: 'center',
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEdit(row);
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="danger"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDelete(row);
+            }}
+          >
+            删除
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const handleAdd = () => {
+  console.log('add');
+};
+const handleEdit = (row) => {
+  console.log(row);
+};
+const handleDelete = (row) => {
+  console.log(row);
+};
+</script>
+
+<style></style>

src/views/system/config-manage/supplier-manage/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="registration-query flex flex-col h-full">
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success" @click="handleAdd">新增</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="SupplierManage">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const columns = [
+  { colKey: 'a', title: '供应商编号' },
+  { colKey: 'b', title: '供应商名称' },
+  { colKey: 'c', title: '类型' },
+  { colKey: 'd', title: '备注' },
+  { colKey: 'e', title: '启用/禁用' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 120,
+    align: 'center',
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEdit(row);
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDisable(row);
+            }}
+          >
+            禁用
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const handleAdd = () => {
+  console.log('add');
+};
+const handleEdit = (row) => {
+  console.log(row);
+};
+const handleDisable = (row) => {
+  console.log(row);
+};
+</script>
+
+<style></style>

src/views/system/notice-log/log-manage/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div class="registration-query flex flex-col h-full">
+      <SearchForm :fields="fields" :params="params"></SearchForm>
+      <div class="flex-1 page-wrap">
+        <t-table
+          size="small"
+          row-key="id"
+          :columns="columns"
+          :data="tableData"
+          bordered
+          :pagination="{
+            defaultCurrent: 1,
+            defaultPageSize: 10,
+            onChange,
+            total: pagination.total,
+          }"
+        >
+        </t-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="LogManage">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const columns = [
+  { colKey: 'a', title: '时间', width: 170 },
+  { colKey: 'b', title: '内容' },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const fields = ref([
+  {
+    prop: 'a',
+    label: '时间范围',
+    type: 'daterange',
+    labelWidth: 100,
+    colSpan: 7,
+  },
+  {
+    prop: 'b',
+    label: '关键字',
+    labelWidth: 80,
+    colSpan: 5,
+    attrs: {
+      placeholder: '内容关键字模糊查询',
+      clearable: true,
+    },
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+]);
+const params = reactive({
+  a: [],
+  b: '',
+});
+</script>

src/views/system/notice-log/notice-manage/edit-notice-dialog.vue

@@ -0,0 +1,89 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    :header="title"
+    :width="800"
+    :closeOnOverlayClick="false"
+  >
+    <t-form ref="formRef" :model="formData" :labelWidth="100">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="6">
+          <t-form-item label="类型">
+            <t-select v-model="formData.type">
+              <t-option
+                v-for="(val, key) in NOTICE_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="服务单元">
+            <t-select v-model="formData.unit">
+              <t-option
+                v-for="(val, key) in NOTICE_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="通知名称">
+            <t-input v-model="formData.name" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="通知正文">
+            <t-textarea
+              v-model="formData.content"
+              placeholder="请输入通知正文"
+              :maxlength="9999"
+              :autosize="{ minRows: 5, maxRows: 10 }"
+            /> </t-form-item
+        ></t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="EditNoticeDialog">
+import { ref, computed } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+import { NOTICE_TYPE } from '@/config/constants';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+
+const title = computed(() => {
+  return (isEdit.value ? '编辑' : '新增') + '通知公告';
+});
+
+const { formData, isEdit } = useClearDialog(
+  {
+    type: '',
+    unit: '',
+    name: '',
+    content: '',
+  },
+  props,
+  null
+);
+const save = () => {
+  //ajax...
+  emit('success');
+};
+</script>

src/views/system/notice-log/notice-manage/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="registration-query flex flex-col h-full">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success" @click="handleAdd">新增</t-button>
+        <t-button theme="danger" @click="handleDelete">作废</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+
+    <edit-notice-dialog
+      v-model:visible="showEditNoticeDialog"
+      :curRow="curRow"
+      @success="fetchData"
+    ></edit-notice-dialog>
+  </div>
+</template>
+
+<script setup lang="jsx" name="NoticeManage">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+import EditNoticeDialog from './edit-notice-dialog.vue';
+const showEditNoticeDialog = ref(false);
+const curRow = ref(null);
+
+const columns = [
+  { colKey: 'row-select', type: 'multiple', width: 50 },
+  { colKey: 'a', title: '类型' },
+  { colKey: 'b', title: '消息名称' },
+  { colKey: 'c', title: '发布状态' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 240,
+    align: 'center',
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCancelPublish(row);
+            }}
+          >
+            撤销发布
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleFeedbackView(row);
+            }}
+          >
+            回执查询
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEdit(row);
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              handlePublish(row);
+            }}
+          >
+            发布
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const fields = ref([
+  {
+    prop: 'a',
+    label: '发布状态',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    options: [
+      { value: 1, label: '已发布' },
+      { value: 2, label: '未发布' },
+    ],
+  },
+  {
+    prop: 'b',
+    label: '类型',
+    type: 'select',
+    labelWidth: 60,
+    colSpan: 5,
+    options: [{ value: 1, label: '公告' }],
+  },
+  {
+    prop: 'c',
+    label: '发布时间',
+    type: 'daterange',
+    labelWidth: 100,
+    colSpan: 7,
+  },
+  {
+    prop: 'd',
+    label: '消息名称',
+    labelWidth: 100,
+    colSpan: 5,
+    attrs: {
+      placeholder: '消息名称模糊查询',
+      clearable: true,
+    },
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: [],
+  d: '',
+});
+
+const handleAdd = () => {
+  curRow.value = null;
+  showEditNoticeDialog.value = true;
+};
+const handleDelete = () => {
+  console.log('delete');
+};
+const handleCancelPublish = (row) => {
+  console.log(row);
+};
+const handleFeedbackView = (row) => {
+  console.log(row);
+};
+const handleEdit = (row) => {
+  curRow.value = row;
+  showEditNoticeDialog.value = true;
+};
+const handlePublish = (row) => {
+  console.log(row);
+};
+</script>
+
+<style></style>