公安退出登录、优化菜单缓存、

2024-09-10 11:06:18 +08:00 · 2024-09-10 11:06:18 +08:00 · cfc3b0641a
parent 0125301cee
commit cfc3b0641a
8 changed files with 257 additions and 30 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/policeManagement/components.d.ts
+++ b/policeManagement/components.d.ts
@ -18,6 +18,7 @@ declare module 'vue' {
    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
    ADivider: typeof import('ant-design-vue/es')['Divider']
    ADrawer: typeof import('ant-design-vue/es')['Drawer']
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
    AForm: typeof import('ant-design-vue/es')['Form']
    AFormItem: typeof import('ant-design-vue/es')['FormItem']
    AInput: typeof import('ant-design-vue/es')['Input']
--- a/policeManagement/src/components/layout/header/LayoutHeader.vue
+++ b/policeManagement/src/components/layout/header/LayoutHeader.vue
@ -1,20 +1,58 @@
 <template>
  <div class="flex-justify-between h-f">
    <div class="flex-center">
-      <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
-      <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
+      <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)"/>
+      <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
    </div>
    <div class="margin-right flex-center">
-      <a-avatar />
+
+      <a-dropdown :trigger="['click']">
+        <a-avatar @click.prevent/>
+
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="3" @click="showConfirm">退出登录</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
    </div>
  </div>
 </template>

 <script setup lang="ts">
+
 // import { staticRouter } from '@/router/staticRouters.ts'
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
+import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue'
+import {useUserStore} from "@/stores/modules/userStore.ts";

 const collapsed = defineModel<boolean>('collapsed')
+import {Modal} from 'ant-design-vue';
+import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
+import {createVNode} from 'vue';
+import router from "@/router";
+
+const showConfirm = () => {
+  Modal.confirm({
+    title: '确定要退出登录么？',
+    icon: createVNode(ExclamationCircleOutlined),
+    // content: createVNode('div', {style: 'color:red;'}, 'Some descriptions'),
+    async onOk() {
+      console.log('OK');
+
+      //清除登录信息
+      await useUserStore().resetUserInfo();
+      //跳转登录页
+      await router.push({
+        path: '/login'
+      })
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+    class: 'test',
+  });
+};
 </script>

 <style scoped lang="scss">
--- a/policeManagement/src/components/layout/layout.vue
+++ b/policeManagement/src/components/layout/layout.vue
@ -2,7 +2,7 @@
  <a-layout class="main-content">
    <a-layout-sider :collapsed="collapsed" theme="light" :trigger="null" collapsible>
      <div v-if="!collapsed" class="title flex-center">
-        <div>超级后台</div>
+        <div>公安后台</div>
      </div>
      <div v-else class="logo flex-center">
        <img src="@/assets/vue.svg" title="超级后台" alt="xx" />
--- a/policeManagement/src/components/login/TelephoneLogin.vue
+++ b/policeManagement/src/components/login/TelephoneLogin.vue
@ -72,6 +72,8 @@ const login = async () => {
  })
  //保存token
  userStore.saveTokenInfo(resp.data as TokenInfo)
+  localStorage.setItem("openKeys", []);
+  localStorage.setItem("selectedKeys", []);
  //跳转页面
  router.push('/index').then(() => {
    notification.success({
--- a/policeManagement/src/router/staticRouters.ts
+++ b/policeManagement/src/router/staticRouters.ts
@ -81,16 +81,16 @@ export const staticRouter: RouteRecordRaw[] =
                    },
                    component: () => import('@/views/query/publicUnit.vue')
                },
-                {
-                    path: 'weapp-user',  // 这里使用相对路径而不是 '/register'
-                    name: 'weapp-user',
-                    meta: {
-
-                        title: '微信小程序用户',
-                        keepalive: true
-                    },
-                    component: () => import('@/views/query/weappUser.vue')
-                },
+                // {
+                //     path: 'weapp-user',  // 这里使用相对路径而不是 '/register'
+                //     name: 'weapp-user',
+                //     meta: {
+                //
+                //         title: '微信小程序用户',
+                //         keepalive: true
+                //     },
+                //     component: () => import('@/views/query/weappUser.vue')
+                // },
            ]
        },
        {
--- a/policeManagement/src/views/query/publicUnit.vue
+++ b/policeManagement/src/views/query/publicUnit.vue
@ -1,7 +1,8 @@
 <template>
  <div>
    <!-- 企事业单位 -->
-    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions" :scroll="{ x }">
+    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions"
+                 :scroll="{ x }">
      <!-- <template #tableHeader>
        <a-space>
          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
@ -15,18 +16,19 @@
 </template>

 <script setup lang="tsx">
-import { openDB, storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
+import {storeTreeData, loadTreeFromCache} from '@/utils/DB.ts'
 import api from '@/axios'
-import { ref, reactive } from 'vue'
+import {ref, reactive} from 'vue'
 import TableProMax from '@/components/table/TableProMax.vue'
-import { TableProMaxProps } from '@/types/components/table/index.ts'
-import { ComponentExposed } from 'vue-component-type-helpers'
-import { dictSelectNodes } from '@/config/dict.ts'
-import { publicUnitPagerQueryParams, FromItem } from '@/types/views/publicUnit.ts'
+import {TableProMaxProps} from '@/types/components/table/index.ts'
+import {ComponentExposed} from 'vue-component-type-helpers'
+import {dictSelectNodes} from '@/config/dict.ts'
+import {publicUnitPagerQueryParams, FromItem} from '@/types/views/publicUnit.ts'
 // import FormProMax from '@/components/form/FormProMax.vue'
-import { FormProMaxItemOptions } from '@/types/components/form//index.ts'
-import { FormExpose } from 'ant-design-vue/es/form/Form'
-import { message } from 'ant-design-vue'
+import {FormProMaxItemOptions} from '@/types/components/form//index.ts'
+import {FormExpose} from 'ant-design-vue/es/form/Form'
+import {message} from 'ant-design-vue'
+
 const formRef = ref<FormExpose>(null)
 type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
 const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
@ -44,7 +46,7 @@ const columns: TableProps['columns'] = [
  {
    dataIndex: 'provinceName',
    title: '行政区划',
-    customRender: ({ record }) => {
+    customRender: ({record}) => {
      return `${record?.provinceName}/${record?.cityName}/${record?.districtsName}/${record?.streetName}`
    },
  },
@ -70,14 +72,14 @@ const columns: TableProps['columns'] = [
  {
    dataIndex: 'contactPersonInfo',
    title: '联系人姓名',
-    customRender: ({ record }) => {
+    customRender: ({record}) => {
      return record?.contactPersonInfo?.name
    },
  },
  {
    dataIndex: 'contactPersonInfo',
    title: '联系人手机号',
-    customRender: ({ record }) => {
+    customRender: ({record}) => {
      return record?.contactPersonInfo?.telephone
    },
  },
--- a/policeManagement/src/views/user/user-weapp.vue
+++ b/policeManagement/src/views/user/user-weapp.vue
@ -1,8 +1,192 @@
 <template>
  <div>
    <!-- 小程序用户 -->
-    小程序用户
+    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions"
+                 :scroll="{ x }">
+
+    </TableProMax>
+    <a-modal v-model:open="visible" :title="title" @ok="submit" @cancel="closeModal">
+
+    </a-modal>
  </div>
 </template>

-<script setup lang="ts"></script>
+<script setup lang="tsx">
+import {storeTreeData, loadTreeFromCache} from '@/utils/DB.ts'
+import api from '@/axios'
+import {ref, reactive} from 'vue'
+import TableProMax from '@/components/table/TableProMax.vue'
+import {TableProMaxProps} from '@/types/components/table/index.ts'
+import {ComponentExposed} from 'vue-component-type-helpers'
+import {dictSelectNodes} from '@/config/dict.ts'
+import {publicUnitPagerQueryParams, FromItem} from '@/types/views/publicUnit.ts'
+import {FormProMaxItemOptions} from '@/types/components/form//index.ts'
+import {FormExpose} from 'ant-design-vue/es/form/Form'
+import {message} from 'ant-design-vue'
+
+const formRef = ref<FormExpose>(null)
+type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
+const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
+const reqApi: TableProps['requestApi'] = (params) => api.post('/management/miniProgramUserPager', params) //分页
+
+const columns: TableProps['columns'] = [
+  {
+    dataIndex: 'name',
+    title: '单位名称',
+  },
+  // {
+  //   dataIndex: 'code',
+  //   title: '单位代码',
+  // },
+  {
+    dataIndex: 'provinceName',
+    title: '行政区划',
+    customRender: ({record}) => {
+      return `${record?.provinceName}/${record?.cityName}/${record?.districtsName}/${record?.streetName}`
+    },
+  },
+
+  // {
+  //   dataIndex: 'isEnable',
+  //   title: '是否启用',
+  //   customRender: ({ text }) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
+  //   width: 150,
+  // },
+  // {
+  //   dataIndex: 'checkStatus',
+  //   title: '是否审核',
+  //   customRender: ({ record }) => {
+  //     return record.checkStatus?.extData?.color === 'success' ? <a-tag color='green'>{record?.checkStatus?.label}</a-tag> : <a-tag color='#f50'>{record?.checkStatus?.label}</a-tag>
+  //   },
+  // },
+  {
+    dataIndex: 'address',
+    title: '详细地址',
+  },
+
+  {
+    dataIndex: 'contactPersonInfo',
+    title: '联系人姓名',
+    customRender: ({record}) => {
+      return record?.contactPersonInfo?.name
+    },
+  },
+  {
+    dataIndex: 'contactPersonInfo',
+    title: '联系人手机号',
+    customRender: ({record}) => {
+      return record?.contactPersonInfo?.telephone
+    },
+  },
+  {
+    dataIndex: 'createTime',
+    title: '创建时间',
+  },
+  {
+    dataIndex: 'remark',
+    title: '备注',
+  },
+]
+const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
+const visible = ref(false)
+const title = ref('新增用户')
+const addUserManagement = () => {
+  visible.value = true
+  title.value = ''
+}
+
+const getTree = async () => {
+  // 先尝试从缓存中加载数据
+  const cachedData = await loadTreeFromCache()
+  if (cachedData) {
+    console.log('未发请求')
+    // 如果缓存存在，直接使用缓存数据
+    return cachedData
+  } else {
+    console.log('发起了请求')
+    // 如果缓存不存在，发起 API 请求
+    const res = await api.get<any>('/common/administrativeDivisionTree')
+    await storeTreeData(res.data)
+    return res.data
+  }
+}
+const loadOptions = async () => {
+  const treeData = await getTree()
+  searchFormOptions.treeSelect.options = treeData
+}
+loadOptions()
+const searchFormOptions = reactive<TableProps['searchFormOptions']>({
+  name: {
+    type: 'input',
+    label: '名称',
+  },
+  treeSelect: {
+    type: 'cascader',
+    label: '行政区划',
+  },
+  telephone: {
+    type: 'input',
+    label: '手机号',
+  },
+  // isEnable: {
+  //   type: 'select',
+  //   label: '是否启用',
+  //   options: [
+  //     {
+  //       value: null,
+  //       label: '全部',
+  //     },
+  //     ...dictSelectNodes('IsEnable'),
+  //   ],
+  // },
+})
+
+const formParams = ref<{
+  snowFlakeId?: string
+  name: string
+  sex: number
+  telephone: string
+  isEnable: any
+  remark?: string
+}>({
+  name: '',
+  sex: 0,
+  telephone: '',
+  isEnable: 0,
+})
+
+const submit = async () => {
+  // await formRef.value.validate()
+}
+const closeModal = () => {
+  visible.value = false
+}
+const formItemOptions = ref<FormProMaxItemOptions<FromItem>>({
+  name: {
+    type: 'input',
+    label: '姓名',
+    required: true,
+  },
+  sex: {
+    type: 'radioGroup',
+    label: '性别',
+    options: dictSelectNodes('Sex'),
+    required: true,
+  },
+  telephone: {
+    type: 'input',
+    label: '手机号',
+    required: true,
+  },
+  isEnable: {
+    type: 'radioGroup',
+    label: '启用状态',
+    options: dictSelectNodes('IsEnable'),
+    required: true,
+  },
+  remark: {
+    type: 'inputTextArea',
+    label: '备注',
+  },
+})
+</script>