Merge remote-tracking branch 'origin/main'

policeManagement/.env.development

@@ -6,7 +6,7 @@ VITE_DROP_CONSOLE=false
 # axios
 VITE_APP_BASE_API=/api
 # VITE_APP_PROXY_URL=http://localhost:8765
-VITE_APP_PROXY_URL=http://172.10.10.151:8765
+VITE_APP_PROXY_URL=http://172.10.10.93:8765
 
 
 # rsa 公钥

policeManagement/components.d.ts

@@ -26,16 +26,30 @@ 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']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
+    ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    FormProMax: typeof import('./src/components/form/FormProMax.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    IconFont: typeof import('./src/components/iconfont/IconFont.vue')['default']
     Layout: typeof import('./src/components/layout/layout.vue')['default']
     LayoutHeader: typeof import('./src/components/layout/header/LayoutHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SingleImageFileUpload: typeof import('./src/components/upload/SingleImageFileUpload.vue')['default']
     Sliber: typeof import('./src/components/layout/sliber/sliber.vue')['default']
+    TableProMax: typeof import('./src/components/table/TableProMax.vue')['default']
     TelephoneLogin: typeof import('./src/components/login/TelephoneLogin.vue')['default']
   }
 }

policeManagement/package-lock.json

@@ -734,6 +734,21 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
+    "@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/node": {
       "version": "22.5.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
@@ -743,6 +758,11 @@
         "undici-types": "~6.19.2"
       }
     },
+    "@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
+    },
     "@vitejs/plugin-vue": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
@@ -2332,6 +2352,11 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
     "vite": {
       "version": "5.4.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
@@ -2362,6 +2387,11 @@
         "@vue/shared": "3.4.38"
       }
     },
+    "vue-component-type-helpers": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.6.tgz",
+      "integrity": "sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w=="
+    },
     "vue-demi": {
       "version": "0.14.10",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
@@ -2402,6 +2432,15 @@
         "is-plain-object": "3.0.1"
       }
     },
+    "vue-uuid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-uuid/-/vue-uuid-3.0.0.tgz",
+      "integrity": "sha512-+5DP857xVmTHYd00dMC1c1gVg/nxG6+K4Lepojv9ckHt8w0fDpGc5gQCCttS9D+AkSkTJgb0cekidKjTWu5OQQ==",
+      "requires": {
+        "@types/uuid": "^8.3.4",
+        "uuid": "^8.3.2"
+      }
+    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

policeManagement/package.json

@@ -13,13 +13,17 @@
     "ant-design-vue": "^4.2.3",
     "axios": "^1.7.5",
     "jsencrypt": "^3.3.2",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.2.2",
     "pinia-plugin-persistedstate": "^3.2.0",
+    "vue-component-type-helpers": "^2.1.2",
     "sass": "^1.77.8",
     "vue": "^3.4.37",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue-uuid": "^3.0.0"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.5.1",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",

policeManagement/src/components/form/FormProMax.vue

@@ -0,0 +1,172 @@
+<template>
+  <a-form ref="formProMaxRef" v-bind="props" :model="modelValue">
+    <a-row :gutter="props.gutter">
+      <a-col v-for="(item,field) in props.formItemOptions as FormProMaxItemOptions<T>" :key="field" v-bind="getResponsive(item)">
+        <a-form-item :name="field" v-bind="item" :label="undefined">
+          <template v-slot:label>
+            {{ item.label }}
+            <template v-if="item.remarkRender">
+              <a-popover :title="item.label" :content="item.remarkRender()">
+                <QuestionCircleOutlined class="margin-left-xs" style="color: red" />
+              </a-popover>
+            </template>
+          </template>
+          <!--     自定义组件     -->
+          <!--     ant design vue 组件      -->
+          <a-input
+            v-if="item.type === 'input'"
+            v-model:value="modelValue[field]"
+            style="width: 100%"
+            v-bind="item.componentsProps"
+            :placeholder="getPlaceholder(item)"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+          />
+          <a-input-password
+            v-else-if="item.type === 'inputPassword'"
+            v-model:value="modelValue[field]"
+            style="width: 100%"
+            v-bind="item.componentsProps"
+            :placeholder="getPlaceholder(item)"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+          />
+          <a-input-number v-else-if="item.type === 'inputNumber'" v-model:value="modelValue[field]" style="width: 100%" v-bind="item.componentsProps" :placeholder="getPlaceholder(item)" />
+          <a-textarea
+            v-else-if="item.type === 'inputTextArea'"
+            v-model:value="modelValue[field]"
+            style="width: 100%"
+            v-bind="item.componentsProps"
+            :placeholder="getPlaceholder(item)"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+          />
+          <a-radio-group v-else-if="item.type === 'radioGroup'" v-model:value="modelValue[field]" style="width: 100%" v-bind="item.componentsProps" :options="item.options" />
+          <a-checkbox-group v-else-if="item.type === 'checkboxGroup'" v-model:value="modelValue[field]" style="width: 100%" v-bind="item.componentsProps" :options="item.options" />
+          <a-select
+            v-else-if="item.type === 'select'"
+            v-model:value="modelValue[field]"
+            style="width: 100%"
+            v-bind="item.componentsProps"
+            :placeholder="getPlaceholder(item)"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+            :options="item.options"
+          />
+          <a-tree-select
+            v-else-if="item.type === 'treeSelect'"
+            style="width: 100%"
+            v-model:value="modelValue[field]"
+            v-bind="item.componentsProps"
+            :placeholder="getPlaceholder(item)"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+            :tree-data="item.options"
+          />
+          <a-cascader
+            v-else-if="item.type === 'cascader'"
+            style="width: 100%"
+            v-model:value="modelValue[field]"
+            v-bind="item.componentsProps"
+            :placeholder="getPlaceholder(item)"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+            :options="item.options"
+          />
+          <a-range-picker
+            v-else-if="item.type === 'rangePicker'"
+            style="width: 100%"
+            v-model:value="modelValue[field]"
+            v-bind="item.componentsProps"
+            :placeholder="item.componentsProps?.placeholder ?? ['开始日期', '结束日期']"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+          />
+          <a-date-picker
+            v-else-if="item.type === 'datePicker'"
+            style="width: 100%"
+            v-model:value="modelValue[field]"
+            v-bind="item.componentsProps"
+            :placeholder="item.componentsProps?.placeholder ?? '请选择日期'"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+          />
+          <a-time-range-picker
+            v-else-if="item.type === 'timeRangePicker'"
+            style="width: 100%"
+            v-model:value="modelValue[field]"
+            v-bind="item.componentsProps"
+            :placeholder="item.componentsProps?.placeholder ?? ['开始时间', '结束时间']"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+          />
+          <a-time-picker
+            v-else-if="item.type === 'timePicker'"
+            style="width: 100%"
+            v-model:value="modelValue[field]"
+            v-bind="item.componentsProps"
+            :placeholder="getPlaceholder(item)"
+            :allowClear="item.componentsProps?.allowClear ?? true"
+          />
+          <template v-else-if="item.type === 'custom'">
+            <component :is="item.customRender" />
+          </template>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <slot name="formOperation"></slot>
+  </a-form>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string,any>">
+import { FormInstance } from 'ant-design-vue'
+import { ref } from 'vue'
+import { FormExpose } from 'ant-design-vue/es/form/Form'
+import { QuestionCircleOutlined } from '@ant-design/icons-vue'
+import { FormProMaxItemOptions, FormProMaxItemProps, FormProMaxProps } from '@/types/components/form/index.ts'
+
+const modelValue = defineModel<T>('value', {
+  default: {},
+})
+
+const props = withDefaults(defineProps<FormProMaxProps<T>>(), {
+  grid: () => {
+    return {
+      span: 24,
+    }
+  },
+  gutter: 10,
+  labelCol: () => {
+    return {
+      style: {
+        width: '100px',
+      },
+    }
+  },
+  wrapperCol: () => {
+    return {
+      span: 18,
+    }
+  },
+  labelAlign: 'left',
+  colon: undefined,
+  disabled: undefined,
+  hideRequiredMark: undefined,
+  labelWrap: undefined,
+  scrollToFirstError: undefined,
+  validateOnRuleChange: undefined,
+})
+
+const formProMaxRef = ref<FormInstance>(null!)
+
+const getResponsive = (item: FormProMaxItemProps): Grid => {
+  //span优先级高于响应式设置
+  if (item.grid) return item.grid.span ? { span: item.grid.span } : { ...item.grid }
+  return { ...props.grid }
+}
+
+//优先级: 组件本身=》formItem=》label
+const getPlaceholder = (item: FormProMaxItemProps) => item.componentsProps?.placeholder ?? item.placeholder ?? (item.type.includes('input') ? `请输入${item.label}` : `请选择${item.label}`)
+
+defineExpose<FormExpose>({
+  validate: (nameList, options) => formProMaxRef.value?.validate(nameList, options),
+  resetFields: (name) => formProMaxRef.value?.resetFields(name),
+  clearValidate: () => formProMaxRef.value?.clearValidate(),
+  getFieldsValue: (nameList) => formProMaxRef.value?.getFieldsValue(nameList),
+  scrollToField: (name, options) => formProMaxRef.value?.scrollToField(name, options),
+  validateFields: (nameList, options) => formProMaxRef.value?.validateFields(nameList, options),
+})
+</script>
+
+<style scoped></style>

policeManagement/src/components/iconfont/IconFont.vue

@@ -0,0 +1,20 @@
+<template>
+  <i v-if="type==='class'" :class="[`iconfont ${fontClass}`]" :style="{fontSize:`${size}px`}"/>
+  <svg v-else-if="type === 'svg'" :style="{width:`${size}px`,height:`${size}px`}">
+    <use :href="`#${fontClass}`"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import {IconFontProps} from "@/types/components/iconfont/IconFont";
+
+withDefaults(defineProps<IconFontProps>(), {
+  size: 25,
+  type: "svg"
+});
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

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'" />
@@ -36,10 +36,11 @@
           </a-menu-item>
           <a-sub-menu v-if="route.children && route.children.length && route?.meta?.title" :key="route.path">
             <template #title>
-              <MailOutlined />
+              <MailOutlined v-if="route.name === 'query-'" />
+              <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>
@@ -68,17 +69,60 @@
 </template>
 
 <script setup lang="ts">
-import { InsuranceOutlined, HomeOutlined, SoundOutlined, MailOutlined, ApartmentOutlined, InboxOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
+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) => {
@@ -108,8 +152,8 @@ const keepAliveNames = ref<string[]>(['index', 'rindex'])
 
   .layout-content {
     margin: 10px;
-    padding: 4px;
+    // padding: 4px;
-    background: #f5f7fd;
+    // background: #f5f7fd;
     min-height: 280px;
     border-radius: 5px;
     overflow: auto;

policeManagement/src/components/table/TableProMax.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="table-pro-content">
+    <div class="card padding" v-if="props.searchFormOptions">
+      <FormProMax ref="searchFormRef" :form-item-options="props.searchFormOptions" v-model:value="searchParams" v-bind="props.searchFormProps">
+        <template v-slot:formOperation>
+          <a-space class="margin-right flex-end">
+            <a-button type="primary" @click="search">
+              <search-outlined />
+              搜索
+            </a-button>
+            <a-button danger @click="resetFormAndTable">
+              <rollback-outlined />
+              重置
+            </a-button>
+          </a-space>
+        </template>
+      </FormProMax>
+    </div>
+    <div class="card padding margin-top-xs">
+      <div class="flex-justify-between">
+        <slot name="tableHeader" :selectKeys="selectKeys" :selectRows="selectRows"></slot>
+        <div></div>
+        <slot name="tableHeaderRight" :selectKeys="selectKeys" :selectRows="selectRows"></slot>
+        <a-space>
+          <template v-if="!props.searchFormOptions">
+            <a-tooltip>
+              <template #title>刷新数据</template>
+              <a-button shape="circle" @click="requestGetTableData">
+                <ReloadOutlined />
+              </a-button>
+            </a-tooltip>
+          </template>
+          <template v-if="props.isPrinter">
+            <a-tooltip>
+              <template #title>打印数据</template>
+              <a-button shape="circle">
+                <PrinterOutlined />
+              </a-button>
+            </a-tooltip>
+          </template>
+        </a-space>
+      </div>
+      <a-table
+        class="margin-top"
+        v-bind="props"
+        :columns="tableColumns"
+        :row-selection="props.isSelection ? (props.selectionProps ? props.selectionProps : defaultSelectProps) : null"
+        :data-source="dataSource"
+        :loading="loading"
+        :pagination="false"
+      >
+        <template v-for="(_, key) in slots" v-slot:[key]="scope">
+          <slot v-if="!includes(['tableHeader', 'tableHeaderRight'], String(key))" :name="key" v-bind="scope"></slot>
+        </template>
+      </a-table>
+      <a-pagination
+        v-if="props.isPagination"
+        class="flex-end margin-top margin-right"
+        v-model:current="pageParams.current"
+        v-model:page-size="pageParams.size"
+        :total="pageParams.total"
+        v-bind="props.paginationProps"
+        @change="handleCurrentChange"
+        @showSizeChange="handleSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends BaseTableRowRecord = {},P extends { [key: string]: any } ={}">
+import FormProMax from '@/components/form/FormProMax.vue'
+import { PrinterOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined } from '@ant-design/icons-vue'
+import { computed, onMounted, Ref, ref } from 'vue'
+import { FormInstance } from 'ant-design-vue'
+import useTableProMax from '@/hooks/useTableProMax'
+import { includes, isEmpty } from 'lodash-es'
+import { BaseTableRowRecord, TableProMaxProps, TableProMaxRowSelect, TableProMaxSlots } from '@/types/components/table'
+
+const selectKeys = ref<string[]>([])
+const selectRows = ref<T[]>([]) as Ref<T[]>
+
+const defaultSelectProps: TableProMaxRowSelect<T> = {
+  type: 'checkbox',
+  selectedRowKeys: selectKeys as any,
+  preserveSelectedRowKeys: true,
+  onSelect: (record, selected) => {
+    if (selected) {
+      selectKeys.value.push(record[props.rowKey] as string)
+      selectRows.value.push(record)
+    } else {
+      selectKeys.value.splice(selectKeys.value.findIndex((x) => x === record[props.rowKey]))
+      selectRows.value.splice(selectRows.value.findIndex((r) => r[props.rowKey] === record[props.rowKey]))
+    }
+  },
+  onChange: (selectedRowKeys, selectedRows) => {
+    selectKeys.value = selectedRowKeys as string[]
+    selectRows.value = selectedRows
+  },
+}
+
+const clearSelect = () => {
+  selectKeys.value = []
+  selectRows.value = []
+}
+
+const props = withDefaults(defineProps<TableProMaxProps<T, P>>(), {
+  needIndex: true,
+  searchFormProps: () => {
+    return {
+      grid: {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 6,
+        xl: 4,
+      },
+      labelCol: undefined,
+      wrapperCol: undefined,
+    }
+  },
+  rowKey: 'snowFlakeId',
+  requestAuto: true,
+  isPagination: true,
+  isSelection: false,
+  paginationProps: () => {
+    return {
+      showTotal: (total) => `共 ${total} 条`,
+      showSizeChanger: true,
+    }
+  },
+  bordered: true,
+  showSorterTooltip: undefined,
+  showHeader: undefined,
+  expandFixed: undefined,
+  expandRowByClick: undefined,
+  defaultExpandAllRows: undefined,
+  showExpandColumn: undefined,
+  sticky: undefined,
+})
+const slots = defineSlots<TableProMaxSlots<T>>()
+
+const tableColumns = computed(() => {
+  let cols = props.columns
+  if (!isEmpty(cols) && props.needIndex) {
+    if (!(cols?.[0].dataIndex === 'index')) {
+      cols?.unshift({
+        dataIndex: 'index',
+        width: 60,
+        title: '序号',
+        customRender: ({ index }) => index + 1,
+      })
+    }
+  }
+  return cols
+})
+
+/**
+ * 表单实例
+ */
+const searchFormRef = ref<FormInstance>() as Ref<FormInstance>
+/**
+ * 查询参数
+ */
+const searchParams = ref<P | Record<string, any>>(props.defaultSearchParams || {}) as Ref<P>
+
+const { loading, dataSource, pageParams, search, requestGetTableData, handleSizeChange, handleCurrentChange, resetState } = useTableProMax(
+  props.requestApi,
+  searchFormRef,
+  searchParams,
+  props.isPagination,
+  props.dataCallback,
+  props.requestError
+)
+
+onMounted(() => props.requestAuto && requestGetTableData(true))
+
+/**
+ * 重置表单并查询
+ */
+const resetFormAndTable = () => {
+  searchFormRef.value?.resetFields()
+  requestGetTableData()
+}
+
+defineExpose({
+  selectKeys,
+  selectRows,
+  requestGetTableData,
+  clearSelect,
+  resetTable: () => {
+    searchFormRef.value?.resetFields()
+    resetState()
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.card {
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+}
+</style>

policeManagement/src/components/tsx/ModalPro.tsx

@@ -0,0 +1,49 @@
+import { h, Ref, ref, VNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+import { FormExpose } from 'ant-design-vue/es/form/Form'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import FormProMax from '@/components/form/FormProMax.vue'
+import { FormProMaxItemOptions, FormProMaxProps } from '@/types/components/form'
+
+export function submitSimpleFormModal<T>(props: {
+  title: string
+  formParams?: T & Record<string, any>
+  formProps?: Omit<FormProMaxProps<T>, 'formItemOptions'>
+  formOptions: FormProMaxItemOptions<T>
+  submit: (params: T) => Promise<any>
+  cancel?: (params: T) => Promise<any>
+  icon?: () => VNode
+  maskClosable?: boolean
+  width?: string | number
+}) {
+  if (!props.formParams) props.formParams = {} as T
+  if (!props.width) props.width = 520
+
+  const formRef = ref<FormExpose>(null)
+  const _formParams = ref<T>({
+    ...props.formParams,
+  }) as Ref<T>
+
+  Modal.confirm({
+    icon: props.icon ? props.icon() : ' ',
+    width: props.width,
+    maskClosable: props.maskClosable ?? true,
+    title: props.title,
+    content: () => <FormProMax ref={formRef} v-model={[_formParams.value, 'value']} {...props.formProps} formItemOptions={props.formOptions} />,
+    onOk: async () => {
+      await formRef.value?.validate()
+      await props.submit(_formParams.value)
+    },
+    onCancel: async () => props.cancel && (await props.cancel(_formParams.value)),
+  })
+}
+
+export const deleteDataModal = (name: string, submit: () => Promise<any>, cancel?: () => Promise<any>) => {
+  Modal.confirm({
+    title: `确认删除【${name}】吗?`,
+    icon: h(ExclamationCircleOutlined),
+    content: h('div', { style: 'color:red;' }, '此操作将删除数据，且无法找回!'),
+    onOk: async () => await submit(),
+    onCancel: async () => cancel && (await cancel()),
+  })
+}

policeManagement/src/components/upload/SingleImageFileUpload.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="simpleUploadDiv">
+    <a-progress v-if="uploading" type="circle" :percent="percent" />
+    <a-image height="80%" v-else :src="minioBaseUrl + modelValue" alt="avatar" />
+    <a-button class="btn-success" @click="selectFile">{{ btnLabel }}</a-button>
+    <input id="myFileInput" type="file" style="display: none" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { generateSimpleObjectName, getResignedObjectUrl } from '@/utils/minioUtil'
+import axios, { CancelTokenSource } from 'axios'
+import { convertFileSizeToStr } from '@/utils/index.ts'
+
+const minioBaseUrl = __APP_ENV.VITE_APP_MINIO_URL
+
+const modelValue = defineModel<string>('value')
+const props = withDefaults(
+  defineProps<{
+    parentDir?: string
+    allowedExtensions?: string[]
+    maxSize?: number
+    width?: string | number
+    height?: string | number
+    btnLabel?: string
+  }>(),
+  {
+    parentDir: '',
+    allowedExtensions: () => ['jpg', 'jpeg', 'png', 'gif'],
+    maxSize: 1024 * 1024 * 4,
+    width: '150px',
+    height: '150px',
+    btnLabel: '选择图片',
+  }
+)
+
+const uploading = ref(false)
+const percent = ref(0)
+let cancelToken: CancelTokenSource | null = null
+
+const selectFile = () => {
+  document.getElementById('myFileInput')?.click()
+}
+
+async function inputFileListener(this: HTMLInputElement) {
+  const selectedFile: File = this.files?.[0] as File
+
+  const fileExtension = selectedFile?.name?.split('.')?.pop()?.toLowerCase() as string
+  if (!props.allowedExtensions.includes(fileExtension)) {
+    return message.error(`错误：不支持的文件格式,目前支持:【${props.allowedExtensions}】`)
+  }
+
+  const isMax = selectedFile.size > props.maxSize
+  if (isMax) {
+    return message.error(`文件大小超出限制，最大支持:【${convertFileSizeToStr(props.maxSize)}】`)
+  }
+
+  cancelToken?.cancel()
+  percent.value = 0
+  uploading.value = true
+
+  const objectName = generateSimpleObjectName(selectedFile.name, props.parentDir)
+  const uploadUrl = await getResignedObjectUrl(__APP_ENV.VITE_APP_MINIO_BUCKET, objectName)
+  cancelToken = axios.CancelToken.source()
+  await axios.put(uploadUrl, selectedFile, {
+    cancelToken: cancelToken.token,
+    onUploadProgress: (progressEvent) => {
+      percent.value = ((progressEvent.loaded / (progressEvent.total as number)) * 100) | 0
+    },
+  })
+
+  modelValue.value = '/' + __APP_ENV.VITE_APP_MINIO_BUCKET + objectName
+  uploading.value = false
+}
+
+onMounted(() => {
+  document.getElementById('myFileInput')?.addEventListener('change', inputFileListener)
+})
+
+onUnmounted(() => {
+  document.getElementById('myFileInput')?.removeEventListener('change', inputFileListener)
+})
+</script>
+
+<style scoped lang="scss">
+.simpleUploadDiv {
+  width: v-bind(width);
+  height: v-bind(height);
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -1,4 +1,8 @@
 declare const __APP_ENV: ImportMetaEnv;
+declare module 'lodash-es' {
+    import { includes, isEmpty, ceil, divide } from 'lodash';
+    export { includes, isEmpty, ceil, divide };
+}
 
 /**
  * 全局返回
@@ -8,6 +12,34 @@ interface JsonResult<T> {
     message: string;
     data?: T;
 }
+class TreeNodeVo<T, E = Record<string, any>> {
+    value: T;
+    parentValue: T;
+    label: string;
+    orderIndex?: number;
+    children?: TreeNodeVo<T>[]
+    extData?: E;
+}
+declare interface Grid {
+    //栅格占据的列数
+    span?: number;
+    //栅格左侧的间隔格数
+    offset?: number;
+    //栅格向右移动格数
+    push?: number;
+    //栅格向左移动格数
+    pull?: number;
+    //<768px 响应式栅格数或者栅格属性对象
+    xs?: number;
+    //≥768px 响应式栅格数或者栅格属性对象
+    sm?: number;
+    //≥992px 响应式栅格数或者栅格属性对象
+    md?: number;
+    //≥1200px 响应式栅格数或者栅格属性对象
+    lg?: number;
+    //≥1920px 响应式栅格数或者栅格属性对象
+    xl?: number;
+}
 interface dataStatus {
     account: string;
     password: string;
@@ -20,3 +52,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/hooks/useTableProMax.ts

@@ -0,0 +1,134 @@
+import { ref, Ref } from "vue";
+import { Page, PageParams, PageResult } from "@/types/hooks/useTableProMax.ts";
+import { FormInstance } from "ant-design-vue";
+import { BaseTableRowRecord, RequestApiType } from "@/types/components/table";
+
+/**
+ *
+ * @param api 查询方法
+ * @param searchFormRef 表单校验
+ * @param searchParams 查询的参数
+ * @param isPageTable 是否分页
+ * @param dataCallBack 查询到数据后的回调
+ * @param requestError 查询出错回调
+ */
+export default <T extends BaseTableRowRecord, P extends Record<string, any> | PageParams<P>>(api: RequestApiType<T, P>,
+    searchFormRef: Ref<FormInstance>,
+    searchParams: Ref<P>,
+    isPageTable: boolean = true,
+    dataCallBack?: (data: T[]) => T[],
+    requestError?: (errorMsg: any) => void) => {
+
+    const dataSource = ref<T[]>([]) as Ref<T[]>;
+    const loading = ref<boolean>(false);
+    const pageParams = ref<Page>({
+        current: 1,
+        size: 10,
+        total: 0
+    })
+
+    /**
+     * 获取表格数据
+     */
+    const requestGetTableData = async (isInit: boolean = false) => {
+        try {
+            //校验表单
+            !isInit && await searchFormRef.value?.validate();
+            //组装参数
+            let totalSearchParams;
+            if (isPageTable) {
+                totalSearchParams = {
+                    params: searchParams.value,
+                    page: {
+                        current: pageParams.value.current,
+                        size: pageParams.value.size
+                    }
+                } as PageParams<P>;
+            } else {
+                totalSearchParams = searchParams.value
+            }
+
+            loading.value = true;
+
+            const resp = await api(totalSearchParams as P);
+            let tableData: T[];
+
+            if (isPageTable) {
+                const { current, records, size, total } = resp.data as PageResult<T>;
+                isPageTable && updatePageParams({
+                    current: parseInt(current),
+                    size: parseInt(size),
+                    total: parseInt(total)
+                });
+                tableData = records;
+            } else {
+                tableData = resp.data as T[]
+            }
+            dataCallBack && (tableData = dataCallBack(tableData));
+            dataSource.value = tableData;
+        } catch (error) {
+            requestError && requestError(error);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    /**
+     * 更新分页信息
+     */
+    const updatePageParams = (ps: Page) => Object.assign(pageParams.value, ps)
+
+    /**
+     * 重置表格状态 包括 dataSource loading pageParams
+     */
+    const resetState = () => {
+        dataSource.value = [];
+        loading.value = false;
+        pageParams.value = {
+            current: 1,
+            size: 10,
+            total: 0
+        }
+    }
+
+    /**
+     * 表格数据查询 与 requestGetTableData 区别是会将页面重置为1
+     * 如果只做刷新数据请用 requestGetTableData
+     */
+    const search = async () => {
+        pageParams.value.current = 1;
+        await requestGetTableData();
+    };
+
+    /**
+     * @description 每页条数改变
+     * @param _
+     * @param {Number} size 页显示数量
+     */
+    const handleSizeChange = async (_: number, size: number) => {
+        pageParams.value.current = 1;
+        pageParams.value.size = size;
+        await requestGetTableData();
+    };
+
+    /**
+     * @description 当前页改变
+     * @param current 当前页
+     */
+    const handleCurrentChange = async (current: number) => {
+        pageParams.value.current = current;
+        await requestGetTableData();
+    };
+
+    return {
+        dataSource,
+        loading,
+        pageParams,
+        requestGetTableData,
+        search,
+        handleSizeChange,
+        handleCurrentChange,
+        resetState
+    };
+
+}

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/router/staticRouters.ts

@@ -1,5 +1,6 @@
 
 
+// name 唯一
 import { RouteRecordRaw } from "vue-router";
 export const Layout = () => import("@/components/layout/layout.vue");
 export const staticRouter: RouteRecordRaw[] =
@@ -28,6 +29,38 @@ export const staticRouter: RouteRecordRaw[] =
             ]
         },
 
+        {
+
+            path: '/user',
+            name: 'user',
+            meta: {
+                title: '用户管理',
+                keepalive: true
+            },
+            component: Layout,
+            children: [
+                {
+                    path: 'index',
+                    name: 'user-index',
+                    meta: {
+                        title: '后台用户',
+                        keepalive: true
+                    },
+                    component: () => import('@/views/user/user.vue')
+                },
+                {
+                    path: 'weapp',
+                    name: 'weapp',
+                    meta: {
+
+                        title: '小程序用户',
+                        keepalive: true
+                    },
+                    component: () => import('@/views/user/user-weapp.vue')
+                },
+            ]
+        },
+
         {
 
             path: '/query-',

policeManagement/src/types/components/form/index.ts

@@ -0,0 +1,73 @@
+import {
+    FormProps,
+    RangePicker,
+    Input,
+    InputNumber,
+    Textarea,
+    InputPassword,
+    RadioGroup,
+    Select,
+    TreeSelect,
+    Cascader,
+    CheckboxGroup,
+    DatePicker,
+    FormItem, TimeRangePicker, TimePicker,
+} from "ant-design-vue";
+import { Ref, UnwrapRef, VNode } from "vue";
+import { ComponentProps } from "vue-component-type-helpers";
+
+type FormProMaxItemType =
+    | 'custom'
+    | 'input'
+    | 'inputPassword'
+    | 'inputNumber'
+    | 'inputTextArea'
+    | 'radioGroup'
+    | 'select'
+    | 'selectIcon'
+    | 'selectUser'
+    | 'treeSelect'
+    | 'cascader'
+    | 'checkboxGroup'
+    | 'datePicker'
+    | 'rangePicker'
+    | 'timeRangePicker'
+    | 'timePicker';
+
+interface FormProMaxItemCommonProps extends ComponentProps<typeof FormItem> {
+    label?: string,
+    grid?: Grid,
+    placeholder?: string,
+    remarkRender?: () => VNode | string,
+    customRender?: () => VNode;
+    options?: (SelectNodeVo<unknown> | TreeNodeVo<unknown>)[] | Ref<(SelectNodeVo<unknown> | TreeNodeVo<unknown>)[]>
+}
+
+export interface FormProMaxItemProps<T extends FormProMaxItemType = any, C = any> extends FormProMaxItemCommonProps {
+    type: T
+    componentsProps?: C
+}
+
+export type FormProMaxItemOptions<T> = {
+    [key in keyof T | string]:
+    FormProMaxItemProps<'custom', ComponentProps<Record<string, any>>>
+    | FormProMaxItemProps<'input', ComponentProps<typeof Input>>
+    | FormProMaxItemProps<'inputPassword', ComponentProps<typeof InputPassword>>
+    | FormProMaxItemProps<'inputNumber', ComponentProps<typeof InputNumber>>
+    | FormProMaxItemProps<'inputTextArea', ComponentProps<typeof Textarea>>
+    | FormProMaxItemProps<'radioGroup', ComponentProps<typeof RadioGroup>>
+    | FormProMaxItemProps<'select', ComponentProps<typeof Select>>
+    | FormProMaxItemProps<'treeSelect', ComponentProps<typeof TreeSelect>>
+    | FormProMaxItemProps<'cascader', ComponentProps<typeof Cascader>>
+    | FormProMaxItemProps<'checkboxGroup', ComponentProps<typeof CheckboxGroup>>
+    | FormProMaxItemProps<'datePicker', ComponentProps<typeof DatePicker>>
+    | FormProMaxItemProps<'rangePicker', ComponentProps<typeof RangePicker>>
+    | FormProMaxItemProps<'timeRangePicker', ComponentProps<typeof TimeRangePicker>>
+    | FormProMaxItemProps<'timePicker', ComponentProps<typeof TimePicker>>
+}
+
+export interface FormProMaxProps<T = {}> extends FormProps {
+    grid?: Grid
+    gutter?: number;
+    formItemOptions?: FormProMaxItemOptions<T> | Ref<FormProMaxItemOptions<T>> | UnwrapRef<FormProMaxItemOptions<T>>
+}

policeManagement/src/types/components/iconfont/IconFont.ts

@@ -0,0 +1,5 @@
+export interface IconFontProps {
+    fontClass?: string,
+    size?: number,
+    type?: 'class' | 'svg'
+}

policeManagement/src/types/components/table/index.ts

@@ -0,0 +1,55 @@
+import { PaginationProps, Table, TableProps } from "ant-design-vue";
+import { TableRowSelection } from "ant-design-vue/lib/table/interface";
+import { Ref, UnwrapRef } from "vue";
+import { ColumnType } from "ant-design-vue/es/table/interface";
+import { ComponentSlots } from "vue-component-type-helpers";
+import { FormProMaxItemOptions, FormProMaxProps } from "@/types/components/form";
+import { PageParams, PageResult } from "@/types/hooks/useTableProMax.ts";
+
+
+export type TableProMaxColumnType<T extends BaseTableRowRecord> = Omit<ColumnType<T>, 'dataIndex'> & {
+    dataIndex: keyof T | string | string[] | number | number[];
+}
+
+
+export type TableProMaxProps<
+    T extends BaseTableRowRecord = {},
+    P extends { [key: string]: any } = {}
+> = Partial<Omit<TableProps<T>, "dataSource" | 'pagination' | 'loading' | 'rowKey' | 'columns'>> & {
+    rowKey?: keyof T,
+    columns?: TableProMaxColumnType<T>[],
+    searchFormProps?: Omit<FormProMaxProps<P>, 'formItems'>
+    searchFormOptions?: FormProMaxItemOptions<P> | Ref<FormProMaxItemOptions<P>> | UnwrapRef<FormProMaxItemOptions<P>>,
+    defaultSearchParams?: { [key in keyof P | string]: any };
+    requestAuto?: boolean,
+    requestApi: RequestApiType<T, P>,
+    requestError?: (errorMsg: any) => void,
+    dataCallback?: (data: T[]) => T[],
+    isPagination?: boolean,
+    paginationProps?: TableProMaxPaginationProps,
+    isSelection?: boolean,
+    selectionProps?: TableProMaxRowSelect<T>,
+    isPrinter?: boolean,
+    needIndex?: boolean
+}
+
+export type TableProMaxSlots<T> = ComponentSlots<typeof Table> & {
+    tableHeader: (scope: { selectKeys: string[], selectRows: T[] }) => any,
+    tableHeaderRight: (scope: { selectKeys: string[], selectRows: T[] }) => any,
+}
+
+export type RequestApiType<T extends BaseTableRowRecord, P extends {
+    [key: string]: any
+} = {}> = (params: P | PageParams<P>) => Promise<JsonResult<T[] | PageResult<T>>>;
+
+export type TableProMaxPaginationProps = Partial<Omit<PaginationProps, "current" | "pageSize" | "total">>;
+
+export type TableProMaxRowSelect<T extends BaseTableRowRecord> = TableRowSelection<T>;
+
+export interface BaseTableRowRecord {
+    snowFlakeId?: string;
+    createUserName?: string;
+    createTime?: Date | string;
+    updateUserName?: string;
+    updateTime?: Date | string
+}

policeManagement/src/types/config/index.ts

@@ -0,0 +1,13 @@
+import { RouteComponent } from "vue-router";
+
+export interface SystemMenu {
+    type: 'dir' | 'menu';
+    title: string;
+    path: string;
+    name: string;
+    icon?: string;
+
+    component?: RouteComponent;
+    children?: SystemMenu[];
+}
+

policeManagement/src/types/hooks/useTableProMax.ts

@@ -0,0 +1,26 @@
+/**
+ * 分页对象
+ */
+export interface Page {
+    current: number,
+    size: number,
+    total: number
+}
+
+/**
+ * 分页参数
+ */
+export interface PageParams<T extends Record<string, any> = {}> {
+    params: T & { [key: string]: any },
+    page: Omit<Page, 'total'>
+}
+
+/**
+ * 分页结果
+ */
+export interface PageResult<T> {
+    current: string,
+    records: T[],
+    size: string,
+    total: string
+}

policeManagement/src/utils/index.ts

@@ -0,0 +1,17 @@
+import {ceil, divide} from "lodash-es";
+
+/**
+ * 将文件大小转为字符串格式
+ * @param fileSizeInBytes
+ */
+export const convertFileSizeToStr = (fileSizeInBytes: number): string => {
+    if (fileSizeInBytes < 1024) {
+        return fileSizeInBytes + "B";
+    } else if (fileSizeInBytes < 1024 * 1024) {
+        return (ceil(divide(fileSizeInBytes, 1024), 2)) + "KB";
+    } else if (fileSizeInBytes < 1024 * 1024 * 1024) {
+        return (ceil(divide(fileSizeInBytes, (1024 * 1024)), 2)) + "MB";
+    } else {
+        return (ceil(divide(fileSizeInBytes, (1024 * 1024 * 1024)), 2)) + "GB";
+    }
+}

policeManagement/src/utils/minioUtil.ts

@@ -0,0 +1,26 @@
+import api from "@/axios";
+import dayjs from "dayjs";
+import { uuid } from "vue-uuid";
+
+/**
+ * 生成一个简单的对象文件地址
+ * @param fileName 原始文件名
+ * @param parentDir 上级目录
+ */
+export const generateSimpleObjectName = (fileName: string, parentDir?: String): string => {
+    let objectName = parentDir + dayjs().format('/YYYY/MM/DD/') + uuid.v4().replace(/-/g, '');
+    if (fileName && fileName.length > 0) {
+        objectName += fileName.substring(fileName.lastIndexOf('.'))
+    }
+    return objectName;
+}
+
+/**
+ * 获取生成预签名的 URL
+ */
+export const getResignedObjectUrl = async (bucketName: string, objectName: string): Promise<string> => {
+    return (await api.get<string>('/common/getResignedObjectUrl', {
+        bucketName,
+        objectName
+    })).data as string;
+}

policeManagement/src/views/user/user-weapp.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 小程序用户 -->
+    小程序用户
+  </div>
+</template>
+
+<script setup lang="ts"></script>

policeManagement/src/views/user/user.vue

@@ -0,0 +1,372 @@
+<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>
+      <a-input class="w-40 mr-5" v-model:value="searchUser" autocomplete="off" placeholder="请输入名称搜索" />
+      <div class="mr-5 ml-5">是否启用</div>
+      <a-space>
+        <a-select ref="select" v-model:value="isEnableValue" style="width: 120px" @focus="focus" @change="handleChange">
+          <a-select-option v-for="(item, index) in enumsIsEnable" :key="index" :value="item.value">{{ item.label }}</a-select-option>
+        </a-select>
+      </a-space>
+
+      <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="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> -->
+      </div>
+
+      <div class="px-10">
+        <!-- :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, computed, reactive, onMounted, watch } from 'vue'
+
+const focus = () => {
+  console.log('focus')
+}
+
+const handlePageChange = (page: any, pageSize: any) => {
+  console.log('🚀 ~ handlePageChange ~ page, pageSize:', page, pageSize)
+
+  pagination.current = page
+  pagination.pageSize = pageSize
+  getUserList()
+}
+
+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)
+  const { total, records } = res.data
+  tableData.value = records
+  pagination.total = Number(total)
+}
+
+onMounted(() => {
+  getUserList()
+})
+
+type Key = string | number
+
+interface DataType {
+  key: Key
+  name: string
+  age: number
+  address: string
+}
+
+interface RecordItem {
+  account: string
+  createTime: string
+  createUserName: string | null
+  isAdmin: LabelValue // 对象结构
+  isEnable: EnableStatus // 包含扩展数据的对象
+  name: string
+  sex: LabelValue // 对象结构
+  snowFlakeId: string // Snowflake ID 是字符串
+  telephone: string
+}
+
+interface LabelValue {
+  value: number
+  label: string
+}
+
+interface EnableStatus {
+  value: number
+  label: string
+  extData: {
+    color: string
+  }
+}
+const columns = [
+  // {
+  //   title: '序号',
+  //   customRender: (text, record, index, column) => {
+  //     console.log(index)
+  //   },
+  // },
+  {
+    title: '账号',
+    dataIndex: 'account',
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+  },
+  {
+    dataIndex: 'sex',
+    title: '性别',
+    customRender: ({ record }: { record: RecordItem }) => {
+      return <a-tag>{record.sex.label}</a-tag>
+    },
+  },
+
+  {
+    title: '是否启用',
+    dataIndex: 'isEnable',
+    customRender: ({ record }: { record: RecordItem }) => {
+      return record.isEnable.extData?.color === 'success' ? <a-tag color='green'>{record.isEnable.label}</a-tag> : <a-tag color='#f50'>{record.isEnable.label}</a-tag>
+    },
+  },
+  {
+    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 = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 14 },
+}
+import type { FormInstance } from 'ant-design-vue'
+import type { Rule } from 'ant-design-vue/es/form'
+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 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 handleFinish = (values: FormState) => {
+  console.log('自定义校验成功')
+  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>

securityManagement/.env.development

@@ -5,7 +5,7 @@ VITE_DROP_CONSOLE=false
 
 # axios
 VITE_APP_BASE_API=/api
-VITE_APP_PROXY_URL=http://172.10.10.151:8765
+VITE_APP_PROXY_URL=http://172.10.10.93:8765
 
 # rsa 公钥
 VITE_APP_RSA_PUBLIC_KEY=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDJps/EXxxSpEM1Ix4R0NWIOBciHCr7P7coDT8tNKfelgR7txcJOqHCO/MIWe7T04aHQTcpQxqx9hMca7dbqz8TZpz9jvLzE/6ZonVKxHsoFnNlHMp1/CPAJ9f6D9wYicum2KltJkmQ0g//D9W2zPCYoGOmSRFcZx/KEBa4EM53jQIDAQAB

securityManagement/src/config/index.ts

@@ -3,7 +3,10 @@ import {SystemMenu} from "@/types/config";
 export const ROUTER_WHITE_LIST: string[] = ['/login', '/test','/enterprise'];
 export const CLIENT_TYPE:string = "MANAGEMENT_SECURITY";
 
-
+export const UNIT_TYPE = {
+    security: 'SECURITY_UNIT',
+    police: 'POLICE_UNIT'
+}
 export const SYSTEM_MENUS: SystemMenu[] = [
     {
         title: '首页',

securityManagement/src/types/config/index.ts

@@ -10,3 +10,4 @@ export interface SystemMenu {
     component?: RouteComponent;
     children?: SystemMenu[];
 }
+

securityManagement/src/types/views/bgManagement.ts

@@ -8,7 +8,7 @@ export interface BgManagementPagerQueryParams extends BaseTableRowRecord{
     /** 行政区划编码 **/
     administrativeDivisionCodes?: string[];
     /** 是否启用 **/
-    isEnable?: number;
+    isEnable?: BaseEnum<number>;
     /** 审核状态 **/
     checkStatus?: number;
     /** 账号  **/
@@ -18,5 +18,15 @@ export interface BgManagementPagerQueryParams extends BaseTableRowRecord{
     createTime?:string,
     snowFlakeId?:string,
     remark?:string,
+    isAdmin?:BaseEnum<number | string>
+}
+
+export interface FromItem {
+    snowFlakeId?: string,
+    name: string,
+    sex: number,
+    telephone: string,
+    isEnable: BaseEnum<number>,
+    remark?: string,
 }
 

securityManagement/src/views/test.vue

@@ -1,261 +1,8 @@
 <template>
-  <div>
+  <div>test</div>
-    <TableProMax
-        ref="tableRef"
-        :request-api="reqApi"
-        :columns="columns"
-        :searchFormOptions="searchFormOptions"
-        :scroll="{x}"
-    >
-      <template #tableHeader>
-        <a-space>
-          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
-        </a-space>
-      </template>
-    </TableProMax>
-    <a-modal
-        v-model:open="visible"
-        :title="title"
-        @ok="submit"
-        @cancel="closeModal"
-    >
-      <FormProMax ref="formRef" v-model:value="formParams"  :form-item-options="formItemOptions"/>
-    </a-modal>
-  </div>
-
 </template>
+<script setup lang="ts">
 
-<script setup lang="tsx">
-import TableProMax from "@/components/table/TableProMax.vue";
-import {TableProMaxProps} from "@/types/components/table";
-import api from "@/axios";
-import {ref} from "vue";
-import {ComponentExposed} from "vue-component-type-helpers";
-import {dictSelectNodes} from "@/config/dict.ts";
-import {BgManagementPagerQueryParams} from "@/types/views/bgManagement.ts";
-import FormProMax from "@/components/form/FormProMax.vue";
-import {FormProMaxItemOptions} from "@/types/components/form";
-import {FormExpose} from "ant-design-vue/es/form/Form";
-import {message} from "ant-design-vue";
-import {} from '@/hooks/useTableProMax.ts'
-
-
-type TableProps = TableProMaxProps<BgManagementPagerQueryParams>
-
-const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
-// table表格
-const reqApi: TableProps['requestApi'] = (params) => api.post('/managementSecurityUnitUser/pager', params)  //分页
-const columns: TableProps['columns'] = [
-  {
-    dataIndex: 'account',
-    title: '账号',
-    width: 100,
-    ellipsis: true
-  },
-  {
-    dataIndex: 'name',
-    title: '名称',
-    width: 200,
-    ellipsis: true
-  }, {
-    dataIndex: 'sex',
-    title: '性别',
-    customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
-    width: 150
-  }, {
-    dataIndex: 'telephone',
-    title: '手机号码',
-    width: 150,
-    ellipsis: true
-  },
-  {
-    dataIndex: 'createTime',
-    title: '创建时间',
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    dataIndex: 'snowFlakeId',
-    title: '社区唯一编码',
-    width: 200,
-    ellipsis: true
-  }, {
-    dataIndex: 'remark',
-    title: '备注',
-    width: 200,
-    ellipsis: true
-  }, {
-    dataIndex: 'isEnable',
-    title: '是否启用',
-    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
-    width: 150
-  }, {
-    dataIndex: 'opt',
-    title: '操作',
-    fixed: "right",
-    customRender({record}) {
-      return <a-space>
-        <a-button class={record.isEnable.value === 0 ? 'btn-danger' : 'btn-success'}  onClick={async () => {
-          const resp = await api.post('/management/disableOrEnable', {
-            unitId: record.snowFlakeId,
-            unitOptType: UNIT_TYPE.security
-          })
-          message.success(resp.message)
-          await tableRef.value?.requestGetTableData()
-        }}>
-          {record.isEnable.value === 0 ? '禁用' : '启用'}
-        </a-button>
-
-
-
-        <a-button>
-          删除
-        </a-button>
-        <a-button  onClick={async () => {
-              visible.value = true
-              title.value = "编辑用户"
-              formParams.value.snowFlakeId = record.snowFlakeId
-              formParams.value.name = record.name,
-              formParams.value.sex =  record.sex.value,
-              formParams.value. telephone = record.telephone,
-              formParams.value.isEnable = record.isEnable?.value,
-              formParams.value.remark = record.remark
-        }}>
-          编辑
-        </a-button>
-      </a-space>
-    }
-  },
-]
-const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
-const searchFormOptions: TableProps["searchFormOptions"] = {
-  name: {
-    type: 'input',
-    label: '名称'
-  }, sex: {
-    type: 'select',
-    label: '性别',
-    options: [
-      {
-        value: null,
-        label: '全部'
-      }, ...dictSelectNodes('Sex')
-    ]
-  },
-  telephone: {
-    type: 'input',
-    label: '手机号'
-  },
-  isEnable: {
-    type: 'select',
-    label: '是否启用',
-    options: [
-      {
-        value: null,
-        label: '全部'
-      }, ...dictSelectNodes('IsEnable')
-    ]
-  }
-}
-
-
-const visible = ref(false)
-const title = ref('新增用户')
-const formRef  = ref<FormExpose>(null)
-const formParams = ref<{
-  snowFlakeId?: string,
-  name: string,
-  sex: number,
-  telephone: string,
-  isEnable: boolean,
-  remark?: string,
-}>({
-  name: '',
-  sex: null,
-  telephone: '',
-  isEnable: null,
-})
-
-interface FromItem {
-  snowFlakeId?: string,
-  name: string,
-  sex: number,
-  telephone: string,
-  isEnable: boolean,
-  remark?: string,
-}
-
-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:'备注',
-  }
-})
-const submit = async () => {
-  await formRef.value.validate()
-  const snowFlakeId = ref('')
-   if(title.value === '新增用户'){
-     snowFlakeId.value = ''
-   }else{
-     snowFlakeId.value = formParams.value.snowFlakeId
-   }
-  const managementSecurityUnitUserSaveOrUpdateParams = {
-    snowFlakeId:snowFlakeId.value,
-    name:formParams.value.name,
-    sex:formParams.value.sex,
-    telephone:formParams.value.telephone,
-    isEnable:formParams.value.isEnable,
-    remark:formParams.value.remark
-  }
-  const resp =  await api.post('/managementSecurityUnitUser/saveOrUpdate',managementSecurityUnitUserSaveOrUpdateParams)
-  message.success(resp.message)
-  close()
-}
-const close = ()=>{
-  tableRef.value?.requestGetTableData()
-  visible.value = false
-  closeModal()
-}
-const closeModal = () => {
-  formParams.value = {
-    name:'',
-    sex:null,
-    telephone:'',
-    isEnable:null,
-    remark:''
-  }
-  visible.value = false
-  // formRef.value.
-  console.log('取消')
-}
-//Form
-const addUserManagement = () => {
-  visible.value = true
-  title.value = ''
-}
 </script>
 
 

securityManagement/src/views/userManagement/bgManagement/index.vue

@@ -1,12 +1,248 @@
 <template>
-  <div>用户管理</div>
+  <div>
+    <TableProMax
+        ref="tableRef"
+        :request-api="reqApi"
+        :columns="columns"
+        :searchFormOptions="searchFormOptions"
+        :scroll="{x}"
+    >
+      <template #tableHeader>
+        <a-space>
+          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
+        </a-space>
+      </template>
+    </TableProMax>
+    <a-modal
+        v-model:open="visible"
+        :title="title"
+        @ok="submit"
+        @cancel="closeModal"
+    >
+      <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions"/>
+    </a-modal>
+  </div>
+
 </template>
-<script setup lang="ts">
 
+<script setup lang="tsx">
+import TableProMax from "@/components/table/TableProMax.vue";
+import {TableProMaxProps} from "@/types/components/table";
+import api from "@/axios";
+import {ref} from "vue";
+import {ComponentExposed} from "vue-component-type-helpers";
+import {dictSelectNodes} from "@/config/dict.ts";
+import {BgManagementPagerQueryParams, FromItem} from "@/types/views/bgManagement.ts";
+import FormProMax from "@/components/form/FormProMax.vue";
+import {FormProMaxItemOptions} from "@/types/components/form";
+import {FormExpose} from "ant-design-vue/es/form/Form";
+import {message} from "ant-design-vue";
+
+
+type TableProps = TableProMaxProps<BgManagementPagerQueryParams>
+
+const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
+// table表格
+const reqApi: TableProps['requestApi'] = (params) => api.post('/managementSecurityUnitUser/pager', params)  //分页
+const columns: TableProps['columns'] = [
+  {
+    dataIndex: 'account',
+    title: '账号',
+    width: 100,
+    ellipsis: true
+  },
+  {
+    dataIndex: 'name',
+    title: '名称',
+    width: 200,
+    ellipsis: true
+  }, {
+    dataIndex: 'sex',
+    title: '性别',
+    customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
+    width: 150
+  }, {
+    dataIndex: 'telephone',
+    title: '手机号码',
+    width: 150,
+    ellipsis: true
+  },
+  {
+    dataIndex: 'createTime',
+    title: '创建时间',
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    dataIndex: 'remark',
+    title: '备注',
+    width: 200,
+    ellipsis: true
+  }, {
+    dataIndex: 'isEnable',
+    title: '是否启用',
+    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
+    width: 150
+  }, {
+    dataIndex: 'opt',
+    title: '操作',
+    fixed: "right",
+    customRender({record}) {
+      return (
+          record.isAdmin.value === 1?
+          <a-space>
+            <a-button type="primary" danger>
+              <a-popconfirm
+                  title="确认删除账号吗?"
+                  onConfirm={async () => {
+                    const resp = await api.delete('/managementSecurityUnitUser/deleteById', {
+                      managementSecurityUnitUserId: record.snowFlakeId,
+                    })
+                    message.success(resp.message)
+                    await tableRef.value?.requestGetTableData()
+                  }}>
+                删除
+              </a-popconfirm>
+            </a-button>
+            <a-button type="primary" onClick={async () => {
+              visible.value = true
+              title.value = "编辑用户"
+              formParams.value.snowFlakeId = record.snowFlakeId
+              formParams.value.name = record.name,
+                  formParams.value.sex = record.sex.value,
+                  formParams.value.telephone = record.telephone,
+                  formParams.value.isEnable = record.isEnable?.value,
+                  formParams.value.remark = record.remark
+            }}>
+              编辑
+            </a-button>
+          </a-space>
+              :
+              <i></i>
+      )
+    }
+  },
+]
+const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
+const searchFormOptions: TableProps["searchFormOptions"] = {
+  name: {
+    type: 'input',
+    label: '名称'
+  }, sex: {
+    type: 'select',
+    label: '性别',
+    options: [
+      {
+        value: null,
+        label: '全部'
+      }, ...dictSelectNodes('Sex')
+    ]
+  },
+  telephone: {
+    type: 'input',
+    label: '手机号'
+  },
+  isEnable: {
+    type: 'select',
+    label: '是否启用',
+    options: [
+      {
+        value: null,
+        label: '全部'
+      }, ...dictSelectNodes('IsEnable')
+    ]
+  }
+}
+
+
+const visible = ref(false)
+const title = ref('新增用户')
+const formRef = ref<FormExpose>(null)
+const formParams = ref<{
+  snowFlakeId?: string,
+  name: string,
+  sex: number,
+  telephone: string,
+  isEnable: any,
+  remark?: string,
+}>({
+  name: '',
+  sex: 0,
+  telephone: '',
+  isEnable: 0,
+})
+
+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: '备注',
+  }
+})
+const submit = async () => {
+  await formRef.value.validate()
+  const snowFlakeId = ref('')
+  if (title.value === '新增用户') {
+    snowFlakeId.value = ''
+  } else {
+    snowFlakeId.value = formParams.value.snowFlakeId
+  }
+  const managementSecurityUnitUserSaveOrUpdateParams = {
+    snowFlakeId: snowFlakeId.value,
+    name: formParams.value.name,
+    sex: formParams.value.sex,
+    telephone: formParams.value.telephone,
+    isEnable: formParams.value.isEnable,
+    remark: formParams.value.remark
+  }
+  const resp = await api.post('/managementSecurityUnitUser/saveOrUpdate', managementSecurityUnitUserSaveOrUpdateParams)
+  message.success(resp.message)
+  close()
+}
+const close = () => {
+  tableRef.value?.requestGetTableData()
+  visible.value = false
+  closeModal()
+}
+const closeModal = () => {
+  formParams.value = {
+    name: '',
+    sex: 0,
+    telephone: '',
+    isEnable: 0,
+    remark: ''
+  }
+  visible.value = false
+}
+//Form
+const addUserManagement = () => {
+  visible.value = true
+  title.value = ''
+}
 </script>
 
 
-
 <style scoped lang="scss">
 
 </style>