新增编辑

This commit is contained in:
wangyilin 2024-09-03 18:25:25 +08:00
parent 598b43293f
commit dd48806fcd
15 changed files with 1166 additions and 5 deletions

View File

@ -16,6 +16,7 @@
"lodash-es": "^4.17.21", "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",

View File

@ -0,0 +1,162 @@
/* 扩展ant design pro按钮组件颜色 */
$--my-antd-important: !important;
.btn-danger {
color: #ffffff;
background-color: #F5222D;
border-color: #F5222D;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #ff4d4f $--my-antd-important;
border-color: #ff4d4f $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #cf1322 $--my-antd-important;
border-color: #cf1322 $--my-antd-important;
}
}
.btn-volcano {
color: #ffffff;
background-color: #FA541C;
border-color: #FA541C;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #ff7a45 $--my-antd-important;
border-color: #ff7a45 $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #d4380d $--my-antd-important;
border-color: #d4380d $--my-antd-important;
}
}
.btn-warn {
color: #ffffff;
background-color: #FAAD14;
border-color: #FAAD14;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #ffc53d $--my-antd-important;
border-color: #ffc53d $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #d48806 $--my-antd-important;
border-color: #d48806 $--my-antd-important;
}
}
.btn-success {
color: #ffffff;
background-color: #52C41A;
border-color: #52C41A;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #73d13d $--my-antd-important;
border-color: #73d13d $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #389e0d $--my-antd-important;
border-color: #389e0d $--my-antd-important;
}
}
.button-color-cyan {
color: #ffffff;
background-color: #13C2C2;
border-color: #13C2C2;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #36cfc9 $--my-antd-important;
border-color: #36cfc9 $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #08979c $--my-antd-important;
border-color: #08979c $--my-antd-important;
}
}
.btn-daybreak {
color: #ffffff;
background-color: #1890FF;
border-color: #1890FF;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #096dd9 $--my-antd-important;
border-color: #096dd9 $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #40a9ff $--my-antd-important;
border-color: #40a9ff $--my-antd-important;
}
}
.button-color-geekblue {
color: #ffffff;
background-color: #2F54EB;
border-color: #2F54EB;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #1d39c4 $--my-antd-important;
border-color: #1d39c4 $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #597ef7 $--my-antd-important;
border-color: #597ef7 $--my-antd-important;
}
}
.btn-purple {
color: #ffffff;
background-color: #722ED1;
border-color: #722ED1;
&:hover, &:focus {
color: #ffffff $--my-antd-important;
background-color: #9254de $--my-antd-important;
border-color: #9254de $--my-antd-important;
}
&:active, &.active {
color: #ffffff $--my-antd-important;
background-color: #531dab $--my-antd-important;
border-color: #531dab $--my-antd-important;
}
}
.table-row-warn td {
background-color: #fefca6;
}
.table-row-danger td {
background-color: #f79988;
}
.table-row-success td {
background-color: #b6fcbe;
}
.ant-table-summary td {
background: #edeff6;
}

View File

@ -0,0 +1,206 @@
<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,223 @@
<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'],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

@ -13,5 +13,5 @@ export const initEnums = () => {
}) })
} }
export const enumSelectNodes = <T>(enumType: DictType): SelectNodeVo<T>[] => JSON.parse(sessionStorage.getItem('dictMap') as string)?.[enumType] || [] export const dictSelectNodes = <T>(enumType: DictType): SelectNodeVo<T>[] => JSON.parse(sessionStorage.getItem('dictMap') as string)?.[enumType] || []

View File

@ -12,13 +12,13 @@ export const SYSTEM_MENUS: SystemMenu[] = [
type: "menu", type: "menu",
component: () => import('@/views/index.vue') component: () => import('@/views/index.vue')
}, { }, {
title: '单位管理', title: '用户管理',
name: 'userManagement', name: 'userManagement',
path: '/userManagement', path: '/userManagement',
type: 'dir', type: 'dir',
children: [ children: [
{ {
title: '用户管理', title: '后台管理',
name: 'bgManagement', name: 'bgManagement',
path: '/bgManagement', path: '/bgManagement',
type: 'menu', type: 'menu',

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

@ -4,6 +4,7 @@ import '@/reset.css'
import './index.css' import './index.css'
// 公共样式 // 公共样式
import '@/assets/scss/common.scss' import '@/assets/scss/common.scss'
import '@/assets/scss/myAntD.scss'
// iconfont css // iconfont css
import "@/assets/iconfont/iconfont.css"; import "@/assets/iconfont/iconfont.css";
// vue Router // vue Router

View File

@ -32,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
// 不在白名单内需要查看是否携带token 没有token需要返回登录页进行登录 // 不在白名单内需要查看是否携带token 没有token需要返回登录页进行登录
if (!userStore.getTokenInfo?.value) { if (!userStore.getTokenInfo?.value) {
await message.warn('未找到token请重新登陆!') await message.warn('未找到token请重新登陆!')
return next('/login'); return next('/enterprise');
} }
//放行 //放行
return next(); return next();

View File

@ -51,4 +51,9 @@ export const staticRouter: RouteRecordRaw[] = [
name: 'test', name: 'test',
component: () => import("@/views/test.vue"), component: () => import("@/views/test.vue"),
}, },
{
path: '/enterprise',
name: 'enterprise',
component: () => import("@/views/enterprise.vue"),
},
] ]

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,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,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,22 @@
import {BaseTableRowRecord} from "@/types/components/table";
export interface BgManagementPagerQueryParams extends BaseTableRowRecord{
/** 名称 **/
name?: string;
/** 社会编码 **/
socialCode?: string;
/** 行政区划编码 **/
administrativeDivisionCodes?: string[];
/** 是否启用 **/
isEnable?: number;
/** 审核状态 **/
checkStatus?: number;
/** 账号 **/
account?:string,
sex?:BaseEnum<number>,
telephone?:string,
createTime?:string,
snowFlakeId?:string,
remark?:string,
}

View File

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