feat: 添加产品编辑功能，整合编辑组件到产品列表，支持产品信息的修改
This commit is contained in:
172
src/views/product/components/edit.vue
Normal file
172
src/views/product/components/edit.vue
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, 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.subscription.products.post>;
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'ProductEdit'
|
||||||
|
});
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
data: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'close'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const formInst = useTemplateRef<FormInst>('formInst');
|
||||||
|
const form = ref<Body>({
|
||||||
|
name: '',
|
||||||
|
price: '',
|
||||||
|
cycleDays: 1,
|
||||||
|
maturityYield: '',
|
||||||
|
subscribeStartAt: new Date(),
|
||||||
|
subscribeEndAt: new Date(),
|
||||||
|
description: '',
|
||||||
|
isActive: true,
|
||||||
|
reformPioneerAllowance: '',
|
||||||
|
sortOrder: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
name: [{ required: true, message: '请输入产品名称', trigger: ['blur', 'input'] }],
|
||||||
|
price: [{ required: true, message: '请输入产品价格', trigger: ['blur', 'change'] }],
|
||||||
|
maturityYield: [{ required: true, message: '请输入到期收益率', trigger: ['blur', 'change'] }],
|
||||||
|
subscribeStartAt: [{ required: true, message: '请选择订阅时间范围', trigger: ['blur', 'change'] }]
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleSubmit() {
|
||||||
|
formInst.value?.validate(async errors => {
|
||||||
|
if (!errors) {
|
||||||
|
await safeClient(() =>
|
||||||
|
client.api.admin.subscription.products({ productId: props.data.id }).put({
|
||||||
|
...form.value
|
||||||
|
})
|
||||||
|
);
|
||||||
|
window.$message?.success('更新成功');
|
||||||
|
emit('close');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
form.value = {
|
||||||
|
name: props.data.name || '',
|
||||||
|
price: String(props.data.price || ''),
|
||||||
|
cycleDays: props.data.cycleDays || 1,
|
||||||
|
maturityYield: String(props.data.maturityYield || ''),
|
||||||
|
subscribeStartAt: props.data.subscribeStartAt ? new Date(props.data.subscribeStartAt) : new Date(),
|
||||||
|
subscribeEndAt: props.data.subscribeEndAt ? new Date(props.data.subscribeEndAt) : new Date(),
|
||||||
|
description: props.data.description || '',
|
||||||
|
isActive: props.data.isActive ?? true,
|
||||||
|
reformPioneerAllowance: String(props.data.reformPioneerAllowance || ''),
|
||||||
|
sortOrder: props.data.sortOrder || 0
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-10">
|
||||||
|
<NForm
|
||||||
|
ref="formInst"
|
||||||
|
:model="form"
|
||||||
|
label-width="140px"
|
||||||
|
label-placement="left"
|
||||||
|
:rules="rules"
|
||||||
|
require-mark-placement="left"
|
||||||
|
>
|
||||||
|
<NFormItem path="name" label="产品名称">
|
||||||
|
<NInput v-model:value="form.name" placeholder="请输入产品名称" />
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NGrid :cols="2" :x-gap="12">
|
||||||
|
<NFormItemGi path="price" label="产品价格">
|
||||||
|
<NInputNumber
|
||||||
|
:value="Number(form.price)"
|
||||||
|
:min="0"
|
||||||
|
:precision="2"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="val => (form.price = String(val))"
|
||||||
|
>
|
||||||
|
<template #suffix>元</template>
|
||||||
|
</NInputNumber>
|
||||||
|
</NFormItemGi>
|
||||||
|
|
||||||
|
<NFormItemGi path="cycleDays" label="周期天数">
|
||||||
|
<NInputNumber v-model:value="form.cycleDays" :min="1" :precision="0" class="w-full">
|
||||||
|
<template #suffix>天</template>
|
||||||
|
</NInputNumber>
|
||||||
|
</NFormItemGi>
|
||||||
|
</NGrid>
|
||||||
|
|
||||||
|
<NGrid :cols="2" :x-gap="12">
|
||||||
|
<NFormItemGi path="maturityYield" label="到期收益率">
|
||||||
|
<NInputNumber
|
||||||
|
:value="Number(form.maturityYield)"
|
||||||
|
:min="0"
|
||||||
|
:max="100"
|
||||||
|
:step="0.01"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="val => (form.maturityYield = String(val))"
|
||||||
|
>
|
||||||
|
<template #suffix>%</template>
|
||||||
|
</NInputNumber>
|
||||||
|
</NFormItemGi>
|
||||||
|
|
||||||
|
<NFormItemGi path="reformPioneerAllowance" label="改革先锋津贴">
|
||||||
|
<NInputNumber
|
||||||
|
:value="Number(form.reformPioneerAllowance)"
|
||||||
|
:min="0"
|
||||||
|
:precision="2"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="val => (form.reformPioneerAllowance = String(val))"
|
||||||
|
>
|
||||||
|
<template #suffix>元</template>
|
||||||
|
</NInputNumber>
|
||||||
|
</NFormItemGi>
|
||||||
|
</NGrid>
|
||||||
|
|
||||||
|
<NFormItem label="订阅时间范围">
|
||||||
|
<NDatePicker
|
||||||
|
:value="[form.subscribeStartAt.valueOf(), form.subscribeEndAt.valueOf()]"
|
||||||
|
type="datetimerange"
|
||||||
|
clearable
|
||||||
|
format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="
|
||||||
|
val => {
|
||||||
|
form.subscribeStartAt = new Date(val[0]);
|
||||||
|
form.subscribeEndAt = new Date(val[1]);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NFormItem path="description" label="产品描述">
|
||||||
|
<NInput v-model:value="form.description" type="textarea" placeholder="请输入产品描述" :rows="3" />
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NGrid :cols="2" :x-gap="12">
|
||||||
|
<NFormItemGi path="isActive" label="是否启用">
|
||||||
|
<NSwitch v-model:value="form.isActive" />
|
||||||
|
</NFormItemGi>
|
||||||
|
|
||||||
|
<NFormItemGi path="sortOrder" label="排序顺序">
|
||||||
|
<NInputNumber v-model:value="form.sortOrder" :min="0" :precision="0" class="w-full" />
|
||||||
|
</NFormItemGi>
|
||||||
|
</NGrid>
|
||||||
|
|
||||||
|
<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>
|
||||||
@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
|
|||||||
import { client, safeClient } from '@/service/api';
|
import { client, safeClient } from '@/service/api';
|
||||||
import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
|
import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
|
||||||
import Add from './components/add.vue';
|
import Add from './components/add.vue';
|
||||||
|
import Edit from './components/edit.vue';
|
||||||
|
|
||||||
const message = useMessage();
|
const message = useMessage();
|
||||||
const dialog = useDialog();
|
const dialog = useDialog();
|
||||||
@@ -102,7 +103,9 @@ const columns: TableBaseColumns = [
|
|||||||
{
|
{
|
||||||
contentText: '编辑',
|
contentText: '编辑',
|
||||||
size: 'small',
|
size: 'small',
|
||||||
onClick() {}
|
onClick() {
|
||||||
|
handleEdit(row);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -122,6 +125,22 @@ function handleAdd() {
|
|||||||
style: { width: '800px' }
|
style: { width: '800px' }
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleEdit(row: any) {
|
||||||
|
const d = dialog.create({
|
||||||
|
title: '编辑产品',
|
||||||
|
showIcon: false,
|
||||||
|
style: { width: '800px' },
|
||||||
|
content: () =>
|
||||||
|
h(Edit, {
|
||||||
|
data: row,
|
||||||
|
onClose: () => {
|
||||||
|
d.destroy();
|
||||||
|
tableInst.value?.reload();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
Reference in New Issue
Block a user