feat: 添加产品类型的新增和编辑功能；更新表格组件以支持对话框操作
This commit is contained in:
68
src/views/rwa/producttype/components/add.vue
Normal file
68
src/views/rwa/producttype/components/add.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, useTemplateRef } from 'vue';
|
||||||
|
import type { FormInst, FormRules } from 'naive-ui';
|
||||||
|
import { client, safeClient } from '@/service/api';
|
||||||
|
|
||||||
|
type Body = CommonType.TreatyBody<typeof client.api.admin.rwa.category.categories.post>;
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'close'): void;
|
||||||
|
}>();
|
||||||
|
const formInst = useTemplateRef<FormInst>('formInst');
|
||||||
|
const form = ref<Body>({
|
||||||
|
name: '',
|
||||||
|
code: '',
|
||||||
|
description: '',
|
||||||
|
displayOrder: 0
|
||||||
|
});
|
||||||
|
const rules: FormRules = {
|
||||||
|
name: [{ required: true, message: '请输入分类名称', trigger: ['blur', 'input'] }],
|
||||||
|
code: [{ required: true, message: '请输入分类编号', trigger: ['blur', 'input'] }]
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleSubmit() {
|
||||||
|
formInst.value?.validate(async errors => {
|
||||||
|
if (!errors) {
|
||||||
|
await safeClient(() =>
|
||||||
|
client.api.admin.rwa.category.categories.post({
|
||||||
|
...form.value
|
||||||
|
})
|
||||||
|
);
|
||||||
|
emit('close');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-10">
|
||||||
|
<NForm
|
||||||
|
ref="formInst"
|
||||||
|
:model="form"
|
||||||
|
label-width="auto"
|
||||||
|
label-placement="left"
|
||||||
|
:rules="rules"
|
||||||
|
require-mark-placement="left"
|
||||||
|
>
|
||||||
|
<NFormItem path="name" label="分类名称">
|
||||||
|
<NInput v-model:value="form.name" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem path="code" label="分类编号">
|
||||||
|
<NInput v-model:value="form.code" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem path="description" label="描述">
|
||||||
|
<NInput v-model:value="form.description" type="textarea" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem path="displayOrder" label="排序">
|
||||||
|
<NInputNumber v-model:value="form.displayOrder" />
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NSpace justify="end">
|
||||||
|
<NButton type="primary" ghost @click="$emit('close')">取 消</NButton>
|
||||||
|
<NButton type="primary" @click="handleSubmit">创 建</NButton>
|
||||||
|
</NSpace>
|
||||||
|
</NForm>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="css" scoped></style>
|
||||||
73
src/views/rwa/producttype/components/edit.vue
Normal file
73
src/views/rwa/producttype/components/edit.vue
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, useTemplateRef } from 'vue';
|
||||||
|
import type { FormInst, FormRules } from 'naive-ui';
|
||||||
|
import type { Treaty } from '@elysiajs/eden';
|
||||||
|
import { client, safeClient } from '@/service/api';
|
||||||
|
|
||||||
|
type Body = CommonType.TreatyBody<typeof client.api.admin.rwa.category.categories.post>;
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
data: Treaty.Data<typeof client.api.admin.rwa.category.categories.post>;
|
||||||
|
}>();
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'close'): void;
|
||||||
|
}>();
|
||||||
|
const formInst = useTemplateRef<FormInst>('formInst');
|
||||||
|
const form = ref<Body>({
|
||||||
|
id: props.data.id,
|
||||||
|
name: props.data.name,
|
||||||
|
code: props.data.code,
|
||||||
|
description: props.data.description,
|
||||||
|
displayOrder: props.data.displayOrder
|
||||||
|
});
|
||||||
|
const rules: FormRules = {
|
||||||
|
name: [{ required: true, message: '请输入分类名称', trigger: ['blur', 'input'] }],
|
||||||
|
code: [{ required: true, message: '请输入分类编号', trigger: ['blur', 'input'] }]
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleSubmit() {
|
||||||
|
formInst.value?.validate(async errors => {
|
||||||
|
if (!errors) {
|
||||||
|
await safeClient(() =>
|
||||||
|
client.api.admin.rwa.category.categories.put({
|
||||||
|
...form.value
|
||||||
|
})
|
||||||
|
);
|
||||||
|
emit('close');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-10">
|
||||||
|
<NForm
|
||||||
|
ref="formInst"
|
||||||
|
:model="form"
|
||||||
|
label-width="auto"
|
||||||
|
label-placement="left"
|
||||||
|
:rules="rules"
|
||||||
|
require-mark-placement="left"
|
||||||
|
>
|
||||||
|
<NFormItem path="name" label="分类名称">
|
||||||
|
<NInput v-model:value="form.name" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem path="code" label="分类编号">
|
||||||
|
<NInput v-model:value="form.code" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem path="description" label="描述">
|
||||||
|
<NInput v-model:value="form.description" type="textarea" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem path="displayOrder" label="排序">
|
||||||
|
<NInputNumber v-model:value="form.displayOrder" />
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NSpace justify="end">
|
||||||
|
<NButton type="primary" ghost @click="$emit('close')">取 消</NButton>
|
||||||
|
<NButton type="primary" @click="handleSubmit">更 新</NButton>
|
||||||
|
</NSpace>
|
||||||
|
</NForm>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="css" scoped></style>
|
||||||
@@ -1,9 +1,11 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useTemplateRef } from 'vue';
|
import { h, useTemplateRef } from 'vue';
|
||||||
import { useDateFormat } from '@vueuse/core';
|
import { useDateFormat } from '@vueuse/core';
|
||||||
import { useDialog, useMessage } from 'naive-ui';
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
import { client, safeClient } from '@/service/api';
|
import { client, safeClient } from '@/service/api';
|
||||||
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
||||||
|
import Add from './components/add.vue';
|
||||||
|
import Edit from './components/edit.vue';
|
||||||
|
|
||||||
const dialog = useDialog();
|
const dialog = useDialog();
|
||||||
const message = useMessage();
|
const message = useMessage();
|
||||||
@@ -54,28 +56,24 @@ const columns: TableBaseColumns = [
|
|||||||
contentText: '编辑',
|
contentText: '编辑',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
ghost: true,
|
ghost: true,
|
||||||
onClick: () => {
|
size: 'small',
|
||||||
tableInst.value?.reload();
|
onClick: () => handleEdit(row)
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
contentText: '删除',
|
contentText: '删除',
|
||||||
type: 'error',
|
type: 'error',
|
||||||
ghost: true,
|
ghost: true,
|
||||||
|
size: 'small',
|
||||||
onClick: async () => {
|
onClick: async () => {
|
||||||
dialog.create({
|
dialog.create({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
positiveText: '是',
|
positiveText: '是',
|
||||||
negativeText: '否',
|
negativeText: '否',
|
||||||
content: '确认删除该银行信息？',
|
content: '确认删除该信息？',
|
||||||
onPositiveClick: async () => {
|
onPositiveClick: async () => {
|
||||||
safeClient(() =>
|
await safeClient(() => client.api.admin.rwa.category.categories({ id: row.id as string }).delete());
|
||||||
client.api.admin.deposit.reject({ orderId: row.id as string }).post({
|
|
||||||
reviewNote: '管理员拒绝充值'
|
|
||||||
})
|
|
||||||
);
|
|
||||||
// tableInst.value?.reload();
|
|
||||||
message.success('删除成功');
|
message.success('删除成功');
|
||||||
|
tableInst.value?.reload();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -84,16 +82,40 @@ const columns: TableBaseColumns = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const filterColumns: TableFilterColumns = [
|
function handleAdd() {
|
||||||
{
|
const dialogInstance = dialog.create({
|
||||||
title: '名称',
|
title: '添加产品类型',
|
||||||
key: 'name'
|
content: () =>
|
||||||
|
h(Add, {
|
||||||
|
onClose: () => {
|
||||||
|
dialogInstance?.destroy();
|
||||||
|
tableInst.value?.reload();
|
||||||
}
|
}
|
||||||
];
|
}),
|
||||||
|
style: { width: '600px' },
|
||||||
|
closable: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(data: any) {
|
||||||
|
const dialogInstance = dialog.create({
|
||||||
|
title: '编辑产品类型',
|
||||||
|
content: () =>
|
||||||
|
h(Edit, {
|
||||||
|
data,
|
||||||
|
onClose: () => {
|
||||||
|
dialogInstance?.destroy();
|
||||||
|
tableInst.value?.reload();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
style: { width: '600px' },
|
||||||
|
closable: true
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<TableBase ref="tableInst" :columns="columns" :fetch-data="fetchData" :filter-columns="filterColumns" />
|
<TableBase ref="tableInst" :columns="columns" :fetch-data="fetchData" @add="handleAdd" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="css" scoped></style>
|
<style lang="css" scoped></style>
|
||||||
|
|||||||
Reference in New Issue
Block a user