Просмотр исходного кода

开始搭建报告撰写界面

Kevin Jiang лет назад: 3
Родитель
Сommit
9241c06ecf

+ 3 - 0
src/components/NavMenu.vue

@@ -72,6 +72,9 @@ function logout(e: MouseEvent) {
       <a-menu-item key="/report/template">
         <RouterLink to="/report/template">模板管理</RouterLink>
       </a-menu-item>
+      <a-menu-item key="/report/create">
+        <RouterLink to="/report/create">创建报告</RouterLink>
+      </a-menu-item>
     </a-sub-menu>
     <a-sub-menu key="/search">
       <template #icon>

+ 6 - 1
src/router/index.ts

@@ -1,7 +1,7 @@
 import { useAuthStore } from "@/stores/auth.store";
 import type { SearchRouteParam } from "@/types/route.type";
 import { createRouter, createWebHistory } from "vue-router";
-import ReportView from "../views/report/ReportView.vue";
+import ReportView from "../views/report/ReportListView.vue";
 import RouteView from "../views/RouteView.vue";
 
 export const router = createRouter({
@@ -27,6 +27,11 @@ export const router = createRouter({
           name: "ReportTemplate",
           component: () => import("../views/report/ReportTemplateView.vue"),
         },
+        {
+          path: "create",
+          name: "ReportCreate",
+          component: () => import("../views/report/ReportCreateView.vue"),
+        },
       ]
     },
     {

+ 35 - 0
src/views/report/ReportCreateView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { PlusOutlined } from '@ant-design/icons-vue';
+import PageHeader from '@/components/PageHeader.vue';
+import RelationCompanyInput from './components/report-create/RelationCompanyInput.vue';
+import ReportCategory from './components/report-create/ReportCategory.vue';
+import ReportMetaTextInputVue from './components/report-create/ReportMetaTextInput.vue';
+</script>
+
+<template>
+  <PageHeader title="报告撰写" />
+  <a-row :gutter="24">
+    <a-col :span="12">
+      <div class="metadata-wrap">
+        <RelationCompanyInput />
+        <ReportCategory />
+        <ReportMetaTextInputVue />
+        <a-button>
+          <template #icon><plus-outlined /></template>
+          添加新项
+        </a-button>
+      </div>
+    </a-col>
+    <a-col :span="12">
+      Logo
+    </a-col>
+  </a-row>
+</template>
+
+<style scoped lang="scss">
+.metadata-wrap {
+  > * {
+    margin-top: 0.5em;
+  }
+}
+</style>

+ 3 - 3
src/views/report/ReportView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import PageHeader from '@/components/PageHeader.vue';
-import QueryBox from './components/QueryBox.vue';
-import CompanySelect from "./components/CompanySelect.vue";
-import ReportItem from './components/ReportItem.vue';
+import QueryBox from './components/report-list/QueryBox.vue';
+import CompanySelect from "./components/report-list/CompanySelect.vue";
+import ReportItem from './components/report-list/ReportItem.vue';
 
 const currentPage = ref(1);
 

+ 62 - 0
src/views/report/components/report-create/RelationCompanyInput.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref, type Ref, watch } from "vue";
+import { debounce } from "lodash";
+
+let lastFetchId = 0;
+
+const data: Ref<string[]> = ref([]);
+const value: Ref<string[]> = ref([]);
+const fetching = ref(false);
+
+const fetchUser = debounce(value => {
+  console.log('fetching user', value);
+  lastFetchId += 1;
+  const fetchId = lastFetchId;
+  data.value = [];
+  fetching.value = true;
+  fetch('https://randomuser.me/api/?results=5')
+    .then(response => response.json())
+    .then(body => {
+      if (fetchId !== lastFetchId) {
+        // for fetch callback order
+        return;
+      }
+      const data = body.results.map((user: any) => ({
+        label: `${user.name.first} ${user.name.last}`,
+        value: user.login.username,
+      }));
+      data.value = data;
+      fetching.value = false;
+    });
+}, 300);
+
+watch(value.value, () => {
+  data.value = [];
+  fetching.value = false;
+});
+</script>
+
+<template>
+  <a-row type="flex" style="align-items: center">
+    <a-col style="width: 100px; text-align: right;">
+      关联企业:
+    </a-col>
+    <a-col flex="1">
+      <a-select
+        v-model:value="value"
+        mode="multiple"
+        label-in-value
+        placeholder="请输入企业名称"
+        style="width: 100%"
+        :filter-option="false"
+        :not-found-content="fetching ? undefined : null"
+        :options="data"
+        @search="fetchUser"
+      >
+        <template v-if="fetching" #notFoundContent>
+          <a-spin size="small" />
+        </template>
+      </a-select>
+    </a-col>
+  </a-row>
+</template>

+ 16 - 0
src/views/report/components/report-create/ReportCategory.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref('');
+</script>
+
+<template>
+  <a-row type="flex" style="align-items: center">
+    <a-col style="width: 100px; text-align: right;">
+      报告类型:
+    </a-col>
+    <a-col flex="1">
+      <a-input v-model="value" placeholder="请输入报告类型" />
+    </a-col>
+  </a-row>
+</template>

+ 18 - 0
src/views/report/components/report-create/ReportMetaTextInput.vue

@@ -0,0 +1,18 @@
+<!-- 报告元数据文本输入类型组件 -->
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref('');
+</script>
+
+<template>
+  <a-row type="flex" style="align-items: center">
+    <a-col style="width: 100px">
+      <a-space><a-input style="width: 100%" />:</a-space>
+    </a-col>
+    <a-col flex="1">
+      <a-input v-model="value" placeholder="请输入报告类型" />
+    </a-col>
+  </a-row>
+</template>

src/views/report/components/CompanySelect.vue → src/views/report/components/report-list/CompanySelect.vue


src/views/report/components/CompanySelectItem.vue → src/views/report/components/report-list/CompanySelectItem.vue


src/views/report/components/QueryBox.vue → src/views/report/components/report-list/QueryBox.vue


src/views/report/components/ReportItem.vue → src/views/report/components/report-list/ReportItem.vue