更新环境配置，修正服务地址；新增 RWA 产品管理相关组件及功能；优化表格数据展示及状态渲染逻辑

2025-12-22 00:17:52 +07:00
parent 7423d210f4
commit 4c9cf042f0
10 changed files with 250 additions and 27 deletions
--- a/src/views/rwa/product/components/add.vue
+++ b/src/views/rwa/product/components/add.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { ref, useTemplateRef } from 'vue';
+import type { FormInst, FormRules } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
+
+defineOptions({ name: 'RwaProductAdd' });
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+type Body = CommonType.TreatyBody<typeof client.api.admin.rwa.issuance.products.post>;
+
+const formInst = useTemplateRef<FormInst>('formInst');
+const { data } = safeClient(
+  client.api.admin.rwa.category.categories.get({
+    query: {
+      pageIndex: 1,
+      pageSize: 9999
+    }
+  })
+);
+
+const form = ref<Body>({
+  name: '',
+  code: '',
+  categoryId: '',
+  description: ''
+});
+
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入产品名称', trigger: ['blur', 'input'] }],
+  code: [{ required: true, message: '请输入产品编号', trigger: ['blur', 'input'] }],
+  categoryId: [{ required: true, message: '请输入产品类型', trigger: ['blur', 'input'] }],
+  estimatedValue: [{ required: true, message: '请输入产品估值', trigger: ['blur', 'input'] }],
+  totalSupplyLimit: [{ required: true, message: '请输入总发行量', trigger: ['blur', 'input'] }]
+};
+
+function handleSubmit() {
+  formInst.value?.validate(async errors => {
+    if (!errors) {
+      await safeClient(
+        client.api.admin.rwa.issuance.products.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="categoryId" label="产品类型">
+        <NSelect
+          :value="form.categoryId || null"
+          :options="data?.data?.map(item => ({ label: item.name, value: item.id }))"
+          @update:value="val => (form.categoryId = val as string)"
+        />
+      </NFormItem>
+      <NFormItem path="estimatedValue" label="产品估值">
+        <NInput v-model:value="form.estimatedValue" />
+      </NFormItem>
+      <NFormItem path="totalSupplyLimit" label="总发行量">
+        <NInput v-model:value="form.totalSupplyLimit" />
+      </NFormItem>
+      <NFormItem path="description" label="产品描述">
+        <NInput v-model:value="form.description" type="textarea" />
+      </NFormItem>
+      <NFormItem path="proofDocuments" label="资产证明 ">
+        <NUpload
+          action="https://naive-upload.free.beeceptor.com/"
+          :headers="{ 'naive-info': 'hello!' }"
+          :data="{
+            'naive-data': 'cool! naive!'
+          }"
+        >
+          <NButton>上传文件</NButton>
+        </NUpload>
+      </NFormItem>
+      <NSpace justify="end">
+        <NButton @click="$emit('close')">取 消</NButton>
+        <NButton type="primary" @click="handleSubmit">确 认</NButton>
+      </NSpace>
+    </NForm>
+  </div>
+</template>
+
+<style lang="css" scoped></style>
--- a/src/views/rwa/product/index.vue
+++ b/src/views/rwa/product/index.vue
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-import { useTemplateRef } from 'vue';
+import { h, useTemplateRef } from 'vue';
+import { useDateFormat } from '@vueuse/core';
 import { NDatePicker, useDialog, useMessage } from 'naive-ui';
 import { client, safeClient } from '@/service/api';
 import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
+import { RwaStatusEnum } from '@/enum';
+import Add from './components/add.vue';

 const dialog = useDialog();
 const message = useMessage();
@@ -21,8 +24,10 @@ const fetchData: TableFetchData = ({ pagination, filter }) => {

 const columns: TableBaseColumns = [
  {
-    title: 'ID',
-    key: 'id'
+    key: 'selection',
+    title: '序号',
+    type: 'selection',
+    width: 60
  },
  {
    title: '产品代码',
@@ -48,12 +53,15 @@ const columns: TableBaseColumns = [
    title: '创建时间',
    key: 'createdAt',
    render: (row: any) => {
-      return new Date(row.createdAt).toLocaleDateString();
+      return useDateFormat(row.createdAt, 'YYYY-MM-DD HH:mm').value;
    }
  },
  {
    title: '状态',
-    key: 'status'
+    key: 'status',
+    render: row => {
+      return RwaStatusEnum[row.status as keyof typeof RwaStatusEnum];
+    }
  },
  {
    title: '描述',
@@ -119,6 +127,25 @@ const filterColumns: TableFilterColumns = [
    component: NDatePicker
  }
 ];
+
+function handleAdd() {
+  const dialogInstance = dialog.create({
+    title: '添加产品',
+    content: () =>
+      h(Add, {
+        onClose: () => {
+          dialogInstance.destroy();
+          tableInst.value?.reload();
+        }
+      }),
+    style: { width: '600px' },
+    showIcon: false,
+    onPositiveClick: () => {
+      message.success('添加成功');
+      tableInst.value?.reload();
+    }
+  });
+}
 </script>

 <template>
@@ -128,6 +155,7 @@ const filterColumns: TableFilterColumns = [
    :columns="columns"
    :filter-columns="filterColumns"
    :fetch-data="fetchData"
+    @add="handleAdd"
  />
 </template>