完成了 后台用户页面、菜单还是带优化、移除了黄色警告

policeManagement/components.d.ts

@@ -26,6 +26,10 @@ declare module 'vue' {
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpace: typeof import('ant-design-vue/es')['Space']

policeManagement/src/components/layout/layout.vue

@@ -23,9 +23,9 @@
         </a-menu-item>
       </a-menu> -->
       <!-- 动态生成菜单项 -->
-      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
+      <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" theme="light" mode="inline">
         <template v-for="route in staticRouter">
-          <a-menu-item v-if="route.meta?.title === undefined && route.children">
+          <a-menu-item v-if="route.meta?.title === undefined && route.children" :key="route.path" @click="handleMenuClick(route.children[0].path)">
             <router-link :to="`${route.children[0].path}`">
               <HomeOutlined v-if="route.name === 'dashboard'" />
               <InsuranceOutlined v-if="route.name === 'police'" />
@@ -40,7 +40,7 @@
               <UserOutlined v-if="route.name === 'user'" />
               <span>{{ route.meta?.title }}</span>
             </template>
-            <a-menu-item v-for="child in route.children" :key="child.path">
+            <a-menu-item v-for="child in route.children" :key="child.path" @click="handleMenuClick(`${route.path}/${child.path}`)">
               <router-link :to="`${route.path}/${child.path}`">{{ child.meta?.title }}</router-link>
             </a-menu-item>
           </a-sub-menu>
@@ -71,15 +71,58 @@
 <script setup lang="ts">
 import { InsuranceOutlined, HomeOutlined, SoundOutlined, MailOutlined, ApartmentOutlined, UserOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
 import LayoutHeader from '@/components/layout/header/LayoutHeader.vue'
-import { computed } from 'vue'
+import { computed, watch, onMounted } from 'vue'
 import { staticRouter } from '@/router/staticRouters'
 import { useRoute } from 'vue-router'
 const route = useRoute()
+const selectedKeys = ref([route.path])
+/**
+ * [Vue warn] Write operation failed: computed value is readonly
+ * computed 计算属性绑定到 v-model。在 Vue 3 中，v-model 是一个双向绑定，它不仅读取数据，还期望可以写入数据。然而，computed 属性默认是只读的，所以会报这个警告。
+ */
+const handleMenuClick = (path: any) => {
+  // 手动更新 selectedKeys，让 Vue 立即识别到变化
+  selectedKeys.value = [path]
+  localStorage.setItem('selectedKeys', JSON.stringify([path]))
+}
+watch(
+  () => route.path,
+  (newPath) => {
+    selectedKeys.value = [newPath]
+  }
+)
+const openKeys = ref([])
+// 页面加载时，读取 localStorage 中的菜单状态
+onMounted(() => {
+  const savedSelectedKeys = localStorage.getItem('selectedKeys')
+  const savedOpenKeys = localStorage.getItem('openKeys')
+
+  if (savedSelectedKeys) {
+    selectedKeys.value = JSON.parse(savedSelectedKeys)
+  }
+  if (savedOpenKeys) {
+    openKeys.value = JSON.parse(savedOpenKeys)
+  }
+})
+
+// 监听 selectedKeys 和 openKeys 变化，并保存到 localStorage
+watch(selectedKeys, (newSelectedKeys) => {
+  localStorage.setItem('selectedKeys', JSON.stringify(newSelectedKeys))
+})
+
+watch(openKeys, (newOpenKeys) => {
+  localStorage.setItem('openKeys', JSON.stringify(newOpenKeys))
+})
 
 // 当前选中的菜单项
 // const selectedKeys = computed(() => route.path)
 
-const selectedKeys = computed(() => [route.path])
+// const selectedKeys = computed(() => {
+//   console.log(route.path)
+//   console.log([route.path])
+
+//   return [route.path]
+// })
 // 过滤出需要在菜单中显示的路由
 // const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
 // staticRouter.forEach((element) => {

policeManagement/src/config/dict.ts

@@ -0,0 +1,17 @@
+import api from "@/axios";
+
+type DictType =
+    'CheckStatus'
+    | 'DeleteFlag'
+    | 'IsEnable'
+    | 'IsOrNot'
+    | 'Sex'
+
+export const initEnums = () => {
+    api.get<Record<DictType, SelectNodeVo<any>[]>>('/common/enums').then(resp => {
+        sessionStorage.setItem('dictMap', JSON.stringify(resp.data))
+    })
+}
+
+export const dictSelectNodes = <T>(enumType: DictType): SelectNodeVo<T>[] => JSON.parse(sessionStorage.getItem('dictMap') as string)?.[enumType] || []
+

policeManagement/src/global.d.ts

@@ -20,3 +20,30 @@ interface dataStatus {
         value: number;
     };
 }
+class SelectNodeVo<T, E = Record<string, any>> {
+    value: T;
+    label: string;
+    options?: SelectNodeVo<T>[]
+    orderIndex?: number;
+    disabled?: boolean;
+    extData?: E
+}
+
+interface ExtData {
+    color?: string;
+}
+
+interface Option {
+    label: string;
+    value: string | number;
+    extData?: ExtData | null;
+}
+
+interface OptionsResponse {
+    IsEnable: Option[];
+    IsOrNot: Option[];
+    Sex: Option[];
+    CheckStatus: Option[];
+    ServiceProjectType: Option[];
+    DeleteFlag: Option[];
+}

policeManagement/src/main.ts

@@ -12,7 +12,9 @@ import router from "@/router";
 import pinia from "@/stores";
 
 const vueApp = createApp(App);
+import {initEnums} from "@/config/dict.ts";
 
+initEnums()
 vueApp
     .use(router)
     .use(pinia)

policeManagement/src/views/user/user.vue

@@ -1,96 +1,116 @@
 <template>
   <!-- 后台用户 -->
+  <!-- template 内部必须有一个根节点 div，否则<Transition>将会失效，所以这个<a-modal></a-modal> 组件必须放在 根节点 div 里面 -->
   <div>
     <div class="h-16 w-full bg-white rounded shadow-md py-5 px-10 flex items-center">
-      <div class="mr-5">关键字</div>
+      <div class="mr-5">名称</div>
-      <a-input class="w-40 mr-5" v-model:value="searchUser" autocomplete="off" placeholder="请输入用户名搜索" />
+      <a-input class="w-40 mr-5" v-model:value="searchUser" autocomplete="off" placeholder="请输入名称搜索" />
-      <div class="mr-5">状态</div>
+      <div class="mr-5 ml-5">是否启用</div>
       <a-space>
-        <a-select ref="select" v-model:value="selectValue" style="width: 120px" @focus="focus" @change="handleChange">
+        <a-select ref="select" v-model:value="isEnableValue" style="width: 120px" @focus="focus" @change="handleChange">
-          <a-select-option value="0">全部</a-select-option>
+          <a-select-option v-for="(item, index) in enumsIsEnable" :key="index" :value="item.value">{{ item.label }}</a-select-option>
-          <a-select-option value="1">启用</a-select-option>
-          <a-select-option value="2">禁用</a-select-option>
         </a-select>
       </a-space>
-      <a-button class="ml-5 flex items-center" type="primary" @click="search"><SearchOutlined style="font-size: 16px" />搜索</a-button>
+
-      <a-button class="ml-5 flex items-center"><SyncOutlined style="font-size: 16px" />重置</a-button>
+      <div class="mr-5 ml-5">性别</div>
+      <a-space>
+        <a-select ref="select" v-model:value="sexValue" style="width: 120px" @focus="focus" @change="sexChange">
+          <a-select-option v-for="(item, index) in enumsSex" :key="index" :value="item.value">{{ item.label }}</a-select-option>
+        </a-select>
+      </a-space>
+      <div class="mr-5 ml-5">手机号</div>
+      <a-input class="w-40 mr-5" v-model:value="searchTelePhone" autocomplete="off" placeholder="请输入手机号搜索" />
+      <a-button @click="search" class="ml-5 flex items-center" type="primary"> <SearchOutlined style="font-size: 16px" />搜索 </a-button>
+      <a-button @click="resetSearch" class="ml-5 flex items-center"><SyncOutlined style="font-size: 16px" />重置</a-button>
     </div>
 
     <div class="w-full h-full bg-white mt-5 rounded">
       <div class="w-full h-16 py-5 px-10 flex items-center">
-        <a-button class="flex items-center" type="primary" @click="search"><PlusOutlined style="font-size: 16px" />新增</a-button>
+        <a-button class="flex items-center" type="primary" @click="addUser"><PlusOutlined style="font-size: 16px" />新增</a-button>
-        <a-button :disabled="!hasSelected" class="ml-5 flex items-center" type="primary" danger @click="search"><DeleteOutlined style="font-size: 16px" />删除</a-button>
+        <!-- <a-button :disabled="!hasSelected" class="ml-5 flex items-center" type="primary" danger @click="search"><DeleteOutlined style="font-size: 16px" />删除</a-button> -->
       </div>
 
       <div class="px-10">
-        <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="tableData" />
+        <!-- :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" -->
+        <a-table :pagination="pagination" :columns="columns" :data-source="tableData" />
       </div>
     </div>
+    <!-- template 内部必须有一个根节点 div，否则<Transition>将会失效，所以这个<a-modal></a-modal> 组件必须放在 根节点 div 里面 -->
+    <a-modal v-model:open="visible" :title="title" @ok="submit" @cancel="closeModal">
+      <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout" @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
+        <!-- 用户根据单位代码去查询 审核状态 -->
+        <a-form-item has-feedback label="姓名" name="name">
+          <a-input v-model:value="formState.name" autocomplete="off" />
+        </a-form-item>
+        <a-form-item has-feedback label="性别" name="sex">
+          <a-radio-group v-model:value="formState.sex" name="radioGroup">
+            <a-radio v-for="(item, index) in enumsSex" :key="index" :value="item.value">{{ item.label }}</a-radio>
+          </a-radio-group>
+        </a-form-item>
+
+        <a-form-item has-feedback label="手机号" name="telephone">
+          <a-input v-model:value="formState.telephone" autocomplete="off" />
+        </a-form-item>
+        <a-form-item has-feedback label="启用状态" name="isEnable">
+          <a-radio-group v-model:value="formState.isEnable" name="radioGroup">
+            <a-radio v-for="(item, index) in enumsIsEnable" :key="index" :value="item.value">{{ item.label }}</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="tsx">
+/**
+ * @current 当前页
+ * @pages 总页数
+ * @size 每页多少条
+ * @total 总条数
+ */
+import { message } from 'ant-design-vue'
+import { dictSelectNodes } from '@/config/dict.ts'
+const enumsSex = ref<any[]>(dictSelectNodes('Sex'))
+const enumsIsEnable = ref<any[]>(dictSelectNodes('IsEnable'))
 import api from '@/axios/index.ts'
 import { SearchOutlined, SyncOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
-import { ref, h, computed, reactive, onMounted } from 'vue'
+import { ref, computed, reactive, onMounted, watch } from 'vue'
-const searchUser = ref('')
+
-const selectValue = ref('0')
 const focus = () => {
   console.log('focus')
 }
-const handleChange = (value: string) => {
-  console.log(`selected ${value}`)
-}
-const search = function name() {}
 
-const obj = {
+const handlePageChange = (page: any, pageSize: any) => {
-  params: {
+  console.log('🚀 ~ handlePageChange ~ page, pageSize:', page, pageSize)
-    // name: '',
+
-    // telephone: '',
+  pagination.current = page
-    // sex: '',
+  pagination.pageSize = pageSize
-  },
+  getUserList()
-  page: {
-    // records: [
-    //   {
-    //     snowFlakeId: 0,
-    //     name: '',
-    //     sex: '',
-    //     account: '',
-    //     telephone: '',
-    //     isEnable: '',
-    //     isAdmin: '',
-    //     createUserName: '',
-    //     createTime: '',
-    //   },
-    // ],
-    // total: 0,
-    // size: 0,
-    // current: 0,
-    size: 10,
-    current: 0,
-    // orders: [
-    //   {
-    //     column: '',
-    //     asc: true,
-    //   },
-    // ],
-    // optimizeCountSql: {},
-    // searchCount: {},
-    // optimizeJoinOfCountSql: true,
-    // maxLimit: 0,
-    // countId: '',
-    // pages: 0,
-  },
 }
 
-const getUserList = async function name() {
+const pagination = reactive({
+  pageSize: 5, // 每页显示的条数
+  showSizeChanger: true, // 是否可以改变每页显示的条数
+  pageSizeOptions: ['5', '10'], // 可选的每页显示条数
+  showQuickJumper: true, // 是否可以快速跳转到指定页
+  showTotal: (total: string | number) => `共 ${total} 条`, // 显示总条数和当前数据范围
+  current: 1, // 当前页数
+  total: null as number | string | null, // 总条数
+  onChange: handlePageChange, // 页码改变时的回调函数
+})
+
+const getUserList = async function (params?: any) {
+  let obj = { page: { size: pagination.pageSize, current: pagination.current }, params }
   const res = await api.post<any>('/managementPoliceUnitUser/pager', obj)
-  tableData.value = res.data.records
+  const { total, records } = res.data
+  tableData.value = records
+  pagination.total = Number(total)
 }
+
 onMounted(() => {
   getUserList()
 })
-//
+
 type Key = string | number
 
 interface DataType {
@@ -100,30 +120,6 @@ interface DataType {
   address: string
 }
 
-interface ResponseData {
-  params: {
-    name: string
-    telephone: string
-    sex: string
-  }
-  page: {
-    records: Array<RecordItem>
-    total: number
-    size: number
-    current: number
-    orders: Array<{
-      column: string
-      asc: boolean
-    }>
-    optimizeCountSql: any
-    searchCount: any
-    optimizeJoinOfCountSql: boolean
-    maxLimit: number
-    countId: string
-    pages: number
-  }
-}
-
 interface RecordItem {
   account: string
   createTime: string
@@ -149,6 +145,12 @@ interface EnableStatus {
   }
 }
 const columns = [
+  // {
+  //   title: '序号',
+  //   customRender: (text, record, index, column) => {
+  //     console.log(index)
+  //   },
+  // },
   {
     title: '账号',
     dataIndex: 'account',
@@ -157,14 +159,14 @@ const columns = [
     title: '名称',
     dataIndex: 'name',
   },
+  {
+    dataIndex: 'sex',
+    title: '性别',
+    customRender: ({ record }: { record: RecordItem }) => {
+      return <a-tag>{record.sex.label}</a-tag>
+    },
+  },
 
-  // {
-  //   title: '是否管理员',
-  //   dataIndex: 'isAdmin',
-  //   customRender: ({ record }: { record: RecordItem }) => {
-  //     return record.isAdmin.value === 0 ? <a-tag color='green'>{record.isAdmin.label}</a-tag> : <a-tag color='#f50'>{record.isAdmin.label}</a-tag>
-  //   },
-  // },
   {
     title: '是否启用',
     dataIndex: 'isEnable',
@@ -176,20 +178,195 @@ const columns = [
     title: '创建时间',
     dataIndex: 'createTime',
   },
+  {
+    dataIndex: 'opt',
+    title: '操作',
+    fixed: 'right',
+    customRender({ record }: { record: RecordItem }) {
+      return record.isAdmin.value === 1 ? (
+        <a-space>
+          <a-button
+            type='primary'
+            onClick={async () => {
+              console.log(record)
+              {
+                visible.value = true
+                title.value = '编辑用户'
+                formState.name = record.name
+                formState.telephone = record.telephone
+                formState.sex = record.sex.value
+                formState.isEnable = record.isEnable.value
+                formState.snowFlakeId = record.snowFlakeId
+              }
+            }}
+          >
+            编辑
+          </a-button>
+          <a-button type='primary' danger>
+            <a-popconfirm
+              title='确认删除账号吗?'
+              onConfirm={async () => {
+                {
+                  const resp = await api.delete('/managementPoliceUnitUser/deleteById', {
+                    managementPoliceUnitUserId: record.snowFlakeId,
+                  })
+                  message.success(resp.message)
+                  getUserList()
+                }
+              }}
+            >
+              删除
+            </a-popconfirm>
+          </a-button>
+        </a-space>
+      ) : (
+        <i></i>
+      )
+    },
+  },
 ]
+
+const saveOrUpdate = async () => {
+  const res = await api.post<any>('/managementPoliceUnitUser/saveOrUpdate', formState)
+  message.success(res.message)
+  visible.value = false
+  getUserList() //刷新数据
+  resetForm() //重置表单
+  resetFormState()
+  if (formState.hasOwnProperty('snowFlakeId')) {
+    delete formState.snowFlakeId
+  }
+  if (title.value === '新增用户') {
+  }
+  // console.log('saveOrUpdate', res)
+}
+const visible = ref(false)
+const title = ref('')
+const submit = async () => {
+  await formRef.value?.validate() //等待表单校验
+  console.log('表单校验完成')
+  saveOrUpdate()
+}
+const closeModal = () => {
+  resetForm()
+  resetFormState()
+}
+const addUser = () => {
+  visible.value = true
+  title.value = '新增用户'
+}
+
 const tableData = ref<DataType[]>([])
-
+const layout = {
-const state = reactive<{
+  labelCol: { span: 4 },
-  selectedRowKeys: Key[]
+  wrapperCol: { span: 14 },
-  loading: boolean
+}
-}>({
+import type { FormInstance } from 'ant-design-vue'
-  selectedRowKeys: [], // Check here to configure the default column
+import type { Rule } from 'ant-design-vue/es/form'
-  loading: false,
+interface FormState {
+  name: string
+  sex: string | number
+  telephone: string
+  isEnable: string | number
+  snowFlakeId?: string | number
+  [key: string]: any // 添加索引签名
+}
+const formRef = ref<FormInstance>()
+const formState = reactive<FormState>({
+  name: '',
+  sex: '',
+  telephone: '',
+  isEnable: '',
 })
-const hasSelected = computed(() => state.selectedRowKeys.length > 0)
+const checkName = async (_rule: Rule, value: string) => {
+  if (value === '') {
+    return Promise.reject('请输入姓名')
+  } else {
+    return Promise.resolve()
+  }
+}
+const checkSex = async (_rule: Rule, value: string) => {
+  if (value === '') {
+    return Promise.reject('请选择姓名')
+  } else {
+    return Promise.resolve()
+  }
+}
+var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+const checkTelephone = async (_rule: Rule, value: string) => {
+  if (reg_tel.test(value.trim())) {
+    return Promise.resolve()
+  } else {
+    return Promise.reject('手机号格式不正确')
+  }
+}
+const checkIsEnable = async (_rule: Rule, value: string) => {
+  if (value === '') {
+    return Promise.reject('请选择启用状态')
+  } else {
+    return Promise.resolve()
+  }
+}
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, validator: checkName, trigger: 'change' }],
+  sex: [{ required: true, validator: checkSex, trigger: 'change' }],
+  telephone: [{ required: true, validator: checkTelephone, trigger: 'change' }],
+  isEnable: [{ required: true, validator: checkIsEnable, trigger: 'change' }],
+}
 
-const onSelectChange = (selectedRowKeys: Key[]) => {
+const handleFinish = (values: FormState) => {
-  console.log('selectedRowKeys changed: ', selectedRowKeys)
+  console.log('自定义校验成功')
-  state.selectedRowKeys = selectedRowKeys
+  console.log(values)
+}
+const handleFinishFailed = (errors: any) => {
+  console.log(errors)
+}
+const resetForm = () => {
+  formRef.value?.resetFields()
+}
+const resetFormState = () => {
+  // Object.keys(formState).forEach((key) => (formState[key] = ''))
+  for (const key in formState) {
+    if (Object.prototype.hasOwnProperty.call(formState, key)) {
+      formState[key] = '' // 或者根据实际情况设为 null、undefined 或其他值
+    }
+  }
+}
+
+const handleValidate = (...args: any[]) => {
+  console.log(args)
+}
+
+// 搜索相关 ⬇️
+const searchParams = reactive({
+  name: '',
+  telephone: '',
+  sex: null,
+  isEnable: null,
+})
+
+const searchUser = ref('')
+const isEnableValue = ref(null)
+const sexValue = ref(null)
+const searchTelePhone = ref('')
+const handleChange = (value: string) => {
+  console.log(`selected ${value}`)
+}
+const sexChange = (value: string) => {
+  console.log(`selected ${value}`)
+}
+const search = async () => {
+  searchParams.name = searchUser.value
+  searchParams.telephone = searchTelePhone.value
+  searchParams.sex = sexValue.value
+  searchParams.isEnable = isEnableValue.value
+
+  getUserList(searchParams)
+}
+const resetSearch = () => {
+  searchUser.value = ''
+  isEnableValue.value = null
+  sexValue.value = null
+  searchTelePhone.value = ''
 }
 </script>