后台用户管理使用ProMax组件

后台用户管理使用ProMax组件

.idea/vcs.xml

@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="VcsDirectoryMappings" defaultProject="true" />
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
 </project>

policeManagement/src/components/table/TableProMax.vue

@@ -1,15 +1,16 @@
 <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">
+      <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 />
+              <search-outlined/>
               搜索
             </a-button>
             <a-button danger @click="resetFormAndTable">
-              <rollback-outlined />
+              <rollback-outlined/>
               重置
             </a-button>
           </a-space>
@@ -26,7 +27,7 @@
             <a-tooltip>
               <template #title>刷新数据</template>
               <a-button shape="circle" @click="requestGetTableData">
-                <ReloadOutlined />
+                <ReloadOutlined/>
               </a-button>
             </a-tooltip>
           </template>
@@ -34,7 +35,7 @@
             <a-tooltip>
               <template #title>打印数据</template>
               <a-button shape="circle">
-                <PrinterOutlined />
+                <PrinterOutlined/>
               </a-button>
             </a-tooltip>
           </template>
@@ -69,12 +70,17 @@
 
 <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 {PrinterOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined} from '@ant-design/icons-vue'
-import { computed, onMounted, Ref, ref } from 'vue'
+import {computed, onMounted, Ref, ref} from 'vue'
-import { FormInstance } from 'ant-design-vue'
+import {FormInstance} from 'ant-design-vue'
 import useTableProMax from '@/hooks/useTableProMax.ts'
-import { includes, isEmpty } from 'lodash-es'
+import {includes, isEmpty} from 'lodash-es'
-import { BaseTableRowRecord, TableProMaxProps, TableProMaxRowSelect, TableProMaxSlots } from '@/types/components/table/index.ts'
+import {
+  BaseTableRowRecord,
+  TableProMaxProps,
+  TableProMaxRowSelect,
+  TableProMaxSlots
+} from '@/types/components/table/index.ts'
 
 //
 const selectKeys = ref<string[]>([])
@@ -150,7 +156,7 @@ const tableColumns = computed(() => {
         dataIndex: 'index',
         width: 60,
         title: '序号',
-        customRender: ({ index }) => index + 1,
+        customRender: ({index}) => index + 1,
       })
     }
   }
@@ -166,7 +172,16 @@ 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(
+const {
+  loading,
+  dataSource,
+  pageParams,
+  search,
+  requestGetTableData,
+  handleSizeChange,
+  handleCurrentChange,
+  resetState
+} = useTableProMax(
     props.requestApi,
     searchFormRef,
     searchParams,
@@ -174,6 +189,7 @@ const { loading, dataSource, pageParams, search, requestGetTableData, handleSize
     props.dataCallback,
     props.requestError
 )
+console.log('pageParams', pageParams)
 
 onMounted(() => props.requestAuto && requestGetTableData(true))
 

policeManagement/src/views/user/user.vue

@@ -2,373 +2,243 @@
   <!-- 后台用户 -->
   <!-- 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">
+    <TableProMax
-      <div class="mr-5">名称</div>
+        ref="tableRef"
-      <a-input class="w-40 mr-5" v-model:value="searchUser" autocomplete="off" placeholder="请输入名称搜索" />
+        :request-api="reqApi"
-      <div class="mr-5 ml-5">是否启用</div>
+        :columns="columns"
+        :searchFormOptions="searchFormOptions"
+        :scroll="{x}"
+    >
+      <template #tableHeader>
         <a-space>
-        <a-select ref="select" v-model:value="isEnableValue" style="width: 120px" @focus="focus" @change="handleChange">
+          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
-          <a-select-option v-for="(item, index) in enumsIsEnable" :key="index" :value="item.value">{{ item.label }}</a-select-option>
-        </a-select>
         </a-space>
-
+      </template>
-      <div class="mr-5 ml-5">性别</div>
+    </TableProMax>
-      <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 :loading="loading" :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">
+      <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions"/>
-        <!-- 用户根据单位代码去查询 审核状态 -->
-        <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">
-/**
+import TableProMax from "@/components/table/TableProMax.vue";
- * @current 当前页
+import {TableProMaxProps} from "@/types/components/table";
- * @pages 总页数
+import {message} from 'ant-design-vue'
- * @size 每页多少条
+import {dictSelectNodes} from '@/config/dict.ts'
- * @total 总条数
+// const enumsSex = ref<any[]>(dictSelectNodes('Sex'))
- */
+// const enumsIsEnable = ref<any[]>(dictSelectNodes('IsEnable'))
-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 } from '@ant-design/icons-vue'
+import {ref, reactive, onMounted} from 'vue'
-import { ref, reactive, onMounted } from 'vue'
+import FormProMax from "@/components/form/FormProMax.vue";
-const loading = ref(false)
+import {FormProMaxItemOptions} from "@/types/components/form";
-const focus = () => {
+import {FormExpose} from "ant-design-vue/es/form/Form";
-  console.log('focus')
+import {publicUnitPagerQueryParams, FromItem} from "@/types/views/publicUnit.ts";
-}
 
-const handlePageChange = (page: any, pageSize: any) => {
+const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
-  console.log('🚀 ~ handlePageChange ~ page, pageSize:', page, pageSize)
+const formRef = ref<FormExpose>(null)
+type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
+const reqApi: TableProps['requestApi'] = (params) => api.post('/managementPoliceUnitUser/pager', params)  //分页
+const formParams = ref<{
+  snowFlakeId?: string,
+  name: string,
+  sex: number,
+  telephone: string,
+  isEnable: any,
 
-  pagination.current = page
+}>({
-  pagination.pageSize = pageSize
+  name: '',
-  getUserList()
+  sex: 0,
-}
+  telephone: '',
-
+  isEnable: 0,
-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 formItemOptions = ref<FormProMaxItemOptions<FromItem>>({
-const getUserList = async function (params?: any) {
+  name: {
-  loading.value = true
+    type: 'input',
-  let obj = { page: { size: pagination.pageSize, current: pagination.current }, params }
+    label: '姓名',
-  const res = await api.post<any>('/managementPoliceUnitUser/pager', obj)
+    required: true,
-  const { total, records } = res.data
+    rules: [
-  tableData.value = records
+      {required: true, message: '请输入姓名'}
-  pagination.total = Number(total)
+    ],
-  loading.value = false
+  },
-}
+  sex: {
-
+    type: 'radioGroup',
-onMounted(() => {
+    label: '性别',
-  getUserList()
+    options: dictSelectNodes('Sex'),
-})
+    required: true,
-
+  },
-type Key = string | number
+  telephone: {
-
+    type: 'input',
-interface DataType {
+    label: '手机号',
-  key: Key
+    required: true,
-  name: string
+    rules: [
-  age: number
+      {required: true, message: '请输入手机号'},
-  address: string
+      {
-}
+        validator: (rule, value) => {
-
+          const phoneRegex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
-interface RecordItem {
+          if (!value) {
-  account: string
+            return Promise.reject('手机号不能为空');
-  createTime: string
+          } else if (!phoneRegex.test(value)) {
-  createUserName: string | null
+            return Promise.reject('手机号格式不正确');
-  isAdmin: LabelValue // 对象结构
+          } else {
-  isEnable: EnableStatus // 包含扩展数据的对象
+            return Promise.resolve();
-  name: string
+          }
-  sex: LabelValue // 对象结构
+        },
-  snowFlakeId: string // Snowflake ID 是字符串
+        trigger: 'blur',
-  telephone: string
+      },
-}
+    ],
-
+  },
-interface LabelValue {
+  isEnable: {
-  value: number
+    type: 'radioGroup',
-  label: string
+    label: '启用状态',
-}
+    options: dictSelectNodes('IsEnable'),
-
+    required: true,
-interface EnableStatus {
+  },
-  value: number
+})
-  label: string
+const columns: TableProps['columns'] = [
-  extData: {
-    color: string
-  }
-}
-const columns = [
-  // {
-  //   title: '序号',
-  //   customRender: (text, record, index, column) => {
-  //     console.log(index)
-  //   },
-  // },
   {
-    title: '账号',
     dataIndex: 'account',
+    title: '账号',
+    width: 100,
+    ellipsis: true
   },
   {
-    title: '名称',
     dataIndex: 'name',
+    title: '名称',
+    width: 200,
+    ellipsis: true
   },
   {
     dataIndex: 'sex',
     title: '性别',
-    customRender: ({ record }: { record: RecordItem }) => {
+    customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
-      return <a-tag>{record.sex.label}</a-tag>
+    width: 150
   },
+  {
+    dataIndex: 'telephone',
+    title: '手机号码',
+    width: 150,
+    ellipsis: true
+  },
+  {
+    dataIndex: 'createTime',
+    title: '创建时间',
+    width: 200,
+    ellipsis: true,
   },
 
   {
-    title: '是否启用',
     dataIndex: 'isEnable',
-    customRender: ({ record }: { record: RecordItem }) => {
+    title: '是否启用',
-      return record.isEnable.extData?.color === 'success' ? <a-tag color='green'>{record.isEnable.label}</a-tag> : <a-tag color='#f50'>{record.isEnable.label}</a-tag>
+    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
-    },
+    width: 150
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
   },
   {
     dataIndex: 'opt',
     title: '操作',
-    fixed: 'right',
+    fixed: "right",
-    customRender({ record }: { record: RecordItem }) {
+    customRender({record}) {
-      return record.isAdmin.value === 1 ? (
+      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='确认删除账号吗?'
+                    style="width:100%"
+                    title="确认删除账号吗?"
                     onConfirm={async () => {
-                {
                       const resp = await api.delete('/managementPoliceUnitUser/deleteById', {
                         managementPoliceUnitUserId: record.snowFlakeId,
                       })
                       message.success(resp.message)
-                  getUserList()
+                      await tableRef.value?.requestGetTableData()
-                }
+                    }}>
-              }}
+                  <a-button type="primary" danger>删除</a-button>
-            >
-              删除
                 </a-popconfirm>
+                <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
+
+                }}>
+                  编辑
                 </a-button>
               </a-space>
-      ) : (
+              :
-        <i></i>
+              <div>超级管理员不能编辑</div>
       )
-    },
+    }
   },
 ]
-
+const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
-const saveOrUpdate = async () => {
+const searchFormOptions: TableProps["searchFormOptions"] = {
-  const res = await api.post<any>('/managementPoliceUnitUser/saveOrUpdate', formState)
+  name: {
-  message.success(res.message)
+    type: 'input',
-  visible.value = false
+    label: '名称'
-  getUserList() //刷新数据
+  }, sex: {
-  resetForm() //重置表单
+    type: 'select',
-  resetFormState()
+    label: '性别',
-  if (formState.hasOwnProperty('snowFlakeId')) {
+    options: [
-    delete formState.snowFlakeId
+      {
+        value: null,
+        label: '全部'
+      }, ...dictSelectNodes('Sex')
+    ]
+  },
+  telephone: {
+    type: 'input',
+    label: '手机号'
+  },
+  isEnable: {
+    type: 'select',
+    label: '是否启用',
+    options: [
+      {
+        value: null,
+        label: '全部'
+      }, ...dictSelectNodes('IsEnable')
+    ]
   }
-  if (title.value === '新增用户') {
-  }
-  // console.log('saveOrUpdate', res)
 }
 const visible = ref(false)
-const title = ref('')
+const title = ref('新增用户')
-const submit = async () => {
+const addUserManagement = () => {
-  await formRef.value?.validate() //等待表单校验
-  console.log('表单校验完成')
-  saveOrUpdate()
-}
-const closeModal = () => {
-  resetForm()
-  resetFormState()
-}
-const addUser = () => {
   visible.value = true
+}
+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,
+
+  }
+  const resp = await api.post('/managementPoliceUnitUser/saveOrUpdate', managementSecurityUnitUserSaveOrUpdateParams)
+  message.success(resp.message)
+  tableRef.value?.requestGetTableData()
+  closeModal()
+
+}
+
+const closeModal = () => {
+  formParams.value = {
+    name: '',
+    sex: 0,
+    telephone: '',
+    isEnable: 0
+  }
+  visible.value = false
   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>