Merge remote-tracking branch 'origin/main'

This commit is contained in:
luozhun 2024-09-06 14:54:24 +08:00
commit 3c461b4853
31 changed files with 1752 additions and 274 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

View File

@ -6,7 +6,7 @@ VITE_DROP_CONSOLE=false
# axios # axios
VITE_APP_BASE_API=/api VITE_APP_BASE_API=/api
# VITE_APP_PROXY_URL=http://localhost:8765 # 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 公钥 # rsa 公钥

View File

@ -26,16 +26,30 @@ declare module 'vue' {
ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider'] ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
AMenu: typeof import('ant-design-vue/es')['Menu'] AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem'] 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'] ASpin: typeof import('ant-design-vue/es')['Spin']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu'] ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
ATable: typeof import('ant-design-vue/es')['Table']
ATabPane: typeof import('ant-design-vue/es')['TabPane'] ATabPane: typeof import('ant-design-vue/es')['TabPane']
ATabs: typeof import('ant-design-vue/es')['Tabs'] 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'] 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'] Layout: typeof import('./src/components/layout/layout.vue')['default']
LayoutHeader: typeof import('./src/components/layout/header/LayoutHeader.vue')['default'] LayoutHeader: typeof import('./src/components/layout/header/LayoutHeader.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] 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'] 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'] TelephoneLogin: typeof import('./src/components/login/TelephoneLogin.vue')['default']
} }
} }

View File

@ -734,6 +734,21 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true "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": { "@types/node": {
"version": "22.5.1", "version": "22.5.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
@ -743,6 +758,11 @@
"undici-types": "~6.19.2" "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": { "@vitejs/plugin-vue": {
"version": "5.1.3", "version": "5.1.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
@ -2332,6 +2352,11 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true "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": { "vite": {
"version": "5.4.2", "version": "5.4.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
@ -2362,6 +2387,11 @@
"@vue/shared": "3.4.38" "@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": { "vue-demi": {
"version": "0.14.10", "version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
@ -2402,6 +2432,15 @@
"is-plain-object": "3.0.1" "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": { "warning": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -23,9 +23,9 @@
</a-menu-item> </a-menu-item>
</a-menu> --> </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"> <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}`"> <router-link :to="`${route.children[0].path}`">
<HomeOutlined v-if="route.name === 'dashboard'" /> <HomeOutlined v-if="route.name === 'dashboard'" />
<InsuranceOutlined v-if="route.name === 'police'" /> <InsuranceOutlined v-if="route.name === 'police'" />
@ -36,10 +36,11 @@
</a-menu-item> </a-menu-item>
<a-sub-menu v-if="route.children && route.children.length && route?.meta?.title" :key="route.path"> <a-sub-menu v-if="route.children && route.children.length && route?.meta?.title" :key="route.path">
<template #title> <template #title>
<MailOutlined /> <MailOutlined v-if="route.name === 'query-'" />
<UserOutlined v-if="route.name === 'user'" />
<span>{{ route.meta?.title }}</span> <span>{{ route.meta?.title }}</span>
</template> </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> <router-link :to="`${route.path}/${child.path}`">{{ child.meta?.title }}</router-link>
</a-menu-item> </a-menu-item>
</a-sub-menu> </a-sub-menu>
@ -68,17 +69,60 @@
</template> </template>
<script setup lang="ts"> <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 LayoutHeader from '@/components/layout/header/LayoutHeader.vue'
import { computed } from 'vue' import { computed, watch, onMounted } from 'vue'
import { staticRouter } from '@/router/staticRouters' import { staticRouter } from '@/router/staticRouters'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const route = useRoute() 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(() => [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)) // const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
// staticRouter.forEach((element) => { // staticRouter.forEach((element) => {
@ -108,8 +152,8 @@ const keepAliveNames = ref<string[]>(['index', 'rindex'])
.layout-content { .layout-content {
margin: 10px; margin: 10px;
padding: 4px; // padding: 4px;
background: #f5f7fd; // background: #f5f7fd;
min-height: 280px; min-height: 280px;
border-radius: 5px; border-radius: 5px;
overflow: auto; overflow: auto;

View File

@ -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>

View File

@ -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()),
})
}

View File

@ -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>

View File

@ -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] || []

View File

@ -1,4 +1,8 @@
declare const __APP_ENV: ImportMetaEnv; 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; message: string;
data?: T; 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 { interface dataStatus {
account: string; account: string;
password: string; password: string;
@ -20,3 +52,30 @@ interface dataStatus {
value: number; 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[];
}

View File

@ -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
};
}

View File

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

View File

@ -1,5 +1,6 @@
// name 唯一
import { RouteRecordRaw } from "vue-router"; import { RouteRecordRaw } from "vue-router";
export const Layout = () => import("@/components/layout/layout.vue"); export const Layout = () => import("@/components/layout/layout.vue");
export const staticRouter: RouteRecordRaw[] = 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-', path: '/query-',

View File

@ -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>>
}

View File

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

View File

@ -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
}

View File

@ -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[];
}

View File

@ -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
}

View File

@ -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";
}
}

View File

@ -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;
}

View File

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

View File

@ -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] = '' // nullundefined
}
}
}
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>

View File

@ -5,7 +5,7 @@ VITE_DROP_CONSOLE=false
# axios # axios
VITE_APP_BASE_API=/api 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 公钥 # rsa 公钥
VITE_APP_RSA_PUBLIC_KEY=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDJps/EXxxSpEM1Ix4R0NWIOBciHCr7P7coDT8tNKfelgR7txcJOqHCO/MIWe7T04aHQTcpQxqx9hMca7dbqz8TZpz9jvLzE/6ZonVKxHsoFnNlHMp1/CPAJ9f6D9wYicum2KltJkmQ0g//D9W2zPCYoGOmSRFcZx/KEBa4EM53jQIDAQAB VITE_APP_RSA_PUBLIC_KEY=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDJps/EXxxSpEM1Ix4R0NWIOBciHCr7P7coDT8tNKfelgR7txcJOqHCO/MIWe7T04aHQTcpQxqx9hMca7dbqz8TZpz9jvLzE/6ZonVKxHsoFnNlHMp1/CPAJ9f6D9wYicum2KltJkmQ0g//D9W2zPCYoGOmSRFcZx/KEBa4EM53jQIDAQAB

View File

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

View File

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

View File

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

View File

@ -1,261 +1,8 @@
<template> <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> </template>
</TableProMax> <script setup lang="ts">
<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="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> </script>

View File

@ -1,12 +1,248 @@
<template> <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> </template>
<script setup lang="ts"> </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="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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
</style> </style>