feat: update

src/layoput/index.vue

@@ -21,10 +21,13 @@
         </div>
       </n-layout-header>
       <n-layout-content
-        content-style="padding: 24px;"
+        style="height: calc(100vh - 64px)"
+        content-style="padding: 24px; height: 100%"
         :native-scrollbar="false"
       >
-        <RouterView />
+        <n-card class="h-full">
+          <RouterView />
+        </n-card>
       </n-layout-content>
     </n-layout>
   </n-layout>

src/views/data/source/index.vue

@@ -1,45 +1,90 @@
 <template>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    :bordered="false"
-  />
+  <n-space vertical>
+    <n-space justify="space-between">
+      <n-input-group>
+        <n-input style="width: 300px" placeholder="请输入项目名称" />
+        <n-button type="primary"> 搜索 </n-button>
+      </n-input-group>
+      <n-button type="primary" @click="handleAdd">新增</n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+    />
+  </n-space>
+  <n-modal
+    :show-icon="false"
+    v-model:show="modal.showModal"
+    preset="dialog"
+    :title="modal.title"
+    positive-text="提交"
+    negative-text="取消"
+    @positive-click="submitCallback"
+  >
+    <n-form
+      :model="form"
+      label-placement="left"
+      label-width="auto"
+      require-mark-placement="right-hanging"
+    >
+      <n-form-item label="项目名称" path="inputValue">
+        <n-input v-model:value="form.inputValue" />
+      </n-form-item>
+      <n-form-item label="描述" path="textareaValue">
+        <n-input
+          v-model:value="form.textareaValue"
+          type="textarea"
+          :autosize="{
+            minRows: 3,
+            maxRows: 5,
+          }"
+        />
+      </n-form-item>
+    </n-form>
+  </n-modal>
 </template>
 
 <script setup>
 import { h } from "vue";
-import { NButton } from "naive-ui";
+import { NButton, NSpace } from "naive-ui";
 
-const message = useMessage();
-
-const createColumns = ({ play }) => {
+const createColumns = ({ goToView }) => {
   return [
     {
-      title: "No",
+      title: "项目名称",
       key: "no",
     },
     {
-      title: "Title",
+      title: "描述",
       key: "title",
     },
     {
-      title: "Length",
+      title: "时间",
       key: "length",
     },
     {
-      title: "Action",
+      title: "操作",
       key: "actions",
-      render(row) {
+      render() {
         return h(
-          NButton,
+          NSpace,
+          {},
           {
-            strong: true,
-            tertiary: true,
-            size: "small",
-            onClick: () => play(row),
-          },
-          { default: () => "Play" }
+            default: () =>
+              ["删除"].map((item) =>
+                h(
+                  NButton,
+                  {
+                    type: "error",
+                    size: "small",
+                    onClick: () => {},
+                  },
+                  { default: () => item }
+                )
+              ),
+          }
         );
       },
     },
@@ -52,12 +97,26 @@ const data = [
   { no: 12, title: "Champagne Supernova", length: "7:27" },
 ];
 
-const columns = createColumns({
-  play(row) {
-    message.info(`Play ${row.title}`);
-  },
-});
+const columns = createColumns({});
 const pagination = ref(false);
+
+const modal = reactive({
+  title: "",
+  showModal: false,
+});
+
+const submitCallback = () => {
+  console.log("确定");
+};
+const handleAdd = () => {
+  modal.showModal = true;
+  modal.title = "新增";
+};
+
+const form = reactive({
+  inputValue: "",
+  textareaValue: "",
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

src/views/equipment/index.vue

@@ -1,45 +1,90 @@
 <template>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    :bordered="false"
-  />
+  <n-space vertical>
+    <n-space justify="space-between">
+      <n-input-group>
+        <n-input style="width: 300px" placeholder="请输入项目名称" />
+        <n-button type="primary"> 搜索 </n-button>
+      </n-input-group>
+      <n-button type="primary" @click="handleAdd">新增</n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+    />
+  </n-space>
+  <n-modal
+    :show-icon="false"
+    v-model:show="modal.showModal"
+    preset="dialog"
+    :title="modal.title"
+    positive-text="提交"
+    negative-text="取消"
+    @positive-click="submitCallback"
+  >
+    <n-form
+      :model="form"
+      label-placement="left"
+      label-width="auto"
+      require-mark-placement="right-hanging"
+    >
+      <n-form-item label="项目名称" path="inputValue">
+        <n-input v-model:value="form.inputValue" />
+      </n-form-item>
+      <n-form-item label="描述" path="textareaValue">
+        <n-input
+          v-model:value="form.textareaValue"
+          type="textarea"
+          :autosize="{
+            minRows: 3,
+            maxRows: 5,
+          }"
+        />
+      </n-form-item>
+    </n-form>
+  </n-modal>
 </template>
 
 <script setup>
 import { h } from "vue";
-import { NButton } from "naive-ui";
+import { NButton, NSpace } from "naive-ui";
 
-const message = useMessage();
-
-const createColumns = ({ play }) => {
+const createColumns = ({ goToView }) => {
   return [
     {
-      title: "No",
+      title: "项目名称",
       key: "no",
     },
     {
-      title: "Title",
+      title: "描述",
       key: "title",
     },
     {
-      title: "Length",
+      title: "时间",
       key: "length",
     },
     {
-      title: "Action",
+      title: "操作",
       key: "actions",
-      render(row) {
+      render() {
         return h(
-          NButton,
+          NSpace,
+          {},
           {
-            strong: true,
-            tertiary: true,
-            size: "small",
-            onClick: () => play(row),
-          },
-          { default: () => "Play" }
+            default: () =>
+              ["删除"].map((item) =>
+                h(
+                  NButton,
+                  {
+                    type: "error",
+                    size: "small",
+                    onClick: () => {},
+                  },
+                  { default: () => item }
+                )
+              ),
+          }
         );
       },
     },
@@ -52,12 +97,26 @@ const data = [
   { no: 12, title: "Champagne Supernova", length: "7:27" },
 ];
 
-const columns = createColumns({
-  play(row) {
-    message.info(`Play ${row.title}`);
-  },
-});
+const columns = createColumns({});
 const pagination = ref(false);
+
+const modal = reactive({
+  title: "",
+  showModal: false,
+});
+
+const submitCallback = () => {
+  console.log("确定");
+};
+const handleAdd = () => {
+  modal.showModal = true;
+  modal.title = "新增";
+};
+
+const form = reactive({
+  inputValue: "",
+  textareaValue: "",
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

src/views/report/audit/index.vue

@@ -1,45 +1,90 @@
 <template>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    :bordered="false"
-  />
+  <n-space vertical>
+    <n-space justify="space-between">
+      <n-input-group>
+        <n-input style="width: 300px" placeholder="请输入项目名称" />
+        <n-button type="primary"> 搜索 </n-button>
+      </n-input-group>
+      <n-button type="primary" @click="handleAdd">新增</n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+    />
+  </n-space>
+  <n-modal
+    :show-icon="false"
+    v-model:show="modal.showModal"
+    preset="dialog"
+    :title="modal.title"
+    positive-text="提交"
+    negative-text="取消"
+    @positive-click="submitCallback"
+  >
+    <n-form
+      :model="form"
+      label-placement="left"
+      label-width="auto"
+      require-mark-placement="right-hanging"
+    >
+      <n-form-item label="项目名称" path="inputValue">
+        <n-input v-model:value="form.inputValue" />
+      </n-form-item>
+      <n-form-item label="描述" path="textareaValue">
+        <n-input
+          v-model:value="form.textareaValue"
+          type="textarea"
+          :autosize="{
+            minRows: 3,
+            maxRows: 5,
+          }"
+        />
+      </n-form-item>
+    </n-form>
+  </n-modal>
 </template>
 
 <script setup>
 import { h } from "vue";
-import { NButton } from "naive-ui";
+import { NButton, NSpace } from "naive-ui";
 
-const message = useMessage();
-
-const createColumns = ({ play }) => {
+const createColumns = ({ goToView }) => {
   return [
     {
-      title: "No",
+      title: "项目名称",
       key: "no",
     },
     {
-      title: "Title",
+      title: "描述",
       key: "title",
     },
     {
-      title: "Length",
+      title: "时间",
       key: "length",
     },
     {
-      title: "Action",
+      title: "操作",
       key: "actions",
-      render(row) {
+      render() {
         return h(
-          NButton,
+          NSpace,
+          {},
           {
-            strong: true,
-            tertiary: true,
-            size: "small",
-            onClick: () => play(row),
-          },
-          { default: () => "Play" }
+            default: () =>
+              ["删除"].map((item) =>
+                h(
+                  NButton,
+                  {
+                    type: "error",
+                    size: "small",
+                    onClick: () => {},
+                  },
+                  { default: () => item }
+                )
+              ),
+          }
         );
       },
     },
@@ -52,12 +97,26 @@ const data = [
   { no: 12, title: "Champagne Supernova", length: "7:27" },
 ];
 
-const columns = createColumns({
-  play(row) {
-    message.info(`Play ${row.title}`);
-  },
-});
+const columns = createColumns({});
 const pagination = ref(false);
+
+const modal = reactive({
+  title: "",
+  showModal: false,
+});
+
+const submitCallback = () => {
+  console.log("确定");
+};
+const handleAdd = () => {
+  modal.showModal = true;
+  modal.title = "新增";
+};
+
+const form = reactive({
+  inputValue: "",
+  textareaValue: "",
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

src/views/report/create/index.vue

@@ -1,45 +1,90 @@
 <template>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    :bordered="false"
-  />
+  <n-space vertical>
+    <n-space justify="space-between">
+      <n-input-group>
+        <n-input style="width: 300px" placeholder="请输入项目名称" />
+        <n-button type="primary"> 搜索 </n-button>
+      </n-input-group>
+      <n-button type="primary" @click="handleAdd">新增</n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+    />
+  </n-space>
+  <n-modal
+    :show-icon="false"
+    v-model:show="modal.showModal"
+    preset="dialog"
+    :title="modal.title"
+    positive-text="提交"
+    negative-text="取消"
+    @positive-click="submitCallback"
+  >
+    <n-form
+      :model="form"
+      label-placement="left"
+      label-width="auto"
+      require-mark-placement="right-hanging"
+    >
+      <n-form-item label="项目名称" path="inputValue">
+        <n-input v-model:value="form.inputValue" />
+      </n-form-item>
+      <n-form-item label="描述" path="textareaValue">
+        <n-input
+          v-model:value="form.textareaValue"
+          type="textarea"
+          :autosize="{
+            minRows: 3,
+            maxRows: 5,
+          }"
+        />
+      </n-form-item>
+    </n-form>
+  </n-modal>
 </template>
 
 <script setup>
 import { h } from "vue";
-import { NButton } from "naive-ui";
+import { NButton, NSpace } from "naive-ui";
 
-const message = useMessage();
-
-const createColumns = ({ play }) => {
+const createColumns = ({ goToView }) => {
   return [
     {
-      title: "No",
+      title: "项目名称",
       key: "no",
     },
     {
-      title: "Title",
+      title: "描述",
       key: "title",
     },
     {
-      title: "Length",
+      title: "时间",
       key: "length",
     },
     {
-      title: "Action",
+      title: "操作",
       key: "actions",
-      render(row) {
+      render() {
         return h(
-          NButton,
+          NSpace,
+          {},
           {
-            strong: true,
-            tertiary: true,
-            size: "small",
-            onClick: () => play(row),
-          },
-          { default: () => "Play" }
+            default: () =>
+              ["删除"].map((item) =>
+                h(
+                  NButton,
+                  {
+                    type: "error",
+                    size: "small",
+                    onClick: () => {},
+                  },
+                  { default: () => item }
+                )
+              ),
+          }
         );
       },
     },
@@ -52,12 +97,26 @@ const data = [
   { no: 12, title: "Champagne Supernova", length: "7:27" },
 ];
 
-const columns = createColumns({
-  play(row) {
-    message.info(`Play ${row.title}`);
-  },
-});
+const columns = createColumns({});
 const pagination = ref(false);
+
+const modal = reactive({
+  title: "",
+  showModal: false,
+});
+
+const submitCallback = () => {
+  console.log("确定");
+};
+const handleAdd = () => {
+  modal.showModal = true;
+  modal.title = "新增";
+};
+
+const form = reactive({
+  inputValue: "",
+  textareaValue: "",
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

src/views/report/edit/index.vue

@@ -1,10 +1,12 @@
 <template>
-  <vue-pdf-embed :source="pdfSource" />
+  <n-scrollbar style="max-height: 750px" trigger="none">
+    <vue-pdf-embed :source="pdfSource" />
+  </n-scrollbar>
 </template>
 
 <script setup>
 import VuePdfEmbed from "vue-pdf-embed";
-import pdfSource from "@/assets/1.pdf"
+import pdfSource from "@/assets/1.pdf";
 </script>
 
 <style scoped></style>