后台用户管理使用ProMax组件

2024-09-09 15:01:20 +08:00 · 2024-09-09 15:01:20 +08:00 · 98a0438393
parent be3eea4a2a
commit 98a0438393
5 changed files with 253 additions and 365 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.idea/vcs.xml
+++ b/.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>
--- a/policeManagement/src/components/table/TableProMax.vue
+++ b/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 { computed, onMounted, Ref, ref } from 'vue'
-import { FormInstance } from 'ant-design-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.ts'
-import { includes, isEmpty } from 'lodash-es'
-import { BaseTableRowRecord, TableProMaxProps, TableProMaxRowSelect, TableProMaxSlots } from '@/types/components/table/index.ts'
+import {includes, isEmpty} from 'lodash-es'
+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))

--- a/policeManagement/src/views/user/user.vue
+++ b/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">
-      <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>
+    <TableProMax
+        ref="tableRef"
+        :request-api="reqApi"
+        :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-select-option v-for="(item, index) in enumsIsEnable" :key="index" :value="item.value">{{ item.label }}</a-select-option>
-        </a-select>
+          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
        </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 :loading="loading" :pagination="pagination" :columns="columns" :data-source="tableData" />
-      </div>
-    </div>
+      </template>
+    </TableProMax>
    <!-- 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>
+      <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions"/>
    </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 TableProMax from "@/components/table/TableProMax.vue";
+import {TableProMaxProps} from "@/types/components/table";
+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'
-const loading = ref(false)
-const focus = () => {
-  console.log('focus')
-}
+import {ref, reactive, onMounted} from 'vue'
+import FormProMax from "@/components/form/FormProMax.vue";
+import {FormProMaxItemOptions} from "@/types/components/form";
+import {FormExpose} from "ant-design-vue/es/form/Form";
+import {publicUnitPagerQueryParams, FromItem} from "@/types/views/publicUnit.ts";

-const handlePageChange = (page: any, pageSize: any) => {
-  console.log('🚀 ~ handlePageChange ~ page, pageSize:', page, pageSize)
+const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
+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
-  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, // 页码改变时的回调函数
+}>({
+  name: '',
+  sex: 0,
+  telephone: '',
+  isEnable: 0,
 })
-
-const getUserList = async function (params?: any) {
-  loading.value = true
-  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)
-  loading.value = false
-}
-
-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)
-  //   },
-  // },
+const formItemOptions = ref<FormProMaxItemOptions<FromItem>>({
+  name: {
+    type: 'input',
+    label: '姓名',
+    required: true,
+    rules: [
+      {required: true, message: '请输入姓名'}
+    ],
+  },
+  sex: {
+    type: 'radioGroup',
+    label: '性别',
+    options: dictSelectNodes('Sex'),
+    required: true,
+  },
+  telephone: {
+    type: 'input',
+    label: '手机号',
+    required: true,
+    rules: [
+      {required: true, message: '请输入手机号'},
+      {
+        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}$/
+          if (!value) {
+            return Promise.reject('手机号不能为空');
+          } else if (!phoneRegex.test(value)) {
+            return Promise.reject('手机号格式不正确');
+          } else {
+            return Promise.resolve();
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+  },
+  isEnable: {
+    type: 'radioGroup',
+    label: '启用状态',
+    options: dictSelectNodes('IsEnable'),
+    required: true,
+  },
+})
+const columns: TableProps['columns'] = [
  {
-    title: '账号',
    dataIndex: 'account',
+    title: '账号',
+    width: 100,
+    ellipsis: true
  },
  {
-    title: '名称',
    dataIndex: 'name',
+    title: '名称',
+    width: 200,
+    ellipsis: true
  },
  {
    dataIndex: 'sex',
    title: '性别',
-    customRender: ({ record }: { record: RecordItem }) => {
-      return <a-tag>{record.sex.label}</a-tag>
+    customRender: ({text}) => <a-tag>{text?.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 }) => {
-      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',
+    title: '是否启用',
+    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
+    width: 150
  },
  {
    dataIndex: 'opt',
    title: '操作',
-    fixed: 'right',
-    customRender({ record }: { record: RecordItem }) {
-      return record.isAdmin.value === 1 ? (
+    fixed: "right",
+    customRender({record}) {
+      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 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
+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')
+    ]
  }
-  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 = () => {
+const title = ref('新增用户')
+const addUserManagement = () => {
  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>
--- a/policeSecurityServer/.DS_Store
+++ b/policeSecurityServer/.DS_Store