kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: todo

master
wangxiang 1 year ago
parent
1c6dc83895
commit
65a07079d0
24 changed files with 3152 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      src/views/system/devtools/genCodeParam/ClientModal.vue
  2. 154
      src/views/system/devtools/genCodeParam/client.data.ts
  3. 143
      src/views/system/devtools/genCodeParam/index.vue
  4. 97
      src/views/system/devtools/genCustomObj/ClientModal.vue
  5. 154
      src/views/system/devtools/genCustomObj/client.data.ts
  6. 143
      src/views/system/devtools/genCustomObj/index.vue
  7. 97
      src/views/system/devtools/genDataBaseType/ClientModal.vue
  8. 154
      src/views/system/devtools/genDataBaseType/client.data.ts
  9. 143
      src/views/system/devtools/genDataBaseType/index.vue
  10. 97
      src/views/system/devtools/genQueryType/ClientModal.vue
  11. 154
      src/views/system/devtools/genQueryType/client.data.ts
  12. 143
      src/views/system/devtools/genQueryType/index.vue
  13. 97
      src/views/system/devtools/genShowType/ClientModal.vue
  14. 154
      src/views/system/devtools/genShowType/client.data.ts
  15. 143
      src/views/system/devtools/genShowType/index.vue
  16. 97
      src/views/system/devtools/genTable/ClientModal.vue
  17. 154
      src/views/system/devtools/genTable/client.data.ts
  18. 143
      src/views/system/devtools/genTable/index.vue
  19. 97
      src/views/system/devtools/genValidateType/ClientModal.vue
  20. 154
      src/views/system/devtools/genValidateType/client.data.ts
  21. 143
      src/views/system/devtools/genValidateType/index.vue
  22. 97
      src/views/system/devtools/template/ClientModal.vue
  23. 154
      src/views/system/devtools/template/client.data.ts
  24. 143
      src/views/system/devtools/template/index.vue

97
src/views/system/devtools/genCodeParam/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/genCodeParam/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/genCodeParam/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

97
src/views/system/devtools/genCustomObj/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/genCustomObj/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/genCustomObj/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

97
src/views/system/devtools/genDataBaseType/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/genDataBaseType/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/genDataBaseType/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

97
src/views/system/devtools/genQueryType/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/genQueryType/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/genQueryType/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

97
src/views/system/devtools/genShowType/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/genShowType/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/genShowType/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

97
src/views/system/devtools/genTable/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/genTable/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/genTable/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

97
src/views/system/devtools/genValidateType/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/genValidateType/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/genValidateType/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

97
src/views/system/devtools/template/ClientModal.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './client.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

154
src/views/system/devtools/template/client.data.ts
Unescape View File

@ -0,0 +1,154 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
label: '客户端编码',
component: 'Input',
componentProps: {
placeholder: '请输入客户端编码',
},
colProps: { span: 8 },
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

143
src/views/system/devtools/template/index.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除客户端</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './client.data';
import { useMessage } from '/@/hooks/web/useMessage';
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>
Write Preview
Loading…
Cancel
Save