第一次提交
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
import {defHttp} from '/@/utils/http/axios';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
|
||||
enum Api {
|
||||
list = '/sys/tableWhiteList/list',
|
||||
save = '/sys/tableWhiteList/add',
|
||||
edit = '/sys/tableWhiteList/edit',
|
||||
deleteOne = '/sys/tableWhiteList/delete',
|
||||
deleteBatch = '/sys/tableWhiteList/deleteBatch',
|
||||
importExcel = '/sys/tableWhiteList/importExcel',
|
||||
exportXls = '/sys/tableWhiteList/exportXls',
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出api
|
||||
* @param params
|
||||
*/
|
||||
export const getExportUrl = Api.exportXls;
|
||||
/**
|
||||
* 导入api
|
||||
*/
|
||||
export const getImportUrl = Api.importExcel;
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const list = (params) =>
|
||||
defHttp.get({url: Api.list, params});
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
* @param params
|
||||
* @param handleSuccess
|
||||
*/
|
||||
export const deleteOne = (params, handleSuccess) => {
|
||||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 批量删除
|
||||
* @param params
|
||||
* @param handleSuccess
|
||||
*/
|
||||
export const batchDelete = (params, handleSuccess) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中数据',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
return defHttp.delete({
|
||||
url: Api.deleteBatch,
|
||||
data: params
|
||||
}, {joinParamsToUrl: true}).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 保存或者更新
|
||||
* @param params
|
||||
* @param isUpdate 是否是更新数据
|
||||
*/
|
||||
export const saveOrUpdate = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({url: url, params});
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import {BasicColumn, FormSchema} from '/@/components/Table';
|
||||
|
||||
const statusOptions = [
|
||||
{label: '禁用', value: '0'},
|
||||
{label: '启用', value: '1'},
|
||||
]
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '允许的表名',
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '允许的字段名',
|
||||
dataIndex: 'fieldName',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
customRender({text}) {
|
||||
const find = statusOptions.find(opt => opt.value === text);
|
||||
return find?.label || '未知';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
}
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: '允许的表名',
|
||||
field: 'tableName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '允许的字段名',
|
||||
field: 'fieldName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: statusOptions,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{label: '', field: 'id', component: 'Input', show: false},
|
||||
{
|
||||
label: '允许的表名',
|
||||
field: 'tableName',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: '允许的字段名',
|
||||
field: 'fieldName',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
helpMessage: '多个用逗号分割',
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
defaultValue: '1',
|
||||
componentProps: {
|
||||
options: statusOptions,
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">
|
||||
新增
|
||||
</a-button>
|
||||
<!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">-->
|
||||
<!-- 导出-->
|
||||
<!-- </a-button>-->
|
||||
<!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">-->
|
||||
<!-- 导入-->
|
||||
<!-- </j-upload-button>-->
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined"></Icon>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button>
|
||||
批量操作
|
||||
<Icon icon="mdi:chevron-down"></Icon>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="getTableAction(record)"
|
||||
:dropDownActions="getDropDownAction(record)"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<SysTableWhiteListModal @register="registerModal" @success="handleSuccess"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="ahh-sysTableWhiteList" setup>
|
||||
import {BasicTable, TableAction} from '/@/components/Table';
|
||||
import {useModal} from '/@/components/Modal';
|
||||
import {useListPage} from '/@/hooks/system/useListPage'
|
||||
import SysTableWhiteListModal from './modules/SysTableWhiteListModal.vue'
|
||||
import {columns, searchFormSchema} from './SysTableWhiteList.data';
|
||||
import {batchDelete, deleteOne, getExportUrl, getImportUrl, list} from './SysTableWhiteList.api';
|
||||
|
||||
//注册model
|
||||
const [registerModal, {openModal}] = useModal();
|
||||
//注册table数据
|
||||
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
|
||||
tableProps: {
|
||||
title: '系统表白名单',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: false,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
showAdvancedButton: true,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
},
|
||||
},
|
||||
exportConfig: {
|
||||
name: "系统表白名单",
|
||||
url: getExportUrl,
|
||||
},
|
||||
importConfig: {
|
||||
url: getImportUrl
|
||||
},
|
||||
})
|
||||
|
||||
const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext
|
||||
|
||||
/**
|
||||
* 新增事件
|
||||
*/
|
||||
function handleAdd() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
showFooter: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑事件
|
||||
*/
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
showFooter: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
function handleDetail(record: Recordable) {
|
||||
openModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
showFooter: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteOne({id: record.id}, reload);
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除事件
|
||||
*/
|
||||
async function batchHandleDelete() {
|
||||
await batchDelete({ids: selectedRowKeys.value}, reload);
|
||||
}
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess({isUpdate, values}) {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉操作栏
|
||||
*/
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
}, {
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
@register="registerModal"
|
||||
:title="title"
|
||||
width="40%"
|
||||
v-bind="$attrs"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<div class="content">
|
||||
<BasicForm @register="registerForm"/>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, ref, unref} from 'vue';
|
||||
import {BasicModal, useModalInner} from '/@/components/Modal';
|
||||
import {BasicForm, useForm} from '/@/components/Form/index';
|
||||
import {formSchema} from '../SysTableWhiteList.data';
|
||||
import {saveOrUpdate} from '../SysTableWhiteList.api';
|
||||
// Emits声明
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
const isUpdate = ref(true);
|
||||
//表单配置
|
||||
const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
|
||||
labelWidth: 120,
|
||||
wrapperCol: null,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
//表单赋值
|
||||
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
|
||||
//重置表单
|
||||
await resetFields();
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
showCancelBtn: data?.showFooter,
|
||||
showOkBtn: data?.showFooter
|
||||
});
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
if (unref(isUpdate)) {
|
||||
//表单赋值
|
||||
await setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
setProps({ disabled: !data?.showFooter })
|
||||
});
|
||||
//设置标题
|
||||
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
|
||||
|
||||
//表单提交事件
|
||||
async function handleSubmit(v) {
|
||||
try {
|
||||
let values = await validate();
|
||||
setModalProps({confirmLoading: true});
|
||||
//提交表单
|
||||
await saveOrUpdate(values, isUpdate.value);
|
||||
//关闭弹窗
|
||||
closeModal();
|
||||
//刷新列表
|
||||
emit('success', {isUpdate: isUpdate.value, values});
|
||||
} finally {
|
||||
setModalProps({confirmLoading: false});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
padding: 20px 8% 0 4%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user